/* DrND SolutionLab — styles. No external requests: no web fonts, images or imports.

   Brand: aligned with DrND's Knowledge Hub (assets/css/style.css of the parent site).
   Every colour below is taken from that stylesheet unless marked "derived":
     --primary   #1E3A8A   :root --primary      primary actions, headings accents
     --secondary #2563EB   :root --secondary    focus outline (a:focus-visible), eyebrow, links
     --gold      #D4AF37   :root --gold         accent rule; --gold-text #8A6D0B = --kh-gold-text (tagline)
     page #F8FAFC (body), surface #fff (.kh-card), tint #EEF5FF (--kh-tint, hover/hero)
     heading #0F172A (--kh-heading), body text #334155 (--kh-text), muted #475569 (--kh-muted)
     border #E2E8F0 (--kh-border), primary hover #1E40AF (.kh-btn--primary:hover)
     card shadow 0 1px 2px rgba(15,23,42,.06), radius 14px (--kh-radius), buttons radius 10px / 48px high
     footer #09101F with #CBD5E1 text (.kh-footer)
   Derived (the parent has no equivalent): --line-strong (input borders need 3:1 contrast; the
   parent's #E2E8F0 does not), and the semantic caution/error/info/refusal colours.
   Theme: light only, like the parent site (which has no dark mode). The operating-system colour
   preference is deliberately ignored; there is no dark theme to select.
   Fonts: the parent loads Inter and Poppins from Google Fonts. Those are named first in the stacks
   below so they are used where installed, but are never requested from the network here. */

:root {
    --primary: #1E3A8A;
    --secondary: #2563EB;
    --gold: #D4AF37;
    --gold-text: #8A6D0B;
    --bg: #F8FAFC;
    --card: #ffffff;
    --card-alt: #F8FAFC;
    --tint: #EEF5FF;
    --ink: #0F172A;
    --text: #334155;
    --ink-soft: #475569;
    --line: #E2E8F0;
    --line-strong: #64748B;
    --line-hover: #BFD3F7;
    --accent: #1E3A8A;
    --accent-hover: #1E40AF;
    --accent-ink: #ffffff;
    --accent-text: #1E3A8A;
    --accent-soft: #EEF5FF;
    --link: #2563EB;
    --focus: #2563EB;
    --head-bg: #ffffff;
    --foot-bg: #09101F;
    --foot-ink: #CBD5E1;
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-lift: 0 6px 18px rgba(15, 23, 42, 0.08);
    --caution-bg: #FFF3D1;
    --caution-line: #A15C00;
    --caution-ink: #4D2C00;
    --error-bg: #FDE8E6;
    --error-line: #B42318;
    --error-ink: #6E0F08;
    --info-bg: #EEF5FF;
    --info-line: #2563EB;
    --info-ink: #1E3A8A;
    --refusal-bg: #EFE9F8;
    --refusal-line: #6B46A8;
    --refusal-ink: #33204F;
    --ok-line: #1F7A4D;
    --radius: 14px;
    --radius-ctl: 10px;
    --sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --display: 'Poppins', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --gutter: 16px;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    font: 1rem/1.6 var(--sans);
    overflow-wrap: break-word;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; color: var(--ink); line-height: 1.2; margin: 0; }
p { margin: 0 0 0.75rem; }
ul, ol { margin: 0 0 0.75rem; padding-left: 1.25rem; }

.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
    position: absolute; left: var(--gutter); top: -4rem; z-index: 10;
    background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; border-radius: var(--radius-ctl);
}
.skip:focus { top: 0.5rem; }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 4px;
}
#result:focus { outline: none; }

/* ---- layout ------------------------------------------------------------ */

.app { max-width: 76rem; margin: 0 auto; padding: 1.25rem var(--gutter) 2.5rem; }
.bar { max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter); }

