/* ==========================================================================
   IMAGE DESIGN - dashboard design system
   2026-09-19

   Loaded AFTER dash.css and dash-detail.css. Those two are the Mythic
   stylesheets carried in by the clone; they are left untouched so every
   cloned page keeps working. This file retokenises them and restyles the
   chrome the approved Image Design design changes.

   Every colour below was sampled from the approved design image, except the
   accent, which is taken from the supplied logo artwork itself (#FF1944).
   ========================================================================== */

:root {
  /* Surfaces, darkest to lightest, as measured off the approved design */
  --id-bg:        #080B0D;   /* page background            */
  --id-header:    #0D1113;   /* top bar                    */
  --id-sidebar:   #0F1316;   /* left navigation            */
  --id-card:      #13181B;   /* cards and panels           */
  --id-raised:    #1B2125;   /* secondary buttons, inputs  */
  --id-hover:     #191F23;

  /* Hairlines. The design separates surfaces with light, low-contrast rules. */
  --id-line:      rgba(255,255,255,.075);
  --id-line-2:    rgba(255,255,255,.12);

  /* Type */
  --id-text:      #FFFFFF;
  --id-text-2:    #C3CBD1;
  --id-muted:     #8A9299;
  --id-faint:     #626A70;

  /* Brand accent: sampled from image-design.png, the supplied logo artwork */
  --id-accent:    #FF1944;
  --id-accent-2:  #D61236;
  --id-accent-sf: rgba(255,25,68,.12);
  /* White TEXT on red only. #FF1944 under white text measures 3.84:1, short of
     WCAG AA 4.5:1; #D6103A measures 5.26:1. Everywhere else (accents, icons,
     rules, focus rings, charts) the brand red stays #FF1944. */
  --id-accent-strong:   #D6103A;
  --id-accent-strong-2: #B50C30;

  --id-green:     #34D399;
  --id-red:       #F87171;

  --id-r:         12px;   /* card radius   */
  --id-r-sm:      10px;   /* control radius */
  --id-header-h:  78px;
  --id-footer-h:  62px;
  --id-gutter:    26px;

  /* Retokenise the inherited Mythic system so all 159 existing usages in
     dash.css / dash-detail.css resolve to the Image Design palette. */
  --ink:       var(--id-text);
  --ink-2:     var(--id-text-2);
  --text:      var(--id-text-2);
  --text-2:    var(--id-muted);
  --muted:     var(--id-muted);
  --line:      var(--id-line);
  --line-2:    var(--id-line);
  --bg:        var(--id-bg);
  --card:      var(--id-card);
  --cream:     var(--id-card);
  --cream-2:   var(--id-raised);
  --gold:      var(--id-accent);
  --gold-2:    var(--id-accent-2);
  --gold-soft: var(--id-accent-sf);
  --gold-mid:  rgba(255,25,68,.35);
  --blue:      #60A5FA;
  --green:     var(--id-green);
  --red:       var(--id-red);
  --amber:     #FBBF24;
  --shadow-1:  0 1px 2px rgba(0,0,0,.4);
  --shadow-2:  0 8px 28px rgba(0,0,0,.45);
  --radius:    var(--id-r-sm);
  --radius-lg: var(--id-r);
  --sidebar:   240px;
}

body.dash {
  background: var(--id-bg);
  color: var(--id-text-2);
  font-size: 15px;
}

/* The approved design uses one grotesque throughout. Playfair is inherited
   from Mythic and is retired here rather than deleted from dash.css. */
body.dash h1, body.dash h2, body.dash h3, body.dash h4,
body.dash .page-title, body.dash .card-title, body.dash .stat-value,
body.dash .kpi-value, body.dash .num {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.015em;
}

/* ---------- Top bar: full width, above the sidebar ---------------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--id-header-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 24px 0 0;
  background: var(--id-header);
  border-bottom: 1px solid var(--id-line);
  z-index: 40;
}
.topbar-brand {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  display: flex; align-items: center;
  padding-left: 26px;
}
.topbar-brand img { display: block; width: 172px; height: auto; }

.id-search {
  flex: 0 1 520px;
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 12px 0 14px;
  background: var(--id-raised);
  border: 1px solid var(--id-line);
  border-radius: var(--id-r-sm);
  color: var(--id-muted);
}
.id-search svg { flex: 0 0 auto; color: var(--id-faint); }
.id-search input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--id-text); font: inherit; font-size: 14.5px;
}
.id-search input::placeholder { color: var(--id-faint); }
.id-kbd {
  flex: 0 0 auto;
  font-size: 11.5px; color: var(--id-muted);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--id-line);
  border-radius: 6px; padding: 3px 7px;
}

/* The search control is NOT built. It keeps the design's shape and position
   so the header still reads correctly, but it is presented as explicitly
   unavailable rather than as a disabled input that looks broken. */
.id-search.is-unavailable { cursor: default; border-style: dashed; opacity: .72; }
.id-search .id-search-text { flex: 1 1 auto; min-width: 0; font-size: 14px;
  color: var(--id-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 18px; min-width: 0; }
.topbar > * { min-width: 0; }
.topbar .notif { position: relative; color: var(--id-text-2); display: flex; }
.topbar .notif .badge {
  position: absolute; top: -3px; right: -4px;
  min-width: 9px; height: 9px; padding: 0;
  background: var(--id-accent); border-radius: 999px;
  font-size: 0; border: 2px solid var(--id-header);
}
.id-user { display: flex; align-items: center; gap: 11px; }
.id-avatar {
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--id-accent-strong); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
}
.id-user-name { font-size: 14px; font-weight: 600; color: var(--id-text); line-height: 1.25; }
.id-user-role { font-size: 12px; color: var(--id-muted); line-height: 1.25; }
.id-user svg { color: var(--id-faint); }

/* The inherited toggle is a white button from the light Mythic theme; on the
   dark header it rendered as a white block. */
.navtoggle {
  margin-left: 14px; margin-right: 0;
  width: 40px; height: 40px;
  background: var(--id-raised);
  border: 1px solid var(--id-line-2);
  border-radius: var(--id-r-sm);
  color: var(--id-text);
}
.navtoggle:hover { background: var(--id-hover); }
.navtoggle:focus-visible { outline: 2px solid var(--id-accent); outline-offset: 2px; }

/* ---------- Sidebar ----------------------------------------------------- */
.sidebar {
  top: var(--id-header-h);
  bottom: var(--id-footer-h);
  width: var(--sidebar);
  background: var(--id-sidebar);
  border-right: 1px solid var(--id-line);
  padding: 18px 12px 16px;
  z-index: 30;
  /* The nav is taller than a short viewport once the secondary group is
     included. Without this the flex column overflowed upwards and pushed the
     active item off the top where it could not be reached. */
  overflow-y: auto;
  overscroll-behavior: contain;
  justify-content: flex-start;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.nav-foot { flex: 0 0 auto; }
.sidebar .brand { display: none; }          /* the logo lives in the top bar */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 14px;
  border-radius: var(--id-r-sm);
  color: var(--id-muted);
  font-size: 14.5px; font-weight: 500;
  transition: background .13s ease, color .13s ease;
}
.nav-item svg { flex: 0 0 20px; }
.nav-item:hover { background: var(--id-hover); color: var(--id-text); }
.nav-item.is-active {
  background: var(--id-accent-strong); color: #fff; font-weight: 600;
  box-shadow: 0 6px 18px rgba(255,25,68,.28);
}
.nav-item.is-active:hover { background: var(--id-accent-strong); color: #fff; }
.nav-sep { height: 1px; background: var(--id-line); margin: 14px 14px; }
.nav-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--id-line); }

