/* ==========================================================================
   HERMES SEO — "ATELIER PAPER"
   A Swiss-editorial light theme: warm ledger paper, ink typography,
   hairline rules, letterpress indigo. Data set like a broadsheet
   financial supplement — engraved tables, tabular numerals, margin notes.
   Pure CSS. No images, no build step. Styles the existing DOM only.
   ========================================================================== */

:root{
  color-scheme:light;

  /* paper + ink */
  --bg:#f3f1ea;
  --panel:#fefdfb;
  --surface:#f7f5ef;
  --surface-2:#edeae0;
  --text:#1d1f26;
  --soft:#454a56;
  --muted:#6b7080;
  --faint:#9aa0ad;

  /* rules (hairlines) */
  --border:#dcd7c9;
  --border-soft:#e8e4d8;
  --rule-strong:#cfc9b9;
  --ink-line:rgba(29,31,38,.10);

  /* accents */
  --brand:#5e6ad2;
  --brand-2:#4450b8;          /* ink-safe indigo for small text */
  --brand-wash:rgba(94,106,210,.10);
  --critical:#c2362e;
  --critical-ink:#a4271f;
  --warning:#b45309;
  --warning-ink:#92480a;
  --info:#0e7490;
  --info-ink:#0c5e75;
  --success:#1a7f5a;
  --success-ink:#136648;

  /* geometry + type */
  --radius:10px;
  --radius-sm:7px;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* elevation — paper lift, not glow */
  --lift-1:0 1px 2px rgba(29,31,38,.05),0 1px 0 rgba(255,255,255,.6) inset;
  --lift-2:0 1px 2px rgba(29,31,38,.05),0 10px 28px -12px rgba(29,31,38,.14);
  --lift-3:0 2px 6px rgba(29,31,38,.08),0 28px 64px -20px rgba(29,31,38,.28);
}

/* --------------------------------------------------------------------------
   base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--text);
  font:14px/1.55 var(--sans);
  font-feature-settings:"cv01","ss03";
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-color:var(--bg);
  /* engineering-ledger paper: faint indigo wash + graph grid in the margins */
  background-image:
    radial-gradient(1100px 460px at 50% -120px,rgba(94,106,210,.085),transparent 62%),
    linear-gradient(rgba(29,31,38,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,31,38,.032) 1px,transparent 1px);
  background-size:auto,34px 34px,34px 34px;
  background-attachment:fixed;
}

a{text-decoration:none;color:inherit}

b,strong{font-weight:620}

::selection{background:rgba(94,106,210,.24);color:var(--text)}

/* --------------------------------------------------------------------------
   utilities
   -------------------------------------------------------------------------- */
.hidden{display:none !important}

.mono{
  font-family:var(--mono);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

.dim{color:var(--faint)}
.sub{color:var(--muted)}

.good{color:var(--success-ink)}
.warn{color:var(--warning-ink)}
.bad{color:var(--critical-ink)}

.eyebrow{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--brand-2);
  text-transform:uppercase;
  letter-spacing:.16em;
  font:540 10.5px/1.3 var(--mono);
}
/* editorial signature: a short indigo dash leads every eyebrow */
.eyebrow::before{
  content:"";
  width:16px;
  height:2px;
  flex:none;
  background:currentColor;
  opacity:.55;
}

.empty{
  padding:32px;
  border:1px dashed var(--rule-strong);
  border-radius:var(--radius);
  background:rgba(255,255,255,.45);
  color:var(--muted);
  text-align:center;
  font-size:13px;
}

/* --------------------------------------------------------------------------
   focus, scrollbars, motion
   -------------------------------------------------------------------------- */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}

