/* IBM Plex for the server build, from the server itself (decision D13): src/build.ps1 puts these rules in front of the
   page's styles (deploy/pb_public/css/app.css). The files are in deploy/pb_public/vendor, pinned in tools/vendor.json
   (@fontsource, OFL-1.1): the weights the page uses, normal style, the latin and latin-ext subsets with the unicode
   ranges of their packages (latin last, so it is tried first where they overlap). The claude.ai build keeps the Google
   Fonts link of p1.html. */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/ibm-plex-sans-5.3.0/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/ibm-plex-sans-5.3.0/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/vendor/ibm-plex-sans-5.3.0/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/vendor/ibm-plex-sans-5.3.0/ibm-plex-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/vendor/ibm-plex-sans-5.3.0/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/vendor/ibm-plex-sans-5.3.0/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/ibm-plex-mono-5.3.0/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/ibm-plex-mono-5.3.0/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/vendor/ibm-plex-mono-5.3.0/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/vendor/ibm-plex-mono-5.3.0/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

  :root {
    color-scheme: light;
    --bg: #F1F4F6; --surface: #FFFFFF; --surface-2: #E7EDF1; --ink: #0F1D26; --muted: #5B6C78;
    --line: #D3DCE3; --line-strong: #B9C6CF; --accent: #0A7F8C; --accent-ink: #FFFFFF; --accent-soft: #D7EFF1;
    --c-energy: #C9930F; --c-tech: #3A6FB3; --c-compute: #6E58D6; --c-capital: #2E8B58; --c-strat: #8A6D5A;
    --ok: #2E8B58; --warn: #B5641A; --bad: #C4402A; --bad-soft: #F8E3DE; --ok-soft: #DDF1E5; --warn-soft: #F7E8D8;
    --shadow: 0 12px 40px rgba(15, 29, 38, 0.16); --radius: 6px;
    --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0B1419; --surface: #121E26; --surface-2: #192832; --ink: #E4ECF0; --muted: #8DA1AD;
      --line: #243540; --line-strong: #34495A; --accent: #3CC3D0; --accent-ink: #062229; --accent-soft: #123A41;
      --c-energy: #E7B03A; --c-tech: #6FA0E4; --c-compute: #9E8CF2; --c-capital: #52C283; --c-strat: #C4A08A;
      --ok: #52C283; --warn: #E38C3F; --bad: #EA6B52; --bad-soft: #3A1F1A; --ok-soft: #14332A; --warn-soft: #3A2A18;
      --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0B1419; --surface: #121E26; --surface-2: #192832; --ink: #E4ECF0; --muted: #8DA1AD;
    --line: #243540; --line-strong: #34495A; --accent: #3CC3D0; --accent-ink: #062229; --accent-soft: #123A41;
    --c-energy: #E7B03A; --c-tech: #6FA0E4; --c-compute: #9E8CF2; --c-capital: #52C283; --c-strat: #C4A08A;
    --ok: #52C283; --warn: #E38C3F; --bad: #EA6B52; --bad-soft: #3A1F1A; --ok-soft: #14332A; --warn-soft: #3A2A18;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { height: 100%; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  a { color: inherit; }
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .eyebrow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
  h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; letter-spacing: -0.01em; }
  h1 { font-size: 22px; } h2 { font-size: 15px; } h3 { font-size: 13px; }
  p { margin: 0; }
  .dim { color: var(--muted); }
  .warn { color: var(--warn); } .bad { color: var(--bad); } .ok { color: var(--ok); }

  .app { display: grid; grid-template-columns: 208px 1fr; height: 100vh; height: 100dvh; }
  .rail { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 12px 14px; gap: 16px; min-width: 0; overflow-y: auto; }
  .brand { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
  .brand-mark { font-weight: 600; letter-spacing: 0.18em; font-size: 14px; }
  .brand-sub { color: var(--muted); font-size: 12px; }
  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav .sep { height: 1px; background: var(--line); margin: 6px 8px; }
  .nav a { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: var(--radius); text-decoration: none; color: var(--muted); font-weight: 500; }
  .nav a:hover { background: var(--surface-2); color: var(--ink); }
  .nav a.active { background: var(--accent-soft); color: var(--ink); }
  .nav a .count { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .nav a .count.alert { color: var(--bad); }
  .rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
  .rail-foot .version { font-size: 11px; color: var(--muted); text-decoration: none; }
  .rail-foot .version:hover { color: var(--ink); }
  .news { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
  .news .card { padding: 14px 16px; }
  .news h3 { margin: 0 0 2px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .news-intro p { margin-top: 6px; }
  .news-item { padding: 10px 0; border-top: 1px solid var(--line); }
  .news-item:first-of-type { border-top: 0; padding-top: 4px; }
  .news-item h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
  .news-item p { max-width: 75ch; }
  .news-item ol { margin: 6px 0 0; padding-left: 20px; }
  .news-item li { margin: 2px 0; }
  .news-item figure { margin: 10px 0 0; }
  .news-item img { display: block; max-width: 100%; max-height: 420px; width: auto; height: auto; border: 1px solid var(--line); border-radius: 6px; }
  .news-item figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }
  .mode { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 4px 6px; }
  .mode .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
  .mode.shared .dot { background: var(--ok); } .mode.local .dot { background: var(--warn); }
  .mode.connecting .dot { animation: pulse 1.2s infinite; }
  @keyframes pulse { 50% { opacity: 0.3; } }

  main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .topbar { display: flex; gap: 10px; align-items: center; padding: 10px 22px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
  .topbar input[type="search"] { flex: 1; min-width: 200px; max-width: 420px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); }
  .topbar .me { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
  .topbar .me select { width: auto; padding: 6px 26px 6px 8px; }
  .view { padding: 22px; overflow: auto; flex: 1; min-height: 0; }
  .view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
  .view-head .sub { color: var(--muted); margin-top: 4px; max-width: 70ch; }

  .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-weight: 500; white-space: nowrap; }
  .btn:hover { background: var(--surface-2); }
  .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .btn.primary:hover { filter: brightness(1.06); }
  .btn.danger { color: var(--bad); border-color: var(--bad); background: transparent; }
  .btn.danger:hover { background: var(--bad-soft); }
  .btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
  .btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
  .btn.sm { padding: 4px 8px; font-size: 12px; }
  .btn.icon { padding: 4px 6px; line-height: 1; }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  select, input:not([type="checkbox"]):not([type="radio"]):not([type="search"]), textarea { padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); width: 100%; min-width: 0; }
  textarea { resize: vertical; min-height: 72px; line-height: 1.45; }
  input:read-only { background: var(--surface-2); color: var(--muted); }
  .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
  .filters select { width: auto; padding: 6px 28px 6px 9px; }
  .filters .spacer { flex: 1; }
  .tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 8px; flex-wrap: wrap; }
  .tabs button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 500; }
  .tabs button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
  .menu { position: relative; }
  .menu-list { position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); min-width: 190px; padding: 4px; z-index: 15; display: flex; flex-direction: column; }
  .menu-list button { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 5px; cursor: pointer; }
  .menu-list button:hover { background: var(--surface-2); }

  .chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; border: 1px solid var(--line); color: var(--muted); background: var(--surface); white-space: nowrap; }
  .chip .sw { width: 7px; height: 7px; border-radius: 2px; }
  .chip.type { color: var(--ink); }
  .chip.stage { background: var(--surface-2); border-color: transparent; color: var(--ink); }
  .chip.due { font-family: var(--mono); }
  .chip.overdue { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
  .chip.soon { color: var(--warn); border-color: var(--warn); }
  .chip.good { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
  .chip.warnc { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
  .chip.cat { background: var(--accent-soft); border-color: transparent; color: var(--ink); }
  .agree { display: inline-flex; gap: 4px; }
  .agree span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); }
  .agree span.on { background: var(--accent-soft); border-color: transparent; color: var(--ink); font-weight: 500; }
  .tag { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 3px; background: var(--surface-2); color: var(--ink); min-width: 52px; text-align: center; }
  .tag.NEW { background: var(--accent-soft); } .tag.SIGNED { background: var(--ok-soft); color: var(--ok); } .tag.FID, .tag.LIVE { background: var(--ok); color: #fff; }
  .tag.BLOCKER { background: var(--bad-soft); color: var(--bad); } .tag.FINANCE { background: var(--c-capital); color: #fff; } .tag.OFFTAKE { background: var(--c-compute); color: #fff; }
  .tag.up { background: var(--ok-soft); color: var(--ok); } .tag.down { background: var(--warn-soft); color: var(--warn); }

  .card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
  .tile { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .tile .big { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
  .tile .big small { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 4px; }
  .tile .kv { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); gap: 8px; }
  .tile .kv b { color: var(--ink); font-weight: 500; font-family: var(--mono); }
  .tile.warnt { border-color: var(--warn); }
  .funnel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
  .fstep { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; position: relative; }
  .fstep .lbl { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
  .fstep .val { font-family: var(--mono); font-size: 24px; font-weight: 500; line-height: 1.1; }
  .fstep .val small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 3px; }
  .fstep .sub { font-size: 11px; color: var(--muted); }
  .fstep .barw { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-top: 4px; }
  .fstep .barw i { display: block; height: 100%; background: var(--accent); }
  .fstep.north { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 80%); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
  .panel { padding: 14px 16px; min-width: 0; }
  .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
  .panel-head a, .panel-head .dim { font-size: 12px; color: var(--muted); }
  .list { display: flex; flex-direction: column; }
  .row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; min-width: 0; }
  .row:first-child { border-top: 0; }
  .row:hover .name { color: var(--accent); }
  .row .name { font-weight: 500; }
  .row .grow { flex: 1; min-width: 0; }
  .row .meta { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .row .when { font-family: var(--mono); font-size: 11px; color: var(--muted); width: 70px; flex: none; }
  .row .amt { font-family: var(--mono); font-size: 12px; }
  .empty { color: var(--muted); padding: 22px 0; text-align: center; font-size: 13px; }
  .empty b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .kpi { background: var(--surface-2); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
  .kpi .k { font-size: 11px; color: var(--muted); }
  .kpi .v { font-family: var(--mono); font-size: 15px; font-weight: 500; }
  .kpi .v small { font-size: 10px; color: var(--muted); font-weight: 400; }

  .board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; min-height: 55vh; }
  .col { flex: 1 0 220px; background: var(--surface-2); border-radius: 8px; display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
  .col.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
  .col-head { display: flex; align-items: baseline; gap: 6px; padding: 10px 12px 6px; flex-wrap: wrap; }
  .col-head .st { font-weight: 600; font-size: 12px; flex: 1; }
  .col-head .n { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .col-head .sum { font-family: var(--mono); font-size: 11px; color: var(--ink); width: 100%; }
  .col-body { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 40px; }
  .kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; cursor: grab; display: flex; flex-direction: column; gap: 5px; }
  .kcard:hover { border-color: var(--line-strong); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
  .kcard.dragging { opacity: 0.5; }
  .kcard .kn { font-weight: 500; line-height: 1.3; }
  .kcard .km { font-size: 11px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .kcard .kv { font-family: var(--mono); font-size: 12px; }
  .kcard .kf { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }

  .tablewrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
  th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; cursor: pointer; user-select: none; position: sticky; top: 0; background: var(--surface); z-index: 1; }
  th.sorted { color: var(--ink); } th .dir { font-size: 9px; margin-left: 3px; }
  tbody tr { cursor: pointer; } tbody tr:hover { background: var(--surface-2); }
  td.name { font-weight: 500; } td.name small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
  td.num, th.num { font-family: var(--mono); text-align: right; }
  td.wrap { white-space: normal; max-width: 260px; }
  tfoot td { font-family: var(--mono); font-weight: 500; background: var(--surface-2); }

  .group { margin-bottom: 18px; }
  .group h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .group h2 .n { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 400; }
  .item { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); }
  .item:first-child { border-top: 0; }
  .item .due { font-family: var(--mono); font-size: 12px; color: var(--muted); }
  .item .what b { font-weight: 500; cursor: pointer; } .item .what b:hover { color: var(--accent); }
  .item .what .meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
  .item .hint-row { grid-column: 2 / -1; font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .item.pick { grid-template-columns: 18px 84px 1fr auto; }
  .item.pick > input[type="checkbox"] { justify-self: start; }
  details.hidden-mail > summary { cursor: pointer; margin-bottom: 8px; } details.hidden-mail > summary .dim { font-size: 13px; }

  .hist { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 6px 8px; border-left: 3px solid var(--line); color: var(--muted); font-size: 12px; margin: 2px 0; border-radius: 0 4px 4px 0; }
  .hist.new { border-left-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
  .hist .w { font-family: var(--mono); font-size: 11px; display: flex; flex-direction: column; gap: 1px; }
  .hist .w small { color: var(--muted); font-size: 10px; }
  .hist .newdot { display: inline-block; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); border-radius: 3px; padding: 1px 4px; margin-left: 6px; vertical-align: middle; }
  .btn.toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
  .wk { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .wk .card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
  .wk .card.done { border-color: var(--ok); }
  .wk .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .wk .fgrid { grid-template-columns: 1fr 1fr; }
  .wk .nochange { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
  .wk input[type="checkbox"] { accent-color: var(--accent); width: auto; }

  /* forecast by quarter (CYA-311, renderForecast): its cards one under the other; a row per quarter, which opens
     nothing itself, its records' names as links; the total in the colours of a table's foot; the dates a record lacks */
  .fc { display: flex; flex-direction: column; gap: 14px; }
  .fc-table th { cursor: default; }
  .fc-table tbody tr { cursor: default; }
  .fc-q .fc-tag { font-size: 11px; color: var(--muted); font-weight: 400; }
  .fc-recs { font-size: 12px; color: var(--muted); }
  .fc-recs b { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); }
  .fc-link, .q-link { border: 0; background: none; padding: 0; color: var(--ink); cursor: pointer; text-align: left; }
  .fc-link:hover, .q-link:hover { color: var(--accent); text-decoration: underline; }
  /* a row's name as such a button (the Forecast's undated, Data quality's gaps): the name's colour, the row's hover
     and the Ignored list's dimming included */
  .row .name .fc-link, .row .name .q-link { color: inherit; }
  .fc-total td { font-family: var(--mono); font-weight: 500; background: var(--surface-2); }
  .fc-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .fc-foot { margin-top: 8px; font-size: 12px; color: var(--muted); max-width: 100ch; }
  /* data quality (CYA-298, renderQuality): a card per check, whose rows open the record; the shortcuts to the contacts
     list's checks; the pairs as a table whose partners are links (.q-link above), each with its owner, status and
     domains, the reasons as chips */
  .q-list { display: flex; flex-direction: column; gap: 14px; }
  .q-note { margin: -4px 0 6px; font-size: 12px; color: var(--muted); max-width: 100ch; }
  .q-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; font-size: 12px; }
  .q-table th { cursor: default; }
  .q-table tbody tr { cursor: default; }
  .q-side { min-width: 0; }
  .q-side .q-link { font-weight: 500; }
  .q-side small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
  .q-why { display: flex; flex-wrap: wrap; gap: 4px; }
  /* a reason's chip wraps a long shared domain inside the card, never past a phone's screen */
  .q-why .chip { white-space: normal; overflow-wrap: anywhere; }
  .q-foot { margin-top: 10px; }
  /* its decisions (server build): Not duplicates and Ignore, what was dismissed on request with Show again, dimmed; a
     row's buttons go under its name where they do not fit beside it. Add partner's line of similar partners */
  .q-gaps .row, .q-dismissed .row { flex-wrap: wrap; }
  .q-gaps .row > .grow, .q-dismissed .row > .grow { flex: 1 1 160px; }
  .q-dismissed .row .name, .q-dismissed .q-side .q-link { color: var(--muted); }
  .q-dismissed .tablewrap { margin-top: 4px; }
  .q-act { text-align: right; }
  .q-similar { margin-top: -4px; font-size: 12px; color: var(--warn); }
  .q-similar b { color: var(--ink); font-weight: 500; }
  .q-similar .q-link { color: var(--accent); text-decoration: underline; }
  .dom-refused { margin-top: -4px; font-size: 12px; color: var(--warn); }
  /* Settings → Email tracking: the days after which loaded earlier mail counts as done */
  .track-setting { margin-top: 10px; }

  .report { max-width: 76ch; }
  .report .card { padding: 18px 22px; }
  .report h2 { margin: 16px 0 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .report h2:first-child { margin-top: 0; }
  .report .line { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 4px 0; font-size: 13px; align-items: start; }
  .report .caps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .report .caps div { background: var(--surface-2); border-radius: 5px; padding: 6px 8px; }
  .report .caps .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .report .caps .v { font-family: var(--mono); font-weight: 500; }
  .report pre { white-space: pre-wrap; font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 12px; border-radius: 6px; overflow-x: auto; }

  .map-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 12px; align-items: start; }
  .map-svg { width: 100%; height: auto; display: block; background: var(--surface); border-radius: 8px; }
  /* Germany under the sites (renderMap): a very light fill, the states' borders, the country's outline a little stronger,
     Lake Constance as water above them. The countries around under Germany, as context: half its fill over the
     background, their coasts and borders thinner and fainter than its own, so sites, cities and the grid stand out on
     them at least as on Germany. Lines keep their width however wide the map is drawn (non-scaling-stroke) */
  .map-svg .nb-country { fill: var(--surface-2); fill-opacity: 0.5; fill-rule: evenodd; }
  .map-svg .nb-line { fill: none; stroke: var(--muted); stroke-opacity: 0.3; stroke-width: 0.7; }
  .map-svg .de-state { fill: var(--surface-2); fill-rule: evenodd; }
  .map-svg .de-border, .map-svg .de-outline, .map-svg .de-lake, .map-svg .nb-line { stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .map-svg .de-border { fill: none; stroke: var(--muted); stroke-opacity: 0.4; stroke-width: 0.8; }
  .map-svg .de-outline { fill: none; stroke: var(--muted); stroke-opacity: 0.7; stroke-width: 1.2; }
  .map-svg .de-lake { fill: var(--surface); stroke: var(--muted); stroke-opacity: 0.7; stroke-width: 1.2; }
  .map-svg .grid line { stroke: var(--line); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
  .map-svg .grid text { fill: var(--muted); font-size: 9px; font-family: var(--mono); }
  .map-svg .city circle { fill: var(--muted); }
  .map-svg .city text { fill: var(--muted); font-size: 10px; }
  .map-svg .site { cursor: pointer; }
  .map-svg .site circle { stroke: var(--surface); stroke-width: 1.5; opacity: 0.9; }
  /* a site in no project: an open ring, whose edge stands out on the land and on the background (3:1 at least) */
  .map-svg .site .none { fill: var(--surface); stroke: var(--muted); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 1; }
  .map-svg .site:hover circle { opacity: 1; stroke: var(--ink); }
  .map-svg .site text { fill: var(--ink); font-size: 10px; font-weight: 500; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
  .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); align-items: center; }
  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
  .legend i.none { background: var(--surface); box-shadow: inset 0 0 0 2px var(--muted); }
  .redacted { color: var(--muted); font-style: italic; }
  .settings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .settings .card { padding: 14px 16px; }
  .settings table input { padding: 4px 6px; font-family: var(--mono); font-size: 12px; text-align: right; }
  .settings table th, .settings table td { padding: 5px 6px; position: static; cursor: default; }

  .scrim { position: fixed; inset: 0; background: rgba(8, 18, 24, 0.35); z-index: 20; }
  .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow); z-index: 21; display: flex; flex-direction: column; }
  .drawer-head { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .drawer-head .title { flex: 1; min-width: 200px; }
  .drawer-head .title input { font-size: 17px; font-weight: 600; border: 0; padding: 2px 0; background: transparent; width: 100%; }
  .drawer-head .title input:focus { outline: 0; border-bottom: 1px solid var(--accent); }
  .drawer-head .saved { font-size: 11px; color: var(--muted); font-family: var(--mono); min-width: 56px; text-align: right; }
  /* the tab bar keeps its height above a long tab (a scrolling flex item would shrink to nothing); the body scrolls.
     Every tab shows: where the drawer is too narrow for all of them (a project's ten), they wrap into a second row; on
     a phone they stay one row, which scrolls sideways (below). The first tab's label in line with the head and body */
  .drawer-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); overflow-x: auto; flex-shrink: 0; }
  .drawer-tabs button { border: 0; background: transparent; padding: 8px; cursor: pointer; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
  .drawer-tabs button.active { color: var(--ink); border-bottom-color: var(--accent); }
  .drawer-body { overflow-y: auto; padding: 16px 18px 40px; display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; min-height: 0; }
  .sect { display: flex; flex-direction: column; gap: 8px; }
  .sect-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .sect-head h3 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
  .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .fgrid.three { grid-template-columns: 1fr 1fr 1fr; }
  .fgrid .span { grid-column: 1 / -1; }
  .f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .fl { font-size: 11px; color: var(--muted); }
  .fl b { color: var(--ink); font-weight: 500; }
  .chips-multi { display: flex; flex-wrap: wrap; gap: 6px; }
  .chips-multi label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; cursor: pointer; }
  .chips-multi label.on { background: var(--accent-soft); border-color: transparent; }
  .chips-multi input { width: auto; margin: 0; accent-color: var(--accent); }
  .contact { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; padding: 8px; background: var(--surface-2); border-radius: 6px; }
  .contact input { background: var(--surface); padding: 5px 8px; font-size: 13px; }
  .contact .rm { grid-row: 1 / span 3; align-self: start; }
  .contact select { background: var(--surface); padding: 5px 8px; font-size: 13px; }
  .chip.label { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
  .sect-head .roles { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; margin-right: 8px; }
  .cw-labelset { display: flex; flex-direction: column; gap: 4px; }
  .prow { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr 0.9fr auto; gap: 6px; align-items: center; }
  .prow input, .prow select { padding: 5px 7px; font-size: 12px; }
  .prow-head { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .act-form { display: grid; grid-template-columns: 100px 124px 1fr auto; gap: 6px; }
  .act { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); align-items: start; font-size: 13px; }
  .act:first-of-type { border-top: 0; }
  .act .d { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 2px; }
  .act .t { font-size: 11px; color: var(--muted); }
  .act .rm { opacity: 0; } .act:hover .rm { opacity: 1; }
  .gate { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface-2); border-radius: 6px; font-size: 13px; }
  .gate label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .gate input { width: auto; accent-color: var(--accent); }
  .note { font-size: 12px; color: var(--muted); padding: 8px 10px; background: var(--surface-2); border-radius: 6px; }
  .note.warn { color: var(--warn); background: var(--warn-soft); }
  .drawer-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .linklist { display: flex; flex-direction: column; }
  .linklist .row { cursor: pointer; }
  .addrow { display: flex; gap: 6px; align-items: center; }
  .addrow select { flex: 1; }

  .modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(8, 18, 24, 0.45); padding: 20px; }
  .modal .box { background: var(--surface); border-radius: 10px; width: min(560px, 100%); padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; max-height: 90vh; overflow-y: auto; }
  .modal .box textarea.big { font-family: var(--mono); font-size: 12px; min-height: 260px; }
  .modal .acts { display: flex; justify-content: flex-end; gap: 8px; }
  .modal .box.wide { width: min(1080px, 100%); }
  .sg-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
  .sg-fields { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; align-items: center; font-size: 13px; }
  .sg-fields .was { grid-column: 2; font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; margin-top: -3px; }
  .sg-src { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; background: var(--surface-2); border-radius: 6px; padding: 10px; max-height: 340px; overflow: auto; margin: 0; }
  .sg-src { position: relative; }
  .sg-src mark { background: var(--warn-soft); color: inherit; border-radius: 2px; }
  .sg-src mark.sg-hit { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: 1px; }
  .sg-where { margin: 0 0 6px; color: var(--accent); font-weight: 500; }
  .sg-fields label.fl { cursor: pointer; }
  .sg-card { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .sg-card img { max-width: 100%; max-height: 200px; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
  .sg-card.big { min-height: 220px; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 6px; padding: 8px; }
  .sg-card.big img { max-height: 380px; }
  .sg-related { color: var(--warn); }
  /* known company addresses (CYA-309): the review's block under City, a partner's contact line "Known: …" */
  .known { display: flex; flex-direction: column; gap: 4px; font-size: 12px; min-width: 0; }
  .known:empty { display: none; }
  .sg-fields .known { grid-column: 2; }
  .contact .known { grid-column: 1 / -1; }
  .known-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; }
  .known-addr { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
  .known-row .fl { overflow-wrap: anywhere; }
  .sg-card.top { display: none; }
  /* business card scan */
  .cw-head { display: flex; flex-direction: column; gap: 10px; }
  .cw-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
  .cw-steps li { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); border-top: 3px solid var(--line); padding-top: 6px; }
  .cw-steps li b { font-family: var(--mono); font-weight: 600; }
  .cw-steps li.done { border-top-color: var(--accent); } .cw-steps li.on { border-top-color: var(--accent); color: var(--ink); font-weight: 600; }
  .cw-lead { margin: 0; font-size: 15px; }
  .cw-ok { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--ok-soft); color: var(--ok); font-weight: 500; }
  .cw-shot { display: grid; place-items: center; background: var(--surface-2); border-radius: 8px; padding: 10px; min-height: 200px; }
  .cw-shot img { max-width: 100%; max-height: 46vh; border-radius: 6px; background: #fff; }
  .cw-frame { width: min(320px, 80%); aspect-ratio: 85 / 55; border: 2px dashed var(--line-strong); border-radius: 10px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
  .stuck { color: var(--warn); font-weight: 600; }
  .closeask { background: var(--warn-soft); border-radius: 8px; padding: 8px 10px; }
  .closeask-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .closeask-row input { flex: 1; min-width: 140px; }
  .cw-cam { position: relative; width: 100%; overflow: hidden; border-radius: 6px; background: #000; }
  .cw-cam video { display: block; width: 100%; max-height: 46vh; object-fit: cover; }
  .cw-outline { position: absolute; inset: 0; margin: auto; width: 80%; aspect-ratio: 85 / 55; border: 2px dashed rgba(255, 255, 255, .9); border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3); pointer-events: none; }
  .cw-hint { margin: 0; font-size: 13px; color: var(--muted); }
  .cw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .btn.big { padding: 11px 16px; font-size: 15px; flex: 1 1 auto; justify-content: center; text-align: center; }
  .cw-guide { font-size: 13px; color: var(--ink); background: var(--surface-2); border-radius: 8px; padding: 8px 12px; }
  .cw-guide summary { cursor: pointer; font-weight: 600; } .cw-guide ol { margin: 8px 0; padding-left: 20px; } .cw-guide p { margin: 6px 0; }
  .cw-addback { align-self: flex-start; border-style: dashed; }
  .cw-back { display: flex; align-items: center; gap: 8px; font-size: 13px; } .cw-back img { height: 44px; border-radius: 4px; border: 1px solid var(--line); background: #fff; } .cw-back span { flex: 1; color: var(--muted); }
  .cw-thumbs { display: flex; gap: 8px; } .cw-thumbs img { max-height: 110px; max-width: 48%; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
  .cw-progress { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } .cw-progress span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
  .modal .box.cw { width: min(640px, 100%); }
  .modal .box.cs > .acts { position: sticky; bottom: -20px; background: var(--surface); padding: 12px 0 14px; margin-bottom: -20px; border-top: 1px solid var(--line); }
  .cs-group { display: flex; flex-direction: column; gap: 6px; } .cs-group > summary { cursor: pointer; font-weight: 600; }
  .cs-gh { display: flex; align-items: center; gap: 8px; justify-content: space-between; } .cs-gh h3 { margin: 0; font-size: 14px; }
  .cs-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  .cs-row.on { border-color: var(--accent); background: var(--surface-2); }
  .cs-row > input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
  .cs-main { flex: 1; min-width: 0; font-size: 13px; } .cs-main label { cursor: pointer; }
  .cs-line { margin-top: 3px; font-size: 12.5px; overflow-wrap: anywhere; } .cs-line s { color: var(--muted); }
  .cs-sim { color: var(--warn); } .cs-sim .btn { margin-left: 6px; }
  .ctable td.wrap { white-space: normal; }
  @media (max-width: 960px) { .sg-grid { grid-template-columns: 1fr; } }
  /* history (CYA-288) */
  .hist-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .hist-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: var(--surface); }
  .hist-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13px; }
  .hist-who { font-weight: 600; }
  .hist-changes { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
  .hist-changes li { margin: 3px 0; overflow-wrap: anywhere; }
  .hist-field { color: var(--muted); }
  .hist-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
  .hist-filters, .foot-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .hist-filters select { width: auto; }
  .hist-full { white-space: pre-wrap; }
  .hist-dlg h3 { margin-top: 2px; }
  .hist-dlg .hist-changes { margin-top: 0; }
  .hist-setback { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
  .hist-setback input { width: auto; margin: 0; accent-color: var(--accent); }
  /* the drawer's notes about a save: changed or deleted elsewhere, refused by the server (decision H5) */
  .drawer-body > [role="alert"] { padding: 10px 12px; border: 1px solid var(--warn); border-radius: 8px; background: var(--warn-soft); }
  .drawer-body > [role="alert"] p { margin-bottom: 8px; }
  .toast.act { display: flex; align-items: center; gap: 10px; }
  .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 40; background: var(--ink); color: var(--bg); padding: 9px 14px; border-radius: 6px; font-size: 13px; box-shadow: var(--shadow); max-width: 90vw; }
  .toast.err { background: var(--bad); color: #fff; }
  .newver { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 41; display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg); padding: 7px 8px 7px 14px; border-radius: 6px; font-size: 13px; box-shadow: var(--shadow); max-width: 90vw; }
  .newver[hidden] { display: none; }
  /* a button in these dark notes takes the page's colours, not the note's text colour (its label would vanish) */
  .toast .btn, .newver .btn { color: var(--ink); background: var(--surface); }
  .toast .btn:hover, .newver .btn:hover { background: var(--surface-2); }
  /* the bell in the top bar and its list (stage C's hints, the server build only; a sheet on a phone) */
  .bell-wrap { position: relative; }
  .btn.bell { position: relative; padding: 6px 9px; }
  .btn.bell svg { width: 18px; height: 18px; fill: currentColor; display: block; }
  .bell-count { position: absolute; top: -5px; right: -5px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--bad); color: #fff; font-size: 10px; line-height: 16px; font-family: var(--mono); font-weight: 600; text-align: center; }
  .bell-count:empty { display: none; }
  .bell-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
  .bell-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--line); min-width: 0; }
  .bell-item:first-child { border-top: 0; }
  .bell-item.unread { background: var(--accent-soft); }
  .bell-title { font-weight: 500; overflow-wrap: anywhere; }
  .bell-text { font-size: 13px; overflow-wrap: anywhere; }
  .bell-meta { font-size: 11px; color: var(--muted); }
  .bell-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
  .bell-sheet { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
  /* Contacts → Unassigned mail and the window of a load (CYA-292) */
  .md-note { margin: 0 0 10px; max-width: 110ch; }
  .md-act { white-space: nowrap; text-align: right; }
  .md-act .btn + .btn { margin-left: 6px; }
  .md-table td.name { overflow-wrap: anywhere; }
  .md-offers, .md-added, .md-hidden { margin-top: 14px; }
  .md-choices { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .md-choices legend { padding: 0; margin-bottom: 6px; }
  .md-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  /* as specific as the base input rule, which they follow, so that the day count and the date keep their width */
  .md-choices .md-choice input[type="number"] { width: 72px; }
  .md-choices .md-choice input[type="date"] { width: auto; }

  @media (max-width: 960px) {
    .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .rail { flex-direction: row; align-items: center; padding: 8px 12px; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
    .nav { flex-direction: row; } .nav .sep { display: none; } .nav a .count { display: none; }
    .rail-foot { margin-top: 0; margin-left: auto; flex-direction: row; }
    .mode span:not(.dot) { display: none; }
    .grid-2, .grid-3, .wk, .settings, .map-wrap { grid-template-columns: 1fr; }
    .funnel { grid-template-columns: repeat(2, 1fr); }
    .view { padding: 14px; }
    .item, .item.pick { grid-template-columns: 1fr; gap: 4px; } .item .hint-row { grid-column: 1; }
    .act-form, .prow { grid-template-columns: 1fr 1fr; }
    .report .caps { grid-template-columns: repeat(2, 1fr); }
  }
  /* ---------- phones ---------- */
  .m-brand, .tabbar, .topbar .short { display: none; }
  /* the More sheet scrolls where its lists do not fit (a small phone): a list never shrinks and hides its last rows */
  .sheet-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
  .sheet-list a, .sheet-list button { display: block; text-align: left; padding: 13px 14px; border: 0; border-top: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font: inherit; font-weight: 500; cursor: pointer; }
  .sheet-list > :first-child { border-top: 0; } .sheet-list a.active { background: var(--accent-soft); }
  @media (max-width: 720px) {
    body { -webkit-text-size-adjust: 100%; }
    .app { display: block; height: auto; min-height: 100dvh; }
    .rail { display: none; }
    main { min-height: 100dvh; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .topbar { position: sticky; top: 0; z-index: 12; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; padding: 8px 12px; align-items: center; }
    .m-brand { display: block; font-weight: 700; letter-spacing: .14em; font-size: 13px; color: var(--accent); }
    .topbar input[type="search"] { grid-column: 1 / -1; grid-row: 2; max-width: none; min-width: 0; font-size: 16px; }
    .topbar .me { font-size: 0; gap: 0; min-width: 0; } .topbar .me select { font-size: 14px; width: 100%; max-width: none; min-width: 0; }
    .topbar .btn { padding-left: 10px; padding-right: 10px; }
    .topbar .long { display: none; } .topbar .short { display: inline; }
    /* the bell next to the brand; its list opens as a sheet */
    .topbar.has-bell { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
    .topbar .bell-wrap { grid-column: 2; grid-row: 1; }
    .bell-list { display: none; }
    /* Unassigned mail's cards: the buttons below the counts, side by side */
    table.cards td.md-act { justify-content: flex-start; flex-wrap: wrap; gap: 6px; white-space: normal; }
    table.cards td.md-act .btn + .btn { margin-left: 0; }
    .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px rgba(8, 18, 24, .06); }
    .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; text-decoration: none; position: relative; border-radius: 8px; cursor: pointer; }
    .tabbar svg { width: 22px; height: 22px; fill: currentColor; }
    .tabbar .active { color: var(--accent); background: var(--accent-soft); }
    .tabbar .count { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--muted); color: #fff; font-size: 10px; line-height: 16px; font-family: var(--mono); font-weight: 600; }
    .tabbar .count:empty { display: none; } .tabbar .count.alert { background: var(--bad); }
    .view { padding: 12px 12px 20px; }
    .view-head h1 { font-size: 22px; }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
    .btn { min-height: 38px; } .btn.sm { min-height: 34px; }
    .filters { gap: 6px; } .filters select { flex: 1 1 45%; min-width: 0; }
    /* tables become cards: the first cell is the title, the others show their column name */
    table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
    table.cards thead { display: none; }
    table.cards tr { padding: 10px 12px; border-top: 1px solid var(--line); }
    table.cards tbody tr:first-child { border-top: 0; }
    table.cards td { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 3px 0; border: 0; text-align: right; white-space: normal; min-width: 0; }
    table.cards td::before { content: attr(data-label); flex: 0 0 38%; text-align: left; color: var(--muted); font-size: 12px; }
    table.cards td:first-child { font-weight: 500; text-align: left; font-size: 15px; } table.cards td:first-child::before, table.cards td[data-label=""]::before { display: none; }
    table.cards td:empty { display: none; }
    /* the forecast's cards: a quarter without records shows its label and running total only; the names reach the edge */
    table.cards td.fc-nil { display: none; }
    table.cards.fc-table td.wrap { max-width: none; }
    table.cards tbody.fc-total tr:first-child { border-top: 1px solid var(--line-strong); }
    /* the data quality pairs' cards: the partners and the reasons reach the edge, the reasons to the right */
    table.cards.q-table td.wrap { max-width: none; }
    table.cards .q-why, table.cards td.q-act { justify-content: flex-end; }
    .tablewrap { overflow-x: visible; }
    /* dialogs fill the screen; their buttons stay reachable */
    .modal { padding: 0; place-items: stretch; }
    .modal .box, .modal .box.wide { width: 100%; height: 100dvh; max-height: none; border-radius: 0; padding: 16px 16px 0; }
    .modal .box > .acts { position: sticky; bottom: 0; margin-top: auto; background: var(--surface); padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); flex-wrap: wrap; }
    .modal.sheet { place-items: end stretch; } .modal.sheet .box { height: auto; max-height: 85dvh; border-radius: 14px 14px 0 0; }
    .modal .box.cs > .acts { bottom: 0; margin-bottom: 0; padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); }
    .cs-row { padding: 10px; } .cs-row > .btn { align-self: flex-start; }
    /* the drawer fills the screen: over the tab bar, so that its foot (History, Delete) stays reachable */
    .drawer { width: 100vw; border-left: 0; z-index: 26; }
    .drawer-head, .drawer-body { padding-left: 14px; padding-right: 14px; }
    .drawer-tabs { flex-wrap: nowrap; padding-left: 6px; padding-right: 6px; }
    .fgrid, .fgrid.three { grid-template-columns: 1fr 1fr; }
    .sg-card.top { display: flex; } .sg-card.top img { max-height: 160px; }
    .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
    #sg-src-pane .sg-card { display: none; }
    .cw-shot { min-height: 34vh; }
  }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }