/* ============================================================
   RIVETDATA CONSOLE — foundation layer
   ------------------------------------------------------------
   Loaded AFTER css/styles.css (the marketing design system) and
   BEFORE the console component layer. Everything here is scoped
   to the console document; the marketing pages never load it.

   The aesthetic target: a light grey canvas with white floating
   card surfaces, generous radii, hairline borders, near-zero
   shadow, and colour used ONLY to carry meaning — one emerald
   accent for primary action + active state, and a semantic
   status set for verdicts. Minimalist, but the right amount of
   colour.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* ---- Type scale ----------------------------------------
     Eight steps, no half-pixels. The console previously ran 17
     distinct sizes in 0.5px increments, which is the single
     loudest "not quite finished" signal in a dense UI. Every
     component below picks a step; nothing sets a raw px size. */
  --fs-2xs: 11px;   /* mono caps, micro labels, table headers */
  --fs-xs:  12px;   /* meta, captions, hints */
  --fs-sm:  13px;   /* secondary body, table cells, chips */
  --fs-md:  14px;   /* body copy, inputs, buttons */
  --fs-lg:  16px;   /* card + panel titles */
  --fs-xl:  20px;   /* section headings */
  --fs-2xl: 26px;   /* page title */
  --fs-3xl: 34px;   /* KPI figures, the one big number */

  /* line-heights pinned to the role, not the size */
  --lh-tight: 1.25;   /* headings, figures */
  --lh-snug:  1.45;   /* labels, table cells */
  --lh-body:  1.6;    /* prose, findings, chat */

  /* ---- Radii ----------------------------------------------
     The references use generous, consistent rounding. Four
     steps replace the ad-hoc 5/8/9/10/12/14/20/40/999 sprawl. */
  --rx-xs:   7px;    /* inline chips, tiny controls */
  --rx-sm:  10px;    /* inputs, buttons, menu items */
  --rx:     14px;    /* cards, panels, table shells */
  --rx-lg:  18px;    /* the big floating surfaces */
  --rx-pill: 999px;  /* status pills, filter chips */

  /* ---- Spacing rhythm (4px base) ------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;

  /* ---- Layout dimensions --------------------------------- */
  --shell-max:   1680px;   /* content cap — fluid below, never wider */
  --shell-pad:   clamp(20px, 2.4vw, 36px);
  --sidebar-w:      252px;   /* fits a ~2-3 word wordmark beside the collapse control */
  --sidebar-w-min:  64px;     /* collapsed: icons only */
  --topbar-h:    60px;
}

/* ---- Surfaces -------------------------------------------
   The key move away from the old white-on-white: the canvas is
   a real grey, cards are pure white, so panels visibly float.
   Both themes define the same three names. */
