/* ============================================================
   CIRCA PROPERTIES — Brand Layer
   Sits on top of theme.css. Re-maps the palette tokens to the
   Circa identity (violet #372675 + accent blue #73a1eb) without
   touching a single structural rule.
   ============================================================ */

:root {
  /* ---- Circa palette, sampled from teamcirca.com ----
     #372675 primary violet · #3F1F71 deep violet · #73A1EB accent blue
     (their button and link colour) · #EEEEEE neutral. No teal, no mint —
     those were not theirs. */
  --circa-violet:      #372675;
  --circa-violet-deep: #3f1f71;
  --circa-violet-soft: #4a3494;
  --circa-blue:        #73a1eb;   /* accent — buttons, links, active state */
  --circa-blue-deep:   #4a7fd4;   /* accent on light ground, for contrast */
  --circa-lilac:       #a99ad8;
  --circa-neutral:     #eeeeee;

  /* map the design-system tokens onto that palette */
  --color-navy:        #372675;
  --color-navy-deep:   #2a1c5e;
  --color-blue:        #5B45A8;
  --color-blue-light:  #a99ad8;
  --color-blue-pale:   rgba(115, 161, 235, 0.16);

  --color-deep-violet: #73a1eb;
  --color-violet-pale: rgba(115, 161, 235, 0.12);

  --color-steel-accent: #33295c;
  --gradient-cosmic-a: radial-gradient(circle closest-corner at 10% 50%, rgba(74,52,148,0.55), rgba(0,0,0,0) 55%);
  --gradient-cosmic-b: linear-gradient(90deg, #2a1c5e, #4a3494 50%, #73a1eb);
}

/* Dark surfaces — violet-tinted, scoped so they never leak into light. */
:root:not([data-theme="light"]) {
  --color-blue-light: #9fc0f2;
}

[data-theme="light"] {
  --color-blue:       #372675;
  --color-blue-light: #4a7fd4;
  --color-blue-pale:  #eef3fd;
  --color-navy:       #372675;
  --color-navy-deep:  #2a1c5e;
  --color-deep-violet:#4a7fd4;
  --color-violet-pale:rgba(115, 161, 235, 0.10);
  --ticker-bg:        #372675;
  --ticker-text:      #a9c6f5;
}

/* ---- Brand lockup in the topbar ---- */
.portal-topbar .brand-mark {
  background: linear-gradient(135deg, var(--circa-violet), var(--circa-blue));
  color: #fff;
}
/* Explicit box so the wordmark never gets squeezed by the flex rail.
   Ink aspect of the supplied asset is 374:100 — sizes below preserve it
   exactly. The mark itself is never altered, only swapped between the
   white and Circa-violet renderings of the same file. */
.portal-topbar a.brand { flex: 0 0 auto; }
.portal-topbar .brand-text { flex: 0 0 auto; min-width: 0; }
.circa-wordmark {
  display: block; flex: 0 0 auto;
  height: 22px; width: 82px; max-width: none;
  content: url('/assets/circa-logo.png');           /* white — dark rail */
}
[data-theme="light"] .circa-wordmark {
  content: url('/assets/circa-logo-violet.png');    /* #372675 — light rail */
}
@media (max-width: 900px) { .circa-wordmark { height: 19px; width: 71px; } }

/* ---- Trust chrome: every AI-authored surface is marked, sourced, reviewable ---- */
.ai-block {
  border-left: 3px solid var(--circa-blue);
  background: var(--glass-bg);
  border-radius: 4px;
  padding: 14px 16px;
}
.ai-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 8.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--circa-blue); border: 1px solid rgba(115, 161, 235, 0.35);
  background: rgba(115, 161, 235, 0.10); padding: 2px 7px; border-radius: 2px;
}
.ai-tag.human  { color: var(--color-green); border-color: rgba(111,165,126,0.40); background: var(--color-green-bg); }
.ai-tag.review { color: var(--color-amber); border-color: rgba(201,146,69,0.40);  background: var(--color-amber-bg); }

.cite {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  color: var(--color-blue-light); text-decoration: none;
  border-bottom: 1px dotted currentColor; padding-bottom: 1px;
}
.cite:hover { color: var(--circa-blue); }
.cite-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-soft); }

