/* ==========================================================================
   Nakhal & Cie — internal console
   Lead Desk · Catalogue · Bookings · Scoreboard

   Same house as the public site: warm neutrals, cedar green, brass hairlines,
   serif for display and reading copy, system sans for the working interface.
   No network fonts, no icon set, no build step — the demo room may be offline.

   Everything below is driven by the tokens in §1. catalogue.css (cat-*) and
   bookings.css (bk-*) load after this file and consume the same tokens, so a
   token change lands everywhere at once — including the dark block in §15.
   ========================================================================== */


/* --- 1. tokens ----------------------------------------------------------- */

:root {
  /* Palette. Mirrors site.css so the console reads as the same system.
     These names are a contract with the other console stylesheets — extend,
     never rename. */
  --c-bg:         #f4f2ec;
  --c-panel:      #fffdf8;
  --c-sunk:       #f8f5ed;   /* recessed surface: table heads, tiles, notes   */
  --c-field:      #ffffff;   /* form controls sit a shade above the panel     */
  --c-line:       #e0d9c9;
  --c-line-soft:  #efe9dc;   /* interior rules inside a bordered surface      */

  --c-ink:        #1c1913;
  --c-ink-2:      #423c32;
  --c-muted:      #79705f;
  --c-muted-2:    #8a7c5c;

  --c-green:      #1f4a37;
  --c-green-deep: #12301f;
  --c-green-mid:  #2f6b4f;
  --c-green-pale: #e6ede8;
  --c-on-green:   #f4efe2;   /* text on a --c-green fill (flips in dark)      */
  --c-cream:      #f4efe2;   /* text on an always-deep surface (never flips)  */

  --c-amber:      #a86a12;
  --c-amber-pale: #fbf0d9;
  --c-amber-line: #eed9ab;
  --c-amber-ink:  #6f6240;

  --c-red:        #7a2b33;
  --c-red-pale:   #fbe3e1;
  --c-red-line:   #e2b8b5;

  --c-brass:      #b28a4c;
  --c-brass-pale: #e9dcc2;

  --c-chip:       #ece6d8;   /* neutral tag                                   */
  --c-chip-ink:   #6b6353;
  --c-track:      #e8e2d3;   /* unfilled bar rail                             */
  --c-warm-row:   #fffaf0;   /* after-hours row — warmer, never louder        */

  /* Status accents. Deliberately desaturated — an operations tool, not a
     dashboard. Anything louder than this belongs in the amber hero. */
  --c-info:       #eef3ff;
  --c-info-line:  #ccdaf3;
  --c-info-ink:   #2f4b86;
  --c-slate:      #e7ecf6;
  --c-slate-line: #ccd7ea;
  --c-slate-ink:  #34496f;
  --c-violet:     #ede4f7;
  --c-violet-ink: #5b3d84;
  --c-ok:         #dff0e4;
  --c-ok-ink:     #1c6b33;

  --c-bar-bg:     var(--c-green);
  --c-bar-ink:    #e0d7c0;
  --c-bubble-in:  #f1eee6;   /* customer turn                                 */
  --c-bubble-out: #eef3f0;   /* assistant turn                                */

  /* Chrome overlays. The top bar and the login aside sit on a deep fill, so
     their hairlines, hovers and secondary text are overlays on that fill
     rather than palette colours — they have to hold whatever --c-bar-bg is.
     Tokenised here so §4 carries no loose rgba, and so the whole bar retunes
     from one place. */
  --c-bar-hover:  rgba(255,255,255,.10);   /* hover wash on a bar control     */
  --c-bar-sel:    rgba(255,255,255,.15);   /* the live section                */
  --c-bar-face:   rgba(255,255,255,.13);   /* the mark's own tile             */
  --c-bar-edge:   rgba(233,220,194,.22);   /* brass hairline, at rest         */
  --c-bar-edge-hi:rgba(233,220,194,.45);   /* brass hairline, hovered         */
  --c-bar-rule:   rgba(233,220,194,.16);   /* divider in the collapsed bar    */
  --c-bar-dim:    rgba(233,220,194,.75);   /* secondary text on the bar       */
  --c-bar-sub:    rgba(233,220,194,.68);   /* tertiary text on the bar        */
  --c-cream-2:    rgba(244,239,226,.82);   /* reading copy on a deep panel    */
  --c-cream-3:    rgba(244,239,226,.60);   /* fine print on a deep panel      */

  /* Type. Serif for display and for reading copy a consultant actually reads
     (the brief); sans for the working interface; mono for references, which
     are codes and want to be scannable character by character. */
  --c-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype",
             "Book Antiqua", "Noto Naskh Arabic", "Times New Roman", serif;
  --c-sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", "Noto Sans Arabic", Arial, sans-serif;
  --c-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t-3xs: .625rem;      /* 10 — speaker labels                               */
  --t-2xs: .6875rem;     /* 11 — tags, section eyebrows                       */
  --t-xs:  .75rem;       /* 12 — field labels, fine print                     */
  --t-sm:  .8125rem;     /* 13 — secondary metadata                           */
  --t-ui:  .875rem;      /* 14 — controls, table cells                        */
  --t-base:.9375rem;     /* 15 — body                                         */
  --t-md:  1.0625rem;    /* 17 — the consultant brief                         */
  --t-lg:  1.3125rem;    /* 21 — display headings                             */
  --t-xl:  1.625rem;     /* 26 — page title                                   */
  --t-2xl: 2.125rem;     /* 34 — headline figures                             */
  --t-3xl: 4.5rem;       /* 72 — scoreboard hero figure                       */

  --lh-tight: 1.18;
  --lh-snug:  1.35;
  --lh-body:  1.55;
  --lh-loose: 1.66;
  --ls-caps:  .085em;
  --ls-tight: -.02em;

  /* Spacing — 4px base. Use these, not stray pixel values. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* Geometry */
  --r-xs:   4px;
  --r-sm:   7px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-pill: 999px;
  --c-hair: 1px solid var(--c-line);
  --c-wrap: 1180px;

  /* Elevation — two steps, nothing else. --e-1 lifts a surface off the page,
     --e-2 is for something floating over it (the login card). */
  --e-1: 0 1px 2px rgba(28,25,19,.05), 0 2px 10px rgba(28,25,19,.045);
  --e-2: 0 4px 12px rgba(28,25,19,.07), 0 26px 60px rgba(28,25,19,.11);

  --c-ring:     0 0 0 3px rgba(31,74,55,.20);
  --c-ring-red: 0 0 0 3px rgba(122,43,51,.18);

  --c-speed: 140ms;
  --c-ease:  cubic-bezier(.32,.72,.4,1);
}


