/* Drops of Knowledge · the bench: a working surface. A drawer of lessons, instruments that compute, notes with sources. */

.page-bench { --drawer-w: 15.5rem; }
.bench { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 60px; }
@media (min-width: 64rem) { .bench { grid-template-columns: var(--drawer-w) minmax(0, 1fr); } }

/* ------------------------------------------------------------- drawer --- */
.drawer {
  position: sticky; top: 60px; z-index: 5; align-self: start;
  background: var(--color-paper-2); border-bottom: 1px solid var(--color-rule-2);
  overflow-x: auto; scrollbar-width: none;
}
.drawer::-webkit-scrollbar { display: none; }
.drawer__title, .drawer__foot { display: none; }
.drawer__list { list-style: none; margin: 0; padding: var(--space-2) var(--gutter); display: flex; gap: var(--space-2); }
.drawer__list a {
  display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3);
  border-radius: var(--radius-2); text-decoration: none; white-space: nowrap; font-size: var(--text-sm); font-weight: 560; color: var(--color-ink-2);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.drawer__list a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.drawer__list a[aria-current="true"] { background: var(--color-paper-3); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule); }
.drawer__n {
  display: inline-grid; place-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  font-size: var(--text-xs); font-weight: 700; background: var(--color-paper); color: var(--color-muted); flex: none;
}
.drawer__list a[aria-current="true"] .drawer__n { background: var(--color-accent); color: var(--color-accent-ink); }
@media (min-width: 64rem) {
  .drawer { height: calc(100dvh - 60px); border-bottom: 0; border-right: 1px solid var(--color-rule-2); overflow: auto; padding: var(--space-6) var(--space-4); box-sizing: border-box; display: flex; flex-direction: column; }
  .drawer__title { display: block; margin: 0 var(--space-3) var(--space-4); font-stretch: 75%; font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
  .drawer__list { flex-direction: column; padding: 0; }
  .drawer__list a { white-space: normal; min-height: 44px; }
  .drawer__foot { display: block; margin: auto var(--space-3) 0; font-size: var(--text-xs); color: var(--color-muted); }
}

/* ------------------------------------------------------------- lessons -- */
.bench__main { min-width: 0; }
.benchhead { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) var(--space-6); }
.benchhead__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-variation-settings: "SOFT" 70; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.05; }
.benchhead__line { margin: var(--space-2) 0 0; color: var(--color-ink-2); }

.lesson { margin: 0 var(--gutter) var(--space-7); border-radius: var(--radius-3); background: var(--color-paper-2); box-shadow: var(--edge), inset 0 0 0 1px var(--color-rule-2); scroll-margin-top: 48px; }
@media (min-width: 64rem) { .lesson { scroll-margin-top: 8px; } }
.lesson__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-rule-2); }
.lesson__t { margin: 0; font-family: var(--font-display); font-weight: 700; font-variation-settings: "SOFT" 70; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem); letter-spacing: -0.012em; line-height: 1.15; }
.lesson__tag { flex: none; font-stretch: 75%; font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.lesson__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-5); }
@media (min-width: 80rem) { .lesson__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-7); } }

.instr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-content: start; min-width: 0; }
.subinstr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-5); border-top: 1px dashed var(--color-rule); }
.subinstr__t { margin: 0; font-weight: 650; }

/* controls */
.controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.controls--row { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; }
.seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg legend, .slider__k { display: block; margin-bottom: var(--space-2); font-stretch: 78%; font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.seg label { display: inline-block; margin: 0 var(--space-1) var(--space-1) 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-2);
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
  background: var(--color-paper); color: var(--color-ink-2); box-shadow: inset 0 0 0 1px var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.seg span:hover { color: var(--color-ink); }
.seg input:checked + span { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.seg input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.slider { display: block; min-width: 0; }
.slider output { font-family: var(--font-body); font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--color-ink); font-size: var(--text-sm); margin-left: var(--space-2); }
.slider input { width: 100%; min-height: 40px; accent-color: var(--color-accent); margin: 0; }
.slider--wide { grid-column: 1 / -1; }

/* readouts */
.readout { margin: 0; display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4); border-radius: var(--radius-2); background: var(--color-paper); }
.readout__k, .readouts dt { font-stretch: 78%; font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.readout__v { font-family: var(--font-display); font-weight: 700; font-variation-settings: "SOFT" 70; font-size: var(--text-xl); letter-spacing: -0.01em; }
.readouts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-2); }
.readouts > div { padding: var(--space-3) var(--space-4); border-radius: var(--radius-2); background: var(--color-paper); }
.readouts dd { margin: var(--space-1) 0 0; font-family: var(--font-display); font-weight: 650; font-variation-settings: "SOFT" 70; font-size: var(--text-md); line-height: 1.3; }
.readouts__wide { grid-column: 1 / -1; }
.readouts__wide dd { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); overflow-wrap: anywhere; }

/* notes */
.notes { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.65; max-width: 52ch; }
.notes p { margin: 0 0 var(--space-4); }
.notes__k { font-stretch: 78%; font-weight: 700; font-size: var(--text-xs) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.notes__tie { color: var(--color-ink); padding-left: var(--space-4); box-shadow: inset 1px 0 0 var(--color-accent); }
.sources { font-size: var(--text-xs); color: var(--color-muted); }
.sources a { color: var(--color-ink-2); }
.sources__k { display: block; font-stretch: 78%; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-1); }

