/* The Publishing Hub. Perceptionism Lab's dashboard colours (sales-command-center/design-tokens.json: the near-black
   page, one flat card surface, the gold scale, one green and one red that only ever mean good and bad), laid out as
   cleanly as the TradingFellows Hub it is modelled on: one centred column, a large tight heading, small quiet type
   everywhere else, 12px corners, hairline edges, a faint gold glow behind the page.
   No inline styles anywhere: the Content-Security-Policy refuses them, so widths are drawn in SVG. */
:root {
  --bg: #09090b; --side: #09090b; --card: #141418; --raised: #1c1c21; --hover: #232329; --inset: rgba(255, 255, 255, 0.025);
  --border: #ffffff0f; --edge: #ffffff14; --edge-strong: #ffffff24; --track: rgba(255, 255, 255, 0.07);
  --text: #fafaf9; --soft: #d4d4d8; --muted: #a1a1aa; --faint: #71717a;
  /* Gold is the brand and carries no verdict. */
  --accent: #d4af37; --accent-tint: rgba(212, 175, 55, 0.12); --accent-line: rgba(212, 175, 55, 0.38); --accent-text: #f0d98a;
  --gold-grad: linear-gradient(135deg, #f0d98a 0%, #e5c158 35%, #d4af37 65%, #b8942c 100%); --gold-ink: #17120a;
  /* The only good and bad colours, desaturated so they never read as a traffic light next to the gold. */
  --green: #6ee7a8; --green-tint: rgba(110, 231, 168, 0.12); --green-text: #6ee7a8; --green-line: rgba(110, 231, 168, 0.35);
  --red: #f4776b; --red-tint: rgba(244, 119, 107, 0.12); --red-text: #f4776b; --red-line: rgba(244, 119, 107, 0.38);
  --amber: #f59e0b; --amber-tint: rgba(245, 158, 11, 0.12); --amber-text: #fbbf4d; --amber-line: rgba(245, 158, 11, 0.38);
  --grey-tint: rgba(161, 161, 170, 0.12);
  --sans: 'Geist', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r-sm: 8px; --r: 10px; --r-lg: 12px; --r-xl: 14px;
  /* The flow panel: the darker well its figures sit in, Telegram's blue for the channel stage, and one easing curve. */
  --well: #0e0e11; --tg: #4cb2ec; --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
/* The glow: a wash of gold from the top right, fixed, so the page never reads as a flat black sheet. */
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 520px at 85% -10%, rgba(212, 175, 55, 0.085), transparent 70%), radial-gradient(700px 500px at 0% 110%, rgba(212, 175, 55, 0.035), transparent 70%); }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: 12px; background: var(--inset); border: 1px solid var(--edge); padding: 1px 6px; border-radius: 6px; color: var(--soft); word-break: break-all; }
h1, h2, h3, p { margin: 0; }
h3 { font-size: 12px; letter-spacing: 0; color: var(--faint); font-weight: 600; margin: 22px 0 10px; }
svg { display: block; flex: none; }
.muted { color: var(--muted); font-size: 13px; }
.faint { color: var(--faint); font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- the frame ---------- */
.shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
.side { background: rgba(9, 9, 11, 0.92); border-bottom: 1px solid var(--border); padding: 12px 16px 0; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); font: 600 15px/1 var(--display); letter-spacing: -0.01em; }
.logo:hover { text-decoration: none; }
.logo img { width: 30px; height: auto; }
.logo small { display: block; font: 500 11px/1.2 var(--sans); color: var(--faint); letter-spacing: 0; margin-top: 3px; }
.nav { display: flex; gap: 2px; }
.nav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--muted); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.nav a svg { color: var(--faint); }
.nav a:hover { background: var(--inset); color: var(--text); text-decoration: none; }
.nav a:hover svg { color: var(--soft); }
.nav a.on { background: var(--card); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
.nav a.on svg { color: var(--accent); }
.main { flex: 1 1 auto; min-width: 0; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 22px 16px 56px; }
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.top h1 { font: 700 24px/1.15 var(--display); letter-spacing: -0.025em; }
.top p { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.top .actions { display: flex; gap: 10px; align-items: center; }
.content { display: flex; flex-direction: column; gap: 18px; }

/* The brand switcher: a card at the top of the sidebar; the menu drops over the page. */
.switch { position: relative; margin: 14px 0 0; }
.switch summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--card); cursor: pointer; font-weight: 600; font-size: 13.5px; }
.switch summary:hover { border-color: var(--edge-strong); }
.switch summary::-webkit-details-marker { display: none; }
.switch summary .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch summary svg { color: var(--faint); }
.mark { width: 26px; height: 26px; border-radius: 8px; background: var(--gold-grad); color: var(--gold-ink); display: inline-flex; align-items: center; justify-content: center; font: 700 12.5px/1 var(--display); flex: none; }
.switch .menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); background: var(--raised); border: 1px solid var(--edge); border-radius: var(--r-lg); padding: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; gap: 2px; }
.switch .menu a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); color: var(--soft); font-size: 13.5px; }
.switch .menu a:hover { background: var(--hover); text-decoration: none; }
.switch .menu a.on { color: var(--text); font-weight: 600; }
.switch .menu .role { margin-left: auto; font-size: 11px; color: var(--faint); text-transform: capitalize; }
.switch .menu a.all { color: var(--muted); border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; border-radius: 0 0 var(--r-sm) var(--r-sm); }
.switch-none { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); }
.navs { display: flex; overflow-x: auto; scrollbar-width: none; margin: 10px -4px 0; padding-bottom: 10px; gap: 2px; }
.navs::-webkit-scrollbar { display: none; }
.navs .group { display: none; }
.navs .nav { margin: 0; padding: 0; overflow: visible; flex: none; }
/* On a phone the account sits in the top corner: the avatar, which opens Account, and Sign out. */
.side .foot { position: absolute; top: 12px; right: 14px; display: flex; align-items: center; gap: 4px; }
.side .foot .me { display: flex; color: var(--text); }
.side .foot .me > span:last-child { display: none; }
.side .foot form button { margin: 0; padding: 6px; background: none; border: 0; color: var(--faint); box-shadow: none; }

