/*
 * Cicl brand stylesheet.
 *
 * Design tokens live on :root and are swapped per theme via
 * html[data-theme="light"|"dark"] (stamped before first paint by the
 * inline script in the layout; theme_controller toggles it).
 *
 * Palette — inspired by the "sale tags" artwork:
 *   charcoal board  #232326 / #1b1b1e
 *   tag red         #b91f2e (accent), #e05252 (chart-safe red)
 *   twine / cream   #e6d3b3
 *   logo teal       #1e6f6d
 *
 * Chart series colors are CVD-validated against the charcoal panel
 * (#232326): #e05252, #23a79c, #b3850c, #8a63c9 — keep that order.
 */

@font-face {
  font-family: 'Roboto-VariableFont';
  src: url("/assets/Roboto-VariableFont-804fdbde.ttf") format('truetype');
  font-display: swap;
}

:root {
  /* corner geometry — every corner is a cut (chamfer), never a curve.
     Elements override --cut locally to scale the bevel; the polygons
     below are written in terms of it so they follow automatically. */
  --cut: 12px;
  --bevel: polygon(
    0 var(--cut), var(--cut) 0,
    calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--cut) 100%, 0 calc(100% - var(--cut))
  );
  /* tag shape — cut top corners, square base (the hanging sale tag) */
  --bevel-top: polygon(
    0 var(--cut), var(--cut) 0,
    calc(100% - var(--cut)) 0, 100% var(--cut),
    100% 100%, 0 100%
  );
  /* cut only the free edge (off-canvas panels flush to a screen edge) */
  --bevel-right: polygon(
    0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%
  );

  /* charcoal board — always dark regardless of theme */
  --board: #232326;
  --board-ink: #f4f1ea;
  --board-ink-muted: #c9c7bd;
  --board-grid: rgba(244, 241, 234, 0.14);

  --tag-red: #b91f2e;
  --tag-red-hover: #a01b28;
  --tag-red-ink: #ffffff;
  --twine: #e6d3b3;
  --teal: #1e6f6d;

  /* light theme (warm paper) */
  --bg: #f6f1e7;
  --surface: #fffdf8;
  --surface-raised: #ffffff;
  --ink: #26262a;
  --ink-secondary: #5c5a54;
  --ink-muted: #8a877e;
  --border: rgba(38, 38, 42, 0.14);
  --border-strong: rgba(38, 38, 42, 0.28);
  --accent: #b91f2e;
  --accent-ink: #ffffff;
  --link: #1e6f6d;
  --focus-ring: #b91f2e;
  --shadow: 0 2px 10px rgba(38, 38, 42, 0.10);

  /* Status chip inks. Kept as their own tokens because the brand red and teal
     are too dark to read on the dark card surface — they clear 3:1 on paper
     but land at 2.46:1 and 2.65:1 on #232326, so dark mode re-steps them. */
  --chip-hot: #b91f2e;
  --chip-warm: #8a6d2f;
  --chip-cool: #1e6f6d;
  --chip-hot-bg: rgba(185, 31, 46, 0.14);
  --chip-warm-bg: rgba(230, 211, 179, 0.22);
  --chip-cool-bg: rgba(30, 111, 109, 0.13);
  --chip-hot-line: rgba(185, 31, 46, 0.35);
  --chip-warm-line: rgba(138, 109, 47, 0.35);
  --chip-cool-line: rgba(30, 111, 109, 0.32);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #1b1b1e;
  --surface: #232326;
  --surface-raised: #2b2b2f;
  --ink: #f4f1ea;
  --ink-secondary: #c9c7bd;
  --ink-muted: #94918a;
  --border: rgba(244, 241, 234, 0.14);
  --border-strong: rgba(244, 241, 234, 0.30);
  --accent: #c82535;
  --accent-ink: #ffffff;
  --link: #57b3ae;
  --focus-ring: #e05252;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);

  /* Re-stepped for the dark surface: these clear 3:1 on #232326. */
  --chip-hot: #e05252;
  --chip-warm: #d9a531;
  --chip-cool: #57b3ae;
  --chip-hot-bg: rgba(224, 82, 82, 0.16);
  --chip-warm-bg: rgba(217, 165, 49, 0.16);
  --chip-cool-bg: rgba(87, 179, 174, 0.15);
  --chip-hot-line: rgba(224, 82, 82, 0.42);
  --chip-warm-line: rgba(217, 165, 49, 0.42);
  --chip-cool-line: rgba(87, 179, 174, 0.40);
  color-scheme: dark;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 17px;
}

