/* ============================================================================
   SEO Dash design system.

   Brand values are fixed by the C4 Brand Standards (March 2018, p.13) and are
   not up for redesign. This file uses them verbatim and extends them with the
   two things a print guide does not specify: a neutral ramp and a semantic
   palette.

   Red is allowed in exactly three roles -- identity, the primary action, and a
   genuine decline. Never decoration. Because the brand accent and the critical
   colour are the same hue, that restraint is the only thing keeping red
   meaningful when it shows up in a number.
   ========================================================================= */

@font-face { font-family: "Barlow"; src: url("/static/fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/Barlow-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/Barlow-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* --- C4 brand, verbatim ------------------------------------------------ */
  --c4-red:    #C8102E;   /* PMS 186 CP   */
  --c4-orange: #E04E39;   /* PMS 7417 CP  */
  --c4-gray:   #53565A;   /* Cool Gray 11 */
  --c4-gray-m: #75787B;   /* Cool Gray 9  */
  --c4-silver: #C1C6C8;   /* PMS 428 CP   */
  --c4-black:  #2C2A29;   /* Process Black CP */

  /* --- neutral ramp, biased to C4 Silver's cool hue ---------------------- */
  --n-0: #FFFFFF; --n-25: #FAFBFB; --n-50: #F4F6F6;
  --n-100: #EDEFF0; --n-150: #E5E8E9; --n-200: #DBE0E1;

  /* --- semantic ---------------------------------------------------------- */
  --pos:    #0F7A4F;   /* AA on white */
  --neg:    #C8102E;
  --warn:   #A5670A;
  --absent: #9AA0A2;   /* "no data" -- never the ink of a real zero */

  /* --- roles -------------------------------------------------------------- */
  --ground: var(--n-50);  --surface: var(--n-0);
  --ink: var(--c4-black); --ink-2: var(--c4-gray); --ink-3: var(--c4-gray-m);
  --line: var(--n-150);   --line-2: var(--n-200);

  --rail-bg: #2C2A29; --rail-ink: #EDEBEA; --rail-ink-2: #9C9793;
  --rail-line: #423F3D; --rail-hover: #3A3735;

  --font: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --rail-w: 232px; --head-h: 60px; --r: 4px;

  --chev-wash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 603 1286'%3E%3Cpath fill='%23ffffff' d='M902,-300L0,602L0,683L902,1585L902,1328L216.5,642.5L902,-43Z'/%3E%3Cpath fill='%23ffffff' d='M902,85L370,617L370,668L902,1200L902,1044L500.5,642.5L902,241Z'/%3E%3C/svg%3E");
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23EDEBEA' d='M1.6,2.2L6,6.6L10.4,2.2Z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c4-red); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--c4-red); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ------------------------------------------------------------------ shell -- */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
.app.norail { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------------- rail -- */
.rail {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--rail-bg); color: var(--rail-ink);
  border-right: 1px solid var(--rail-line);
}
/* The stand-alone symbol is sanctioned as a design element (guide p.8).
   Bled off the bottom corner at 5% it reads as texture, not a second logo. */
.rail::after {
  content: ""; position: absolute; left: -46px; bottom: -70px;
  width: 300px; height: 640px; pointer-events: none; opacity: .05;
  background: var(--chev-wash) no-repeat center / contain;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 20px 18px 18px; position: relative; z-index: 1; }
/* `fill` is inheritable, so it crosses the <use> boundary into the symbol --
   a `.mark path` selector would not reach inside the shadow tree. */
.brand .mark { width: 13px; height: 28px; flex: none; display: block; fill: var(--c4-red); }
.brand .name { font-weight: 700; font-size: 13.5px; letter-spacing: .13em; text-transform: uppercase; line-height: 1.1; color: var(--rail-ink); }
.brand .name b { display: block; font-weight: 500; font-size: 9.5px; letter-spacing: .16em; color: var(--rail-ink-2); }
.brand a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 11px; }

