/* Condition Dictionary — light, quiet, role colours carry the meaning. */
:root{
  --bg:#f6f7f9; --panel:#ffffff; --line:#e3e6ea; --text:#1b2330; --muted:#6b7280;
  --primary:#2f5bea; --primary-ink:#ffffff; --danger:#d43d3d; --warn-bg:#fff7e6; --warn-line:#f0c36d;
  --ok-bg:#eefaf1; --ok-line:#9fd8b0; --radius:10px; --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --seeding:#4b74ff; --feeding:#64748b; --induction:#a855f7; --wash:#14b8a6;
  --staining:#fb923c; --perturbation:#f59e0b;
}
*{ box-sizing:border-box; }
/* An element marked hidden stays hidden whatever display its class sets (a .btn is
   inline-flex, which used to beat the attribute: the "Undo scaffold change" button showed). */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--text); font:14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ margin:0; }
h2{ font-size:15px; font-weight:700; margin:22px 0 8px; }
small{ font-weight:400; }
.muted{ color:var(--muted); }
pre.notes{ white-space:pre-wrap; font:inherit; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin:10px 0; color:#374151; }

/* header */
.topbar{ display:flex; align-items:center; gap:18px; padding:10px 20px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.brand{ font-weight:800; font-size:16px; color:var(--text); letter-spacing:.2px; }
.topnav{ display:flex; gap:4px; }
.topnav a{ padding:6px 10px; border-radius:8px; color:var(--muted); font-weight:600; }
.topnav a.active, .topnav a:hover{ background:#eef2ff; color:var(--primary); text-decoration:none; }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.user-field{ display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; }
.user-field input{ width:150px; }

/* controls */
input[type=text], input[type=search], input[type=number], select, textarea{
  font:inherit; color:var(--text); background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 9px;
}
input:focus, select:focus, textarea:focus{ outline:2px solid #c7d2fe; border-color:#a5b4fc; }
textarea{ width:100%; resize:vertical; }
.btn{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-weight:600; color:var(--text); background:#fff; border:1px solid var(--line); border-radius:8px; padding:7px 12px; cursor:pointer; box-shadow:var(--shadow); }
.btn:hover{ background:#f3f4f6; text-decoration:none; }
.btn-primary{ background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.btn-primary:hover{ background:#2449c9; }
.btn-small{ padding:5px 9px; font-size:12.5px; }
.btn-quiet{ box-shadow:none; border-color:transparent; color:var(--muted); }
.icon-btn{ font:inherit; font-size:18px; line-height:1; border:none; background:transparent; color:var(--muted); cursor:pointer; padding:2px 6px; border-radius:6px; }
.icon-btn:hover{ background:#f3f4f6; color:var(--danger); }
.badge{ display:inline-block; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; }
.chip{ display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:#fff4e0; color:#92400e; border:1px solid #fde4b8; margin:1px 2px 1px 0; }
.chip-cell{ background:#e8f1ff; color:#1e3a8a; border-color:#c7dbff; }

/* The page uses the whole screen; the reading views cap themselves, the editor does not. */
main{ width:100%; margin:0 auto; padding:clamp(14px, 1.5vw, 32px) clamp(16px, 2vw, 40px) 60px; }
main.narrow{ max-width:1180px; }
.empty{ padding:40px 20px; text-align:center; color:var(--muted); background:var(--panel); border:1px dashed var(--line); border-radius:var(--radius); }
.empty p{ margin:8px 0; }
.notice{ padding:10px 12px; border-radius:var(--radius); margin:10px 0; }
.notice.warn{ background:var(--warn-bg); border:1px solid var(--warn-line); }

/* list */
.list-tools{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.list-tools .search{ flex:1 1 320px; min-width:240px; padding:9px 12px; font-size:15px; }
.list-count{ color:var(--muted); font-size:12.5px; margin:10px 2px 6px; }
.list-table{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.list-table th, .list-table td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.list-table th{ font-size:12px; color:var(--muted); font-weight:700; background:#fafbfc; padding:0; }
.list-table th.sortable{ padding:0; }
.th-btn{ display:flex; align-items:center; gap:5px; width:100%; font:inherit; font-size:12px; font-weight:700; color:var(--muted); background:transparent; border:none; padding:9px 12px; cursor:pointer; text-align:left; }
.th-btn:hover{ background:#eef2ff; color:var(--primary); }
.list-table th.sorted .th-btn{ color:var(--primary); }
.th-arrow{ font-size:9px; line-height:1; }
.list-table tr:last-child td{ border-bottom:none; }
.list-table tr:hover td{ background:#fafbff; }
.entry-link{ font-weight:700; color:var(--text); }
.entry-link:hover{ color:var(--primary); }

/* entry + name bar */
.crumbs{ font-size:12.5px; color:var(--muted); margin-bottom:6px; }
.name-bar{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.name-bar.sticky{ position:sticky; top:52px; z-index:10; padding:10px 16px; align-items:center; }
.name-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; margin-bottom:2px; }
.big-name{ font-size:26px; font-weight:800; letter-spacing:-.2px; line-height:1.2; word-break:break-word; }
.name-bar.sticky .big-name{ font-size:22px; }
.name-actions{ display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.entry-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 2px; }
.variant{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin:10px 0; }
.variant-head{ margin-bottom:6px; }
.diff{ font-size:13px; color:#374151; margin-bottom:6px; }

/* Step × day table */
/* Read-only twin of the editor grid: same card, same pinned columns, same scrolling. */
.wt-wrap{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.wt-scroll{ overflow-x:auto; overflow-y:hidden; }
.wt-wrap .wt-legend{ padding:8px 12px 10px; }
table.wt-table{ border-collapse:separate; border-spacing:0; font-size:12.5px; width:100%; table-layout:fixed; }
.wt-table col.col-step{ width:194px; }
.wt-table col.col-det{ width:172px; }
.wt-table th, .wt-table td{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.wt-table thead th{ font-size:11px; color:var(--muted); font-weight:700; padding:5px 2px; background:#fafbfc; text-align:center; overflow:hidden; white-space:nowrap; }
.wt-table thead th.wt-hstep{ text-align:left; padding:5px 10px; }
.wt-table thead th.wt-d0{ color:#1e3a8a; background:#e8f0ff; }
.wt-table thead th.wt-pre{ opacity:.65; }
.wt-table td.wt-step{ text-align:left; font-weight:700; padding:6px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:#fafbfc; }
.wt-dot{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:7px; vertical-align:-1px; }
.wt-table td.wt-det{ text-align:left; padding:6px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); background:var(--panel); }
.wt-table td.wt-c{ height:30px; }
.wt-table td.wt-step, .wt-table th.wt-hstep{ position:sticky; left:0; z-index:2; }
.wt-table td.wt-det, .wt-table th.wt-hdet{ left:194px; }
.wt-table td.wt-c.wt-on{ background:var(--wt-color, #94a3b8); }
/* Read-only, same two languages as the editor grid (see .g-act / .g-arrive). */
.wt-table td.wt-c.wt-act{ background:transparent; padding:0; }
.wt-table td.wt-c.wt-act::after{ content:""; display:block; height:14px; margin:6px 3px; border-radius:7px;
  background:var(--wt-color, #94a3b8); }
.wt-table td.wt-c.wt-arrive{ position:relative; }
.wt-table td.wt-c.wt-arrive::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--text); opacity:.55; }
.wt-table td.wt-empty{ padding:10px; color:var(--muted); text-align:center; }
.wt-legend{ font-size:11px; color:var(--muted); margin-top:6px; line-height:1.6; }

/* editor — the Step × day grid IS the editor */
.templates{ margin:12px 2px 6px; color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
/* Layout A: the timeline takes 3/5 of the width, the tabbed inspector 2/5; they stack under 1200px. */
.editor{ display:grid; grid-template-columns:minmax(0, 3fr) minmax(360px, 2fr); gap:clamp(14px, 1.5vw, 24px); align-items:start; margin-top:10px; }
@media (max-width: 1200px){ .editor{ grid-template-columns:1fr; } .editor-side{ position:static; max-height:none; } .editor-side pre.rembi{ max-height:480px; } }
@media (max-width: 980px){ .name-bar.sticky{ position:static; } }
.editor-main{ min-width:0; container-type:inline-size; }   /* shrinkable, and a size container for the cards below the grid */
.toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-bottom:10px; }
.toolbar-sep{ width:1px; height:22px; background:var(--line); margin:0 4px; }
.btn-req{ border-left:4px solid var(--induction); }
.palette{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }   /* wraps as a block, then inside */
.palette-label{ font-size:12px; color:var(--muted); font-weight:700; margin-right:2px; }
.palette-btns{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 0; min-width:0; }   /* fills the label's line, wraps inside */
.palette-btn{ font:inherit; font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:999px; cursor:pointer; background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); color:var(--text); white-space:nowrap; }
.palette-btn:hover{ background:#f3f4f6; }
/* The card holds a horizontal scroller: past the per-day floor the days scroll, the step and
   details columns stay pinned on the left, the remove column on the right. */
.grid-wrap{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.g-scroll{ overflow-x:auto; overflow-y:hidden; }
.grid-wrap .wt-legend{ padding:8px 12px 10px; }
.g-scroll-hint{ color:var(--primary); }
.grid-help{ font-size:12px; color:var(--muted); margin:8px 2px; }
/* Fixed table layout: step and details keep their width, the day columns share the rest.
   Separate borders (right + bottom on every cell) so pinned cells carry their own lines. */
table.g-table{ border-collapse:separate; border-spacing:0; font-size:12.5px; width:100%; table-layout:fixed; }
.g-table col.col-step{ width:194px; }
.g-table col.col-det{ width:172px; }
.g-table col.col-add{ width:24px; }
.g-table col.col-end{ width:28px; }
.g-table th, .g-table td{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.g-table thead th{ font-size:11px; color:var(--muted); font-weight:700; padding:5px 2px; background:#fafbfc; text-align:center; overflow:hidden; white-space:nowrap; }
.g-table thead th.g-hstep, .g-table thead th.g-hdet{ text-align:left; padding:5px 10px; }
.g-table thead th.g-hend{ background:var(--panel); border-right:none; border-bottom:none; }
.g-table thead th.g-hadd{ padding:0; background:#fafbfc; }
.g-add, .g-trim{ font:inherit; font-size:14px; font-weight:700; line-height:1; color:var(--muted); background:transparent; border:none; cursor:pointer; border-radius:6px; padding:3px 5px; }
.g-add:hover{ color:var(--primary); background:#eef2ff; }
.g-trim{ font-size:12px; padding:1px 4px; margin-left:2px; color:#b45309; }
.g-trim:hover{ background:#fff4e0; }
/* pinned columns */
.g-table td.g-step, .g-table th.g-hstep{ position:sticky; left:0; z-index:2; }
.g-table td.g-det, .g-table th.g-hdet{ position:sticky; left:194px; z-index:2; background:var(--panel); }
.g-table th.g-hadd-l{ position:sticky; left:366px; z-index:2; }
.g-table td.g-end, .g-table th.g-hend{ position:sticky; right:0; z-index:2; background:var(--panel); }
.g-table th.g-hadd-r{ position:sticky; right:28px; z-index:2; }
.g-scroll.is-scrolled th.g-hadd-l, .g-scroll.is-scrolled td.g-det{ box-shadow:8px 0 10px -8px rgba(16,24,40,.35); clip-path:inset(0 -14px 0 0); }
.g-scroll.has-more th.g-hadd-r, .g-scroll.has-more td.g-end{ box-shadow:-8px 0 10px -8px rgba(16,24,40,.35); clip-path:inset(0 0 0 -14px); }
.g-name{ display:flex; align-items:center; gap:2px; width:100%; font:inherit; font-weight:700; color:var(--text); background:transparent; border:none; padding:6px 10px; cursor:pointer; text-align:left; border-radius:6px; min-width:0; }
.g-name:hover{ background:#f3f4f6; }
.g-name .g-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-caret{ margin-left:auto; color:var(--muted); font-size:10px; flex-shrink:0; padding-left:4px; }
.g-table td.g-step{ padding:0; background:#fafbfc; border-left:4px solid var(--accent); overflow:hidden; }
.g-table td.g-det{ padding:6px 10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-table td.g-det.g-warn{ color:#92400e; background:var(--warn-bg); font-style:italic; }
.g-table td.g-cell{ height:30px; cursor:pointer; background:#fff; }
.g-table td.g-cell:hover{ background:#eef2ff; }
.g-table td.g-cell.g-on{ background:var(--wt-color, #94a3b8); }
.g-table td.g-cell.g-on:hover{ opacity:.8; }
/* The grid speaks two languages, so it must not draw them alike. A PRESENCE is one
   continuous band: something was added on a day and is still there afterwards, and only the
   arrival is an event — it carries a notch on its leading edge. An ACTION is a gesture per
   marked day, drawn as separate pills with air between them, so three feedings read as three
   things done and not as three days of anything lasting. */
.g-table td.g-cell.g-act{ background:transparent; padding:0; }
.g-table td.g-cell.g-act::after{ content:""; display:block; height:16px; margin:7px 3px; border-radius:8px;
  background:var(--wt-color, #94a3b8); }
.g-table td.g-cell.g-act:hover{ background:#eef2ff; }
.g-table td.g-cell.g-arrive{ position:relative; }
.g-table td.g-cell.g-arrive::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--text); opacity:.55; }
.g-table tr.g-open td.g-step, .g-table tr.g-open td.g-det{ background:#eef2ff; }
.g-table td.g-end{ border-right:none; border-bottom:none; text-align:center; }
.g-table td.g-empty{ padding:26px; text-align:center; color:var(--muted); }
.g-detail td{ background:#f7f8fb; border-right:none; }
.g-detail-body{ display:flex; flex-wrap:wrap; gap:8px 14px; padding:10px 12px; align-items:flex-end; position:sticky; left:0; }
.f{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.f input, .f select{ min-width:130px; }
.f-dose input{ width:90px; min-width:0; }
.f-unit select{ width:100px; min-width:0; }
.f-check{ flex-direction:row; align-items:center; gap:6px; padding-bottom:6px; }
.f-off{ opacity:.45; }
.f-hint{ flex:1 1 100%; font-size:11.5px; color:var(--muted); }
/* Under the timeline: three equal cards (deviations, protocol, notes) when the column is
   wide, two plus the notes across on a laptop, stacked on a narrow screen. The thresholds
   follow the column's own width, not the viewport's (container queries; a browser without
   them stacks). */
.under-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:4px; align-items:stretch; }
@container (min-width: 640px){ .under-grid{ grid-template-columns:1fr 1fr; } .block-wide{ grid-column:1 / -1; } }
@container (min-width: 1000px){ .under-grid{ grid-template-columns:repeat(3, 1fr); } .block-wide{ grid-column:auto; } }
.side-block{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; min-width:0; display:flex; flex-direction:column; }
.side-block .field{ flex:1 1 auto; }
.side-block .field textarea{ flex:1 1 auto; min-height:72px; }
.side-block pre.notes{ margin:0; flex:1 1 auto; }
.side-title{ font-weight:700; font-size:12.5px; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.badge-count:empty{ display:none; }
.badge-count{ font-size:10.5px; font-weight:800; padding:0 6px; border-radius:999px; background:#fff4e0; color:#92400e; border:1px solid #fde4b8; line-height:16px; }
.warn-inline{ color:#92400e; }
/* The REMBI record alone on the right, pinned, as tall as the viewport. */
.editor-side{ display:flex; flex-direction:column; position:sticky; top:118px; max-height:calc(100vh - 132px); min-width:0;
              background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.side-head{ padding:8px 12px; border-bottom:1px solid var(--line); background:#fafbfc; font-weight:700; font-size:12.5px; color:var(--text); flex-shrink:0; }
.side-head small{ font-weight:500; font-size:11.5px; }
.editor-side pre.rembi{ flex:1 1 auto; min-height:240px; max-height:none; margin:0; border-radius:0; font-size:11px; }
.field{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); }
.field small{ display:block; font-size:11.5px; }
.field input{ width:100%; }
.facts{ margin-top:8px; display:flex; flex-direction:column; gap:3px; font-size:12.5px; }
.fact b{ color:var(--muted); font-weight:700; margin-right:4px; }
.fact.warn{ background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:7px; padding:4px 8px; }

/* REMBI model: baseline picker, requirements, deviations, generated record */
.baseline-pick{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:700; }
.baseline-pick select{ font-weight:600; }
.requires{ margin:0 0 10px; }
.requires[hidden]{ display:none; }
.req-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.req{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-end; background:#f7f8fb; border:1px solid var(--line);
      border-left:4px solid var(--induction); border-radius:var(--radius); padding:10px 12px; margin-bottom:6px; }
.req .f input, .req .f select{ min-width:110px; }
.inducer-choice{ flex:1 1 260px; }
.inducer-link{ flex:1 1 100%; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0;
                padding:8px 10px; border:1px solid #bfdbfe; border-radius:8px; background:#eff6ff; color:#1e3a8a; font-size:12.5px; }
.inducer-link > span{ min-width:0; overflow-wrap:anywhere; }
.inducer-link small{ display:block; margin-top:2px; }
.inducer-link.inducer-incomplete{ border-color:var(--warn-line); background:var(--warn-bg); color:#92400e; }
.inducer-note{ flex:1 1 100%; color:var(--muted); font-size:11.5px; }
.dev-list{ margin:4px 0; padding-left:18px; font-size:12.5px; }
.dev-list li{ margin:2px 0; }
.protocol{ margin:6px 0; font-size:13px; line-height:1.5; color:#374151; }
pre.rembi{ background:#0f172a; color:#e2e8f0; border-radius:var(--radius); padding:12px 14px; overflow:auto;
           font-size:11.5px; line-height:1.5; max-height:460px; }
.aliases{ margin:10px 2px; font-size:13px; }
.alias{ display:inline-block; padding:2px 8px; border-radius:6px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; margin:2px 3px 2px 0; font-family:ui-monospace, Menlo, monospace; font-size:12px; }
.alias-same{ background:#f3f4f6; border-color:var(--line); color:var(--muted); }
details.conversion{ margin:8px 2px; font-size:12.5px; color:var(--muted); }
details.conversion summary{ cursor:pointer; }
details.conversion ul{ margin:6px 0 0; padding-left:20px; }
.wt-table tr.wt-dev td.wt-step{ font-weight:800; }
.wt-table tr.wt-dev td.wt-det{ color:#92400e; }

/* save panel */
.save-panel{ margin:12px 0; padding:14px 16px; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); }
.save-panel.exists{ background:var(--ok-bg); border-color:var(--ok-line); }
.save-panel.variant{ background:var(--warn-bg); border-color:var(--warn-line); }
.save-panel.collision{ background:#fdecec; border-color:var(--danger); box-shadow:0 0 0 3px rgba(212,61,61,.10); }
/* The standing-invariant breach: stated at the top of the dictionary, never hidden, and
   never blocking — a faulty dictionary must stay readable and exportable. */
.audit-warning{ margin:0 0 14px; padding:14px 16px; border-radius:var(--radius);
  background:#fdecec; border:1px solid var(--danger); box-shadow:0 0 0 3px rgba(212,61,61,.10); }
.audit-title{ font-weight:800; margin-bottom:6px; }
.audit-warning ul{ margin:6px 0; padding-left:20px; }

.panel-title{ font-weight:800; }
.panel-name{ font-size:20px; font-weight:800; margin:4px 0 6px; }
.panel-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.diff-list{ margin:6px 0; padding-left:20px; }

/* the automatic wash-off: the added row, its tag, and the notice under the grid */
.g-table tr.g-auto td.g-step, .g-table tr.g-auto td.g-det{ background:#eef2ff; }
.g-table tr.g-auto td{ box-shadow:inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary); }
.tag-auto{ display:inline-block; font-size:10px; font-weight:800; padding:0 6px; border-radius:999px; background:var(--primary); color:#fff; margin-left:6px; white-space:nowrap; line-height:16px; }
.g-table tr.g-inducer-incomplete td.g-step, .g-table tr.g-inducer-incomplete td.g-det{ background:var(--warn-bg); }
.tag-incomplete{ display:inline-block; font-size:10px; font-weight:800; padding:0 6px; border-radius:999px; background:#f59e0b; color:#fff; margin-left:6px; white-space:nowrap; line-height:16px; }
.notice-wash{ display:flex; align-items:flex-start; gap:12px; background:#eef2ff; border:1px solid #c7d2fe; border-left:4px solid var(--primary); border-radius:var(--radius); padding:10px 14px; font-size:13px; margin:10px 0 0; }
.notice-wash[hidden]{ display:none; }
.notice-wash b{ color:#1e3a8a; }
/* A notice has two statuses, and the colour is what separates them. Blue says the app ADDED
   something coherent — the wash-off that closes a band — and the grid badges that row anyway,
   which is why it may be skimmed. Amber says something is LEFT OVER that the user may not have
   wanted, and nothing else will force the decision. Amber is already this app's "deviates or is
   incomplete", `.inducer-incomplete` included, which is the very same feature area; keeping the
   two apart is what stops amber from meaning nothing. The glyph carries the same difference,
   because colour alone is no signal in black and white, in a screenshot, or to a colour-blind
   reader (Antoine, 2026-10-01: "une cartouche bleu … je ne la lis pas vraiment"). */
.notice-wash.notice-attention{ background:var(--warn-bg); border-color:var(--warn-line); border-left-color:#d97706; }
.notice-wash.notice-attention b{ color:#92400e; }
.notice-icon{ font-size:16px; line-height:1.2; }
.notice-acts{ margin-left:auto; display:flex; gap:8px; flex-shrink:0; }
.fact.warn .btn{ margin-left:6px; vertical-align:middle; }

/* toast */
.toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#111827; color:#fff; padding:9px 14px; border-radius:9px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:50; max-width:90vw; }
.toast.toast-error{ background:var(--danger); }

/* Keyboard focus stays visible inside the day grid. */
.g-cell:focus-visible { outline: 3px solid #2563eb; outline-offset: -3px; position: relative; z-index: 2; }