body {
  background: var(--bg);
  font-family: 'Roboto-VariableFont', system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.45;
  min-height: 100vh;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  padding: 0.4rem 0;
}

h2 {
  font-size: 1.2rem;
  line-height: 1.3;
  padding: 0.4rem 0;
  color: var(--ink-secondary);
}

a {
  color: var(--link);
}

a:hover {
  color: var(--accent);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.2rem 0;
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Beveled controls clip everything they paint, an outside ring included —
   so the ring rides just inside the cut instead. */
.theme-toggle:focus-visible,
.tab-button:focus-visible,
input[type="submit"]:focus-visible,
button.btn:focus-visible,
a.btn:focus-visible,
select:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
input[type="date"]:focus-visible,
textarea:focus-visible {
  outline-offset: -3px;
}

/* ── Top bar ─────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1.2rem;
  background: var(--board);
  color: var(--board-ink);
  border-bottom: 3px solid var(--tag-red);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 60;
}

.topbar-logo {
  width: 34px;
  height: 34px;
  display: block;
}

.topbar-brand {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--board-ink);
  text-decoration: none;
}

.topbar-brand:hover {
  color: var(--twine);
}

.topbar-spacer {
  flex: 1;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--board-grid);
  --cut: 8px;
  clip-path: var(--bevel);
  background: transparent;
  color: var(--twine);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
  background: rgba(230, 211, 179, 0.14);
  transform: rotate(15deg);
}

/* icon visibility is driven by the html[data-theme] stamp */
.theme-toggle .icon-sun,
html[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

.theme-toggle .icon-moon {
  display: block;
}

/* ── Flash messages ──────────────────────────────────── */

.flash {
  margin: 0.8rem 1.2rem 0;
  padding: 0.6rem 1rem;
  --cut: 10px;
  clip-path: var(--bevel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  background: var(--surface);
}

.flash.alert {
  border-left-color: var(--tag-red);
}

/* ── Page content ────────────────────────────────────── */

.page-main {
  padding: 1rem 1.2rem 2rem;
}

/* ── KPI tags (shaped like the hanging sale tags) ────── */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.1rem;
  margin: 1.6rem 0;
}

.kpi-card {
  background: var(--tag-red);
  color: var(--tag-red-ink);
  padding: 26px 15px 15px;
  --cut: 14px;
  clip-path: var(--bevel-top);
  position: relative;
  box-shadow: var(--shadow);
}

/* punched tag hole */
.kpi-card::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--bg);
}

.kpi-card h3 {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-bottom: 0.3rem;
}

.kpi-card p {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}

/* ── Chart panels (always the charcoal board) ────────── */

.trends-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.trends-sub-section {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.trend-section {
  margin: 0.7rem;
  min-width: 20rem;
}

.chart-wrapper {
  background-color: var(--board);
  color: var(--board-ink);
  padding: 0.8rem;
  clip-path: var(--bevel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.chart-wrapper h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--board-ink-muted);
  margin-bottom: 0.4rem;
}

/* ── Metric cards & filter bar (dashboard tabs) ──────── */

/* Small-caps eyebrow — the same micro-label the sidebar heading and the
   assist table header wear. Used for every field label on the tabs. */
.eyebrow,
.filter-bar label,
.metric-row dt,
.metric-figure-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 1.3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.filter-bar label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.filter-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  --cut: 7px;
  clip-path: var(--bevel);
  padding: 0.4rem 0.6rem;
  font-family: inherit;
  font-size: 0.95rem;
}