:root[data-theme="light"] {
  --canvas:      #F7F8FA;   /* the app background — a soft cool grey */
  --surface:     #FFFFFF;   /* cards, panels, sidebar, topbar */
  /* NOT the same as --canvas, and it was: both were #F7F8FA, so every "inset"
     surface placed directly on the page background was invisible — the tint WAS
     the page and the hairline around it read as an outline drawn on nothing. It
     only ever worked inside a white card. Nudged one step darker so it is a
     surface everywhere, not just where something white happens to sit behind it.
     Dark mode never had the bug: #08090A against #121417. */
  --surface-sub: #F1F3F7;   /* nested/inset areas, table headers */

  /* Borders carry the structure, so they are deliberately faint — at these
     values a card reads as a soft edge rather than a drawn box. */
  --hairline:      rgba(17, 24, 39, 0.07);
  --hairline-soft: rgba(17, 24, 39, 0.045);
  --hairline-hard: rgba(17, 24, 39, 0.12);

  /* Near-flat. Cards separate from the canvas by fill + hairline, not shadow. */
  --elev-1: none;
  --elev-2: 0 2px 6px rgba(17, 24, 39, 0.05);
  --elev-3: 0 16px 40px rgba(17, 24, 39, 0.12), 0 2px 8px rgba(17, 24, 39, 0.05);

  /* ---- Primary action ------------------------------------
     Brand emerald, but a step darker than --acc so the label can
     be WHITE. The marketing default (--acc #0E9E67 + a near-black
     #04140C label) is a dark-hero treatment: on this light canvas
     it reads muddy, and white on it is only 3.4:1. #0B8256 carries
     white at 4.84:1 — AA for normal text — and still reads as the
     same green. --acc stays as-is for state (ticks, status, active
     nav, focus rings); this token is only ever a button fill. */
  --pri-bg:       #0B8256;
  --pri-bg-hover: #096B47;
  --pri-fg:       #FFFFFF;
  /* Disabled goes NEUTRAL, and is a real fill rather than 50%
     opacity — a half-transparent green is the pale-mint slab that
     made the disabled run button look broken. */
  --pri-off-bg:   #ECEEF2;
  --pri-off-fg:   #98A0AB;
  --pri-off-line: rgba(17, 24, 39, 0.08);
}
:root {
  --canvas:      #08090A;
  --surface:     #0E1013;
  --surface-sub: #121417;

  --hairline:      rgba(255, 255, 255, 0.08);
  --hairline-soft: rgba(255, 255, 255, 0.05);
  --hairline-hard: rgba(255, 255, 255, 0.14);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --elev-3: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);

  /* Primary action, dark theme. A touch brighter than the light-theme
     green so it lifts off the near-black canvas, still 4.64:1 with a
     white label. Hover darkens in both themes — lightening this green
     any further drops white under 4.5:1. */
  --pri-bg:       #10855A;
  --pri-bg-hover: #0E6F4A;
  --pri-fg:       #FFFFFF;
  --pri-off-bg:   rgba(255, 255, 255, 0.07);
  --pri-off-fg:   rgba(255, 255, 255, 0.32);
  --pri-off-line: rgba(255, 255, 255, 0.10);
}

/* ---- Semantic status set --------------------------------
   Previously every verdict colour was a hardcoded rgba() literal
   repeated across dozens of rules (rgba(229,181,103,.28) et al),
   with `var(--red, #e5675f)` fallbacks papering over a token that
   was never defined. Each status now has fg / bg / line, so a
   pill, a chip and a badge in the same state always agree. */
:root[data-theme="light"] {
  --ok-fg:   #0E7C52;  --ok-bg:   rgba(14, 158, 103, 0.10);  --ok-line:   rgba(14, 158, 103, 0.26);
  --warn-fg: #9A6212;  --warn-bg: rgba(199, 132, 32, 0.11);  --warn-line: rgba(199, 132, 32, 0.26);
  --bad-fg:  #B4342B;  --bad-bg:  rgba(200, 62, 50, 0.09);   --bad-line:  rgba(200, 62, 50, 0.24);
  --info-fg: #1F5FBF;  --info-bg: rgba(43, 110, 224, 0.09);  --info-line: rgba(43, 110, 224, 0.24);
  --mute-fg: #5C6675;  --mute-bg: rgba(16, 20, 28, 0.05);    --mute-line: rgba(16, 20, 28, 0.11);
}
:root {
  --ok-fg:   #3FCF8E;  --ok-bg:   rgba(63, 207, 142, 0.13);  --ok-line:   rgba(63, 207, 142, 0.30);
  --warn-fg: #E5B567;  --warn-bg: rgba(229, 181, 103, 0.12); --warn-line: rgba(229, 181, 103, 0.28);
  --bad-fg:  #E5675F;  --bad-bg:  rgba(229, 103, 95, 0.12);  --bad-line:  rgba(229, 103, 95, 0.30);
  --info-fg: #6AA9F4;  --info-bg: rgba(106, 169, 244, 0.12); --info-line: rgba(106, 169, 244, 0.28);
  --mute-fg: #8B93A0;  --mute-bg: rgba(255, 255, 255, 0.05); --mute-line: rgba(255, 255, 255, 0.11);
}

