/* Ping Manager. Colours and type follow the Ping brand guidelines (docs/BRAND.md):
   green #00FFBE is the main colour, violet #7300FA complements it, black #1E1E1E and
   white. Headings are heavy condensed italic capitals: the guidelines use Stratos
   Italic, which is licence-only, so Barlow Condensed stands in. Body is DM Sans. */
:root{
  --ink:#1e1e1e; --ink-2:#3e3e3e; --muted:#6b6b6b; --line:#e7e7e7; --panel:#f6f6f6;
  --bg:#fafafa; --card:#ffffff;
  --purple:#7300FA; --purple-hover:#5e00cc; --purple-tint:#f1e6ff;
  --mint:#00FFBE; --mint-hover:#00e6ab; --mint-tint:#d9fff4; --mint-deep:#00704f;
  --danger:#c62828;
  --rail-w:248px; --rail-w-collapsed:68px;
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--purple)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:2000;background:var(--ink);color:#fff;
  padding:8px 12px;border-radius:8px}
.skip-link:focus{left:12px}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

/* ── Left rail ───────────────────────────────────────────────────────────────
   Same mechanics as Omni Traffic Manager, re-coloured. Below 901px it is an overlay
   drawer with a scrim; from 901px up a permanent rail, closed to icons, opening over
   the page on hover and pinned open by its hamburger. Open is a CLASS, not :hover,
   so unpinning can close it while the pointer is still over it. Nothing moves
   vertically when it opens: only widths and horizontal padding change. */
.gs-toggle{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:none;border-radius:10px;background:var(--ink);color:var(--mint);cursor:pointer;flex-shrink:0;
  margin-right:12px;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:background .15s}
.gs-toggle:hover{background:#000}
.gs-toggle svg{width:28px;height:28px;display:block;stroke-width:2.2}
.gs-scrim{position:fixed;inset:0;background:rgba(15,15,22,.44);z-index:1390;opacity:0;
  pointer-events:none;transition:opacity .22s ease}
.gs-scrim.open{opacity:1;pointer-events:auto}
.gs-side{position:fixed;top:0;left:0;height:100vh;width:252px;max-width:86vw;background:var(--mint);
  border-right:1px solid rgba(0,0,0,.08);z-index:1400;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .22s ease;visibility:hidden}
.gs-side.open{transform:none;visibility:visible}
.gs-brand{display:flex;align-items:center;gap:10px;padding:16px 14px 12px;flex-shrink:0}
.gs-brand-link{display:block;line-height:0}
/* The wordmark's own "!" is mint and would vanish on the mint rail, so it is drawn in ink. */
/* On green the wordmark's "!" is white, as on the green flyer in the guidelines. */
.gs-brand-logo{height:28px;width:auto;display:block}
.gs-x{background:none;border:none;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
  padding:2px 7px;border-radius:6px;margin-left:auto;font-family:inherit}
.gs-x:hover{background:rgba(0,0,0,.08);color:var(--ink)}
.gs-nav{flex:1;overflow-y:auto;padding:4px 12px 20px;display:flex;flex-direction:column;gap:1px;
  scrollbar-width:thin;scrollbar-color:rgba(31,31,43,.22) transparent}
.gs-nav--more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}
.gs-grp{font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(0,0,0,.55);
  margin:14px 10px 4px}
.gs-item{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;
  font-family:var(--display);font-size:18px;font-weight:700;font-style:italic;text-transform:uppercase;
  letter-spacing:.2px;color:var(--ink);text-decoration:none;line-height:1.2;
  transition:background .12s,color .12s}
