/* Batchrunner · APP direction · components (HTML/CSS rebuilds of Components.swift + the App Store art).
   Every value comes from tokens.css. Mobile first. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink-2);font:400 var(--t-body)/1.6 var(--font-sans);
  font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (prefers-color-scheme: dark){body{background:radial-gradient(1200px 700px at 70% -10%, rgba(43,212,154,.07), transparent 60%) no-repeat, var(--bg)}}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
p{margin:0 0 1em}
h1,h2,h3{color:var(--ink);margin:0;font-weight:800;text-wrap:balance}
h1{font-size:var(--t-display-lg);line-height:1.02;letter-spacing:-.035em}
h2{font-size:var(--t-display-md);line-height:1.08;letter-spacing:-.025em}
h3{font-size:var(--t-title-md);font-weight:600;letter-spacing:-.01em;line-height:1.3}
strong,b{color:var(--ink);font-weight:600}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The app's one typographic flourish: Instrument Serif italic on the emotional pivot word only. */
.pivot{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.005em;font-size:1.1em;line-height:.9;color:var(--accent);padding-right:.04em}
.on-green .pivot{color:var(--on-green-serif)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* Eyebrow (Components: Eyebrow) — uppercase, bold, tracked, muted */
.eyebrow{display:block;font:700 var(--t-eyebrow)/1.3 var(--font-sans);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.eyebrow.green{color:var(--accent)}
.on-green .eyebrow{color:var(--on-green-2)}
.meta{font-size:var(--t-caption);color:var(--muted);margin:0}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--screen-h)}
.read{max-width:var(--col)}
.wrap.read{max-width:1200px}.wrap.read>*{max-width:var(--col)}
section{padding:44px 0}
@media (min-width:900px){section{padding:64px 0}}
.sec-head{margin-bottom:32px;max-width:720px}
.sec-head p:last-child{margin:var(--head-body) 0 0}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font:800 18px/1 var(--font-sans);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.mark{width:30px;height:30px;border-radius:7px;background:url(/assets/img/app-icon.jpg) center/cover;flex:none;box-shadow:0 0 0 1px rgba(10,22,40,.08)}

.nav{display:flex;align-items:center;gap:2px}
.nav a{display:flex;align-items:center;min-height:var(--tap);padding:0 9px;border-radius:var(--r-banner);font:600 15px/1 var(--font-sans);color:var(--ink-2);text-decoration:none}
.nav a[aria-current]{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.nav a.nav-app{background:var(--cta-ink);color:var(--cta-ink-label);padding:0 14px;margin-left:4px;min-height:38px;border-radius:var(--r-banner)}
@media (max-width:420px){.brand{font-size:17px}.nav a{padding:0 7px;font-size:14.5px}.nav a.nav-app{padding:0 11px}}
@media (min-width:900px){.nav{gap:6px}.nav a{padding:0 14px;font-size:16px}}

/* ---------- Buttons (PrimaryButton) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 22px;border-radius:var(--r-button);border:0;
  font:700 17px/1.2 var(--font-sans);letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:transform .18s cubic-bezier(.3,1.6,.5,1),filter .15s;text-align:center}
.btn:active{transform:scale(.97)}  /* .scaleEffect(pressed ? 0.97 : 1) */
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{background:var(--brand-gradient);color:#fff}            /* PrimaryButton(green: true) */
.btn-primary:hover{filter:brightness(1.07)}
.btn-ink{background:var(--cta-ink);color:var(--cta-ink-label)}      /* PrimaryButton() default — ink navy */
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-input)}
.btn-light{background:#fff;color:#0A1628}                             /* on the green panel (pill-white, like the floating pills) */
.btn-text{background:none;color:var(--accent);min-height:var(--tap);padding:0 6px;font-weight:600}
.btn-block{display:flex;width:100%}
.btn-caption{font-size:var(--t-caption);color:var(--muted);text-align:center;margin:10px 0 0;line-height:1.45}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px}  /* .cardStyle() */
.card-big{border-radius:var(--r-big)}
.cream-card{background:var(--bg);border-radius:var(--r-big);padding:24px 22px}  /* app screen lifted onto the green panel (SS4/SS6) */

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:var(--r-pill);font:500 15px/1 var(--font-sans);
  color:var(--ink-2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}          /* RecipientChip .pending */
.chip.sent{color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}  /* .sent */
.chip.sent::after{content:"";width:4px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(42deg)}
.chip.skipped{color:var(--warning);background:var(--warning-soft);box-shadow:inset 0 0 0 1px var(--warning)}
.chip.next{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.status{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);font:700 12px/1 var(--font-sans);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}  /* StatusChip */
.status.done{color:var(--accent);background:var(--accent-soft)}
.status.sending{color:var(--warning);background:var(--warning-soft)}
.status.scheduled{color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-input)}
.status.draft{color:var(--muted);background:color-mix(in srgb,var(--muted) 12%,transparent)}
.merge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-chip);font:600 .86em/1.4 var(--font-sans);white-space:nowrap;
  color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}  /* MergeChip */

