/* tokens.css -- the ONE place the app's colours, type, spacing, corners and shadows are defined (Task 9, Oct 2026).
   Every page links this file; templates and scripts use these variables and the shared classes below, never their own
   colour or size values.  Generated client documents (PDF/quote) have their own print stylesheet (render.py) and brand colours
   (Bauer, Merson, Hubit) and are deliberately not styled from here.
   Contrast: every text/background pair below is >= 4.5:1 (WCAG AA), checked 19 Oct 2026. */
  /* Design refresh (17 Sep 2026 (63)) -- brought into line with iuf.digital's
     real look and feel (colors/fonts pulled directly from the live site, not
     guessed): near-black navy background, Inter, pill-shaped buttons, and the
     same cyan/pink brand accents, applied full-dark per this app's own scope
     decision. Variable ROLES are unchanged from the old light theme (--navy
     still means "the brand emphasis color", --border still means "subtle
     divider") so every template's existing var(--x) references keep working
     without edits; only the VALUES and a few structural rules (header/button
     fills that used to assume a light page) changed. The generated PDF/quote
     documents are a fully separate stylesheet (render.py's css_for()) and are
     deliberately left alone -- those are printable client deliverables, not
     app chrome, and stay light/print-friendly regardless of this theme. */
  :root {
    --navy:#33bcee;       /* brand cyan -- emphasis text/borders/buttons (was literal navy-on-white) */
    --gold:#ee3a89;       /* brand pink -- secondary accent (wordmark, sparingly) */
    --bg:#030723;         /* page background -- exact iuf.digital match */
    --card:#0b1430;       /* elevated surface (cards, panels) */
    --card-2:#101c46;     /* nested surface within a card (section-block, option-block, overrides) */
    --hover:#16224a;      /* hover background for rows/buttons */
    --active:#123a52;     /* active/selected tint (toggle, totals rows) */
    --border:#26325a;     /* subtle border on dark surfaces */
    --text:#f3f5fb;       /* primary text */
    --muted:#8fa0c7;      /* secondary/muted text */
    --danger:#ff8fa3;     /* warning/error text on dark surfaces */
    --good:#5fe3a0; --good-bg:#0e3323; --good-border:#1e6b48;
    --warn:#ffc866; --warn-bg:#3a2c10; --warn-border:#5c4520;
    --bad:#ff8fa3;  --bad-bg:#3a1220;  --bad-border:#6b2438;
    --scrim:rgba(3,7,35,.78);        /* behind pop-ups */
    --scrim-strong:rgba(3,7,35,.85); /* small buttons laid over a picture */
    --overlay:rgba(0,0,0,.6);        /* behind full-screen viewers */
    --shadow-pop:0 8px 24px rgba(0,0,0,.5); --shadow-drop:0 4px 12px rgba(0,0,0,.35);
    --nav-text:#c3cce8;
    --paper:#fff; --ink:#000;        /* plain white / black where a picture or print needs them */
  }
  * { box-sizing: border-box; }
  body { margin:0; font-family: 'Inter', -apple-system, "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); }
  a { color: var(--navy); }
  /* No a:visited rule on purpose: it out-ranked .btn / .nav-pop a / .bell-item, so a visited link-button lost its text (cyan on cyan). */
  ::-webkit-scrollbar { width:10px; height:10px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius:6px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
  header { background: var(--bg); color: var(--text); padding: 14px 28px; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid var(--border); }
  header .brand { font-weight: 800; font-size: 16px; letter-spacing: -0.3px; }
  header a.brand:visited { color: inherit; }
  header .brand span { background: linear-gradient(90deg, var(--gold) 0%, var(--navy) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  header nav a { color: var(--nav-text); text-decoration:none; margin-left: 18px; font-size: 14px; }
  header nav a:hover { color: var(--navy); }
  .nav-badge { display:inline-block; min-width:18px; padding:0 6px; border-radius:999px; background: var(--gold); color: var(--bg); font-size:11px; font-weight:700; text-align:center; line-height:18px; vertical-align:1px; }
  main { max-width: var(--w-page); margin: 0 auto; padding: 28px 20px 60px; }
  h1 { font-size: 22px; margin: 0 0 4px 0; }
  h2 { font-size: 15px; color: var(--navy); margin: 26px 0 10px 0; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
  .sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
  .card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; margin-bottom: 18px; }
  label { display:block; font-size: 12.5px; font-weight: 600; color: var(--text); margin: 12px 0 4px; }
  label .hint { font-weight: 400; color: var(--muted); font-size: 11.5px; }
  input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=search], input[type=password], input[type=date], select, textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; background: var(--card-2); color: var(--text);
    font-family: inherit;       /* a textarea otherwise falls back to the browser's monospace font */
  }
  input[type=file] { font-family: inherit; font-size: 13px; color: var(--muted); max-width: 100%; }
  input[type=file]::file-selector-button { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; margin-right: 10px; font: inherit; font-weight: 600; cursor: pointer; }
  input[type=file]::file-selector-button:hover { background: var(--hover); border-color: var(--navy); }
  input::placeholder, textarea::placeholder { color: var(--muted); }
  input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=url]:focus, input[type=search]:focus, input[type=password]:focus, input[type=date]:focus, select:focus, textarea:focus { outline:none; border-color: var(--navy); }
  .row { display:flex; gap: 14px; }
  .row > div { flex: 1; }
  .section-block { border: 1px dashed var(--border); border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; background: var(--card-2); }
  .section-block .row2 { display:flex; gap:10px; }
  .section-block .row2 > div { flex:1; }
  button, .btn { background: var(--navy); color: var(--bg); border: none; padding: 10px 20px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration:none; display:inline-block; }
  button:hover, .btn:hover { background: #56cdf5; }

  /* Shared tab bar (2 Nov 2026): the Merson costing page's tabs everywhere -- plain labels, a cyan underline under the open one.
     Used by job pages (.job-tabs), the quote builder (.bld-tabs), Corporate AV (.av-tabs) and the library admin tabs. */
  .job-tabs, .bld-tabs, .av-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .job-tab, .bld-tab, .av-tabs a { background:none; border:0; border-bottom:3px solid transparent; border-radius:999px; padding:10px 14px; margin:0; font-size:16px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-block; }
  .job-tab:hover, .bld-tab:hover, .av-tabs a:hover { background:none; color:var(--text); }
  .job-tab[aria-selected="true"], .bld-tab[aria-selected="true"], .av-tabs a.on, .av-tabs a[aria-selected="true"] { color:var(--text); background:none; border-bottom-color:var(--navy); }
  .job-tab:focus-visible, .bld-tab:focus-visible, .av-tabs a:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
  .btn.secondary, button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
  .btn.secondary:hover, button.secondary:hover { background: var(--hover); border-color: var(--navy); }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align:left; padding: 6px 8px; border-bottom: 2px solid var(--border); color: var(--muted); font-size: 11.5px; text-transform: uppercase; }
  td { padding: 8px; border-bottom: 1px solid var(--border); }
  .status { display:inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight:700; }
  .status.done { background: var(--good-bg); color: var(--good); }
  .status.pending { background: var(--warn-bg); color: var(--warn); }
  .status.error { background: var(--bad-bg); color: var(--bad); }
  .status.draft { background: var(--card-2); color: var(--muted); border: 1px dashed var(--border); }
  .warn-box { background: var(--warn-bg); border:1px solid var(--warn-border); color: var(--warn); padding: 12px 14px; border-radius:6px; font-size:13px; margin-bottom:14px; }
  .warn-box ul { margin: 6px 0 0 18px; padding:0; }
  .candidate { border:1px solid var(--border); border-radius:6px; padding:10px 12px; margin-bottom:8px; cursor:pointer; }
  .candidate:hover { border-color: var(--navy); }
  .candidate input { margin-right:8px; }
  .candidate .spec { color: var(--muted); font-size:12px; margin-top:2px; }
  .empty { color: var(--muted); font-style: italic; padding: 30px; text-align:center; }
  footer { text-align:center; color: var(--muted); font-size: 11.5px; padding: 30px 0 10px; }

  select[disabled], option[disabled] { color: var(--muted); }
  .badge-unavailable { display:inline-block; font-size:10.5px; font-weight:700; color: var(--warn); background: var(--warn-bg); border-radius:4px; padding:1px 6px; margin-left:6px; }
  .solution-block { border: 1.5px solid var(--navy); border-radius: 8px; padding: 16px 18px; margin-bottom: 18px; background: var(--card); }
  .solution-block > .solution-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .solution-block > .solution-head h3 { margin:0; font-size:15px; color: var(--navy); }
  .option-block { border: 1px solid var(--border); border-radius: 7px; padding: 14px 16px; margin: 10px 0; background: var(--card-2); }
  .option-block .option-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
  .option-block .option-head strong { font-size: 13.5px; color: var(--navy); }
  .field-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
  .field-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .field-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .pricing-override { border:1px solid var(--border); border-radius:6px; margin:8px 0; background: var(--card-2); }
  .pricing-override-head { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--navy); }
  .pricing-override-caret { transition: transform 0.15s; font-size:11px; }
  .pricing-override.open .pricing-override-caret { transform: rotate(90deg); }
  .pricing-override-body { display:none; padding:0 10px 10px; }
  .pricing-override.open .pricing-override-body { display:block; }
  .accessory-row { border-bottom:1px dashed var(--border); padding-bottom:4px; }
  .accessory-row:last-child { border-bottom:none; }
  .subhead { font-size: 12px; font-weight:700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.3px; margin: 14px 0 6px; }
  .type-toggle { display:flex; gap:8px; margin-bottom: 10px; }
  .type-toggle label { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; margin:0; }
  .type-toggle input { width:auto; margin:0; }
  .type-toggle label.active { border-color: var(--navy); background: var(--active); }
  .unavailable-panel { opacity: 0.7; }
  .unavailable-note { background: var(--warn-bg); border:1px solid var(--warn-border); color: var(--warn); padding:8px 10px; border-radius:6px; font-size:12px; margin-bottom:10px; }
  .remove-btn { background:none; border:none; color: var(--bad); font-size:12px; cursor:pointer; text-decoration:underline; padding:0; }
  .count-row { display:flex; align-items:flex-end; gap:10px; }
  .count-row input { width: 100px; }
  .count-row button { margin-bottom: 1px; }
  .cascade-status { font-size:11.5px; color: var(--muted); margin-top:4px; }
  /* Product typeahead (17 Sep 2026 (50)) -- quick-search box that sits above
     the LED/LCD Environment->...->Product cascade and jumps straight to a
     specific row by setting every cascade select programmatically, rather
     than replacing the cascade (still the fallback/source of truth). */
  .typeahead-results { position:absolute; z-index:20; top:100%; left:0; right:0; background: var(--card);
    border:1px solid var(--border); border-top:none; border-radius:0 0 6px 6px; max-height:260px;
    overflow-y:auto; box-shadow:0 10px 24px rgba(0,0,0,0.5); }
  .typeahead-item { padding:7px 10px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--border); }
  .typeahead-item:last-child { border-bottom:none; }
  .typeahead-item:hover, .typeahead-item.active { background: var(--hover); }
  .typeahead-item .hint { display:inline; }
  .typeahead-empty { padding:8px 10px; font-size:12.5px; color: var(--muted); font-style:italic; }
  /* Phase 3 Step 0: shared pop-up panel, toast and (i) tooltip, used by every tool (static/js/iuf_ui.js) */
  .iuf-modal-bg { position:fixed; inset:0; background:rgba(3,7,35,.78); z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:12vh 16px 5vh; overflow:auto; }
  .iuf-modal { background: var(--card); border:1px solid var(--border); border-radius:10px; padding:20px 24px; width:min(460px, 100%); box-shadow:0 18px 48px rgba(0,0,0,.55); }
  .iuf-modal h3 { margin:0 0 10px; font-size:16px; color: var(--text); }
  .iuf-modal-body { font-size:13.5px; color: var(--text); line-height:1.5; margin-bottom:6px; }
  .iuf-modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
  .iuf-modal .iuf-input { margin-top:8px; }
  .iuf-modal button.danger { background:#b3263e; border-color:#b3263e; color:#fff; }
  .iuf-toast { position:fixed; right:20px; bottom:20px; background: var(--card); border:1px solid var(--navy); border-radius:8px; padding:10px 16px; font-size:13px; z-index:210; box-shadow:0 8px 24px rgba(0,0,0,.5); max-width:min(420px, calc(100vw - 40px)); }
  .iuf-toast.err { border-color: var(--bad); color: var(--bad); }
  /* answer chips: the one look every AI assistant uses for its questions (Corporate AV set the style) */
  .iuf-chips { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 8px; }
  .iuf-chip { position:relative; display:inline-flex; align-items:center; cursor:pointer; padding:5px 13px; border:1px solid var(--border); border-radius:999px; background:transparent; color: var(--text); font-size:12.5px; font-weight:500; margin:0; }
  .iuf-chip:hover { background: var(--hover); }
  .iuf-chip input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
  .iuf-chip.on, .iuf-chip:has(input:checked) { border-color: var(--navy); background: var(--active); color: var(--navy); }
  .iuf-chip:has(input:focus-visible) { outline:2px solid var(--navy); outline-offset:2px; }
  .iuf-tip, .iuf-term { position:relative; cursor:help; }
  .iuf-tip { display:inline-block; width:15px; height:15px; line-height:15px; text-align:center; font-size:10.5px; font-weight:700; border-radius:50%; border:1px solid var(--muted); color: var(--muted); margin-left:5px; vertical-align:middle; font-style:normal; }
  .iuf-term { border-bottom:1px dotted var(--muted); }
  .iuf-tip[data-tip]:hover::after, .iuf-tip[data-tip]:focus::after, .iuf-term[data-tip]:hover::after { content: attr(data-tip); position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%); width:max-content; max-width:260px; background: var(--card-2); color: var(--text); border:1px solid var(--border); border-radius:6px; padding:7px 10px; font-size:12px; font-weight:400; line-height:1.4; text-align:left; z-index:220; box-shadow:0 8px 24px rgba(0,0,0,.5); white-space:normal; }