/* --- 2. base ------------------------------------------------------------- */

body.page-console,
body.page-login {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink-2);
  font-family: var(--c-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Heading defaults.
   site.css loads first on every console page and hands bare headings the
   marketing scale — an h1 is clamp(2.3rem, 5.2vw, 3.9rem) there. These bring
   them back to console scale.

   The `:where()` is load-bearing, not decoration. It contributes no
   specificity, so each rule below weighs exactly one element selector: enough
   to beat site.css on source order, and light enough that a single class in
   catalogue.css or bookings.css still wins. Written as `body.page-console h2`
   it would weigh (0,1,1) and silently outrank .cat-panel-h, .cat-danger-t and
   .bk-h1 — those headings would lose their own colour and weight. Do not
   raise the specificity of this block. */
:where(body.page-console, body.page-login) h1,
:where(body.page-console, body.page-login) h2,
:where(body.page-console, body.page-login) h3 {
  font-family: var(--c-serif);
  color: var(--c-ink);
  font-weight: 400;
  letter-spacing: normal;
}
:where(body.page-console, body.page-login) h1 { font-size: var(--t-xl); line-height: var(--lh-tight); }
:where(body.page-console, body.page-login) h2 { font-size: var(--t-lg); line-height: var(--lh-snug); }
:where(body.page-console, body.page-login) h3 { font-size: var(--t-md); line-height: var(--lh-snug); }

/* Figures line up column-wise wherever they are compared. */
body.page-console table,
body.page-console .c-stat-n,
body.page-console .s-tile-n,
body.page-console .s-hero-figure,
body.page-console .s-row-n,
body.page-console .s-week-n { font-variant-numeric: tabular-nums; }

/* One focus treatment for the whole console. Every interactive element gets
   it; nothing removes it. */
body.page-console :focus-visible,
body.page-login :focus-visible {
  outline: 2px solid var(--c-green-mid);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.c-bar :focus-visible { outline-color: var(--c-brass-pale); }

.c-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* --- 3. login ------------------------------------------------------------ */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  /* A room, not a modal: warm light from the top-left, cedar shadow bottom-right. */
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(255,253,248,.9), transparent 70%),
    radial-gradient(70% 60% at 100% 100%, rgba(31,74,55,.09), transparent 65%),
    var(--c-bg);
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  width: min(880px, 100%);
  background: var(--c-panel);
  border: var(--c-hair);
  border-radius: var(--r-xl);
  box-shadow: var(--e-2);
  overflow: hidden;
}

