/* ============================================================================
   Nomadic / 8 Figure Rolodex design system
   Single source of truth for the Control Center skin.

   Taken from the production CSS of the Nomadic Connector app, not from the
   page source (the served HTML inlines the Manus builder runtime, which carries
   its own unrelated tokens: --text-primary:#34322d, --Button-primary-brand:
   #0081f2 and friends. None of that is the brand).

   The four rules that carry the family resemblance:
     1. The accent is spent ONCE per screen. Everything else is neutral.
     2. Gold #C99717 on white is 2.65:1 and fails WCAG AA, so gold is never
        used for text. Gold TEXT is --gold-text #8A6800 (5.17:1). Gold as a
        fill is fine, and it always takes dark type, never white (6.76:1).
     3. Borders are warm. A cool grey breaks the family resemblance instantly.
     4. Depth comes from the hairline border, not from shadow.

   Inter needs "cv11" and "ss01" or it reads as stock Inter, i.e. anyone.
   ========================================================================= */

:root{
  /* --- ground and surfaces ------------------------------------------- */
  --ground:#F7F6F2;                     /* warm off-white page ground     */
  --surface:#FFFFFF;                    /* cards, panels, rows            */
  --surface-2:#F2F0EA;                  /* recessed: table headers, wells */
  --surface-3:#FBFAF7;                  /* hover on a white surface       */
  --logo-tile:#171614;                  /* solid tile behind the logo: the dark one in both themes (Joel W, 9/29) */
  --rail:#070707;                       /* the dark sidebar rail          */
  --rail-2:#141414;                     /* rail hover                     */

  /* --- borders (warm, never cool grey) -------------------------------- */
  --border:#E8E5DD;
  --border-strong:#D4D0C8;
  --rail-border:#242424;                /* hairline inside the dark rail  */

  /* --- accent --------------------------------------------------------- */
  --gold:#C99717;                       /* fill only                      */
  --gold-light:#E9C75B;                 /* fill / on-dark type            */
  --gold-soft:#FBF5E3;                  /* pale tint background           */
  --gold-border:#E2C96A;
  --gold-text:#8A6800;                  /* the only gold safe for type    */
  --gold-text-strong:#7A5C00;           /* 6.25:1 where AAA-ish is wanted */

  /* --- type ----------------------------------------------------------- */
  --text:#171717;
  /* The kit's #6F6F6F / #717171 are 4.55:1 on the ground and 4.28-4.41:1 on a
     recessed surface, i.e. they fail AA exactly where this app puts most of its
     secondary type (table headers, sub-labels, wells). Darkened by ~3% so every
     screen passes, the same correction the kit already makes for gold type. */
  --text-2:#666666;
  --text-3:#6A6A6A;
  --text-on-rail:#F4F3F0;
  --text-on-rail-2:#8A8A8A;

  /* --- semantics ship as base + soft + border trios -------------------- */
  --success:#13754F; --success-soft:#E8F3EE; --success-border:#B7DBCA;
  --warning:#996000; --warning-soft:#FBF2E3; --warning-border:#E6CB98;
  --danger:#B52E2E;  --danger-soft:#F9EAEA;  --danger-border:#E7B4B4;
  --info:#1D5EC9;    --info-soft:#EAF0FB;    --info-border:#B4C9EC;
  --purple:#5B3FD4;  --purple-soft:#EFECFB;  --purple-border:#C9BFF0;
  --teal:#146C7E;    --teal-soft:#E7F2F4;    --teal-border:#B3D5DC;
  --magenta:#A82D6E; --magenta-soft:#FAEAF2; --magenta-border:#EBBBD3;

  /* --- shape, motion, type stack -------------------------------------- */
  --r-btn:8px; --r-input:10px; --r-card:12px; --r-panel:14px; --r-pill:999px;
  --ease:160ms cubic-bezier(.23,1,.32,1);
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Shadows are near-invisible on purpose. Reach for --border first. */
  --shadow-sm:0 1px 2px rgba(23,23,23,0.04);
  --shadow-md:0 2px 8px rgba(23,23,23,0.06);
  --shadow-pop:0 8px 28px rgba(23,23,23,0.10);

  /* ==================================================================
     Legacy aliases. The Control Center grew two CSS dialects before this
     file existed: the Lexend shell (app/login/account) and the Archivo +
     JetBrains Mono modules (everything else). Both are mapped here so the
     component CSS in each page keeps working untouched.
     ================================================================== */

  /* dialect A - the Lexend shell */
  --bg:var(--ground);
  --sidebar:var(--rail);
  --card:var(--surface);
  --card-hover:var(--surface-3);
  --card-light:var(--surface-2);
  --border-light:var(--border-strong);
  --gold-bg:var(--gold-soft);
  --cream:var(--text);
  --text-soft:var(--text-2);

  /* dialect B - the Archivo modules */
  --line:var(--border);
  --line-strong:var(--border-strong);
  --ink:var(--text);
  --muted:var(--text-2);
  --muted-2:var(--text-3);
  --gold-bright:var(--gold-text);
  --gold-dim:var(--gold-text);
  --disp:var(--body);
  --mono:var(--body);

  /* status colours the modules ask for by name */
  --green:var(--success);  --green-bg:var(--success-soft);
  --red:var(--danger);     --red-bg:var(--danger-soft);
  --amber:var(--warning);  --amber-bg:var(--warning-soft);
  --blue:var(--info);      --blue-bg:var(--info-soft);
  --purple-bg:var(--purple-soft);
  --cyan:var(--teal);      --cyan-bg:var(--teal-soft);
  --pink:var(--magenta);   --pink-bg:var(--magenta-soft);
  --paid:var(--success);   --pending:var(--warning);
  --void:var(--danger);

  /* dialect C - the funnel call / review screens */
  --sunk:var(--surface-2);
  --line-2:var(--border-strong);
  --text-dim:var(--text-2);
  --text-mute:var(--text-3);
  --faint:var(--text-3);
  --head:var(--body);
  --accent:var(--gold);
  --accent-line:var(--gold-border);
  --accent-soft:var(--gold-soft);
  --green-line:var(--success-border);
  --red-line:var(--danger-border);
  --amber-line:var(--warning-border);

  /* offers kanban stages */
  --selling:var(--gold-text); --onboarding:var(--warning);
  --recruiting:var(--info);   --active:var(--success);
  --closed:var(--text-3);
  /* ==================================================================
     Page-specific colours that used to be literals (2026-09-13). Light
     values are the exact literals they replaced, so light mode is
     unchanged; each has a dark twin in the dark block below.
     ================================================================== */
  --on-gold:#171717;                    /* type on a gold fill, both themes */
  /* cro.html has always asked for these and they never existed, so it fell
     back to pale colours meant for a dark page. Pointing them at the semantic
     tokens makes them follow the theme. */
  --green-text:var(--success); --red-text:var(--danger);
  --chip-on-n:#BDBDBD;                  /* count inside an inverted chip    */
  --alert-bg-a:#fffdf6; --alert-bg-b:#fff6e4; --alert-border:#f0dcae;
  --alert-num:#8b5800; --alert-text:#5c4a2a; --alert-strong:#3d3018;
  --gap-ink:#8a5c0f;
  --outreach-border:#e5b55f; --outreach-bg:#fdf6e7; --outreach-text:#5c4a1f;
  --outreach-strong:#7a4d00; --outreach-pill:#f6e2b4;
  --warm-2:#5c574d; --warm-3:#7b7568; --warm-icon:#8d8778; --warm-url:#918a7b;
  --warm-muted:#9a8f86; --copy-hover:#fdefd2; --external-line:#c6d6f2;
  --tag-info-bg:#eef3fb; --tag-info-ink:#3d6ba8; --tag-info-line:#cddcf0;
  --late-ink:#b0442f;

  /* Form field borders (2026-09-15). --line / --line-strong / --border are
     hairlines for cards, tables and dividers too, and at 1.26-1.54:1 a field's
     edge barely showed. Fields get their own colour at 3:1 or better against
     white, the ground and a recessed well (WCAG non-text contrast). */
  --field-line:#8A857B;                 /* 3.67 on white, 3.22 on --surface-2 */
  --field-line-strong:#5F5A51;          /* a field's focus rule that used --line-strong */
  --field-rail-line:#6B6B6B;            /* the command search on the dark rail */

  /* What TJW needs (2026-09-16): the red band across the shell and the scrim
     behind its pop-up. White on #B52E2E is 6.1:1. */
  --alarm:#B52E2E; --on-alarm:#FFFFFF; --alarm-btn-ink:#B52E2E;
  --scrim:rgba(23,23,23,0.45);

  --r:var(--r-input);
}