/* ---- Design tokens added by Task 9 ---------------------------------------------------------------------------------- */
:root {
  --accent-hover:#56cdf5;           /* hover for the primary (cyan) button */
  --on-accent: var(--bg);           /* text on a cyan fill (9:1) */
  --danger-solid:#b3263e;           /* solid red button (white text 6.4:1) */
  --danger-solid-hover:#c8314b;
  --paper:#ffffff; --paper-text:#14181f;   /* a page of a generated document, shown on screen as paper */
  --stage:#0c1116;                  /* behind a 3D view or a drawing */
  --focus: var(--navy);
  /* type scale: 12 / 14 / 16 / 20 / 24 / 32, one family */
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:24px; --fs-2xl:32px;
  --font: 'Inter', -apple-system, "Segoe UI", Arial, sans-serif;
  /* 8 px spacing scale (4 px half-step) */
  --sp-half:4px; --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px; --sp-6:48px;
  /* corners and depth */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --shadow-1:0 2px 8px rgba(0,0,0,.35); --shadow-2:0 8px 24px rgba(0,0,0,.5); --shadow-3:0 18px 48px rgba(0,0,0,.55);
  /* page widths */
  --w-page:1180px; --w-wide:1320px;     /* one page width for every screen (was 960 on some, 1180 on others) */
}
body { font-family: var(--font); font-size: var(--fs-sm); line-height: 1.45; }

