/* Cargo — Tradeling's design system, as specified in design.md.
   ------------------------------------------------------------------
   Loaded AFTER each page's own <style> block (and before sidebar.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-yellow-100:#FAEBD7;
  --cg-yellow-300:#FAD196;
  --cg-yellow-500:#EBA322;
  --cg-yellow-600:#CC8E1C;

  --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-600);
  --text-warning:var(--cg-yellow-600);
  --text-danger:var(--cg-red-600);
  --text-action:var(--cg-blue-600);
  --text-invert:var(--cg-gray-0);

  /* 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-600);
  --green-bg:var(--cg-green-100);
  --amber:var(--cg-yellow-600);
  --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;
}

/* 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}

/* Header links live on the brand-teal masthead: light neutral, orange on
   hover. Orange stays reserved for one action, so these are ghost until
   pointed at. */
.logout-link,
.admin-link,
.back-link,
.nav-link{
  color:#DDE7EB;
  border-color:rgba(221,231,235,.35);
}
.logout-link:hover,
.admin-link:hover,
.back-link:hover,
.nav-link:hover{
  color:var(--text-invert);
  border-color:var(--cg-orange-500);
  background:rgba(249,80,0,.16);
}

.session-user{color:#AFC3CB}

/* 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:linear-gradient(180deg,var(--cg-blue-800),var(--cg-blue-900));
  color:var(--text-invert);
  border-bottom:3px solid var(--gold);
}

.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(--gold-soft);
  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(--text-invert);
}

.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)}

/* Masthead action links. Some pages style .nav-link, some only .back-link or
   .logout-link — give them all the same box here so the row is consistent
   wherever it is used, including on pages that never declared one. */
.masthead .nav-link,
.masthead .back-link,
.masthead .logout-link,
.masthead .admin-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 rgba(221,231,235,.35);
  background:none;
  cursor:pointer;
  line-height:1.5;
  white-space:nowrap;
}
.masthead .session-user{
  font-family:var(--font-mono);
  font-size:11.5px;
  white-space:nowrap;
}
.page-toolbar .as-of{color:var(--ink-soft);opacity:1}