/* Generated from the approved prototype stylesheet. Edit the prototype, then re-run the port. */
/* Single light world, committed: cool paper ground with a faint navy glow and grain, navy header with one amber line, one cobalt accent, mailer colours as the second voice. One family (IBM Plex Sans), Plex Mono for times and codes. */
:root{
  --h:222;
  --bg:hsl(var(--h) 36% 96.5%);--card:#fff;--fg:hsl(var(--h) 32% 12%);--mut:hsl(var(--h) 12% 42%);--line:hsl(var(--h) 24% 88%);--line-strong:hsl(var(--h) 22% 76%);--soft:hsl(var(--h) 30% 97.5%);
  --accent:hsl(var(--h) 66% 47%);--accent-2:hsl(var(--h) 70% 40%);--accent-soft:hsl(var(--h) 75% 94%);--accent-fg:#fff;--bar:hsl(var(--h) 50% 12%);--bar-2:hsl(var(--h) 45% 18%);--bar-fg:hsl(var(--h) 25% 74%);--live:hsl(36 92% 50%);--live-soft:hsl(38 95% 90%);
  --ok-bg:hsl(150 48% 92%);--ok:hsl(150 58% 24%);--warn-bg:hsl(42 88% 90%);--warn:hsl(32 72% 30%);--bad-bg:hsl(4 72% 94%);--bad:hsl(4 60% 38%);--info-bg:var(--accent-soft);--info:hsl(var(--h) 62% 36%);--mut-bg:hsl(var(--h) 22% 91%);
  --short:hsl(38 85% 95%);--phase:hsl(var(--h) 65% 95%);--phase-fg:hsl(var(--h) 58% 32%);--log:hsl(var(--h) 48% 9%);--log-fg:hsl(var(--h) 20% 80%);
  --shadow:0 1px 2px hsl(var(--h) 45% 20% / .06),0 10px 28px -18px hsl(var(--h) 50% 20% / .35);
  --shadow-hover:0 2px 4px hsl(var(--h) 45% 20% / .07),0 18px 40px -22px hsl(var(--h) 50% 20% / .45);
  --sans:"IBM Plex Sans",system-ui,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);--fast:150ms;--mid:220ms;
  --fs-0:12px;--fs-1:13px;--fs-2:14px;--fs-3:16px;--fs-4:18px;--fs-5:24px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--line-strong) transparent}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:var(--fs-2);line-height:1.5;caret-color:var(--accent);accent-color:var(--accent);-webkit-font-smoothing:antialiased;position:relative;min-height:100%}