/* header: the parent's white bar with a hairline border (.kh-header) */
.site-header { background: var(--head-bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.masthead {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.35rem 1.5rem; padding: 0.8rem 0;
}
.brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.brand h1 { font-size: clamp(1.1rem, 4.6vw, 1.35rem); font-weight: 600; letter-spacing: 0; }
.logo { flex: none; }
.logo-bg { fill: var(--primary); }
.logo-flask { fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.logo-level { stroke: var(--gold); stroke-width: 2.4; }
.tagline { margin: 0.1rem 0 0; color: var(--gold-text); font-size: 0.8rem; font-weight: 600; line-height: 1.35; }
.privacy-note { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

.mode-nav { margin-bottom: 1rem; }
.tabs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
    padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.tab {
    appearance: none; border: 0; background: transparent; color: var(--text);
    font: inherit; font-weight: 600; font-size: 0.9rem; min-height: 44px; padding: 0 0.4rem;
    border-radius: 8px; cursor: pointer; min-width: 0; position: relative;
}
.tab:hover { background: var(--accent-soft); color: var(--accent-text); }
.tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--gold); }
.tab-long { display: none; }
@media (min-width: 40rem) {
    .tab-long { display: inline; }
    .tab-short { display: none; }
    .tab { font-size: 0.95rem; }
}

.workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 60rem) {
    .workspace { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: 1.5rem; }
}

.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.25rem var(--gutter) 1.35rem; min-width: 0;
}
.input-card h2 { font-size: 1.35rem; }
.blurb { color: var(--ink-soft); margin: 0.35rem 0 1rem; font-size: 0.95rem; }

/* ---- form -------------------------------------------------------------- */

.field, fieldset { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
label, legend { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; padding: 0; }
.opt { font-weight: 400; color: var(--ink-soft); font-size: 0.8rem; }

input[type="text"], select {
    width: 100%; min-width: 0; min-height: 44px; font: inherit; font-size: 1rem; color: var(--ink);
    background: var(--card-alt); border: 1.5px solid var(--line-strong); border-radius: var(--radius-ctl); padding: 0.45rem 0.65rem;
}
input[type="text"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
select { appearance: auto; }

.qty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(5.25rem, 38%); gap: 0.5rem; }
.unit-static {
    display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 0.6rem;
    border: 1.5px dashed var(--line-strong); border-radius: var(--radius-ctl); font-family: var(--mono); color: var(--ink-soft);
}
.hint { font-size: 0.85rem; color: var(--ink-soft); margin: 0.3rem 0 0; }

.has-error input[type="text"], input[aria-invalid="true"] { border-color: var(--error-line); background: var(--error-bg); }
.field-error {
    margin: 0.35rem 0 0; padding: 0.35rem 0.6rem; border-left: 4px solid var(--error-line);
    background: var(--error-bg); color: var(--error-ink); font-size: 0.9rem; border-radius: 0 8px 8px 0;
}

.seg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: var(--card-alt); border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.seg-option { position: relative; margin: 0; font-weight: 600; }
.seg-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg-option span {
    display: flex; align-items: center; min-height: 44px; padding: 0.3rem 0.75rem; border-radius: 8px; color: var(--text);
}
.seg-option:hover span { background: var(--accent-soft); color: var(--accent-text); }
.seg-option input:checked + span { background: var(--accent); color: var(--accent-ink); }
.seg-option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 30rem) and (max-width: 59.99rem), (min-width: 75rem) {
    .seg { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

.panel-details { border: 1px solid var(--line); border-radius: var(--radius-ctl); margin: 0 0 1rem; background: var(--card-alt); }
.panel-details > summary { cursor: pointer; font-weight: 700; padding: 0.7rem 0.85rem; min-height: 44px; }
.details-body { padding: 0 0.85rem 0.25rem; }
.declaration { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.75rem 0.5rem; background: var(--card); }
.declaration legend { padding: 0 0.3rem; }
.range-row { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 0.6rem; margin: 0.6rem 0; }
.range-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.qty.sub { margin-top: 0.5rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.btn {
    appearance: none; font: inherit; font-weight: 600; line-height: 1.2; min-height: 48px; padding: 0.5rem 1.4rem; cursor: pointer;
    border-radius: var(--radius-ctl); border: 1.5px solid var(--accent); background: transparent; color: var(--accent-text);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); flex: 1 1 8rem; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-quiet { border-color: var(--line-strong); color: var(--ink-soft); }
.btn-quiet:hover { background: var(--accent-soft); border-color: var(--line-strong); color: var(--accent-text); }

/* ---- results ----------------------------------------------------------- */

.result { position: relative; }
.result h2 { font-size: 1.3rem; margin-bottom: 0.75rem; }
.result h3 { font-size: 1.05rem; margin: 1.35rem 0 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--line); }
.result-idle .placeholder { color: var(--ink-soft); }
.stale-notice { padding: 0.7rem 0.85rem; border-left: 4px solid var(--info-line); background: var(--info-bg); color: var(--info-ink); border-radius: 0 8px 8px 0; }

.headline {
    position: relative; padding: 0.9rem 1rem 0.9rem 2.1rem; background: var(--accent-soft);
    border: 1.5px solid var(--accent); border-radius: var(--radius); overflow: hidden;
}
/* a graduated-scale edge: the one decorative motif */
.headline::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.35rem;
    background:
        repeating-linear-gradient(to bottom, var(--accent-text) 0 2px, transparent 2px 10px) left / 0.5rem 100% no-repeat,
        repeating-linear-gradient(to bottom, var(--gold) 0 3px, transparent 3px 50px) left / 0.95rem 100% no-repeat,
        linear-gradient(var(--accent-text), var(--accent-text)) left / 2px 100% no-repeat;
}
.headline-label { margin: 0 0 0.15rem; font-weight: 600; color: var(--ink-soft); font-size: 0.95rem; }
.headline-value { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(1.7rem, 8vw, 2.6rem); line-height: 1.15; font-weight: 700; overflow-wrap: anywhere; }
.headline-value { color: var(--ink); }
.headline-value .unit, .qgrid .unit, .target-grid .unit, .step-grid .unit { font-weight: 600; color: var(--accent-text); }
.exactness { margin: 0.65rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }

.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 0.6rem; margin: 0; }
.qcard { margin: 0; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--card-alt); min-width: 0; }
.qcard dt { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }
.qcard dd { margin: 0.1rem 0 0; font-family: var(--mono); font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }
.qcard-stock { border-color: var(--accent); }
.qcard-diluent { border-style: dashed; }
.qcard-final { border-color: var(--accent); border-width: 2.5px; }
.qnote { display: block; font: 400 0.8rem/1.4 var(--sans); color: var(--ink-soft); margin-top: 0.2rem; }

