/* Jaltech SARS Console — the design system, inherited from the Jaltech EPC
 * Portal (portal/static/portal.css) so both consoles wear one identity.
 *
 * Every colour is a custom property declared ONCE, in the :root block below,
 * and nowhere else: not in this file's rules, not in poc.css. The palette is
 * Jaltech's official ladder (the portal's docs/branding and the Corporate
 * Identity Guidelines: Jaltech Navy primary, Jaltech Slate secondary), read
 * dark: their deep navy is the page, their brand slate is the raised card,
 * their light slate is the action, and text is white or their muted line.
 * The four status colours are additions (Jaltech publish none); they are tuned
 * to clear WCAG AA on both surfaces rather than picked by eye.
 *
 * What is NOT taken from Jaltech is the PAIRING: their own site puts slate on
 * navy at 1.69:1. So the assignments are contrast-led — the mid slate is a
 * decorative line and never borders a control (1.62:1 on the card), the light
 * slate is a FILL or a BORDER and never body text (3.06:1 on the card), and
 * the action colour AS TEXT is the muted line (--accent).
 *
 * The @contrast manifest is machine-read by app/tests/test_theme.py, which
 * resolves both tokens and fails under threshold: `text` needs 4.5:1
 * (WCAG 1.4.3), `ui` needs 3:1 (1.4.11, the boundary of a control). Every
 * colour token must appear in a manifest line or in @contrast-exempt.
 *
 * @contrast --ink        on --bg    : text
 * @contrast --ink        on --card  : text
 * @contrast --ink        on --card2 : text
 * @contrast --ink2       on --bg    : text
 * @contrast --ink2       on --card  : text
 * @contrast --ink3       on --bg    : text
 * @contrast --ink3       on --card  : text
 * @contrast --ink3       on --card2 : text
 * @contrast --accent     on --bg    : text
 * @contrast --accent     on --card  : text
 * @contrast --muted      on --card  : text
 * @contrast --text       on --card  : text
 * @contrast --human      on --card  : text
 * @contrast --ok         on --bg    : text
 * @contrast --ok         on --card  : text
 * @contrast --good       on --card  : text
 * @contrast --warn       on --bg    : text
 * @contrast --warn       on --card  : text
 * @contrast --bad        on --bg    : text
 * @contrast --bad        on --card  : text
 * @contrast --on-action  on --blue  : text
 * @contrast --on-action  on --deep  : text
 * @contrast --on-action  on --ok    : text
 * @contrast --on-action  on --warn  : text
 * @contrast --on-action  on --bad   : text
 * @contrast --blue       on --bg    : ui
 * @contrast --blue       on --card  : ui
 * @contrast --field-line on --card  : ui
 * @contrast --field-line on --card2 : ui
 * @contrast --focus      on --card  : ui
 * @contrast --ink        on --card-lift : text
 * @contrast --ink2       on --card-lift : text
 * @contrast --ink3       on --card-lift : text
 * @contrast --accent     on --card-lift : text
 * @contrast --muted      on --card-lift : text
 * @contrast --ok         on --card-lift : text
 * @contrast --warn       on --card-lift : text
 * @contrast --bad        on --card-lift : text
 * @contrast --blue       on --card-lift : ui
 * @contrast --field-line on --card-lift : ui
 * @contrast --focus      on --card-lift : ui
 * @contrast --ink        on --select : text
 * @contrast --ink2       on --select : text
 * @contrast --ink3       on --select : text
 * @contrast --ok         on --select : text
 * @contrast --blue       on --select : ui
 * @contrast --field-line on --select : ui
 *
 * @contrast-exempt --line
 *   A decorative rule between rows and sections, never the boundary of a
 *   control (that is --field-line). WCAG 1.4.11 does not reach separators.
 *   Translucent: a faint white line reads as depth on any of the surfaces.
 *
 * @contrast-exempt --ok-edge --ok-tint --ok-glow --blue-edge --blue-tint --warn-edge --bad-edge --bad-tint --topbar-edge --edge --bar-hover
 *   Translucent. A ratio is undefined without a named backdrop; the readable
 *   case is gated through the opaque pairs above.
 *
 * Fonts. Poppins (body) and Manrope (buttons — the identity guidelines'
 * second typeface, "buttons only") are self-hosted from Google's own files,
 * never linked from fonts.googleapis.com: a sign-in console should not tell a
 * third party who is loading it.
 *   Poppins: Copyright 2014-2019 Indian Type Foundry (info@indiantypefoundry.com)
 *   Manrope: Copyright 2018 The Manrope Project Authors
 *   Both under the SIL Open Font License 1.1 — /static/OFL.txt and
 *   /static/OFL-Manrope.txt, served beside the font files.
 */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/static/poppins-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/static/manrope-500-600.woff2") format("woff2");
}