/* keyboard focus is always visible */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.skip-link { position:absolute; left:-9999px; top:0; background: var(--navy); color: var(--on-accent); padding:8px 14px; border-radius: 0 0 var(--r-md) 0; z-index:300; font-weight:700; }
.skip-link:focus { left:0; }
@media (prefers-reduced-motion: reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* money, numbers and units */
.money, .num, td.num, th.num { font-variant-numeric: tabular-nums; }
td.money, th.money, td.num, th.num, .money-col { text-align:right; white-space:nowrap; }
.unit { color: var(--muted); font-weight:400; }

/* one button set: primary (cyan), secondary (outline), danger (red), quiet (text) */
button:disabled, .btn:disabled, .btn.disabled { opacity:.5; cursor:not-allowed; }
.btn.danger, button.danger { background: var(--danger-solid); color:#fff; }
.btn.danger:hover, button.danger:hover { background: var(--danger-solid-hover); }
.btn.quiet, button.quiet { background:transparent; color: var(--navy); padding-left:8px; padding-right:8px; font-weight:600; }
.btn.quiet:hover, button.quiet:hover { background: var(--hover); }
.btn.sm, button.sm { padding:5px 12px; font-size: var(--fs-xs); }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--sp-2); flex-wrap:wrap; margin-bottom: var(--sp-2); }
.page-head h1 { margin:0; }
.page-head .page-actions { display:flex; gap: var(--sp-1); align-items:center; margin-left:auto; }   /* the primary action lives here, top right */
main.wide { max-width: var(--w-wide); }