/* Left half — the house. */
.login-aside {
  background:
    radial-gradient(120% 90% at 15% 10%, var(--c-bar-bg), transparent 62%),
    var(--c-green-deep);
  color: var(--c-cream);
  padding: var(--sp-8) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.login-aside .login-mark { margin: 0; }
.login-house {
  font-family: var(--c-serif);
  font-size: var(--t-lg);
  line-height: var(--lh-tight);
  letter-spacing: .01em;
  margin: 0;
}
.login-est {
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--c-brass-pale);
  margin: var(--sp-2) 0 0;
}
.login-lede {
  margin: 0;
  font-size: var(--t-ui);
  line-height: var(--lh-loose);
  color: var(--c-cream-2);
  max-width: 34ch;
}
.login-rule {
  width: 44px; height: 1px; border: 0; margin: 0;
  background: var(--c-brass);
}
.login-aside-foot {
  margin: auto 0 0;
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--c-cream-3);
}

/* Right half — the form. */
.login-card {
  background: var(--c-panel);
  padding: var(--sp-8) var(--sp-7);
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-mark {
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--c-green); color: var(--c-on-green);
  display: grid; place-items: center;
  margin: 0 0 var(--sp-3);
  box-shadow: inset 0 0 0 1px rgba(178,138,76,.45);
}
.login-mark svg { width: 26px; height: 26px; }
.login-card h1 {
  margin: 0;
  font-family: var(--c-serif);
  font-size: var(--t-lg);
  line-height: var(--lh-tight);
  letter-spacing: .01em;
}
.login-sub {
  margin: var(--sp-1) 0 var(--sp-6);
  color: var(--c-muted);
  font-size: var(--t-sm);
}
.login-field { display: block; margin: 0; }
.login-card label {
  display: block; text-align: left;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-muted);
  margin-bottom: var(--sp-2);
}
.login-card input {
  width: 100%; box-sizing: border-box;
  padding: var(--sp-3) var(--sp-4);
  font: inherit; font-size: var(--t-base);
  color: var(--c-ink);
  border: var(--c-hair);
  border-radius: var(--r-md);
  background: var(--c-field);
  transition: border-color var(--c-speed) var(--c-ease),
              box-shadow var(--c-speed) var(--c-ease);
}
.login-card input:focus {
  outline: none;
  border-color: var(--c-green);
  box-shadow: var(--c-ring);
}
.login-card button {
  width: 100%;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font: inherit; font-size: var(--t-base); font-weight: 600;
  letter-spacing: .01em;
  color: var(--c-on-green);
  background: var(--c-green);
  border: 1px solid var(--c-green);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--c-speed) var(--c-ease);
}
.login-card button:hover { background: var(--c-green-deep); }
.login-error {
  background: var(--c-red-pale);
  color: var(--c-red);
  border: 1px solid var(--c-red-line);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-ui);
  margin: 0 0 var(--sp-4);
}
.login-note {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  color: var(--c-muted);
}

@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-aside { padding: var(--sp-6); gap: var(--sp-4); }
  .login-aside-foot { display: none; }
  .login-card { padding: var(--sp-6); }
}