.gs-item:hover{background:rgba(0,0,0,.08);color:var(--ink)}
.gs-item.active{background:var(--ink);color:var(--mint);font-weight:800}
.gs-ic{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.gs-ic svg{width:22px;height:22px;display:block}
.gs-foot{flex-shrink:0;border-top:1px solid rgba(0,0,0,.1);padding:10px 12px;display:flex;
  flex-direction:column;gap:8px;min-height:20px}
.gs-pin{display:none;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;
  padding:0;border:none;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
.gs-pin:hover{background:rgba(0,0,0,.08);color:var(--ink)}
.gs-pin svg{width:21px;height:21px;display:block}
body.rail-pinned .gs-pin{background:var(--ink);color:var(--mint)}

@media (min-width:901px){
  body.has-rail{padding-left:var(--rail-w-collapsed);transition:padding-left .16s ease}
  body.has-rail.rail-pinned{padding-left:var(--rail-w)}
  body.has-rail .gs-side{transform:none;width:var(--rail-w-collapsed);max-width:none;
    transition:width .16s ease;overflow:hidden;visibility:visible}
  body.has-rail.rail-open .gs-side,
  body.has-rail.rail-pinned .gs-side{width:var(--rail-w)}
  body.has-rail.rail-open:not(.rail-pinned) .gs-side{box-shadow:4px 0 24px rgba(20,20,35,.16)}
  body.has-rail .gs-lbl{opacity:0;white-space:nowrap;pointer-events:none;max-width:0;overflow:hidden;
    transition:max-width .16s ease,opacity .14s ease}
  body.has-rail.rail-open .gs-lbl,
  body.has-rail.rail-pinned .gs-lbl{opacity:1;pointer-events:auto;max-width:190px}
  body.has-rail .gs-grp{opacity:0;position:relative;white-space:nowrap;overflow:hidden;transition:opacity .14s ease}
  body.has-rail .gs-grp::after{content:'';position:absolute;opacity:1;left:10px;right:10px;top:50%;
    height:1px;background:rgba(0,0,0,.14);transition:opacity .14s ease}
  body.has-rail.rail-open .gs-grp,
  body.has-rail.rail-pinned .gs-grp{opacity:1}
  body.has-rail.rail-open .gs-grp::after,
  body.has-rail.rail-pinned .gs-grp::after{opacity:0}
  body.has-rail .gs-item{justify-content:center;padding:9px 0;gap:0}
  body.has-rail .gs-nav{padding:4px 8px 20px}
  body.has-rail .gs-brand{justify-content:flex-start;padding:12px 0 12px 14px;gap:10px;height:64px}
  body.has-rail .gs-brand-link{display:none}
  body.has-rail .gs-foot{padding:10px 8px;align-items:center}
  body.has-rail.rail-open .gs-item,
  body.has-rail.rail-pinned .gs-item{justify-content:flex-start;padding:9px 12px;gap:11px}
  body.has-rail.rail-open .gs-nav,
  body.has-rail.rail-pinned .gs-nav{padding:4px 12px 20px}
  body.has-rail.rail-open .gs-brand,
  body.has-rail.rail-pinned .gs-brand{padding:12px 14px}
  body.has-rail.rail-open .gs-brand-link,
  body.has-rail.rail-pinned .gs-brand-link{display:block}
  body.has-rail.rail-open .gs-foot,
  body.has-rail.rail-pinned .gs-foot{padding:10px 12px;align-items:stretch}
  body.has-rail .gs-scrim,
  body.has-rail .gs-toggle,
  body.has-rail .gs-x{display:none!important}
  body.has-rail .gs-pin{display:inline-flex}
}
@media (max-height:900px){
  .gs-grp{margin-top:8px;margin-bottom:2px}
  .gs-nav{padding-bottom:10px}
}

/* ── SU tab (right edge) ─────────────────────────────────────────────────────── */
.su-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:1100;background:var(--mint);
  color:var(--ink);border:none;border-radius:8px 0 0 8px;padding:14px 10px;cursor:pointer;
  font-family:var(--display);font-size:18px;font-weight:800;font-style:italic;letter-spacing:.5px;writing-mode:vertical-rl;
  display:flex;align-items:center;gap:8px;line-height:1;box-shadow:-1px 0 5px rgba(20,20,35,.13);
  border:1px solid rgba(0,0,0,.12);border-right:none;
  transition:background .15s}
.su-tab:hover{background:var(--mint-hover)}
.su-tab .ico{width:16px;height:16px}
.su-ask{display:none;position:fixed;inset:0;background:rgba(10,10,14,.75);z-index:1200;
  align-items:center;justify-content:center;padding:16px}
.su-ask.show{display:flex}
.su-box{background:#1c1c1c;border:1px solid #3a3a3a;border-radius:14px;padding:26px;width:420px;
  max-width:100%;color:#e0e0e0}
.su-box h3{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:28px;line-height:1;color:#fff;margin:0 0 12px}
.su-box p{font-size:14px;color:#a8a8a8;margin:0 0 14px;line-height:1.5}
.su-url{display:block;font-size:13px;color:var(--mint);word-break:break-all;background:#121212;
  border:1px solid #2a2a2a;border-radius:8px;padding:9px 11px;margin-bottom:18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.su-btns{display:flex;gap:10px}
.su-btns > *{flex:1;padding:11px;border-radius:9px;border:none;font-size:14px;font-weight:700;
  cursor:pointer;font-family:inherit;text-align:center;text-decoration:none;display:flex;
  align-items:center;justify-content:center;gap:7px}
.su-open{background:var(--mint);color:var(--ink)}
.su-open:hover{background:var(--mint-hover)}
.su-no{background:#2e2e2e;color:#e0e0e0}
.su-btns > *{font-family:var(--display);font-style:italic;text-transform:uppercase;font-size:17px;font-weight:800}
.su-no:hover{background:#3a3a3a}

/* ── Page ─────────────────────────────────────────────────────────────────────── */
/* The solid green title band, after the hero on pingnews.uk. Full width; its inner
   box lines up with .page below it. */
.hero{position:relative;background:var(--mint);margin-bottom:14px;
  background-image:radial-gradient(rgba(30,30,30,.16) 1.1px, transparent 1.3px);
  background-size:9px 9px;background-position:right top;
  -webkit-mask:none}
/* The dots belong on the right only, like the halftone panels in the illustrations. */
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--mint) 45%,rgba(0,255,190,0) 100%)}
.hero > *{position:relative}
/* A torn-paper edge along the bottom, from the brand's illustration style. */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:-13px;height:14px;background:var(--mint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V7L235.1 12.4L227.8 9.8L223.5 9.5L217.1 12.0L208.9 7.6L202.0 8.8L194.6 6.3L186.2 8.7L178.4 9.5L174.2 7.9L169.4 10.3L163.3 4.6L154.4 6.1L146.8 11.4L140.1 8.7L134.9 9.8L127.0 6.2L120.7 8.8L115.1 7.3L107.7 5.4L103.4 4.1L96.7 6.9L89.5 8.7L84.6 10.8L79.0 4.6L74.3 6.1L66.0 3.9L57.1 7.1L50.3 12.0L43.1 5.5L38.5 10.9L32.4 4.3L28.0 7.4L23.8 8.1L19.6 6.8L12.9 4.2L5.6 4.9L0 7.0Z'/%3E%3C/svg%3E") 0 0/480px 14px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V7L235.1 12.4L227.8 9.8L223.5 9.5L217.1 12.0L208.9 7.6L202.0 8.8L194.6 6.3L186.2 8.7L178.4 9.5L174.2 7.9L169.4 10.3L163.3 4.6L154.4 6.1L146.8 11.4L140.1 8.7L134.9 9.8L127.0 6.2L120.7 8.8L115.1 7.3L107.7 5.4L103.4 4.1L96.7 6.9L89.5 8.7L84.6 10.8L79.0 4.6L74.3 6.1L66.0 3.9L57.1 7.1L50.3 12.0L43.1 5.5L38.5 10.9L32.4 4.3L28.0 7.4L23.8 8.1L19.6 6.8L12.9 4.2L5.6 4.9L0 7.0Z'/%3E%3C/svg%3E") 0 0/480px 14px repeat-x}
.hero .page-head{max-width:1280px;margin:0 auto;padding:30px 56px 30px 32px}
.hero .page-sub{color:rgba(0,0,0,.75);font-size:15px}
.hero .back{color:rgba(0,0,0,.7)}
.hero .back:hover{color:var(--ink)}
.hero .page-head-left{align-items:center}
@media (max-width:900px){ .hero .page-head{padding:16px 52px 20px 16px} }
/* Right padding clears the SU tab on the right edge. */
.page{max-width:1280px;margin:0 auto;padding:28px 56px 60px 32px}
@media (max-width:900px){ .page{padding:16px 52px 48px 16px} }
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:20px}
.page-head-left{display:flex;align-items:center;min-width:0}
h1.page-title{font-family:var(--display);font-size:56px;font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:-.5px;margin:0;line-height:.95}
@media (max-width:600px){ h1.page-title{font-size:40px} }
.page-sub{color:var(--muted);font-size:14px;margin:4px 0 0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:0;border:1px solid transparent;
  font-family:var(--display);font-size:18px;font-weight:800;font-style:italic;text-transform:uppercase;
  cursor:pointer;text-decoration:none;line-height:1}
.btn-primary{background:var(--ink);color:var(--mint)}
.btn-primary:hover{background:#000}
.btn-primary .dot{width:9px;height:9px;border-radius:50%;background:var(--purple)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--panel)}
.btn-danger{background:#fff;color:var(--danger);border-color:#f0c8c8}
.btn-danger:hover{background:#fdf2f2}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--mint);border-radius:0;padding:12px 16px 14px}
.stat-k{font-family:var(--display);font-size:17px;font-weight:700;font-style:italic;text-transform:uppercase;color:var(--ink)}
/* Numbers in violet italic, like the page numbers in the guidelines. */
.stat-v{font-family:var(--display);font-size:52px;font-weight:800;font-style:italic;color:var(--purple);
  line-height:1;margin-top:4px}
@media (max-width:560px){ .stats{grid-template-columns:1fr 1fr} .stat:last-child{grid-column:span 2} }

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.search{flex:1;min-width:200px;max-width:420px;position:relative}
.search input{width:100%;padding:10px 12px 10px 36px;border:1px solid #d6d6d6;border-radius:0;
  font:inherit;font-size:14px;background:#fff;color:var(--ink)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.count{color:var(--muted);font-size:13px}

.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:0;overflow-x:auto}
table.list{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
table.list th{text-align:left;font-family:var(--display);font-size:17px;font-weight:800;font-style:italic;
  text-transform:uppercase;color:var(--mint);padding:0;border-bottom:none;background:var(--ink);white-space:nowrap}
table.list th button{all:unset;display:flex;align-items:center;gap:5px;padding:11px 14px;cursor:pointer;width:100%;box-sizing:border-box}
table.list th button:hover{color:#fff}
table.list th button:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
table.list th .arr{opacity:.45;font-size:11px;font-style:normal}
table.list th[aria-sort] .arr{opacity:1;color:#fff}
table.list th.num button{justify-content:flex-end}
table.list td{padding:11px 14px;border-bottom:1px solid #f0f0f0;vertical-align:middle}
table.list tbody tr:last-child td{border-bottom:none}
table.list tbody tr:hover td{background:#f0fffa}
table.list td.num{text-align:right;font-variant-numeric:tabular-nums}
table.list td a{text-decoration:none}
table.list td a:hover{text-decoration:underline}
.pub-name{font-weight:700;color:var(--ink)}
.flag{display:inline-block;margin-left:6px;width:8px;height:8px;border-radius:50%;background:#f0a020;vertical-align:1px}
.pill{display:inline-flex;min-width:34px;justify-content:center;padding:2px 9px;border-radius:0;
  font-family:var(--display);font-weight:800;font-style:italic;font-size:18px;background:var(--panel);color:var(--ink)}
.pill.c2{background:var(--mint);color:var(--ink)}
.pill.c3{background:var(--purple);color:#fff}
.row-edit{color:var(--muted);font-size:13px;font-weight:600}
.empty{padding:36px;text-align:center;color:var(--muted)}

/* ── Form ─────────────────────────────────────────────────────────────────────── */
.form-card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--mint);border-radius:0;padding:24px;max-width:680px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--display);font-size:17px;font-weight:800;font-style:italic;
  text-transform:uppercase;margin-bottom:6px}
.field input,.field textarea{width:100%;padding:10px 12px;border:1px solid #d6d6d6;border-radius:0;
  font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.field textarea{min-height:80px;resize:vertical}
.field .hint{font-size:13px;color:var(--muted);margin-top:4px}
.field .err{font-size:13px;color:var(--danger);margin-top:4px;font-weight:600}
.field.has-err input{border-color:var(--danger)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:600px){ .grid2{grid-template-columns:1fr} }
.form-actions{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.form-actions .spacer{flex:1}
.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;margin-bottom:10px}
.back:hover{color:var(--ink)}

/* ── Toasts ───────────────────────────────────────────────────────────────────── */
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:1500;display:flex;
  flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:10px 16px;border-radius:9px;font-size:14px;font-weight:500;
  opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.toast.show{opacity:1;transform:none}
.toast.error{background:var(--danger)}

/* ── Sign-in page ─────────────────────────────────────────────────────────────── */
body.login-page{background:var(--mint);min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:16px;background-image:radial-gradient(rgba(30,30,30,.14) 1.1px, transparent 1.3px);background-size:9px 9px}
.login{background:#fff;border:1px solid rgba(0,0,0,.1);border-top:6px solid var(--ink);padding:36px 32px;
  width:420px;max-width:100%;text-align:center}
.login-logo{height:54px;width:auto;background:var(--mint);padding:10px 16px;display:inline-block}
.login-title{font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:40px;line-height:1;margin:22px 0 8px}
.login-sub{color:var(--muted);margin:0 0 22px}
.login-err{background:#fdf2f2;color:var(--danger);font-weight:600;padding:10px 12px;margin:0 0 18px;font-size:14px}
.login-btn{justify-content:center;width:100%}

/* ── Signed-in account, bottom of the rail ────────────────────────────────────── */
.acct{display:flex;align-items:center;gap:10px;min-width:0}
.acct-av{width:34px;height:34px;flex-shrink:0;background:var(--ink);color:var(--mint);display:flex;
  align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-style:italic;
  font-size:18px;overflow:hidden}
.acct-av img{width:100%;height:100%;object-fit:cover;display:block}
.acct-text{min-width:0;flex:1}
.acct-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-out{background:none;border:none;padding:0;font:inherit;font-size:13px;color:var(--ink);
  text-decoration:underline;cursor:pointer;opacity:.75}
.acct-out:hover{opacity:1}
@media (min-width:901px){
  body.has-rail .gs-foot .acct-text{opacity:0;max-width:0;overflow:hidden;transition:max-width .16s ease,opacity .14s ease}
  body.has-rail.rail-open .gs-foot .acct-text,
  body.has-rail.rail-pinned .gs-foot .acct-text{opacity:1;max-width:180px}
  body.has-rail .gs-foot .acct{gap:0}
  body.has-rail.rail-open .gs-foot .acct,
  body.has-rail.rail-pinned .gs-foot .acct{gap:10px}
}

/* ── External menu links (ads.ping) ──────────────────────────────────── */
.gs-ext{display:inline-flex;margin-left:auto;opacity:.6;flex-shrink:0}
.gs-ext svg{width:14px;height:14px;display:block}
@media (min-width:901px){
  body.has-rail .gs-ext{display:none}
  body.has-rail.rail-open .gs-ext,
  body.has-rail.rail-pinned .gs-ext{display:inline-flex}
}

/* ── Cashflow ─────────────────────────────────────────────────────────────────── */
.page-wide{max-width:none}
.stat-note{font-size:13px;color:var(--muted);margin-top:4px}
.stat-v.neg{color:var(--danger)}
.cf-warn{background:#fff6e0;border-left:4px solid #f0a020;padding:10px 14px;margin:0 0 14px;font-weight:600}
.cf-key{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:0 0 10px}
.cf-key span{display:inline-flex;align-items:center;gap:7px}
.cf-key i{width:16px;height:16px;display:inline-block;border:1px solid var(--line);background:#fff}
.cf-key i.k-manual{background:var(--purple-tint);border-color:#d9c2ff;
  background-image:linear-gradient(225deg,var(--purple) 6px,transparent 6px)}

/* Sideways scroll only; the page itself scrolls down, so the totals are never trapped
   below the fold of a second scrollbar. */
.cf-wrap{overflow-x:auto}
table.cf{border-collapse:separate;border-spacing:0;font-size:14px;width:100%;min-width:1100px}
table.cf th,table.cf td{border-bottom:1px solid #eeeeee;padding:0;white-space:nowrap;background:#fff}
table.cf thead th{z-index:3;background:var(--ink);color:var(--mint);
  font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:17px;
  padding:10px 10px;text-align:left;border-bottom:none}
table.cf thead th.num{text-align:right}
table.cf thead th.cf-total{background:var(--purple);color:#fff}
/* The description column stays put while the months scroll sideways. */
table.cf .cf-name{position:sticky;left:0;z-index:2;min-width:250px;max-width:280px;text-align:left;
  padding:0 12px;font-weight:500;border-right:1px solid var(--line);overflow:hidden;text-overflow:ellipsis}
table.cf thead th.cf-name{z-index:4}
table.cf tbody th.cf-name a{color:var(--ink);text-decoration:none;display:block;padding:8px 0;overflow:hidden;text-overflow:ellipsis}
table.cf tbody th.cf-name a:hover{color:var(--purple);text-decoration:underline}
table.cf td.num{text-align:right;font-variant-numeric:tabular-nums;padding:0 10px;min-width:78px}
table.cf td.cf-total{font-weight:700;background:#faf7ff;border-left:1px solid var(--line)}
table.cf td.cf-start,table.cf th.cf-start{border-right:1px solid var(--line);min-width:120px}
table.cf .neg{color:var(--danger)}

/* Sections */
table.cf tr.cf-sec th{background:var(--panel);text-align:left;padding:10px 12px;
  font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:18px}
table.cf tr.cf-sec th span{position:sticky;left:12px}
.cf-add{margin-left:14px;font-family:'DM Sans',sans-serif;font-style:normal;text-transform:none;
  font-size:13px;font-weight:700;color:var(--purple);text-decoration:none}
.cf-add:hover{text-decoration:underline}
table.cf tr.cf-hl th,table.cf tr.cf-hl td{background:#e6fff7}
table.cf tr.cf-sum th,table.cf tr.cf-sum td{background:#f1f1f1;font-weight:700;padding-top:9px;padding-bottom:9px;
  border-top:2px solid var(--ink)}
table.cf tr.cf-sum th.cf-name,table.cf tr.cf-net th.cf-name,table.cf tr.cf-cash th.cf-name{
  font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:17px}
table.cf tr.cf-net th,table.cf tr.cf-net td{background:var(--mint-tint);font-weight:700;padding-top:9px;padding-bottom:9px;
  border-top:6px solid #fff}
table.cf tr.cf-cash th,table.cf tr.cf-cash td{background:var(--mint);font-weight:800;padding-top:10px;padding-bottom:10px;
  font-size:15px;border-bottom:none}
table.cf tr.cf-cash td.neg{color:#b00020}

/* Editable month cells */
table.cf td.cf-cell{position:relative;padding:0}
table.cf td.cf-cell input{width:100%;min-width:78px;border:none;background:transparent;text-align:right;
  font:inherit;font-variant-numeric:tabular-nums;padding:8px 10px;color:inherit}
table.cf td.cf-cell input:hover{background:#f6f6f6}
table.cf td.cf-cell input:focus{outline:2px solid var(--purple);outline-offset:-2px;background:#fff}
table.cf td.cf-cell.manual{background:var(--purple-tint)}
table.cf td.cf-cell.manual::after{content:'';position:absolute;top:0;right:0;border-style:solid;
  border-width:0 8px 8px 0;border-color:transparent var(--purple) transparent transparent;pointer-events:none}
.cf-reset{position:absolute;left:2px;top:50%;transform:translateY(-50%);border:none;background:var(--purple);
  color:#fff;font-size:12px;line-height:1;width:18px;height:18px;padding:0;cursor:pointer;opacity:0;
  transition:opacity .12s}
table.cf td.cf-cell:hover .cf-reset,.cf-reset:focus{opacity:1}

/* Bank balance input */
table.cf td.cf-bal{padding:4px 8px}
table.cf td.cf-bal input{width:110px;border:2px solid var(--ink);background:#fff;text-align:right;font:inherit;
  font-weight:800;padding:5px 8px}
table.cf td.cf-bal input:focus{outline:2px solid var(--purple);outline-offset:1px}
.cf-asof{display:block;font-size:12px;font-weight:600;margin-top:2px;text-align:right}

/* Line form: selects match inputs */
.field select{width:100%;padding:10px 12px;border:1px solid #d6d6d6;border-radius:0;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.field.check label{font-family:'DM Sans',sans-serif;font-style:normal;text-transform:none;font-weight:500;font-size:15px;
  display:flex;gap:9px;align-items:center}
.field.check input{width:auto}

/* ── Cashflow, compact: the whole year on one screen ───────────────────────────
   Title and the three figures share one band; warning, key and the empty-line toggle
   share one line; rows are 24px. Twenty-seven rows then fit a laptop window. */
.cf-hero{margin-bottom:8px}
.cf-hero .page-head{max-width:none;padding:12px 52px 12px 24px;margin:0;flex-wrap:wrap;gap:10px 24px}
.cf-hero h1.page-title{font-size:38px}
.cf-stats{display:flex;gap:10px;flex-wrap:wrap}
.cf-stat{background:#fff;border:1px solid rgba(0,0,0,.1);border-top:3px solid var(--ink);padding:5px 12px 6px;
  display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:baseline}
.cf-stat .k{grid-column:1 / span 2;font-family:var(--display);font-style:italic;font-weight:800;
  text-transform:uppercase;font-size:14px;line-height:1.1}
.cf-stat .v{font-family:var(--display);font-style:italic;font-weight:800;font-size:28px;line-height:1;color:var(--purple)}
.cf-stat .v.neg{color:var(--danger)}
.cf-stat .n{font-size:12px;color:var(--muted)}
.cf-stat .n.stale{color:#b06a00;font-weight:700}
.cf-page{padding:6px 52px 16px 24px}
.cf-bar{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:0 0 8px}
.cf-bar .cf-warn{background:#fff6e0;border-left:3px solid #f0a020;padding:3px 9px;margin:0;color:var(--ink);font-weight:600}
.cf-bar .cf-key{display:inline-flex;align-items:center;gap:7px;margin:0}
.cf-bar .cf-key i{width:14px;height:14px;display:inline-block;background:var(--purple-tint);border:1px solid #d9c2ff;
  background-image:linear-gradient(225deg,var(--purple) 5px,transparent 5px)}
.cf-toggle{display:inline-flex;align-items:center;gap:6px;margin-left:auto;cursor:pointer;color:var(--ink);font-weight:500}
.cf-toggle input{accent-color:var(--purple)}

.cf-page table.cf{font-size:13px;min-width:1040px}
.cf-page table.cf thead th{font-size:15px;padding:6px 8px}
.cf-page table.cf .cf-name{min-width:220px;max-width:250px;padding:0 10px}
.cf-page table.cf tbody th.cf-name a{padding:3px 0}
.cf-page table.cf td.num{padding:0 8px;min-width:70px}
.cf-page table.cf td.cf-cell input{padding:3px 8px;min-width:70px}
.cf-page table.cf td.cf-start,.cf-page table.cf th.cf-start{min-width:104px}
.cf-page table.cf tr.cf-sec th{padding:3px 10px;font-size:15px}
.cf-page table.cf tr.cf-sum th,.cf-page table.cf tr.cf-sum td,
.cf-page table.cf tr.cf-net th,.cf-page table.cf tr.cf-net td{padding-top:4px;padding-bottom:4px}
.cf-page table.cf tr.cf-net th,.cf-page table.cf tr.cf-net td{border-top:3px solid #fff}
.cf-page table.cf tr.cf-sum th.cf-name,.cf-page table.cf tr.cf-net th.cf-name,
.cf-page table.cf tr.cf-cash th.cf-name{font-size:15px}
.cf-page table.cf tr.cf-cash th,.cf-page table.cf tr.cf-cash td{padding-top:3px;padding-bottom:3px;font-size:14px}
.cf-page table.cf td.cf-bal{padding:2px 6px}
.cf-page table.cf td.cf-bal input{width:96px;padding:2px 6px}
.cf-page .cf-asof{display:none}

/* Tighter still, measured at 1440x800: rows to 22px, month columns to their figures. */
.cf-page table.cf{min-width:0;table-layout:auto;line-height:1.25}
.cf-page table.cf td.cf-cell input{min-width:0;width:100%;padding:2px 7px}
.cf-page table.cf td.num{min-width:0;padding:0 7px}
.cf-page table.cf tbody th.cf-name a{padding:2px 0}
.cf-page table.cf .cf-name{min-width:200px;max-width:230px}
.cf-page table.cf tr.cf-sec th{padding:2px 10px}
.cf-page table.cf tr.cf-sum th,.cf-page table.cf tr.cf-sum td,
.cf-page table.cf tr.cf-net th,.cf-page table.cf tr.cf-net td{padding-top:3px;padding-bottom:3px}
.cf-page table.cf thead th{padding:5px 7px}
.cf-page table.cf td.cf-bal input{width:auto}
.cf-hero .page-head{padding:8px 52px 8px 24px}
.cf-hero h1.page-title{font-size:34px}
.cf-stat .v{font-size:24px}
.cf-page{padding-top:4px}
/* Room for "-29,255" in every month, and no wider. */
.cf-page table.cf td.cf-cell input{min-width:9ch}
.cf-page table.cf td.num{white-space:nowrap}
.cf-page table.cf thead th{white-space:nowrap}
.cf-bar{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.cf-bar .cf-key{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Sized to fit with the rail PINNED (about 1,115px of table at a 1440 window):
   190 + 96 + 12 x 62 + 64. The cell has no padding of its own; the box inside it has
   just enough for "-29,255". */
.cf-page table.cf td.cf-cell{padding:0}
.cf-page table.cf td.cf-cell input{min-width:calc(7ch + 8px);padding:2px 4px}
.cf-page table.cf td.num{padding:0 4px}
.cf-page table.cf thead th{padding:5px 4px}
.cf-page table.cf thead th.cf-name{padding-left:10px}
.cf-page table.cf .cf-name{min-width:190px;max-width:200px}
.cf-page table.cf td.cf-start,.cf-page table.cf th.cf-start{min-width:0}
.cf-page table.cf td.cf-bal input{width:8.5ch;padding:2px 4px}
.cf-page table.cf td.cf-total{padding:0 6px}
/* Pixel widths: in DM Sans "ch" is the wide 0, so 7ch came out at 62px. "-29,255" at
   13px with tabular figures is about 50px. Placed last so it wins over td.num. */
.cf-page table.cf td.cf-cell{padding:0}
.cf-page table.cf td.cf-cell input{min-width:60px;width:60px}
.cf-page table.cf td.cf-bal input{width:76px}

/* ── Publishers: website test ─────────────────────────────────────────────────── */
.head-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-ghost-ink{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost-ink:hover{background:rgba(0,0,0,.06)}
.btn-ghost-ink:disabled{cursor:progress;opacity:.8}
.btn .spin{display:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .8s linear infinite}
.btn.busy .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .btn .spin{animation-duration:2.4s} }
.check-sum{margin-left:auto;font-size:13px;color:var(--muted);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.check-sum .attn{display:inline-flex;gap:6px;align-items:center;color:var(--ink);font-weight:600;cursor:pointer}
.check-sum .attn input{accent-color:var(--purple)}
.ck{margin-top:5px;font-size:12px;line-height:1.35;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;max-width:300px;white-space:normal}
.ck-tag{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:13px;padding:1px 6px}
.ck-moved .ck-tag{background:#f0a020;color:var(--ink)}
.ck-broken .ck-tag{background:var(--danger);color:#fff}
.ck-blocked .ck-tag{background:#e3e3e3;color:var(--ink)}
.ck-why{color:var(--muted)}
.ck-fix{margin:0}
.ck-btn{border:none;background:var(--ink);color:var(--mint);font:inherit;font-weight:700;font-size:12px;padding:3px 8px;cursor:pointer}
.ck-btn:hover{background:#000}
/* Hidden screen-reader text inside a table is position:absolute. Without a positioned
   box around the table it escaped the table's own scroll area and widened the whole
   page, which then scrolled sideways under the pointer. */
.table-wrap{position:relative}

/* ── Web Analytics ────────────────────────────────────────────────────────────── */
.wa-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.wa-range{display:flex;border:2px solid var(--ink)}
.wa-range a{padding:6px 12px;font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:15px;color:var(--ink);text-decoration:none;background:#fff}
.wa-range a+a{border-left:2px solid var(--ink)}
.wa-range a.on{background:var(--ink);color:var(--mint)}
.wa-range a:not(.on):hover{background:#f0f0f0}
.wa-refresh{color:var(--ink);font-weight:700;font-size:14px;text-decoration:none}
.wa-refresh span{font-weight:400;color:rgba(0,0,0,.65)}
.wa-refresh:hover{text-decoration:underline}
.wa-setup{max-width:760px}
.wa-setup h2{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:28px;margin:0 0 10px}
.wa-setup code{background:var(--panel);padding:1px 5px}
.wa-src{margin:0 0 16px}
.wa-src-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 8px}
.wa-src-head h2{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:26px;margin:0;
  border-bottom:4px solid var(--mint);line-height:1}
.wa-meta{font-size:13px;color:var(--muted)}
.wa-err{background:#fdf2f2;border-left:4px solid var(--danger);padding:10px 14px;margin:0;font-weight:500}
.wa-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 8px}
.wa-kpi{background:#fff;border:1px solid var(--line);border-top:3px solid var(--mint);padding:8px 12px}
.wa-kpi .k{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:14px}
.wa-kpi .v{font-family:var(--display);font-style:italic;font-weight:800;font-size:32px;line-height:1.05;color:var(--purple)}
.wa-kpi .d{font-size:12px;font-weight:700;margin-top:2px}
.wa-kpi .d.up{color:#00704f}
.wa-kpi .d.down{color:var(--danger)}
.wa-kpi .d.flat{color:var(--muted);font-weight:500}
.wa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:8px}
.wa-card{background:#fff;border:1px solid var(--line);padding:10px 12px;margin:0;min-width:0;position:relative}
.wa-card h3,.wa-card figcaption{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:16px;margin:0 0 6px}
.wa-svg{width:100%;height:auto;display:block}
.wa-svg .grid{stroke:#ececec;stroke-width:1}
.wa-svg .base{stroke:#bdbdbd;stroke-width:1}
.wa-svg .ax{font-size:11px;fill:var(--muted);font-family:'DM Sans',sans-serif}
.wa-svg .line{fill:none;stroke:var(--purple);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.wa-svg .area{fill:var(--purple);opacity:.08}
.wa-svg .cross{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.wa-svg .dot{fill:var(--purple);stroke:#fff;stroke-width:2}
.wa-tip{position:absolute;top:34px;background:var(--ink);color:#fff;padding:5px 9px;font-size:12px;pointer-events:none;
  display:flex;flex-direction:column;min-width:110px}
.wa-tip[hidden]{display:none}
.wa-tip .tip-d{color:var(--mint);font-weight:700}
.wa-tip strong{font-size:15px}
table.wa-t{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
table.wa-t th{text-align:left;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line);padding:3px 4px;font-size:12px}
table.wa-t th.num,table.wa-t td.num{text-align:right;width:72px;font-variant-numeric:tabular-nums}
table.wa-t td{padding:3px 4px;border-bottom:1px solid #f3f3f3}
table.wa-t td.wa-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.wa-t td.wa-name a{color:var(--ink);text-decoration:none}
table.wa-t td.wa-name a:hover{color:var(--purple);text-decoration:underline}
table.wa-t td.empty{color:var(--muted);text-align:center;padding:12px}
/* Search Console has four boxes: two charts, two tables, in pairs rather than 3 + 1. */
@media (min-width:900px){ .wa-grid-2{grid-template-columns:1fr 1fr} }

/* Rail logo, larger and on the same left edge as the menu labels below it (Sam,
   2 Oct 2026: "a bit messy and a bit small"). The labels start 55px in (12 nav
   padding + 12 item padding + 20 icon + 11 gap); the button ends at 54px, so a 1px
   gap puts the logo's left edge on that line. 36px high is as large as the 64px row
   takes without crowding the button. */
.gs-brand-logo{height:36px}
body.has-rail.rail-open .gs-brand,
body.has-rail.rail-pinned .gs-brand{gap:1px}
.gs-brand-link{display:flex;align-items:center;height:40px}
/* The open-rail rule sets the link to display:block, which undid the centring above. */
body.has-rail.rail-open .gs-brand-link,
body.has-rail.rail-pinned .gs-brand-link{display:flex}
/* Labels start at 62px (gap 18 rather than 11), which leaves the logo 8px clear of the
   menu button while still sitting on the same line as the labels. */
@media (min-width:901px){
  body.has-rail.rail-open .gs-item,
  body.has-rail.rail-pinned .gs-item{gap:18px}
  body.has-rail.rail-open .gs-brand,
  body.has-rail.rail-pinned .gs-brand{gap:8px}
}

/* The torn edge on every section, Cashflow and Web Analytics included (Sam, 2 Oct 2026).
   It hangs 13px below the band, so the compact band leaves room for it; the 8px taken
   back from the band's own padding keeps Cashflow's year on one 800px screen. */
.cf-hero{margin-bottom:18px}
.cf-hero .page-head{padding:6px 52px 4px 24px}

/* ── Dashboard ────────────────────────────────────────────────────────────────── */
/* Rise Up (from the Ping social media set) sits along the right of the band, anchored
   to its bottom edge so the newspaper arc meets the torn edge. It is a cut-out with a
   transparent top and left, so the green shows through around it. */
.dash-hero-in{max-width:1280px;margin:0 auto;padding:44px 56px 40px 32px}
.dash-hello{max-width:460px}
.dash-date{font-weight:700;margin:0 0 6px;font-size:15px}
.dash-hero h1.page-title{font-size:72px}
.dash-hero .page-sub{font-size:17px;color:rgba(0,0,0,.78);margin-top:8px}
@media (max-width:900px){
  .dash-hero-in{padding:20px 52px 30px 16px}
  .dash-hero h1.page-title{font-size:48px}
}
.dash{padding-top:28px}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.dash-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:4px solid var(--mint);
  padding:16px 18px;color:var(--ink);text-decoration:none;transition:transform .12s,box-shadow .12s;min-width:0}
.dash-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.dash-card:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .dash-card{transition:none} .dash-card:hover{transform:none} }
.dash-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dash-card-head h2{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:24px;margin:0}
.dash-ic{width:30px;height:30px;display:inline-flex}
.dash-ic svg{width:30px;height:30px}
/* On white, the icons' green parts go back to their own green. */
.dash-ic[data-icon="cash"] g[fill="#fff"],.dash-ic[data-icon="adsping"] path[fill="#fff"]{fill:var(--mint)}
.dash-big{font-family:var(--display);font-style:italic;font-weight:800;font-size:48px;line-height:1;color:var(--purple)}
.dash-big small{font-size:18px;font-family:'DM Sans',sans-serif;font-style:normal;font-weight:700}
.dash-big small.up,.dash-dl small.up{color:#00704f}
.dash-big small.down,.dash-dl small.down{color:var(--danger)}
.dash-loading{font-size:16px;font-family:'DM Sans',sans-serif;font-style:normal;color:var(--muted);font-weight:500}
.dash-note{color:var(--muted);font-size:14px;margin:4px 0 12px}
.dash-dl{margin:0 0 12px;display:grid;gap:6px}
.dash-dl > div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #f0f0f0;padding-top:6px;font-size:14px}
.dash-dl dt{color:var(--muted)}
.dash-dl dd{margin:0;font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dash-dl dd small{font-weight:500;color:var(--muted)}
.dash-dl dd.neg{color:var(--danger)}
.dash-dl dd.warn{color:#b06a00}
.dash-go{margin-top:auto;font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:16px;color:var(--purple)}
.dash-card-out{border-top-color:var(--purple)}

/* Rise Up, massive, across the bottom of the white (Sam, 2 Oct 2026). The page is at
   least a window tall and the picture is pushed to its foot, so it sits on the bottom
   edge with the cards above it, however tall the window. It spans the whole area right
   of the menu, not the 1280px content column. Its top and left are transparent, so it
   fades into the white rather than sitting in a box. */
.dash-wrap{display:flex;flex-direction:column;min-height:100vh}
.dash{padding-bottom:0}
.dash-art{margin-top:auto;padding-top:24px;line-height:0;overflow:hidden}
.dash-art img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;object-position:center bottom}
/* In the column above, the page box would shrink to its content and stack the cards
   one under another; it has to keep the full content width. */
.dash-wrap > .page{width:100%;box-sizing:border-box}
/* The picture's top 12% is empty, so it is trimmed: the hands start at the top of the
   box instead of under a strip of white. */
.dash-art img{aspect-ratio:1280/630;object-fit:cover;object-position:center bottom;max-height:none}
/* Fill exactly what is left of the window under the cards, full width: the picture is
   scaled to the width and the bottom of the newspaper arc is trimmed, so the hands are
   always whole and the dashboard never scrolls. On a short window it keeps 320px and
   the page scrolls instead of squashing it. */
.dash-wrap{height:100vh;min-height:0}
.dash-art{flex:1 1 auto;min-height:320px;position:relative;padding-top:0;margin-top:24px}
.dash-art img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 8%}
@media (max-height:760px){ .dash-wrap{height:auto;min-height:100vh} .dash-art{flex:0 0 360px} }
/* Never larger than the file itself (1280px wide), so it stays sharp on a big monitor
   (Sam, 2 Oct 2026: "out of focus on a large monitor"). "contain" scales it down to fit
   the space under the cards but never up; it sits centred on the bottom edge. */
.dash-art img{left:50%;right:auto;transform:translateX(-50%);width:min(100%,1280px);
  object-fit:contain;object-position:center bottom}

/* ── Publishers: Agreed to AI ─────────────────────────────────────────────────── */
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){ .stats{grid-template-columns:1fr 1fr} .stat:last-child{grid-column:auto} }
.stat-of{font-size:22px;color:var(--muted)}
td.ai-cell{min-width:130px;white-space:normal}
.ai-sel{font:inherit;font-size:13px;font-weight:700;padding:4px 6px;border:2px solid var(--ink);border-radius:0;cursor:pointer;background:#fff;color:var(--ink)}
.ai-sel.ai-yes{background:var(--mint);}
.ai-sel.ai-no{background:#ffe3e3;border-color:var(--danger);color:#8a1414}
.ai-sel.ai-wait{background:#f3f3f3;border-color:#bdbdbd;color:#555}
.ai-sel:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.ai-note-btn{border:none;background:none;padding:0 0 0 6px;font:inherit;font-size:12px;color:var(--purple);cursor:pointer;font-weight:700}
.ai-note-btn:hover{text-decoration:underline}
.ai-note{font-size:12px;color:var(--ink-2);margin-top:4px;max-width:220px;line-height:1.35}
.ai-note[hidden]{display:none}
.ai-by{font-size:11px;color:var(--muted);margin-top:2px}

/* ── Publishers: with us for ads.ping ─────────────────────────────────────────── */
.stats{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){ .stats{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .stats{grid-template-columns:1fr 1fr} }
table.list th.center button{justify-content:center}
td.ads-cell{text-align:center;width:70px}
.ads-tick{display:inline-flex;cursor:pointer;position:relative}
.ads-tick input{position:absolute;opacity:0;width:26px;height:26px;margin:0;cursor:pointer}
.ads-tick span{width:24px;height:24px;border:2px solid var(--ink);background:#fff;display:inline-flex;
  align-items:center;justify-content:center}
.ads-tick input:checked + span{background:var(--purple);border-color:var(--purple)}
.ads-tick input:checked + span::after{content:'';width:6px;height:11px;border:solid #fff;border-width:0 3px 3px 0;
  transform:rotate(45deg) translate(-1px,-1px)}
.ads-tick input:focus-visible + span{outline:2px solid var(--purple);outline-offset:2px}
.ads-only{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer}
.ads-only input{accent-color:var(--purple)}

/* ── ads.ping ─────────────────────────────────────────────────────────────────── */
.ci-steps{margin:0 0 6px;padding-left:20px;line-height:1.55}
.ci-steps li{margin-bottom:6px}
.ci-remove{margin:0 0 0 auto}
.ci-table td,.ci-table th{white-space:nowrap}
.ci-th{display:block;padding:11px 14px;text-transform:uppercase}
.ci-pick{max-width:760px;margin-top:8px}
.ci-pick label{display:block;font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:17px;margin-bottom:6px}
.ci-pick-row{display:flex;gap:10px;flex-wrap:wrap}
.ci-pick-row select{flex:1;min-width:240px;padding:10px 12px;border:1px solid #d6d6d6;font:inherit;font-size:15px;background:#fff}
/* Eight columns now: the table uses the full width beside the menu rather than the
   1280px column, and the hero lines up with it. */
.pub-page{max-width:none}
.pub-hero .page-head{max-width:none}
.ci-share{border-top-color:var(--purple)}
.ci-table tfoot td{font-weight:800;border-top:2px solid var(--ink);background:var(--panel)}
.ci-pub{border-left:2px solid #444}
table.list.ci-table thead tr + tr th{background:#2b2b2b}
.ci-sharecol{color:var(--purple);font-weight:700}
.ci-mtd{color:var(--muted);font-weight:500}
.ci-pubpick select{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:15px;
  padding:7px 10px;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:0;cursor:pointer}

/* ── Publishers: not on the Showcase (panel 0) ────────────────────────────────── */
/* Its own section below the rest, with a heading and a gap above it, and light grey
   rows so a 0 cannot be missed. */
table.list tbody.sec-off tr.sec-head th{background:#ececec;color:var(--ink);text-align:left;padding:14px 14px 8px;
  font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:17px;
  border-top:14px solid var(--bg);border-bottom:1px solid #dcdcdc}
table.list tbody.sec-off tr.sec-head th span{font-family:'DM Sans',sans-serif;font-style:normal;text-transform:none;
  font-weight:500;font-size:13px;color:var(--muted);margin-left:6px}
table.list tbody.sec-off tr[data-name] td{background:#f3f3f3;color:#555}
table.list tbody.sec-off tr[data-name]:hover td{background:#ececec}
table.list tbody.sec-off .pub-name{color:#444}
table.list tr.sec-head[hidden]{display:none}

/* ── Publishers: connected publishers grouped ─────────────────────────────────── */
/* Titles sharing a contact email sit together, marked by a purple bar down the left
   and a tag saying how many titles the group has. No dividing line between groups
   (Sam, 2 Oct 2026: "I don't like these black lines"). The bar only shows in the
   grouped order. */
table.list.grouped tbody tr.grp-multi td:first-child{box-shadow:inset 4px 0 0 var(--purple)}
.grp-tag{display:inline-block;margin-left:8px;padding:1px 6px;font-size:11px;font-weight:700;color:var(--purple);
  background:var(--purple-tint);vertical-align:1px;white-space:nowrap}
/* Neighbouring groups alternate purple and green bars, so one group does not run into
   the next now there is no line between them. */
table.list.grouped tbody tr.grp-multi.grp-alt td:first-child{box-shadow:inset 4px 0 0 var(--mint)}
table.list tbody tr.grp-alt .grp-tag{color:#00704f;background:#d9fff4}