/* status chips: one look everywhere */
.chip, .status { display:inline-block; padding:2px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight:700; line-height:1.5; white-space:nowrap; }
.chip.ok, .chip.ready, .chip.approved { background: var(--good-bg); color: var(--good); }
.chip.warn, .chip.recheck, .chip.held, .chip.pending { background: var(--warn-bg); color: var(--warn); }
.chip.bad, .chip.blocked { background: var(--bad-bg); color: var(--bad); }
.chip.draft, .chip.muted { background: var(--card-2); color: var(--muted); border:1px dashed var(--border); }
.chip.info { background: var(--active); color: var(--navy); }

/* inline messages */
.msg { padding: 10px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); margin-bottom: var(--sp-2); border:1px solid var(--border); background: var(--card-2); color: var(--text); }
.msg.error { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad); }
.msg.ok { background: var(--good-bg); border-color: var(--good-border); color: var(--good); }
.msg.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.msg .ref { font-variant-numeric: tabular-nums; opacity:.85; font-size: var(--fs-xs); margin-left:6px; }
.draft-strip { background: var(--warn-bg); border:1px solid var(--warn-border); color: var(--warn); border-radius: var(--r-sm); }

/* empty state with a next step */
.empty-state { text-align:center; padding: var(--sp-5) var(--sp-3); color: var(--muted); }
.empty-state strong { display:block; color: var(--text); font-size: var(--fs-md); margin-bottom: 4px; }
.empty-state .btn { margin-top: var(--sp-2); }