.metrics-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
}

.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  /* chip-cool rather than --teal: the raw brand teal all but disappears
     against the dark card surface */
  border-left: 4px solid var(--chip-cool);
  --cut: 12px;
  clip-path: var(--bevel);
  padding: 0;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  /* keeps the header strip inside the cut once corner-shape takes over */
  overflow: hidden;
}

/* Card header — charcoal strip, matching the assist table's header band */
.metric-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: var(--board);
}

.metric-card-head h4 {
  color: var(--board-ink);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.metric-card-head .metric-period {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--twine);
  white-space: nowrap;
}

/* Hero number — the card's headline reading */
.metric-figure {
  padding: 0.9rem 1rem 0.7rem;
  border-bottom: 1px solid var(--border);
}

.metric-figure-value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.metric-figure-label {
  display: block;
  margin-top: 0.15rem;
}

/* Label / value rows — values align into their own right-hand column */
.metric-rows {
  padding: 0.7rem 1rem 0.9rem;
  display: grid;
  gap: 0.38rem;
}

.metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.metric-row dt {
  min-width: 0;
}

.metric-row dd {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Wide values (sender lists, agent breakdowns) wrap under their label */
.metric-row.is-stacked {
  display: block;
}

.metric-row.is-stacked dd {
  margin-top: 0.15rem;
  text-align: left;
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--ink-secondary);
  white-space: normal;
  line-height: 1.4;
}

/* Distribution strip — thin bars on one hue, recessive by design */
.metric-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 34px;
  margin-top: 0.35rem;
}

.metric-spark span {
  flex: 1;
  min-height: 2px;
  background: var(--chip-cool);
  opacity: 0.85;
}

.metric-spark span.is-empty {
  background: var(--border-strong);
  opacity: 0.4;
}

.metric-spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
  font-size: 0.66rem;
  color: var(--ink-muted);
}

/* Empty & loading states */
.metric-empty,
.metric-loading {
  grid-column: 1 / -1;
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.92rem;
  border: 1px dashed var(--border-strong);
  --cut: 12px;
  clip-path: var(--bevel);
}

/* ── Generic buttons & forms (scaffold + devise pages) ── */

input[type="submit"],
button.btn,
a.btn {
  background: var(--tag-red);
  color: var(--tag-red-ink);
  border: none;
  --cut: 7px;
  clip-path: var(--bevel);
  padding: 0.5rem 1.1rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s ease;
}

input[type="submit"]:hover,
button.btn:hover,
a.btn:hover {
  background: var(--tag-red-hover);
  color: var(--tag-red-ink);
}

/* ── Bevel upgrade ───────────────────────────────────────
 * clip-path cuts the corner out of the border and the focus ring along
 * with it. Where corner-shape ships, the same cut is done by the box
 * itself, so borders wrap the diagonal and rings sit outside again.
 */
@supports (corner-shape: bevel) {
  .theme-toggle,
  .flash,
  .chart-wrapper,
  .metric-card,
  .metric-empty,
  .metric-loading,
  select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  textarea,
  input[type="submit"],
  button.btn,
  a.btn {
    clip-path: none;
    corner-shape: bevel;
    border-radius: var(--cut);
  }

  .kpi-card {
    clip-path: none;
    corner-shape: bevel;
    border-radius: var(--cut) var(--cut) 0 0;
  }

  .theme-toggle:focus-visible,
  input[type="submit"]:focus-visible,
  button.btn:focus-visible,
  a.btn:focus-visible,
  select:focus-visible,
  input[type="text"]:focus-visible,
  input[type="email"]:focus-visible,
  input[type="password"]:focus-visible,
  input[type="number"]:focus-visible,
  input[type="date"]:focus-visible,
  textarea:focus-visible {
    outline-offset: 2px;
  }
}

