/* The compass figure's stylesheet, loaded after calc.css by the two places that
 * draw one: /compass, which asks for it in its head, and the calculator, which
 * asks for it the first time an answer is about a bearing and never otherwise.
 *
 * Not folded into calc.css, and not left inline in the page either. Inline was
 * how the figure arrived and the policy in public/_headers refuses it: there is
 * no 'unsafe-inline' in style-src, so a <style> block would have been dropped
 * on the floor and the page served as a column of unstyled SVG. Folded in, all
 * of it would ride along on every visit from every reader, including everybody
 * who only ever converts a currency.
 *
 * What is not here is everything calc.css already says. The figure arrived as a
 * standalone file carrying its own copy of the tokens, the body rule, .wrap,
 * .sr, .nav, .foot, .page and .pill, and every one of those is the sheet next
 * door's. The two font declarations are gone for the same reason: calc.css
 * ships both faces now, the hand having moved there out of sun.css when this
 * page turned out to letter a drawing in a face it never loaded. Two copies of
 * a token is one token that will be changed in one place.
 *
 * And what is here is scoped, which sun.css's own panel is not. The two figures
 * can stand on one page -- a reader who asks for a sunset and then for a
 * bearing has both sheets in the document -- and both sheets have a .panel in
 * them. Unscoped, whichever loaded second would decide the geometry of both,
 * and the loser would be the one whose rows quietly overflow. So every rule
 * below carries .sundir__chart, which nothing on /sun has.
 */

/* ===== TYPE ===== */
/* The heading is lettered rather than set, which is what /sun does and for the
 * same reason: the drawing below is labelled in this face throughout, and a
 * title in Inter over a compass lettered by hand reads as two documents
 * stacked. The selector carries .page because calc.css's own `.page h1` would
 * otherwise outrank a bare h1 here and hand the title back to Inter.
 *
 * Scoped to the page rather than the chart, since a heading is not part of the
 * figure, and guarded by .sundir-page so that the calculator, which loads this
 * sheet the moment an answer is about a bearing, does not letter its own
 * headings in a hand nobody asked for.
 */