/* --- 4. top bar ---------------------------------------------------------- */

.c-bar {
  background: var(--c-bar-bg);
  color: var(--c-bar-ink);
  border-bottom: 1px solid var(--c-green-deep);
}
.c-bar-inner {
  max-width: var(--c-wrap);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.c-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--c-cream);
  text-decoration: none;
  font-weight: 600;
  flex-shrink: 0;
}
.c-mark {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--c-bar-face);
  box-shadow: inset 0 0 0 1px var(--c-bar-edge);
  display: grid; place-items: center;
  font-family: var(--c-serif); font-size: var(--t-md);
  color: var(--c-brass-pale);
  flex-shrink: 0;
}
.c-mark svg { width: 19px; height: 19px; }
.c-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.c-brand-name {
  font-family: var(--c-serif); font-weight: 400;
  font-size: var(--t-md); letter-spacing: .01em;
}
.c-brand-sub {
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: .17em;
  font-weight: 500;
  color: var(--c-bar-sub);
}

.c-nav { display: flex; align-items: center; gap: var(--sp-1); }
.c-nav a,
.c-nav-link {
  position: relative;
  color: var(--c-bar-ink);
  text-decoration: none;
  font-size: var(--t-ui);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background var(--c-speed) var(--c-ease),
              color var(--c-speed) var(--c-ease);
}
.c-nav a:hover,
.c-nav-link:hover { background: var(--c-bar-hover); color: var(--c-cream); }
.c-nav a.is-current,
.c-nav-link.is-current {
  background: var(--c-bar-sel);
  color: var(--c-cream);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--c-bar-edge);
}
/* Brass underscore on the live section — the one flourish in the chrome. */
.c-nav a.is-current::after,
.c-nav-link.is-current::after {
  content: "";
  position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 3px;
  height: 1.5px; border-radius: var(--r-pill);
  background: var(--c-brass);
}

.c-bar-end { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.c-nav a.c-out,
.c-out {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--c-bar-dim);
  text-decoration: none;
  font-size: var(--t-ui);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--c-bar-edge);
  white-space: nowrap;
  transition: background var(--c-speed) var(--c-ease),
              color var(--c-speed) var(--c-ease),
              border-color var(--c-speed) var(--c-ease);
}
.c-out:hover {
  background: var(--c-bar-hover);
  color: var(--c-cream);
  border-color: var(--c-bar-edge-hi);
}
.c-out svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Narrow: the sections drop to their own scrollable rail rather than
   compressing into unreadable stubs. No JS, nothing to mis-tap. */
@media (max-width: 880px) {
  .c-bar-inner { flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .c-bar-end { margin-left: auto; }
  .c-nav {
    order: 3; width: 100%;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-bar-rule);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .c-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 420px) {
  .c-brand-sub { display: none; }
}


/* --- 5. page frame ------------------------------------------------------- */

.c-main {
  max-width: var(--c-wrap);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-6) var(--sp-9);
}
.c-empty {
  background: var(--c-panel);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  text-align: center;
  color: var(--c-muted);
}
.c-empty code {
  font-family: var(--c-mono); font-size: .92em;
  background: var(--c-chip); color: var(--c-chip-ink);
  padding: 2px 6px; border-radius: var(--r-xs);
}


/* --- 6. headline stats --------------------------------------------------- */