/* ---------- Main + page ------------------------------------------------- */
.main { margin-left: var(--sidebar); padding-top: var(--id-header-h); padding-bottom: var(--id-footer-h); }
.page { padding: var(--id-gutter); max-width: 1640px; }
.topbar-title { display: none; }

/* ---------- Cards, the core surface ------------------------------------- */
.card, .panel, .box, .tile {
  background: var(--id-card);
  border: 1px solid var(--id-line);
  border-radius: var(--id-r);
  box-shadow: none;
}
.card-title, .panel-title { color: var(--id-text); font-weight: 650; font-size: 19px; }
.muted, .hint, .form-help { color: var(--id-muted); }

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  border-radius: var(--id-r-sm);
  border: 1px solid var(--id-line-2);
  background: var(--id-raised);
  color: var(--id-text);
  font-weight: 600; font-size: 14.5px;
  padding: 11px 18px;
  transition: background .13s ease, border-color .13s ease;
}
.btn:hover { background: var(--id-hover); border-color: var(--id-line-2); }
.btn-gold, .btn-primary {
  background: var(--id-accent-strong); border-color: var(--id-accent-strong); color: #fff;
}
.btn-gold:hover, .btn-primary:hover { background: var(--id-accent-strong-2); border-color: var(--id-accent-strong-2); }

/* ---------- Forms ------------------------------------------------------- */
.form-input, .form-select, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
  background: var(--id-raised);
  border: 1px solid var(--id-line);
  border-radius: var(--id-r-sm);
  color: var(--id-text);
}
.form-input:focus, select:focus, textarea:focus, input:focus {
  outline: none; border-color: var(--id-accent);
  box-shadow: 0 0 0 3px var(--id-accent-sf);
}
.form-label, label { color: var(--id-text-2); }

/* ---------- Tables ------------------------------------------------------ */
table { color: var(--id-text-2); }
thead th, .table thead th {
  background: transparent;
  color: var(--id-muted);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  border-bottom: 1px solid var(--id-line);
}
tbody td, .table tbody td { border-bottom: 1px solid var(--id-line); }
tbody tr:hover, .clickable-row:hover { background: rgba(255,255,255,.028); }
.client-row, tr.client-row { background: rgba(255,255,255,.035); }
.client-row td { color: var(--id-text); }

/* ==========================================================================
   Dashboard home
   ========================================================================== */

/* The hero is FULL BLEED in the approved design: no card, no border, no
   radius, sitting directly on the page background and running from the
   sidebar edge to the right edge of the viewport, flush under the header.
   The negative margins cancel the .page gutter. */
.id-hero {
  position: relative; overflow: hidden;
  border: 0; border-radius: 0;
  background: transparent;
  padding: 30px 88px 28px 46px;
  margin: calc(var(--id-gutter) * -1) calc(var(--id-gutter) * -1) 12px;
  min-height: 174px;
  display: flex; align-items: center;
}
.id-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--id-hero-img, none);
  background-size: cover; background-position: center right;
  right: 0;
  /* The design fades the photograph out to the left behind the headline. */
  /* Measured off the approved design: the photograph is invisible behind the
     headline and fully present by roughly two thirds across. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 53%, #000 78%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 53%, #000 78%);
  opacity: .92; z-index: 0;
}
.id-hero > * { position: relative; z-index: 1; }
.id-hero-copy { flex: 1 1 auto; min-width: 0; }
.id-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--id-muted); margin-bottom: 14px;
}
.id-hero h1 {
  margin: 0 0 12px; color: var(--id-text);
  font-size: 52px; line-height: 1.04; font-weight: 800; letter-spacing: -.028em;
}
.id-hero h1 .accent { color: var(--id-accent); }
.id-hero p { margin: 0; color: var(--id-text-2); font-size: 17px; max-width: 64ch; }
.id-hero-tag {
  flex: 0 0 auto; text-align: right; padding-left: 28px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--id-text); line-height: 2;
}
.id-hero-tag .rule {
  display: block; width: 54px; height: 2px;
  background: var(--id-accent); margin: 12px 0 0 auto;
}

/* ---------- Stat cards -------------------------------------------------- */
.id-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px; margin-bottom: 20px;
}
.id-stat {
  background: var(--id-card); border: 1px solid var(--id-line);
  border-radius: var(--id-r); padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.id-stat-top { display: flex; align-items: center; gap: 13px; margin-bottom: 2px; }
.id-stat-ico { color: var(--id-accent); flex: 0 0 auto; display: flex; }
.id-stat-ico svg { width: 26px; height: 26px; }
.id-stat-label { flex: 1 1 auto; color: var(--id-text-2); font-size: 14.5px; font-weight: 500; }
.id-go {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--id-line-2); background: transparent; color: var(--id-text-2);
  display: flex; align-items: center; justify-content: center;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.id-go:hover { background: var(--id-accent); border-color: var(--id-accent); color: #fff; }
.id-stat-value { font-size: 34px; font-weight: 700; color: var(--id-text); line-height: 1.05; letter-spacing: -.02em; }
.id-stat-value.is-empty { color: var(--id-faint); font-size: 19px; font-weight: 600; letter-spacing: 0; padding: 7px 0 6px; }
.id-stat-foot { font-size: 12.5px; color: var(--id-muted); display: flex; align-items: center; gap: 8px; }
.id-delta { font-weight: 600; }
.id-delta.up { color: var(--id-green); }
.id-delta.down { color: var(--id-red); }

/* ---------- Two-column band --------------------------------------------- */
.id-band { display: grid; grid-template-columns: minmax(0,2.05fr) minmax(0,1fr); gap: 20px; margin-bottom: 20px; }
.id-panel { background: var(--id-card); border: 1px solid var(--id-line); border-radius: var(--id-r); padding: 22px 24px 24px; }
.id-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.id-panel-head h2 { margin: 0; font-size: 19px; font-weight: 650; color: var(--id-text); }
.id-viewall { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--id-text-2); }
.id-viewall:hover { color: var(--id-accent); }

/* ---------- Empty states ------------------------------------------------ */
.id-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 46px 20px; text-align: center;
  border: 1px dashed var(--id-line-2); border-radius: var(--id-r-sm);
  color: var(--id-muted);
}
.id-empty svg { color: var(--id-faint); }
.id-empty strong { color: var(--id-text-2); font-size: 15px; font-weight: 600; }
.id-empty span { font-size: 13.5px; max-width: 42ch; }
.id-empty-sm { padding: 30px 18px; }