*{scrollbar-width:thin;scrollbar-color:#c8c2b2 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:#c8c2b2;
  border-radius:99px;
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background-color:#aaa491}
::-webkit-scrollbar-corner{background:transparent}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   layout shell
   -------------------------------------------------------------------------- */
.shell{
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
  min-height:100vh;
}

main{
  padding:34px 42px 64px;
  max-width:1480px;
  width:100%;
  margin:0 auto;
  min-width:0;
}

/* --------------------------------------------------------------------------
   sidebar — the book's margin column
   -------------------------------------------------------------------------- */
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:22px 18px;
  border-right:1px solid var(--border);
  background:linear-gradient(180deg,#efece3,#ebe7dc);
  box-shadow:1px 0 0 rgba(255,255,255,.55) inset;
  display:flex;
  flex-direction:column;
  gap:24px;
  overflow-y:auto;
}

.brand{display:flex;gap:12px;align-items:center;padding:2px 4px}
.brand-mark{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:9px;
  background:linear-gradient(165deg,#6873dc,var(--brand) 55%,#4d59c4);
  color:#fff;
  font-weight:700;
  font-size:16px;
  letter-spacing:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 0 rgba(29,31,38,.22),
    0 6px 16px -6px rgba(94,106,210,.55);
}
.brand b{display:block;font-weight:640;letter-spacing:-.2px;font-size:14.5px}
.brand small{color:var(--muted);font-size:11.5px}

.side-section{display:flex;flex-direction:column;gap:8px;min-height:0}

.side-label{
  font:540 10px/1 var(--mono);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
  padding:0 6px;
  display:flex;
  align-items:center;
  gap:8px;
}
.side-label::after{content:"";flex:1;height:1px;background:var(--border)}

.business-list{display:grid;gap:3px;overflow-y:auto;max-height:52vh;padding:1px}

.biz-item{
  display:grid;
  gap:2px;
  text-align:left;
  width:100%;
  padding:9px 12px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  color:var(--soft);
  font:inherit;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.biz-item:hover{background:rgba(255,255,255,.65)}
.biz-item.active{
  background:#fff;
  border-color:var(--border);
  box-shadow:inset 3px 0 0 var(--brand),var(--lift-1);
}
.biz-name{font-weight:580;color:var(--text);font-size:13.5px}
.biz-sub{font-size:11.5px;color:var(--muted)}
.side-empty{color:var(--muted);font-size:12.5px;padding:6px;margin:0}

.side-foot{
  margin-top:auto;
  display:grid;
  gap:12px;
  border-top:1px solid var(--border);
  padding-top:16px;
}

.bell{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  color:var(--soft);
  cursor:pointer;
  font:inherit;
  font-weight:540;
  font-size:13px;
  box-shadow:var(--lift-1);
  transition:border-color .14s ease,color .14s ease,transform .14s ease;
}
.bell:hover{color:var(--text);border-color:var(--rule-strong);transform:translateY(-1px)}
.bell svg{color:var(--brand-2)}

.badge{
  margin-left:auto;
  min-width:20px;
  text-align:center;
  padding:2px 6px;
  border-radius:999px;
  background:var(--critical);
  color:#fff;
  font:600 11px/1.4 var(--mono);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);
}

.sched-line{
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 6px;
  color:var(--muted);
  font:500 11.5px var(--mono);
  letter-spacing:.02em;
}
.status-dot{width:8px;height:8px;border-radius:999px;display:inline-block;flex:none}
.status-dot.on{background:var(--success);box-shadow:0 0 0 3px rgba(26,127,90,.18)}
.status-dot.off{background:var(--faint);box-shadow:0 0 0 3px rgba(29,31,38,.06)}

/* --------------------------------------------------------------------------
   first run
   -------------------------------------------------------------------------- */
.first-run{display:grid;place-items:center;min-height:82vh}

.first-run-card{
  width:min(640px,100%);
  border:1px solid var(--border);
  border-top:3px solid var(--brand);
  border-radius:14px;
  background:var(--panel);
  box-shadow:var(--lift-3);
  padding:34px;
  display:grid;
  gap:14px;
}
.first-run-card h1{
  margin:0;
  font-size:30px;
  letter-spacing:-.8px;
  font-weight:650;
  line-height:1.1;
}

/* --------------------------------------------------------------------------
   business header & tabs
   -------------------------------------------------------------------------- */
.biz-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin:2px 0 18px;
}
.biz-header h1{
  margin:4px 0 14px;
  font-size:clamp(26px,3vw,36px);
  letter-spacing:-1.1px;
  font-weight:650;
  line-height:1.04;
}
.biz-head-actions{display:flex;gap:8px;flex-wrap:wrap}

.domain-tabs{display:flex;gap:8px;flex-wrap:wrap}
.domain-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:6px 8px 6px 13px;
  color:var(--soft);
  font:500 12.5px var(--mono);
  letter-spacing:-.01em;
  cursor:pointer;
  box-shadow:var(--lift-1);
  transition:border-color .14s ease,color .14s ease,background .14s ease;
}
.domain-pill:hover{border-color:var(--rule-strong);color:var(--text)}
/* graft (codex): solid indigo pill for the active domain — unmissable selection */
.domain-pill.active{
  background:linear-gradient(180deg,#6873dc,#5560c8);
  border-color:#4450b8;
  color:#fff;
  font-weight:540;
  text-shadow:0 1px 0 rgba(29,31,38,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 0 rgba(29,31,38,.16),
    0 6px 14px -7px rgba(94,106,210,.6);
}
.domain-pill.active:hover{border-color:#4450b8;color:#fff}
.domain-pill.active .pill-x{color:rgba(255,255,255,.72)}
.domain-pill.active .pill-x:hover{background:rgba(255,255,255,.18);color:#fff}
.domain-pill.add{
  padding:6px 13px;
  border-style:dashed;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
}
.domain-pill.add:hover{color:var(--brand-2);border-color:rgba(94,106,210,.5)}

.pill-x{
  border:0;
  background:transparent;
  color:var(--faint);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  padding:2px 5px;
  border-radius:999px;
  transition:background .12s ease,color .12s ease;
}
.pill-x:hover{background:rgba(194,54,46,.12);color:var(--critical-ink)}

.view-tabs{
  display:flex;
  gap:2px;
  border-bottom:1px solid var(--rule-strong);
  margin-bottom:22px;
  flex-wrap:wrap;
}
.view-tabs button{
  border:0;
  background:transparent;
  color:var(--muted);
  font:560 13.5px/1 var(--sans);
  letter-spacing:-.1px;
  padding:11px 15px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .14s ease,border-color .14s ease;
}
.view-tabs button:hover{color:var(--text)}
.view-tabs button.active{color:var(--text);border-bottom-color:var(--brand)}

/* --------------------------------------------------------------------------
   buttons
   -------------------------------------------------------------------------- */
.button,button{font:560 13.5px/1.2 var(--sans)}

.button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:8px;
  padding:9px 14px;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:var(--lift-1);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease;
}
.button:hover{
  border-color:var(--rule-strong);
  background:#fffefb;
  transform:translateY(-1px);
  box-shadow:var(--lift-2);
}
.button:active{transform:translateY(0);box-shadow:var(--lift-1)}

.button.primary{
  background:linear-gradient(180deg,#6873dc,#5560c8);
  border-color:#4450b8;
  color:#fff;
  text-shadow:0 1px 0 rgba(29,31,38,.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(29,31,38,.18),
    0 8px 20px -8px rgba(94,106,210,.55);
}
.button.primary:hover{
  background:linear-gradient(180deg,#717ce4,#5e6ad2);
  border-color:#4450b8;
}

.button.danger{color:var(--critical-ink);border-color:rgba(194,54,46,.4)}
.button.danger:hover{background:rgba(194,54,46,.07);border-color:rgba(194,54,46,.55)}

.button.small{padding:6px 10px;font-size:12.5px;border-radius:7px}
.button.full{width:100%;justify-content:center}

.button:disabled,button:disabled{
  opacity:.5;
  cursor:default;
  transform:none;
  box-shadow:none;
}

.icon-btn{
  border:1px solid transparent;
  background:transparent;
  color:var(--faint);
  border-radius:7px;
  width:28px;
  height:28px;
  cursor:pointer;
  font-size:15px;
  line-height:1;
  transition:background .12s ease,color .12s ease;
}
.icon-btn:hover{background:rgba(194,54,46,.1);color:var(--critical-ink)}

/* --------------------------------------------------------------------------
   form controls
   -------------------------------------------------------------------------- */
textarea,input,select{
  width:100%;
  min-height:40px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:9px 12px;
  font:13.5px var(--sans);
  outline:none;
  box-shadow:inset 0 1px 2px rgba(29,31,38,.04);
  transition:border-color .14s ease,box-shadow .14s ease;
}
textarea{min-height:96px;resize:vertical;line-height:1.5}
::placeholder{color:var(--faint)}

textarea:focus,input:focus,select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(94,106,210,.18);
}

input[type=checkbox]{width:auto;min-height:0;accent-color:var(--brand);box-shadow:none}
input[type=number]{font-family:var(--mono);font-size:13px}

label{display:grid;gap:6px;color:var(--soft);font-weight:540;font-size:12.5px}
label.check{grid-auto-flow:column;justify-content:start;align-items:center;gap:9px}

.inline-input{width:230px;min-height:36px}

.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.overview-toolbar{margin-bottom:18px}

.filters{display:flex;gap:9px;flex-wrap:wrap}
.filters select{width:auto;min-height:36px;font-size:12.5px;color:var(--soft)}

.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

/* --------------------------------------------------------------------------
   panels — white plates on the ledger
   -------------------------------------------------------------------------- */
.panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--lift-2);
  padding:22px;
  margin:18px 0;
}

.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border-soft);
  flex-wrap:wrap;
}
.panel h2{
  font-size:19px;
  letter-spacing:-.5px;
  line-height:1.2;
  margin:5px 0 0;
  font-weight:640;
}
.head-note{max-width:400px;margin:0;font-size:12.5px;line-height:1.55}

/* --------------------------------------------------------------------------
   KPI cards
   -------------------------------------------------------------------------- */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(172px,1fr));
  gap:12px;
}
.kpi{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:15px 17px 14px 19px;
  background:var(--panel);
  /* graft (codex): indigo left-edge accent stripe anchors the KPI band */
  box-shadow:inset 3px 0 0 rgba(94,106,210,.42),var(--lift-1);
  display:grid;
  gap:6px;
  align-content:start;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.kpi:hover{
  border-color:rgba(94,106,210,.45);
  box-shadow:inset 3px 0 0 rgba(94,106,210,.7),var(--lift-2);
  transform:translateY(-1px);
}
.kpi-label{
  color:var(--muted);
  font:540 10px/1.3 var(--mono);
  text-transform:uppercase;
  letter-spacing:.13em;
}
.kpi-value{
  font:560 29px/1 var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-1.5px;
  color:var(--text);
}
/* graft (baseline): status-coloured SEO score number for an instant read.
   Also fixes a source-order bug — the rule above used to override .good/.warn/.bad. */
.kpi-value.good{color:var(--success-ink)}
.kpi-value.warn{color:var(--warning-ink)}
.kpi-value.bad{color:var(--critical-ink)}
.kpi-sub{color:var(--muted);font-size:11.5px}

/* --------------------------------------------------------------------------
   trend chart — recolor the inline SVG for paper
   (CSS beats SVG presentation attributes: gridlines, labels, line, dots)
   -------------------------------------------------------------------------- */
.trend-chart{min-height:60px}

.trend-svg{
  display:block;
  width:100%;
  height:200px;
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(94,106,210,.035),transparent 45%),
    #fbfaf6;
  border:1px solid var(--border-soft);
}
.trend-svg line{stroke:var(--ink-line)}
.trend-svg text{fill:rgba(29,31,38,.42)}
.trend-svg polyline{stroke:var(--brand)}
.trend-svg circle{fill:var(--brand-2)}