/* tables: sticky header on request, status and number columns */
table.sticky thead th { position: sticky; top: 0; background: var(--card); z-index: 2; }
th[data-sort] { cursor:pointer; user-select:none; }
th[data-sort]:hover { color: var(--text); }
th[aria-sort="ascending"]::after { content:" \25B2"; font-size:9px; }
th[aria-sort="descending"]::after { content:" \25BC"; font-size:9px; }
.table-wrap { overflow-x:auto; }

/* paper (a document page shown on screen) and stage (3D / drawings) */
.paper { background: var(--paper); color: var(--paper-text); border-radius: var(--r-sm); }
.stage { background: var(--stage); border-radius: var(--r-sm); }
.stage .stage-msg { color: var(--text); padding: var(--sp-3); }

/* toast with an action (Undo) and a stack */
#iuf-toasts { position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; z-index:210; align-items:flex-end; pointer-events:none; }
#iuf-toasts .iuf-toast { position:static; pointer-events:auto; display:flex; gap:12px; align-items:center; }
.iuf-toast .toast-act { background:transparent; border:none; color: var(--navy); font-weight:700; cursor:pointer; padding:0 4px; text-decoration:underline; font-size: var(--fs-sm); }
.iuf-toast.ok { border-color: var(--good); }

/* a button that reads as a link (History row actions) */
.link-btn { background:none; border:none; padding:0; color: var(--navy); text-decoration:underline; cursor:pointer; font:inherit; font-weight:600; border-radius:0; }
.link-btn:hover { background:none; color: var(--accent-hover); }
.link-btn.danger { color: var(--bad); background:none; }
.link-btn.danger:hover { color: var(--text); background:none; }