/* confidence meter */
.conf { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-muted); }
.conf-bar { width: 46px; height: 4px; border-radius: 2px; background: var(--color-border); overflow: hidden; }
.conf-bar i { display: block; height: 100%; background: var(--color-green); }
.conf-bar.mid i { background: var(--color-amber); }
.conf-bar.low i { background: var(--color-red); }

/* ---- Simulated-data banner ---- */
.sim-banner {
  background: rgba(201,146,69,0.10);
  border: 1px solid rgba(201,146,69,0.30);
  border-radius: 3px;
  padding: 8px 14px;
  font-size: 11px; color: var(--color-text-muted);
  margin-bottom: 18px; letter-spacing: .2px;
}
.sim-banner b { color: var(--color-amber); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; font-size: 9.5px; }

/* ---- SLA clock pills ---- */
.sla { font-weight: 800; font-size: 10px; letter-spacing: .8px; padding: 2px 7px; border-radius: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sla.ok    { color: var(--color-green); background: var(--color-green-bg); }
.sla.warn  { color: var(--color-amber); background: var(--color-amber-bg); }
.sla.late  { color: var(--color-red);   background: var(--color-red-bg); }

/* ---- Generic squared chip (institutional layer) ---- */
.chip {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 1.3px;
  text-transform: uppercase; padding: 3px 7px; border-radius: 2px;
  background: var(--color-blue-pale); color: var(--color-blue-light);
  border: 1px solid var(--color-border);
}
.chip.teal  { background: rgba(115, 161, 235, 0.12); color: var(--circa-blue);  border-color: rgba(115, 161, 235, 0.30); }
.chip.green { background: var(--color-green-bg); color: var(--color-green); border-color: rgba(111,165,126,0.30); }
.chip.amber { background: var(--color-amber-bg); color: var(--color-amber); border-color: rgba(201,146,69,0.30); }
.chip.red   { background: var(--color-red-bg);   color: var(--color-red);   border-color: rgba(201,107,87,0.30); }
.chip.grey  { background: var(--color-border-soft); color: var(--color-text-muted); }

/* ---- KPI tile (single scale, institutional) ---- */
.kpi-row { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; }
.kpi { background: var(--color-bg-2); padding: 16px 18px; }
.kpi .v { font-size: 24px; font-weight: 700; letter-spacing: -.6px; color: var(--color-cloud-whisper); font-variant-numeric: tabular-nums; line-height: 1; }
.kpi .v.good { color: var(--color-green); } .kpi .v.warn { color: var(--color-amber); } .kpi .v.bad { color: var(--color-red); }
.kpi .l { font-size: 8.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted); margin-top: 9px; }
.kpi .s { font-size: 10.5px; color: var(--color-slate-hint); margin-top: 4px; }
.kpi a { text-decoration: none; color: inherit; }

/* ---- Section heading ---- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 30px 0 12px; flex-wrap: wrap; }
.sec-head h2 { font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: var(--color-cloud-whisper); margin: 0; }
.sec-head .eyebrow { font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--color-blue-light); }
.sec-head p { font-size: 12px; color: var(--color-text-muted); margin: 4px 0 0; max-width: 760px; line-height: 1.55; }

/* ---- Tables (institutional) ---- */
table.ci { width: 100%; border-collapse: collapse; font-size: 12px; }
table.ci thead th {
  background: var(--color-navy); color: #fff;
  font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 8px 10px; text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.ci tbody td { padding: 7px 10px; border-bottom: 1px solid var(--color-border-soft); vertical-align: top; }
table.ci tbody tr:hover { background: var(--glass-bg-hover); }
table.ci .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-wrap { border: 1px solid var(--color-border); border-radius: 4px; overflow: auto; background: var(--color-bg-2); max-width: 100%; }

/* ---- Panel ---- */
.panel { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 4px; padding: 20px 22px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.panel-head h3 { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-text-muted); margin: 0; }

/* ---- Mobile fit ---- */
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .sec-head { margin-top: 22px; }
}