.trend-meta{
  display:flex;
  justify-content:space-between; /* graft (kimi): 'Latest score' left, 'N audits recorded' right */
  gap:18px;
  flex-wrap:wrap;
  color:var(--muted);
  font:500 12px var(--mono);
  margin-top:10px;
}
.trend-meta b{color:var(--text);font-weight:600}

/* --------------------------------------------------------------------------
   visibility command centre
   -------------------------------------------------------------------------- */
.visibility-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:13px;
}
.visibility-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--lift-1);
  padding:17px;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.visibility-card:hover{border-color:var(--rule-strong);box-shadow:var(--lift-2)}
.visibility-card h3{margin:0;font-size:14px;font-weight:620;letter-spacing:-.2px}

.vis-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:11px;
}
.vis-score{
  font:560 25px/1 var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-1.2px;
}

.meter{
  height:7px;
  border-radius:999px;
  background:var(--surface-2);
  box-shadow:inset 0 1px 2px rgba(29,31,38,.08);
  overflow:hidden;
  margin:8px 0 12px;
}
.meter span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--brand),#7a85ea);
  border-radius:inherit;
  box-shadow:inset 0 -1px 0 rgba(29,31,38,.12);
}

.signals{margin:10px 0 0;padding-left:17px;color:var(--muted);font-size:12.5px}
.signals li{margin:4px 0}
.signals li::marker{color:var(--brand);font-size:11px}