/* progress panel and the notification bell */
.iuf-prog { height:10px; background: var(--card-2); border:1px solid var(--border); border-radius: var(--r-pill); overflow:hidden; margin:10px 0 8px; }
.iuf-prog-bar { height:100%; background: var(--navy); border-radius: var(--r-pill); transition: width .5s ease; }
.iuf-prog-stage { font-weight:600; }
.iuf-prog-err { color: var(--bad); }
.bell-wrap { position:relative; display:inline-block; margin-left:18px; vertical-align:middle; }
.bell { background:transparent; border:1px solid transparent; color:#c3cce8; padding:5px 7px; border-radius: var(--r-pill); position:relative; line-height:0; cursor:pointer; }
.bell:hover { color: var(--navy); background: var(--hover); }
.bell.busy svg { animation: bell-pulse 1.4s ease-in-out infinite; color: var(--navy); }
@keyframes bell-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.bell-badge { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius: var(--r-pill); background: var(--gold); color: var(--bg); font-size:10.5px; font-weight:700; line-height:16px; text-align:center; }
.bell-panel { position:absolute; right:0; top:calc(100% + 8px); width:min(360px, 92vw); max-height:70vh; overflow:auto; background: var(--card); border:1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); z-index:150; text-align:left; }
.bell-item { display:block; padding:10px 14px; border-bottom:1px solid var(--border); text-decoration:none; color: var(--text); font-size: var(--fs-sm); margin:0; }
.bell-item:hover { background: var(--hover); }
.bell-item strong { display:block; } .bell-item span { display:block; color: var(--muted); font-size: var(--fs-xs); margin-top:2px; } .bell-item em { display:block; color: var(--muted); font-size: var(--fs-xs); font-style:normal; margin-top:2px; }
.bell-item.unread { border-left:3px solid var(--navy); } .bell-item.error strong { color: var(--bad); } .bell-item.ok strong { color: var(--good); } .bell-item.running { background: var(--active); }
.bell-empty { padding:16px; color: var(--muted); font-size: var(--fs-sm); } .bell-foot { padding:8px 14px; text-align:right; }

#iuf-chips { position:fixed; left:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; z-index:205; pointer-events:none; }
.iuf-chip-task { display:flex; align-items:center; gap:10px; background: var(--card); border:1px solid var(--navy); border-radius: var(--r-pill); padding:8px 16px; font-size: var(--fs-sm); box-shadow: var(--shadow-2); max-width:min(480px, calc(100vw - 40px)); }
.iuf-spin { width:14px; height:14px; border:2px solid var(--border); border-top-color: var(--navy); border-radius:50%; animation: iuf-spin .8s linear infinite; flex:none; }
@keyframes iuf-spin { to { transform: rotate(360deg); } }