/* ---------- Quick actions ----------------------------------------------- */
.id-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.id-action {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 14px; border-radius: var(--id-r-sm);
  background: var(--id-raised); border: 1px solid var(--id-line-2);
  color: var(--id-text); font-size: 14px; font-weight: 600;
  white-space: nowrap; min-width: 0;
}
.id-action svg { flex: 0 0 18px; width: 18px; height: 18px; }
.id-action:hover { background: var(--id-hover); }
.id-action.is-primary { background: var(--id-accent-strong); border-color: var(--id-accent-strong); color: #fff; }
.id-action.is-primary:hover { background: var(--id-accent-strong-2); }

/* ---------- Footer ------------------------------------------------------ */
.id-foot {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--id-footer-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 26px;
  background: var(--id-header);
  border-top: 1px solid var(--id-line);
  color: var(--id-muted); font-size: 13.5px;
  z-index: 35;
}
.id-foot img { width: 118px; height: auto; display: block; }
.id-foot .sep { width: 1px; height: 18px; background: var(--id-line-2); }
.id-foot .ver { margin-left: auto; color: var(--id-faint); font-size: 12.5px; }

/* ==========================================================================
   Login
   ========================================================================== */
body.login {
  background: var(--id-bg);
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
body.login .login-card {
  background: var(--id-card);
  border: 1px solid var(--id-line);
  border-radius: 16px;
  padding: 40px 38px 34px;
  width: 100%; max-width: 420px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
body.login .login-brand { text-align: center; margin-bottom: 26px; }
body.login .login-brand img, body.login .brand-logo { max-width: 232px; width: 100%; height: auto; margin: 0 auto 22px; display: block; }
body.login .login-brand h1 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 22px; font-weight: 700; color: var(--id-text); margin: 0 0 6px; letter-spacing: -.01em;
}
body.login .login-brand p, body.login .login-sub { color: var(--id-muted); font-size: 14px; margin: 0; }
body.login .btn { width: 100%; justify-content: center; padding: 13px 18px; }
body.login .form-label { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--id-muted); font-weight: 600; }
body.login .err, body.login .error { color: var(--id-red); }

/* ==========================================================================
   Responsive. The design is desktop-first; these are deliberate reflows,
   not a scaled-down desktop.
   ========================================================================== */
@media (min-width: 1800px) {
  :root { --id-gutter: 34px; }
  .id-hero h1 { font-size: 58px; }
  .id-hero { min-height: 210px; padding: 46px 52px 50px; }
}
@media (max-width: 1400px) {
  .id-hero h1 { font-size: 44px; }
  .id-hero p { font-size: 16px; }
}
@media (max-width: 1200px) {
  .id-hero { padding-right: 46px; }
  .id-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .id-band  { grid-template-columns: minmax(0,1fr); }
  .id-hero-tag { display: none; }
  .id-hero::after { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 88%);
                            mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 88%); }
}
@media (max-width: 1024px) {
  .id-search { flex-basis: 320px; }
  .id-hero { padding: 32px 30px 34px; min-height: 0; }
  .id-hero h1 { font-size: 38px; }
}
@media (max-width: 900px) {
  :root { --id-gutter: 18px; }
  /* A fixed footer costs too much of a short viewport; let it scroll away. */
  .id-foot { position: static; height: auto; padding: 16px 18px; }
  .main { padding-bottom: 0; }
  .sidebar { bottom: 0; }
  /* dash.css already turns the sidebar into a drawer below 900px; keep that
     behaviour and make the drawer sit under the full-width header. */
  .topbar-brand { width: auto; flex: 0 0 auto; padding-left: 8px; }
  .topbar-brand img { width: 140px; }
  .topbar { gap: 14px; padding-right: 16px; }
  .main { margin-left: 0; }
  .sidebar { top: var(--id-header-h); }
  .id-search { display: none; }
}
@media (max-width: 760px) {
  :root { --id-header-h: 66px; }
  .id-stats { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .id-hero { padding: 26px 22px 28px; }
  .id-hero h1 { font-size: 32px; }
  .id-hero p  { font-size: 15px; }
  .id-hero::after { opacity: .22; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 100%);
                                          mask-image: linear-gradient(90deg, transparent 0%, #000 100%); }
  .id-actions { grid-template-columns: minmax(0,1fr); }
  .id-user-name, .id-user-role { display: none; }
  .id-panel { padding: 18px 16px 20px; }
  /* Tables get horizontal scroll rather than crushing or overflowing the page */
  .table-wrap, .card > table, .id-panel > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 430px) {
  :root { --id-gutter: 14px; }
  .id-user svg { display: none; }
  .topbar { gap: 10px; padding-right: 12px; }
  .id-hero { padding-left: 22px; padding-right: 22px; }
  .topbar-brand img { width: 118px; }
  .id-hero h1 { font-size: 27px; }
  .id-eyebrow { font-size: 11px; letter-spacing: .16em; }
  .id-foot { padding: 16px 14px; flex-wrap: wrap; gap: 10px; }
  .id-foot .sep { display: none; }
}
/* Never let the page scroll sideways at any width. */
.main, .page { max-width: 100%; }
.page > * { min-width: 0; }

/* The drawer itself, on dark.
   Stacking order matters here: this file loads after dash.css, so its base
   .sidebar z-index was winning inside dash.css's drawer media query and
   putting the open drawer UNDERNEATH the scrim. Restated explicitly. */
@media (max-width: 900px) {
  .topbar    { z-index: 60; }
  .sidebar   { z-index: 50; box-shadow: 0 24px 60px rgba(0,0,0,.6);
               border-right: 1px solid var(--id-line-2); }
  .nav-scrim { z-index: 45; background: rgba(0,0,0,.62); }
  .id-foot   { z-index: 20; }
}

/* ==========================================================================
   Inherited-surface sweep
   Found by walking every page in Chromium and listing elements still painting
   a light background from the Mythic theme. Each entry below is one of those.
   ========================================================================== */

/* Form controls. .form-textarea was not in the first pass, and bare <select>
   was falling back to the UA's light control chrome. */
.form-input, .form-textarea,
select, select.form-select, .form-select,
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], input[type=url], textarea {
  background-color: var(--id-raised) !important;
  border: 1px solid var(--id-line);
  border-radius: var(--id-r-sm);
  color: var(--id-text);
}
select, .form-select {
  -webkit-appearance: none; appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--id-muted) 50%),
                    linear-gradient(135deg, var(--id-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 11px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select option { background: var(--id-card); color: var(--id-text); }
input::placeholder, textarea::placeholder { color: var(--id-faint); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; }

/* Report surfaces from dash-detail.css: white paper on a dark app. */
.report-body, .report-chart, .report-card, .report-section, .report-table,
.paper, .panel-white, .white-card {
  background-color: var(--id-card) !important;
  color: var(--id-text-2);
  border-color: var(--id-line) !important;
}

/* Status pills: keep them readable as tinted chips rather than solid pastels. */
.stat-pill {
  background-color: rgba(255,255,255,.07) !important;
  color: var(--id-text-2) !important;
  border-color: var(--id-line-2) !important;
}
.stat-pill.stat-live, .stat-pill.stat-live_seo {
  background-color: rgba(52,211,153,.14) !important; color: var(--id-green) !important;
  border-color: rgba(52,211,153,.3) !important;
}
.stat-pill.stat-in_review, .stat-pill.stat-in_development {
  background-color: rgba(251,191,36,.14) !important; color: #FBBF24 !important;
  border-color: rgba(251,191,36,.3) !important;
}
.stat-pill.stat-coming_soon, .stat-pill.stat-planning {
  background-color: rgba(96,165,250,.14) !important; color: #60A5FA !important;
  border-color: rgba(96,165,250,.3) !important;
}

/* ---------- Section navigation ------------------------------------------
   Used where one sidebar item covers several existing pages, e.g. Billing. */
.id-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.id-subnav-item {
  padding: 8px 14px; border-radius: 999px;
  background: var(--id-raised); border: 1px solid var(--id-line);
  color: var(--id-text-2); font-size: 13.5px; font-weight: 600;
}
.id-subnav-item:hover { background: var(--id-hover); color: var(--id-text); }
.id-subnav-item.is-active { background: var(--id-accent-strong); border-color: var(--id-accent-strong); color: #fff; }

/* ---------------------------------------------------------------------------
   Integrations: inline link editor.

   Added here rather than in dash.css because dash.css is the SHARED sheet --
   the owner portal loads it too -- and these three classes exist only on the
   Integrations page. They add rules for new class names and change nothing
   that already existed.

   The row already holds a Verify button and an Unmap button, so the editor has
   to sit in a narrow column without forcing the table wider than the viewport;
   at phone width the whole row stacks instead.
--------------------------------------------------------------------------- */
.link-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: 6px;
}
.link-edit-prefix {
  width: 104px;
  min-width: 0;
  padding: 4px 8px;
  font-size: 12px;
  height: 28px;
}
.link-edit-primary {
  font-size: 12px;
  white-space: nowrap;
  gap: 4px;
}
@media (max-width: 900px) {
  .link-edit { display: flex; margin-left: 0; margin-top: 6px; }
  .link-edit-prefix { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Integrations: health states and the scheduled-job panel.

   Six state colours, one per state in src/lib/integration-health.ts. They are
   here rather than in the shared dash.css for the same reason as the link
   editor above: only this page has them, and dash.css is loaded by pages that
   do not.

   The colours carry meaning, so none of them is the only signal: every pill
   also states its name in words, and the row beneath it carries the sentence
   explaining what the state means for that property. A colour-blind reader
   loses nothing.
--------------------------------------------------------------------------- */
.hs-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.hs-current      { background: #e2f3e5; color: #22633f; border-color: #b7dfc2; }
.hs-backfilling  { background: #e6efff; color: #2c4f89; border-color: #cadbf7; }
.hs-unresolved   { background: #eeeae0; color: #7a6b47; border-color: #ddd6c0; }
.hs-stale        { background: #fff2dc; color: #955a12; border-color: #f4dbaa; }
.hs-needs_access { background: #f0e4ff; color: #5a3a86; border-color: #ddcaf0; }
.hs-failed       { background: #fde4e6; color: #8d2230; border-color: #f4c2c7; }

/* The explanation under a state. Never truncated: a sentence that is cut in
   half is worse than no sentence, because the half that survives reads like a
   complete statement. */
.hs-why {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--id-text-2);
  max-width: 46ch;
}
.hs-meta { font-size: 12px; color: var(--id-text-2); }
.hs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* A backfill's progress. A bar rather than a percentage on its own because the
   useful comparison is between rows: which property is furthest behind. */
.hs-bar {
  position: relative;
  height: 6px;
  width: 120px;
  max-width: 100%;
  border-radius: 999px;
  background: var(--id-hover, #1a1f23);
  overflow: hidden;
  margin-top: 5px;
}
.hs-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--id-accent);
  border-radius: 999px;
}

/* The scheduled-job panel carries no buttons on purpose: every job holds a
   PostgreSQL advisory lock for the duration of a run, and a button that
   launched a second full backfill would spend Google quota re-importing what
   the first one is already importing. See netlify.toml. */
.hs-job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.hs-job {
  border: 1px solid var(--id-line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--id-surface-2, transparent);
}
.hs-job h3 { margin: 0 0 6px; font-size: 13.5px; letter-spacing: .01em; }
.hs-job dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; }
.hs-job dt { color: var(--id-text-2); }
.hs-job dd { margin: 0; }
@media (max-width: 900px) {
  .hs-why { max-width: none; }
  .hs-bar { width: 100%; }
}

/* ==========================================================================
   Command center (2026-09-21, local build)

   Dashboard home, client and site detail, tasks, SEO evidence and the search
   palette. New class names only (cc-*): nothing above is changed, so every
   existing page renders exactly as before.
   ========================================================================== */
.cc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 2px 0 20px; flex-wrap: wrap; }
.cc-title { margin: 4px 0 0; font-size: 26px; font-weight: 650; color: var(--id-text); letter-spacing: -.01em; }
.cc-sub { margin: 6px 0 0; color: var(--id-muted); font-size: 13.5px; }
.cc-search-btn {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 14px; border-radius: var(--id-r-sm);
  background: var(--id-raised); border: 1px solid var(--id-line-2);
  color: var(--id-muted); font: inherit; font-size: 13.5px; cursor: pointer;
}
.cc-search-btn:hover { color: var(--id-text); border-color: var(--id-line-2); background: var(--id-hover); }
.cc-search-btn:focus-visible, .cc-stat:focus-visible, .cc-attn-go:focus-visible { outline: 2px solid var(--id-accent); outline-offset: 2px; }

.cc-stats { grid-template-columns: repeat(6, minmax(0,1fr)); }
.cc-stats.is-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.cc-stat { color: inherit; text-decoration: none; transition: border-color .13s ease, background .13s ease; }
.cc-stat:hover { border-color: var(--id-line-2); background: var(--id-hover); }
.cc-stat .id-stat-value { font-size: 30px; }
.cc-stat.is-alert { border-color: rgba(248,113,113,.45); }
.cc-stat.is-alert .id-stat-value { color: var(--id-red); }
.cc-band { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); align-items: start; }
.cc-band > .id-panel { min-width: 0; }
.cc-note { font-size: 12.5px; margin: 12px 0 0; }
.cc-count { display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 8px; border-radius: 999px; background: var(--id-raised); color: var(--id-text-2); font-size: 12px; font-weight: 700; text-align: center; }

/* Needs attention */
.cc-allclear { display: flex; gap: 10px; align-items: center; padding: 16px; border-radius: var(--id-r-sm); background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.25); color: var(--id-text-2); font-size: 13.5px; }
.cc-allclear svg { color: var(--id-green); flex: 0 0 auto; }
.cc-attn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cc-attn { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--id-line); border-radius: var(--id-r-sm); background: rgba(255,255,255,.015); }
.cc-sev-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--id-muted); align-self: start; margin-top: 5px; }
.cc-sev-critical .cc-sev-dot { background: var(--id-red); box-shadow: 0 0 0 3px rgba(248,113,113,.18); }
.cc-sev-warning  .cc-sev-dot { background: #FBBF24; box-shadow: 0 0 0 3px rgba(251,191,36,.16); }
.cc-sev-info     .cc-sev-dot { background: #60A5FA; box-shadow: 0 0 0 3px rgba(96,165,250,.16); }
.cc-sev-label { display: inline-block; margin-right: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--id-muted); }
.cc-sev-critical .cc-sev-label { color: var(--id-red); }
.cc-sev-warning .cc-sev-label { color: #FBBF24; }
.cc-attn-title { color: var(--id-text); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.cc-attn-detail { margin-top: 3px; color: var(--id-muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.cc-attn-owner { color: var(--id-text-2); margin-right: 6px; }
.cc-attn-owner::after { content: '—'; margin-left: 6px; color: var(--id-faint); }
.cc-attn-go { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }

/* Work queue */
.cc-qgroup + .cc-qgroup { margin-top: 16px; }
.cc-qgroup h3 { margin: 0 0 8px; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--id-muted); font-weight: 700; }
.cc-qgroup h3 a { color: inherit; }
.cc-q-overdue h3 { color: var(--id-red); }
.cc-qgroup ul { list-style: none; margin: 0; padding: 0; }
.cc-qgroup li { padding: 9px 0; border-top: 1px solid var(--id-line); }
.cc-task-title { color: var(--id-text); font-weight: 600; font-size: 14px; }
.cc-task-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 12.5px; color: var(--id-muted); }
.cc-task-meta a { color: var(--id-text-2); }
.cc-late { color: var(--id-red); font-weight: 600; }
.cc-high { color: #FBBF24; font-weight: 600; }

/* Opportunities */
.cc-opps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cc-opp { border: 1px solid var(--id-line); border-radius: var(--id-r-sm); padding: 12px 14px; background: rgba(255,255,255,.015); }
.cc-opp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cc-opp-owner { font-size: 13px; }
.cc-opp-score { margin-left: auto; font-size: 12.5px; color: var(--id-muted); white-space: nowrap; }
.cc-opp-score strong { color: var(--id-text); }
.cc-class { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--id-accent-sf); color: #FF7A93; border: 1px solid rgba(255,25,68,.3); white-space: nowrap; }
.cc-class-branded_leak { background: var(--id-raised); color: var(--id-muted); border-color: var(--id-line-2); }
.cc-class-declining_page, .cc-class-converting_page_losing_visibility { background: rgba(248,113,113,.12); color: #FCA5A5; border-color: rgba(248,113,113,.3); }
.cc-class-rising_query { background: rgba(52,211,153,.1); color: #6EE7B7; border-color: rgba(52,211,153,.3); }
.cc-opp-subject { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.cc-q { color: var(--id-text); font-weight: 600; overflow-wrap: anywhere; }
.cc-p { color: var(--id-text-2); font-size: 12.5px; overflow-wrap: anywhere; }
.cc-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 9px 0 0; }
.cc-facts div { min-width: 0; }
.cc-facts dt { font-size: 11px; color: var(--id-muted); text-transform: uppercase; letter-spacing: .04em; }
.cc-facts dd { margin: 1px 0 0; font-size: 13.5px; color: var(--id-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cc-why { margin-top: 10px; font-size: 13px; }
.cc-why summary { cursor: pointer; color: var(--id-text-2); font-weight: 600; }
.cc-why p { margin: 8px 0 0; line-height: 1.5; color: var(--id-text-2); }
.cc-why .btn { margin-top: 10px; }
/* The actions of a stored opportunity, on the row rather than inside its
   disclosure. Same gap as .opp-actions on the SEO page so the two lists do
   not space their buttons differently. */
.cc-opp-actions { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Activity */
.cc-feed { list-style: none; margin: 0; padding: 0; }
.cc-feed li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--id-line); }
.cc-feed li:first-child { border-top: 0; padding-top: 0; }
.cc-feed-ico { width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--id-raised); color: var(--id-text-2); }
.cc-feed li.is-warn .cc-feed-ico { color: var(--id-red); }
.cc-feed-sum { font-size: 13.5px; color: var(--id-text); overflow-wrap: anywhere; }
.cc-feed-sum a { color: inherit; }
.cc-feed-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--id-muted); margin-top: 2px; }

/* Detail pages */
.cc-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--id-muted); margin-bottom: 8px; }
.cc-crumbs a { color: var(--id-text-2); }
.cc-kv { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 7px 16px; margin: 0; font-size: 13.5px; }
.cc-kv dt { color: var(--id-muted); }
.cc-kv dd { margin: 0; color: var(--id-text); overflow-wrap: anywhere; }
.cc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-bottom: 20px; }
.cc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-bottom: 20px; }
.cc-site-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cc-site-card { border: 1px solid var(--id-line); border-radius: var(--id-r-sm); padding: 14px 16px; background: rgba(255,255,255,.015); display: flex; flex-direction: column; gap: 8px; color: inherit; }
.cc-site-card:hover { border-color: var(--id-line-2); background: var(--id-hover); }
.cc-site-card h3 { margin: 0; font-size: 15.5px; color: var(--id-text); }
.cc-site-card .mono { font-size: 12.5px; color: var(--id-text-2); overflow-wrap: anywhere; }
.cc-site-card .cc-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--id-muted); }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--id-raised); border: 1px solid var(--id-line); color: var(--id-text-2); font-size: 12px; font-weight: 600; }
.cc-spark { display: block; width: 100%; height: 44px; }
.cc-spark path.line { fill: none; stroke: var(--id-accent); stroke-width: 1.6; }
.cc-spark path.area { fill: var(--id-accent-sf); stroke: none; }
.cc-trend { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 14px; }
.cc-trend-cell { border: 1px solid var(--id-line); border-radius: var(--id-r-sm); padding: 12px 14px; }
.cc-trend-cell .lbl { font-size: 12px; color: var(--id-muted); }
.cc-trend-cell .val { font-size: 22px; font-weight: 700; color: var(--id-text); font-variant-numeric: tabular-nums; }

