/* Newslettair web app. The visual language follows the email: Georgia for
   titles and headings over a system sans body, blue-black ink, one accent
   per brief. Pages sit on a cool grey canvas; the thing you edit is a white
   document; the builder's assistant is a dark slate column beside it. */
:root{
  --canvas:#eef1f4;--paper:#ffffff;--sheet:var(--paper);
  --ink:#15202b;--body:#2f3a46;--muted:#66717d;--hair:#dde3e9;--field:#c7cfd7;
  --accent:#1f5f8b;
  --tint:color-mix(in srgb,var(--accent) 10%,white);
  --tint-strong:color-mix(in srgb,var(--accent) 22%,white);
  /* the assistant's surface */
  --slate:#1d2834;--slate-2:#263444;--slate-text:#e8edf2;--slate-muted:#9aa8b6;--slate-hair:rgba(255,255,255,.08);
  --accent-hi:color-mix(in srgb,var(--accent) 45%,white); /* the accent where it sits on slate */
  --amber-bg:#fdf1d6;--amber:#8a5a0b;--danger:#9b2c2c;--danger-hi:#f2a7a7;--ok-bg:#e3f3e8;--ok:#1e6b3a;
  --r-lg:14px;--r-md:10px;--r-sm:6px;
  --doc-shadow:0 1px 2px rgba(21,32,43,.06),0 8px 24px rgba(21,32,43,.06);
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@supports not (color:color-mix(in srgb,red 10%,white)){:root{--tint:#e9f0f6;--tint-strong:#cfdfeb;--accent-hi:#9fbbd0}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--body);font:15px/1.55 var(--sans)}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:normal;color:var(--ink);margin:0;letter-spacing:-.01em}
h1{font-size:36px;line-height:1.12}
h2{font-size:22px;line-height:1.25}
h3{font-size:17px;line-height:1.3}
p{margin:0}
:focus-visible{outline:3px solid var(--tint-strong);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* top bar */
.topbar{background:var(--canvas)}
.topbar-inner{max-width:848px;margin:0 auto;padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--serif);font-size:20px;color:var(--ink);text-decoration:none}
.nav{display:flex;align-items:center;gap:20px;white-space:nowrap;font-size:15px}
.nav a{color:var(--ink);text-decoration:none}
.nav a:hover{text-decoration:underline}
.nav .who{color:var(--muted);font-size:13px}
main{max-width:848px;margin:0 auto;padding:32px 24px 80px}

/* masthead: title, meta and actions on the canvas */
.masthead{margin-bottom:28px}
.masthead .meta{color:var(--muted);font-size:15px;margin-top:10px;max-width:60ch}
.masthead .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.rule{width:56px;height:3px;background:var(--accent);margin:16px 0 0}
.kicker{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* sheet: a white surface on the canvas */
.sheet{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);padding:28px 32px;margin-bottom:24px}
.sheet h2{margin-bottom:12px}
.sheet .lead{font-size:17px;line-height:1.6;color:var(--ink)}

/* canvas sections: history, lists */
.section{margin-top:40px}
.section h2{margin-bottom:6px}
.section .sub{color:var(--muted);font-size:15px;margin-bottom:12px}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.list li{display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hair)}
.list li .when{color:var(--muted);font-size:13px;white-space:nowrap}
.list li .what{font-family:var(--serif);font-size:17px;line-height:1.3}
.list li .what a{color:var(--ink);text-decoration:none}
.list li .what a:hover{text-decoration:underline}
.list li .aside{color:var(--muted);font-size:13px;white-space:nowrap}
.list.compact li .what{font-family:var(--sans);font-size:15px}

/* briefs index */
.brief-row{display:block;padding:22px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.brief-row:first-child{border-top:1px solid var(--hair)}
.brief-row h2{color:var(--ink)}
.brief-row:hover h2{text-decoration:underline}
.brief-row .meta{color:var(--muted);font-size:13px;margin-top:6px}
.brief-row .last{margin-top:8px;color:var(--body);font-size:15px}
.brief-row .last b{font-weight:600;color:var(--ink)}
.brief-row .attention-line{margin-top:8px;color:var(--amber);font-size:13px;max-width:70ch}
.drafts{margin-bottom:36px}

/* attention: a brief whose last issue could not be produced */
.notice.attention{background:var(--amber-bg);color:var(--amber);padding:16px 20px;border-radius:var(--r-md);margin-bottom:24px;font-size:15px}
.masthead .notice.attention{margin:20px 0 0;max-width:70ch}
.notice.attention p{max-width:65ch}
.notice.attention b{font-weight:600}
.notice.attention .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
/* plan limits: the muted line under Run now, the usage line on /briefs */
.limit-line{margin-top:10px;color:var(--muted);font-size:13px;max-width:70ch}
.masthead .usage{margin-top:6px;color:var(--muted);font-size:13px}
.list li .reason{display:block;margin-top:2px;color:var(--muted);font-size:13px;font-family:var(--sans)}
details.tech{margin-top:12px;font-size:13px;color:var(--muted)}
details.tech summary{cursor:pointer}
details.tech pre{margin:8px 0 0;white-space:pre-wrap;word-break:break-word;font-size:12px}
.drafts h2{margin-bottom:10px}

/* text helpers */
.muted{color:var(--muted)}
.small{font-size:13px}
.stack>*+*{margin-top:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-md);border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:color-mix(in srgb,var(--accent) 88%,black)}
.btn.secondary,.btn.quiet{background:var(--paper);color:var(--ink);border-color:var(--field)}
.btn.secondary:hover,.btn.quiet:hover{border-color:var(--muted);background:var(--paper)}
.btn.danger{background:var(--paper);color:var(--danger);border-color:var(--field)}
.btn.lg{font-size:17px;min-height:48px;padding:0 22px}
.btn:disabled{opacity:.5;cursor:default}
.btn.link{background:none;border:0;min-height:0;padding:0;color:var(--muted);font-size:13px;font-weight:normal;text-decoration:none}
.btn.link:hover{color:var(--ink);text-decoration:underline}
.btn.icon{width:40px;padding:0}
.btn.icon svg{width:16px;height:16px;fill:currentColor}

/* forms */
label{display:block;font-weight:600;color:var(--ink);margin-bottom:6px;font-size:13px}
.hint{font-weight:normal;color:var(--muted);font-size:13px;margin-top:6px}
input[type=text],input[type=email],input[type=url],input[type=number],select,textarea{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--field);border-radius:var(--r-md);font:inherit;font-size:15px;color:var(--ink);background:var(--paper)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--tint-strong)}
textarea{min-height:120px;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid2 .full{grid-column:1/-1}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:normal}
.check input[type=checkbox],.check input[type=radio]{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--accent)}
.check>span{flex:1 1 auto;min-width:0}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.inline-form>div{flex:1 1 160px}
.inline-form .f-kind{flex:0 1 150px}
.inline-form .f-wide{flex:3 1 240px}
.inline-form .f-btn{flex:0 0 auto}
form.htmx-request .btn{opacity:.6}

