/* The Akhand Sadhna dial's WebGL layer (schema patch 39.21; assets/js/sadhna-dial-3d.js, tools/patch-spa.py DIAL3D_PATCHES).
   .djjs-dial3d wraps the SVG dial: <djjs-dial-3d> fills it underneath, the SVG lies on top with every ray, label and button. While
   the layer draws (data-on), the SVG's face (r 88) shows the layer's face through it (its hairline stays) and its minute dot
   gives way to the layer's sun. Without WebGL nothing here applies and the SVG dial is unchanged. */
.djjs-dial3d { position: relative; display: block; }
.djjs-dial3d > .djjs-dial3d__svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
djjs-dial-3d { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
djjs-dial-3d > canvas { display: block; width: 100%; height: 100%; }
djjs-dial-3d[data-on] + .djjs-dial3d__svg > circle[r="88"] { fill-opacity: 0; }
djjs-dial-3d[data-on] + .djjs-dial3d__svg > circle[r="5.5"] { opacity: 0; }
@media (forced-colors: active) {
  djjs-dial-3d { display: none; }   /* high contrast: the SVG dial alone, with its own face and dot */
  djjs-dial-3d[data-on] + .djjs-dial3d__svg > circle[r="88"] { fill-opacity: 1; }
  djjs-dial-3d[data-on] + .djjs-dial3d__svg > circle[r="5.5"] { opacity: 1; }
}

/* schema patch 39.23: the public site's and the desks' drawer (assets/js/sadhna-global.js): the wrapper takes the dial's size */
.djjs-dial__stage .djjs-dial3d { width: 100%; max-width: 360px; }
.djjs-dial__stage .djjs-dial3d > .djjs-dial3d__svg { max-width: none; }

/* schema patch 39.23: one legend for every drawer (the portal's, tools/patch-spa.py HELD_PATCHES; the public site's and the desks',
   assets/js/sadhna-global.js): golden badges, each with a swatch of what it names on the dial. Text takes the surface's colour. */
.djjs-dial-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.djjs-dial-legend__i { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 7px; border-radius: 999px;
  border: 1px solid rgba(217, 119, 6, .35); background: rgba(245, 158, 11, .08); color: inherit; line-height: 1.3; }
.djjs-dial-legend__i::before { content: ""; flex: none; width: 16px; height: 9px; border-radius: 3px; }
.djjs-dial-legend__i.is-held::before { background: linear-gradient(90deg, #8A5A12, #FCD34D 50%, #A86B14); box-shadow: 0 0 5px rgba(245, 158, 11, .55); }
.djjs-dial-legend__i.is-open::before { background: linear-gradient(90deg, #3a2a18, #6b4d2c 50%, #3a2a18); outline: 1px dashed rgba(248, 113, 113, .8); outline-offset: 1px; }
.djjs-dial-legend__i.is-live::before { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #FFF7DC 0 30%, #FCD34D 45%, #F59E0B 70%); box-shadow: 0 0 7px rgba(252, 211, 77, .85); }
.djjs-dial-legend__i.is-mine::before { background: linear-gradient(90deg, #B45309, #FF8F1F 50%, #B45309); box-shadow: 0 0 6px rgba(255, 143, 31, .7); }
@media (forced-colors: active) { .djjs-dial-legend__i::before { forced-color-adjust: none; } }