/* ---- Page hero, Circa violet ---- */
.page-hero {
  background-image:
    radial-gradient(circle closest-corner at 10% 50%, rgba(74,52,148,0.85), rgba(0,0,0,0) 55%),
    linear-gradient(135deg, #2a1c5e 0%, #14101f 100%);
}
[data-theme="light"] .page-hero-title { color: var(--circa-violet); }
[data-theme="light"] .page-hero-title .accent { color: var(--circa-blue); }
.page-hero-title .accent { color: var(--circa-blue); font-style: italic; }

/* ---- Two-column work layout: list rail + detail ---- */
.work { display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .work { grid-template-columns: 1fr; } }

.q-item {
  display: block; width: 100%; text-align: left;
  background: var(--color-bg-2); border: 1px solid var(--color-border);
  border-left: 3px solid transparent; border-radius: 3px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: background .12s;
}
.q-item:hover  { background: var(--glass-bg-hover); }
.q-item.active { border-left-color: var(--circa-blue); background: var(--color-blue-pale); }
.q-item .qt { font-size: 12.5px; line-height: 1.45; color: var(--color-cloud-whisper); font-weight: 600;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-item .qm { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap;
              font-size: 10px; color: var(--color-text-muted); font-weight: 600; }

.answer-body { font-size: 13.5px; line-height: 1.68; color: var(--color-cloud-whisper); white-space: pre-wrap; }
.answer-body em { color: var(--circa-blue); font-style: normal; font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 8px 14px; border-radius: 3px; cursor: pointer;
  background: var(--color-navy); color: #fff; border: 1px solid var(--color-navy);
}
.btn:hover { background: var(--color-navy-deep); }
.btn.ghost { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); }
.btn.ghost:hover { color: var(--color-cloud-whisper); border-color: var(--color-blue-light); background: var(--color-blue-pale); }
.btn.teal { background: var(--circa-blue); border-color: var(--circa-blue); color: #04222a; }
.btn.teal:hover { background: #00b0d4; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- Filter bar ---- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters input, .filters select {
  padding: 7px 11px; border: 1px solid var(--color-border); border-radius: 3px;
  font-family: inherit; font-size: 12px; background: var(--color-bg-3); color: var(--color-cloud-whisper);
}
.filters input:focus, .filters select:focus { outline: none; border-color: var(--color-blue); }
.filters input[type=search] { min-width: 200px; }
.filters .spacer { margin-left: auto; font-size: 11px; color: var(--color-text-muted); font-weight: 600; }

/* ---- Split grid ---- */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1080px) { .g2, .g3 { grid-template-columns: 1fr; } }

/* ---- Definition rows ---- */
.dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-size: 12px; }
.dl dt { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-slate-hint); align-self: center; }
.dl dd { color: var(--color-cloud-whisper); font-weight: 600; }

/* ---- Prose ---- */
.prose { font-size: 13.5px; line-height: 1.7; color: var(--color-text-muted); max-width: 74ch; }
.prose h3 { font-size: 13px; font-weight: 800; letter-spacing: .2px; color: var(--color-cloud-whisper); margin: 22px 0 8px; }
.prose p { margin-bottom: 12px; }
.prose ul { margin: 0 0 12px 18px; }
.prose li { margin-bottom: 6px; }
.prose b, .prose strong { color: var(--color-cloud-whisper); font-weight: 700; }

/* ============================================================
   Mobile fit — a grid item defaults to min-width:auto, so a wide
   table or chart inside one widens the whole track and the page
   scrolls sideways. Wide content must scroll inside its own box,
   never move the page.
   ============================================================ */
.g2 > *, .g3 > *, .work > *, .kpi-row > *, .board > * { min-width: 0; }
.panel { min-width: 0; overflow: hidden; }
.tbl-wrap { min-width: 0; }
.page, .page-hero-inner { max-width: min(var(--page-max-width), 100%); overflow-x: clip; }

/* Charts are fixed-column flex rows; let them scroll inside the panel. */
.panel > div[id^="c-"], .panel > div[id^="chart-"] { overflow-x: auto; overflow-y: hidden; }
.panel > div[id^="c-"] > div, .panel > div[id^="chart-"] > div { min-width: 320px; }

/* Recruiting board lanes */
.board { min-width: 0; }
.card .n, .card .m { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .work { grid-template-columns: 1fr !important; }
  .a360 { position: static !important; }
  .page { padding: 20px 14px; }
  .page-hero { padding: 26px 16px 22px; }
  .sim-banner { font-size: 10.5px; }
  .kpi { padding: 13px 14px; }
  .kpi .v { font-size: 20px; }
  table.ci thead th { font-size: 7.5px; }
}