/* Editorial Desk admin theme: sidebar app shell, soft cards and one money-green accent.
   Loaded last so it refines the base styles without changing markup the app script owns. */
:root{--paper:#f4f5f2;--card:#ffffff;--ink:#16181d;--muted:#5d636e;--line:#e2e4e0;--surface:#f0f2ee;--focus:#2f6fed;--pink:#c2416b;
  --accent:#17734f;--accent-soft:#e3f2ea;--accent-ink:#0f5a3d;--warn:#b45309;--warn-soft:#fdf1e2;--radius:14px;--radius-sm:9px;
  --shadow:0 1px 2px rgba(22,24,29,.04),0 4px 14px rgba(22,24,29,.04);--sidebar:244px;
  --chart-pageviews:var(--accent);--chart-clicks:#d4892a;--chart-grid:#e6e8e4;--map-land:#e7eae5;--map-views:#7fb79c;--map-hover:var(--accent);--map-pin:var(--accent-ink)}
html[data-theme="dark"]{--paper:#0f1113;--card:#171a1d;--ink:#eef0ee;--muted:#a1a8b1;--line:#2a2e33;--surface:#1e2226;--focus:#8db4ff;--pink:#f08aa8;
  --accent:#4cc38a;--accent-soft:#163327;--accent-ink:#8fe0b6;--warn:#f0a65a;--warn-soft:#33240f;--shadow:0 1px 2px rgba(0,0,0,.3);
  --chart-pageviews:var(--accent);--chart-clicks:#e6a24f;--chart-grid:#2a2e33;--map-land:#23282c;--map-views:#3f8e68;--map-hover:var(--accent);--map-pin:var(--accent-ink)}
@media (prefers-color-scheme: dark){html:not([data-theme="light"]){--paper:#0f1113;--card:#171a1d;--ink:#eef0ee;--muted:#a1a8b1;--line:#2a2e33;--surface:#1e2226;--focus:#8db4ff;--pink:#f08aa8;
  --accent:#4cc38a;--accent-soft:#163327;--accent-ink:#8fe0b6;--warn:#f0a65a;--warn-soft:#33240f;--shadow:0 1px 2px rgba(0,0,0,.3);
  --chart-pageviews:var(--accent);--chart-clicks:#e6a24f;--chart-grid:#2a2e33;--map-land:#23282c;--map-views:#3f8e68;--map-hover:var(--accent);--map-pin:var(--accent-ink)}}

body{background:var(--paper);font-size:14px;-webkit-font-smoothing:antialiased}
[data-view-hidden]{display:none!important}
.terminal-cursor{display:none}

/* Controls */
button,input,select{border-radius:var(--radius-sm);border-color:var(--line);min-height:40px}
button{background:var(--ink);color:var(--card);font-weight:500;font-size:13px;transition:background .15s,border-color .15s}
button:hover{background:#30343c}
.quiet{background:var(--card);color:var(--ink)}
.quiet:hover{background:var(--surface);border-color:#c9cdc6}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a{text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}

/* Shell: sticky header with tabs on small screens, fixed sidebar on wide screens. */
.masthead{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.mast-top{border-bottom:0;min-height:60px;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em;font-size:16px}
.brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;font:600 12px/1 var(--mono);letter-spacing:0}
.nav{gap:4px;margin-left:auto}
.nav a{min-height:36px;gap:8px;padding:0 12px;border-radius:999px;font-size:13.5px;letter-spacing:0;color:var(--muted);opacity:1;text-decoration:none;white-space:nowrap}
.nav a .icon{width:16px;height:16px;flex:none}
.nav a:hover{color:var(--ink);background:var(--surface);text-decoration:none}
.nav a[aria-current="page"]{color:var(--accent-ink);background:var(--accent-soft);text-decoration:none;font-weight:600}
.private-label{color:var(--muted);font:11px/1.4 var(--mono)}
.theme-toggle{min-height:36px;border-radius:999px}

@media (min-width:1100px){
  .masthead{position:fixed;inset:0 auto 0 0;width:var(--sidebar);border-bottom:0;border-right:1px solid var(--line);background:var(--card);backdrop-filter:none}
  .masthead>.shell{width:auto;height:100%;margin:0}
  .mast-top{flex-direction:column;align-items:stretch;height:100%;padding:20px 14px;gap:22px}
  .brand{padding:0 8px}
  .nav{flex-direction:column;margin:0;gap:2px}
  .nav a{border-radius:var(--radius-sm);min-height:40px;padding:0 12px}
  .nav a[data-view-link="all"]{margin-top:10px;border-top:1px solid var(--line);border-radius:0 0 var(--radius-sm) var(--radius-sm);padding-top:6px}
  .theme-toggle{margin-top:auto;justify-content:flex-start;border-radius:var(--radius-sm)}
  .private-label{display:flex!important;align-items:center;gap:6px;padding:0 8px}
  body>main.shell,body>.footer{margin-left:calc(var(--sidebar) + 40px);margin-right:40px;width:auto;max-width:1320px}
  .skip{left:calc(var(--sidebar) + 8px)}
}
@media (max-width:1099px){
  .mast-top{flex-wrap:wrap;row-gap:0;padding-top:8px}
  .nav{order:3;width:100%;margin:0 0 0 -4px;padding:4px 0 10px;overflow-x:auto;display:flex!important;flex-wrap:nowrap!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;padding:0 12px!important;font-size:13.5px!important}
  .theme-toggle{margin-left:auto}
}

/* Page heading */
.hero{padding:30px 0 18px;align-items:flex-end}
.hero .eyebrow{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:8px}
.hero h1{font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.025em}
.hero h1:focus{outline:none}
.hero p:last-child{font-size:14px;margin-top:6px}
.edition{color:var(--muted)}
.edition strong{color:var(--ink);font-weight:500}

/* Toolbar becomes a slim status bar */
.toolbar{padding:8px 8px 8px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);margin-bottom:20px}
.status{font-size:11.5px}
.status-dot{width:8px;height:8px;border-radius:50%;border:0;background:var(--muted)}
.status-dot.ok{background:#16a35b;box-shadow:0 0 0 3px color-mix(in srgb,#16a35b 20%,transparent)}
.status-dot.warn{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 20%,transparent)}
.controls button,.controls select{min-height:36px}

/* Access card */
.access{border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);border-color:var(--line);padding:22px}
.access h2{font-size:17px}

/* Cards and panels */
.panel,.banner-reporting,#journey-report>section,.site-card,details.panel{border-radius:var(--radius);border-color:var(--line);background:var(--card);box-shadow:var(--shadow)}
.panel{overflow:clip}
.panel-head h2,.section-heading h2,.supplemental-panel>h2{font-size:17px;font-weight:600;letter-spacing:-.01em}
.overview-grid .panel-head,.brief>.eyebrow{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.overview-grid .pill{background:var(--card);color:var(--muted);border-color:var(--line)}
.pill{border-radius:999px;padding:3px 9px}
.alert{border-radius:var(--radius-sm);border-color:var(--warn);background:var(--warn-soft)}
.section-heading .eyebrow,.panel .eyebrow{color:var(--accent)}

/* KPI tiles: separate cards instead of a ruled strip */
.metrics{gap:12px;padding:0;background:none}
.metric{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 16px;position:relative}
.metric-top{font-size:12.5px;font-weight:500}
.metric-top .icon{width:30px;height:30px;padding:7px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);margin:-4px -4px 0 0}
.metric-value{font:600 clamp(26px,2.4vw,34px)/1.1 "Host Grotesk",system-ui,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:10px 0 6px}

/* Publication cards */
.site-cards{gap:14px}
.site-card{transition:transform .15s,box-shadow .15s,border-color .15s}
.site-card:hover{transform:translateY(-1px);border-color:#cfd3cc;box-shadow:0 6px 20px rgba(22,24,29,.07)}
.share-fill{background:var(--accent);border-radius:999px}

/* Tables */
th{font:500 10.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface)}
tbody tr{transition:background .12s}
tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
td,th{border-color:var(--line)}

details>summary{border-radius:var(--radius-sm)}
.footer{color:var(--muted)}

@media (max-width:760px){
  .hero{padding:20px 0 14px}
  .hero .edition{display:none}
  .toolbar{padding:10px}
  .metrics{gap:10px}
}
@media (prefers-reduced-motion:reduce){.site-card,button,tbody tr{transition:none}.site-card:hover{transform:none}}

/* Refinements after visual review */
#commissions,.overview-grid>.panel{border-color:var(--line)}
#commissions{border-top:3px solid var(--accent)}
.money-quick-card{border-color:var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.money-headline h3{font-weight:600;letter-spacing:-.02em}
.overview-grid .panel-head .eyebrow,.panel-head .eyebrow{color:var(--accent)}
.activity-chart button{border-radius:var(--radius-sm);min-height:36px}
.activity-chart button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.journey-controls select,.journey-controls input,.journey-more-button{border-radius:var(--radius-sm)}
/* KPI layout: four headline numbers, the click-rate explanation as a full-width card beneath. */
@media (min-width:900px){
  .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  .metric:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,240px) 1fr;column-gap:28px;align-items:start}
  .metric:last-child>.metric-top{grid-column:1}
  .metric:last-child>.metric-value{grid-column:1;margin-bottom:0}
  .metric:last-child>p:not(.metric-value){grid-column:2;grid-row:1/span 3;align-self:center;font-size:12.5px;line-height:1.55;max-width:80ch}
  .metric:last-child>p:not(.metric-value)+p{grid-row:auto}
}
.eyebrow,.overview-grid .panel-head .eyebrow{color:var(--accent)}
.overview-grid .panel-head{color:var(--ink)}
.overview-grid .panel-head p:not(.eyebrow){color:var(--muted)}
/* Long ranked tables scroll inside their card with a pinned header instead of stretching the page. */
.table-scroll{max-height:min(640px,72vh);border-radius:var(--radius-sm)}
.table-scroll thead th{position:sticky;top:0;z-index:1}
html[data-view="all"] .table-scroll{max-height:none}
.overview-grid .panel-head h2{font:600 17px/1.3 "Host Grotesk",system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink)}