/* ---------------------------------------------------------------------------
   TechConnect admin — design tokens.

   The console chrome is deliberately monochrome: greys carry structure, and the
   one accent hue is reserved for the active state, primary actions and data
   marks, so colour always means something. Chart ink and the series hue come
   from the validated reference palette (re-validated against the surfaces
   below); status colours are the fixed status palette and always ship with a
   text label, never colour alone.

   Dark values are declared twice on purpose: the media query follows the OS,
   the [data-theme] scope follows the in-app toggle, and the toggle must win in
   both directions.
--------------------------------------------------------------------------- */
/* Space Grotesk, self-hosted as a variable font (one file covers 300–700) so
   the console makes no third-party request and still works offline. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --plane:      #fafaf9;   /* page background */
  --surface-1:  #ffffff;   /* cards, chart surface */
  --surface-2:  #f5f5f3;   /* headers, insets, tracks */
  --surface-3:  #eeeeeb;   /* hover on inset */
  --sidebar:    #fbfbfa;

  /* Text is black rather than grey. The three steps stay only far enough apart
     to keep a heading readable against its sub-line — all three sit in the
     black family, none of them are the old mid-greys. */
  --text-1:  #000000;
  --text-2:  #1a1a16;
  --text-3:  #3a3934;      /* muted: micro-labels, axes, meta */

  --line:        rgba(20, 20, 15, 0.10);   /* hairline */
  --line-strong: rgba(20, 20, 15, 0.18);   /* control borders */
  --grid:        #ebebe6;
  --axis:        #d4d3cc;

  --accent:     #2a78d6;
  --accent-ink: #ffffff;
  --accent-wash: rgba(42, 120, 214, 0.09);

  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;

  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(20, 20, 15, .04);
  --shadow-md: 0 2px 6px rgba(20, 20, 15, .06), 0 12px 32px rgba(20, 20, 15, .07);
  --shadow-lg: 0 8px 24px rgba(20, 20, 15, .10), 0 32px 64px rgba(20, 20, 15, .14);

  --sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:      #0c0c0b;
    --surface-1:  #161615;
    --surface-2:  #1f1f1e;
    --surface-3:  #292928;
    --sidebar:    #111110;

    /* Mirror of the light theme's black: black text would be invisible here, so
       dark mode takes the same "maximum legibility" treatment inverted. */
    --text-1:  #ffffff;
    --text-2:  #ebeae5;
    --text-3:  #c2c0b8;

    --line:        rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --grid:        #262625;
    --axis:        #353533;

    --accent:      #3987e5;
    --accent-wash: rgba(57, 135, 229, 0.14);

    --shadow-sm: none;
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .65);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:      #0c0c0b;
  --surface-1:  #161615;
  --surface-2:  #1f1f1e;
  --surface-3:  #292928;
  --sidebar:    #111110;

  /* Mirror of the light theme's black — see the media-query block above. */
  --text-1:  #ffffff;
  --text-2:  #ebeae5;
  --text-3:  #c2c0b8;

  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --grid:        #262625;
  --axis:        #353533;

  --accent:      #3987e5;
  --accent-wash: rgba(57, 135, 229, 0.14);

  --shadow-sm: none;
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .65);
}

* { box-sizing: border-box; }