.vis-action{
  margin:13px 0 0;
  padding-top:11px;
  border-top:1px dashed var(--border-soft);
  font-size:12.5px;
  color:var(--soft);
}
.vis-action b{color:var(--brand-2)}

/* "KEYWORD CONTEXT (10)" — ruled section heading */
.sub-head{
  display:flex;
  align-items:center;
  gap:11px;
  margin:24px 0 13px;
  font:560 11px var(--mono);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.13em;
}
.sub-head::after{content:"";flex:1;height:1px;background:var(--border-soft)}

.keyword-context{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(282px,1fr));
  gap:11px;
}
.keyword-card{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px 15px;
  background:var(--panel);
  box-shadow:var(--lift-1);
  transition:border-color .14s ease;
}
.keyword-card:hover{border-color:var(--rule-strong)}
.keyword-card h4{font-size:13.5px;margin:0 0 7px;font-weight:600;letter-spacing:-.15px}
.keyword-card p{margin:6px 0;font-size:12.5px;line-height:1.5}

.intent{
  font:540 10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--brand-2);
  background:var(--brand-wash);
  border:1px solid rgba(94,106,210,.35);
  border-radius:5px;
  padding:3px 8px;
  display:inline-block;
  margin-bottom:9px;
}

/* --------------------------------------------------------------------------
   priorities + issues backlog
   -------------------------------------------------------------------------- */
