/*
 * Pictures of samples (src/ui/sample-art.js) and the bench page's
 * preparation cards.
 *
 * A sample picture is drawn on its own light tile in both themes. Its
 * colours are computed from spectra under daylight (D65) against white, so
 * they are only right on a light ground; a dark theme gets the same tile,
 * slightly dimmed so it does not glare.
 */

:root {
  --sa-bench: #d6dadd;
  --sa-top: #c4c9cd;
  --sa-ink: #3b4248;
}
:root[data-theme="light"] {
  --sa-bench: #f4f5f6;
  --sa-top: #e2e5e8;
}

svg.sa { display: block; max-width: 100%; height: auto; }
.sa .sa-bench { fill: var(--sa-bench); }
.sa .sa-top { fill: var(--sa-top); }
.sa .sa-top-edge { stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.8; fill: none; }
.sa .sa-shadow { fill: rgba(0, 0, 0, 0.14); }
/* Where an object touches the bench: a thin dark line under its base. */
.sa .sa-contact { fill: rgba(0, 0, 0, 0.3); }
.sa .sa-heap-shadow { fill: rgba(0, 0, 0, 0.07); }
.sa .sa-glass { fill: rgba(255, 255, 255, 0.4); }
.sa .sa-glass-inner { fill: rgba(255, 255, 255, 0.25); stroke: rgba(0, 0, 0, 0.16); stroke-width: 0.6; }
.sa .sa-rim-light { fill: none; stroke: #fff; stroke-width: 0.9; opacity: 0.75; }
.sa .sa-ink { stroke: var(--sa-ink); stroke-width: 1.1; stroke-linejoin: round; }
.sa .sa-outline, .sa .sa-rim { fill: none; }
/* A clear liquid filters what is behind it: multiply its transmittance colour
   onto the tile, which is how a coloured solution looks against a bench. */
.sa .sa-liquid { mix-blend-mode: multiply; }
.sa .sa-liquid-turbid { opacity: 0.94; }
.sa .sa-meniscus { fill: rgba(0, 0, 0, 0.05); stroke: rgba(0, 0, 0, 0.2); stroke-width: 0.6; }
.sa .sa-highlight { fill: #fff; opacity: 0.5; }
.sa .sa-cap { fill: #4d5761; stroke: #2e353b; stroke-width: 0.8; }
.sa .sa-bubble { fill: none; stroke: #fff; stroke-width: 0.7; opacity: 0.9; }
.sa .sa-glint { stroke: #fff; stroke-width: 1; stroke-linecap: round; }
.sa .sa-glint-dot { fill: #fff; }
/* A film is a pane: the bench shows through it. */
.sa .sa-film { opacity: 0.6; }
.sa .sa-label { font: 8.5px var(--sans); fill: var(--sa-ink); }

/* Apparatus drawings: ink for the apparatus, grey for the sample, the
   lecture diagrams' rule. */
svg.prep-ill { display: block; overflow: visible; }
.prep-ill .pi-ink, .prep-ill .pi-ink-c {
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round;
}
.prep-ill .pi-sample { fill: var(--ink-faint); opacity: 0.6; }
.prep-ill .pi-standard { fill: var(--ink-faint); opacity: 0.35; }
.prep-ill .pi-liquid { fill: var(--info); opacity: 0.22; }
.prep-ill .pi-ball { fill: var(--bg-raised); stroke: currentColor; stroke-width: 1.2; }
.prep-ill .pi-pestle { stroke: currentColor; stroke-width: 5; stroke-linecap: round; opacity: 0.8; }
.prep-ill .pi-arrow { fill: none; stroke: var(--accent); stroke-width: 1.3; }
.prep-ill .pi-arrow-head { fill: var(--accent); }
.prep-ill .pi-heat { fill: none; stroke: var(--warn); stroke-width: 1.2; stroke-linecap: round; }

/* --------------------------------------------------------------- figures -- */

.sa-frame { margin: 0; flex: none; width: 160px; }
.sa-frame figcaption,
.prep-figure figcaption {
  margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--ink-faint); text-align: center;
}
.prep-figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 150px; }
.prep-outcome { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* A VIAL AS A TILE (app.js, vialTile): the picture, what it was in, and what
   came of it as a chip whose colour says the same as its word — dissolved,
   part of the way, attacked by an acid, dispersed, or nothing. A solubility
   screen is a row of them; a dissolution or a digestion is one. */
.vial-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.vial-tiles.single { grid-template-columns: minmax(0, 170px); }
.vial-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.vial-art { position: relative; aspect-ratio: 3 / 2; }
.vial-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vial-tile figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 6px 8px 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.35;
}
.vial-name { font-weight: 600; color: var(--ink); }
.vial-meta { font-size: 11px; color: var(--ink-faint); }
.vial-seen { font-size: 11px; color: var(--ink-dim); }
.vial-verdict {
  --v: var(--ink-faint);
  display: inline-block;
  padding: 1px 8px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--v) 55%, transparent);
  background: color-mix(in srgb, var(--v) 14%, transparent);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}
.vial-verdict.yes { --v: var(--ok); }
.vial-verdict.part { --v: var(--warn); }
.vial-verdict.react { --v: var(--accent); }
.vial-verdict.disperse { --v: var(--info); }
.vial-verdict.no { --v: var(--ink-faint); font-weight: 500; color: var(--ink-dim); }

/* The dialog after a preparation: the vial (or the powder before and after)
   beside what was used and made and what the bench saw; a screen's row of
   vials goes across the top instead. */
.prep-result { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; }
.prep-result-art { flex: 0 0 auto; }
.prep-result.wide .prep-result-art { flex: 1 1 100%; }
.prep-result .vial-tiles.screen { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.prep-result-text { flex: 1 1 260px; min-width: 0; }
.prep-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0 0 10px; font-size: 12.5px; }
.prep-facts dt { color: var(--ink-faint); }
.prep-facts dd { margin: 0; color: var(--ink); }
.prep-notes p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); }
.prep-notes p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ the bench -- */