:root {
  /* Jaltech's ladder, darkest to lightest:
     deep navy, brand slate, mid slate, light slate, muted line, pale blue-grey, white. */
  /* Three depths. The ladder has two dark surfaces and the console nests
     deeper than the portal, so a third is DERIVED: five percent white over
     the navy. Inside a card the roles rotate one step (poc.css scopes it):
     panels sit recessed on navy, and the rows and fields on them lift. */
  --bg: #142B38;            /* deep navy — the page */
  --card: #314F62;          /* brand slate — the card on the page */
  --card2: #142B38;         /* inputs, inner tiles and pills sit on the page navy, recessed */
  --card-lift: #293E4A;     /* navy + 9% white — a row or field on a navy panel */
  --select: #314F62;        /* the SELECTED row or sub-step: the brand slate, never re-bound */
  --line: rgba(255, 255, 255, .10);  /* a faint white line — DECORATIVE edges only (exempt) */
  --field-line: #809EAD;    /* the boundary of a control */
  --ink: #FFFFFF;
  --ink2: #E6EAEC;
  --ink3: #BFCED5;          /* dim ink */
  --blue: #809EAD;          /* the action colour: fills and borders, never text */
  --accent: #BFCED5;        /* the action colour AS TEXT */
  --on-action: #142B38;     /* text on an action fill */
  --deep: #809EAD;          /* the primary button fill (same as --blue; kept as a name) */
  --focus: #E6EAEC;
  --muted: #BFCED5;
  --text: #FFFFFF;
  --good: #86E0BC;
  --human: #E6EAEC;         /* "a person did this" — the pale blue-grey; Jaltech publish no violet */
  /* Status. Additions, tuned to clear AA on --bg and --card. */
  --ok: #86E0BC;
  --warn: #F0C077;
  --bad: #FFB3A0;
  /* Translucent tints of the tokens above, for edges, washes and glows. */
  --ok-edge: rgba(134, 224, 188, .45);
  --ok-tint: rgba(134, 224, 188, .10);
  --ok-glow: rgba(134, 224, 188, .22);
  --blue-edge: rgba(128, 158, 173, .55);
  --blue-tint: rgba(128, 158, 173, .14);
  --warn-edge: rgba(240, 192, 119, .40);
  --bad-edge: rgba(255, 179, 160, .45);
  --bad-tint: rgba(255, 179, 160, .08);
  --topbar-edge: rgba(255, 255, 255, .6);
  /* The bar's white edge, carried onto the cards and the buttons so every
     object the eye lands on has the same crisp rim. Translucent (exempt);
     it composites to #A1AAAF on the navy and #ADB9C0 on the slate, both far
     above 3:1 as a control boundary. */
  --edge: rgba(255, 255, 255, .6);
  --bar-hover: rgba(255, 255, 255, .08);
  /* Jaltech's three radii: the floating nav pill, cards, icon tiles; plus fields. */
  --r-pill: 35px;
  --r-card: 26px;
  --r-tile: 14px;
  --r-field: 10px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-button: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
html,
body { height: 100%; }
body {
  background: var(--bg);
  /* Three text tiers: headings white, body the pale blue-grey, captions the
     muted line. Pure white body copy everywhere read as glare. */
  color: var(--ink2);
  font: 400 14px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  /* Column: the top bar sits above the workspace row. */
  display: flex; flex-direction: column;
  overflow: hidden;
}
.workspace { flex: 1; display: flex; min-height: 0; }
h1, h2, h3, h4 { color: var(--ink); }

/* One focus treatment everywhere. */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- the top bar ------------------------------------------------------- */
/* The portal's floating navy pill: the white lock-up on the left, the
 * console's mode buttons as nav pills beside it, the status chip and Sign out
 * on the right. It is shell chrome; the PoC fills the two slots at render and
 * so spends none of its own height on them. flex:none — it takes only its own
 * height from the body column, and the workspace below stays height-bounded. */
.topbar {
  width: min(92vw, 1200px);
  margin: 12px auto 0;
  padding: 8px 14px 8px 18px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; gap: 18px;
  background: var(--card);
  border: 1px solid var(--topbar-edge);
  flex: none;
  position: relative; z-index: 40;
}
.brand { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.brand img { height: 40px; width: auto; display: block; }
#topbar-nav { flex: 1 1 auto; display: flex; min-width: 0; }
#topbar-end { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (max-width: 640px) {
  .topbar { border-radius: var(--r-card); flex-wrap: wrap; gap: 10px 12px; padding: 8px 12px; }
  .brand img { height: 32px; }
  .brand { order: 1; }
  #topbar-end { order: 2; }
  #topbar-nav { order: 3; flex-basis: 100%; }
}

/* ---- controls ---------------------------------------------------------- */

/* The portal's quiet button: transparent with the light-slate edge and white
   text, so a button never matches the surface it sits on; the primary is the
   light-slate fill. Hover is a white wash, not a brightness filter. */
.btn {
  font: 600 13px/1 var(--font-button);
  padding: 10px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--edge); background: transparent; color: var(--ink);
  cursor: pointer;
}
.btn:hover { background: var(--bar-hover); }
.btn.primary:hover, .btn.approve:hover, .btn.stop:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--deep); border-color: var(--deep); color: var(--on-action); }
.btn.approve { background: var(--ok); border-color: var(--ok); color: var(--on-action); }
.btn.stop { background: var(--bad); border-color: var(--bad); color: var(--on-action); }
.btn.ghost { color: var(--ink3); }
.select {
  background: var(--card2); color: var(--ink);
  border: 1px solid var(--field-line); border-radius: var(--r-field);
  padding: 9px 10px; font: 400 13px var(--font); width: 100%;
}
.btn.info {
  flex: none; width: 36px; padding: 9px 0;
  font: 700 italic 13px Georgia, serif; color: var(--accent);
}