/* Filters */
.cc-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin: 0 0 18px; }
.cc-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--id-muted); font-weight: 600; }
.cc-filters select, .cc-filters input { min-width: 150px; }
.cc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.cc-status-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.cc-status-form select { height: 30px; padding: 2px 8px; font-size: 12.5px; }
.tbl tr.is-target { outline: 2px solid var(--id-accent); outline-offset: -2px; }
.id-anchor-row:target { outline: 2px solid var(--id-accent); outline-offset: -2px; }
.cc-flash { padding: 10px 14px; border-radius: var(--id-r-sm); margin-bottom: 16px; font-size: 13.5px; border: 1px solid var(--id-line-2); background: var(--id-raised); color: var(--id-text); }
.cc-flash.is-error { border-color: rgba(248,113,113,.45); color: #FCA5A5; }

/* Content pipeline */
.cc-pipeline { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
.cc-stage { border: 1px solid var(--id-line); border-radius: var(--id-r-sm); padding: 12px 14px; background: var(--id-card); color: inherit; }
.cc-stage:hover { border-color: var(--id-line-2); }
.cc-stage.is-active { border-color: var(--id-accent); }
.cc-stage .n { font-size: 24px; font-weight: 700; color: var(--id-text); }
.cc-stage .l { font-size: 12.5px; color: var(--id-muted); }

/* Command palette */
.cc-palette[hidden] { display: none; }
.cc-palette { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.cc-palette-box { width: min(640px, 100%); background: var(--id-card); border: 1px solid var(--id-line-2); border-radius: var(--id-r); box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; }
.cc-palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--id-line); color: var(--id-muted); }
.cc-palette-input input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--id-text); font: inherit; font-size: 16px; }
.cc-palette-list { list-style: none; margin: 0; padding: 6px; max-height: 55vh; overflow-y: auto; }
.cc-palette-list li a { display: flex; gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: 8px; color: var(--id-text-2); }
.cc-palette-list li a .t { color: var(--id-text); font-weight: 600; overflow-wrap: anywhere; }
.cc-palette-list li a .k { margin-left: auto; font-size: 11px; color: var(--id-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.cc-palette-list li a .s { font-size: 12.5px; color: var(--id-muted); overflow-wrap: anywhere; }
.cc-palette-list li.is-sel a, .cc-palette-list li a:hover { background: var(--id-raised); }
.cc-palette-empty { padding: 18px; color: var(--id-muted); font-size: 13.5px; }

/* Confirmation dialog. Same scrim and card as the palette above, one step
   higher so it can be asked from on top of it, and sized for a question. */
.cc-confirm[hidden] { display: none; }
.cc-confirm { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.55); display: flex; justify-content: center; align-items: center; padding: 16px; }
.cc-confirm-box { width: min(440px, 100%); background: var(--id-card); border: 1px solid var(--id-line-2); border-radius: var(--id-r); box-shadow: 0 20px 60px rgba(0,0,0,.5); padding: 20px; }
.cc-confirm-title { margin: 0 0 8px; font-size: 17px; font-weight: 650; color: var(--id-text); }
.cc-confirm-text { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--id-text-2); }
.cc-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 640px) { .cc-confirm-actions { flex-direction: column-reverse; } .cc-confirm-actions .btn { width: 100%; justify-content: center; } }
.cc-palette-foot { padding: 8px 14px; border-top: 1px solid var(--id-line); font-size: 11.5px; color: var(--id-faint); display: flex; gap: 14px; flex-wrap: wrap; }
.id-search.is-live { cursor: pointer; }
.id-search.is-live:hover { border-color: var(--id-line-2); }