@media (min-width: 1000px) {
  .shell { flex-direction: row; }
  .side { position: sticky; top: 0; height: 100vh; width: 248px; flex: none; display: flex; flex-direction: column; border-bottom: 0; border-right: 1px solid var(--border); padding: 20px 14px 14px; overflow-y: auto; background: transparent; backdrop-filter: none; }
  .logo { padding: 0 6px; }
  .navs { display: block; margin: 6px 0 0; padding: 0; overflow: visible; }
  .navs .group { display: block; font-size: 12px; font-weight: 500; color: var(--faint); padding: 0 10px; margin: 18px 0 4px; }
  .nav { flex-direction: column; }
  /* The current screen: a thin gold bar at the sidebar's edge, as well as the raised fill. */
  .nav a.on::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); }
  .side .foot { position: static; display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
  .side .foot .me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--text); }
  .side .foot .me:hover { text-decoration: none; }
  .side .foot .me span span { display: block; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side .foot .me b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side .foot .me > span:last-child { display: block; min-width: 0; }
  .side .foot form button { margin: 0; padding: 7px; background: none; border: 0; color: var(--faint); border-radius: var(--r-sm); }
  .side .foot form button:hover { color: var(--text); background: var(--hover); }
  .wrap { padding: 40px 40px 72px; }
  .top { margin-bottom: 26px; }
  .top h1 { font-size: 28px; }
}
.avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--accent-tint); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font: 700 12.5px/1 var(--display); box-shadow: inset 0 0 0 1px var(--accent-line); }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px 15px; min-width: 0; }
.tile .k { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.tile .v { display: block; font: 650 26px/1.1 var(--display); letter-spacing: -0.025em; margin-top: 10px; }
.tile .v.amber { color: var(--amber-text); }
.tile .n { display: block; margin-top: 6px; font-size: 12px; color: var(--faint); }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

/* ---------- cards and grids ---------- */
.card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px 20px; min-width: 0; overflow-x: auto; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush .head { padding: 18px 20px 0; }
.card.narrow { max-width: 400px; width: 100%; margin: 12vh auto 0; padding: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.card.narrow h1 { font: 700 22px/1.2 var(--display); letter-spacing: -0.02em; margin-bottom: 8px; }
.card.narrow p { margin-bottom: 12px; color: var(--muted); font-size: 13.5px; }
.card > h2 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.card > p.muted { margin-bottom: 14px; }
.card > .notice { margin-top: 14px; }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.head p { font-size: 12.5px; color: var(--muted); margin-top: 3px; max-width: 70ch; }
.head .count, .sectionhead .count { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--raised); border-radius: 99px; padding: 2px 9px; margin-left: 8px; }
.grid { display: grid; gap: 18px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.two { display: grid; gap: 18px; }
.grid.two { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .grid.two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.scroll { overflow-x: auto; }
.pad { padding: 0 20px 20px; }

/* ---------- tables ---------- */
table { border-collapse: collapse; width: 100%; }
.t th { text-align: left; font-size: 12px; font-weight: 500; color: var(--faint); padding: 12px 20px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.t td { padding: 12px 20px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13.5px; }
.t tbody tr:last-child td { border-bottom: 0; }
.t tbody tr:hover td { background: var(--inset); }
.t .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.t .r { text-align: right; }
.t .sub { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.t .main-link { color: var(--text); font-weight: 600; }
.t code { white-space: nowrap; word-break: normal; }
.t td.ad { min-width: 200px; }
.t td.ad .sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
/* Follow-up list: the ad set name wraps under the page so the Mark messaged button stays in view without scrolling. */
.t.followup td.ad { min-width: 160px; }
.t.followup td.from code { display: inline-block; margin-top: 4px; white-space: normal; word-break: normal; }
.t.followup td.when { white-space: nowrap; }
.t tr.untraced td { background: var(--inset); }
.t.compact { margin-top: 14px; }
.t.compact th, .t.compact td { padding: 8px 10px; }
.bad-text { color: var(--red-text); }

/* ---------- states ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.green { color: var(--green-text); background: var(--green-tint); }
.pill.amber { color: var(--amber-text); background: var(--amber-tint); }
.pill.red { color: var(--red-text); background: var(--red-tint); }
.pill.grey { color: var(--muted); background: var(--grey-tint); }
.pill.blue { color: var(--accent-text); background: var(--accent-tint); }
/* A state is always said in words beside its dot, so colour is never the only signal. */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--faint); flex: none; }
.dot.good { background: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.dot.warn { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-tint); }
.dot.bad { background: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.dot.busy { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.status { display: flex; flex-direction: column; }
.status > div { display: flex; align-items: flex-start; gap: 4px; padding: 12px 0; border-top: 1px solid var(--border); }
.status > div:first-child { border-top: 0; padding-top: 0; }
.status .dot { margin-top: 6px; }
.status b { display: block; font-weight: 600; font-size: 13.5px; }
.status b a { color: var(--text); }
.status span { display: block; font-size: 12.5px; color: var(--muted); }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 20px; color: var(--muted); font-size: 13px; }
.empty::before { content: ''; width: 40px; height: 40px; border-radius: var(--r-lg); margin-bottom: 6px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--edge); }
.empty b { color: var(--text); font-size: 14.5px; font-weight: 600; }
.notice { border-radius: var(--r-lg); padding: 11px 14px; border: 1px solid var(--edge); background: var(--card); color: var(--soft); font-size: 13.5px; }
.notice.good { border-color: var(--green-line); background: var(--green-tint); }
.notice.warn { border-color: var(--amber-line); background: var(--amber-tint); }
.notice.bad { border-color: var(--red-line); background: var(--red-tint); }
.notice.busy { border-color: var(--accent-line); background: var(--accent-tint); }

/* ---------- forms and buttons ---------- */
form { margin: 0; }
label { display: block; margin: 12px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 500; }
label.tick { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 13.5px; }
label.tick input { display: inline; width: auto; margin: 0; accent-color: var(--accent); }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 9px 12px; border-radius: var(--r); border: 1px solid var(--edge); background: var(--raised); color: var(--text); font: inherit; font-size: 13.5px; }
input:hover, select:hover, textarea:hover { border-color: var(--edge-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-tint); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[readonly] { background: var(--inset); color: var(--soft); }
input[type="file"] { padding: 8px 10px; }
textarea { resize: vertical; line-height: 1.5; }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 8px 15px; border: 0; border-radius: var(--r); background: var(--gold-grad); color: var(--gold-ink); font: inherit; font-weight: 650; font-size: 13.5px; cursor: pointer; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px -8px rgba(212, 175, 55, 0.6); }
button:hover, .btn:hover { text-decoration: none; filter: brightness(1.06); }
button.ghost, .btn.ghost { background: var(--card); border: 1px solid var(--edge); color: var(--text); font-weight: 550; box-shadow: none; }
button.ghost:hover, .btn.ghost:hover { border-color: var(--edge-strong); background: var(--raised); filter: none; }
button.small, .btn.small { margin: 0; padding: 6px 11px; font-size: 12.5px; }
button.link { margin: 0; padding: 0; background: none; border: 0; color: var(--accent-text); font-weight: 500; box-shadow: none; }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: 0.45; cursor: not-allowed; }
.row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.card .row-actions { margin-top: 16px; flex-wrap: wrap; justify-content: flex-start; }
.row-actions form { margin: 0; }
.formrow { display: grid; gap: 0 16px; }
@media (min-width: 1000px) { .formrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.t td input, .t td select { margin-top: 0; min-width: 110px; }
.t td label.tick { margin: 0; white-space: nowrap; }
form.inline { display: flex; gap: 8px; align-items: center; }
form.inline select { margin: 0; width: auto; }
.copyline { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.copyline input { margin: 0; font-family: var(--mono); font-size: 12px; }
.copyline button { flex: none; }
pre.snippet, pre.checkout { margin: 10px 0 0; padding: 12px 14px; background: var(--inset); border: 1px solid var(--edge); border-radius: var(--r); font: 12px/1.6 var(--mono); color: var(--soft); white-space: pre-wrap; word-break: break-all; }
pre.snippet.prose { font: 13.5px/1.6 var(--sans); word-break: normal; overflow-wrap: anywhere; }
details.more { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); }
details.more summary { cursor: pointer; padding: 16px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary span { font-weight: 400; color: var(--muted); font-size: 12.5px; }
details.more > div { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 16px; }
details.pw { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
details.pw summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.ticks { display: grid; gap: 6px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- the period buttons, tabs, and the "i" on each figure ---------- */
.seg { display: flex; gap: 2px; background: var(--card); border: 1px solid var(--edge); border-radius: var(--r); padding: 3px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a { padding: 5px 11px; border-radius: 7px; color: var(--muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.seg a:hover { color: var(--text); text-decoration: none; }
.seg a.on { background: var(--raised); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--edge); }
.tabs { display: flex; gap: 2px; padding: 3px; width: max-content; max-width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto; scrollbar-width: none; margin-top: -4px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 6px 13px; border-radius: 9px; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { background: var(--raised); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--edge); }
.tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--edge-strong); color: var(--faint); font: italic 600 9.5px/1 var(--sans); cursor: help; vertical-align: 1px; margin-left: 4px; }
.tip:hover::after, .tip:focus::after { content: attr(data-tip); position: absolute; z-index: 50; top: calc(100% + 8px); left: -8px; width: min(300px, 78vw); padding: 10px 12px; border-radius: var(--r); background: var(--raised); border: 1px solid var(--edge); color: var(--soft); font: 400 12.5px/1.45 var(--sans); text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
.card.flush:has(.tip), .card:has(.tip) { overflow: visible; }
@media (max-width: 999px) { .top { flex-wrap: wrap; align-items: flex-start; } .top .actions { width: 100%; } }

/* ---------- bars ---------- */
.bar { width: 100%; min-width: 120px; height: 6px; border-radius: 99px; overflow: hidden; }
.bar .track { fill: var(--track); }
.bar .fill { fill: var(--accent); }
.bar.green .fill { fill: var(--green); }
.bar.amber .fill { fill: var(--amber); }
.staybar { width: 100%; min-width: 140px; height: 6px; border-radius: 99px; overflow: hidden; }
.staybar .track { fill: var(--track); }
.staybar .fill { fill: var(--accent); }

/* ---------- the flow: each step a tile, joined to the next by a short line ---------- */
.flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.flow .step { position: relative; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flow .step .k { font-size: 12px; color: var(--muted); font-weight: 500; }
.flow .step b { font: 650 22px/1.2 var(--display); letter-spacing: -0.02em; margin-top: 2px; }
.flow .step .n { font-size: 11.5px; color: var(--faint); }
@media (min-width: 1000px) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .flow .step + .step::before { content: ''; position: absolute; left: -14px; top: 50%; width: 10px; border-top: 1px dashed var(--edge-strong); }
  .flow .step:nth-child(4n + 1)::before { display: none; }
}
/* ---------- The flow panel (Pages, Channels): stages of the journey, each a lighter row of darker figure tiles joined by
   moving dashes in the stage's colour; gold for the page, Telegram blue for the channel, green for what joiners did next and for money. ---------- */
.fl, .fe-card { padding: 18px; container-type: inline-size; }
.fl-h { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.fl-h > div:first-child { display: flex; align-items: center; gap: 10px; }
.fl-h h2 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.fl-hd { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.fl-hd b { color: var(--text); font-weight: 650; }
.fs { --c: var(--accent); margin-top: 14px; padding: 12px; border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.04); }
.fs + .fs { margin-top: 12px; }
.fs.channel { --c: var(--tg); }
.fs.money, .fs.next { --c: var(--green); }
.fs-h { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--soft); }
.fs-h i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.fs-row { display: flex; align-items: stretch; margin-top: 11px; }
.fn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 13px 14px 12px; border-radius: var(--r-lg); background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); }
.fn > b { font: 650 28px/1.1 var(--display); letter-spacing: -0.03em; }
.fn > span { font-size: 13.5px; line-height: 1.25; color: var(--soft); }
.fn > small { font-size: 12.5px; line-height: 1.35; color: var(--faint); }
.fn > small b { font-weight: 700; color: var(--soft); }
.fn.end { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, var(--well)), var(--well) 80%); }
.fn.end > b { color: var(--c); }
.fn.bump > b { animation: flPop 0.5s var(--ease); }
.fn.blank { visibility: hidden; }
.fc { flex: 0 0 34px; display: flex; align-items: center; padding: 0 6px; }
.fc i { display: block; width: 100%; height: 3px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, transparent); }
.fc i::before { content: ''; display: block; width: calc(100% + 16px); height: 100%; background: repeating-linear-gradient(90deg, var(--c) 0 8px, transparent 8px 16px); animation: flDash 0.9s linear infinite; }
.fl-note { margin: 14px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--faint); }
.fl-note + .fl-note { margin-top: 6px; }
.fl-note b { font-weight: 650; color: var(--soft); }
.fl-say { margin: 8px 2px 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.fl-say b { color: var(--text); }
@container (max-width: 520px) {
  .fs { padding: 10px; }
  .fn { padding: 10px 9px 9px; }
  .fn > b { font-size: 21px; }
  .fn > span { font-size: 12px; }
  .fn > small { font-size: 11px; }
  .fc { flex-basis: 14px; padding: 0 2px; }
}

/* The live feed beside it: a round icon per kind of event, the ad set in bold, where and when underneath. */
.fe-note { margin-top: 4px; font-size: 12.5px; color: var(--faint); }
.fe { display: flex; flex-direction: column; margin-top: 8px; }
.fe-i { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-top: 1px solid var(--border); }
.fe-i:first-child { border-top: 0; }
.fe-i > i { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); color: var(--muted); }
.fe-i.tap > i { background: var(--accent-tint); color: var(--accent-text); }
.fe-i.join > i { background: var(--green-tint); color: var(--green); }
.fe-i.leave > i { background: var(--red-tint); color: var(--red); }
.fe-i.money > i { background: var(--green); color: #06120c; }
.fe-i.flag > i { background: var(--amber-tint); color: var(--amber-text); }
.fe-i > div { min-width: 0; padding-top: 1px; }
.fe-i p { font-size: 15px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.fe-i p b { font-weight: 600; color: var(--text); }
.fe-i p a { color: var(--soft); }
.fe-i p a:hover { color: var(--text); }
.fe-i small { display: block; margin-top: 3px; font-size: 13px; color: var(--faint); }
.fe-card:not(.again) .fe-i, .fe-i.new { animation: feIn 0.5s var(--ease) both; }
.fe-card:not(.again) .fe-i:nth-child(2) { animation-delay: 0.05s; }
.fe-card:not(.again) .fe-i:nth-child(3) { animation-delay: 0.1s; }
.fe-card:not(.again) .fe-i:nth-child(4) { animation-delay: 0.15s; }
.fe-card:not(.again) .fe-i:nth-child(5) { animation-delay: 0.2s; }
.fe-card:not(.again) .fe-i:nth-child(n + 6) { animation-delay: 0.25s; }
@media (min-width: 1000px) { .fe .fe-i:nth-child(n + 7) { display: none; } }

@keyframes flDash { from { transform: translateX(-16px); } to { transform: none; } }
@keyframes flPop { from { opacity: 0; transform: scale(0.6); } }
@keyframes feIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(110, 231, 168, 0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(110, 231, 168, 0); } }
.live::before { animation: livePulse 2.2s ease-out infinite; }
/* Channels' change in members over the period, above the day chart: joined, left, and the net change. */
.grow { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 16px; }
.grow > div { display: flex; flex-direction: column; gap: 2px; }
.grow b { font: 650 22px/1.15 var(--display); letter-spacing: -0.02em; }
.grow b.up { color: var(--green-text); }
.grow b.down { color: var(--red-text); }
.grow span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--faint); }
.grow .net { padding-left: 28px; border-left: 1px solid var(--border); }