/* ---------------------------------------------------------------------
   DARK THEME (2026-09-13). Token redefinition only, and only under the
   explicit attribute: the Command Center shell and embedded.js always stamp
   data-theme on <html> from the saved choice, so there is no media-query copy
   to drift. Every alias above is written as var(), so it follows these
   values without being restated.

   Gold TEXT inverts rather than darkens: #8A6800 is type on a white card, and
   on a near-black card it would be unreadable, so it becomes a light gold.
   Gold as a FILL stays the same and keeps its dark type.
   ------------------------------------------------------------------ */
:root[data-theme="dark"]{
  color-scheme:dark;

  --ground:#0E0D0B;
  --surface:#171614;
  --surface-2:#1F1D1A;
  --surface-3:#1B1A17;
  --logo-tile:#171614;
  --rail:#070707;
  --rail-2:#141414;

  --border:#2E2B26;
  --border-strong:#403C35;
  --rail-border:#242424;

  --gold:#C99717;
  --gold-light:#E9C75B;
  --gold-soft:#29210F;
  --gold-border:#5E4B1C;
  --gold-text:#E9BF62;
  --gold-text-strong:#F0CD7A;

  --text:#F2F0EA;
  --text-2:#B3AEA4;
  --text-3:#9C978D;
  --text-on-rail:#F4F3F0;
  --text-on-rail-2:#8A8A8A;

  /* Soft fills lifted 2026-09-15: at #2E1616 / #2A200F / #12261D a status pill
     sat at 1.07-1.14:1 on a card, so only its text showed. Now 1.31-1.40:1 on
     --surface with the pill text still 4.9:1 or better. Info, purple, teal
     and magenta got the same lift later that day: 1.06-1.15:1 before,
     1.35-1.39:1 now, pill text 5.1:1 or better. */
  --success:#4CC38A; --success-soft:#163224; --success-border:#24503C;
  --warning:#E0A84A; --warning-soft:#3F2F12; --warning-border:#5A4219;
  --danger:#F07A7A;  --danger-soft:#4E2222;  --danger-border:#5E2A2A;
  --info:#7AA7F0;    --info-soft:#1F2F4C;    --info-border:#2A3F66;
  --purple:#A994F5;  --purple-soft:#30295A;  --purple-border:#3E3470;
  --teal:#5CC0D2;    --teal-soft:#15353B;    --teal-border:#22505A;
  --magenta:#E68AB8; --magenta-soft:#4A2440; --magenta-border:#5C2C45;

  --on-gold:#171717;
  --chip-on-n:#6B665D;
  --alert-bg-a:#221B0E; --alert-bg-b:#2A2011; --alert-border:#5E4B1C;
  --alert-num:#E9BF62; --alert-text:#D9C9A6; --alert-strong:#F2E6C8;
  --gap-ink:#E9BF62;
  --outreach-border:#6A5222; --outreach-bg:#241C0D; --outreach-text:#D9C9A6;
  --outreach-strong:#F0CD7A; --outreach-pill:#3A2D12;
  --warm-2:#B3AEA4; --warm-3:#9C978D; --warm-icon:#9C978D; --warm-url:#9C978D;
  --warm-muted:#9C978D; --copy-hover:#2E2412; --external-line:#2A3F66;
  --tag-info-bg:#1F2F4C; --tag-info-ink:#7AA7F0; --tag-info-line:#2A3F66;
  --late-ink:#F07A7A;

  --field-line:#78736A;                 /* 3.84 on --surface, 3.57 on --surface-2 */
  --field-line-strong:#A39E94;

  /* --danger goes light in dark, so the band keeps its own deep red (white
     on #8E2323 is 8.7:1) and the button on it keeps red type. */
  --alarm:#8E2323; --on-alarm:#FFFFFF; --alarm-btn-ink:#8E2323;
  --scrim:rgba(0,0,0,0.62);

  --shadow-sm:0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:0 2px 10px rgba(0,0,0,0.45);
  --shadow-pop:0 10px 32px rgba(0,0,0,0.60);
}