@media (max-width: 1640px) {
  .cc-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1200px) {
  .cc-band, .cc-grid-2 { grid-template-columns: minmax(0,1fr); }
  .cc-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cc-pipeline { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .cc-stats, .cc-stats.is-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .cc-stat .id-stat-value { font-size: 24px; }
  .cc-grid-3 { grid-template-columns: minmax(0,1fr); }
  .cc-pipeline { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cc-attn { grid-template-columns: 10px minmax(0,1fr); }
  .cc-attn-go { grid-column: 2; justify-self: start; }
  .cc-opp-score { margin-left: 0; }
  .cc-search-btn { width: 100%; }
  .cc-title { font-size: 22px; }
  .cc-filters label, .cc-filters select, .cc-filters input { width: 100%; }
}
@media (max-width: 430px) {
  .id-stats.cc-stats, .id-stats.cc-stats.is-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cc-stat { padding: 14px; }
  .cc-stat .id-stat-label { font-size: 13px; }
}
.cc-pill-none { background: var(--id-raised); color: var(--id-muted); border-color: var(--id-line-2); }
button.id-search { font: inherit; text-align: left; color: inherit; }
.id-search.is-live .id-search-text { color: var(--id-muted); }
.id-search.is-live .id-search-text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.5px; }
.cc-notif { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--id-line); }
.cc-notif:first-child { border-top: 0; }
.cc-notif .dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 6px; background: transparent; }
.cc-notif.is-unread .dot { background: var(--id-accent); }
.cc-notif .subj { color: var(--id-text); font-weight: 600; }
.cc-notif .body { color: var(--id-text-2); font-size: 13px; margin-top: 2px; }
.cc-notif time { color: var(--id-muted); font-size: 12px; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cc-filters input[type="checkbox"] { min-width: 0; width: auto; }
/* .acct-name came from the inherited sheet in a display serif; every other
   entity name in this dashboard is set in Inter. One face for names. */
.acct-name { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 14.5px; letter-spacing: 0; }
.cc-palette-input input, .cc-palette-input input:focus { border: 0; box-shadow: none; outline: none; padding: 0; height: auto; background: transparent; }
/* Tables scroll sideways inside their frame on narrow screens instead of
   clipping columns (dash.css sets overflow:hidden for the rounded corners). */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  /* Search stays reachable on phones: the bar collapses to an icon button. */
  .id-search.is-live { display: flex; flex: 0 0 44px; width: 44px; padding: 0; justify-content: center; margin-left: auto; }
  .id-search.is-live .id-search-text, .id-search.is-live .id-kbd { display: none; }
  .topbar-right { margin-left: 0; }
}
.tbl-wrap { position: relative; }

