/* GTM Engine client portal.
   Colour comes from the validated data-viz palette (see runbooks/client-portal.md):
   categorical slots 1-3 for the charts, plus the chrome/ink roles. Light and dark are two
   selected sets of steps, not an automatic inversion. Dark is applied both by the OS
   setting and by the explicit toggle, and the toggle wins in either direction. */

:root {
  color-scheme: light;
  --plane: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f2f2ee;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --series-1: #2a78d6;   /* email */
  --series-2: #eb6834;   /* LinkedIn invites */
  --series-3: #1baf7a;   /* LinkedIn messages */
  --good: #0ca30c;
  --critical: #d03b3b;
  --accent: #2a78d6;
  --accent-ink: #ffffff;
  --shadow: 0 1px 2px rgba(11, 11, 11, .05), 0 8px 24px rgba(11, 11, 11, .04);
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232322;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --good: #0ca30c;
    --critical: #e66767;
    --accent: #3987e5;
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232322;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --good: #0ca30c;
  --critical: #e66767;
  --accent: #3987e5;
  --shadow: none;
}

* { box-sizing: border-box; }

/* Screens and panels are toggled with the hidden attribute, and most of them also carry a
   display rule (grid, flex) that would otherwise win over the browser default. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--plane);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

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

button, input, select { font: inherit; color: inherit; }

.control {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 34px;
}
.control.grow { flex: 1 1 200px; min-width: 0; }
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button { cursor: pointer; }

.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
}
.primary:disabled { opacity: .6; cursor: progress; }

.ghost {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--ink-2);
}
.ghost:hover { background: var(--surface-2); }
.ghost.small { padding: 3px 9px; font-size: 12px; }
.ghost.wide { width: 100%; margin-top: 8px; }
.ghost[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }

.icon-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  width: 34px; height: 34px; color: var(--ink-2);
}

/* --- sign in ------------------------------------------------------------- */

.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
}
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack label { font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.stack input {
  background: var(--plane); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 10px;
}
.stack .primary { margin-top: 18px; }
.hint { font-size: 12px; color: var(--muted); }
.form-error {
  margin-top: 12px; font-size: 13px; color: var(--critical);
  background: color-mix(in srgb, var(--critical) 10%, transparent);
  border-radius: 8px; padding: 8px 10px;
}
.auth-foot { margin-top: 20px; font-size: 12px; text-align: center; }

.brand { font-weight: 600; letter-spacing: -.01em; }
.brand-mark {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  border-radius: 5px; padding: 1px 5px; font-size: 12px; font-weight: 700; margin-right: 2px;
}
.auth-card .brand { display: block; margin-bottom: 22px; }

/* --- app chrome ---------------------------------------------------------- */

.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--surface);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5;
}
.topbar-left { display: flex; align-items: baseline; gap: 10px; }
.client-name { color: var(--ink-2); }

/* Operator view. Deliberately loud: you should never mistake it for a client's own portal. */
.staff-chip {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--series-2); border: 1px solid var(--series-2); border-radius: 999px;
  padding: 1px 7px;
}
#client-switch { max-width: 190px; }
body.staff .topbar { box-shadow: inset 0 -2px 0 var(--series-2); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.tabs { display: flex; gap: 2px; }
.tab {
  background: transparent; border: 0; border-radius: 8px;
  padding: 7px 12px; color: var(--ink-2);
}
.tab:hover { background: var(--surface-2); }
.tab[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 600; }

.pill {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; text-align: center;
}

.freshness { padding: 8px 20px 0; font-size: 12px; }
.banner {
  margin: 10px 20px 0; padding: 9px 12px; border-radius: 8px; font-size: 13px;
  background: color-mix(in srgb, var(--critical) 10%, transparent); color: var(--critical);
}

.view { padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 16px; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px 10px;
}
.card-head .muted { font-size: 12px; }
.card-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* --- stat tiles ---------------------------------------------------------- */

.tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
}
.tile-label { font-size: 12px; color: var(--ink-2); }
.tile-value { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }
.tile-note { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* --- charts -------------------------------------------------------------- */

.chart { position: relative; padding: 0 16px 12px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .band:hover { fill: var(--ink); fill-opacity: .04; }

.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: none; }
.swatch.s1 { background: var(--series-1); }
.swatch.s2 { background: var(--series-2); }
.swatch.s3 { background: var(--series-3); }

.tooltip {
  position: absolute; pointer-events: none; z-index: 3;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12); padding: 8px 10px; font-size: 12px;
  min-width: 130px; transform: translate(-50%, -100%);
}
.tooltip-day { color: var(--ink-2); margin-bottom: 4px; }
.tooltip-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tooltip-row b { font-variant-numeric: tabular-nums; }
.tooltip-key { display: inline-flex; align-items: center; gap: 5px; }

.empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* --- tables -------------------------------------------------------------- */

.table-wrap { overflow-x: auto; padding: 0 16px 14px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: right; padding: 7px 10px; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--grid);
}
tbody tr { border-bottom: 1px solid var(--grid); }
tbody tr:last-child { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; }
.name-cell { display: flex; flex-direction: column; }
.name-cell small { color: var(--muted); }

.meter { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.meter-track {
  width: 56px; height: 6px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--series-1) 18%, transparent);
}
.meter-fill { height: 100%; background: var(--series-1); border-radius: 3px; }

.chip {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border);
}

/* --- reports ------------------------------------------------------------- */

.reports { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; align-items: start; }
.reports-list { padding-bottom: 8px; }
.reports-list .rows { padding: 0 10px 4px; }
.report-reader { padding: 22px 26px; min-height: 320px; }

.report-row { display: block; width: 100%; text-align: left; background: transparent; border: 0;
  border-radius: 8px; padding: 9px 10px; border-bottom: 1px solid var(--grid); }
.report-row:hover { background: var(--surface-2); }
.report-row[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* These are spans inside a button, so they need to be told to stack. */
.report-title, .report-meta, .report-summary { display: block; }
.report-title { font-weight: 600; }
.report-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.report-summary { font-size: 12px; color: var(--ink-2); margin-top: 3px; }

/* Rendered markdown. The renderer escapes first and emits only these tags. */
.prose { max-width: 760px; }
.prose h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.01em; }
.prose h2 { font-size: 17px; margin: 26px 0 6px; }
.prose h3 { font-size: 14px; margin: 20px 0 4px; }
.prose h4 { font-size: 13px; margin: 16px 0 4px; color: var(--ink-2); }
.prose p { margin: 9px 0; }
.prose ul, .prose ol { margin: 9px 0; padding-left: 22px; }
.prose li { margin: 3px 0; }
.prose strong { font-weight: 600; }
.prose code { background: var(--surface-2); border-radius: 4px; padding: 1px 4px; font-size: 12px; }
.prose pre { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { margin: 12px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--grid); color: var(--ink-2); }
.prose hr { border: 0; border-top: 1px solid var(--grid); margin: 22px 0; }
.prose a { color: var(--accent); }
.prose .table-scroll { overflow-x: auto; margin: 12px 0; }
.prose table { font-size: 13px; }
.prose th, .prose td { padding: 6px 10px; text-align: left; }
.prose td.r, .prose th.r { text-align: right; font-variant-numeric: tabular-nums; }
.prose thead th { border-bottom: 1px solid var(--grid); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.prose tbody tr { border-bottom: 1px solid var(--grid); }
.prose tbody tr:last-child { border-bottom: 0; }

/* --- inbox --------------------------------------------------------------- */

.inbox { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; align-items: start; }
.inbox-list { padding: 12px; position: sticky; top: 62px; max-height: calc(100vh - 78px); display: flex; flex-direction: column; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
.rows { overflow-y: auto; flex: 1; margin: 0 -6px; }

.row {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  border-radius: 8px; padding: 9px 10px; border-bottom: 1px solid var(--grid);
}
.row:hover { background: var(--surface-2); }
.row[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.row-top { display: flex; align-items: baseline; gap: 6px; }
.row-name { font-weight: 600; }
.row-when { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.row-company { font-size: 12px; color: var(--ink-2); }
.row-preview {
  font-size: 12px; color: var(--muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row-meta { display: flex; gap: 6px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.dot.hidden { visibility: hidden; }

.inbox-detail { padding: 16px 18px; min-height: 320px; }
.contact-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.contact-head h2 { font-size: 17px; }
.contact-meta { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.contact-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.thread { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.msg { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; max-width: 640px; }
.msg.inbound { background: var(--surface-2); border-color: transparent; }
.msg.outbound { margin-left: auto; }
.msg-head { display: flex; gap: 8px; align-items: baseline; font-size: 11px; color: var(--muted); }
.msg-subject { font-weight: 600; font-size: 13px; margin-top: 3px; }
.msg-body { margin-top: 5px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }

.status-good { color: var(--good); }
.status-bad { color: var(--critical); }

@media (max-width: 860px) {
  .inbox, .reports { grid-template-columns: 1fr; }
  .inbox-list { position: static; max-height: none; }
  .topbar { gap: 10px; }
  .tabs { order: 3; width: 100%; }
}