.c-heads {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.c-stat {
  background: var(--c-panel);
  border: var(--c-hair);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  padding: var(--sp-5) var(--sp-6);
  min-width: 170px;
}
.c-stat--hero {
  background: var(--c-amber-pale);
  border-color: var(--c-amber-line);
  flex: 1;
}
.c-stat-n {
  display: block;
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}
.c-stat--hero .c-stat-n { color: var(--c-amber); }
.c-stat-l {
  display: block;
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin-top: var(--sp-1);
}
.c-stat-sub {
  display: block;
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  color: var(--c-muted-2);
  margin-top: var(--sp-2);
}


/* --- 7. filters ---------------------------------------------------------- */

.c-filters {
  display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end;
  margin-bottom: var(--sp-4);
}
.c-filters label {
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-muted);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.c-filters select,
.c-filters input {
  font: inherit; font-size: var(--t-ui);
  text-transform: none; letter-spacing: normal;
  color: var(--c-ink);
  padding: var(--sp-2) var(--sp-3);
  border: var(--c-hair);
  border-radius: var(--r-sm);
  background: var(--c-panel);
  transition: border-color var(--c-speed) var(--c-ease),
              box-shadow var(--c-speed) var(--c-ease);
}
.c-filters select:hover { border-color: var(--c-brass); }
.c-filters select:focus,
.c-filters input:focus {
  outline: none; border-color: var(--c-green); box-shadow: var(--c-ring);
}


/* --- 8. table ------------------------------------------------------------ */

.c-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--c-panel);
  border: var(--c-hair);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  overflow: hidden;
  font-size: var(--t-ui);
}
.c-table th {
  text-align: left;
  font-size: var(--t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-muted);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-sunk);
  border-bottom: var(--c-hair);
  white-space: nowrap;
}
.c-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: middle;
  color: var(--c-ink-2);
}
.c-table tbody tr:last-child td { border-bottom: 0; }
.c-table tbody tr { transition: background var(--c-speed) var(--c-ease); }
.c-table tbody tr:hover { background: var(--c-sunk); }
.c-table tr.is-afterhours { background: var(--c-warm-row); }
.c-table tr.is-afterhours:hover { background: var(--c-amber-pale); }
/* Corner cells carry the radius so a row background never squares off a corner.
   Inset by the 1px border so the fill sits inside the frame, not on it. */
.c-table { --c-table-r: calc(var(--r-lg) - 1px); }
.c-table thead tr:first-child th:first-child { border-top-left-radius: var(--c-table-r); }
.c-table thead tr:first-child th:last-child  { border-top-right-radius: var(--c-table-r); }
.c-table tbody tr:last-child td:first-child  { border-bottom-left-radius: var(--c-table-r); }
.c-table tbody tr:last-child td:last-child   { border-bottom-right-radius: var(--c-table-r); }

.c-ref {
  font-family: var(--c-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--c-green);
  text-decoration: none;
}
a.c-ref:hover { text-decoration: underline; text-underline-offset: 3px; }
.c-when { color: var(--c-muted); font-size: var(--t-sm); }

.c-bar-track {
  display: inline-block; width: 72px; height: 6px;
  background: var(--c-track);
  border-radius: var(--r-pill);
  overflow: hidden; vertical-align: middle;
}
.c-bar-fill { display: block; height: 100%; background: var(--c-green); }

/* Tablet: wide tables scroll inside themselves rather than pushing the page. */
@media (max-width: 820px) {
  .c-table { display: block; overflow-x: auto; white-space: nowrap; }
  .c-table th, .c-table td { white-space: nowrap; }
}


/* --- 9. tags ------------------------------------------------------------- */

.tag {
  display: inline-block;
  font-size: var(--t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.5;
  padding: 1px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--c-chip);
  color: var(--c-chip-ink);
  margin-left: var(--sp-1);
  vertical-align: middle;
  white-space: nowrap;
}
.tag--night     { background: var(--c-amber-pale); color: var(--c-amber); }
.tag--priority  { background: var(--c-red-pale);   color: var(--c-red); }
.tag--escalated { background: var(--c-violet);     color: var(--c-violet-ink); }
.tag--sim       { background: var(--c-slate);      color: var(--c-slate-ink); }
.tag--lang      { background: var(--c-green-pale); color: var(--c-green); margin-left: 0; }
.tag--trigger   { background: var(--c-info);       color: var(--c-info-ink); }
.tag--new       { background: var(--c-green-pale); color: var(--c-green); }
.tag--contacted { background: var(--c-slate);      color: var(--c-slate-ink); }
.tag--converted { background: var(--c-ok);         color: var(--c-ok-ink); }
.tag--closed    { background: var(--c-chip);       color: var(--c-chip-ink); }
.tag--sent      { background: var(--c-ok);         color: var(--c-ok-ink); }
.tag--pending   { background: var(--c-amber-pale); color: var(--c-amber); }
.tag--dead      { background: var(--c-red-pale);   color: var(--c-red); }