/* A button that reads as a link, under an ad set's name: copies its Telegram link. */
button.linkbtn { display: block; margin: 4px 0 0; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; font: 500 12px/1.4 var(--sans); color: var(--accent-text); cursor: pointer; }
button.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; background: none; filter: none; }
td.num .up { color: var(--green-text); font-weight: 600; }

/* ---------- Motion across the app: each screen rises in, bars grow from their base, the live dot pulses. ---------- */
.content { animation: viewIn 0.35s var(--ease) backwards; } /* backwards: once done it leaves no transform behind, which would trap fixed-position children */
.tile .spark rect, .chart-plot rect:not(.hit) { transform-box: fill-box; transform-origin: 50% 100%; animation: barUp 0.7s var(--ease) both; }
.bar .fill, .staybar .fill { transform-box: fill-box; transform-origin: 0 50%; animation: barRight 0.8s var(--ease) both; }
.live.off { color: var(--muted); }
.live.off::before { background: var(--faint); box-shadow: none; animation: none; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes barUp { from { transform: scaleY(0.06); } }
@keyframes barRight { from { transform: scaleX(0); } }

/* The card a screen opens on (Autopilot, Ads): three soft lights drifting slowly behind it, and a faint grid. */
.card.hero { overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #17171c, var(--card) 70%); }
.card.hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 80% 90% at 75% 0%, #000, transparent 75%); }
.card.hero > :not(.hero-light) { position: relative; z-index: 1; }
.hero-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; animation: fadeIn 1.4s ease both; }
.hero-light i { position: absolute; width: min(46%, 460px); aspect-ratio: 1; border-radius: 50%; filter: blur(70px); }
.hero-light i:nth-child(1) { left: -12%; top: -170px; background: rgba(212, 175, 55, 0.3); animation: heroL1 17s ease-in-out infinite alternate; }
.hero-light i:nth-child(2) { right: -12%; top: -150px; background: rgba(76, 178, 236, 0.18); animation: heroL2 21s ease-in-out infinite alternate; }
.hero-light i:nth-child(3) { left: 30%; bottom: -300px; background: rgba(110, 231, 168, 0.16); animation: heroL3 25s ease-in-out infinite alternate; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-count { font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, 0.06); border-radius: 99px; padding: 3px 10px; }
.card > .hero-h { margin-top: 14px; font: 700 22px/1.2 var(--display); letter-spacing: -0.02em; }
.hero-p { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.hero-nums { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 18px 0 14px; }
.hero-nums > div { display: flex; flex-direction: column; animation: fsRise 0.6s var(--ease) both; }
.hero-nums > div:nth-child(2) { animation-delay: 0.08s; }
.hero-nums > div:nth-child(3) { animation-delay: 0.16s; }
.hero-nums b { font: 650 24px/1.15 var(--display); letter-spacing: -0.025em; }
.hero-nums span { font-size: 12.5px; color: var(--faint); }
.hero-nums b.bad { color: var(--red-text); }
@keyframes heroL1 { to { transform: translate(40%, 24%) scale(1.25); } }
@keyframes heroL2 { to { transform: translate(-30%, 30%) scale(1.15); } }
@keyframes heroL3 { to { transform: translate(-25%, -30%) scale(1.2); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fsRise { from { opacity: 0; transform: translateY(12px); } }

/* While Claude writes: the form's steps light up one after another, so a long wait reads as work in progress. */
.wait { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--accent-tint); border: 1px solid var(--accent-line); }
.wait ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.wait li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--faint); animation: waitOn 0.4s var(--ease) both; }
.wait li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--edge-strong); animation: waitDot 0.4s var(--ease) both; }
.wait li:nth-child(2), .wait li:nth-child(2)::before { animation-delay: 5s; }
.wait li:nth-child(3), .wait li:nth-child(3)::before { animation-delay: 14s; }
.wait p { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
@keyframes waitOn { to { color: var(--text); } }
@keyframes waitDot { to { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); } }