/* `--red` was referenced with an inline fallback in ~8 places and
   never actually declared. Define it so those resolve to the token. */
:root, :root[data-theme="light"] { --red: var(--bad-fg); }

/* ---- Per-agent accent -----------------------------------
   Each agent domain carries a hue used for its icon tile and
   active nav state. Set as an RGB triplet so alpha variants can
   be composed. Energy = emerald (the house accent), Construction
   = blue. Components read rgb(var(--dacc)) / rgba(var(--dacc),a). */
:root                { --dacc: 63, 207, 142; }
:root[data-theme="light"] { --dacc: 14, 158, 103; }
.d-construction              { --dacc: 91, 157, 255; }
:root[data-theme="light"] .d-construction { --dacc: 43, 110, 224; }

/* ---- Console text tiers ---------------------------------
   The marketing palette tuned --t2/--t3/--t4 for large display
   copy; at console density they read as unreadable light grey.
   Lifted so the faintest tier clears ~7:1 on its background. */
:root                { --t2: #C3C8D0; --t3: #AEB4BE; --t4: #939AA5; }
:root[data-theme="light"] { --t2: #2E3742; --t3: #465061; --t4: #5C6675; }

/* ------------------------------------------------------------
   2. SHELL
   ------------------------------------------------------------ */
/* The `hidden` attribute must beat the display:grid on .gate/.app,
   or toggling it does nothing and the sign-in screen never hides. */
[hidden] { display: none !important; }

body { overflow: hidden; background: var(--canvas); }
body::before { display: none; }   /* the marketing top-light doesn't belong in an app */

/* rail | (topbar / main) */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: "sidebar topbar" "sidebar main";
  height: 100vh;
  background: var(--canvas);
  transition: grid-template-columns .2s var(--ease-out);
}
.app.sidebar-collapsed { grid-template-columns: var(--sidebar-w-min) minmax(0, 1fr); }

/* refined scrollbars — an enterprise-app detail */
.sidebar, .main, .modal__body, .cpanel__b, .cchat__log, .tb-search__panel {
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-hard) transparent;
}
.sidebar::-webkit-scrollbar, .main::-webkit-scrollbar, .modal__body::-webkit-scrollbar,
.cpanel__b::-webkit-scrollbar, .cchat__log::-webkit-scrollbar,
.tb-search__panel::-webkit-scrollbar { width: 9px; height: 9px; }
.sidebar::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb, .modal__body::-webkit-scrollbar-thumb,
.cpanel__b::-webkit-scrollbar-thumb, .cchat__log::-webkit-scrollbar-thumb,
.tb-search__panel::-webkit-scrollbar-thumb {
  background: var(--hairline-hard); border-radius: var(--rx-pill);
  border: 3px solid transparent; background-clip: content-box;
}

/* ------------------------------------------------------------
   3. LEFT SIDEBAR — persistent agent navigation
   ------------------------------------------------------------
   Light surface (matching the references), flush to the viewport
   edge, hairline on the right. Live agents are the primary nav;
   concepts sit under a muted "Coming soon" group so the list
   reads as a roadmap rather than a half-built product.
   ------------------------------------------------------------ */
.sidebar {
  grid-area: sidebar;
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}

/* brand lockup + collapse toggle */
.sidebar__top {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-4);
}
.sidebar__brand { display: inline-flex; align-items: center; min-width: 0; flex: 1; overflow: hidden; }
/* The fixed width belongs to the SVG lockup only. A white-label TEXT wordmark
   ("Donnelly AI Agents") sizes to its content, and forcing 118px on it made the
   name overflow its box and run under the collapse control. Size to content,
   cap at the available space, and ellipsis anything genuinely too long. */
