/* ============================================================================ Mushroom Tracker — theme layer (themed on top of Bootstrap 5.3) Field look × light/dark × three densities, switched via attributes on : data-bs-theme | data-density The visual identity lives in these tokens, not in stock Bootstrap. All colours in OKLCH. Contrast checked against WCAG AA. ========================================================================== */ @font-face { font-family: "Inter var"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("vendor/inter/inter-latin-wght-normal.woff2") format("woff2"); } /* ---------------------------------------------------------------------------- 1. DENSITY — controls sizing only (spacing, row height, font, radius) -------------------------------------------------------------------------- */ [data-density="spacious"] { --fs-base: 16px; --fs-step: 1.18; --pad-card: 1.5rem; --pad-card-y: 1.25rem; --row-y: 0.85rem; --row-x: 1rem; --ctl-h: 48px; --radius: 14px; --radius-sm: 10px; --gap: 1.25rem; --sec-gap: 1.9rem; } [data-density="balanced"] { --fs-base: 15px; --fs-step: 1.16; --pad-card: 1.15rem; --pad-card-y: 1rem; --row-y: 0.6rem; --row-x: 0.85rem; --ctl-h: 42px; --radius: 11px; --radius-sm: 8px; --gap: 1rem; --sec-gap: 1.4rem; } [data-density="dense"] { --fs-base: 13.5px; --fs-step: 1.13; --pad-card: 0.85rem; --pad-card-y: 0.7rem; --row-y: 0.34rem; --row-x: 0.62rem; --ctl-h: 34px; --radius: 8px; --radius-sm: 6px; --gap: 0.7rem; --sec-gap: 1rem; } /* ---------------------------------------------------------------------------- 2. LOOKS × THEME — colour identity Token contract (every look×theme defines all of these): --bg --surface --surface-2 --surface-3 --border --border-strong --ink --ink-muted --ink-faint --accent (button bg, white text safe) --accent-on --accent-text --accent-soft --ok --ok-soft --ok-text --warn --warn-soft --warn-text --bad --bad-soft --bad-text --info --info-soft --info-text --shadow --ring -------------------------------------------------------------------------- */ /* ---------- FIELD — bold teal, high contrast, heavy weight ---------- */ [data-bs-theme="light"] { --bg: oklch(1 0 0); --surface: oklch(1 0 0); --surface-2: oklch(0.972 0.006 200); --surface-3: oklch(0.95 0.012 198); --border: oklch(0.84 0.01 200); --border-strong: oklch(0.62 0.02 200); --ink: oklch(0.18 0.012 220); --ink-muted: oklch(0.4 0.018 215); --ink-faint: oklch(0.5 0.018 210); --accent: oklch(0.48 0.115 200); --accent-on: oklch(1 0 0); --accent-text: oklch(0.44 0.12 200); --accent-soft: oklch(0.94 0.04 198); --ok: oklch(0.52 0.15 150); --ok-soft: oklch(0.945 0.06 150); --ok-text: oklch(0.4 0.13 150); --warn: oklch(0.66 0.15 70); --warn-soft: oklch(0.95 0.07 75); --warn-text: oklch(0.46 0.12 58); --bad: oklch(0.53 0.2 28); --bad-soft: oklch(0.945 0.05 28); --bad-text: oklch(0.47 0.2 28); --info: oklch(0.5 0.12 245); --info-soft: oklch(0.945 0.04 245); --info-text: oklch(0.43 0.12 245); --shadow: 0 1px 0 oklch(0.5 0.02 210 / 0.1), 0 6px 16px oklch(0.4 0.03 210 / 0.1); --ring: oklch(0.5 0.14 200 / 0.55); } [data-bs-theme="dark"] { --bg: oklch(0.155 0.012 220); --surface: oklch(0.2 0.014 220); --surface-2: oklch(0.135 0.012 220); --surface-3: oklch(0.26 0.016 218); --border: oklch(0.36 0.018 215); --border-strong: oklch(0.52 0.022 210); --ink: oklch(0.97 0.006 210); --ink-muted: oklch(0.75 0.016 210); --ink-faint: oklch(0.62 0.016 210); --accent: oklch(0.6 0.13 198); --accent-on: oklch(0.14 0.02 220); --accent-text: oklch(0.78 0.12 198); --accent-soft: oklch(0.3 0.07 200); --ok: oklch(0.66 0.15 150); --ok-soft: oklch(0.32 0.08 150); --ok-text: oklch(0.8 0.14 150); --warn: oklch(0.76 0.14 78); --warn-soft: oklch(0.34 0.08 72); --warn-text: oklch(0.86 0.12 80); --bad: oklch(0.64 0.2 28); --bad-soft: oklch(0.33 0.1 28); --bad-text: oklch(0.8 0.17 28); --info: oklch(0.68 0.12 245); --info-soft: oklch(0.32 0.06 245); --info-text: oklch(0.82 0.11 245); --shadow: 0 1px 0 oklch(0 0 0 / 0.4), 0 8px 22px oklch(0 0 0 / 0.45); --ring: oklch(0.66 0.14 198 / 0.6); } /* Single ("Field") look: heavy weight, heavier borders, larger min controls. */ :root { --border-w: 1.5px; --weight-h: 800; --weight-strong: 700; --weight-label: 600; --ctl-h-min: 46px; } /* ---------------------------------------------------------------------------- 3. Map tokens onto Bootstrap's runtime CSS variables -------------------------------------------------------------------------- */ [data-bs-theme] { --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--ink-muted); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-3); --bs-border-color: var(--border); --bs-heading-color: var(--ink); --bs-link-color: var(--accent-text); --bs-link-hover-color: var(--accent); --bs-emphasis-color-rgb: 0,0,0; --bs-border-radius: var(--radius); --bs-border-radius-sm: var(--radius-sm); --bs-font-sans-serif: "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ---------------------------------------------------------------------------- 4. Base -------------------------------------------------------------------------- */ * { -webkit-tap-highlight-color: transparent; } html { font-size: var(--fs-base); } body { background: var(--bg); color: var(--ink); font-family: var(--bs-font-sans-serif); font-feature-settings: "cv05" 1, "ss01" 1; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .num { font-variant-numeric: tabular-nums; } .code-label { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } h1,h2,h3,h4,h5 { color: var(--ink); font-weight: var(--weight-h); letter-spacing: -0.02em; } h1 { text-wrap: balance; } a { text-decoration: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .muted { color: var(--ink-muted); } .faint { color: var(--ink-faint); } /* ---------------------------------------------------------------------------- 5. App shell — sidebar + main -------------------------------------------------------------------------- */ .app { min-height: 100dvh; display: grid; grid-template-columns: 1fr; } @media (min-width: 992px) { .app { grid-template-columns: var(--side-w, 252px) 1fr; } } .sidebar { display: none; background: var(--surface-2); border-right: var(--border-w) solid var(--border); padding: 1rem 0.7rem; position: sticky; top: 0; height: 100dvh; overflow-y: auto; } @media (min-width: 992px) { .sidebar { display: flex; flex-direction: column; } } .brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.55rem 0.9rem; font-weight: var(--weight-h); letter-spacing: -0.03em; font-size: 1.12rem; color: var(--ink); } .brand .mark { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent-text); } .brand small { display:block; font-weight:500; font-size:0.62rem; letter-spacing:0.04em; text-transform:uppercase; color: var(--ink-faint); margin-top:1px; } .nav-sec { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 600; padding: 0.9rem 0.6rem 0.35rem; } .nav-link2 { display: flex; align-items: center; gap: 0.7rem; padding: 0.56rem 0.6rem; border-radius: var(--radius-sm); color: var(--ink-muted); font-weight: 500; line-height: 1.1; min-height: max(var(--ctl-h-min), 0px); transition: background .14s ease, color .14s ease; } .nav-link2 i { font-size: 1.05rem; width: 1.25rem; text-align: center; color: var(--ink-faint); } .nav-link2:hover { background: var(--surface-3); color: var(--ink); } .nav-link2:hover i { color: var(--ink-muted); } .nav-link2.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .nav-link2.active i { color: var(--accent-text); } .nav-link2 .count { margin-left: auto; font-size: 0.78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .main { min-width: 0; display: flex; flex-direction: column; } /* top app bar (mobile + page header) */ .topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem clamp(0.9rem, 3vw, 1.6rem); background: color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: var(--border-w) solid var(--border); } .topbar .burger { display: inline-grid; } @media (min-width: 992px) { .topbar .burger { display: none; } } .page-title { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); font-weight: var(--weight-h); margin: 0; letter-spacing: -0.025em; } .topbar .spacer { flex: 1; } .searchbox { display: flex; align-items: center; gap: 0.5rem; background: var(--surface-2); border: var(--border-w) solid var(--border); border-radius: 999px; padding: 0 0.85rem; height: calc(var(--ctl-h) - 4px); color: var(--ink-muted); min-width: 0; } .searchbox input { border: 0; background: transparent; color: var(--ink); outline: none; width: 12rem; max-width: 30vw; font-size: 0.9rem; } .searchbox input::placeholder { color: var(--ink-faint); } .content { padding: clamp(0.9rem, 3vw, 1.7rem); display: flex; flex-direction: column; gap: var(--sec-gap); max-width: 1280px; width: 100%; min-width: 0; } /* ---------------------------------------------------------------------------- 6. Cards / panels -------------------------------------------------------------------------- */ .panel { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .panel-pad { padding: var(--pad-card-y) var(--pad-card); } .panel-head { display: flex; align-items: center; gap: 0.6rem; padding: var(--pad-card-y) var(--pad-card); border-bottom: var(--border-w) solid var(--border); } .panel-head h2 { font-size: 0.96rem; margin: 0; font-weight: var(--weight-strong); letter-spacing: -0.01em; } .panel-head .link { margin-left: auto; font-size: 0.82rem; color: var(--accent-text); font-weight: 500; } .sec-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); font-weight: 600; } /* ---------------------------------------------------------------------------- 7. Provisional banner ("Data to finish") -------------------------------------------------------------------------- */ .provisional { display: flex; align-items: flex-start; gap: 0.85rem; background: var(--warn-soft); border: var(--border-w) solid color-mix(in oklch, var(--warn) 38%, transparent); border-radius: var(--radius); padding: var(--pad-card-y) var(--pad-card); } .provisional .ico { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklch, var(--warn) 24%, transparent); color: var(--warn-text); font-size: 1.05rem; } .provisional h2 { font-size: 0.95rem; margin: 0 0 0.1rem; color: var(--warn-text); font-weight: var(--weight-strong); } .provisional p { margin: 0; color: color-mix(in oklch, var(--warn-text) 86%, var(--ink)); font-size: 0.9rem; } .provisional .acts { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } /* ---------------------------------------------------------------------------- 8. KPI / attention tiles + stock strip -------------------------------------------------------------------------- */ .tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .tile { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius); padding: var(--pad-card-y) var(--pad-card); display: flex; flex-direction: column; gap: 0.35rem; box-shadow: var(--shadow); transition: border-color .15s ease, transform .15s ease; } a.tile:hover { border-color: var(--border-strong); transform: translateY(-1px); } .tile .tlabel { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--ink-muted); font-weight: 500; } .tile .tlabel i { font-size: 0.95rem; } .tile .tval { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: var(--weight-h); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .tile .tsub { font-size: 0.8rem; color: var(--ink-faint); } .tile.accent { border-left: none; } .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; } .dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); } .dot.info { background: var(--info); } .dot.accent { background: var(--accent); } .stockstrip { display: flex; flex-wrap: wrap; gap: 0; overflow: hidden; border: var(--border-w) solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .stockstrip .cell { flex: 1 1 0; min-width: 96px; padding: var(--pad-card-y) var(--pad-card); border-right: var(--border-w) solid var(--border); display: flex; flex-direction: column; gap: 0.2rem; } .stockstrip .cell:last-child { border-right: 0; } .stockstrip .cell .n { font-size: 1.3rem; font-weight: var(--weight-h); line-height: 1; font-variant-numeric: tabular-nums; } .stockstrip .cell .l { font-size: 0.74rem; color: var(--ink-muted); display:flex; align-items:center; gap:0.3rem; } /* ---------------------------------------------------------------------------- 9. Lists — attention + recent activity -------------------------------------------------------------------------- */ .rows { display: flex; flex-direction: column; } .row-item { display: flex; align-items: center; gap: 0.8rem; padding: var(--row-y) var(--pad-card); border-top: var(--border-w) solid var(--border); min-height: var(--ctl-h-min); } .row-item:first-child { border-top: 0; } .row-item:hover { background: var(--surface-2); } .row-item .lead-ico { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 1rem; } .row-item .body { min-width: 0; flex: 1; } .row-item .body .t { font-weight: 560; color: var(--ink); font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-item .body .s { font-size: 0.82rem; color: var(--ink-muted); } .row-item .trail { margin-left: auto; text-align: right; flex: 0 0 auto; } .tint-ok { background: var(--ok-soft); color: var(--ok-text); } .tint-warn { background: var(--warn-soft); color: var(--warn-text); } .tint-bad { background: var(--bad-soft); color: var(--bad-text); } .tint-info { background: var(--info-soft); color: var(--info-text); } .tint-accent { background: var(--accent-soft); color: var(--accent-text); } /* ---------------------------------------------------------------------------- 10. Badges / pills (status + form) -------------------------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 0.34rem; font-size: 0.74rem; font-weight: 600; line-height: 1; padding: 0.3em 0.62em; border-radius: 999px; white-space: nowrap; border: var(--border-w) solid transparent; } .pill i { font-size: 0.82em; } .pill.ok { background: var(--ok-soft); color: var(--ok-text); } .pill.warn { background: var(--warn-soft); color: var(--warn-text); } .pill.bad { background: var(--bad-soft); color: var(--bad-text); } .pill.info { background: var(--info-soft); color: var(--info-text); } .pill.accent { background: var(--accent-soft); color: var(--accent-text); } .pill.neutral { background: var(--surface-3); color: var(--ink-muted); border-color: var(--border); } .form-tag { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.72rem; padding: 0.22em 0.5em; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink-muted); border: var(--border-w) solid var(--border); } /* P (passage) chip */ .pchip { display:inline-flex; align-items:center; font-size:0.72rem; font-weight:700; padding:0.16em 0.46em; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------------------- 11. Tables (Cultures list) -------------------------------------------------------------------------- */ .tbl-wrap { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; overflow-y: hidden; } table.dt { width: 100%; border-collapse: collapse; } table.dt thead th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; padding: 0.6rem var(--row-x); background: var(--surface-2); border-bottom: var(--border-w) solid var(--border); position: sticky; top: 0; white-space: nowrap; } table.dt tbody td { padding: var(--row-y) var(--row-x); border-bottom: var(--border-w) solid var(--border); font-size: 0.88rem; vertical-align: middle; } table.dt tbody tr:last-child td { border-bottom: 0; } table.dt tbody tr { transition: background .12s ease; } table.dt tbody tr:hover { background: var(--surface-2); } table.dt thead th[data-sort] { cursor: pointer; user-select: none; } table.dt thead th[data-sort]:hover { color: var(--accent); } table.dt thead th[data-sort-dir]::after { margin-left: 0.3em; font-size: 0.8em; opacity: 0.6; } table.dt thead th[data-sort-dir="asc"]::after { content: "▲"; } table.dt thead th[data-sort-dir="desc"]::after { content: "▼"; } table.dt .code-label { font-weight: 600; color: var(--ink); } table.dt .sub { color: var(--ink-faint); font-size: 0.78rem; } .rowlink { cursor: pointer; } .col-hide-dense { } [data-density="dense"] .col-hide-dense-off { } .be-cell { font-variant-numeric: tabular-nums; font-weight: 600; } /* Horizontal scroll wrapper so a wide data table scrolls WITHIN its panel on narrow screens (phone at the bench / fruit room) instead of spilling past the panel border. -webkit-overflow-scrolling gives momentum scroll on touch. */ .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Filter bar */ .filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } /* Phone (default): the search box and selects each take a full-width row — big, glove-friendly tap targets. Desktop (≥768px): they sit inline on one row, the search growing to fill, so the bar is compact at the desk. */ .filterbar > .form-control, .filterbar > .form-select { width: 100%; } @media (min-width: 768px) { .filterbar > .form-control { flex: 1 1 16rem; width: auto; } .filterbar > .form-select { flex: 0 1 13rem; width: auto; } } .chip-select { display:inline-flex; align-items:center; gap:0.4rem; height: var(--ctl-h); padding: 0 0.8rem; border-radius: 999px; border: var(--border-w) solid var(--border); background: var(--surface); color: var(--ink-muted); font-size: 0.86rem; font-weight: 500; cursor: pointer; transition: border-color .14s, background .14s; } .chip-select:hover { border-color: var(--border-strong); color: var(--ink); } .chip-select i.bi-chevron-down { font-size: 0.7rem; color: var(--ink-faint); } .chip-select.on { background: var(--accent-soft); border-color: color-mix(in oklch,var(--accent) 40%, transparent); color: var(--accent-text); } /* ---------------------------------------------------------------------------- 12. Buttons (re-theme Bootstrap + custom) -------------------------------------------------------------------------- */ .btn { font-weight: var(--weight-label); border-radius: var(--radius-sm); --bs-btn-padding-y: 0; min-height: var(--ctl-h); display: inline-flex; align-items: center; gap: 0.45rem; letter-spacing: -0.005em; } .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--accent-on); --bs-btn-hover-bg: color-mix(in oklch, var(--accent) 88%, black); --bs-btn-hover-border-color: color-mix(in oklch, var(--accent) 88%, black); --bs-btn-hover-color: var(--accent-on); --bs-btn-active-bg: color-mix(in oklch, var(--accent) 80%, black); --bs-btn-active-border-color: color-mix(in oklch, var(--accent) 80%, black); --bs-btn-active-color: var(--accent-on); box-shadow: 0 1px 2px color-mix(in oklch, var(--accent) 40%, transparent); } .btn-soft { background: var(--surface); border: var(--border-w) solid var(--border); color: var(--ink); } .btn-soft:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); } .btn-ghost { background: transparent; border: var(--border-w) solid transparent; color: var(--ink-muted); } .btn-ghost:hover { background: var(--surface-2); color: var(--ink); } /* Icon buttons (burger, theme toggle, offcanvas close) are primary tap targets: floor them at the 44x44 px touch minimum (spec §16) even at Dense density, where --ctl-h is 34px for mouse use. Larger densities keep their bigger size. */ .iconbtn { width: max(var(--ctl-h), 44px); min-width: 44px; min-height: max(var(--ctl-h), 44px); padding: 0; justify-content: center; border-radius: var(--radius-sm); } /* ---------------------------------------------------------------------------- 13. ⓘ "show your working" trigger + popover -------------------------------------------------------------------------- */ .why { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: var(--border-w) solid var(--border-strong); color: var(--ink-faint); font-size: 0.7rem; cursor: pointer; vertical-align: middle; margin-left: 0.3rem; background: var(--surface); transition: all .14s; } .why:hover { color: var(--accent-text); border-color: var(--accent); } .popover { --bs-popover-bg: var(--surface); --bs-popover-border-color: var(--border); --bs-popover-max-width: 340px; --bs-popover-border-radius: var(--radius); box-shadow: var(--shadow); } .popover .popover-header { background: var(--surface-2); color: var(--ink); border-bottom: var(--border-w) solid var(--border); font-weight: var(--weight-strong); font-size: 0.84rem; } .popover .popover-body { color: var(--ink-muted); font-size: 0.84rem; padding: 0.7rem 0.85rem; } .work .formula { font-size: 0.84rem; color: var(--ink); background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.4rem 0.55rem; margin: 0.2rem 0 0.5rem; font-variant-numeric: tabular-nums; } .work .calc { color: var(--accent-text); font-weight: 600; } .work dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; } .work dt { color: var(--ink-faint); font-weight: 500; } .work dd { margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; } .work .flag { margin-top: 0.5rem; font-size: 0.78rem; color: var(--warn-text); display: flex; gap: 0.35rem; align-items: flex-start; } /* ---------------------------------------------------------------------------- 14. Lineage strip (mini) -------------------------------------------------------------------------- */ .lineage { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; } .lineage .node { padding: 0.3rem 0.55rem; border-radius: var(--radius-sm); background: var(--surface-2); border: var(--border-w) solid var(--border); font-size: 0.78rem; font-weight: 600; color: var(--ink-muted); white-space: nowrap; } .lineage .node.cur { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in oklch, var(--accent) 35%, transparent); } .lineage .arr { color: var(--ink-faint); font-size: 0.8rem; } /* density segmented control (kept in the real app topbar) */ .seg { display: inline-flex; background: var(--surface-3); border-radius: var(--radius-sm); padding: 2px; border: var(--border-w) solid var(--border); } .seg button { border: 0; background: transparent; color: var(--ink-muted); font-size: 0.78rem; font-weight: 600; padding: 0.28rem 0.62rem; border-radius: var(--radius-sm); cursor: pointer; line-height: 1.1; min-height: 0; } .seg button.on { background: var(--accent); color: var(--accent-on); } /* ---------------------------------------------------------------------------- 16. Misc utilities -------------------------------------------------------------------------- */ .divider { height: var(--border-w); background: var(--border); border: 0; margin: 0; } .grid-2 { display: grid; gap: var(--gap); grid-template-columns: 1fr; } @media (min-width: 768px) { .grid-2 { grid-template-columns: 1.6fr 1fr; } } .grid-2.even { grid-template-columns: 1fr; } @media (min-width: 768px) { .grid-2.even { grid-template-columns: 1fr 1fr; } } .offcanvas { background: var(--surface-2); color: var(--ink); } .offcanvas .nav-link2 { color: var(--ink-muted); } .section-title { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.1rem; } .section-title h2 { font-size: 1.05rem; margin: 0; font-weight: var(--weight-strong); } .section-title .meta { font-size: 0.8rem; color: var(--ink-faint); } /* ---------------------------------------------------------------------------- 17. New-culture entry (form flow + live preview) -------------------------------------------------------------------------- */ .form-control, .form-select { background: var(--surface-2); border: var(--border-w) solid var(--border); color: var(--ink); min-height: var(--ctl-h); border-radius: var(--radius-sm); font-size: 0.9rem; } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); background: var(--surface); color: var(--ink); } .form-control::placeholder { color: var(--ink-faint); } .form-label { font-size: 0.82rem; font-weight: var(--weight-label); color: var(--ink-muted); margin-bottom: 0.3rem; } .input-suffix { display: flex; align-items: stretch; } .input-suffix .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-suffix .suf { display: grid; place-items: center; padding: 0 0.7rem; background: var(--surface-3); border: var(--border-w) solid var(--border); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-muted); font-size: 0.84rem; } .step { display: flex; gap: 0.9rem; } .step + .step { margin-top: var(--sec-gap); } .step .num { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 0.85rem; } .step .step-body { flex: 1; min-width: 0; } .step h3 { font-size: 0.98rem; margin: 0 0 0.6rem; font-weight: var(--weight-strong); } .choice-row { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .opt { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; border-radius: var(--radius-sm); border: var(--border-w) solid var(--border); background: var(--surface); cursor: pointer; min-height: var(--ctl-h); color: var(--ink); font-weight: 540; width: 100%; text-align: left; transition: border-color .14s, background .14s; } .opt:hover { border-color: var(--border-strong); } .opt .ico { width: 2rem; height: 2rem; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-muted); flex: 0 0 auto; font-size: 1rem; } .opt .sub { display: block; font-size: 0.76rem; color: var(--ink-faint); font-weight: 500; margin-top: 1px; } .opt.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent) inset; } .opt.sel .ico { background: var(--accent); color: var(--accent-on); } .opt.sel .sub { color: var(--accent-text); opacity: 0.85; } .recipe-line { display: grid; grid-template-columns: 1fr 7.5rem auto; gap: 0.5rem; align-items: center; } .recipe-line + .recipe-line { margin-top: 0.5rem; } .preview { position: sticky; top: calc(var(--ctl-h) + 1.4rem); } .preview .code { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); word-break: break-word; } .preview .prev-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: var(--border-w) solid var(--border); font-size: 0.86rem; } .preview .prev-row .k { color: var(--ink-muted); } .preview .prev-row .v { color: var(--ink); font-weight: 560; text-align: right; } .preview .prev-row .v small { color: var(--ink-faint); font-weight: 500; } .grid-entry { display: grid; gap: var(--gap); grid-template-columns: 1fr; } @media (min-width: 992px) { .grid-entry { grid-template-columns: 1fr 20rem; align-items: start; } } /* ---------------------------------------------------------------------------- 18. Batch detail (identity header, lineage, tabs, metrics, recipe) -------------------------------------------------------------------------- */ .idhead { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; } .idhead .h-badge { width: 2.8rem; height: 2.8rem; border-radius: var(--radius-sm); flex: 0 0 auto; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: 1.3rem; } .idhead .h-main { min-width: 0; } .idhead .h-code { font-size: clamp(1.1rem, 1rem + 0.8vw, 1.45rem); font-weight: var(--weight-h); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .idhead .h-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: 0.45rem; color: var(--ink-muted); font-size: 0.86rem; } .idhead .h-meta span { display: inline-flex; align-items: center; gap: 0.32rem; } .idhead .h-meta b { color: var(--ink); font-weight: 600; } .idhead .h-actions { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-start; } /* Identity facts grid (read-only batch detail) */ .idgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 1.4rem; margin-top: var(--gap); } .idgrid > div { padding: 0.5rem 0; border-top: var(--border-w) solid var(--border); min-width: 0; } .idgrid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; } .idgrid dd { margin: 0.18rem 0 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } /* Read-only notes block */ .notes { margin-top: var(--gap); padding: 0.7rem var(--pad-card); background: var(--surface-2); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); color: var(--ink); max-width: 70ch; } .tabs { display: flex; gap: 0.1rem; border-bottom: var(--border-w) solid var(--border); overflow-x: auto; } .tabs .tab { padding: 0.62rem 0.95rem; font-weight: var(--weight-label); color: var(--ink-muted); cursor: pointer; border: 0; border-bottom: 2px solid transparent; white-space: nowrap; background: transparent; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--ctl-h-min); } .tabs .tab:hover { color: var(--ink); } .tabs .tab.active { color: var(--accent-text); border-bottom-color: var(--accent); } .tabs .tab .badge-n { font-size: 0.72rem; background: var(--surface-3); color: var(--ink-muted); padding: 0.05rem 0.4rem; border-radius: 999px; } .metric { padding: var(--pad-card-y) var(--pad-card); } .metric .mk { font-size: 0.8rem; color: var(--ink-muted); display: flex; align-items: center; gap: 0.3rem; } .metric .mv { font-size: 1.5rem; font-weight: var(--weight-h); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 0.2rem; } .metric .mh { font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.1rem; } .metric.prov .mv { color: var(--warn-text); } table.dt tfoot td { padding: var(--row-y) var(--row-x); font-weight: 700; border-top: 2px solid var(--border); font-variant-numeric: tabular-nums; } .dm-bar { display: inline-block; height: 0.4rem; border-radius: 2px; background: var(--accent-soft); vertical-align: middle; } .dm-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--accent); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ── Stage 4: SVG family tree ─────────────────────────────────────────────── */ .diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } svg.strain-tree { display: block; } /* Node rects — tinted by form, matching the mockup token set */ .tree-node { rx: 7; stroke-width: 1.5; } .tree-node.nb-A { fill: var(--info-soft); stroke: color-mix(in oklch, var(--info) 35%, var(--border)); } .tree-node.nb-LC { fill: var(--accent-soft); stroke: color-mix(in oklch, var(--accent) 35%, var(--border)); } .tree-node.nb-LC-B{ fill: var(--accent-soft); stroke: color-mix(in oklch, var(--accent) 55%, var(--border)); } .tree-node.nb-G { fill: var(--warn-soft); stroke: color-mix(in oklch, var(--warn) 35%, var(--border)); } .tree-node.nb-F { fill: var(--ok-soft); stroke: color-mix(in oklch, var(--ok) 40%, var(--border)); } /* Edge paths */ .tree-edge { fill: none; stroke: var(--border-strong); stroke-width: 2; } /* Node text */ .tree-code { font-weight: 700; font-size: 11px; fill: var(--ink); font-family: inherit; } .tree-sub { font-size: 10px; fill: var(--ink-muted); font-family: inherit; } .tree-node-link:hover .tree-node { stroke-width: 2.5; } /* Strain section */ .tree-strain-section { margin-bottom: var(--sec-gap); } .tree-strain-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; } .tree-strain-name { font-size: 0.96rem; font-weight: 800; margin: 0; } /* Legend */ .tree-legend { display: flex; gap: 0.7rem; flex-wrap: wrap; font-size: 0.76rem; color: var(--ink-muted); margin-top: 0.8rem; } .tree-legend span { display: inline-flex; align-items: center; gap: 0.3rem; } .tree-legend i { width: 0.85rem; height: 0.85rem; border-radius: 3px; border: 1px solid var(--border); display: inline-block; } .tree-legend .l-A { background: var(--info-soft); } .tree-legend .l-LC { background: var(--accent-soft); } .tree-legend .l-LC-B{ background: var(--accent-soft); opacity: 0.7; } .tree-legend .l-G { background: var(--warn-soft); } .tree-legend .l-F { background: var(--ok-soft); } /* ── Stage 4: new-culture form ────────────────────────────────────────────── */ .nc-form { max-width: 720px; } .nc-section { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius); padding: var(--pad-card); margin-bottom: var(--gap); } .nc-step-head { font-size: 0.92rem; font-weight: 800; margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.45rem; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 0.78rem; font-weight: 800; flex: 0 0 auto; } .nc-hint { font-size: 0.78rem; color: var(--ink-muted); margin: 0 0 0.5rem; } .nc-row { display: flex; gap: var(--gap); flex-wrap: wrap; } .nc-row > div { flex: 1 1 160px; } .nc-starter { max-width: 120px; } .nc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; } .nc-preview-section { background: var(--surface-2); } .preview-chip { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .code-label.large { font-weight: 800; font-size: 1rem; } /* Parent picker list */ .parent-list { max-height: 240px; overflow-y: auto; border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); padding: 0.3rem; } .parent-option { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.3rem 0.4rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.84rem; } .parent-option:hover { background: var(--surface-2); } .parent-option input[type=checkbox] { flex: 0 0 auto; } /* ── Stage 5: Chemical detail ─────────────────────────────────────────────── */ /* Sources › inline citation disclosure */ .sources-details { margin-top: 0.45rem; } .sources-details[open] { margin-bottom: 0.2rem; } .sources-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.74rem; font-weight: 600; color: var(--accent-text); cursor: pointer; list-style: none; user-select: none; } .sources-link::-webkit-details-marker { display: none; } .sources-link::marker { display: none; } .sources-list { margin: 0.3rem 0 0 0.1rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; } .sources-list li { font-size: 0.78rem; color: var(--ink-muted); } .sources-list a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .sources-list a:hover { color: var(--accent); } /* "Awaiting research" inline badge */ .awaiting-badge { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 600; color: var(--warn-text); background: var(--warn-soft); border-radius: 999px; padding: 0.18em 0.55em; margin-top: 0.35rem; } /* Compatibility grid — 4-column on ≥768px, 2-col on mobile */ .compat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } @media (min-width: 768px) { .compat-grid { grid-template-columns: repeat(4, 1fr); } } /* Each material cell is a
disclosure */ .compat-cell { background: var(--surface-2); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); transition: border-color .14s ease; } .compat-cell[open] { border-color: var(--border-strong); } .compat-cell > summary { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.7rem; cursor: pointer; font-size: 0.84rem; font-weight: 600; list-style: none; user-select: none; } .compat-cell > summary::-webkit-details-marker { display: none; } .compat-cell > summary::marker { display: none; } .compat-cell-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compat-cell-body { padding: 0 0.7rem 0.6rem; border-top: var(--border-w) solid var(--border); padding-top: 0.5rem; } /* ── Stage-5: ingredient data dots ──────────────────────────────────────── */ .data-dot { font-size: 1.1em; } .dot-measured { color: var(--ok-text); } .dot-awaiting { color: var(--ink-muted); } .dot-opaque { color: var(--ink-faint); font-size: 0.9em; } .dot-cell { width: 2rem; text-align: center; } .detail-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; } .detail-dl dt { color: var(--ink-muted); font-size: var(--fs-sm); font-weight: 600; } /* ── Stage 6: calc-engine debug page ──────────────────────────────────────── */ /* Metric cards grid — one card per derived figure */ .metric-card { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius); padding: var(--pad-card-y) var(--pad-card); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.35rem; } .metric-card.is-provisional { border-color: color-mix(in oklch, var(--warn) 45%, var(--border)); } .metric-card h2.metric-name { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 600; margin: 0; } .metric-value { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: var(--weight-h); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); display: flex; align-items: baseline; gap: 0.25rem; flex-wrap: wrap; } .metric-unit { font-size: 0.8em; color: var(--ink-muted); font-weight: 500; } .metric-missing { font-size: 0.8rem; margin: 0; } /* Block weight — grouped parent figure (total) over dry + wet sub-rows, each sub-row carrying its own "show your working" disclosure. */ .bw-card { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius); padding: var(--pad-card-y) var(--pad-card); box-shadow: var(--shadow); margin-bottom: 1rem; display: flex; flex-direction: column; } .bw-card.is-provisional { border-color: color-mix(in oklch, var(--warn) 45%, var(--border)); } .bw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.6rem; border-bottom: var(--border-w) solid var(--border); } .bw-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 600; } .bw-total { font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem); font-weight: var(--weight-h); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); } .bw-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-bottom: var(--border-w) solid var(--border); } .bw-sub-label { font-size: 0.85rem; color: var(--ink-muted); font-weight: 600; } .bw-sub-val { font-size: 1rem; font-weight: var(--weight-h); color: var(--ink); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 0.4rem; } .bw-row { padding-top: 0.7rem; } .bw-row-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 600; margin: 0 0 0.4rem; } .bw-row-note { text-transform: none; letter-spacing: 0; color: var(--ink-faint); font-weight: 500; } .bw-ingredients { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.1rem; } .bw-ingredients li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.28rem 0; border-bottom: var(--border-w) solid var(--border); font-variant-numeric: tabular-nums; } .bw-ingredients li:last-child { border-bottom: none; } .bw-ing-name { color: var(--ink); } .bw-ing-amt { color: var(--ink); font-weight: 600; white-space: nowrap; } .bw-ing-pct { color: var(--ink-muted); font-weight: 500; } .bw-empty { margin: 0.6rem 0 0; } /* "show your working" disclosure panel */ .working { margin-top: 0.5rem; border-top: var(--border-w) solid var(--border); padding-top: 0.4rem; } .working-summary { font-size: 0.78rem; font-weight: 600; color: var(--accent-text); cursor: pointer; user-select: none; list-style: none; display: inline-flex; align-items: center; gap: 0.25rem; } .working-summary::-webkit-details-marker { display: none; } .working-summary::marker { display: none; } .working[open] .working-summary { color: var(--ink-muted); } .working-body { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; } .working-formula { font-size: 0.82rem; color: var(--ink-muted); margin: 0; background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.3rem 0.5rem; } .working-calc { font-size: 0.85rem; color: var(--accent-text); margin: 0; font-variant-numeric: tabular-nums; } .working-inputs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.18rem; font-size: 0.8rem; color: var(--ink-muted); } .working-label { font-weight: 600; color: var(--ink); } /* ── Auth: focused login / first-run setup (chrome-free) ──────────────────── */ /* Pre-auth screens deliberately drop the app sidebar+topbar: a person who is not signed in should see one job, not the whole navigation. */ .auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: clamp(1.25rem, 5vw, 3rem); background: var(--surface-2); } .auth-top { position: fixed; top: 0.8rem; right: 0.8rem; } .auth-card { width: 100%; max-width: 23rem; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.4rem, 4vw, 2rem); } .auth-brand { display: flex; align-items: center; gap: 0.6rem; justify-content: center; font-weight: var(--weight-h); letter-spacing: -0.03em; font-size: 1.12rem; color: var(--ink); margin-bottom: 1.4rem; } .auth-brand .mark { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-size: 1.05rem; } .auth-card h2 { font-size: 1.2rem; font-weight: var(--weight-h); letter-spacing: -0.02em; margin: 0 0 0.2rem; } .auth-card .sub { color: var(--ink-muted); font-size: 0.88rem; margin: 0 0 1.25rem; } .auth-form { display: flex; flex-direction: column; gap: 0.85rem; } .auth-form .field { display: flex; flex-direction: column; gap: 0.3rem; } .auth-form .btn { width: 100%; justify-content: center; margin-top: 0.35rem; } .field-hint { font-size: 0.76rem; color: var(--ink-faint); } .auth-foot { display: flex; gap: 0.4rem; align-items: center; justify-content: center; text-align: center; color: var(--ink-faint); font-size: 0.72rem; margin: 1.2rem 0 0; } /* Form-level error block — the "Field" replacement for stock .alert-danger. */ .form-error { display: flex; gap: 0.45rem; align-items: flex-start; background: var(--bad-soft); color: var(--bad-text); border: var(--border-w) solid color-mix(in oklch, var(--bad) 30%, transparent); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; font-size: 0.85rem; font-weight: 500; margin: 0 0 0.9rem; } .form-error i { color: var(--bad); margin-top: 0.08rem; flex: 0 0 auto; } /* ── Auth: Users admin screen (keeps the app shell) ───────────────────────── */ .row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .input-row { display: flex; gap: 0.4rem; align-items: center; } .input-row .form-control { width: auto; max-width: 8.5rem; } /* ── Agar reference page ──────────────────────────────────────────────────── */ /* Section C: compact per-genus expandable list */ .agar-splist { display: flex; flex-direction: column; border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--pad-card); } /* Each genus row is a native
— no JS needed */ .agar-sprow { border-top: var(--border-w) solid var(--border); } .agar-sprow:first-child { border-top: 0; } /* The collapsed summary row — always visible */ .agar-sprow > summary { display: flex; align-items: center; gap: 0.65rem; padding: var(--row-y) var(--pad-card); cursor: pointer; list-style: none; user-select: none; min-height: var(--ctl-h-min); background: var(--surface); transition: background .12s ease; } .agar-sprow > summary::-webkit-details-marker { display: none; } .agar-sprow > summary::marker { display: none; } .agar-sprow > summary:hover { background: var(--surface-2); } .agar-sprow[open] > summary { background: var(--surface-2); } .agar-sprow-ico { font-size: 0.85rem; color: var(--accent-text); flex: 0 0 auto; } .agar-sprow-genus { font-size: 0.92rem; font-weight: var(--weight-strong); color: var(--ink); letter-spacing: -0.01em; min-width: 7rem; } .agar-sprow-count { font-size: 0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .agar-sprow-ph { /* push ph pill to the right, chevron sits after it */ margin-left: auto; } /* Chevron rotates 90° when open */ .agar-sprow-chevron { font-size: 0.72rem; color: var(--ink-faint); flex: 0 0 auto; transition: transform .15s ease; } .agar-sprow[open] > summary .agar-sprow-chevron { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .agar-sprow-chevron { transition: none; } } /* Expanded body */ .agar-sprow-body { padding: var(--pad-card-y) var(--pad-card); border-top: var(--border-w) solid var(--border); background: var(--surface-2); } /* Two-column dt/dd fact grid inside expanded body */ .agar-sprow-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1.4rem; margin-bottom: 0.55rem; } .agar-sprow-fact { padding: 0.45rem 0; border-top: var(--border-w) solid var(--border); min-width: 0; } .agar-sprow-fact dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; } .agar-sprow-fact dd { margin: 0.15rem 0 0; color: var(--ink); font-size: 0.88rem; font-weight: 500; } /* Inline callout block — icon + content, semantic colour variants. Uses full border + tinted background (no side-stripe). */ .agar-callout { display: flex; gap: 0.75rem; align-items: flex-start; padding: var(--pad-card-y) var(--pad-card); border-radius: var(--radius-sm); border: var(--border-w) solid; } .agar-callout-icon { flex: 0 0 auto; font-size: 1rem; margin-top: 0.1rem; } .agar-callout-head { font-size: 0.88rem; margin: 0 0 0.25rem; } .agar-callout-body { font-size: 0.86rem; margin: 0; } /* Warn — G=gentamicin note */ .agar-callout-warn { background: var(--warn-soft); border-color: color-mix(in oklch, var(--warn) 35%, transparent); color: var(--warn-text); } .agar-callout-warn .agar-callout-icon { color: var(--warn); } .agar-callout-warn .agar-callout-head { color: var(--warn-text); } .agar-callout-warn .agar-callout-body { color: color-mix(in oklch, var(--warn-text) 85%, var(--ink)); } /* Info — long-term storage tips, optional notes */ .agar-callout-info { background: var(--info-soft); border-color: color-mix(in oklch, var(--info) 35%, transparent); color: var(--info-text); } .agar-callout-info .agar-callout-icon { color: var(--info); } .agar-callout-info .agar-callout-head { color: var(--info-text); } .agar-callout-info .agar-callout-body { color: color-mix(in oklch, var(--info-text) 85%, var(--ink)); } /* Accent — Stage-2 placeholder */ .agar-callout-accent { background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 35%, transparent); color: var(--accent-text); } .agar-callout-accent .agar-callout-icon { color: var(--accent); } .agar-callout-accent .agar-callout-body { color: var(--accent-text); } /* Neutral — honesty / "what a plate does & doesn't tell you" */ .agar-callout-neutral { background: var(--surface-2); border-color: var(--border); color: var(--ink); } .agar-callout-neutral .agar-callout-icon { color: var(--accent-text); } /* Bad — safety & disposal */ .agar-callout-bad { background: var(--bad-soft); border-color: color-mix(in oklch, var(--bad) 30%, transparent); color: var(--bad-text); } .agar-callout-bad .agar-callout-icon { color: var(--bad); }