/* ------------------------------------------------------------- charts --- */
.chart { margin: 0; }
.chart__svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font-body); }
.chart__cap { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-muted); }
/* phones: charts keep a readable size and scroll sideways inside their own box */
@media (max-width: 40rem) {
  .chart__scroll { overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(var(--space-5) * -1); padding: 0 var(--space-5) var(--space-2); }
  .chart__scroll .chart__svg { min-width: 600px; }
  .chart__scroll:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
}
.chart__svg .ax { stroke: var(--color-rule); stroke-width: 1; }
.chart__svg .tick { stroke: var(--color-rule); stroke-width: 1; }
.chart__svg .tl { fill: var(--color-muted); font-size: 12px; font-weight: 500; }
.chart__svg .lbl { fill: var(--color-ink-2); font-size: 13px; font-weight: 600; }
.chart__svg .lbl--ink { fill: var(--color-ink); }
.chart__svg .band-uv { fill: var(--uv-violet); opacity: 0.22; }
.chart__svg .band-either { fill: var(--color-accent); opacity: 0.14; }
.chart__svg .band-am { fill: var(--neon-yellow); opacity: 0.09; }
.chart__svg .lamp { stroke: var(--uv-violet); stroke-width: 3; }
.chart__svg .lamp-glow { fill: var(--uv-violet); opacity: 0.35; }
.chart__svg .absorb { fill: url(#hatch); }
.chart__svg .emit-blue { fill: oklch(72% 0.14 255); opacity: 0.75; }
.chart__svg .emit-green { fill: var(--uv-green); opacity: 0.55; }
.chart__svg .line { fill: none; stroke: var(--color-ink); stroke-width: 2; }
.chart__svg .line--a { stroke: var(--color-accent); stroke-width: 2.5; }
.chart__svg .line--c { stroke: var(--neon-cyan); }
.chart__svg .line--y { stroke: var(--neon-yellow); }
.chart__svg .line--p { stroke: var(--neon-pink); }
.chart__svg .line--soft { stroke: var(--color-ink-2); opacity: 0.45; stroke-dasharray: 4 4; }
.chart__svg .fill-a { fill: var(--color-accent); }
.chart__svg .fill-ink { fill: var(--color-ink); }
.chart__svg .fill-soft { fill: var(--color-ink-2); }
.chart__svg .bar-b { fill: var(--neon-cyan); }
.chart__svg .bar-s { fill: var(--neon-yellow); }
.chart__svg .dot { fill: var(--color-paper-2); stroke: var(--color-ink); stroke-width: 2; }
.chart__svg .dot--on { fill: var(--color-accent); stroke: var(--color-accent); }
.chart__svg .marker { stroke: var(--color-accent); stroke-width: 2; }
.chart__svg .hatch-line { stroke: var(--color-ink-2); stroke-width: 1.5; opacity: 0.6; }

/* ----------------------------------------------------------- specimen --- */
.instr__view { position: relative; }
.specimen { position: relative; aspect-ratio: 16 / 8; border-radius: var(--radius-3); overflow: hidden; background: radial-gradient(80% 90% at 50% 70%, var(--color-paper-3), var(--color-paper) 75%); box-shadow: inset 0 0 0 1px var(--color-rule-2); }
.specimen__gl, .specimen__gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.specimen__paper {
  position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 2 / 1; translate: -50% -50%; rotate: -4deg;
  display: none; place-content: center; border-radius: 3px;
  background: var(--tag-paper); color: var(--tag-ink-2);
  font-stretch: 75%; font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 10px 24px oklch(5% 0.02 268 / 0.5);
  transition: background-color 500ms var(--ease-in-out), color 500ms var(--ease-in-out), box-shadow 500ms var(--ease-in-out);
}
.specimen[data-spec="paper"] .specimen__paper, .specimen[data-spec="banknote"] .specimen__paper { display: grid; }
.specimen[data-spec="paper"] .specimen__gl, .specimen[data-spec="banknote"] .specimen__gl { visibility: hidden; }
.specimen[data-spec="banknote"] .specimen__paper { background: oklch(82% 0.04 150); }
.specimen[data-uvlamp][data-spec="paper"] .specimen__paper { background: oklch(84% 0.1 258); color: oklch(30% 0.1 270); box-shadow: 0 0 34px 6px oklch(72% 0.15 258 / 0.55), 0 10px 24px oklch(5% 0.02 268 / 0.5); }
.specimen[data-uvlamp][data-spec="banknote"] .specimen__paper { background: oklch(28% 0.05 290); color: oklch(55% 0.05 290); }
.specimen[data-uvlamp] { background: radial-gradient(80% 90% at 50% 70%, oklch(22% 0.09 292), oklch(12% 0.05 292) 75%); }

/* ------------------------------------------------------------- disc ----- */
.disc { display: grid; place-items: center; padding: var(--space-4); border-radius: var(--radius-3); background: var(--color-paper); }
.disc canvas { width: min(100%, 22rem); height: auto; aspect-ratio: 1; }

/* ------------------------------------------------------------- ask ------ */
.lesson--ask { margin-bottom: var(--space-9); }
.askform { padding: var(--space-5); display: grid; gap: var(--space-4); }
.askform textarea {
  width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-4); border-radius: var(--radius-2);
  background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-rule); font: inherit; font-size: var(--text-md); resize: vertical; min-height: 6rem;
}
.askform textarea::placeholder { color: var(--color-muted); }
.askform textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.askform__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.askform__note { font-size: var(--text-xs); color: var(--color-muted); max-width: 46ch; }

.bench__main .foot { margin-top: 0; }