/* Cargo — Tradeling's design system, as specified in design.md.
   ------------------------------------------------------------------
   Loaded AFTER each page's own <style> block (and before nav.css), so the
   token values below win over the cream/navy/gold defaults the templates were
   originally written against. Pages keep using the same token names —
   --navy-*, --paper, --line, --ink, --gold — only the values change here, so
   this one file rethemes all of them.

   design.md is the source of truth. If a value here disagrees with it,
   design.md wins.                                                          */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- Cargo primitives ------------------------------------------------ */
  --cg-gray-0:#FFFFFF;
  --cg-gray-50:#F8FAFC;
  --cg-gray-100:#E3E5E7;
  --cg-gray-200:#CECFD1;
  --cg-gray-300:#B9BBBD;
  --cg-gray-400:#A5A7A8;
  --cg-gray-500:#919394;
  --cg-gray-600:#737576;
  --cg-gray-700:#565759;
  --cg-gray-800:#26292F;
  --cg-gray-900:#15171B;
  --cg-gray-950:#0A0B0C;

  --cg-orange-50:#FAF2F0;
  --cg-orange-100:#FAE3DC;
  --cg-orange-200:#FAD0C3;
  --cg-orange-300:#FAAE96;
  --cg-orange-400:#FC7347;
  --cg-orange-500:#F95000;
  --cg-orange-600:#D24200;
  --cg-orange-700:#AC3501;

  --cg-blue-50:#EDF6FA;
  --cg-blue-100:#DCF0FA;
  --cg-blue-300:#91DBFA;
  --cg-blue-500:#06B5EB;
  --cg-blue-600:#0192BD;
  --cg-blue-700:#026C8C;
  --cg-blue-800:#00394D;
  --cg-blue-900:#002A3A;
  --cg-blue-950:#001C28;

  --cg-green-100:#DCFBDA;
  --cg-green-300:#94F794;
  --cg-green-500:#37B237;
  --cg-green-600:#118F11;
  --cg-green-700:#0C6E0C;   /* text on the light green surfaces: 6:1 where green-600 was 3.8:1 */

  --cg-yellow-100:#FAEBD7;
  --cg-yellow-300:#FAD196;
  --cg-yellow-500:#EBA322;
  --cg-yellow-600:#CC8E1C;
  --cg-yellow-700:#8A6100;   /* amber text on white: 5.6:1 where yellow-600 was 2.9:1; the value the pages had converged on by hand */

  --cg-red-100:#FAE0DC;
  --cg-red-300:#FCA497;
  --cg-red-500:#EB1A07;
  --cg-red-600:#C21809;

  /* ---- Cargo semantics ------------------------------------------------- */
  --bg-action:var(--cg-orange-500);      /* one most-important action per screen */
  --bg-brand:var(--cg-blue-800);         /* selected / on / brand surfaces */
  --bg-primary:var(--cg-gray-0);
  --bg-secondary:var(--cg-gray-50);
  --bg-tertiary:var(--cg-gray-100);
  --bg-info-light:var(--cg-blue-100);
  --bg-success-light:var(--cg-green-100);
  --bg-warning-light:var(--cg-yellow-100);
  --bg-danger-light:var(--cg-red-100);
  --bg-state-hover:rgba(0,0,0,.08);

  --border-primary:var(--cg-gray-200);
  --border-secondary:var(--cg-gray-300);
  --border-select:var(--cg-blue-800);
  --border-info:var(--cg-blue-300);
  --border-success:var(--cg-green-300);
  --border-warning:var(--cg-yellow-300);
  --border-danger:var(--cg-red-300);

  --text-primary:var(--cg-gray-950);
  --text-secondary:var(--cg-gray-800);
  --text-tertiary:var(--cg-gray-700);
  --text-disabled:var(--cg-gray-400);
  --text-success:var(--cg-green-700);
  --text-warning:var(--cg-yellow-700);
  --text-danger:var(--cg-red-600);
  --text-action:var(--cg-blue-700);      /* links: blue-600 on white was 3.6:1, short of AA; blue-700 is 5.8:1 */
  --text-on-action:var(--cg-gray-950);   /* text on the orange action surface: white was 3.4:1 */
  --text-invert:var(--cg-gray-0);
  --focus-ring:0 0 0 3px rgba(1,146,189,.35);

  /* Cargo radii */
  --rounded-xs:4px;
  --rounded-sm:8px;
  --rounded-md:12px;
  --rounded-lg:16px;
  --rounded-pill:9999px;

  /* ---- Legacy token names, remapped onto Cargo -------------------------
     "navy" is now Cargo blue (deep teal) and "gold" is now the orange action
     colour. The names stay so no page has to be rewritten.               */
  --navy-950:var(--cg-blue-900);
  --navy-900:var(--cg-blue-800);
  --navy-800:var(--cg-blue-700);
  --navy-700:var(--cg-blue-600);

  --paper:var(--cg-gray-50);
  --paper-dim:var(--cg-gray-100);
  --line:var(--cg-gray-200);
  --grid:var(--cg-gray-100);
  --ink:var(--cg-gray-950);
  --ink-soft:var(--cg-gray-700);
  --ink-muted:var(--cg-gray-600);

  --gold:var(--cg-orange-500);
  --gold-soft:var(--cg-orange-200);   /* kickers/eyebrows on the brand masthead */

  --green:var(--cg-green-700);
  --green-bg:var(--cg-green-100);
  --amber:var(--cg-yellow-700);
  --amber-bg:var(--cg-yellow-100);
  --red:var(--cg-red-600);
  --red-bg:var(--cg-red-100);
  --pos:var(--cg-green-600);
  --neg:var(--cg-red-600);

  --font-display:'Inter','Segoe UI',system-ui,sans-serif;
  --font-ui:'Inter','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* Pages painted a cream gradient behind the content; Cargo's canvas is a flat
   near-white. Declared here so those gradients are replaced, not layered. */