/* `.login` and `.shell` set an author `display`, which would otherwise beat the
   UA stylesheet's `[hidden] { display: none }` and leave both panels on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  background: var(--plane);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.017em; }
h1 { font-size: 23.5px; }
h2 { font-size: 17.5px; }
h3 { font-size: 15.5px; }
h4 { font-size: 15.5px; }
p { margin: 0; }

.muted { color: var(--text-3); }
.tnum { font-variant-numeric: tabular-nums; }

kbd {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-3);
}

code {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: var(--r-xs);
}

svg.ico { width: 17.5px; height: 17.5px; flex: 0 0 auto; display: block; }

/* --- Form controls -------------------------------------------------------- */
input, select, textarea {
  font: inherit;
  font-size: 15.5px;
  color: var(--text-1);
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  width: 100%;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:hover, select:hover, textarea:hover { border-color: var(--text-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { resize: vertical; min-height: 84px; line-height: 1.55; }

select {
  appearance: none; padding-right: 26px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 53%, calc(100% - 10px) 53%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  color: var(--text-2);
}

.field label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text-2); margin-bottom: 5px;
}
.field + .field { margin-top: 13px; }
.form-error { margin-top: 11px; color: var(--critical); font-size: 14px; font-weight: 500; }

/* Segmented control — for short, mutually exclusive filters. */
.segmented {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.segmented button {
  font: inherit; font-size: 14px; font-weight: 500;
  border: 0; background: transparent; color: var(--text-2);
  padding: 4px 10px; border-radius: var(--r-xs); cursor: pointer;
  transition: background .12s, color .12s;
}
.segmented button:hover { color: var(--text-1); }
.segmented button[aria-pressed="true"] {
  background: var(--surface-1);
  color: var(--text-1);
  box-shadow: var(--shadow-sm);
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  font: inherit; font-size: 15px; font-weight: 500;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  color: var(--text-1);
  padding: 5px 11px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: background .12s, border-color .12s, opacity .12s;
}
.btn svg.ico { width: 16.5px; height: 16.5px; color: var(--text-3); }
.btn:hover { background: var(--surface-2); }
.btn:hover svg.ico { color: var(--text-2); }
.btn:active { transform: translateY(.5px); }

.btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.btn-primary svg.ico { color: currentColor; }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-primary:hover svg.ico { color: currentColor; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text-1); }

.btn-danger { color: var(--critical); border-color: transparent; background: transparent; }
.btn-danger svg.ico { color: currentColor; }
.btn-danger:hover { background: color-mix(in srgb, var(--critical) 11%, transparent); }
.btn-danger-solid { background: var(--critical); border-color: transparent; color: #fff; }
.btn-danger-solid:hover { background: var(--critical); filter: brightness(1.08); }

.btn-sm { padding: 3px 8px; font-size: 14px; }
.btn-block { width: 100%; justify-content: center; margin-top: 16px; padding: 8px; font-size: 15.5px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.icon-btn {
  font: inherit;
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-3); border-radius: var(--r-sm);
  padding: 5px 7px; cursor: pointer;
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-1); }

/* --- Login ---------------------------------------------------------------- */
.login { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; }
@media (max-width: 900px) { .login { grid-template-columns: 1fr; } .login-aside { display: none; } }

.login-aside {
  position: relative; overflow: hidden;
  background: #0f1b2c;
  color: #fff;
  display: grid; place-items: center;
  padding: 56px;
}
/* Two soft accent washes give the panel depth without any image asset. */
.login-aside::before,
.login-aside::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px);
}
.login-aside::before { width: 460px; height: 460px; background: rgba(42, 120, 214, .55); top: -120px; left: -110px; }
.login-aside::after  { width: 380px; height: 380px; background: rgba(28, 92, 171, .5); bottom: -130px; right: -90px; }

.login-aside-inner { position: relative; max-width: 370px; }
.brand-invert .brand-mark { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.brand-invert strong { color: #fff; }

.login-headline { font-size: 34px; line-height: 1.18; letter-spacing: -0.028em; margin-top: 44px; }
.login-sub { margin-top: 13px; color: rgba(255, 255, 255, .88); font-size: 16.5px; line-height: 1.6; }
.login-points { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 15px; }
.login-points li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 15.5px; color: rgba(255, 255, 255, .97); line-height: 1.5;
}
.login-points svg.ico { width: 17.5px; height: 17.5px; margin-top: 2px; opacity: .8; }

.login-main { display: grid; place-items: center; padding: 40px 24px; }
.login-card { width: min(348px, 100%); }
.login-card-sub { margin-top: 6px; margin-bottom: 26px; font-size: 15.5px; }
.login-card .hint {
  font-size: 13.5px; margin-top: 20px; text-align: center;
  line-height: 1.8; color: var(--text-3);
}

.brand { display: flex; align-items: center; gap: 9px; }

/* The logo is navy and red on transparency, so on the blue sign-in panel it
   sits on a white plate rather than being tinted (which would lose the red). */
.brand-plate {
  display: inline-flex; padding: 14px 18px; border-radius: 14px;
  background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.brand-plate img { display: block; width: 210px; height: auto; }

.brand-logo { width: 150px; height: auto; display: block; }
/* Dark mode: the navy mark needs lifting off a near-black rail. */
:root[data-theme="dark"] .brand-logo,
:root:not([data-theme="light"]) .brand-logo {
  background: #fff; border-radius: 7px; padding: 5px 7px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-logo { background: none; padding: 0; }
}
.brand-sub {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-left: 2px;
}
.brand-mark {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .01em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-text strong { font-size: 15.5px; letter-spacing: -0.01em; }
.brand-text span { font-size: 12.5px; }

/* --- Shell ---------------------------------------------------------------- */
/* Rail is sized to hold the nav labels and the ⌘K trigger on one line at the
   current type size — narrower and the trigger wraps. */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100dvh; }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .sidebar { display: none; } }

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 14px 10px 10px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh;
}
.sidebar > .brand { padding: 2px 6px 0; }