@media (prefers-reduced-motion: reduce) {
  .fc i::before, .fn.bump > b, .fe-i, .live::before, .content, .tile .spark rect, .chart-plot rect, .bar .fill, .staybar .fill,
  .hero-light, .hero-light i, .hero-nums > div { animation: none !important; }
}

/* ---------- plain pages: sign-in, a link that has run out, the shared report ---------- */
.plain .top-plain { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; }
.plain main { position: relative; z-index: 1; padding: 0 16px 40px; }
.plain .card.narrow button { width: 100%; }
.plain .report { max-width: 1140px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 18px; }

/* ---------- Home ---------- */
.hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* The setup steps as a row: each step a numbered circle, joined by a line; the current one opens below. */
.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); margin: 4px 0 2px; overflow-x: auto; scrollbar-width: none; }
.stepper a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 10px; border-radius: var(--r-lg); color: var(--muted); text-align: center; font-size: 12.5px; font-weight: 500; min-width: 92px; }
.stepper a:hover { text-decoration: none; color: var(--text); }
.stepper a::before { content: ''; position: absolute; top: 25px; left: -50%; width: 100%; height: 1px; background: var(--edge-strong); z-index: 0; }
.stepper a:first-child::before { display: none; }
.stepper .n { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 650; background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--edge-strong); }
.stepper .done .n { background: var(--green-tint); color: var(--green-text); box-shadow: inset 0 0 0 1px var(--green-line); }
.stepper .done::before { background: var(--green-line); }
.stepper .now { background: var(--raised); color: var(--text); font-weight: 600; }
.stepper .now .n { background: var(--gold-grad); color: var(--gold-ink); box-shadow: 0 0 0 4px var(--accent-tint); }
.stepper .tag { font-size: 10.5px; font-weight: 650; color: var(--accent-text); background: var(--accent-tint); border-radius: 99px; padding: 1px 8px; }
.stepnow { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 14px; }
.stepnow p { color: var(--soft); font-size: 13.5px; margin-bottom: 10px; }
.steps { display: flex; flex-direction: column; }
.steps > a, .steps > div { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); color: var(--text); }
.steps > :first-child { border-top: 0; padding-top: 0; }
.steps > a:hover { text-decoration: none; }
.steps > a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.steps .n { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--edge-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; color: var(--muted); flex: none; }
.steps .done .n { background: var(--green-tint); box-shadow: inset 0 0 0 1px var(--green-line); color: var(--green-text); }
.steps .done b { color: var(--muted); font-weight: 500; }
.steps b { display: block; font-weight: 600; font-size: 13.5px; }
.steps span.w { display: block; font-size: 12.5px; color: var(--faint); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--green-text); }
.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.brandgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.brandgrid .card { display: flex; flex-direction: column; gap: 14px; color: var(--text); }
.brandgrid .card:hover { border-color: var(--accent-line); text-decoration: none; }
.brandgrid .card .top-row { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.brandgrid .card .top-row .pill { margin-left: auto; }
.brandgrid .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.brandgrid .nums div { display: flex; flex-direction: column; }
.brandgrid .nums b { font: 650 20px/1.2 var(--display); letter-spacing: -0.02em; }
.brandgrid .nums span { font-size: 11.5px; color: var(--faint); }

/* ---------- Listening ---------- */
.ls-h { font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; margin: 18px 0 8px; }
.ls-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.ls-list li b { display: block; font-weight: 600; font-size: 13.5px; }
.ls-list li span { display: block; font-size: 12.5px; color: var(--muted); }
.t td.w { width: 30%; }
.t td.ls-text { min-width: 260px; max-width: 520px; }
.ls-add { align-items: end; margin-bottom: 14px; }
.ls-add button { margin-top: 8px; }
.ls-phrases { display: grid; gap: 8px; }
.ls-phrases input { margin-top: 0; }
.ls-thread .head h2 { font-size: 14.5px; }
.ls-thread textarea[readonly] { font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.ls-bubble { max-width: 420px; background: var(--raised); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 12px 14px; }
.ls-bubble p { margin: 0; font-size: 13.5px; white-space: pre-wrap; }
.ls-button { display: block; margin-top: 10px; text-align: center; padding: 7px 10px; border-radius: 8px; background: var(--accent-tint); color: var(--accent-text); font-weight: 600; font-size: 12.5px; }
@media (min-width: 1000px) { .ls-phrases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ls-add { grid-template-columns: minmax(0, 2fr) auto; } }
/* ---------- Spend and Autopilot ---------- */
/* The shared spend report: the team's numbers on a page with no sidebar and nothing to change. */
.plain .report { max-width: 1180px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 16px; }
.report-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.report-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.report-head p { margin-top: 4px; }
/* Ad accounts: the token box and Stop reading sit in one cell. */
.t td.r form + form { margin-top: 6px; }
.t td.r form.inline { justify-content: flex-end; }
.t td.r form.inline input { width: 220px; }
/* The morning message preview reads as the message, not as code. */
pre.snippet.prose { font: 13.5px/1.6 var(--sans); word-break: normal; overflow-wrap: anywhere; }
input[type="file"] { padding: 8px 10px; }
/* ---------- Ads ---------- */
.sectionhead { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.sectionhead h2 { font-size: 15px; font-weight: 600; }
.angles { display: grid; gap: 8px; }
@media (min-width: 1000px) { .angles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
label.angle { align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); cursor: pointer; }
label.angle input { margin-top: 3px; }
label.angle b { display: block; font-size: 13.5px; }
label.angle .faint { display: block; }
.adwords { display: grid; gap: 10px; }
.adfield textarea { margin-top: 4px; font-size: 13.5px; line-height: 1.5; }
.adfield textarea[rows="1"] { resize: none; }
.adlabel { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.checked { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.flags { display: flex; flex-direction: column; gap: 8px; }
.flag { border: 1px solid var(--amber-line); background: var(--amber-tint); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soft); }
.flagtop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flag q { font-weight: 600; color: var(--text); }
.flag .fix { color: var(--text); }
.saveform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.saveform label { flex: 1 1 260px; margin: 0; }
.saveform button { margin: 0; }
.adcard .row-actions form { margin: 0; }
details.more-fields { margin-top: 14px; }
details.more-fields summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.tplgrid { display: grid; gap: 16px; }
@media (min-width: 1000px) { .tplgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.clip { display: block; max-width: 640px; color: var(--soft); font-size: 13px; }
.frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1000px) { .frames { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.frame { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.frame img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.frame.square { max-width: 360px; }
.frame figcaption { font-size: 12.5px; color: var(--muted); }
/* ---------- Pages ---------- */
.pg-gap { margin-top: 12px; }
.pg-seen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.copyline button { flex: none; }
.flow.pg-three { grid-template-columns: minmax(0, 1fr); margin-bottom: 4px; }
@media (min-width: 640px) { .flow.pg-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pg-checks li { display: flex; align-items: flex-start; gap: 4px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.pg-checks li:first-child { border-top: 0; padding-top: 0; }
.pg-checks .dot { margin-top: 6px; }
.pg-checks .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.top p .pill { margin-left: 6px; vertical-align: 1px; }
/* Side-by-side figures that are not steps (a page's speed) carry no joining line. */
.flow.pg-three .step::before { display: none; }
.stepnow .btn { margin-top: 14px; }

/* ---------- empty screens, the column chart, the sidebar's search, bell and folding groups ---------- */
.empty::before { display: none; }
.empty i { width: 44px; height: 44px; border-radius: var(--r-lg); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-text); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line); margin-bottom: 6px; }
.empty span { max-width: 46ch; }
.empty .btn { margin-top: 8px; }
.chart { display: flex; gap: 10px; align-items: stretch; margin-top: 4px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--faint); text-align: right; min-width: 28px; padding-bottom: 22px; }
.chart-plot { flex: 1; min-width: 0; }
.chart-plot svg { width: 100%; height: 140px; display: block; }
.chart-plot line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-plot rect.c0 { fill: var(--accent); }
.chart-plot rect.c1 { fill: rgba(161, 161, 170, 0.35); }
.chart-plot rect.hit { fill: transparent; cursor: pointer; }
.chart-plot rect.hit:hover, .chart-plot rect.hit.on { fill: rgba(255, 255, 255, 0.06); }
.chart-pick { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.chart-pick:empty { display: none; }
.chart-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 6px; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend span::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--accent); }
.legend .k1::before { background: rgba(161, 161, 170, 0.35); }
.sidetools { display: flex; gap: 6px; margin-top: 10px; }
.sidetools form { flex: 1; min-width: 0; position: relative; }
.sidetools input { margin: 0; padding: 7px 10px 7px 32px; font-size: 13px; background: var(--card); }
.sidetools form svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.sidetools .bellbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; flex: none; border-radius: var(--r); border: 1px solid var(--edge); background: var(--card); color: var(--muted); }
.sidetools .bellbtn:hover { color: var(--text); text-decoration: none; border-color: var(--edge-strong); }
.sidetools .bellbtn b { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--red); color: #1a0705; font-size: 10.5px; line-height: 17px; text-align: center; }
details.group-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
details.group-fold > summary::-webkit-details-marker { display: none; }
details.group-fold > summary svg { color: var(--faint); transition: transform 0.15s; }
details.group-fold:not([open]) > summary svg { transform: rotate(-90deg); }
@media (max-width: 999px) { .sidetools { display: none; } details.group-fold > summary { display: none; } details.group-fold { display: contents; } }
/* A wide table: tighter cells, so ten columns fit a laptop screen without sideways scrolling. */
.t.dense th, .t.dense td { padding-left: 10px; padding-right: 10px; }
.t.dense th:first-child, .t.dense td:first-child { padding-left: 20px; }
.t.dense th:last-child, .t.dense td:last-child { padding-right: 20px; }
.t.dense th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.t .num .sub { text-align: right; }
.sample-note { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.sample-note a { margin-left: auto; }
@media (min-width: 1000px) { .navs details.group-fold > summary.group { display: flex; padding-right: 8px; } .navs details.group-fold > summary.group:hover { color: var(--muted); } }

/* A tile's trend: a small bar a day under the figure. The bars stretch with the tile; the numbers are in each bar's title. */
.tile:has(.spark) { display: flex; flex-direction: column; }
.tile .spark { display: block; width: 100%; height: 30px; margin-top: auto; padding-top: 12px; box-sizing: content-box; }
.tile .spark rect { fill: var(--accent); opacity: 0.85; }
.tile .spark rect.zero { fill: var(--track); opacity: 1; }

/* "Do more of what works": what the winning ad set did, what the last one did, and the ad that runs in the winner. */
.works .head { margin-bottom: 10px; }
.works-line { font-size: 13.5px; color: var(--soft); margin: 6px 0 0; }
.works-line b { color: var(--text); font-weight: 600; }
.works-ad { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; padding: 12px 14px; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-lg); font-size: 13px; color: var(--muted); }
.works-ad .k { font-size: 11.5px; color: var(--faint); font-weight: 500; }
.works-ad b { color: var(--text); font-weight: 600; font-size: 13.5px; }
.pad-x { padding: 0 20px 12px; }

/* Two cards side by side on a computer, each half the width: how fast they leave, where they join from. */
.grid.halves { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .grid.halves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t td.barcell { width: 32%; }

/* Autopilot: every run, folded under the one-line-per-job table. */
details.runs { border-top: 1px solid var(--border); }
details.runs summary { cursor: pointer; padding: 14px 20px; color: var(--muted); font-size: 13px; font-weight: 500; list-style: none; display: flex; gap: 8px; align-items: center; }
details.runs summary::-webkit-details-marker { display: none; }
details.runs summary span { font-size: 12px; font-weight: 600; background: var(--raised); border-radius: 99px; padding: 1px 8px; }
details.runs summary:hover { color: var(--text); }