.sundir-page h1 {
  font-family: var(--hand);
  font-size: clamp(2.1rem, 6.5vw, 2.9rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;
}

/* ===== THE FRAME ===== */

/* The twilight tints ride on the frame rather than on the document root, so
 * they are the chart's own and cannot be mistaken for the site's. They grade
 * away from the page: paler-to-deeper blue in the light theme, deepening navy
 * in the dark. */
.sundir__chart {
  --twi-civil: #e9eef7;
  --twi-naut: #dde5f1;
  --twi-astro: #d2dcec;
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 1.25rem 0 1rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sundir__chart {
    --twi-civil: #1c2130;
    --twi-naut: #181c29;
    --twi-astro: #141822;
  }
}
:root[data-theme="dark"] .sundir__chart {
  --twi-civil: #1c2130;
  --twi-naut: #181c29;
  --twi-astro: #141822;
}

/* the figure's own drawing only: the descendant selector would otherwise also
   catch the play icon inside the control panel and stretch it across the frame */
.sundir__chart > svg {
  display: block; width: 100%; height: auto;
  touch-action: none; user-select: none;
}

/* ===== THE LETTERING ===== */
/* Hand for names, Inter for numbers, as on /sun. The hand itself is sun.css's,
   declared there with the face it names, so a page that wants the drawing
   lettered links that sheet too and one that does not gets Inter throughout.
   The fallback is written into every use rather than the token redeclared
   here: a second declaration of --hand is a second place it can drift. */
.sundir__chart text { font-family: var(--font); }
.sundir__chart .hand {
  font-family: var(--hand, "Clipboard Script", "Inter", sans-serif);
  font-weight: 400; letter-spacing: 0;
}
.sundir__chart .tc.hand { font-size: 24px; fill: var(--text); }
.sundir__chart .tg.hand { font-size: 16px; fill: var(--faint); }
.sundir__chart .tn { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; fill: var(--muted); }
.sundir__chart .tn--faint { fill: var(--faint); }

/* ===== THE DRAWING ===== */
/* by class rather than by attribute, so the theme carries every stroke of it */
.sundir__chart .band--civil { fill: var(--twi-civil); }
.sundir__chart .band--naut  { fill: var(--twi-naut); }
.sundir__chart .band--astro { fill: var(--twi-astro); }
.sundir__chart .disc  { fill: var(--bg); }
.sundir__chart .rim   { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.sundir__chart .ring  { fill: none; stroke: var(--line); stroke-dasharray: 3 5; }
.sundir__chart .tick  { stroke: var(--line); }
.sundir__chart .tick--card { stroke: var(--muted); stroke-width: 1.5; }
.sundir__chart .ghost { fill: none; stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; }
.sundir__chart .arc   { fill: none; stroke: var(--text); stroke-width: 2.2; }
.sundir__chart .arc--twi { fill: none; stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 2 4; }
.sundir__chart .notch { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.sundir__chart .stick { fill: var(--text); }
.sundir__chart .shadow { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; opacity: 0.7; }

/* Invisible hit twins. A hairline stroke is no target at all, so every thin
   thing on the chart gets a wide transparent twin drawn over it that only the
   pointer can see, and the dots and the letters get filled ones. A filled shape
   is a hit target whatever its alpha, which is exactly what is wanted here and
   exactly what /sun had to guard against. */
.sundir__chart .hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.sundir__chart .hit--fill { fill: transparent; stroke: none; pointer-events: all; }
.sundir__chart .hit--scrub { cursor: pointer; }

/* The sun's handle. It is rebuilt on every render and keeps its id through all
   of them, which is what lets the focus ring survive an arrow press. */
.sundir__chart #sd-sunhit { cursor: grab; pointer-events: all; }
.sundir__chart #sd-sunhit:focus { outline: none; }
.sundir__chart #sd-sunhit:focus-visible { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.sundir__chart .scrubdot { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; pointer-events: none; }

/* ===== THE EXPLAINING CARD ===== */
/* One card for the whole chart, following the pointer and blind to it, so it
   never sits between the finger and the thing it names. Chip styling, as every
   quiet box on the site wears. */
.sundir__chart .tip {
  position: absolute; z-index: 3; top: 0; left: 0;
  max-width: 230px; padding: 0.5rem 0.6rem;
  background: var(--chip); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.07);
  font-size: 0.75rem; line-height: 1.45; color: var(--muted);
  pointer-events: none;
}
.sundir__chart .tip b { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.1rem; }

/* ===== THE PANEL ===== */
/* /sun's control panel, in the corner the track leaves free. Compact rows of
   label, control and reading, under a header that folds the whole thing away.
   It takes the page's own tokens rather than an overlay grey, so it reads as
   part of the drawing in either theme. */
.sundir__chart .panel {
  position: absolute; top: 1.5%; left: 1.5%; z-index: 2;
  /* A share of the frame on a desktop, but never below the width the rows need:
     on a phone 41% is about 150px and the sliders vanish between the label and
     the reading. */
  width: clamp(214px, 41%, 252px);
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.75rem; line-height: 1.3;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.07);
  user-select: none; -webkit-user-select: none;
}
.sundir__chart .panel__head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0.4rem 0.55rem;
  font: inherit; font-weight: 500; color: var(--text);
  background: none; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer; text-align: left;
}
.sundir__chart .panel__head:hover { color: var(--text); background: var(--bg); }
.sundir__chart .panel__chev { color: var(--faint); transition: transform .15s ease; }
.sundir__chart .panel[data-open="false"] .panel__chev { transform: rotate(-90deg); }
.sundir__chart .panel[data-open="false"] .panel__head { border-bottom: 0; }
.sundir__chart .panel[data-open="false"] .panel__body { display: none; }
/* minmax(0, 1fr) rather than auto: an auto track takes the row's max-content,
   which is the slider's own width plus the two columns, and overflows the panel */