/* Command trigger doubles as the "this app has a keyboard" signal. */
.cmd-trigger {
  font: inherit; font-size: 14px;
  display: flex; align-items: center; gap: 7px; width: 100%;
  margin-top: 16px; padding: 5px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cmd-trigger:hover { background: var(--surface-3); border-color: var(--line-strong); }
.cmd-trigger span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-trigger kbd { margin-left: auto; flex: 0 0 auto; background: transparent; border-color: var(--line-strong); }

#nav { display: flex; flex-direction: column; gap: 1px; margin-top: 16px; }
.nav-group {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); padding: 0 8px; margin: 15px 0 5px;
}
.nav-group:first-child { margin-top: 2px; }

.nav-item {
  position: relative;
  font: inherit; font-size: 15px; font-weight: 450;
  text-align: left; background: none; border: 0;
  border-radius: var(--r-sm);
  padding: 5px 8px;
  color: var(--text-2);
  cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  transition: background .1s, color .1s;
}
.nav-item svg.ico { width: 16.5px; height: 16.5px; color: var(--text-3); transition: color .1s; }
.nav-item:hover { background: var(--surface-2); color: var(--text-1); }
.nav-item:hover svg.ico { color: var(--text-2); }
.nav-item[aria-current="page"] { background: var(--accent-wash); color: var(--accent); font-weight: 550; }
.nav-item[aria-current="page"] svg.ico { color: var(--accent); }
/* A 2px rail on the active item reads faster than a fill alone. */
.nav-item[aria-current="page"]::before {
  content: ""; position: absolute; left: -10px; top: 5px; bottom: 5px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--accent);
}

.pill {
  margin-left: auto;
  background: var(--critical); color: #fff;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  padding: 0 5px; line-height: 16px; min-width: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}

.sidebar-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 1px; }
.account { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.account-mail {
  font-size: 13.5px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto;
}
.avatar {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .02em;
}
.theme-btn { font-size: 13.5px; padding: 5px 7px; }

main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 52px; padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--plane) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.topbar h2 { line-height: 1.2; }
.topbar-sub { font-size: 13.5px; margin-top: 1px; }
.topbar-actions { display: flex; gap: 6px; align-items: center; }

.view { padding: 18px 22px 56px; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-pad { padding: 15px 16px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.card-head h3 { letter-spacing: -0.012em; }
.card-head p { font-size: 13.5px; margin-top: 2px; }

.grid { display: grid; gap: 12px; }
/* Six tiles, so the column count is pinned to divisors of six — auto-fit would
   land on five and orphan the last one. */
.stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px)  { .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1560px) { .stat-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.two-col { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1040px) { .two-col { grid-template-columns: 1fr; } }

/* --- Stat tile ------------------------------------------------------------ */
/* The value leads; the label and the week-over-week delta support it, and a
   sparkline sits underneath so the number carries its own recent history. */
.stat { padding: 13px 14px 0; display: flex; flex-direction: column; }
.stat-label {
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3);
}
.stat-main { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; }
.stat-value {
  font-size: 30.5px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-sub { font-size: 13.5px; color: var(--text-3); margin-top: 5px; }
.stat.is-flagged .stat-value { color: var(--critical); }
/* Bleeds to the tile edges but keeps a hair of breathing room at the bottom so
   a flat series doesn't read as a border. Deliberately quiet — it shows shape,
   the value and delta carry the numbers. */
.stat-spark { margin: 12px -14px 0; padding-bottom: 3px; height: 28px; }

.delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 5px; border-radius: var(--r-xs);
  color: var(--text-3); background: var(--surface-2);
}
.delta.is-up { color: var(--good); background: color-mix(in srgb, var(--good) 11%, transparent); }
.delta.is-down { color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); }