body{
  background:var(--bg-secondary);
  -webkit-font-smoothing:antialiased;
  font-family:var(--font-ui);   /* the platform's face on every page: a page that names no font inherits it, so nothing falls to the browser's serif */
  color:var(--ink);
}
button,input,select,textarea{font:inherit}
code,kbd,samp,pre{font-family:var(--font-mono)}   /* code in the platform's mono, not the browser's Courier */   /* form controls inherit the page's face, not the browser's */
a{color:var(--tl-primary,#2F5D8A)}            /* content links in the platform's blue; a page that wants `inherit` says so, the chrome sets its own */

/* ---- the button family, once (design.md; plan 4.0 D4) --------------------------
   `.btn` is the platform's button — mono, uppercase, the navy fill — with `.ghost`, `.danger` and `.small`;
   `.btn-primary` the one orange action of a form. The areas drew these in their own style partials; the
   theme carries them so a page needs no partial to draw a button that matches. */
.btn{border:0;border-radius:6px;padding:8px 12px;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:#fff;background:var(--navy-900,#00394D);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:#002A3A}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#F8FAFC}
.btn.small{padding:6px 9px;font-size:10px}
.btn-primary{font:inherit;font-size:13px;padding:7px 14px;border-radius:8px;border:0;background:var(--bg-action,#F95000);color:var(--text-on-action,#0A0B0C);cursor:pointer}

/* Fraunces carried its own optical sizing at display sizes. Inter needs the
   tracking pulled in by hand or large headings read loose. */
h1,h2,
.title,
.panel-title,
.report-name,
.kpi-value{letter-spacing:-.012em}

/* Shared shell chrome. Each page declares these classes itself with
   token-driven colours (the masthead's accent rule is already var(--gold),
   which is the action orange now); only details hardcoded to the old palette
   are restated here. */
/* The masthead logo is the reversed (knockout) mark, so no white plate
   behind it — see tl-logo-reverse.svg. */
.logo-chip{background:transparent}

/* Page-action buttons live on the brand-teal page header: light neutral,
   orange on hover. Orange stays reserved for one action, so these are ghost
   until pointed at. */
.nav-link{
  color:var(--cg-gray-800);
  border-color:var(--cg-gray-200);
}
.nav-link:hover{
  color:var(--cg-orange-700);
  border-color:var(--cg-orange-500);
  background:var(--cg-orange-50);
}

/* Cargo's "don't mix rounded and sharp corners in the same view" — the shared
   surfaces were drawn at 3px, which reads as neither. Snap them to rounded.sm
   and the small pills to rounded.xs. */
.report-card,
.panel,
.kpi-card{border-radius:var(--rounded-sm)}
.badge,
.chip{border-radius:var(--rounded-xs)}

/* ---------------------------------------------------------------------------
   Shared masthead — templates/_masthead.html

   One header for every page: logo left, kicker + title centred, session
   actions right. It is sticky, so it is fixed chrome and only the data below
   it scrolls and refreshes. Declared here rather than per page so all pages
   stay identical; these rules land after each page's own `.masthead` block
   and win on equal specificity.
--------------------------------------------------------------------------- */
.masthead{
  position:sticky;
  top:0;
  z-index:800;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:14px 24px;
  background:var(--cg-gray-0);
  color:var(--text-primary,#0A0B0C);
  border-bottom:1px solid var(--cg-gray-100);
}

.masthead .logo-chip{
  justify-self:start;
  align-self:center;
  display:flex;
  align-items:center;
  line-height:0;
  margin:0;
  padding:0;
  background:transparent;
  border-radius:0;
}
.masthead .logo-chip a{display:flex;line-height:0}

.masthead .title-block{
  grid-column:2;
  text-align:center;
  min-width:0;
}
.masthead .kicker,
.masthead .brand-eyebrow,
.masthead .eyebrow{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cg-gray-600);
  margin:0 0 3px;
  opacity:1;
}
.masthead .title,
.masthead .brand-title,
.masthead h1{
  margin:0;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  line-height:1.2;
  color:var(--cg-blue-900);
}

.masthead .session-row{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Data-source notes and caveats used to sit under the title inside the header;
   they belong to the page body now so the bar stays one line tall. */
.page-notes{
  padding:12px 24px 0;
  color:var(--ink-soft);
  font-size:11.5px;
  line-height:1.55;
}
.page-notes .source-note{margin:0}
.page-notes .notes-list{margin-top:6px;font-size:11px;line-height:1.6}

@media (max-width:820px){
  .masthead{
    grid-template-columns:auto 1fr;
    row-gap:10px;
    padding:12px 14px;
  }
  .masthead .title-block{grid-column:1 / -1;order:3;text-align:left}
  .masthead .title,
  .masthead h1{font-size:19px}
  .masthead .session-row{grid-column:2}
  .page-notes{padding:12px 14px 0}
}

/* Page-level controls that used to live inside the header — date pickers,
   filter rows, chart legends. They sit directly under the masthead on a light
   bar so the header itself stays one line tall. */
.page-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 16px;
  padding:10px 24px;
  background:var(--bg-primary);
  border-bottom:1px solid var(--line);
}
.page-toolbar .filter-row,
.page-toolbar .legend-row,
.page-toolbar .asof{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
}
.page-toolbar .filter-row{flex:1 1 auto}
.page-toolbar .filter-group.right{margin-left:auto}
.page-toolbar .source-note,
.page-toolbar .range-note{
  color:var(--ink-soft);
  font-size:11.5px;
  margin:0;
}
/* On the light bar these controls need body ink, not the masthead's knockout. */
.page-toolbar .nav-link,
.page-toolbar .back-link{
  color:var(--text-action);
  border-color:var(--border-primary);
}
.page-toolbar .nav-link:hover,
.page-toolbar .back-link:hover{
  color:var(--text-invert);
  background:var(--gold);
  border-color:var(--gold);
}
.page-toolbar .asof{color:var(--ink-soft);font-size:11px;gap:8px}

@media (max-width:820px){
  .page-toolbar{padding:10px 14px}
}

/* These controls were written for the dark masthead — light ink, translucent
   white borders, brand-teal fills. On the light toolbar they need body ink and
   real borders, so restate the colours (not the geometry) here. */
.page-toolbar .filter-label,
.page-toolbar .range-note,
.page-toolbar .legend-item,
.page-toolbar .asof{color:var(--ink-soft)}
.page-toolbar .asof b{color:var(--ink)}

.page-toolbar .preset-btn,
.page-toolbar .toggle-btn,
.page-toolbar .date-nav-btn,
.page-toolbar .date-select{
  color:var(--ink-soft);
  background:var(--bg-primary);
  border:1px solid var(--border-primary);
}
.page-toolbar .preset-btn:hover,
.page-toolbar .toggle-btn:hover,
.page-toolbar .date-nav-btn:hover,
.page-toolbar .date-select:hover{
  color:var(--ink);
  border-color:var(--border-secondary);
}
/* The selected filter is the one piece of state worth the brand fill. */
.page-toolbar .toggle-btn.active,
.page-toolbar .preset-btn.active{
  background:var(--bg-brand);
  color:var(--text-invert);
  border-color:var(--bg-brand);
}
.page-toolbar .date-input{
  background:var(--bg-primary);
  color:var(--ink);
  border:1px solid var(--border-primary);
}
/* Apply is the primary action on the bar — the one place orange belongs. */
.page-toolbar .apply-btn{
  background:var(--bg-action);
  color:var(--text-invert);
  border:1px solid var(--bg-action);
}

/* Selectable filter chips (DSO) moved to the light bar with the same treatment
   as the buttons above: neutral by default, brand fill when selected. */
.page-toolbar .chip{
  color:var(--ink-soft);
  background:var(--bg-primary);
  border:1px solid var(--border-primary);
}
.page-toolbar .chip:hover{color:var(--ink);border-color:var(--border-secondary)}
.page-toolbar .chip.active{
  background:var(--bg-brand);
  border-color:var(--bg-brand);
  color:var(--text-invert);
}
.page-toolbar .filter-label{opacity:1}
.page-toolbar .filter-sep{background:var(--border-primary)}

/* Page-action buttons in the page header (Refresh, Download, CSV). One box
   for all of them so the row is consistent on pages that never declared
   one. */
/* The shape is shared by every page-action button, in the header or in a
   page's own toolbar (Reset, Dashboard links); the colour rules above and
   nav.css set the palette. */
.nav-link{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  padding:5px 9px;
  border-radius:var(--rounded-xs);
  border:1px solid var(--cg-gray-200);
  background:none;
  cursor:pointer;
  line-height:1.5;
  white-space:nowrap;
}
.page-toolbar .as-of{color:var(--ink-soft);opacity:1}

/* ---------------------------------------------------------------------------
   Loading state — templates/_loader.html

   A four-dot mark in the brand palette that orbits while each dot breathes,
   the page's message, and a gradient bar sliding underneath. The pages'
   own `.loading` containers get a consistent box here; they still toggle it.
--------------------------------------------------------------------------- */
/* ---- header furniture every page used to restyle locally -----------------
   The as-of stamp and data-source notes were drawn for the old dark header in
   each template; these are the shared versions, so a page template carries
   none of them. */
.as-of{font-family:var(--font-mono);font-size:11px}
.masthead .as-of{text-align:right}
.source-note{font-size:11.5px;line-height:1.5;color:var(--ink-soft)}

/* ---- sibling-view tab strip (templates/_tabs.html) -------------------------
   Header and tabs are pinned together by sticking their shared wrapper, not
   each bar on its own: two bars both pinned to top:0 would land on the same
   line and the tabs would scroll away behind the title. The masthead keeps
   its own position:sticky — inside a wrapper exactly its content's height,
   that resolves to no movement. nav.css recolours the strip for the white
   header and sets the wrapper's offset under the app bar. */
.header-stack{position:sticky;top:0;z-index:800}
/* One rule at the bottom of the whole header: title band and tabs read as a
   single block rather than two stacked bars. */
.header-stack .masthead{border-bottom:none}
.view-tabs{
  display:flex;flex-wrap:wrap;gap:2px;
  padding:0 24px;
  background:var(--navy-950);
  border-bottom:3px solid var(--gold);
  box-shadow:0 6px 14px rgba(10,26,46,.10);
}
.view-tab{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px 10px;
  font-family:var(--font-ui);font-size:14px;font-weight:500;line-height:1.3;
  color:#FFFFFF;text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;
}
.view-tab:hover{background:rgba(255,255,255,.09)}
.view-tab.current{font-weight:600;background:rgba(255,255,255,.12);border-bottom-color:var(--gold-soft)}
/* A view whose source is not built yet stays clickable — the page it opens
   explains itself — but reads as secondary. */
.view-tab.pending{opacity:.7}
.tab-chip{
  font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.08em;
  color:var(--gold-soft);border:1px solid rgba(250,208,195,.55);border-radius:2px;padding:1px 4px;
}

.loading{
  padding:56px 20px;
  text-align:center;
  font-family:var(--font-ui);
  font-size:13.5px;
  color:var(--cg-gray-700);
}
.tl-loader{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  min-width:220px;
}
.tl-loader-mark{
  position:relative;
  width:52px;height:52px;
  animation:tl-loader-orbit 2.6s cubic-bezier(.65,.05,.36,1) infinite;
}
.tl-loader-mark span{
  position:absolute;
  width:20px;height:20px;
  border-radius:50%;
  animation:tl-loader-breathe 1.3s ease-in-out infinite;
}
.tl-loader-mark span:nth-child(1){top:0;left:0;background:var(--cg-orange-500)}
.tl-loader-mark span:nth-child(2){top:0;right:0;background:var(--cg-orange-300);animation-delay:.16s}
.tl-loader-mark span:nth-child(3){bottom:0;left:0;background:var(--cg-blue-500);animation-delay:.32s}
.tl-loader-mark span:nth-child(4){bottom:0;right:0;background:var(--cg-blue-800);animation-delay:.48s}
.tl-loader-text{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--cg-blue-900);
  letter-spacing:-.005em;
}
.tl-loader-sub{
  margin-top:-8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--cg-gray-600);
}
.tl-loader-sub code{font-family:inherit;background:var(--cg-blue-50);border-radius:3px;padding:1px 5px}
.tl-loader-bar{
  width:168px;height:4px;
  border-radius:2px;
  background:var(--cg-gray-100);
  overflow:hidden;
}
.tl-loader-bar::after{
  content:"";
  display:block;
  width:42%;height:100%;
  border-radius:2px;
  background:linear-gradient(90deg,var(--cg-orange-500),var(--cg-orange-300),var(--cg-blue-500));
  animation:tl-loader-slide 1.4s ease-in-out infinite;
}
@keyframes tl-loader-orbit{to{transform:rotate(360deg)}}
@keyframes tl-loader-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.7}}
@keyframes tl-loader-slide{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){
  .tl-loader-mark,.tl-loader-mark span{animation:none}
  .tl-loader-bar::after{animation-duration:2.8s}
}

/* ---- accessibility baseline (plan G6.6) ---- */
.skip-link{position:absolute;left:8px;top:-48px;z-index:2000;padding:8px 12px;background:var(--navy-900);color:var(--text-invert);border-radius:var(--rounded-xs);font:600 13px var(--font-ui);text-decoration:none}
.skip-link:focus{top:8px;outline:2px solid var(--gold);outline-offset:2px}
:focus-visible{outline:2px solid var(--text-action);outline-offset:2px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{box-shadow:var(--focus-ring)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}

/* ---- the dark palette (plan G6.4): the semantic tokens over the same primitives, applied on
   <html data-theme="dark">. A developer preview today — ?theme=dark on any page keeps it in
   localStorage, ?theme=system clears it — until the page styles' hex literals move onto the
   tokens; the chrome, Home and Explore already read them. ---- */
:root[data-theme="dark"]{
  --bg-primary:var(--cg-gray-900);--bg-secondary:var(--cg-gray-950);--bg-tertiary:var(--cg-gray-800);
  --bg-brand:var(--cg-blue-700);--bg-state-hover:rgba(255,255,255,.08);
  --border-primary:var(--cg-gray-800);--border-secondary:var(--cg-gray-700);--border-select:var(--cg-blue-500);
  --text-primary:var(--cg-gray-50);--text-secondary:var(--cg-gray-100);--text-tertiary:var(--cg-gray-300);--text-disabled:var(--cg-gray-600);
  --text-action:var(--cg-blue-500);--text-invert:var(--cg-gray-950);
  --navy-950:var(--cg-gray-950);--navy-900:var(--cg-blue-900);--navy-800:var(--cg-blue-800);--navy-700:var(--cg-blue-600);
  --paper:var(--cg-gray-950);--paper-dim:var(--cg-gray-900);--line:var(--cg-gray-800);--grid:var(--cg-gray-800);
  --ink:var(--cg-gray-50);--ink-soft:var(--cg-gray-300);--ink-muted:var(--cg-gray-400);
  --green-bg:rgba(17,143,17,.18);--amber-bg:rgba(204,142,28,.18);--red-bg:rgba(194,24,9,.18);
  color-scheme:dark;
}

/* ---- dialogs (templates/_dialog.html) ------------------------------------------
   A create form behind a "+ Add …" button on the listing it adds to. Native <dialog>, so
   Escape, focus containment and the backdrop come from the browser; nav.js opens and closes. */
.tl-add{white-space:nowrap}
.card-head .tl-add{margin-left:auto;flex:none}
.tl-dialog{border:0;border-radius:12px;padding:0;width:min(760px,94vw);max-height:min(90vh,100% - 32px);background:#fff;color:var(--ink,#0A0B0C);
  box-shadow:0 30px 80px rgba(10,26,46,.35),0 0 0 1px rgba(10,26,46,.08);overflow:hidden;display:none;flex-direction:column}
.tl-dialog[open]{display:flex}
.tl-dialog.wide{width:min(1040px,96vw)}
.tl-dialog::backdrop{background:rgba(10,26,46,.48);backdrop-filter:blur(2px)}
.tl-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px 12px;border-bottom:1px solid var(--line,#DCE3EA);flex:none}
.tl-dialog-title{margin:0;font-family:var(--font-display,inherit);font-size:19px;font-weight:600;color:var(--navy-950,#002A3A)}
.tl-dialog-note{margin-top:3px;font-family:var(--font-mono,monospace);font-size:11px;color:var(--ink-soft,#5B6470)}
.tl-dialog-close{flex:none;width:32px;height:32px;border:1px solid var(--line,#DCE3EA);border-radius:8px;background:#fff;color:var(--ink-soft,#5B6470);font-size:20px;line-height:1;cursor:pointer}
.tl-dialog-close:hover{color:var(--ink,#0A0B0C);border-color:#B9C6D4;background:#F8FAFC}
.tl-dialog-body{padding:14px 20px 18px;overflow:auto}
.tl-dialog-body form.edit{padding:0}
.tl-dialog-error{border:1px solid #FCA497;background:var(--red-bg,#FAE0DC);color:var(--red,#C21809);border-radius:6px;padding:9px 12px;font-size:13px;margin-bottom:12px}
@media (max-width:720px){.tl-dialog{width:100vw;max-width:100vw;max-height:100vh;border-radius:0}}

/* ---------------------------------------------------------------------------
   Phones (plan 4.0 C2.1, 5.0 H5; decision 0037). Every page under 640 px: the header and the tab strip
   tighten and scroll sideways rather than stack; the two- and three-column grids the pages share
   (`.g2`, `.two-col`, …) fall to one column and the small figure grids to two; a wide table scrolls
   inside its card; a chart never exceeds its card; inputs are 16 px on a touch screen so iOS does not
   zoom into them. Declared here, after every page's own `style` block, so a page needs nothing of its
   own unless its layout is its own.
--------------------------------------------------------------------------- */
@media (max-width:640px){
  html{-webkit-text-size-adjust:100%}
  html,body{overflow-x:clip}
  main.wrap,.wrap{padding:14px 12px 32px}
  /* the header scrolls away with the page: a phone has no room for a sticky title and action row */
  .masthead,.header-stack{position:static}
  .masthead{padding:10px 12px;gap:8px}
  .masthead .title,.masthead h1{font-size:18px}
  .masthead .kicker{font-size:10px}
  .masthead .session-row{flex-wrap:nowrap;max-width:100%;overflow-x:auto;gap:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .masthead .session-row::-webkit-scrollbar{display:none}
  .masthead .session-row > *{flex:none;white-space:nowrap}
  .view-tabs{flex-wrap:nowrap;overflow-x:auto;padding:0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .view-tabs::-webkit-scrollbar{display:none}
  .view-tab{padding:10px 12px 9px;font-size:13px;flex:none}
  .page-toolbar{padding:8px 12px;gap:8px 12px}
  .page-toolbar select,.page-toolbar input[type=text],.page-toolbar input[type=search]{max-width:100%}
  .page-notes{padding:10px 12px 0}
  /* the shared column grids: one column; the figure grids: two */
  .g2,.g3,.g21,.two,.two-col,.grid2,.act-grid,.act-seg,.charts,.inbox,.struct,.head,.cards,.fields,.picker-body,.sub-grid,.def,.sr,.rank-row,.docs,.cp{grid-template-columns:minmax(0,1fr)}
  .kpi-grid,.funnel,.figs,.steps,.stats,.facts,.strip,.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .c-card,.card{padding:12px}
  .c-card + .c-card{margin-top:10px}
  /* a wide table scrolls inside its card; a chart keeps to its card */
  main table,.wrap table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  main table.ch{display:table;width:100%}
  canvas,.viz svg,.chart svg{max-width:100%}
  .tl-dialog{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}
  .btn-primary,.btn-ghost,.view-tab,.suggestion,.inbox-act,.th-add{min-height:36px}
}