.priorities-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(242px,1fr));
  gap:11px;
  margin-bottom:18px;
}
.priorities-row:empty{display:none}

.priority-card{
  border:1px solid var(--border);
  border-left:3px solid var(--rule-strong);
  border-radius:var(--radius-sm);
  padding:13px 14px;
  background:var(--panel);
  box-shadow:var(--lift-1);
  display:grid;
  gap:7px;
  align-content:start;
}
.priority-card b{font-size:13px;font-weight:600;letter-spacing:-.1px}
.priority-card .sev{justify-self:start}
.priority-card p{margin:0;font-size:12.5px;line-height:1.5}

/* --------------------------------------------------------------------------
   tables — engraved, double-ruled, dense
   -------------------------------------------------------------------------- */
.table-wrap{
  overflow:auto;
  max-height:640px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:#fff;
  box-shadow:var(--lift-1);
}

table{width:100%;border-collapse:collapse;min-width:860px}

th,td{
  padding:10px 14px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--border-soft);
}
tr:last-child td{border-bottom:0}

th{
  position:sticky;
  top:0;
  z-index:2;
  font:560 10px var(--mono);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  background:var(--surface);
  border-bottom:2px solid var(--rule-strong);
  white-space:nowrap;
}
th.sortable{cursor:pointer;user-select:none;transition:color .12s ease}
th.sortable:hover{color:var(--text)}
/* graft (codex): lavender fill on the sorted column header — opaque so the
   sticky header stays clean while rows scroll beneath it */
th.sorted{
  color:var(--brand-2);
  background:#e9e8f4;
  box-shadow:inset 0 -2px 0 var(--brand);
}