/* ---- header menu: grouped, keyboard friendly, collapses to a Menu button on narrow screens ---------------------------------- */
header { position: relative; gap: var(--sp-2); flex-wrap: wrap; }
header nav { display:flex; align-items:center; flex-wrap:wrap; gap: var(--sp-1); flex: 1; justify-content:flex-end; }
header nav > a, header nav summary { margin-left: 0; padding: 6px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--nav-text); cursor:pointer; text-decoration:none; list-style:none; }
header nav summary::-webkit-details-marker { display:none; }
header nav summary::after { content:"\25BE"; margin-left:6px; font-size:10px; opacity:.8; }
header nav > a:hover, header nav summary:hover, header nav details[open] > summary { color: var(--navy); background: var(--hover); }
.nav-menu { position: relative; }
.nav-pop { position:absolute; left:0; top:calc(100% + 4px); min-width: 230px; background: var(--card); border:1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: var(--sp-1); z-index: 120; display:flex; flex-direction:column; }
.nav-pop-right { left:auto; right:0; }
.nav-pop a { margin:0 !important; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text); text-decoration:none; }
.nav-pop a:hover, .nav-pop a:focus { background: var(--hover); color: var(--navy); }
.nav-right { display:flex; align-items:center; gap: var(--sp-1); margin-left: var(--sp-2); }
.nav-search { background: transparent; color: var(--nav-text); border:1px solid var(--border); border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs-sm); font-weight:500; display:inline-flex; gap:8px; align-items:center; }
.nav-search:hover { background: var(--hover); color: var(--navy); border-color: var(--navy); }
kbd { font-family: inherit; font-size: var(--fs-xs); border:1px solid var(--border); border-radius:4px; padding:0 5px; color: var(--muted); background: var(--card-2); }
.nav-toggle { display:none; background: transparent; color: var(--text); border:1px solid var(--border); border-radius: var(--r-pill); padding: 6px 14px; font-size: var(--fs-sm); }
@media (max-width: 900px) {
  header { padding: 10px 16px; }
  .nav-toggle { display:inline-block; }
  header nav { display:none; flex-direction:column; align-items:stretch; width:100%; flex-basis:100%; gap:0; padding-top: var(--sp-1); }
  header nav.open { display:flex; }
  header nav > a, header nav summary { padding: 12px 10px; }
  .nav-pop, .nav-pop-right { position:static; box-shadow:none; border:none; background:transparent; padding: 0 0 0 var(--sp-2); }
  .nav-right { flex-direction:column; align-items:stretch; margin-left:0; }
  .nav-search kbd { display:none; }
}

/* ---- Ctrl/Cmd+K search ------------------------------------------------------------------------------------------------- */
.iuf-search-bg { position:fixed; inset:0; background: var(--scrim); z-index: 230; display:flex; justify-content:center; align-items:flex-start; padding: 10vh 16px 0; }
.iuf-search { width:min(640px, 100%); background: var(--card); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow:hidden; }
.iuf-search input { width:100%; border:none; border-bottom:1px solid var(--border); border-radius:0; padding: 16px 18px; font-size: var(--fs-md); background: var(--card); color: var(--text); }
.iuf-search input:focus { outline:none; }
.iuf-search-list { max-height: 54vh; overflow:auto; padding: var(--sp-1); }
.iuf-search-group { font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.4px; color: var(--muted); padding: 10px 12px 4px; }
.iuf-search-item { display:flex; flex-direction:column; padding: 8px 12px; border-radius: var(--r-sm); color: var(--text); text-decoration:none; }
.iuf-search-item small { color: var(--muted); font-size: var(--fs-xs); }
.iuf-search-item.sel, .iuf-search-item:hover { background: var(--hover); }
.iuf-search-msg { padding: 18px; color: var(--muted); font-size: var(--fs-sm); }
.iuf-search-foot { border-top:1px solid var(--border); padding: 8px 14px; font-size: var(--fs-xs); color: var(--muted); display:flex; gap:14px; }

/* a text-style button keeps its transparent look on hover (the generic button:hover fill made it a blank cyan pill) */
button.btn-link:hover, button.btn-link:focus-visible, button.remove-btn:hover { background: none; color: var(--accent-hover); }
button.remove-btn:hover { color: var(--text); }