/* Controls a page never styled keep the browser's white box, which is
   white on white in dark. Zero specificity on purpose: any rule a page did
   write still wins, and a classed button (gold fills) is left alone. */
:where(:root[data-theme="dark"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){
  background-color:var(--surface);color:var(--text);border-color:var(--field-line);
}
:where(:root[data-theme="dark"]) :where(button:not([class])){
  background-color:var(--surface-2);color:var(--text);border-color:var(--border-strong);
}

/* FIELD BORDERS (2026-09-15). Every page styles its own fields, mostly as
   border:1px solid var(--line) or var(--line-strong), and those tokens also
   draw card edges and table rules. Redefining the hairline tokens ON THE FIELD
   ITSELF turns each of those page rules into a field-coloured border without
   touching a single card, divider or page selector. Zero specificity, and only
   custom properties, so a field border a page set to gold, red or transparent
   is left exactly as it was. --border-strong is left alone: it also colours
   the textarea scrollbar. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]),select,textarea){
  --line:var(--field-line); --line-strong:var(--field-line); --line-2:var(--field-line);
  --border:var(--field-line); --border-light:var(--field-line); --rail-border:var(--field-rail-line);
}
/* A focus rule written as a step up from the resting hairline still steps up. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]),select,textarea):focus{
  --line-strong:var(--field-line-strong); --border-light:var(--field-line-strong);
}

/* ---------------------------------------------------------------------
   Base. Pages layer their own component CSS on top of this.
   ------------------------------------------------------------------ */
html,body{margin:0}
body{
  background:var(--ground);
  color:var(--text);
  font-family:var(--body);
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Numbers line up in every table and metric. Prose keeps proportional
   figures, which is why this is a list and not a rule on body. */
table,th,td,input,select,textarea,
.num,.val,.cmp,.chg,.kpi .val,.tile .val,.stat-val,.metric-val{
  font-variant-numeric:tabular-nums;
}

/* Uppercase eyebrows tracked 0.14-0.22em at ~11px are a real device in this
   system, so scrollbars and selection should not fight them. */
::selection{background:#2563eb;color:#fff}
*{scrollbar-color:var(--border-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill);
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------------------
   Phones. Every page that loads this file gets the same three rules:
   form fields at 16px (under 16px iOS zooms the whole page the moment a
   field takes focus), tap targets about 40px tall, and a select that can
   never be wider than its row. !important because pages set their own
   13-14px sizes on more specific selectors. Desktop is untouched.
   ------------------------------------------------------------------ */
@media (max-width:640px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=color]),
  select,textarea{font-size:16px!important}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=color]),
  select,button,.btn,[role=button]{min-height:40px}
  input[type=checkbox],input[type=radio]{min-width:20px;min-height:20px}
  select{max-width:100%}
}

/* ---------------------------------------------------------------------
   MODAL CLOSE X (Joel W, ticket 12046, 2026-10-09): one consistent, visible
   way to dismiss any modal or pop-up in the portal, in the top right, every
   time. It dismisses only, nothing saved, same as clicking outside or
   pressing Escape today; Cancel/Back buttons stay exactly where they are.
   Add class="modal-x-close" to a button inside anything that already has
   its own positioning context (a <dialog>, which the browser positions on
   its own, or a box styled position:relative/fixed/absolute) and wire its
   onclick to that modal's own dismiss, e.g. onclick="this.closest('dialog').close()"
   for a native <dialog>, or the page's existing closeXModal() function.
   ------------------------------------------------------------------ */
.modal-x-close{
  position:absolute; top:12px; right:12px; z-index:5;
  width:30px; height:30px; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:999px;
  background:var(--surface); color:var(--text-2);
  font-size:18px; line-height:1; font-family:inherit; cursor:pointer;
}
.modal-x-close:hover{ background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
.modal-x-close:focus-visible{ outline:2px solid var(--gold-border); outline-offset:1px; }

/* AI Terminal e2e test, safe to remove */