/* pills */
.pill{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);background:var(--tint);color:var(--accent);font-size:12px;font-weight:600;line-height:1.5;vertical-align:middle;white-space:nowrap}
.pill.amber{background:var(--amber-bg);color:var(--amber)}
.pill.done{background:var(--ok-bg);color:var(--ok)}
.pill.failed{background:#fde8e8;color:var(--danger)}
.pill.paused{background:#e3e7ec;color:var(--body)}

/* tables (runs) */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 0;border-bottom:1px solid var(--hair);vertical-align:top;font-size:15px}
th{color:var(--muted);font-weight:600;font-size:13px}

.flash{background:var(--tint);padding:12px 16px;border-radius:var(--r-md);margin-bottom:24px;color:var(--ink)}

/* run progress */
.steps{list-style:none;margin:0;padding:0 0 0 2px}
.steps li{position:relative;padding:0 0 18px 28px;color:var(--muted)}
.steps li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--field)}
.steps li::after{content:"";position:absolute;left:6px;top:21px;bottom:-4px;width:2px;background:var(--hair)}
.steps li:last-child::after{display:none}
.steps li.done{color:var(--body)}
.steps li.done::before{background:var(--accent);border-color:var(--accent)}
.steps li.done::after{background:var(--accent)}
.steps li.current{color:var(--ink);font-weight:600}
.steps li.current::before{background:var(--paper);border-color:var(--accent);box-shadow:0 0 0 4px var(--tint-strong)}
.steps li.failed{color:var(--danger)}
.steps li.failed::before{background:var(--danger);border-color:var(--danger)}
iframe.preview{width:100%;height:900px;border:1px solid var(--hair);border-radius:var(--r-md);background:#fff;color-scheme:light}

/* landing */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start;margin-top:12px}
.hero h1{font-size:56px;line-height:1.02;max-width:12ch}
.hero .lead{font-size:17px;line-height:1.55;margin-top:22px;max-width:40ch;color:var(--body)}
.hero .cta{margin-top:28px}
.sample{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);padding:24px 26px;position:relative}
.sample .cap{color:var(--muted);font-size:13px;margin-bottom:14px}
.sample .tag{display:flex;gap:8px;align-items:center;font-size:12px}
.sample .tag .date{color:var(--muted)}
.sample h3{font-size:22px;line-height:1.25;margin-top:10px}
.sample .lede{font-size:15px;line-height:1.5;margin-top:8px}
.sample ul{margin:10px 0 0;padding:0 0 0 18px;font-size:13px;line-height:1.6}
.sample .why{margin-top:12px;padding:2px 0 2px 14px;border-left:3px solid var(--accent);font-size:13px;line-height:1.55}
.sample .src{margin-top:10px;font-size:12px;color:var(--muted)}
.loop{list-style:none;margin:56px 0 0;padding:28px 0 0;border-top:1px solid var(--hair);display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.loop h3{font-size:17px;margin-bottom:6px}
.loop p{font-size:15px;color:var(--body)}
.quiet-line{margin-top:40px;font-family:var(--serif);font-size:22px;color:var(--ink);max-width:36ch}

/* ---------- the document: the builder's panel and the read-only views ---------- */
.doc{max-width:832px;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--doc-shadow);padding:36px 56px 56px}
.doc h2{font-size:22px;margin-bottom:12px}
.doc-note{color:var(--muted);font-size:13px;margin-bottom:28px}
.doc-title{font-size:36px;line-height:1.12}
.doc-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:15px}
.block+.block{margin-top:52px}
.watch-section{margin-top:52px}
.section-sub{color:var(--muted);font-size:15px;margin:-4px 0 12px;max-width:60ch}
.empty-note{color:var(--muted);font-size:15px;padding:4px 0}
#subjects-list:has(>*)+.empty-note,.items:has(>*)+.empty-note{display:none}
.prose-text{font-size:17px;line-height:1.6;color:var(--ink);max-width:66ch}