/* --- 10. detail ---------------------------------------------------------- */

.c-back {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  color: var(--c-muted);
  text-decoration: none;
  font-size: var(--t-ui);
  transition: color var(--c-speed) var(--c-ease);
}
.c-back:hover { color: var(--c-green); }

.c-title h1 {
  margin: 0;
  font-family: var(--c-mono);
  font-size: var(--t-xl);
  line-height: var(--lh-tight);
  letter-spacing: .02em;
  font-weight: 600;
}
.c-title-tags { margin-top: var(--sp-2); }
.c-title-tags .tag { margin-left: 0; margin-right: var(--sp-1); }
.c-received {
  color: var(--c-muted);
  font-size: var(--t-sm);
  margin: var(--sp-2) 0 var(--sp-6);
}

.c-brief {
  background: var(--c-panel);
  border: var(--c-hair);
  border-left: 3px solid var(--c-green);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: var(--e-1);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
}
.c-brief h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--c-sans);
  font-size: var(--t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--c-muted);
}
/* The payoff moment of the demo — set as reading copy, not as data. */
.c-brief p {
  margin: 0;
  font-family: var(--c-serif);
  font-size: var(--t-md);
  line-height: var(--lh-loose);
  color: var(--c-ink);
}

.c-missing,
.c-triggers {
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--t-ui);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-4);
}
.c-missing { background: var(--c-amber-pale); border: 1px solid var(--c-amber-line); color: var(--c-amber-ink); }
.c-missing strong { color: var(--c-amber); }
.c-triggers { background: var(--c-info); border: 1px solid var(--c-info-line); color: var(--c-info-ink); }

.c-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 860px) { .c-cols { grid-template-columns: 1fr; } }

.c-card {
  background: var(--c-panel);
  border: var(--c-hair);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
}
.c-card h2,
.s-block h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--c-sans);
  font-size: var(--t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--c-muted);
}
.c-card h2 + h2,
.c-card table + h2 { margin-top: var(--sp-6); }

.c-kv { width: 100%; border-collapse: collapse; font-size: var(--t-ui); }
.c-kv th {
  text-align: left; width: 38%;
  color: var(--c-muted); font-weight: 600;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line-soft);
}
.c-kv td {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: top;
  color: var(--c-ink-2);
}
.c-kv tr:last-child th,
.c-kv tr:last-child td { border-bottom: 0; }
.c-raw { color: var(--c-muted); font-style: italic; font-size: var(--t-sm); }
.c-warn { color: var(--c-red); font-size: var(--t-sm); }

.c-consent {
  background: var(--c-sunk);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--t-sm);
}
.c-consent-meta { color: var(--c-muted); }
.c-consent code {
  font-family: var(--c-mono); font-size: .92em;
  background: var(--c-chip); color: var(--c-chip-ink);
  padding: 1px 5px; border-radius: var(--r-xs);
}
.c-consent blockquote {
  margin: var(--sp-2) 0 0;
  font-family: var(--c-serif);
  font-style: italic;
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}

.c-transcript {
  max-height: 460px; overflow-y: auto;
  padding-right: var(--sp-1);
}
.c-turn {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
  font-size: var(--t-ui);
}
.c-turn--user { background: var(--c-bubble-in); }
.c-turn--assistant { background: var(--c-bubble-out); }
.c-who {
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-muted);
  font-weight: 700;
}
.c-turn p { margin: var(--sp-1) 0 0; line-height: var(--lh-body); color: var(--c-ink-2); }


/* --- 11. buttons --------------------------------------------------------- */

/* One button. `.c-status-btn` is the base and stays valid everywhere it is
   already used — including on <a> elements. Modifiers carry the intent:
     (default)             a choice among equals — status switches, row actions
     .is-current / --primary   the committed state, or the affirmative action
     --quiet               tertiary; recedes until hovered
     --danger              destructive, and reads that way before it is clicked */