/* ── Admin forms (clients, sites, plans, tasks, site setup, account) ─────── */
a.id-user { color: inherit; text-decoration: none; border-radius: var(--id-r-sm); padding: 4px 6px; margin: -4px -6px; }
a.id-user:hover { background: var(--id-hover); }
a.id-user:focus-visible { outline: 2px solid var(--id-accent); outline-offset: 2px; }
.adm-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; }
.adm-grid .span-2 { grid-column: 1 / -1; }
.adm-help { font-size: 12.5px; color: var(--id-muted); margin: 4px 0 0; line-height: 1.45; }
.adm-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--id-text-2); margin: 6px 0; }
.adm-check input { margin-top: 3px; }
.adm-danger { border-color: rgba(248,113,113,.35); }
.adm-status-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.adm-status-list label { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; align-items: start; padding: 10px 12px; border: 1px solid var(--id-line); border-radius: var(--id-r-sm); cursor: pointer; font-size: 13.5px; }
.adm-status-list label:hover { border-color: var(--id-line-2); }
.adm-status-list input { margin-top: 3px; }
.adm-status-list strong { color: var(--id-text); display: block; }
.adm-status-list span { color: var(--id-muted); font-size: 12.5px; }
.adm-inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.adm-row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.adm-note { font-size: 12.5px; color: var(--id-muted); }
.form-input[aria-invalid="true"], .form-select[aria-invalid="true"], .form-textarea[aria-invalid="true"] { border-color: rgba(248,113,113,.7); }
[data-form-error][hidden] { display: none; }
.adm-out { border: 1px solid rgba(251,191,36,.35); background: rgba(251,191,36,.06); color: var(--id-text-2); padding: 10px 14px; border-radius: var(--id-r-sm); font-size: 13.5px; margin-bottom: 16px; }
details.adm-edit > summary { cursor: pointer; color: var(--id-text-2); font-size: 13px; }
details.adm-edit[open] { padding-bottom: 8px; }
@media (max-width: 760px) {
  .adm-grid { grid-template-columns: minmax(0,1fr); }
}