.switcher { padding: 0 14px 16px; position: relative; z-index: 1; }
.switcher label {
  display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rail-ink-2); margin-bottom: 5px;
}
.switcher select {
  width: 100%; font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 26px 7px 9px; border-radius: var(--r); cursor: pointer;
  color: var(--rail-ink); background-color: var(--rail-hover);
  border: 1px solid var(--rail-line); appearance: none;
  background-image: var(--caret); background-repeat: no-repeat;
  background-position: right 8px center; background-size: 9px;
}

.rail-nav { display: flex; flex-direction: column; padding: 4px 0; position: relative; z-index: 1; }
.rail-nav .grouplabel {
  font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rail-ink-2); padding: 14px 18px 6px;
}
.rail-nav a {
  display: flex; align-items: center; gap: 9px; padding: 7px 18px 7px 15px;
  font-size: 13.5px; font-weight: 500; color: var(--rail-ink); text-decoration: none;
  border-left: 3px solid transparent; transition: background-color .12s;
}
.rail-nav a:hover { background: var(--rail-hover); text-decoration: none; }
.rail-nav a.active { background: var(--rail-hover); border-left-color: var(--c4-red); font-weight: 600; }
.rail-nav a .tally {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  color: var(--rail-ink-2); font-variant-numeric: tabular-nums;
}

.rail-foot { margin-top: auto; padding: 14px 18px 16px; border-top: 1px solid var(--rail-line); position: relative; z-index: 1; }
.rail-foot .who { font-size: 12.5px; font-weight: 600; }
.rail-foot .role { font-size: 10.5px; color: var(--rail-ink-2); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.rail-foot form { margin-top: 9px; }
.rail-foot button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: none; color: var(--rail-ink-2); border: 1px solid var(--rail-line);
  padding: 5px 10px; border-radius: var(--r);
}
.rail-foot button:hover { color: var(--rail-ink); border-color: var(--rail-ink-2); }

/* ---------------------------------------------------------------- content -- */
.main { min-width: 0; display: flex; flex-direction: column; }
.head {
  position: sticky; top: 0; z-index: 30; height: var(--head-h);
  display: flex; align-items: center; gap: 14px; padding: 0 26px;
  background: rgba(255, 255, 255, .93); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.head h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.012em; }
.head .crumb { color: var(--ink-3); font-weight: 500; }
.head .spacer { flex: 1; }
.chip {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  background: var(--n-50); border: 1px solid var(--line);
  padding: 4px 9px; border-radius: var(--r); white-space: nowrap;
}
.chip b { color: var(--ink); font-weight: 600; }

main, .content { padding: 22px 26px 64px; max-width: 1460px; width: 100%; }
.lede { margin: 0 0 2px; font-size: 13px; color: var(--ink-3); max-width: 82ch; }

/* Section rule: label, optional count, hairline to the right edge. */
h2, .section > .sh { margin-top: 30px; }
/* Only a section that opens the page sits tight to the header. A section that
   follows a lede paragraph keeps its full leading, or the two collide. */