.c-status { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

.c-status-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: var(--c-hair);
  background: var(--c-panel);
  color: var(--c-ink);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-4);
  font: inherit;
  font-size: var(--t-ui);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--c-speed) var(--c-ease),
              border-color var(--c-speed) var(--c-ease),
              color var(--c-speed) var(--c-ease);
}
.c-status-btn:hover { border-color: var(--c-green); background: var(--c-sunk); }
.c-status-btn:active { transform: translateY(.5px); }
.c-status-btn[disabled],
.c-status-btn.is-disabled { opacity: .5; cursor: not-allowed; }

.c-status-btn.is-current,
.c-status-btn--primary {
  background: var(--c-green);
  color: var(--c-on-green);
  border-color: var(--c-green);
  font-weight: 600;
}
.c-status-btn.is-current:hover,
.c-status-btn--primary:hover {
  background: var(--c-green-deep);
  border-color: var(--c-green-deep);
}

.c-status-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--c-muted);
}
.c-status-btn--quiet:hover {
  background: var(--c-sunk);
  border-color: var(--c-line);
  color: var(--c-ink);
}

.c-status-btn--danger {
  color: var(--c-red);
  border-color: var(--c-red-line);
  background: var(--c-panel);
}
.c-status-btn--danger:hover {
  background: var(--c-red-pale);
  border-color: var(--c-red);
}
.c-status-btn--danger:focus-visible { box-shadow: var(--c-ring-red); }

.c-status-btn--sm { padding: var(--sp-1) var(--sp-3); font-size: var(--t-sm); }


/* --- 12. scoreboard ------------------------------------------------------ */

.c-simbanner {
  background: var(--c-slate);
  border: 1px solid var(--c-slate-line);
  color: var(--c-slate-ink);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-6);
}

.s-hero {
  display: flex; gap: var(--sp-7); align-items: center; flex-wrap: wrap;
  background: var(--c-amber-pale);
  border: 1px solid var(--c-amber-line);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-8);
  margin-bottom: var(--sp-6);
}
.s-hero-figure {
  font-size: var(--t-3xl);
  font-weight: 700;
  color: var(--c-amber);
  letter-spacing: -.035em;
  line-height: 1;
}
.s-hero-text { flex: 1; min-width: 260px; }
.s-hero-text h1 {
  margin: 0 0 var(--sp-2);
  font-family: var(--c-serif);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  letter-spacing: .005em;
}
.s-hero-text p { margin: 0; color: var(--c-amber-ink); font-size: var(--t-ui); line-height: var(--lh-loose); }

.s-block {
  background: var(--c-panel);
  border: var(--c-hair);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
}
.s-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 860px) { .s-cols { grid-template-columns: 1fr; } }

.s-weeks { display: flex; gap: var(--sp-3); align-items: flex-end; height: 190px; }
.s-week {
  flex: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
}
.s-week-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.s-week-total {
  width: 100%; background: var(--c-green);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  position: relative; display: flex; align-items: flex-end; min-height: 3px;
}
.s-week-after { width: 100%; background: var(--c-amber); }
.s-week-n { font-size: var(--t-sm); font-weight: 700; color: var(--c-ink); }
.s-week-l { font-size: var(--t-2xs); color: var(--c-muted); }
.s-legend { margin: var(--sp-3) 0 0; font-size: var(--t-xs); color: var(--c-muted); }
.s-key {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  vertical-align: middle; margin: 0 var(--sp-1) 0 var(--sp-4);
}
.s-legend .s-key:first-child { margin-left: 0; }
.s-key--total { background: var(--c-green); }
.s-key--after { background: var(--c-amber); }

.s-row {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-2); font-size: var(--t-ui);
}
.s-row-l { width: 92px; color: var(--c-muted); flex-shrink: 0; }
.s-row-bar {
  flex: 1; height: 9px; background: var(--c-track);
  border-radius: var(--r-pill); overflow: hidden;
}
.s-row-bar i { display: block; height: 100%; background: var(--c-green); }
.s-row-bar--alt i { background: var(--c-green-mid); }
.s-row-n { width: 38px; text-align: right; font-weight: 700; color: var(--c-ink); }
.s-note { margin: var(--sp-3) 0 0; font-size: var(--t-xs); color: var(--c-muted); }