.sidebar__brand .brand__logo { height: 20px; width: 118px; }
.sidebar__brand .brand__logo--text {
  width: auto; max-width: 100%; height: auto; font-size: 17px;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sized as a real control, not a decoration: a 32px box inside a 40px hit area,
   which clears the 24px minimum touch/click target with room either side. It was
   26px with a 15px glyph and read as an afterthought. */
.sidebar__collapse {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--hairline); border-radius: var(--rx-sm);
  background: var(--surface); color: var(--t3); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.sidebar__collapse svg { width: 17px; height: 17px; }
.sidebar__collapse:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sidebar__collapse:hover { color: var(--t1); background: var(--canvas); border-color: var(--hairline-hard); }
.sidebar__collapse svg { transition: transform .2s var(--ease-out); }
.app.sidebar-collapsed .sidebar__collapse svg { transform: rotate(180deg); }

/* group label */
.sidebar__label {
  font-family: var(--mono); font-size: var(--fs-2xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--t4);
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
}

/* nav items */
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.rnav {
  --dacc: 14, 158, 103;
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border: 1px solid transparent; border-radius: var(--rx-sm);
  background: none; color: var(--t2); font: inherit; font-size: var(--fs-md);
  font-weight: 550; letter-spacing: -0.01em; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.rnav:hover { background: var(--hover); color: var(--t1); }
/* The auditor app row is a real link, not a view switch — it leaves the
   console. Same shape as the agent rows, without the underline. */
a.rnav { text-decoration: none; }
.rnav__ico {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--rx-xs); color: rgb(var(--dacc));
  background: rgba(var(--dacc), 0.11); border: 1px solid rgba(var(--dacc), 0.22);
  transition: background .14s, border-color .14s, color .14s;
}
.rnav__ico svg { width: 16px; height: 16px; }
.rnav__tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* active agent — soft tinted pill in the agent's own hue */
/* Active row stays neutral — a soft grey fill — and lets the icon tile carry the
   agent's hue. A fully tinted row shouts; this reads as "you are here". */
.rnav.is-active {
  background: var(--canvas);
  border-color: var(--hairline);
  color: var(--t1); font-weight: 650;
}
.rnav.is-active .rnav__ico {
  background: rgb(var(--dacc)); border-color: rgb(var(--dacc)); color: #fff;
}
.rnav:focus-visible { outline: 2px solid rgb(var(--dacc)); outline-offset: 2px; }

/* concept agents — present but clearly not launchable */
.rnav--soon { color: var(--t4); cursor: default; }
.rnav--soon:hover { background: none; color: var(--t4); }
.rnav--soon .rnav__ico { color: var(--t4); background: var(--mute-bg); border-color: var(--hairline); }
.rnav__soon {
  margin-left: auto; flex: none; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--t4);
  border: 1px solid var(--hairline); border-radius: var(--rx-pill); padding: 2px 6px;
}