/* --- Tables --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }

thead th {
  /* Offsets resolve against .table-wrap (its overflow-x makes it the scroll
     container), not the viewport — so this must be 0 or it lands on row 1. */
  position: sticky; top: 0; z-index: 4;
  background: var(--surface-2);
  text-align: left; padding: 7px 14px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3); font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid var(--line);
  user-select: none;
}
thead th.sortable { cursor: pointer; }
thead th.sortable:hover { color: var(--text-1); }
thead th .sort-caret { opacity: 0; margin-left: 3px; font-size: 10.5px; }
thead th[aria-sort] { color: var(--text-1); }
thead th[aria-sort] .sort-caret { opacity: 1; }

tbody td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .09s; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.is-clickable { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { text-align: right; white-space: nowrap; }
td.actions > * + * { margin-left: 3px; }
/* Row controls stay quiet until the row is under the cursor. */
td.actions .btn { opacity: .55; transition: opacity .1s; }
tbody tr:hover td.actions .btn, td.actions .btn:focus-visible { opacity: 1; }

.cell-title { font-weight: 500; color: var(--text-1); }
.cell-sub { font-size: 13.5px; color: var(--text-3); margin-top: 1px; }
.cell-person { display: flex; align-items: center; gap: 9px; }
.cell-mono { font-family: var(--mono); font-size: 13.5px; color: var(--text-2); }
.thumb {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--r-sm); object-fit: cover;
  border: 1px solid var(--line); background: var(--surface-2);
}
.thumb-empty { display: grid; place-items: center; color: var(--text-3); }
.thumb-empty svg.ico { width: 16px; height: 16px; }

.table-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--text-3);
}
.pager { display: flex; gap: 5px; align-items: center; }

/* --- Badges: colour + label, never colour alone --------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  padding: 2px 7px; border-radius: var(--r-xs);
  border: 1px solid transparent;
  color: var(--text-2); background: var(--surface-2);
  white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 5px; }
.badge-good     { color: var(--good);     background: color-mix(in srgb, var(--good) 11%, transparent); }
.badge-warning  { color: var(--warning);  background: color-mix(in srgb, var(--warning) 15%, transparent); }
.badge-serious  { color: var(--serious);  background: color-mix(in srgb, var(--serious) 13%, transparent); }
.badge-critical { color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); }
.badge-neutral  { color: var(--text-2);   background: var(--surface-2); border-color: var(--line); }

/* --- Filters -------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.search-box { position: relative; }
.search-box svg.ico {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none; width: 16.5px; height: 16.5px;
}
/* Right padding reserves room for the "/" hint so it never sits on the placeholder. */
.search-box input { width: 258px; padding-left: 29px; padding-right: 28px; }
.search-box kbd { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search-box input:focus + kbd, .search-box input:not(:placeholder-shown) + kbd { display: none; }
.filters select { width: auto; min-width: 132px; }
.filters .spacer { margin-left: auto; }

/* --- Charts --------------------------------------------------------------- */
.chart { width: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .tick { fill: var(--text-3); font-size: 11px; }
.chart .bar { fill: var(--accent); transition: opacity .1s; }
.chart .bar-hit { fill: transparent; cursor: pointer; }
.chart g.bar-group:hover .bar { opacity: .72; }
.chart .value-label { fill: var(--text-2); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.spark { width: 100%; height: 100%; display: block; }
.spark .spark-fill { fill: var(--accent); opacity: .09; }
.spark .spark-line { fill: none; stroke: var(--accent); stroke-width: 1.25; opacity: .8; stroke-linejoin: round; stroke-linecap: round; }

/* Horizontal category bars — a ranked list, so labels sit inline with values. */
.hbar + .hbar { margin-top: 11px; }
.hbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.hbar-label { font-size: 14px; color: var(--text-2); }
.hbar-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hbar-track { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--accent); border-radius: 3px; }

.activity { list-style: none; margin: 0; padding: 0; }
.activity li {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.activity li:last-child { border-bottom: 0; }
.activity .act-icon {
  display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-3);
}
.activity .act-icon svg.ico { width: 14px; height: 14px; }
.activity .when { color: var(--text-3); font-size: 13.5px; white-space: nowrap; margin-left: auto; }

/* --- Tooltip -------------------------------------------------------------- */
.tooltip {
  position: fixed; pointer-events: none; z-index: 200;
  background: var(--text-1); color: var(--plane);
  padding: 4px 8px; border-radius: var(--r-xs);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transform: translate(-50%, -134%);
  box-shadow: var(--shadow-md);
}

/* --- Command palette ------------------------------------------------------ */
.cmd-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12, 12, 11, .42);
  backdrop-filter: blur(2px);
  display: grid; place-items: start center; padding: 12vh 20px 20px;
  animation: fade .1s ease-out;
}
.cmd {
  width: min(560px, 100%);
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop .14s cubic-bezier(.32, .72, 0, 1);
}
.cmd-input-row { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cmd-input-row svg.ico { color: var(--text-3); }
.cmd-input-row input {
  border: 0; background: none; padding: 0; font-size: 17px;
  box-shadow: none !important;
}
.cmd-results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.cmd-group {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); padding: 8px 8px 4px;
}
.cmd-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 15.5px; text-align: left;
  padding: 7px 8px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-1); cursor: pointer;
}
.cmd-item svg.ico { color: var(--text-3); }
.cmd-item .cmd-meta { margin-left: auto; font-size: 13px; color: var(--text-3); }
.cmd-item[data-active="true"] { background: var(--accent-wash); color: var(--accent); }
.cmd-item[data-active="true"] svg.ico { color: var(--accent); }
.cmd-empty { padding: 26px; text-align: center; color: var(--text-3); font-size: 15px; }
.cmd-foot {
  display: flex; gap: 14px; align-items: center;
  padding: 8px 14px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-3);
}
.cmd-foot span { display: inline-flex; align-items: center; gap: 5px; }