td{
  color:var(--soft);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
td .mono{font-size:12.5px;color:var(--text)}

tbody tr{transition:background .1s ease}
tbody tr:nth-child(even){background:rgba(29,31,38,.014)}
tbody tr:hover{background:rgba(94,106,210,.05)}

/* severity — print-annotation chips */
.sev{
  font:560 10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.07em;
  border-radius:5px;
  padding:3px 8px;
  display:inline-block;
}
.sev.critical,.sev.high{
  color:var(--critical-ink);
  background:rgba(194,54,46,.09);
  border:1px solid rgba(194,54,46,.3);
}
.sev.critical{box-shadow:inset 0 0 0 1px rgba(194,54,46,.22)}
.sev.medium,.sev.warning{
  color:var(--warning-ink);
  background:rgba(180,83,9,.09);
  border:1px solid rgba(180,83,9,.3);
}
.sev.low,.sev.info{
  color:var(--info-ink);
  background:rgba(14,116,144,.07);
  border:1px solid rgba(14,116,144,.26);
}

/* --------------------------------------------------------------------------
   keyword table
   -------------------------------------------------------------------------- */
/* graft (kimi): airier keyword rows — extra vertical breathing room,
   scoped to the keyword table only so the issues backlog stays dense */
.kw-table td{padding-top:12px;padding-bottom:12px}

.kw-cell b{color:var(--text);font-weight:600;letter-spacing:-.1px}
.kw-cell .sub{display:block;font:500 10.5px var(--mono);margin-top:2px;color:var(--faint)}

.intent-chip{
  font:540 10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em;
  border-radius:5px;
  padding:3px 8px;
  display:inline-block;
  border:1px solid var(--border);
  color:var(--muted);
  background:var(--surface);
}
.intent-chip.transactional{color:var(--success-ink);border-color:rgba(26,127,90,.32);background:rgba(26,127,90,.08)}
.intent-chip.commercial{color:var(--brand-2);border-color:rgba(94,106,210,.38);background:var(--brand-wash)}
.intent-chip.informational{color:var(--info-ink);border-color:rgba(14,116,144,.3);background:rgba(14,116,144,.07)}
.intent-chip.local{color:var(--warning-ink);border-color:rgba(180,83,9,.3);background:rgba(180,83,9,.08)}

/* keyword difficulty 0–100 */
.kd{
  font:580 11.5px var(--mono);
  font-variant-numeric:tabular-nums;
  border-radius:5px;
  padding:3px 8px;
  display:inline-block;
  min-width:36px;
  text-align:center;
}
.kd.low{color:var(--success-ink);background:rgba(26,127,90,.1);border:1px solid rgba(26,127,90,.32)}
.kd.mid{color:var(--warning-ink);background:rgba(180,83,9,.1);border:1px solid rgba(180,83,9,.32)}
.kd.high{color:var(--critical-ink);background:rgba(194,54,46,.1);border:1px solid rgba(194,54,46,.32)}

.delta{font:580 11px var(--mono);margin-left:5px;font-variant-numeric:tabular-nums}
.delta.up{color:var(--success)}
.delta.down{color:var(--critical)}

/* sparkline — a quiet tinted well framing the trend column.
   graft (codex) + judge fix: lighter than the old beige stamp, still anchors
   a fast 40-keyword scan without shouting */
.spark{
  display:inline-block;
  padding:2px 5px;
  border:1px solid rgba(94,106,210,.16);
  border-radius:6px;
  background:rgba(94,106,210,.055);
  box-shadow:none;
}
.spark:hover{border-color:rgba(94,106,210,.32)}
.spark-svg{display:block}
.spark-empty{color:var(--faint)}

.opp-cell{display:flex;align-items:center;gap:9px;min-width:100px}
.opp-cell .mono{min-width:24px;text-align:right}
.opp-bar{
  flex:1;
  height:5px;
  border-radius:999px;
  background:var(--surface-2);
  box-shadow:inset 0 1px 1px rgba(29,31,38,.08);
  overflow:hidden;
}
.opp-bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--brand-2),var(--brand));
  border-radius:inherit;
}

/* tracked toggle */
.switch{position:relative;display:inline-block;width:34px;height:19px}
.switch input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
  z-index:1;
}
.switch span{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 2px rgba(29,31,38,.1);
  transition:background .16s ease,border-color .16s ease;
}
.switch span::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:13px;
  height:13px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 1px 2px rgba(29,31,38,.3);
  transition:left .16s ease,background .16s ease;
}
.switch input:checked+span{background:var(--brand);border-color:var(--brand-2);box-shadow:none}
.switch input:checked+span::after{left:16px}
.switch input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}