.specimen-body { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.specimen-facts { flex: 1 1 240px; min-width: 0; }
.specimen-notes { margin-top: 10px; }
.specimen-notes > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-dim); }

.prep-section-title { font-size: 15px; margin: 20px 0 10px; }
.prep-grid {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px;
}
.prep-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised);
}
.prep-card:hover:not(.refused) { border-color: var(--border-strong); }
.prep-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.prep-card-btn {
  appearance: none; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  padding: 10px 12px 12px; border-radius: var(--radius); cursor: pointer;
}
.prep-card-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.prep-card-btn:disabled { cursor: not-allowed; }
.prep-card .prep-ill { align-self: center; color: var(--ink-dim); }
.prep-card-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.prep-card-blurb { font-size: 12px; line-height: 1.45; color: var(--ink-dim); }
.prep-card.refused { background: var(--bg-inset); }
.prep-card.refused .prep-ill, .prep-card.refused .prep-card-name { opacity: 0.6; }
.prep-card-why { margin: 0 12px 12px; font-size: 11.5px; line-height: 1.45; color: var(--ink-faint); }

/* ------------------------------------------------------------- the brief -- */

.brief-body { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.brief-text { flex: 1 1 280px; min-width: 0; }
.brief-samples { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------- the bench as a tree -- */

/* The sidebar list: each specimen under the one it was made from. Every row
   carries one column per level of depth: a vertical guide where an ancestor
   still has younger siblings below, then an elbow into the row itself. The
   columns stretch the full height of the row, margin included, so the lines
   join up from one row to the next. */
.bench-tree { list-style: none; margin: 0; padding: 0; }
.bench-node { display: flex; align-items: stretch; }
.bench-node > .run { flex: 1; min-width: 0; }
.tree-guides { display: flex; flex: none; }
.tree-guide, .tree-elbow { position: relative; width: 12px; flex: none; }
.tree-guide.on::before, .tree-elbow::before {
  content: ''; position: absolute; left: 5px; top: 0; bottom: 0;
  border-left: 1px solid var(--border-strong);
}
.tree-elbow.last::before { bottom: 50%; }
.tree-elbow::after {
  content: ''; position: absolute; left: 5px; right: 0; top: 50%;
  border-top: 1px solid var(--border-strong);
}

/* The page: a breadcrumb of the lineage above the title, and the same
   sections for every specimen. */
.bench-crumbs ol {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--ink-dim);
}
.bench-crumbs li + li::before { content: '\203A'; margin-right: 4px; color: var(--ink-faint); }
.bench-crumbs [aria-current] { color: var(--ink); }
.bench-children { list-style: none; margin: 0 0 14px; padding: 0; font-size: 13px; }
.bench-children li { padding: 2px 0; }
.bench-none { margin: 0 0 14px; font-size: 13px; }

/* The bench's preparations drawn as settings cards (src/ui/prep-diagrams.js):
   the apparatus in the drawings' ink, the powder grey, the pestle and the
   milling balls solid. */
.knob-figure .pd-powder { fill: var(--ink-faint); opacity: 0.55; stroke: none; }
.knob-figure .pd-pestle { stroke: var(--ink-faint); stroke-width: 7; stroke-linecap: round; }
.knob-figure .pd-ball { fill: var(--bg-raised); stroke: var(--ink-dim); stroke-width: 1.1; }
.knob-figure .pd-tube { stroke: var(--ink-dim); stroke-width: 3.2; stroke-linecap: round; }

/* A part that is itself moved to set a setting (the light-scattering detector
   on its arm) is drawn in the accent while it can be moved, as a slider's
   handle is, and grey like any other knob when it cannot. */
.knob-figure .knob .sch-box.knob-movable rect { fill: var(--accent-dim); stroke: var(--accent); }
.knob-figure .knob .sch-box.knob-movable text { fill: var(--on-accent); }

/* A setting chosen on a result's image itself (results.js, besideImage): the
   AFM profile's row, a slider down the image's right-hand side whose handle
   stands level with the dashed line across the frame. Drawn as the knobs are:
   the track and the handle in the accent, the stop it is on filled. */
.screen-row { display: flex; align-items: stretch; justify-content: center; gap: 8px; max-width: 660px; margin: 0 auto; }
.screen-row > .micrograph { flex: 1 1 600px; margin: 0; min-width: 0; }
.beside-host { display: flex; }
.beside-image { position: relative; width: 44px; }
/* The name stands under the track, level with the image's scale bar. */
.beside-head { position: absolute; left: -6px; right: -6px; bottom: 0; height: 28px; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; font-weight: 700; color: var(--accent); line-height: 1.2; }
/* Placed over the frame's own height by results.js; this is where it starts before it is measured. */
.row-slider { position: absolute; left: 0; right: 0; top: 1px; height: calc(100% - 30px); cursor: ns-resize; touch-action: none; border-radius: 6px; }
.row-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row-track { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: var(--accent-glow); border-radius: 2px; }
.row-stop { position: absolute; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink-faint); }
.row-stop.on { background: var(--accent); }
.row-handle { position: absolute; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-raised); box-shadow: 0 0 0 1px var(--accent); pointer-events: none; }