/* --- Drawer --------------------------------------------------------------- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(12, 12, 11, .34);
  animation: fade .12s ease-out;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(452px, 100vw);
  background: var(--surface-1);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: slide-in .2s cubic-bezier(.32, .72, 0, 1);
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.drawer-body { padding: 16px; overflow-y: auto; flex: 1; }
.drawer.drawer-wide { width: min(620px, 100vw); }
.drawer-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--line);
  background: var(--surface-1);
}

/* --- Composer form -------------------------------------------------------- */
.form-section + .form-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-section > h4 {
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 11px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.char-count { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.char-count.is-full { color: var(--warning); }

/* Audience picker: three mutually exclusive cards rather than a bare select,
   because the choice changes who the offer reaches. */
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 11px 12px;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.choice svg.ico { color: var(--text-3); margin-bottom: 3px; }
.choice strong { font-size: 13.5px; font-weight: 600; }
.choice span { font-size: 11.5px; color: var(--text-3); line-height: 1.35; }
.choice:hover { border-color: var(--text-3); }
.choice[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 1px var(--accent);
}
.choice[aria-checked="true"] svg.ico,
.choice[aria-checked="true"] strong { color: var(--accent); }

/* --- Image dropzone ------------------------------------------------------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 26px 18px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  transition: border-color .12s, background .12s;
}
.dropzone:hover { border-color: var(--accent); background: var(--accent-wash); }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-wash); }
.dropzone svg.ico { width: 22px; height: 22px; color: var(--text-3); margin-bottom: 3px; }
.dropzone strong { font-size: 13.5px; }
.dropzone span { font-size: 11.5px; color: var(--text-3); }

.image-preview { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.image-preview img { display: block; width: 100%; max-height: 190px; object-fit: cover; background: var(--surface-2); }
.image-meta {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; font-size: 11.5px; color: var(--text-3);
  border-top: 1px solid var(--line); background: var(--surface-1);
}
.image-meta .spacer { margin-left: auto; }

/* --- Live preview of the app card ----------------------------------------- */
.preview-frame {
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.offer-card {
  border-radius: 14px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 10%, var(--surface-1)),
    color-mix(in srgb, var(--accent) 3%, var(--surface-1)));
}
.offer-card img { display: block; width: 100%; height: 118px; object-fit: cover; }
.offer-card-body { padding: 13px 14px 14px; }
.offer-perk {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; margin-bottom: 9px;
}
.offer-card h5 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.012em; }
.offer-card p { margin-top: 4px; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.offer-card-foot { display: flex; align-items: center; margin-top: 13px; }
.offer-card-foot .fake-btn {
  margin-left: auto; padding: 6px 14px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600;
}
.offer-card-foot .expiry { font-size: 11.5px; color: var(--text-3); }

/* Notification preview — mirrors the Alerts tab row in the app. */
.notif-preview {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 13px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.notif-icon {
  display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent-wash); color: var(--accent);
}
.notif-icon svg.ico { width: 15px; height: 15px; }
.notif-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.notif-body { font-size: 13px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.notif-image {
  display: block; width: 100%; max-height: 150px; object-fit: cover;
  border-radius: var(--r-sm); margin-top: 9px;
}
.notif-when { font-size: 12px; color: var(--text-3); white-space: nowrap; }

.drawer-section + .drawer-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.drawer-section > h4 {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.kv { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px 12px; font-size: 15px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--text-1); }

.profile-head { display: flex; gap: 12px; align-items: center; }
.profile-head .avatar { width: 40px; height: 40px; flex-basis: 40px; font-size: 15.5px; }
.profile-head h4 { font-size: 17.5px; letter-spacing: -0.015em; }
.profile-head p { font-size: 14px; margin-top: 2px; }

/* Trust Score breakdown — the four components that make up the 0..100 total. */
.trust-total { display: flex; align-items: baseline; gap: 7px; margin-bottom: 13px; }
.trust-total b { font-size: 29.5px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.trust-total span { font-size: 13.5px; }
.trust-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13.5px; }
.trust-row + .trust-row { margin-top: 9px; }
.trust-row .trust-track { grid-column: 1 / -1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.trust-row .trust-fill { height: 100%; background: var(--accent); border-radius: 2px; }
.trust-row .trust-val { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }

.mini-list { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.mini-list li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 9px; align-items: center; }
.mini-list li:last-child { border-bottom: 0; }
.mini-list .mini-meta { margin-left: auto; color: var(--text-3); font-size: 13.5px; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  font-size: 13px; padding: 1px 7px; border-radius: var(--r-xs);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
}

/* --- Modal ---------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12, 12, 11, .44);
  backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 24px;
  animation: fade .1s ease-out;
}
.modal {
  width: min(384px, 100%);
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  animation: pop .14s cubic-bezier(.32, .72, 0, 1);
}
.modal-icon {
  display: grid; place-items: center; margin-bottom: 12px;
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--critical) 12%, transparent);
  color: var(--critical);
}
.modal-icon svg.ico { width: 20px; height: 20px; }
.modal h3 { font-size: 17px; letter-spacing: -0.015em; }
.modal p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.modal-actions { display: flex; gap: 7px; margin-top: 18px; justify-content: flex-end; }

/* --- Toasts --------------------------------------------------------------- */
.toast-stack {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 120; display: flex; flex-direction: column; gap: 7px; align-items: center;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-1); color: var(--text-1);
  border: 1px solid var(--line-strong);
  padding: 8px 13px; border-radius: var(--r-md); font-size: 15px; font-weight: 500;
  box-shadow: var(--shadow-md);
  animation: rise .16s cubic-bezier(.32, .72, 0, 1);
}
.toast svg.ico { width: 16.5px; height: 16.5px; }
.toast.is-good svg.ico { color: var(--good); }
.toast.is-error { border-color: color-mix(in srgb, var(--critical) 42%, transparent); }
.toast.is-error svg.ico { color: var(--critical); }

/* --- States --------------------------------------------------------------- */
.empty { padding: 44px 24px; text-align: center; }
.empty svg.ico { width: 26px; height: 26px; margin: 0 auto 9px; color: var(--text-3); opacity: .6; }
.empty strong { display: block; color: var(--text-2); font-size: 15.5px; font-weight: 600; margin-bottom: 3px; }
.empty span { font-size: 14px; color: var(--text-3); }

/* Skeletons stand in for content so the layout does not jump when data lands. */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.25s linear infinite;
  border-radius: var(--r-xs);
  height: 10px;
}
.skeleton-row { display: flex; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.skeleton-row .skeleton:nth-child(1) { flex: 2.2; }
.skeleton-row .skeleton:nth-child(2) { flex: 1.2; }
.skeleton-row .skeleton:nth-child(3) { flex: 1; }
.skeleton-row .skeleton:nth-child(4) { flex: .65; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } }
@keyframes slide-in { from { transform: translateX(100%); } }

.form-grid { display: grid; gap: 13px; max-width: 500px; }