.sundir__chart .panel__body {
  padding: 0.5rem 0.55rem 0.6rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem;
}
.sundir__chart .panel__row { display: flex; align-items: center; gap: 0.45rem; }
.sundir__chart .panel__row label { width: 34px; flex: none; color: var(--muted); }
.sundir__chart .panel__row output {
  width: 58px; flex: none; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.sundir__chart .panel select {
  flex: 1; min-width: 0;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  font: inherit; padding: 0.15rem 0.3rem;
}
/* The run button sits alone in its row and .pill is calc.css's, shared by all
   three figures and owned by none of them, so only the row is here. */
.sundir__chart .panel__buttons { display: grid; gap: 0.35rem; margin-top: 0.1rem; }

/* ===== CONTROLS ===== */
/* No slider exists in calculingo, so this is the system extrapolated, as on
   /sun: a 1px --line track, a --text thumb, no accent colour anywhere. Kept
   here rather than borrowed from sun.css, which a page drawing only this figure
   never loads, and sized to flex because these rows are flex and /sun's are a
   grid. */
.sundir__chart input[type=range] {
  -webkit-appearance: none; appearance: none;
  background: none; cursor: pointer;
  flex: 1; min-width: 0; height: 20px;
}
.sundir__chart input[type=range]:focus { outline: none; }
.sundir__chart input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--chip), 0 0 0 4px var(--muted);
}
.sundir__chart input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--line); }
.sundir__chart input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; margin-top: -5.5px;
  border: 0; border-radius: 999px; background: var(--text);
}
.sundir__chart input[type=range]::-moz-range-track { height: 1px; background: var(--line); }
.sundir__chart input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 999px; background: var(--text);
}

/* Dragging the sun or a slider sweeps the pointer across the page's prose, and
   the browser reads that as a text selection. The class rides on body only
   while a drag is live. sun.css says this too, and the duplicate is deliberate:
   this figure can be the only one a page ever loads. */
body.ui-drag, body.ui-drag * { user-select: none !important; -webkit-user-select: none !important; }

/* ===== THE READOUT ===== */
#sd-say { color: var(--text); font-size: 1.0625rem; line-height: 1.55; max-width: 60ch; margin-bottom: 0.35rem; }
#sd-say b { font-weight: 600; }
#sd-events { font-size: 0.9375rem; max-width: 60ch; }
#sd-events b { color: var(--text); font-weight: 600; }

/* ===== THE ONE UNDER AN ANSWER ===== */
/* The compact shape, mirroring .sun--inline to the letter.
 *
 * Everything it drops, it drops here rather than in the script: the drawing is
 * one implementation, and a second one built out of options is a second one to
 * keep right.
 *
 * The panel goes, because an answer is not a place to put five controls, and
 * display:none rather than a hidden attribute so its sliders and its select
 * leave the tab order with it. What stays is everything you can do on the
 * drawing itself: the sun still drags along the track, the arc still scrubs,
 * and the arrow keys still walk the hour.
 *
 * The two readouts stay too. The sentence above them is about one moment and
 * these are about the whole day around it, the rise and the set and the noon,
 * which is the part an answer cannot spare the room for. */
.sundir--inline .panel { display: none; }
.sundir--inline #sd-say { font-size: 1rem; }

/* The events line comes off under an answer, and it is the third place this
   figure had to be stopped from saying a clock time next to the calculator's.
   The rim lettering and the crossing's card were the other two. This one read
   "Sets 8:29 pm" two lines under a sentence saying the sun sets at 8:31 pm,
   the drawing running a short declination series and the answer the real one,
   and of the two the answer is the one that is right. What the figure keeps is
   what it alone can say: the picture, and the sentence about where the sun
   stands at the instant the answer is about. */
.sundir--inline #sd-events { display: none; }