/* --------------------------------------------------------------------------
   competitors
   -------------------------------------------------------------------------- */
.comp-list{display:flex;gap:9px;flex-wrap:wrap}
.comp-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 8px 6px 13px;
  background:#fff;
  box-shadow:var(--lift-1);
  font:500 12.5px var(--mono);
  letter-spacing:-.01em;
  color:var(--soft);
}

.bar-cell{display:flex;align-items:center;gap:10px;min-width:124px}
.bar-cell .mono{min-width:28px;text-align:right;color:var(--text)}
.bar{
  flex:1;
  height:6px;
  border-radius:999px;
  background:var(--surface-2);
  box-shadow:inset 0 1px 1px rgba(29,31,38,.08);
  overflow:hidden;
}
.bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--brand-2),var(--brand));
  border-radius:inherit;
}
.bar.lead i{background:linear-gradient(90deg,var(--success-ink),var(--success))}

.chip-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:15px}

.chip{
  font:540 10.5px var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em;
  border-radius:5px;
  padding:4px 10px;
  display:inline-block;
  border:1px solid var(--border);
  color:var(--muted);
  background:var(--surface);
}
.chip.winning,.chip.on,.chip.ok{
  color:var(--success-ink);
  border-color:rgba(26,127,90,.32);
  background:rgba(26,127,90,.09);
}
.chip.behind,.chip.warning{
  color:var(--warning-ink);
  border-color:rgba(180,83,9,.3);
  background:rgba(180,83,9,.09);
}
.chip.missing,.chip.error{
  color:var(--critical-ink);
  border-color:rgba(194,54,46,.32);
  background:rgba(194,54,46,.09);
}
.chip.untested,.chip.off{color:var(--muted)}
.chip.running{
  color:var(--info-ink);
  border-color:rgba(14,116,144,.3);
  background:rgba(14,116,144,.08);
}

/* SERP position chips 1–30 */
.pos{
  font:580 11.5px var(--mono);
  font-variant-numeric:tabular-nums;
  border-radius:5px;
  padding:3px 8px;
  display:inline-block;
  min-width:32px;
  text-align:center;
}
.pos.p3{color:#fff;background:var(--success);box-shadow:inset 0 -1px 0 rgba(29,31,38,.2)}
.pos.p10{color:var(--success-ink);background:rgba(26,127,90,.12)}
.pos.p20{color:var(--warning-ink);background:rgba(180,83,9,.12)}
.pos.p50{color:var(--critical-ink);background:rgba(194,54,46,.11)}
.pos.none{color:var(--faint);background:var(--surface)}

/* share of voice */
.sov-list{display:grid;gap:10px}
.sov-row{
  display:grid;
  grid-template-columns:210px 1fr 56px;
  align-items:center;
  gap:14px;
}
.sov-domain{
  font:500 12.5px var(--mono);
  letter-spacing:-.01em;
  color:var(--soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sov-bar{
  height:9px;
  border-radius:999px;
  background:var(--surface-2);
  box-shadow:inset 0 1px 2px rgba(29,31,38,.08);
  overflow:hidden;
}
.sov-bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--brand-2),var(--brand) 60%,#7a85ea);
  border-radius:inherit;
}
.sov-row .mono{text-align:right;color:var(--text)}

/* --------------------------------------------------------------------------
   alerts
   -------------------------------------------------------------------------- */
.alerts-list{display:grid;gap:9px}

.alert-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 15px;
  background:var(--panel);
  box-shadow:var(--lift-1);
  transition:border-color .14s ease,opacity .14s ease;
}
.alert-item:hover{border-color:var(--rule-strong)}
.alert-item.read{opacity:.55;box-shadow:none;background:transparent}

.dot{width:9px;height:9px;border-radius:999px;flex:none;margin-top:5px}
.dot.critical{background:var(--critical);box-shadow:0 0 0 3px rgba(194,54,46,.16)}
.dot.warning{background:var(--warning);box-shadow:0 0 0 3px rgba(180,83,9,.15)}
.dot.info{background:var(--info);box-shadow:0 0 0 3px rgba(14,116,144,.14)}
.dot.success{background:var(--success);box-shadow:0 0 0 3px rgba(26,127,90,.15)}