/* workspace + account, pinned to the bottom */
.sidebar__foot { margin-top: auto; padding-top: var(--sp-3); }
.sidebar__ws {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 9px 10px; border: 1px solid var(--hairline);
  border-radius: var(--rx-sm); background: var(--surface-sub);
}
.sidebar__ws .badge-sq {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--rx-xs); background: var(--acc); color: #fff;
  font-weight: 700; font-size: var(--fs-sm); overflow: hidden;
}
.sidebar__ws .badge-sq.has-logo { background: #fff; padding: 2px; border: 1px solid var(--hairline); }
.sidebar__ws .badge-sq img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }
.sidebar__ws-tx { min-width: 0; }
.sidebar__ws-tx b {
  display: block; font-size: var(--fs-sm); font-weight: 650; color: var(--t1);
  letter-spacing: -0.01em; line-height: var(--lh-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__ws-tx span {
  display: block; font-size: var(--fs-2xs); color: var(--t4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- collapsed rail: icons only ---- */
.app.sidebar-collapsed .sidebar { padding-inline: 10px; align-items: center; }
.app.sidebar-collapsed .sidebar__brand,
.app.sidebar-collapsed .sidebar__label,
.app.sidebar-collapsed .rnav__tx,
.app.sidebar-collapsed .rnav__soon,
.app.sidebar-collapsed .sidebar__ws-tx { display: none; }
.app.sidebar-collapsed .sidebar__top { padding-inline: 0; justify-content: center; }
.app.sidebar-collapsed .rnav { justify-content: center; padding-inline: 0; width: 44px; }
.app.sidebar-collapsed .sidebar__ws { justify-content: center; padding-inline: 0; width: 44px; }
.app.sidebar-collapsed .sidebar__nav { align-items: center; }

/* ------------------------------------------------------------
   4. TOPBAR — breadcrumb + account
   ------------------------------------------------------------
   With the rail carrying agent navigation, the topbar's job
   narrows to "where am I" (breadcrumb) and "who am I" (account).
   The agent switcher stays as a fallback affordance.
   ------------------------------------------------------------ */
.topbar {
  grid-area: topbar; z-index: 20;
  display: flex; align-items: center;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
  padding-inline: var(--shell-pad);
}
.topbar__inner {
  width: 100%; max-width: var(--shell-max); margin: 0 auto;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.tb-left, .tb-right { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }

/* ------------------------------------------------------------
   5. MAIN + CONTENT WIDTH
   ------------------------------------------------------------
   Every view is fluid up to --shell-max (1680px) and centred
   beyond it, so a 1440px laptop uses the whole screen and a
   2560px display doesn't stretch table rows past readability.
   Workbench surfaces opt out into true full-bleed below.
   ------------------------------------------------------------ */
.main {
  grid-area: main; min-width: 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: none;
  padding: var(--shell-pad);
  background: var(--canvas);
}
.main .inner { width: 100%; max-width: var(--shell-max); margin: 0 auto; }

/* Full-bleed: the contract review workbench needs every pixel for
   its three panels. Scoped to that view so it reverts on switch. */
.main:has(#contractView:not([hidden]) #cResultView:not([hidden])) .inner { max-width: none; }
.app:has(#contractView:not([hidden]) #cResultView:not([hidden])) .topbar__inner { max-width: none; }

/* ------------------------------------------------------------
   6. RESPONSIVE SHELL
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .app { grid-template-columns: var(--sidebar-w-min) minmax(0, 1fr); }
  .app .sidebar { padding-inline: 10px; align-items: center; }
  .app .sidebar__brand, .app .sidebar__label,
  .app .rnav__tx, .app .rnav__soon, .app .sidebar__ws-tx { display: none; }
  .app .sidebar__top { padding-inline: 0; justify-content: center; }
  .app .rnav, .app .sidebar__ws { justify-content: center; padding-inline: 0; width: 44px; }
  .app .sidebar__nav { align-items: center; }
  /* The toggle STAYS. It used to be display:none here, which meant that on a
     smaller screen — or any laptop at 100% zoom — the sidebar auto-collapsed to
     icons and the only control that could expand it vanished at the same moment.
     Below 900px it is the one control that matters most. */
  .app .sidebar__brand { display: none; }
  .app .sidebar__collapse { display: grid; }
}
@media (max-width: 640px) {
  body { overflow: auto; }
  .app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr;
    grid-template-areas: "sidebar" "topbar" "main"; height: auto; min-height: 100vh; }
  .sidebar { flex-direction: row; align-items: center; gap: var(--sp-2);
    overflow-x: auto; overflow-y: hidden; border-right: 0;
    border-bottom: 1px solid var(--hairline); padding: 10px 12px; }
  .sidebar__top, .sidebar__label, .sidebar__foot { display: none; }
  .sidebar__nav { flex-direction: row; flex: none; }
  .main { height: auto; }
}