/* ---------- Check mark (the green ✓ circle in the ledger) ---------- */
.ck{width:26px;height:26px;border-radius:50%;background:var(--accent);display:inline-grid;place-items:center;flex:none}
.ck::after{content:"";width:6px;height:11px;border:solid var(--surface);border-width:0 2.4px 2.4px 0;transform:translateY(-1.5px) rotate(42deg)}
.ck.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-input)}
.ck.off::after{display:none}
.ck.skip{background:var(--warning)}
.ck.skip::after{width:10px;height:0;border-width:0 0 2.4px 0;transform:none}

/* ---------- Avatar ---------- */
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font:700 14px/1 var(--font-sans);color:var(--ink-2);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- Ledger rows (the app's recipient list: avatar · name · ✓, hairline between) ---------- */
.ledger{list-style:none;margin:0;padding:0}
.ledger>li{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 0;border-bottom:1px solid var(--line)}
.ledger>li:last-child{border-bottom:0}
.ledger .nm{flex:1;min-width:0;font:600 17px/1.35 var(--font-sans);color:var(--ink)}
.ledger .nm small{display:block;font:400 15px/1.5 var(--font-sans);color:var(--ink-2);margin-top:2px}
.ledger .av.step{font-family:var(--font-mono);font-size:15px;color:var(--ink)}

/* ---------- Stat strip (StatStrip: SENT · REMAINING · SKIPPED) ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-button);padding:0;margin:0;list-style:none}
.stats>li{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 6px;text-align:center}
.stats>li+li::before{content:"";position:absolute;left:0;top:50%;height:40px;margin-top:-20px;width:1px;background:var(--line)}
.stats .lbl{font:600 12.5px/1.2 var(--font-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.stats .v{font:700 var(--t-stat-num)/1.05 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.02em}
.stats .v.sent{color:var(--accent)}
.stats .v.skip{color:var(--warning)}
.stats.facts .v{font-size:26px}
.stats.facts .sub{font-size:14px;line-height:1.35;color:var(--ink-2)}

/* ---------- Hero number ("84 of 86 sent") ---------- */
.heronum{display:flex;align-items:flex-end;gap:12px;margin:6px 0 22px;color:var(--ink)}
.heronum .big{font:800 var(--t-hero-num)/.86 var(--font-sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.heronum .of{display:flex;flex-direction:column;padding-bottom:4px}
.heronum .of b{font:700 26px/1.1 var(--font-sans);letter-spacing:-.02em}
.heronum .of .pivot{font-size:30px;line-height:1.1}

/* ---------- InfoNote / calm warning cards ---------- */
.note{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-note);background:var(--raised);font-size:var(--t-caption);line-height:1.5;color:var(--ink-2)}
.note p{margin:0}
.note .ico{width:20px;height:20px;flex:none;margin-top:1px;color:var(--accent)}
.note.warn{background:var(--warning-soft)}
.note.warn .ico{color:var(--warning)}
.note.risk{background:var(--danger-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 35%,transparent)}
.note.risk .ico{color:var(--danger)}

/* ---------- Floating pills (App Store art: "Delivered ✓", "Got it!") ---------- */
.pill-float{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:var(--r-pill);background:#fff;color:#0A1628;
  font:700 17px/1 var(--font-sans);letter-spacing:-.01em;box-shadow:var(--shadow-float);white-space:nowrap}
.pill-float .ck{width:34px;height:34px;background:#0F6B45}
.pill-float .ck::after{border-color:#fff;width:7px;height:13px}

/* ---------- Panels (App Store backgrounds) ---------- */
.panel-green{background:var(--panel-green);color:var(--on-green-2)}
.panel-green h1,.panel-green h2,.panel-green h3,.panel-green strong,.panel-green b{color:var(--on-green)}
.panel-green a:not(.btn){color:#fff}
.panel-cream{background:var(--panel-cream)}

/* ---------- iPhone frame (as in the App Store screenshots) ---------- */
.phone{position:relative;width:min(100%,360px);margin:0 auto;padding:11px;border-radius:58px;background:var(--phone-bezel);
  box-shadow:0 0 0 1.5px #3A3D44, var(--shadow-float), 0 40px 80px rgba(0,0,0,.18)}
.phone .screen{position:relative;overflow:hidden;border-radius:47px;background:var(--bg);min-height:560px;color:var(--ink-2)}
.phone .island{position:absolute;top:11px;left:50%;width:108px;height:31px;margin-left:-54px;border-radius:20px;background:#000;z-index:2}
.phone .sbar{display:flex;justify-content:space-between;align-items:center;height:52px;padding:6px 30px 0 34px;font:600 15px/1 var(--font-sans);color:var(--ink)}
.phone .sbar i{display:inline-block;width:25px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1.2px var(--ink);position:relative}
.phone .sbar i::after{content:"";position:absolute;inset:2px 5px 2px 2px;border-radius:2px;background:var(--ink)}
.phone .navrow{display:flex;align-items:center;justify-content:center;position:relative;height:50px;font:600 17px/1 var(--font-sans);color:var(--ink);letter-spacing:-.01em}
.phone .navrow .back{position:absolute;left:18px;width:40px;height:40px;border-radius:50%;background:var(--raised);box-shadow:var(--shadow-float);display:grid;place-items:center}
.phone .navrow .back::after{content:"";width:9px;height:9px;border:solid var(--ink);border-width:0 0 2.2px 2.2px;transform:translateX(2px) rotate(45deg)}
.phone .body{padding:10px 20px 26px}
.phone-cap{font-size:14px;color:var(--muted);text-align:center;margin:14px 0 0}
.panel-green .phone-cap{color:var(--on-green-2)}

/* ---------- Progress ring (batch runner hero) ---------- */
.ring{position:relative;width:210px;height:210px;margin:8px auto 6px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--accent) 12%,transparent), transparent)}
.ring .in .eyebrow{margin:0 0 2px}
.ring .in .n{font:800 76px/.95 var(--font-sans);letter-spacing:-.05em;color:var(--ink)}
.ring .in .of{font:700 24px/1.2 var(--font-mono);color:var(--ink-2)}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line)}
.tbl thead th{font:700 12.5px/1.3 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--raised)}
.tbl tbody tr:last-child>*{border-bottom:0}
.tbl tbody th{color:var(--ink);font-weight:600}
.tbl .good{color:var(--accent);font-weight:600}
.tbl .bad{color:var(--danger);font-weight:600}
@media (max-width:719px){ /* rows → cards on phones (anti-ugly §7 B) */
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td,table.stack th{display:block;width:100%}
  table.stack tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  table.stack tbody tr:last-child{border-bottom:0}
  table.stack td,table.stack th{padding:3px 0;border:0}
  table.stack td:first-child,table.stack th:first-child{font-weight:600;color:var(--ink);margin-bottom:6px}
  table.stack td[data-l]::before{content:attr(data-l);display:block;font:700 12px/1.4 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}
}
.src{font-size:14.5px;color:var(--muted);margin-top:14px}

/* ---------- FAQ + sources ---------- */
details{border-bottom:1px solid var(--line);padding:4px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;font:600 18px/1.35 var(--font-sans);color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:9px;height:9px;flex:none;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
details[open] summary::after{transform:rotate(-135deg)}
details p{margin:0 0 18px}
ol.sources{padding-left:20px;margin:0}
ol.sources li{margin-bottom:10px;font-size:15.5px}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);padding:44px 0 52px;font-size:15px;color:var(--muted)}
.foot .wrap{display:grid;gap:24px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot nav a{color:var(--ink-2);text-decoration:none;min-height:var(--tap);display:inline-flex;align-items:center}
.foot p{max-width:520px;margin:12px 0 0}
@media (min-width:900px){.foot .wrap{grid-template-columns:1fr auto;align-items:start}}

/* ---------- Two-column helpers ---------- */
.split{display:grid;gap:40px}
@media (min-width:960px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}}
.grid2{display:grid;gap:18px}
@media (min-width:760px){.grid2{grid-template-columns:1fr 1fr}}

/* Ledger-styled steps (guide + app) */
.steps .nm{font-weight:600}
.steps .nm small{font-weight:400}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* App screens / cream cards placed on the green panel keep the app's own (cream) colours */
.panel-green :is(.screen,.cream-card,.card){color:var(--ink-2)}
.panel-green :is(.screen,.cream-card,.card) :is(h1,h2,h3,b,strong,.nm){color:var(--ink)}
.on-green :is(.screen,.cream-card,.card) .pivot{color:var(--accent)}
.on-green :is(.screen,.cream-card,.card) .eyebrow{color:var(--muted)}
.panel-green :is(.screen,.cream-card,.card) a:not(.btn){color:var(--accent)}
.label-ill{display:inline-flex;align-items:center;gap:8px;font:600 14px/1.3 var(--font-sans);color:#fff;background:rgba(255,255,255,.14);padding:7px 12px;border-radius:var(--r-pill);margin:0 0 16px}
[hidden]{display:none!important}