/* basics: kind chips, the purpose as prose */
.kinds{border:0;margin:0;padding:0;min-width:0}
.kind-row{display:flex;flex-wrap:wrap;gap:8px}
.kind-chip{display:inline-flex;align-items:center;min-height:36px;margin:0;padding:0 14px;border:1px solid var(--hair);border-radius:var(--r-md);background:var(--paper);color:var(--body);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.kind-chip:hover{border-color:var(--field);color:var(--ink)}
.kind-chip:has(input:checked){background:var(--tint);border-color:var(--accent);color:var(--accent)}
.kind-chip:has(input:focus-visible){outline:3px solid var(--tint-strong);outline-offset:2px}
.kind-blurb{color:var(--muted);font-size:13px;margin-top:10px}
#basics h2{margin-top:36px}
#basics h2 label{display:inline;font:inherit;color:inherit;margin:0}
textarea.prose{display:block;min-height:0;padding:2px 0 6px;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;resize:none;overflow:hidden;font-size:17px;line-height:1.6;color:var(--ink);max-width:66ch}
textarea.prose:hover{border-bottom-color:var(--hair)}
textarea.prose:focus{border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
#basics .hint{margin-top:8px}
.block-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.block-foot:not(:has(*)){display:none}
.js #basics-form:not(.dirty) .btn.save{display:none}
.saved{color:var(--ok);font-size:13px;animation:saved-fade 2.6s ease forwards}
@keyframes saved-fade{0%,65%{opacity:1}100%{opacity:0}}
.block-error{color:var(--danger);font-size:13px}
.problems{background:var(--amber-bg);color:var(--amber);padding:14px 18px;border-radius:var(--r-md);margin-bottom:28px;font-size:15px}
.problems ul{margin:6px 0 0;padding-left:18px}

/* what it watches: subjects with their pages as chips */
.subject{padding:18px 0}
.subject+.subject{border-top:1px solid var(--hair)}
.subject-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.subject .name{font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.subject-meta{margin-top:2px;font-size:13px;color:var(--muted)}
.subject-meta .site{color:var(--muted);text-decoration:none}
.subject-meta .site:hover{color:var(--accent);text-decoration:underline}
.subject-meta .notes{display:block}
.pages{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pages>li{position:relative;display:inline-flex;align-items:center;min-width:0;max-width:100%}
.page-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;max-width:100%;padding:0 12px 0 4px;border:1px solid var(--hair);border-radius:var(--r-md);background:var(--paper);color:var(--body);font-size:13px;text-decoration:none}
.page-chip:hover{border-color:var(--field);color:var(--ink)}
.page-chip .kind,.pages li.ghost .pill{padding:1px 7px;border-radius:var(--r-sm);background:var(--tint);color:var(--accent);font-size:12px;font-weight:600}
.page-chip .host{min-width:0;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-x{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;opacity:0;transition:opacity .12s ease}
.chip-x svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.pages li:hover .chip-x,.pages li:focus-within .chip-x{opacity:1}
.chip-x:hover{background:var(--danger)}
.pages .ai-badge{margin-left:6px}
.pages li.add-page{order:1}
.pages li.add-page:has(details[open]){flex-basis:100%;flex-direction:column;align-items:stretch}
.pages li.ghost{gap:8px;min-height:32px;padding:0 10px 0 4px;border:1px dashed var(--field);border-radius:var(--r-md);font-size:13px;word-break:break-all}
.chip-add{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px dashed var(--field);border-radius:var(--r-md);color:var(--muted);font-size:13px;cursor:pointer;list-style:none;width:max-content;max-width:100%}
.chip-add::-webkit-details-marker{display:none}
.chip-add::before{content:"+";font-weight:600;font-size:15px;line-height:1}
.chip-add:hover{color:var(--ink);border-color:var(--muted)}
.adder[open]>.chip-add{color:var(--ink);border-style:solid}
.adder[open]>.chip-add::before{content:"–"}
.adder form{margin-top:10px}
#watch>.adder,.watch-section>.adder{margin-top:12px}
.item{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0}
.item+.item{border-top:1px solid var(--hair)}
.item-body{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.item-body a{text-decoration:none}
.item-body a:hover{text-decoration:underline}
.item .muted{font-size:13px;margin-left:6px}
#questions .item-body{color:var(--ink)}

/* delivery: one sentence, the fields behind "Change" */
.delivery{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.delivery-line{font-size:17px;line-height:1.6;color:var(--ink)}
.change[open]{flex-basis:100%}
.change>summary{list-style:none;color:var(--accent);font-size:15px;cursor:pointer}
.change>summary::-webkit-details-marker{display:none}
.change>summary:hover{color:var(--accent)}
.change .when-open,.change[open] .when-closed{display:none}
.change[open] .when-open{display:inline}
.change form{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
#schedule .saved,#schedule .block-error{margin-top:8px}
.schedule:has(#cadence option[value=monthly]:checked) .weekly-only{display:none}
.schedule:has(#cadence option[value=weekly]:checked) .monthly-only{display:none}
/* the time zone reads as text with a small "change"; the select (the only
   control without JS) appears when it is clicked */
.tz-current{display:none;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-height:40px;padding-top:8px;color:var(--ink);font-size:15px}
.tz-current .btn.link{color:var(--accent)}
.js .tz-current{display:flex}
.js .tz-field select,.js .tz-field.editing .tz-current{display:none}
.js .tz-field.editing select{display:block}
/* recipients: badges in a field that looks like an input (recipients.js);
   without JS, the plain comma-separated input */
.tokens{display:none;flex-wrap:wrap;align-items:center;gap:6px;min-height:40px;padding:5px 6px;border:1px solid var(--field);border-radius:var(--r-md);background:var(--paper);cursor:text}
.js .tokens{display:flex}
.js .recip-plain,.js .recip-hint{display:none}
.tokens:has(.token-input:focus){border-color:var(--accent);box-shadow:0 0 0 3px var(--tint-strong)}
.token{display:inline-flex;align-items:center;gap:2px;min-height:28px;max-width:100%;padding:0 0 0 10px;border:1px solid var(--tint-strong);border-radius:var(--r-md);background:var(--tint);color:var(--accent);font-size:13px;font-weight:600;cursor:default}
.token:focus-within{border-color:var(--accent)}
.token-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.token-x{display:grid;place-items:center;flex:none;width:26px;height:26px;padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--accent);cursor:pointer}
.token-x svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.token-x:hover,.token-x:focus-visible{color:var(--danger)}
.token-x:focus-visible{outline-offset:-2px}
.tokens input.token-input{flex:1 1 14ch;width:auto;min-width:10ch;min-height:28px;padding:0 6px;border:0;border-radius:0;background:transparent;box-shadow:none}
.tokens input.token-input:focus{box-shadow:none}
.tokens.full input.token-input{flex-basis:0;min-width:0}
.token-msg{color:var(--danger)}

/* ---------- the builder: workspace bar, document, assistant ---------- */
main.app{max-width:none;padding:0}
body:has(main.app) .topbar{position:sticky;top:0;z-index:30}
body:has(main.app) .topbar-inner{max-width:var(--app-w,1440px)}
main.app>.flash{margin:16px 24px 0}
.wsbar{position:sticky;top:var(--top-h,56px);z-index:20;display:flex;align-items:center;gap:14px;padding:10px max(24px,calc((100% - var(--app-w,1440px))/2 + 24px));background:var(--canvas);border-bottom:1px solid var(--hair)}
.wsbar-name{flex:1 1 auto;min-width:0}
.title-input{display:block;width:100%;min-height:0;margin:0;padding:4px 8px;margin-left:-8px;resize:none;overflow:hidden;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;font-family:var(--serif);font-size:24px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.title-input:hover{background:color-mix(in srgb,var(--paper) 55%,transparent)}
.title-input:focus{background:var(--paper);border-color:var(--accent);box-shadow:0 0 0 3px var(--tint-strong)}
.wsbar-actions{display:flex;align-items:center;gap:8px;flex:none}
.more{position:relative}
.more>summary{list-style:none}
.more>summary::-webkit-details-marker{display:none}
.more .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:180px;padding:6px;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-md)}
.menu-item{display:block;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:var(--r-sm);background:none;font:inherit;font-size:15px;text-align:left;color:var(--ink);cursor:pointer}
.menu-item:hover,.menu-item:focus-visible{background:var(--canvas)}
.menu-item.danger{color:var(--danger)}
.to-chat{display:none}

/* The workspace is one centred frame (--app-w): the document sits in the
   middle of its column and the assistant column closes the frame on the
   right, so the two never drift to opposite edges on a wide screen. */
.builder{display:grid;grid-template-columns:minmax(0,1fr) 400px;align-items:start;min-height:calc(100vh - var(--chrome-h,121px));max-width:var(--app-w,1440px);margin:0 auto}
.doc-col{min-width:0;padding:32px 40px 96px 24px}
.doc-col>.doc{margin-left:auto;margin-right:auto}
/* The assistant is a rounded panel inset from the bars and the edge, so it
   sits on the canvas like the document does rather than as a flush strip. */
#side{position:sticky;top:calc(var(--chrome-h,121px) + 32px);height:calc(100vh - var(--chrome-h,121px) - 56px);height:calc(100dvh - var(--chrome-h,121px) - 56px);margin:32px 24px 24px 0;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);background:var(--slate);color:var(--slate-text)}

/* the assistant column */
.chat{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.chat-head{flex:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;background:var(--slate-2)}
.chat-head h2{font:600 15px/1.2 var(--sans);letter-spacing:0;color:var(--slate-text);margin:0}
.chat-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-hi);flex:none}
.chat.busy .chat-dot{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
.chat-state{margin-left:auto;font-size:13px;color:var(--slate-muted)}
.chat-state[data-state=working]{color:var(--slate-text)}
.thread-wrap{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.thread{position:relative;flex:1 1 auto;min-height:96px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:20px 20px 16px;overscroll-behavior:contain;scrollbar-color:rgba(255,255,255,.16) transparent;scrollbar-width:thin}
.thread:focus{outline:none}
.turn{display:flex;flex-direction:column;gap:14px}
.msg{font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.user{align-self:flex-end;max-width:85%;padding:9px 14px;border-radius:var(--r-md) var(--r-md) 4px var(--r-md);background:var(--accent);color:#fff}
.msg.assistant{white-space:normal;color:var(--slate-text)}
.msg.assistant,.reply{position:relative;padding-left:30px}
.msg.assistant::before,.reply::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--accent-hi)}
.msg.assistant::after,.reply::after{content:"";position:absolute;left:6px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent-hi)}
.reply{display:flex;flex-direction:column;gap:10px;min-width:0}
.reply:empty{display:none}
.part.text{font-size:15px;line-height:1.5;color:var(--slate-text);overflow-wrap:anywhere}
.part.text.streaming{white-space:pre-wrap}
.part.text p+p{margin-top:8px}
.part.notice{font-size:13px;color:var(--slate-muted);font-style:italic}
.caret{display:inline-block;margin-left:1px;color:var(--accent-hi);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.thinking{font-size:13px;color:var(--slate-muted)}
.thinking .shimmer{background:linear-gradient(90deg,var(--slate-muted) 0%,var(--slate-muted) 40%,var(--slate-text) 50%,var(--slate-muted) 60%,var(--slate-muted) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 1.5s linear infinite}
.thinking .dots{display:none}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* tool steps: one row per call, icon then verb phrase */
.tool-row{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--slate-muted);animation:enter .18s cubic-bezier(.2,.8,.2,1)}
.tool-row .ico{flex:none;width:14px;height:14px;margin-top:2px;display:inline-flex;align-items:center;justify-content:center}
.tool-row .ico svg{width:14px;height:14px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool-row .label{min-width:0;overflow-wrap:anywhere}
.tool-row .label a{color:var(--slate-text);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.tool-row .label a:hover{border-bottom-color:var(--accent-hi)}
.tool-row[data-state=running]{color:var(--slate-text)}
.tool-row .err{color:var(--danger-hi)}
.ico-check{stroke:var(--accent-hi)}
.ico-check path{stroke-dasharray:14;stroke-dashoffset:0;animation:draw .25s ease-out}
@keyframes draw{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}
.ico-x{stroke:var(--danger-hi)}
.ico-stop{stroke:var(--slate-muted)}
.spin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--tint-strong);border-top-color:var(--accent);animation:spin .8s linear infinite;flex:none}
#side .spin{border-color:rgba(255,255,255,.16);border-top-color:var(--accent-hi)}
@keyframes spin{to{transform:rotate(360deg)}}

/* research groups: searches and reads fold under one line */
.research{font-size:13px;color:var(--slate-muted);background:var(--slate-2);border-radius:var(--r-md);padding:8px 12px}
.research summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;color:var(--slate-muted)}
.research summary::-webkit-details-marker{display:none}
.research summary:hover .head{color:var(--slate-text)}
.chev{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.research[open]>summary .chev{transform:rotate(90deg)}
.research .rows{display:flex;flex-direction:column;gap:6px;margin:8px 0 2px 5px;padding-left:12px;border-left:1px solid var(--slate-hair)}
.research .sources{list-style:none;margin:8px 0 2px 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px}
.research .sources li{display:inline-flex;align-items:center;gap:6px}
.research .sources img{width:14px;height:14px;border-radius:3px}
.research .sources a{color:var(--slate-muted);text-decoration:none}
.research .sources a:hover{color:var(--slate-text);text-decoration:underline}
.run-foot{font-size:13px;color:var(--slate-muted)}
.chat-alert{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13px;color:var(--danger-hi)}
.chat-alert .retry{color:var(--danger-hi);text-decoration:underline}

/* the scroll pill floats at the foot of the thread */
.new-pill{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;min-height:32px;padding:0 14px;border:1px solid var(--slate-hair);border-radius:var(--r-md);background:var(--slate-2);color:var(--slate-text);font:inherit;font-size:13px;cursor:pointer;animation:fade .15s ease-out}
.new-pill[hidden]{display:none}
@keyframes fade{from{opacity:0}}

/* composer: a raised field with the send button inside */
.chat-form{flex:none;padding:12px 16px 0}
.composer{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 14px;background:var(--paper);border-radius:var(--r-lg);border:1px solid transparent}
.composer:focus-within{border-color:var(--accent-hi);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-hi) 35%,transparent)}
.chat-form textarea{flex:1 1 auto;min-height:36px;max-height:none;padding:7px 0;border:0;border-radius:0;background:transparent;resize:none;overflow-y:hidden;font-size:15px;line-height:1.45;color:var(--ink)}
.chat-form textarea:focus{box-shadow:none}
.send{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer}
.send:hover{background:color-mix(in srgb,var(--accent) 85%,black)}
.send:disabled{opacity:.5;cursor:default}
.send:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}
.ico-send{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.send.stop{background:var(--ink)}
.stop-sq{display:block;width:11px;height:11px;border-radius:2px;background:#fff}
.chat-hint{flex:none;padding:8px 20px 16px;font-size:13px;color:var(--slate-muted)}

/* panel reactions to the assistant */
.subject.ghost,#config .item.ghost{opacity:.6}
.subject.ghost .name{display:flex;align-items:center;gap:8px}
#config .item.ghost{display:flex;gap:10px;align-items:center;justify-content:flex-start}
.enter{animation:enter .18s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(4px)}}
.just-added{animation:enter .18s cubic-bezier(.2,.8,.2,1),added 1.6s ease-out}
@keyframes added{0%{background:var(--tint);box-shadow:inset 3px 0 0 var(--accent)}100%{background:transparent;box-shadow:inset 3px 0 0 transparent}}
.just-added-static{box-shadow:inset 3px 0 0 var(--accent)}
.subject.just-added,.subject.just-added-static,.item.just-added,.item.just-added-static,.subject.pulse,.item.pulse{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;border-radius:var(--r-sm)}
.page.just-added,.page.just-added-static,.page.pulse{border-radius:var(--r-md)}
.page.just-added .page-chip,.page.pulse .page-chip{border-color:var(--accent)}
.pulse{animation:added 1.6s ease-out}
.section-updated{animation:fade .18s ease-out}
.ai-badge{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:var(--r-sm);background:var(--tint);color:var(--accent);font-family:var(--sans);font-size:12px;font-weight:600;line-height:1.5;vertical-align:middle;white-space:nowrap;animation:fade .15s ease-out}
.panel-chip{margin-left:10px;padding:2px 10px;border:1px solid var(--tint-strong);border-radius:var(--r-sm);background:var(--tint);color:var(--accent);font:inherit;font-family:var(--sans);font-size:12px;font-weight:600;vertical-align:middle;cursor:pointer;animation:fade .15s ease-out}
.leaving{display:grid;grid-template-rows:1fr;text-decoration:line-through;color:var(--muted);transition:grid-template-rows .2s ease,opacity .2s ease,padding .2s ease,margin .2s ease}
.leaving>.leave-inner{min-height:0;overflow:hidden}
.leaving.gone{grid-template-rows:0fr;opacity:0;padding-top:0;padding-bottom:0;border-width:0}

/* gallery of examples */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.example{display:flex;flex-direction:column;gap:10px;padding:24px 26px;border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--paper)}
.example h3{font-size:22px;line-height:1.25}
.example h3 a{color:var(--ink);text-decoration:none}
.example h3 a:hover{text-decoration:underline}
.example p{font-size:15px}
.example .who{color:var(--muted);font-size:13px}
.example .foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.example .foot .btn.link{font-size:15px;color:var(--accent)}
.example.scratch{background:transparent;border:1.5px dashed var(--field)}

@media (prefers-reduced-motion:reduce){
  .caret,.spin,.tool-row,.enter,.new-pill,.ai-badge,.panel-chip,.section-updated,.ico-check path,.thinking .shimmer,.chat.busy .chat-dot{animation:none}
  .chev,.leaving,.chip-x{transition:none}
  .thinking .shimmer{background:none;color:var(--slate-muted)}
  .thinking .dots{display:inline}
  .just-added,.pulse{animation:none;box-shadow:inset 3px 0 0 var(--accent)}
}

/* stacked builder: the document first, then the assistant as a full-width
   slate section. Nothing is sticky; the thread scrolls inside a box so the
   composer stays near it. */
@media (max-width:999px){
  body:has(main.app) .topbar{position:static}
  .wsbar{position:static;flex-wrap:wrap;gap:10px 12px;padding:12px 16px 14px}
  .wsbar-name{order:2;flex-basis:100%}
  .wsbar-actions{order:3;flex:1 1 100%}
  .wsbar-actions>*{flex:1 1 auto}
  .wsbar-actions .btn{width:100%}
  .wsbar-actions .more{flex:0 0 auto}
  .to-chat{display:inline-flex}
  .title-input{font-size:24px}
  .builder{grid-template-columns:minmax(0,1fr);min-height:0}
  .doc-col{padding:16px 16px 32px}
  #side{position:static;height:auto;margin:0 16px 24px}
  .thread{max-height:60vh;max-height:60svh;min-height:240px}
  .chat-hint{padding-bottom:24px}
}
@media (max-width:720px){
  main{padding:24px 16px 64px}
  .topbar-inner{padding:0 16px}
  .nav .who{display:none}
  h1,.doc-title{font-size:30px}
  .sheet{padding:20px 16px}
  .doc{padding:24px 18px 32px}
  .grid2{grid-template-columns:1fr}
  .list li{grid-template-columns:1fr;gap:4px}
  .hero{grid-template-columns:1fr;gap:28px}
  .hero h1{font-size:40px}
  .loop{grid-template-columns:1fr;gap:20px;margin-top:36px}
  .gallery{grid-template-columns:1fr}
  .example{padding:20px}
  .masthead .actions>*{flex:1 1 0}
  .masthead .actions .btn{width:100%}
  .block+.block,.watch-section{margin-top:40px}
  .inline-form>div,.inline-form .f-kind,.inline-form .f-wide{flex:1 1 100%}
  .inline-form .btn{width:100%}
  /* iOS zooms into fields under 16px */
  input[type=text],input[type=email],input[type=url],input[type=number],select,textarea,.chat-form textarea{font-size:16px}
  .msg,.part.text{font-size:16px}
  .tool-row,.research{font-size:14px}
}
/* touch: 44px targets, remove buttons always visible */
@media (pointer:coarse){
  .keys{display:none}
  .btn,.menu-item{min-height:44px}
  .btn.icon{width:44px}
  .btn.link{min-height:44px;padding:0 4px;font-size:15px}
  .kind-chip,.page-chip,.chip-add,.pages li.ghost{min-height:44px}
  .page-chip{padding-right:44px}
  .chip-x{top:0;right:0;width:44px;height:44px;border-radius:var(--r-md);background:transparent;color:var(--muted);opacity:1}
  .chip-x:hover{background:transparent;color:var(--danger)}
  .chip-x svg{width:12px;height:12px}
  .change>summary{min-height:44px;display:inline-flex;align-items:center}
  .tz-current{align-items:center;padding-top:0}
  .token{min-height:44px}
  .token-x{width:40px;height:44px}
  .tokens input.token-input{min-height:44px}
  .send{width:44px;height:44px}
  .tool-row .label a{display:inline-block;padding:12px 0;margin:-12px 0}
  .new-pill{min-height:44px;padding:0 18px}
  .research summary{min-height:44px}
  .item{align-items:center}
}

/* read-only document pages (an example brief) */
.page-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.page-actions .back{font-size:15px}
.doc .doc-note+.doc-title{margin-top:-8px}
.doc-meta+.block{margin-top:40px}