.s-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
}
.s-tile {
  background: var(--c-sunk);
  border: var(--c-hair);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.s-tile--accent { background: var(--c-amber-pale); border-color: var(--c-amber-line); }
.s-tile-n {
  display: block;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}
.s-tile--accent .s-tile-n { color: var(--c-amber); }
.s-tile-l { display: block; font-size: var(--t-sm); color: var(--c-muted); margin-top: 2px; }
.s-tile-s {
  display: block; font-size: var(--t-xs); color: var(--c-muted-2);
  margin-top: var(--sp-2); line-height: var(--lh-snug);
}
.s-tile-s code {
  font-family: var(--c-mono); font-size: .95em;
  background: var(--c-chip); color: var(--c-chip-ink);
  padding: 1px 4px; border-radius: 3px;
}


/* --- 13. forms ----------------------------------------------------------- */

.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
@media (max-width: 720px) { .f-grid { grid-template-columns: 1fr; } }

.f-grid label,
.f-inline label {
  display: flex; flex-direction: column; gap: var(--sp-1);
  font-size: var(--t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-muted);
}
.f-wide { grid-column: 1 / -1; }

.f-grid input, .f-grid select, .f-grid textarea,
.f-inline input, .f-inline select {
  font: inherit;
  font-size: var(--t-ui);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--c-ink);
  padding: var(--sp-2) var(--sp-3);
  border: var(--c-hair);
  border-radius: var(--r-sm);
  background: var(--c-field);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--c-speed) var(--c-ease),
              box-shadow var(--c-speed) var(--c-ease);
}
.f-grid textarea { resize: vertical; line-height: var(--lh-body); }
.f-grid input:hover, .f-grid select:hover, .f-grid textarea:hover { border-color: var(--c-brass); }
.f-grid input:focus, .f-grid select:focus, .f-grid textarea:focus,
.f-inline input:focus, .f-inline select:focus {
  outline: none;
  border-color: var(--c-green);
  box-shadow: var(--c-ring);
}
.f-hint {
  display: block;
  font-size: var(--t-xs);
  text-transform: none;
  letter-spacing: normal;
  color: var(--c-muted);
  line-height: var(--lh-snug);
  margin-top: var(--sp-1);
  font-weight: 400;
}
.f-check {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin-top: var(--sp-4);
  background: var(--c-sunk);
  border: var(--c-hair);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--c-speed) var(--c-ease);
}
.f-check:hover { border-color: var(--c-brass); }
.f-check input[type="checkbox"] {
  width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--c-green);
}
.f-check strong { display: block; font-size: var(--t-ui); color: var(--c-ink); margin-bottom: 2px; }
.f-check-inline {
  flex-direction: row !important; align-items: center;
  gap: var(--sp-2) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: var(--t-sm) !important;
  font-weight: 400 !important;
}
.f-inline {
  display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
}
.f-inline input, .f-inline select { width: auto; min-width: 90px; }

tr.is-inactive { opacity: .55; }


/* --- 14. motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .c-status-btn:active { transform: none; }
}


/* --- 15. dark ------------------------------------------------------------ */

/* Light is the primary design: these are bright offices with daylight on the
   screens. This block exists so a consultant whose OS is set to dark is not
   handed a glaring white page — it is a warm, low-contrast counterpart, not an
   inversion. Only tokens change; every rule above follows. */
/* No dark theme, deliberately.
   ---------------------------------------------------------------------------------
   There was one here. It shipped as a token swap over a light-first design and looked
   it: dark cards on a dark ground, form fields that read as disabled, and the selected
   radio option indistinguishable from the unselected ones. A half-built dark theme is
   worse than none, because it only appears for the people whose OS happens to prefer it
   — which is how it reached a client-facing screen without anyone choosing it.

   This console is an operations tool used in bright offices and shown in daylight
   meetings. It is designed light. `color-scheme: light` below tells the browser so, which
   also keeps native form controls, scrollbars and autofill in the light palette rather
   than letting the OS style them dark against our surfaces.

   If a dark theme is wanted later it needs designing, not deriving. */
:root { color-scheme: light; }