/* ground: a soft navy glow from the top and a fine grain, so the page is not a flat sheet */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(900px 420px at 18% -10%,hsl(var(--h) 70% 88% / .9),transparent 70%),radial-gradient(700px 360px at 90% 0%,hsl(36 90% 90% / .55),transparent 70%),var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
::selection{background:var(--accent-soft);color:var(--fg)}
h1{font-size:var(--fs-5);font-weight:700;margin:0 0 4px;letter-spacing:-.02em;text-wrap:balance;line-height:1.2}
h2{font-size:var(--fs-3);font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
h3{font-size:var(--fs-0);font-weight:600;margin:0 0 6px;color:var(--mut)}
p{margin:0}
a{color:var(--accent);text-underline-offset:.15em;text-decoration-thickness:1px}
a:hover{color:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* header: a lit navy band with one amber hairline */
.top{display:flex;align-items:center;gap:18px;padding:8px 28px;min-height:56px;color:#fff;flex-wrap:wrap;position:relative;background:linear-gradient(180deg,var(--bar-2),var(--bar));box-shadow:0 1px 0 hsl(var(--h) 40% 30% / .6),0 10px 30px -18px hsl(var(--h) 60% 10% / .8)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--live),hsl(36 92% 50% / 0) 60%)}
.brand{font-weight:700;letter-spacing:-.01em;font-size:15px}
.brand::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--live);margin-right:9px;vertical-align:-1px;box-shadow:0 0 0 3px hsl(36 92% 50% / .25)}
.topnav{display:flex;gap:2px}
.topnav button{background:none;border:0;color:var(--bar-fg);font:inherit;font-weight:600;font-size:var(--fs-1);padding:16px 12px;cursor:pointer;border-bottom:2px solid transparent;transition:color var(--fast)}
.topnav button:hover{color:#fff}.topnav button.on{color:#fff;border-bottom-color:var(--live)}
.topnav button[disabled]{opacity:.4;cursor:default}
.top .right{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:var(--fs-0);color:var(--bar-fg)}
.top .right .btn{background:hsl(var(--h) 30% 100% / .06);color:#fff;border-color:hsl(var(--h) 30% 100% / .18);box-shadow:none}
.top .right .btn:hover{background:hsl(var(--h) 30% 100% / .12)}
.ctx{font-size:var(--fs-0);color:var(--bar-fg);background:hsl(var(--h) 30% 100% / .06);border:1px solid hsl(var(--h) 30% 100% / .12);padding:4px 10px;border-radius:999px}
.ctx:empty{display:none}
.ctx b{color:#fff;font-weight:600}
.wrap{max-width:1680px;margin:0 auto;padding-block:22px 64px;padding-inline:28px}
/* step rail with a progress line behind the markers */
.steps{display:flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 10px;margin-bottom:20px;box-shadow:var(--shadow);position:relative}
.st{display:flex;align-items:center;gap:9px;padding:12px 14px;color:var(--mut);background:none;border:0;font:inherit;font-size:var(--fs-1);font-weight:600;cursor:pointer;border-radius:8px;transition:color var(--fast),background var(--fast);position:relative}
.st:hover{color:var(--fg);background:var(--soft)}
.st b{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;background:var(--mut-bg);color:var(--fg);font-size:11px;transition:background var(--fast),color var(--fast),box-shadow var(--fast)}
.st.on{color:var(--accent-2)}.st.on b{background:var(--accent);color:var(--accent-fg);box-shadow:0 0 0 4px var(--accent-soft)}
.st.done b{background:var(--ok);color:#fff;font-size:0}
.st.done b::after{content:"";width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.st+.st::before{content:"";position:absolute;left:-14px;top:50%;width:14px;height:2px;background:var(--line)}
.st.done+.st::before,.st.done+.st.on::before{background:var(--ok)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--shadow);transition:box-shadow var(--mid) var(--ease),transform var(--mid) var(--ease)}
.card.note{background:linear-gradient(135deg,var(--live-soft),hsl(42 90% 95%));border-color:hsl(38 70% 80%);color:var(--warn);box-shadow:none}
.row{display:flex;flex-wrap:wrap;gap:14px}.col{flex:1 1 240px;min-width:0}
.hint{font-size:var(--fs-0);color:var(--mut);max-width:72ch}
.mono{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.lbl{font-size:var(--fs-0);color:var(--mut);font-weight:600;margin-bottom:4px;display:block}
.in{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:var(--fs-1);background:var(--card);color:var(--fg);width:100%;transition:border-color var(--fast),box-shadow var(--fast);box-shadow:inset 0 1px 2px hsl(var(--h) 30% 20% / .04)}
.in:hover{border-color:var(--line-strong)}
.in:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.in.n{width:68px;text-align:right;display:inline-block;padding:4px 7px;font-variant-numeric:tabular-nums}
.in.sel{width:auto;display:inline-block;padding:5px 8px}
.in[disabled]{opacity:.5;cursor:not-allowed}
.btn{border:1px solid var(--line-strong);border-radius:8px;padding:8px 14px;font:inherit;font-size:var(--fs-1);font-weight:600;background:linear-gradient(180deg,#fff,hsl(var(--h) 30% 97%));color:var(--fg);cursor:pointer;transition:background var(--fast),border-color var(--fast),transform 80ms,box-shadow var(--fast);box-shadow:0 1px 1px hsl(var(--h) 40% 20% / .06)}
.btn:hover{border-color:var(--mut);box-shadow:0 2px 6px -2px hsl(var(--h) 40% 20% / .2);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--accent-fg);border-color:var(--accent-2);box-shadow:inset 0 1px 0 hsl(var(--h) 80% 80% / .5),0 4px 12px -4px hsl(var(--h) 66% 47% / .55)}
.btn.primary:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 hsl(var(--h) 80% 80% / .5),0 8px 18px -6px hsl(var(--h) 66% 47% / .65)}
.btn.sm{padding:4px 9px;font-size:var(--fs-0);font-weight:500}
.btn.danger{color:var(--bad)}.btn.danger:hover{background:var(--bad-bg);border-color:var(--bad)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:none;box-shadow:none}
.pill{display:inline-block;padding:1px 7px;border-radius:5px;font-size:11px;font-weight:600;white-space:nowrap;line-height:1.7;letter-spacing:.01em}
.ok{background:var(--ok-bg);color:var(--ok)}.warn{background:var(--warn-bg);color:var(--warn)}.bad{background:var(--bad-bg);color:var(--bad)}.info{background:var(--info-bg);color:var(--info)}.mut{background:var(--mut-bg);color:var(--fg)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle;box-shadow:inset 0 0 0 1px hsl(0 0% 0% / .12)}
.mtag{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:var(--fs-0)}
.flash{border-radius:10px;padding:10px 14px;margin-bottom:10px;font-size:var(--fs-1);animation:flashin var(--mid) var(--ease);box-shadow:var(--shadow)}
.flash.ok{background:var(--ok-bg);color:var(--ok)}.flash.warn{background:var(--warn-bg);color:var(--warn)}.flash.bad{background:var(--bad-bg);color:var(--bad)}
.radio{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:10px;flex:1 1 200px;cursor:pointer;transition:border-color var(--fast),background var(--fast),box-shadow var(--fast)}
.radio:hover{border-color:var(--line-strong);background:var(--soft)}
.radio:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px hsl(var(--h) 75% 94% / .6)}
.radio input{margin-top:3px}
.calc{background:linear-gradient(135deg,var(--phase),hsl(var(--h) 70% 97%));border:1px solid hsl(var(--h) 55% 88%);border-radius:10px;padding:14px 16px;font-size:var(--fs-1);line-height:1.8}
.sw{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 6px;margin:0 -6px;border-bottom:1px solid var(--line);font-size:var(--fs-1);cursor:pointer;border-radius:6px;transition:background var(--fast)}
.sw:hover{background:var(--soft)}
.sw:last-of-type{border-bottom:0}
/* summary strip: the status line of the page */
.summary{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline;padding:12px 18px;margin-bottom:16px;background:linear-gradient(180deg,#fff,var(--soft));border:1px solid var(--line);border-radius:12px;font-size:var(--fs-1);color:var(--mut);box-shadow:var(--shadow)}
.summary b{font-size:22px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;margin-right:5px;letter-spacing:-.02em}
.summary .state{margin-left:auto}
.summary b.bad{background:none;color:var(--bad)}.summary b.warn{background:none;color:var(--warn)}.summary b.ok{background:none;color:var(--ok)}
.tbox{overflow-x:auto;min-width:0;border-radius:8px}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-1);font-variant-numeric:tabular-nums}
.t th{text-align:left;font-weight:600;color:var(--mut);padding:8px 10px;border-bottom:1px solid var(--line);background:var(--soft);white-space:nowrap;font-size:var(--fs-0);position:sticky;top:0;z-index:1}
.t td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;transition:background var(--fast)}
.t td.mono{white-space:nowrap}
.t tbody tr:hover td{background:var(--soft)}
.t tr.phase td{background:linear-gradient(90deg,var(--phase),transparent);color:var(--phase-fg);font-weight:600;font-size:var(--fs-0);padding-top:10px}
.t tr.phase:hover td{background:linear-gradient(90deg,var(--phase),transparent)}
.t tr.short td{background:var(--short)}
.t tr.live td{background:var(--live-soft)}
.t tr.live td:first-child{box-shadow:inset 3px 0 0 var(--live)}
.t tr.dropped td{opacity:.4}
.t tr.flag td{background:var(--warn-bg)}.t tr.block td{background:var(--bad-bg)}
.t tr.sel td{background:var(--accent-soft)}
.t tr[data-pick]{cursor:pointer}
.actions{display:flex;gap:10px;margin-top:18px;align-items:center;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--info-bg);color:var(--info);border-radius:999px;padding:3px 10px;font:inherit;font-size:var(--fs-0);cursor:pointer;transition:background var(--fast)}
.chip.off{background:var(--card);color:var(--mut)}
.chip.seg{background:var(--warn-bg);color:var(--warn)}.chip.seg.off{background:var(--card);color:var(--mut)}
.m{display:flex;flex-wrap:wrap;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.m:last-child{border-bottom:0}
.mname{flex:0 0 200px}.mname .slots{font-family:var(--mono);font-size:11px;color:var(--info);display:block;margin-top:3px}
.reach{flex:0 0 130px;text-align:right}.reach b{display:block;font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hop{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.hop .h{border:1px solid var(--line);border-radius:6px;padding:2px 7px;background:var(--card);font-family:var(--mono);font-size:11px;white-space:nowrap}
.hop .h.g{background:var(--ok-bg);color:var(--ok);border-color:hsl(150 40% 80%)}.hop .h.r{background:var(--bad-bg);color:var(--bad);border-color:hsl(4 50% 85%)}.hop .h.y{background:var(--warn-bg);color:var(--warn)}
.hop .ar{color:var(--mut)}
.rule{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:flex-start;flex-wrap:wrap}
.rule:last-child{border-bottom:0}
.rule .w{flex:0 0 60px;padding-top:2px}.rule .d{flex:1 1 280px;min-width:0}.rule .d strong{display:block;font-size:var(--fs-1);font-weight:600}.rule .d span{font-size:var(--fs-0);color:var(--mut)}
.log{background:var(--log);color:var(--log-fg);border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:11.5px;line-height:1.7;overflow-x:auto;white-space:pre;box-shadow:inset 0 1px 0 hsl(var(--h) 30% 40% / .4)}
.log .g{color:hsl(150 60% 72%)}.log .y{color:hsl(48 90% 70%)}.log .r{color:hsl(4 85% 78%)}.log .b{color:hsl(var(--h) 85% 78%)}.log .d{color:hsl(var(--h) 15% 50%)}
textarea.in{font-family:var(--mono);font-size:var(--fs-0);line-height:1.5;min-height:200px;resize:vertical}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tab{padding:9px 14px;font-size:var(--fs-1);font-weight:600;color:var(--mut);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;font:inherit;cursor:pointer;transition:color var(--fast),border-color var(--fast),background var(--fast);border-radius:8px 8px 0 0}
.tab:hover{color:var(--fg);background:var(--soft)}.tab.on{color:var(--accent-2);border-bottom-color:var(--accent)}
.sub{font-weight:600}.pre{color:var(--mut);font-size:var(--fs-0)}
.promo{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--shadow);flex-wrap:wrap;transition:box-shadow var(--mid) var(--ease),transform var(--mid) var(--ease)}
.promo:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.promo[data-openp]{cursor:pointer}.promo[data-openp]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.promo .pn{font-size:20px;font-weight:700;letter-spacing:-.02em}
.camp{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--soft);font-size:var(--fs-1);flex-wrap:wrap}
.empty{padding:36px 20px;text-align:center;border:1px dashed var(--line-strong);border-radius:12px;background:linear-gradient(180deg,#fff,var(--soft))}
.empty strong{display:block;font-size:var(--fs-3);margin-bottom:4px}
.empty .hint{margin:0 auto 14px}
/* audience: one card per mailer; a searchable picker handles mailers with 100+ lists */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:14px}
.acard{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow var(--mid) var(--ease)}
.acard:hover{box-shadow:var(--shadow-hover)}
.acard.idle{opacity:.7}
.ah{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--mc) 10%,#fff),#fff 60%)}
.ah strong{font-size:var(--fs-3)}
.reachn{margin-left:auto;text-align:right;line-height:1.1}.reachn b{display:block;font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.aslots{padding:8px 16px;border-bottom:1px solid var(--line);background:var(--soft);font-size:var(--fs-0)}
.abody{padding:12px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.apick{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.af{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-top:1px solid var(--line)}
dialog#pick{border:1px solid var(--line);border-radius:14px;padding:0;width:min(920px,calc(100vw - 32px));max-height:min(80vh,760px);box-shadow:0 30px 80px -30px hsl(var(--h) 50% 10% / .6);color:var(--fg);background:var(--card);font-family:var(--sans)}
dialog#pick::backdrop{background:hsl(var(--h) 50% 10% / .45);backdrop-filter:blur(2px)}
.ph{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ph strong{font-size:var(--fs-3)}
.ps{display:flex;gap:8px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--soft);flex-wrap:wrap}
.ps .in{flex:1 1 260px}
.pcols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:12px 18px 16px}
.pcols h3{margin:0 0 6px}
.plist{max-height:min(52vh,480px);overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px}
.prow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;font-size:var(--fs-1);cursor:pointer;transition:background var(--fast);border:1px solid transparent}
.prow.on{border-color:hsl(var(--h) 60% 85%)}
.prow:hover{background:var(--soft)}
.prow.on{background:var(--accent-soft)}
.prow .an{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .ac{color:var(--mut);font-size:11.5px}
@media (max-width:640px){.pcols{grid-template-columns:1fr}.agrid{grid-template-columns:1fr}}
/* timeline: taller lanes, glowing live mark */
.tl{position:relative;padding:10px 0 4px}
.tl .axis{position:relative;height:30px;border-bottom:1px solid var(--line)}
.tl .tick{position:absolute;bottom:0;transform:translateX(-50%);font-size:10px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.tl .tick::after{content:"";display:block;width:1px;height:6px;background:var(--line);margin:2px auto 0}
.tl .lane{position:relative;height:42px;border-bottom:1px dashed var(--line);background:linear-gradient(90deg,var(--soft),transparent 20%)}
.tl .lane .ln{position:absolute;left:0;top:12px;font-size:11px;font-weight:600;color:var(--mut);width:90px}
.tl .pt{position:absolute;top:12px;width:18px;height:18px;border-radius:50%;transform:translateX(-50%);border:2px solid #fff;box-shadow:0 1px 3px hsl(var(--h) 40% 20% / .35),0 0 0 1px hsl(var(--h) 20% 80%);cursor:default;transition:transform var(--fast) var(--ease),box-shadow var(--fast)}
.tl .pt:hover{transform:translateX(-50%) scale(1.35);z-index:2;box-shadow:0 4px 10px hsl(var(--h) 40% 20% / .35)}
.tl .pt.live{box-shadow:0 0 0 3px var(--live),0 0 0 7px hsl(36 92% 50% / .25);animation:livepulse 2.4s ease-in-out infinite}
.tl .pt.short{border-radius:5px}
.tl .wb{position:absolute;top:0;bottom:0;width:2px;background:var(--live);transform:translateX(-50%);box-shadow:0 0 12px hsl(36 92% 50% / .6)}
.tl .wb span{position:absolute;top:-2px;left:7px;font-size:10px;color:var(--warn);font-weight:700;white-space:nowrap;background:var(--live-soft);padding:1px 6px;border-radius:4px}
.tl .nowl{position:absolute;top:0;bottom:0;width:1px;border-left:2px dotted var(--mut);transform:translateX(-50%)}
.tl .span{position:absolute;top:18px;height:6px;border-radius:3px;opacity:.45}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.mcard{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--card);flex:1 1 300px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);transition:box-shadow var(--mid) var(--ease)}
.mcard:hover{box-shadow:var(--shadow-hover)}
.mcard .mh{display:flex;align-items:center;gap:8px}
.mcard label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-1);padding:6px 0;border-bottom:1px solid var(--line)}
.mcard label:last-of-type{border-bottom:0}
.ev{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.ev:last-child{border-bottom:0}
.ev .k{flex:0 0 60px}.ev .t{flex:1;min-width:0;font-size:var(--fs-1)}
.preview{background:var(--soft);border-radius:10px;padding:12px 14px;font-size:var(--fs-1);white-space:pre-wrap;max-height:320px;overflow:auto}
details.adv summary{cursor:pointer;font-weight:600;color:var(--mut);font-size:var(--fs-1);padding:6px 0}
/* motion: the plan arriving is the one authored moment; the live mark breathes; everything else is state feedback */
@keyframes flashin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:translateX(-50%) scale(.3)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 3px var(--live),0 0 0 7px hsl(36 92% 50% / .25)}50%{box-shadow:0 0 0 3px var(--live),0 0 0 11px hsl(36 92% 50% / .08)}}
.arrive tr{animation:arrive var(--mid) var(--ease) both;animation-delay:min(calc(var(--i,0) * 16ms),300ms)}
.arrive .pt{animation:settle 380ms var(--ease) both;animation-delay:min(calc(var(--i,0) * 22ms),320ms)}
.arrive .pt.live{animation:settle 380ms var(--ease) both,livepulse 2.4s ease-in-out 600ms infinite}
.stepin{animation:arrive 170ms var(--ease) both}
@media (prefers-reduced-motion:reduce){
  @keyframes arrive{from{opacity:0}to{opacity:1}}
  @keyframes settle{from{opacity:0;transform:translateX(-50%)}to{opacity:1;transform:translateX(-50%)}}
  @keyframes flashin{from{opacity:0}to{opacity:1}}
  .tl .pt.live,.arrive .pt.live{animation:none}
  .btn:hover,.promo:hover,.card:hover{transform:none}.tl .pt:hover{transform:translateX(-50%)}
  html{scroll-behavior:auto}
}
@media (max-width:640px){.mname{flex-basis:100%}.reach{text-align:left}.summary .state{margin-left:0}.st+.st::before{display:none}}

a.btn{text-decoration:none;display:inline-block}
/* ---- PHP app additions (classes the server views use) ---- */
.topnav a{display:inline-block;color:var(--bar-fg);font-weight:600;font-size:var(--fs-1);padding:16px 12px;text-decoration:none;border-bottom:2px solid transparent;transition:color var(--fast)}
.topnav a:hover{color:#fff}.topnav a.on{color:#fff;border-bottom-color:var(--live)}
.who a{color:#fff}
.flash.err{background:var(--bad-bg);color:var(--bad)}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.inline{display:inline}
.steps a.st{text-decoration:none}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.stat{flex:1 1 140px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.stat .n{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.stat .l{font-size:var(--fs-0);color:var(--mut)}
.stat.b{background:var(--bad-bg)}.stat.b .n{color:var(--bad)}.stat.w{background:var(--warn-bg)}.stat.w .n{color:var(--warn)}.stat.g{background:var(--ok-bg)}.stat.g .n{color:var(--ok)}
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;padding:16px}
.login{width:380px;max-width:92vw}.login h1{margin-bottom:16px}
.logs td{vertical-align:top}
.ctxpre{background:var(--log);color:var(--log-fg);border-radius:6px;padding:10px;font-size:11.5px;max-width:560px;overflow:auto;margin:6px 0 0;font-family:var(--mono)}
.t tr.live td{background:var(--live-soft)}

/* page structure guards */
.card{min-width:0;overflow-wrap:anywhere}
.row>.card{min-width:0}
.summary span{min-width:0}
.page-head h1{margin:0}
/* subjects step: one block per email */
.sjlist{display:flex;flex-direction:column;gap:10px}
.sj{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.sj.flag{border-color:hsl(42 70% 70%)}.sj.block{border-color:hsl(4 60% 75%)}.sj.live{box-shadow:0 0 0 2px var(--live),var(--shadow)}
.sjm{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:9px 16px;background:var(--soft);border-bottom:1px solid var(--line);font-size:var(--fs-1);white-space:nowrap}
.sjb{padding:12px 16px}
.sjopts{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.sjo{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid transparent;border-radius:7px;font-size:var(--fs-1);cursor:pointer;transition:background var(--fast)}
.sjo:hover{background:var(--soft)}.sjo.on{background:var(--accent-soft);border-color:hsl(var(--h) 60% 85%)}
.sjchecks{margin-top:8px;font-size:var(--fs-0);line-height:1.9}

/* step rail: markers joined by hairlines; done = green check, current = filled accent */
.steps{display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;gap:0;padding:10px 14px}
.steps .st{flex:0 0 auto;gap:8px;padding:6px 8px;border-radius:999px;margin:0}
.steps .st+.st::before{display:none}
.steps .stsep{flex:1 1 24px;min-width:16px;height:2px;background:var(--line);border-radius:1px;margin:0 2px}
.steps .stsep.done{background:var(--ok)}
.steps .st b{width:26px;height:26px;font-size:12px}
.steps .st.done b{font-size:0}
.steps .st.done b::after{width:6px;height:11px;border-width:0 2px 2px 0}
.steps .st.on{background:var(--accent-soft);color:var(--accent-2)}
.steps .st.on b{background:var(--accent);color:#fff;box-shadow:none;font-size:12px}
.steps .st.on.done b::after{display:none}
.steps .st span{white-space:nowrap}
@media (max-width:760px){.steps .st span{display:none}.steps .st.on span{display:inline}}

/* busy bar while a form round-trip is in flight */
.busybar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--accent-soft);z-index:1000;overflow:hidden}
.busybar span{position:absolute;top:0;bottom:0;width:35%;background:var(--accent);border-radius:2px;animation:busy 1.1s ease-in-out infinite}
@keyframes busy{0%{left:-35%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.busybar span{animation:none;width:100%;left:0;opacity:.6}}

[hidden]{display:none!important}
.busyveil{position:fixed;inset:0;z-index:999;background:hsl(var(--h) 40% 15% / .35);backdrop-filter:blur(1.5px);display:flex;align-items:flex-start;justify-content:center;padding-top:18vh}
.busybox{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow-hover);min-width:320px}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .8s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--accent)}}

.asends{display:flex;flex-wrap:wrap;gap:6px}
.asend{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:var(--fs-0)}
.asend.custom{border-color:hsl(42 70% 70%);background:var(--warn-bg)}
.asend a{text-decoration:none;color:var(--accent)}

.hop .h{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.hop{max-width:720px}

/* inline time editor on slot rows */
.tedit{display:inline-flex;align-items:center;gap:6px}
.tedit input[type=datetime-local]{padding:4px 6px;font-size:12.5px;font-family:'IBM Plex Mono',monospace;width:auto}
.asend .tedit input[type=datetime-local]{font-size:11.5px;padding:2px 4px}

.t.slots td:first-child,.t.slots th:first-child{white-space:nowrap;width:1%}
.tedit .btn.sm,.inline .sel+.btn.sm{margin-left:4px}