/* ── Top bar navigation ──────────────────────────────── */

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-right: 0.8rem;
}

.topbar-nav a {
  color: var(--board-ink-muted);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.topbar-nav a:hover { color: var(--twine); }

@media (max-width: 640px) {
  .topbar-nav { display: none; }
}

/* ── Clickable snapshot tags ─────────────────────────── */

/* The whole tag is the hit target. `a.kpi-card` outranks the global `a` rule,
   and the :hover pair below outranks `a:hover`, so the tag keeps its own ink
   rather than picking up the link color. */
a.kpi-card,
a.kpi-card:hover {
  color: var(--tag-red-ink);
  text-decoration: none;
}

.kpi-card-link {
  display: block;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.kpi-card-link:hover {
  background: var(--tag-red-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(38, 38, 42, 0.22);
}

/* Arrow rests dim and firms up on hover — an affordance that does not move
   the layout, so the tag never reflows under the pointer. */
.kpi-card-go {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.kpi-card-link:hover .kpi-card-go,
.kpi-card-link:focus-visible .kpi-card-go {
  opacity: 1;
  transform: translateX(3px);
}

/* clip-path cuts an outside ring away with the corner, so it rides inside */
.kpi-card-link:focus-visible {
  outline: 2px solid var(--twine);
  outline-offset: -5px;
}

@media (prefers-reduced-motion: reduce) {
  .kpi-card-link,
  .kpi-card-go { transition: none; }
  .kpi-card-link:hover { transform: none; }
  .kpi-card-link:hover .kpi-card-go { transform: none; }
}

/* Section heading with a trailing action link */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-link {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.section-link:hover { text-decoration: underline; }

@supports (corner-shape: bevel) {
  .kpi-card-link:focus-visible { outline-offset: 2px; }
}

/* ── Whole-card drill-down (metric tab cards) ────────── */

/* The card is a click target via a stretched link rather than by wrapping it
   in an <a>: Load cards carry their own agent links, and nesting anchors is
   invalid HTML. The heading's ::after is sized over the card instead, so the
   real link keeps its keyboard, middle-click and open-in-new-tab behaviour. */
.metric-card.is-linked {
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.metric-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.metric-card.is-linked:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(38, 38, 42, 0.20);
  border-left-color: var(--chip-hot);
}

/* Baseline: the link rings itself. Stated unconditionally so that a browser
   without :has() still shows focus — putting `outline: none` here and relying
   on the :has() rule below would drop the whole declaration on those browsers
   and leave keyboard users with no focus indicator at all. */
.metric-card-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Where :has() is available, ring the whole card instead of just the words. */
@supports selector(:has(*)) {
  .metric-card.is-linked:has(.metric-card-link:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: -4px;
  }

  .metric-card.is-linked .metric-card-link:focus-visible {
    outline: none;
  }
}

/* Anything interactive inside the card has to sit above the stretched overlay,
   or the overlay swallows it: agent links stop being clickable and the spark
   bars stop showing their per-bucket tooltips. */
.metric-card .agent-link,
.metric-card .metric-spark,
.metric-card .metric-spark-axis {
  position: relative;
  z-index: 1;
}

/* Arrow affordance in the card header, mirroring the snapshot tags. The
   heading takes the free space so the period chip and arrow stay paired on the
   right, rather than space-between stranding the chip in the middle. */
.metric-card-head h4 {
  flex: 1 1 auto;
  min-width: 0;
}

.metric-card .metric-card-go {
  padding-left: 0.1rem;
  color: var(--twine);
  opacity: 0.45;
  font-size: 0.9rem;
  line-height: 1;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.metric-card.is-linked:hover .metric-card-go,
.metric-card.is-linked:has(.metric-card-link:focus-visible) .metric-card-go {
  opacity: 1;
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .metric-card.is-linked,
  .metric-card .metric-card-go { transition: none; }
  .metric-card.is-linked:hover { transform: none; }
  .metric-card.is-linked:hover .metric-card-go { transform: none; }
}