.msgs { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.msg { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; padding: 0.55rem 0.75rem; border-left: 5px solid; border-radius: 0 10px 10px 0; min-width: 0; }
.msg-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; flex: none; }
.msg-text { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.msg-caution { background: var(--caution-bg); border-color: var(--caution-line); color: var(--caution-ink); }
.msg-error, .msg-limit, .msg-internal { background: var(--error-bg); border-color: var(--error-line); color: var(--error-ink); }
.msg-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
.msg-refusal { background: var(--refusal-bg); border-color: var(--refusal-line); color: var(--refusal-ink); }
.msg-detail { opacity: 0.85; font-size: 0.85rem; }
.err-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.error-summary { margin-bottom: 1rem; }
.error-count { font-weight: 700; color: var(--error-ink); }
.refusal { padding: 0.85rem 1rem; background: var(--refusal-bg); border: 1.5px solid var(--refusal-line); border-radius: 12px; color: var(--refusal-ink); }
.refusal h3 { border: 0; margin-top: 0; }

.instructions { padding-left: 1.4rem; }
.instructions li { margin-bottom: 0.45rem; padding-left: 0.25rem; }
.instructions li::marker { color: var(--accent-text); font-weight: 800; }
.plain-list { margin-bottom: 0.5rem; }
.plain-list li { margin-bottom: 0.3rem; }

.working { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-ctl); overflow: hidden; background: var(--card-alt); }
.working > div { padding: 0.5rem 0.75rem; border-top: 1px solid var(--line); }
.working > div:first-child { border-top: 0; }
.working dt { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.working dd { margin: 0.1rem 0 0; font-family: var(--mono); font-size: 0.95rem; overflow-wrap: anywhere; }

.limits { color: var(--ink-soft); font-size: 0.9rem; }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.stamp { font-size: 0.85rem; color: var(--ink-soft); }
.badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; border: 1.5px solid; }
.badge-caution { background: var(--caution-bg); color: var(--caution-ink); border-color: var(--caution-line); }
.badge-info { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); margin: 0.5rem 0 0; }

/* ---- serial dilution ---------------------------------------------------- */