/* ── Accessibility: text contrast on the dark theme (WCAG 2.1 AA, 4.5:1) ──
   The inherited light-theme alert colours were never retokenised: red text on
   the dark panel measured 2.06:1. These keep each alert's hue and meet AA. */
.alert-success { color: #86EFAC; background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.35); }
.alert-warning { color: #FCD34D; background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.35); }
.alert-error   { color: #FCA5A5; background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.40); }
.id-foot .ver { color: var(--id-muted); }                 /* was 3.44:1 */
.hs-unresolved { color: #5f5234; }                        /* was 4.34:1 */
/* A table that scrolls sideways is a region a keyboard can reach (set in the
   layout script only when it actually overflows). */
.tbl-wrap[tabindex]:focus-visible { outline: 2px solid var(--id-accent); outline-offset: 2px; }
.adm-status-list.is-cap strong { text-transform: capitalize; }
.tbl-wrap > table[tabindex]:focus-visible { outline: 2px solid var(--id-accent); outline-offset: 2px; }
.acct-name a { font-family: inherit; font-weight: inherit; }
.tbl td .acct-name { font-family: Inter, system-ui, sans-serif; font-size: 14.5px; letter-spacing: 0; }

/* ── Bulk property verification (Integrations) ─────────────────────────────
   The control sits in the panel head beside the title, and each row keeps the
   per-property note the single Verify button already used, so a bulk run and
   a single run leave the page looking the same. */
.verify-all-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
.verify-all-note {
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 46ch;
  text-align: right;
}
.verify-note.verify-ok  { color: var(--green); }
.verify-note.verify-bad { color: var(--red); }

@media (max-width: 760px) {
  /* The head stacks, and the note goes left-aligned under the button so a
     long failure sentence is not ragged against the right edge. */
  .verify-all-wrap { justify-content: flex-start; width: 100%; }
  .verify-all-note { text-align: left; max-width: 100%; }
}

/* ── Opportunity list ──────────────────────────────────────────────────────
   One row per opportunity, on a grid so the numbers line up down the page.
   The card layout this replaces left 617px of 1170 empty on every row and
   needed twenty screens to show ninety-five of them. */
.opp-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

.opp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 72px 110px;
  grid-template-areas: "main metrics priority actions" "why why why why";
  align-items: center;
  column-gap: 18px;
  row-gap: 0;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
}
.opp-row:first-child { border-top: 0; }
.opp-row:nth-child(even) { background: var(--cream); }
.opp-row.is-worked .opp-main { opacity: 0.72; }

.opp-main { grid-area: main; min-width: 0; }
.opp-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.opp-subject {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 13.5px;
}
.opp-q {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34ch;
}
.opp-p {
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.opp-class, .opp-state {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}
.opp-state-open_work          { border-color: var(--blue);  color: var(--blue); }
.opp-state-recently_completed { border-color: var(--green); color: var(--green); }
.opp-state-dismissed,
.opp-state-marked_wont_do     { border-color: var(--muted); color: var(--muted); }
.opp-owner { font-size: 12px; color: var(--muted); text-decoration: none; }
.opp-owner:hover { text-decoration: underline; }

/* The numbers. Fixed widths so columns align from row to row even when a
   value is a dash. */
.opp-metrics {
  grid-area: metrics;
  display: flex;
  gap: 14px;
  margin: 0;
}
.opp-metrics > div { min-width: 54px; text-align: right; }
.opp-metrics dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}
.opp-metrics dd {
  margin: 0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.opp-priority { grid-area: priority; text-align: right; }
.opp-priority-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.2;
}
.opp-priority-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* The action is never inside the disclosure: it is why the page exists. */
.opp-actions { grid-area: actions; justify-self: end; }

.opp-why { grid-area: why; margin-top: 4px; }
.opp-why > summary {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 0;
}
.opp-why > summary::before { content: "▸"; font-size: 9px; }
.opp-why[open] > summary::before { content: "▾"; }
.opp-why > summary::-webkit-details-marker { display: none; }
.opp-why-body {
  padding: 8px 0 4px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 78ch;
}
.opp-why-body p { margin: 0 0 6px; }
.opp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 6px 0;
}
.opp-facts dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}
.opp-facts dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }

.opp-count { font-size: 13px; margin: 0 0 8px; }
.opp-filters { align-items: flex-end; }
.opp-check { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 8px; }
.opp-clear { font-size: 13px; align-self: center; }