main > .section:first-child > .sh { margin-top: 2px; }
.section > .sh { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; flex-wrap: wrap; }
.section > .sh h2 {
  margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.section > .sh .count {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  background: var(--n-100); padding: 1px 6px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.section > .sh .rule { flex: 1; height: 1px; background: var(--line); min-width: 20px; }
.section > .sh .note { font-size: 11.5px; color: var(--ink-3); }

/* -------------------------------------------------------------- scorecard -- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 10px; }
/* A row holding one or two metrics: cap the card width and left-align, so a
   single number does not get stretched across the full content width. */
.cards.few { grid-template-columns: repeat(auto-fit, minmax(184px, 260px)); justify-content: start; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px 13px; min-width: 0;
}
.card .label {
  font-size: 10px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.card .value {
  font-size: 29px; font-weight: 700; letter-spacing: -.025em; line-height: 1.12;
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.card .value .unit { font-size: 15px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.card .value.is-absent { color: var(--absent); font-weight: 500; }

.delta { margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.delta .n { font-weight: 700; }
.delta.pos .n { color: var(--pos); }
.delta.neg .n { color: var(--neg); }
.delta.flat .n { color: var(--ink-2); }

/* A metric that declares its own polarity, so the arrow can never contradict
   the number (an average position falling from 20.8 to 18.4 is an improvement). */
.polarity {
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 2px;
  padding: 0 3px; line-height: 1.5; cursor: help; text-transform: none;
}
/* Absent is not zero: its own ink, and never a delta beside it. */
.na { color: var(--absent); font-variant-numeric: tabular-nums; }
.na[title] { cursor: help; }

/* ------------------------------------------------------------------ table -- */
.tablewrap { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.tabletools {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 11px; border-bottom: 1px solid var(--line); background: var(--n-25);
}
.tabletools input[type="search"] {
  font: inherit; font-size: 12.5px; padding: 5px 9px; width: 210px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
}
.tabletools .shown { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tabletools .spacer { flex: 1; }

.cols { position: relative; }
.cols > summary {
  list-style: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 5px 9px;
  background: var(--surface); user-select: none;
}
.cols > summary::-webkit-details-marker { display: none; }
.cols > summary:hover { color: var(--ink); border-color: var(--c4-silver); }
.cols .pop {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 40; min-width: 168px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 8px 22px rgba(44, 42, 41, .13); padding: 7px;
}
.cols .pop label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 4px 6px; border-radius: 3px; cursor: pointer; }
.cols .pop label:hover { background: var(--n-50); }

/* `overflow-x: auto` forces `overflow-y` to compute to auto, which makes this
   element the sticky containing block for the <th>s inside it. So the header
   sticks to THIS box, not the viewport, and `top` must be 0 -- any other value
   just pushes the header down over row 1. Tables long enough to want a sticky
   header get `.tall`, which gives the box a height to scroll within. */
.scroller { overflow-x: auto; }
.scroller.tall { max-height: 460px; overflow: auto; }

table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--surface); }
th, td { text-align: left; padding: 7px 11px; border-bottom: 1px solid var(--n-100); vertical-align: top; }
thead th {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--line-2);
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; padding-top: 9px; padding-bottom: 9px;
}
thead th[data-sort] { cursor: pointer; user-select: none; }
thead th[data-sort]:hover { color: var(--ink); }
thead th[data-sort]::after { content: "\2195"; margin-left: 5px; opacity: .3; font-size: 10px; }
thead th[aria-sort="ascending"]::after  { content: "\2191"; opacity: 1; color: var(--c4-red); }
thead th[aria-sort="descending"]::after { content: "\2193"; opacity: 1; color: var(--c4-red); }
tbody tr:hover { background: var(--n-25); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.path { font-family: var(--mono); font-size: 12px; }
td small, .sub { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.trunc { display: block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Table deltas: a glyph and a number, never colour alone. */
.d-in { font-size: 11px; font-weight: 700; margin-left: 5px; font-variant-numeric: tabular-nums; }
.d-in.pos { color: var(--pos); }
.d-in.neg { color: var(--neg); }

.pill {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid;
}
.pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.pill.green { color: var(--pos);    background: #EAF5F0; border-color: #C4E2D4; }
.pill.amber { color: var(--warn);   background: #FBF3E4; border-color: #EBD9B4; }
.pill.red   { color: var(--c4-red); background: #FBEBED; border-color: #F0C7CE; }
.pill.gray  { color: var(--ink-3);  background: var(--n-100); border-color: var(--line-2); }

.tags .tag {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500;
  background: var(--n-100); border: 1px solid var(--line-2); color: var(--ink-2);
  padding: 1px 4px 1px 7px; border-radius: 3px; margin: 1px 3px 1px 0;
}
.tags .tag button { font: inherit; font-size: 12px; line-height: 1; padding: 0 2px; background: none; border: 0; color: var(--ink-3); cursor: pointer; }
.tags .tag button:hover { color: var(--c4-red); }

/* ------------------------------------------------------------ empty state -- */
.placeholder {
  border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--n-25);
  padding: 20px; color: var(--ink-3); font-size: 13px; text-align: center;
}
.placeholder strong { display: block; color: var(--ink-2); font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.placeholder code { font-family: var(--mono); font-size: 12px; background: var(--n-100); padding: 1px 5px; border-radius: 3px; color: var(--ink-2); }
.placeholder .ph {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 8px; margin-bottom: 7px;
}
.notice {
  border: 1px solid #F0C7CE; border-left: 3px solid var(--c4-red); background: #FDF6F7;
  border-radius: var(--r); padding: 11px 14px; font-size: 13px; color: var(--ink-2);
}
.notice b { color: var(--ink); }
.error { color: var(--c4-red); font-weight: 600; }

/* ----------------------------------------------------------------- charts -- */
.chartgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 10px; }
.chartcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 13px 9px; min-width: 0; }
.chartcard .ct { display: flex; align-items: baseline; gap: 7px; margin-bottom: 9px; }
.chartcard .ct h3 { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-3); }
.chartcard .ct .last { margin-left: auto; font-size: 15px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chartcard .cv { position: relative; height: 96px; }
.chartcard .foot { margin-top: 6px; font-size: 10.5px; color: var(--absent); }

/* --------------------------------------------------------------- document -- */
.report-block {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 24px; font-family: var(--mono); font-size: 12.5px; line-height: 1.62;
  white-space: pre-wrap; overflow-x: auto; color: var(--ink); max-width: 78ch;
}
.report-block.internal { border-left: 3px solid var(--c4-red); background: #FEFCFC; }
.docbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; color: var(--ink-2); }

/* ------------------------------------------------------- buttons & forms -- */
button, .btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--c4-red); color: #fff; border: 1px solid var(--c4-red);
  padding: 6px 13px; border-radius: var(--r); transition: background-color .12s;
}
button:hover, .btn:hover { background: #AE0E28; border-color: #AE0E28; text-decoration: none; }
button.secondary {
  background: var(--surface); color: var(--ink-2); border-color: var(--line-2);
}
button.secondary:hover { background: var(--n-50); color: var(--ink); border-color: var(--c4-silver); }
input, select, textarea {
  font: inherit; font-size: 13px; padding: 5px 8px; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface);
}
form.inline { display: inline; }
label { font-size: 12.5px; }

details.rowedit > summary {
  list-style: none; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 2px 8px; display: inline-block;
}
details.rowedit > summary::-webkit-details-marker { display: none; }
details.rowedit > summary:hover { color: var(--ink); border-color: var(--c4-silver); }
details.rowedit form { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 9px 0 3px; }
details.hidden-pages { margin-top: 26px; }
details.hidden-pages > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 8px 0; }

/* ------------------------------------------------------------------ login -- */
.login { max-width: 340px; margin: 9vh auto; }
.login .lock { height: 30px; margin-bottom: 20px; display: block; }
.login .bar { height: 3px; background: linear-gradient(90deg, var(--c4-red), var(--c4-orange)); border-radius: 2px; margin-bottom: 20px; }
.login h1 { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.login label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.login input { width: 100%; font-size: 14px; padding: 8px 10px; margin-bottom: 13px; }
.login button { width: 100%; padding: 9px; }
.login p { margin: 0; }
code.token { font-family: var(--mono); font-size: 12.5px; background: var(--n-100); padding: 3px 6px; border-radius: 3px; }

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
  .rail::after { display: none; }
  .rail-nav { flex-direction: row; flex-wrap: wrap; padding: 0 12px 12px; }
  .rail-nav .grouplabel { display: none; }
  .rail-nav a { border-left: 0; border-bottom: 3px solid transparent; padding: 6px 10px; }
  .rail-nav a.active { border-left-color: transparent; border-bottom-color: var(--c4-red); }
  .rail-nav a .tally { display: none; }
  .rail-foot { margin: 0 0 0 auto; border-top: 0; }
  .switcher { padding: 0 14px 12px; min-width: 190px; }
  main, .content { padding: 18px 16px 48px; }
  .head { padding: 0 16px; }
}