.alert-body{flex:1;min-width:0}
.alert-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.alert-top b{font-weight:600;font-size:13.5px;letter-spacing:-.1px}
.alert-body p{margin:5px 0 0;font-size:12.5px;line-height:1.5}
.alert-time{
  color:var(--faint);
  font:500 11px var(--mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  margin-top:3px;
}

/* --------------------------------------------------------------------------
   automation
   -------------------------------------------------------------------------- */
.sched-card{display:grid;gap:18px}
.sched-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.sched-controls,.sched-run{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.sched-intervals{
  display:flex;
  gap:11px;
  align-items:end;
  flex-wrap:wrap;
  padding:14px;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
}
.sched-intervals label{width:180px}

.providers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(312px,1fr));
  gap:12px;
}
.provider{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  background:var(--panel);
  box-shadow:var(--lift-1);
  display:grid;
  gap:11px;
  align-content:start;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.provider:hover{border-color:var(--rule-strong);box-shadow:var(--lift-2)}
.provider-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.provider-top b{font-size:14px;font-weight:620;letter-spacing:-.2px}
.provider p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.provider-actions{display:flex;gap:8px;flex-wrap:wrap}

.cred-grid{display:grid;gap:9px;margin:12px 0 4px}
.cred-row{display:grid;grid-template-columns:1fr 1.4fr;gap:9px}
.cred-row .ck{font-family:var(--mono);font-size:12px;background:var(--surface)}
.cred-row .cv{font-family:var(--mono);font-size:12px}

/* --------------------------------------------------------------------------
   modals — a sheet lifted off the desk
   -------------------------------------------------------------------------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(36,34,28,.42);
  backdrop-filter:blur(5px) saturate(.9);
  display:grid;
  place-items:center;
  z-index:60;
  padding:22px;
  animation:fadeIn .16s ease;
}
.modal{
  width:min(560px,100%);
  max-height:88vh;
  overflow-y:auto;
  border:1px solid var(--border);
  border-top:3px solid var(--brand);
  border-radius:14px;
  background:var(--panel);
  box-shadow:var(--lift-3);
  padding:24px;
  display:grid;
  gap:14px;
  animation:rise .18s ease;
}
.modal-head{display:flex;justify-content:space-between;align-items:center}
.modal-head h3{margin:0;font-size:16.5px;font-weight:640;letter-spacing:-.3px}
.modal-body{display:grid;gap:12px}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:4px;
  padding-top:14px;
  border-top:1px solid var(--border-soft);
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   toasts — margin notes, bottom right
   -------------------------------------------------------------------------- */
.toast-root{
  position:fixed;
  right:20px;
  bottom:20px;
  display:grid;
  gap:9px;
  z-index:80;
  max-width:380px;
}
.toast{
  border:1px solid var(--border);
  border-left:3px solid var(--info);
  border-radius:9px;
  background:var(--panel);
  box-shadow:var(--lift-3);
  padding:11px 15px;
  font-size:13px;
  color:var(--soft);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease;
}
.toast.show{opacity:1;transform:none}
.toast.success{border-left-color:var(--success)}
.toast.error{border-left-color:var(--critical)}
.toast.warning{border-left-color:var(--warning)}
.toast.info{border-left-color:var(--info)}

/* --------------------------------------------------------------------------
   responsive — broadsheet folds
   -------------------------------------------------------------------------- */
@media (max-width:1360px){
  main{padding:30px 30px 56px}
}

@media (max-width:1100px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--border)}
  .business-list{max-height:240px}
  .biz-header{display:grid}
  .sov-row{grid-template-columns:130px 1fr 50px}
  .form-row{grid-template-columns:1fr}
  main{padding:24px 22px 48px}
}

@media (max-width:680px){
  main{padding:16px 14px 40px}
  .sidebar{padding:16px}
  .panel{padding:16px}
  .panel-head{margin-bottom:14px;padding-bottom:12px}
  .kpi-value{font-size:24px}
  .biz-header h1{font-size:25px}
  .toast-root{left:14px;right:14px;max-width:none}
}