/* ---- main -------------------------------------------------------------- */

.main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  padding: 12px 28px 22px; gap: 14px; position: relative;
}

.banner {
  border: 1px solid var(--line); border-radius: var(--r-field);
  padding: 10px 16px; font-size: 13px;
}
.banner.ok { border-color: var(--ok-edge); color: var(--ok); background: var(--ok-tint); }
.banner.bad { border-color: var(--bad-edge); color: var(--bad); background: var(--bad-tint); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--ok-tint); }
  50% { box-shadow: 0 0 0 6px var(--ok-glow); }
}

/* status chips (partnership lifecycle) and score badges */
.status {
  padding: 3px 12px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600;
  border: 1px solid; flex: none; white-space: nowrap;
}
.status.run { color: var(--accent); border-color: var(--blue-edge); background: var(--blue-tint); }
.status.ok { color: var(--ok); border-color: var(--ok-edge); background: var(--ok-tint); }
.status.bad { color: var(--bad); border-color: var(--bad-edge); background: var(--bad-tint); }
.btn.score { padding: 6px 14px; font-size: 12px; }

/* investor cards — ONE per run, split pane: identity left, pack right.
 * Flex column, items flex:none: cards ALWAYS size to their content and the
 * container scrolls. (A grid here compressed the rows to fit and clipped
 * files and buttons mid-card — caught by fe-review's layout audit.) */
.cards {
  display: flex; flex-direction: column; gap: 12px;
  overflow: auto; min-height: 0; flex: 1;
}
.files {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  overflow: auto; align-content: start;
}
.file {
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-field);
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none;
}
.file:hover { border-color: var(--blue-edge); }
.file b { font-size: 12.5px; font-weight: 600; display: block; }
.file span { color: var(--ink3); font: 11.5px Consolas, monospace; }
.summary {
  display: flex; gap: 26px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--card2); font-size: 12.5px; color: var(--ink2);
}
.summary b { color: var(--ink); }
.tick {
  margin-left: auto; display: flex; gap: 14px; align-items: baseline; min-width: 0;
  background: none; border: none; cursor: pointer; padding: 6px 0;
  font: 11.5px Consolas, monospace; color: var(--ink3); text-align: right;
}
.tick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick:hover { color: var(--ink2); }
.sb-cols {
  flex: 1; min-height: 0; display: grid; gap: 14px;
  grid-auto-flow: column; grid-auto-columns: 1fr;
}
/* The column scrolls only when it has to. It was tuned to fit ten checks at
   the operator viewport and the newer scenarios push past that — a clipped
   last check with its summary line off the bottom is worse than a scrollbar.
   The summary stays pinned so the column's verdict is never the thing that
   scrolls away. */
.sb-cols .col {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; display: flex; flex-direction: column; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
}
.sb-cols .col.bad { border-color: var(--bad-edge); }
.sb-cols .col h3 {
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3); margin-bottom: 8px;
}
.sb-cols .col.bad h3 { color: var(--bad); }
@keyframes spin { to { transform: rotate(360deg); } }
.col .colsub {
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--card2);
  font-size: 12px; color: var(--ink2);
  position: sticky; bottom: -12px; background: var(--card);
  padding-bottom: 12px; margin-bottom: -12px;
}
.col .colsub b { color: var(--ok); }
.col.bad .colsub b { color: var(--bad); }
.log { overflow: auto; flex: 1; font: 11.5px/1.75 Consolas, monospace; color: var(--ink2); }
.log p { white-space: pre-wrap; word-break: break-word; }
.log p.warn { color: var(--warn); }

/* ---- lead collection form --------------------------------------------- */
/* Scrolls when it overflows: the fe-review layout invariants exist because a
   card's controls were clipped once and nothing caught it. */
.collectform { overflow: auto; min-height: 0; display: grid; gap: 10px; padding-right: 4px; }
/* Scrolls when it overflows - the fe-review layout invariant that exists
   because a card's controls were clipped once and nothing caught it. */
.lead-list { overflow: auto; min-height: 0; display: grid; gap: 10px; align-content: start; }

/* Log tones used by collection runs: step completion and step failure.
   .bad/.ok were referenced by app.js but never styled, so a failed step
   rendered in the same grey as ordinary progress. */
.log p.ok { color: var(--ok); }
.log p.bad { color: var(--bad); }