.opp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px 0 2px;
}
.opp-pager-at { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.btn.is-disabled { opacity: 0.45; pointer-events: none; }

/* Tablet: the numbers move under the subject and the action stays on the
   right, because reaching for it is the whole point. */
@media (max-width: 1100px) {
  .opp-row {
    grid-template-columns: minmax(0, 1fr) 72px 110px;
    grid-template-areas: "main priority actions" "metrics metrics metrics" "why why why";
    row-gap: 6px;
  }
  .opp-metrics { justify-content: flex-start; }
  .opp-metrics > div { text-align: left; min-width: 62px; }
  .opp-q { max-width: 100%; }
}

/* Phone: one column, priority and action on one line under the subject. */
@media (max-width: 640px) {
  .opp-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "main main" "metrics metrics" "priority actions" "why why";
    column-gap: 12px;
    padding: 11px 12px;
  }
  .opp-subject { flex-direction: column; align-items: flex-start; gap: 1px; }
  .opp-q, .opp-p { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .opp-metrics { gap: 10px; flex-wrap: wrap; }
  .opp-priority { text-align: left; align-self: center; }
  .opp-priority-value { display: inline; font-size: 15px; }
  .opp-priority-label { margin-left: 4px; }
  .opp-actions { justify-self: end; }
  .opp-pager { justify-content: space-between; }
}

/* ── Branded-query terms (client page) ─────────────────────────────────────
   The reach percentage is the point of the panel, so it gets its own column
   and tabular figures: a column of percentages is comparable at a glance,
   a sentence containing one is not. */
.brand-terms { list-style: none; margin: 0 0 14px; padding: 0; }
.brand-term {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px auto;
  align-items: start;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.brand-term:first-child { border-top: 0; }
.brand-term-text { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.brand-term-note { margin: 2px 0 0; font-size: 12px; line-height: 1.45; max-width: 72ch; }
.brand-term-reach { text-align: right; }
.brand-term-pct {
  display: block;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.brand-term-of { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.brand-term-warn  .brand-term-pct { color: var(--amber); }
.brand-term-alarm .brand-term-pct { color: var(--red); }
.brand-term-alarm .brand-term-note { color: var(--red); }

.brand-term-add {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.brand-term-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 240px; }
.brand-term-field > span { font-size: 12px; color: var(--muted); }
.brand-term-field-note { flex: 1 1 180px; }

@media (max-width: 640px) {
  .brand-term {
    grid-template-columns: 1fr auto;
    grid-template-areas: "main main" "reach actions";
    gap: 8px 12px;
  }
  .brand-term-main { grid-area: main; }
  .brand-term-reach { grid-area: reach; text-align: left; }
  .brand-term-pct { display: inline; }
  .brand-term-of { margin-left: 4px; }
  .brand-term form { grid-area: actions; justify-self: end; }
  .brand-term-add { flex-direction: column; align-items: stretch; }
}

/* ── Onboarding ────────────────────────────────────────────────────────────
   The page exists to make a distinction, so the steps are numbered and the
   explanation of each sits under it rather than in a paragraph above. */
.onb-lede { font-size: 14px; line-height: 1.55; max-width: 80ch; margin: 0 0 14px; color: var(--text); }
.onb-note { font-size: 12.5px; line-height: 1.5; max-width: 80ch; margin: 0 0 10px; }

.onb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.onb-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.onb-step:first-child { border-top: 0; }
.onb-step-n {
  width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--gold-soft); color: var(--ink);
  font-size: 11.5px; font-weight: 700;
}
.onb-step p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; max-width: 72ch; }
.onb-step-count {
  font-size: 11px; font-weight: 650; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--amber); color: var(--amber);
}

.onb-props, .onb-sites { list-style: none; margin: 0 0 10px; padding: 0; }
.onb-prop, .onb-site {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.onb-prop:first-child, .onb-site:first-child { border-top: 0; }
.onb-prop-id { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.onb-prop-meta { display: block; font-size: 12px; margin-top: 1px; }
.onb-prop-none { margin: 4px 0 0; font-size: 12.5px; }
.onb-suggest { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: 12.5px; }
.onb-suggest-item { color: var(--blue); text-decoration: none; }
.onb-suggest-item:hover { text-decoration: underline; }
.onb-prop-actions, .onb-site-actions { display: flex; gap: 8px; justify-self: end; flex-wrap: wrap; }

.onb-site { grid-template-columns: minmax(0, 1fr) auto auto; }
.onb-site-domain { font-size: 12px; margin-top: 1px; }
.onb-pill {
  font-size: 11px; font-weight: 650; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); background: var(--bg);
}
.onb-pill-mapped    { border-color: var(--amber); color: var(--amber); }
.onb-pill-verified  { border-color: var(--red);   color: var(--red); }
.onb-pill-importing { border-color: var(--blue);  color: var(--blue); }
.onb-pill-ready     { border-color: var(--green); color: var(--green); }

@media (max-width: 640px) {
  .onb-prop, .onb-site {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "step" "actions";
  }
  .onb-prop-main, .onb-site-main { grid-area: main; }
  .onb-site-step { grid-area: step; }
  .onb-prop-actions, .onb-site-actions { grid-area: actions; justify-self: start; }
  .onb-step { grid-template-columns: 22px minmax(0, 1fr); }
  .onb-step-count { grid-column: 2; justify-self: start; }
}

/* ── Task detail ───────────────────────────────────────────────────────────
   One page for two kinds of task. An SEO execution task gains the evidence,
   the brief and the measurement; an administrative one shows none of it. */
.task-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-kind {
  font-size: 11px; font-weight: 650; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--muted); background: var(--bg);
}
.task-kind.is-seo { border-color: var(--gold); color: var(--ink); background: var(--gold-soft); }
.task-status-completed { border-color: var(--green); color: var(--green); }
.task-status-wont_do   { border-color: var(--muted); color: var(--muted); }
.task-status-open, .task-status-in_progress, .task-status-reopened {
  border-color: var(--blue); color: var(--blue);
}

.task-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 20px;
  margin: 4px 0 14px;
}
.task-facts dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin: 0;
}
.task-facts dd { margin: 1px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
.task-body {
  margin: 0 0 14px; font-size: 13.5px; line-height: 1.55;
  white-space: pre-line; max-width: 80ch;
}
.task-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }

.meas-verdict { font-size: 14px; line-height: 1.55; margin: 0 0 12px; max-width: 80ch; }
.meas-windows { margin-bottom: 12px; }
.meas-tbl { margin-bottom: 12px; max-width: 540px; }
.meas-note { font-size: 12.5px; line-height: 1.5; max-width: 80ch; margin: 0; }
.meas-too_early { border-color: var(--muted); color: var(--muted); }
.meas-partial   { border-color: var(--amber); color: var(--amber); }
.meas-ready     { border-color: var(--green); color: var(--green); }
.meas-no_data   { border-color: var(--red);   color: var(--red); }

.brief-section { padding: 12px 0; border-top: 1px solid var(--line); }
.brief-section:first-of-type { border-top: 0; padding-top: 4px; }
.brief-section h3 {
  margin: 0 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
.brief-line { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; max-width: 84ch; }
.brief-bullet {
  margin: 0 0 5px 18px; font-size: 13.5px; line-height: 1.55; max-width: 82ch;
  list-style: disc;
}
.brief-missing { padding: 12px 0 0; border-top: 1px solid var(--line); }
.brief-missing h3 { margin: 0 0 6px; font-size: 13px; color: var(--red); }
.brief-missing ul { margin: 6px 0 0 18px; }
.brief-missing li { font-size: 13px; line-height: 1.55; margin-bottom: 5px; max-width: 82ch; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  .task-facts { grid-template-columns: 1fr 1fr; }
  .task-actions { flex-direction: column; align-items: stretch; }
  .meas-tbl { font-size: 13px; }
}

/* Onboarding: sites whose primary Search Console property cannot be read.
   Rendered only when there is at least one, so the healthy account sees
   nothing at all. */
.id-panel-warn { border-color: rgba(220, 38, 38, .45); }
.onb-faults { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.onb-fault {
  border: 1px solid var(--id-border, rgba(255, 255, 255, .12));
  border-radius: 10px;
  padding: 12px 14px;
}
.onb-fault-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.onb-fault-head a { font-weight: 600; }
.onb-fault-why { margin: 6px 0 10px; line-height: 1.5; }
.onb-fault-act { margin: 0; }

/* Search Console coverage: which dates have actually been asked for. */
.cov-ok { margin: 10px 0 0; }
.cov-summary { margin: 10px 0 8px; }
.cov-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.cov-list li { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.cov-uri { font-weight: 600; word-break: break-all; }
.cov-count { margin-left: auto; white-space: nowrap; }