.status-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-bottom: 0.9rem; }
@media (min-width: 40rem) { .status-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.status { padding: 0.7rem 0.85rem; border: 1.5px solid var(--line); border-left-width: 6px; border-radius: 10px; background: var(--card-alt); min-width: 0; }
.status-q { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
.status-a { margin: 0.1rem 0 0.3rem; font-weight: 800; font-size: 1.05rem; }
.status-d, .assess-line { margin: 0 0 0.4rem; font-size: 0.88rem; }
.status-ok, .status-meets { border-left-color: var(--ok-line); }
.status-fails { border-left-color: var(--error-line); background: var(--error-bg); color: var(--error-ink); }
.status-partial, .status-none { border-left-color: var(--caution-line); background: var(--caution-bg); color: var(--caution-ink); }

.target-box { padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.target-box h4 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.target-differs { border-color: var(--caution-line); background: var(--caution-bg); color: var(--caution-ink); }
.target-grid, .step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.5rem 0.9rem; margin: 0; }
.target-grid dt, .step-grid dt { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.target-differs .target-grid dt { color: inherit; }
.target-grid dd, .step-grid dd { margin: 0; font-family: var(--mono); font-weight: 700; overflow-wrap: anywhere; }
.target-note { margin: 0.5rem 0 0; font-size: 0.88rem; }

.steps { list-style: none; padding: 0; display: grid; gap: 0.7rem; margin: 0; }
.step { padding: 0.75rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--card-alt); min-width: 0; }
.step-flag { border-color: var(--caution-line); }
.step h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.step-src { font-weight: 500; color: var(--ink-soft); font-size: 0.85rem; }
.step-instruction { margin: 0.6rem 0 0; font-size: 0.9rem; }

.site-foot { background: var(--foot-bg); color: var(--foot-ink); padding: 1.5rem 0; font-size: 0.85rem; }
.site-foot p { margin: 0; max-width: 48rem; font-size: 0.85rem; color: var(--foot-ink); }
.noscript { padding: 1rem; background: var(--caution-bg); color: var(--caution-ink); border-radius: 10px; }

@media (prefers-reduced-motion: no-preference) {
    .tab, .btn { transition: background-color 120ms ease, color 120ms ease; }
}

@media (forced-colors: active) {
    .card, .qcard, .step, .msg, .status, .target-box, .headline, .field-error { border: 2px solid CanvasText; }
    .tab[aria-selected="true"] { outline: 3px solid Highlight; }
}

/* ---- print worksheet ---------------------------------------------------- */

.worksheet { display: none; }

@media print {
    @page { margin: 15mm; }
    html, body { background: #fff !important; color: #000 !important; }
    body { font: 10.5pt/1.4 Georgia, "Times New Roman", serif; }
    .app, .site-header, .site-foot, .skip, #live { display: none !important; }
    .worksheet { display: block !important; }
    .ws h1 { font-size: 17pt; margin: 0 0 6pt; }
    .ws h2 { font-size: 12pt; margin: 14pt 0 4pt; padding-bottom: 2pt; border-bottom: 1pt solid #000; break-after: avoid; }
    .ws-brand { margin: 0; font: 700 9pt var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
    .ws-table { width: 100%; border-collapse: collapse; margin: 0 0 4pt; }
    .ws-table th, .ws-table td { border: 0.75pt solid #555; padding: 3pt 5pt; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
    .ws-kv th { width: 34%; font-weight: 700; background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ws-table thead th { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ws tr, .ws li { break-inside: avoid; }
    .ws-small { font-size: 9pt; margin: 3pt 0 0; }
    .ws-foot { margin-top: 14pt; padding-top: 6pt; border-top: 1pt solid #000; font-size: 9pt; }
    .ws ul, .ws ol { margin: 0 0 4pt; }
}

/* ---- site integration (Phase 3): links back to the Knowledge Hub ---------- */

a { color: var(--link); text-underline-offset: 3px; }
.site-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.site-links ul { display: flex; flex-wrap: wrap; gap: 0 1rem; list-style: none; margin: 0; padding: 0; }
.site-links a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 0.9rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.site-links a:hover { color: var(--accent-text); text-decoration: underline; }
.site-home img { display: block; flex: none; }
.site-foot a { color: var(--foot-ink); }
.site-foot a:hover { color: #fff; }
.site-foot p + p { margin-top: 0.4rem; }
.install-help { margin-top: 0.5rem; max-width: 48rem; }
.install-help summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: #fff; }
.install-help p { margin-top: 0.25rem; }
.install-help ul { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
.install-help li { margin-bottom: 0.35rem; font-size: 0.85rem; }