html{scrollbar-gutter:stable;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#F8EEE2;color:#162412;font:400 16px/1.6 'NB International Pro','Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
:root{--v-ok:#2E5B2A;--v-mid:#AD7420;--v-no:#A3271C;--v-empty:#E6D9C7;--dock-h:60px}
[hidden]{display:none!important}
.wrap{max-width:1264px;margin:0 auto;padding:40px 20px 100px;box-sizing:border-box}
.mono{font:400 11px/1.2 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--olive-mid)}

/* Header */
header.top{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between;padding-bottom:22px}
header.top h1{font:400 clamp(34px,4.4vw,50px)/1.04 var(--display);letter-spacing:-1px;color:var(--olive);margin:10px 0 0}
/* The pills wrap instead of widening the page (at 320 they ran 7px past the screen and the page panned sideways). */
.globals{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill-seg{display:inline-flex;align-items:center;border:1px solid #E5D2B8;border-radius:40px;padding:3px;background:#FFFAF5}
.pill-seg .lab{font:400 10px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#A99E92;padding:1px 8px 0 10px;white-space:nowrap}
.pill-seg button,.seg button{border:0;background:none;border-radius:40px;padding:8px 14px 7px;font:400 11px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--olive);cursor:pointer;transition:background .18s,color .18s;white-space:nowrap}
.pill-seg button.on,.seg button.on{background:var(--pine);color:var(--eggshell)}
.pill-seg button:not(.on):hover,.seg button:not(.on):hover{background:#F1E7DA}

/* Who's reviewing: front and centre until someone picks */
.hello{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ease),opacity .3s,margin .45s var(--ease);margin:0 0 22px}
.hello.gone{grid-template-rows:0fr;opacity:0;margin:0;pointer-events:none}
/* The page opens with the panel already open, not sliding open (it pushed every card down 222px while the page loaded).
   review.js takes this off after the first frames, so later openings keep the transition. */
.hello.instant{transition:none}
.hello > .hello-in{overflow:hidden;min-height:0}
.hello-in{padding:26px 28px 28px;border-radius:18px;background:#FFFAF5 url(/img/stage-bg.webp) center/cover;background-blend-mode:soft-light;border:1px solid #EADFCF;box-shadow:0 10px 30px rgba(22,36,18,.08);text-align:center}
.hello h2{margin:0;font:400 clamp(30px,3.6vw,42px)/1.1 var(--display);color:var(--olive);letter-spacing:-.6px}
.hello p{margin:8px auto 18px;max-width:46ch;font-size:15px;color:#4B5544}
.hello p.redo a{color:var(--olive);font-weight:500;text-decoration:underline;text-decoration-color:rgba(76,98,52,.4);text-underline-offset:3px;white-space:nowrap}
.hello p.redo a::after{content:"\2192";display:inline-block;margin-left:5px} /* inline-block: the arrow stays out of the underline */
.hello p.redo a:hover{text-decoration-color:var(--olive)}
.hello-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hello-who{min-width:120px;padding:15px 22px 14px;border-radius:12px;border:1px solid #D9C9B4;background:#fff;font:400 22px/1 var(--display);color:var(--olive);cursor:pointer;transition:transform .15s var(--ease),border-color .2s,box-shadow .2s}
.hello-who.on{background:var(--pine);border-color:var(--pine);color:var(--eggshell)}
.hello-in.set{padding:20px 24px 22px}
.hello-in.set h2{font-size:clamp(24px,2.6vw,30px)}
.hello-in.set p{margin-bottom:14px}
.hello-who:hover{transform:translateY(-2px);border-color:var(--olive);box-shadow:0 8px 18px rgba(22,36,18,.1)}
.hello-other{display:flex;gap:6px;padding:5px;border-radius:12px;border:1px solid #D9C9B4;background:#fff}
.hello-name{width:220px;min-width:0;border:0;outline:none;background:none;padding:0 10px;font:400 16px/1 var(--body);color:#162412}
.hello-go{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:9px;background:var(--pine);color:var(--eggshell);padding:12px 16px 11px;font:400 11px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;cursor:pointer}
.hello-go svg{width:14px;height:14px;display:block}
.hello-go[disabled]{opacity:.35;cursor:default}
.vpick button.alt{background:none;border:1px solid #D9C9B4;color:var(--olive)}
@media (max-width:720px){.hello-in{padding:20px 16px 20px}.hello-other{width:100%}.hello-name{flex:1;width:auto}.hello-who{flex:1}}

.who{min-width:0;max-width:100%}
/* A picked name is capped (long names end in an ellipsis); the question asked before anyone is picked reads in full. */
.who button.on{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.who button .short{display:none}
/* Dock: stays at the top while scrolling, one dot per question */
.dock{position:sticky;top:0;z-index:40;margin:0 -20px;padding:0 20px;background:rgba(248,238,226,.9);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border-top:1px solid #E5D2B8;border-bottom:1px solid #E5D2B8}
.dock-in{display:grid;grid-template-columns:minmax(150px,250px) 1fr auto auto;align-items:center;gap:18px;min-height:58px}
.dock-now{display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none;color:var(--olive)}
.dock-now .n{flex:none;padding:3px 6px 2px;border-radius:6px;background:var(--olive);color:#FFFAF5;font:400 12px/1 var(--mono);letter-spacing:.5px}
.dock-now .t{font:400 19px/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{display:flex;justify-content:center;gap:5px}
.dot{position:relative;display:flex;width:15px;height:15px;border-radius:50%;overflow:hidden;background:var(--v-empty);box-shadow:inset 0 0 0 1px rgba(22,36,18,.07);
  transition:transform .2s var(--ease),box-shadow .2s}
.dot i{flex:1;height:100%;transition:background-color .3s}
.dot:hover{transform:scale(1.3)}
.dot.here{box-shadow:0 0 0 2px #F8EEE2,0 0 0 3.5px var(--olive)}
.dot[data-a=approved] .a,.dot[data-b=approved] .b{background:var(--v-ok)}
.dot[data-a=needs-work] .a,.dot[data-b=needs-work] .b{background:var(--v-mid)}
.dot[data-a=scratched] .a,.dot[data-b=scratched] .b{background:var(--v-no)}
.dot.pop{animation:dotpop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes dotpop{0%{transform:scale(1)}35%{transform:scale(1.7)}100%{transform:scale(1)}}
.count{font:400 12px/1 var(--mono);letter-spacing:.6px;color:#A99E92;white-space:nowrap}
.count b{display:inline-block;font:400 24px/1 var(--display);letter-spacing:0;color:var(--olive);margin-right:1px}
.count b.tick{animation:tick .45s var(--ease)}
@keyframes tick{0%{transform:translateY(7px);opacity:0}100%{transform:none;opacity:1}}
.dock-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.dock-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--olive-mid),var(--olive));transition:width .7s var(--ease)}
.dock.all .dock-bar i{background:linear-gradient(90deg,#C89B3C,#E9C979,#C89B3C)}
.dock.cheer .dot{animation:cheer .7s calc(var(--i,0) * 35ms) cubic-bezier(.3,1.5,.5,1)}
@keyframes cheer{0%,100%{transform:none}40%{transform:translateY(-7px) scale(1.25)}}

/* One question */
section.q{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;padding:60px 0 0;scroll-margin-top:calc(var(--dock-h) + 4px)}
.q-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.q-title{font:400 clamp(27px,3vw,36px)/1.15 var(--display);letter-spacing:-.6px;color:var(--olive);margin:0;text-wrap:balance}
.q-w{display:inline-block;vertical-align:.32em;margin-right:.45em;padding:4px 8px 3px;border-radius:7px;background:var(--olive);color:#FFFAF5;font:400 13px/1 var(--mono);letter-spacing:.5px;text-decoration:none;transition:background-color .18s}
a.q-w:hover{background:var(--pine)}
.tag{display:inline-block;vertical-align:.4em;margin-left:.5em;padding:5px 8px 4px;border-radius:4px;font:400 10px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase}
.tag.new{background:#F4E2C0;color:#8A5F1B}
.tag.ver-tag{background:var(--pine);color:var(--eggshell)}
.tag.upd{background:#E4ECDA;color:var(--v-ok);cursor:help}
/* Notes and verdicts from before a card's latest update */
.note.old{opacity:.55}
.note.old p{text-decoration:none}
.old-tag{white-space:nowrap;font:normal 400 10.5px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;padding:3px 5px 2px;border-radius:3px;background:#EFE6D8;color:#6F6255}
.rev-line{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;background:#E4ECDA;color:#2E4A28;font-size:12.5px;line-height:1.35}
.rev-line b{font:400 10px/1.2 var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.rev-line span + span{margin-top:4px} /* two updates on one day read as two lines of news */
.chip.old{background:none;border:1px dashed currentColor;opacity:.7}
.v-old{margin:0;padding:7px 10px;border-radius:8px;background:#F5E6C9;color:#7A5214;font-size:12.5px;line-height:1.35}
/* An approval that still counts, on a card that changed since: quieter than the "have another look" line above. */
.v-was{margin:0;padding:7px 10px;border-radius:8px;background:#E4ECDA;color:#2E4A28;font-size:12.5px;line-height:1.35}
.dot.olda .a,.dot.oldb .b{opacity:.35}
.trow.old .tk{color:#8B7E70}
.tw a.approved,.tw a.needs-work,.tw a.scratched{opacity:.45}
.trow.old .tw a{background:#8B7E70}
.trow.old .tw a.approved{background:var(--v-ok)}
.trow.old .tw a.needs-work{background:var(--v-mid)}
.trow.old .tw a.scratched{background:var(--v-no)}
.q-controls{display:flex;align-items:center;gap:8px}
.seg{display:inline-flex;border:1px solid #E5D2B8;border-radius:40px;padding:3px;background:#FFFAF5}
.seg.ver{align-items:center;border-style:dashed;border-color:#D9C9B4}
.seg.ver .lab{font:400 9.5px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#A99E92;padding:1px 6px 0 9px}
.seg.ver button{padding:8px 10px 7px}
/* Named versions up for comparison: a full row over the card, solid and easy to spot. */
.ver-row{margin:0 0 12px}
.seg.ver.big{display:flex;flex-wrap:wrap;gap:4px;width:100%;box-sizing:border-box;border:1.5px solid var(--pine);border-radius:14px;padding:6px;background:#F6EEE2}
.seg.ver.big .lab{font-size:10.5px;color:var(--pine);padding:0 8px 0 6px;flex:none}
.seg.ver.big button{flex:1 1 auto;padding:11px 14px 10px;font-size:12px;border-radius:10px;background:#FFFAF5;box-shadow:0 0 0 1px #E2D4C2 inset}
.seg.ver.big button.on{background:var(--pine);color:var(--eggshell);box-shadow:none}
.q-controls{flex-wrap:wrap;justify-content:flex-end}
.reset{width:36px;height:36px;border-radius:50%;border:1px solid #E5D2B8;background:#FFFAF5;color:var(--taupe);cursor:pointer;display:grid;place-items:center;padding:0;transition:color .2s,border-color .2s}
.reset:hover{color:var(--olive);border-color:#D2C2AC}
.reset .ic,.reset svg{width:16px;height:16px;display:block}
.reset.spin svg{animation:spin .5s var(--ease)}
@keyframes spin{to{transform:rotate(-360deg)}}

.stage-wrap{position:relative}
.stage{position:relative;border-radius:18px;background:#EDE3D5 url(/img/stage-bg.webp) center/cover;padding:40px 24px;min-height:560px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
/* The painting behind a card keeps its size while the card grows or shrinks (Jake, Oct 29, W8: opening "Something to
   add/clarify?" made the background fresco change size). review.js keepBg() sets the size once per card and width. */
.stage[data-mode=redesign]{background-size:var(--bg-size,cover);background-position:var(--bg-pos,center)}
/* The stage only drops a whole pixel when a verdict lands: any scale here blurs every word on the card (Seth, Oct 18). */
.stage.thump{animation:thump .4s ease-out}
@keyframes thump{0%,100%{transform:none}30%{transform:translateY(2px)}}
.stage .mount{width:100%;display:flex;justify-content:center}
/* A section more than a screen away (review.js near()) holds its CSS animations still until it comes near again: the
   resting carets and arrow nudges off screen used to redraw the whole page every frame (Oct 25 lag check, PLAN.md S2). */
section.q[data-off] *,section.q[data-off] *::before,section.q[data-off] *::after{animation-play-state:paused!important}
/* Below the view (data-below) it is also left out of drawing until it comes near: not styled, laid out, painted or
   composited, so a frame near W8 has far fewer layers to put together (PLAN.md S2, the optional part). It keeps the height it
   last had while drawn (contain-intrinsic-size: auto), so the page stays as long as it was; data-wake draws it for two
   frames after something in it changes (review.js wake()), so the height it keeps is the new one. Sections above the view
   stay drawn: Chrome logged layout shifts when one of those was drawn again, although nothing on screen moved. */
section.q{contain-intrinsic-size:auto 1500px}
section.q[data-off][data-below]:not([data-wake]){content-visibility:auto}
.stage[data-mode=wes]{background:#F3EADF;padding:16px}
figure.wes{margin:0;width:100%;display:flex;justify-content:center}
.wes-full{display:block;max-width:100%;border-radius:10px;cursor:zoom-in}
.wes-full:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.wes-shot{display:block;max-width:100%;height:auto;border-radius:10px;box-shadow:0 4px 16px rgba(22,36,18,.12)}
.saves{display:flex;gap:10px;align-items:baseline;min-height:20px;margin-top:9px;padding:0 4px;font-size:13px;color:#4B5544;opacity:0;transform:translateY(-3px);transition:opacity .3s,transform .3s var(--ease)}
.saves.on{opacity:1;transform:none}
.saves .k{font:400 10px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:#A99E92;flex:none}
.err{color:#7A2E1D}

/* The verdict stamp, pressed onto the stage. Upright and unscaled so its lettering stays sharp (Seth, Oct 18: text went blurry);
   it lands by dropping in and fading, not by shrinking. */
.stamp{--ink:var(--v-ok);position:absolute;right:16px;top:26px;z-index:5;pointer-events:none;padding:9px 15px 7px;border:3px solid var(--ink);border-radius:7px;
  background:rgba(255,249,238,.9);color:var(--ink);text-align:center;opacity:0;transform:translateY(-8px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.85'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.85'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px;
  box-shadow:0 6px 18px rgba(22,36,18,.18)}
.stamp::after{content:"";position:absolute;inset:3px;border:1.5px solid var(--ink);border-radius:4px}
.stamp b{display:block;font:400 23px/1 'Alfa Slab One',Georgia,serif;letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.stamp small{display:block;margin-top:5px;font:400 9.5px/1 var(--mono);letter-spacing:1.8px;text-transform:uppercase;white-space:nowrap}
.stamp[data-v=needs-work]{--ink:var(--v-mid)}
.stamp[data-v=scratched]{--ink:var(--v-no)}
.stamp.rest{opacity:.94;transform:none}
/* Where the stamp can't sit beside the card without touching it (every phone, and laptops narrower than about 1270px, where it
   used to land on the card's title or footer), it sits in a band of the stage under the card instead (review.js placeStamp
   sets stamp-under from the widths alone). The band is there whether or not there is a verdict, so a verdict landing moves
   nothing, and on a phone it is right above the verdict buttons, where the stamp can be seen landing. */
.stage-wrap.stamp-under .stage:not(.past),.stage-wrap.stamp-under .stage[data-mode=wes]{padding-bottom:84px}
.stage-wrap.stamp-under .stamp{top:auto;bottom:12px}
@media (max-width:720px){
  .stage-wrap.stamp-under .stage:not(.past),.stage-wrap.stamp-under .stage[data-mode=wes]{padding-bottom:58px}
  .stage-wrap.stamp-under .stamp{bottom:8px}
}
.stage.past ~ .stamp{display:none} /* an earlier version isn't what the verdict is about */
.stamp.in{animation:stampin .46s cubic-bezier(.3,1.35,.5,1) forwards}
.stamp.lift{animation:stamplift .32s ease forwards}
@keyframes stampin{0%{opacity:0;transform:translateY(-8px)}65%{opacity:.96;transform:translateY(2px)}100%{opacity:.94;transform:none}}
@keyframes stamplift{from{opacity:.94;transform:none}to{opacity:0;transform:translateY(-6px)}}

/* Rail */
.rail{position:relative}
.rail-card{position:sticky;top:calc(var(--dock-h) + 14px);margin-top:var(--rail-top,0px);display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:#FFFAF5;border:1px solid #EADFCF}
.vbox{display:flex;flex-direction:column;gap:9px}
.vbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vb{--c:var(--v-ok);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;border-radius:11px;border:1px solid #E5D8C6;background:#fff;
  font:500 12.5px/1.15 var(--body);color:#4B5544;cursor:pointer;transition:transform .15s var(--ease),background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.vb.needs-work{--c:var(--v-mid)}
.vb.scratched{--c:var(--v-no)}
.vb .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;color:var(--c);transition:background-color .2s,color .2s,border-color .2s}
.vb .ic svg{width:16px;height:16px;display:block}
.vb:hover{border-color:var(--c);transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,36,18,.08)}
/* Pressed: it sinks a pixel and loses its lift, no scale, so the label stays crisp (Seth, Oct 18). */
.vb:active{transform:translateY(1px);box-shadow:none}
.vb:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.vb.on{background:var(--c);border-color:var(--c);color:#FFFAF5;box-shadow:0 6px 16px rgba(22,36,18,.16);animation:press .4s cubic-bezier(.3,1.5,.5,1)}
.vb.on .ic{background:rgba(255,250,245,.18);border-color:rgba(255,250,245,.6);color:#FFFAF5}
@keyframes press{0%{transform:translateY(1px);box-shadow:0 0 0 3px rgba(22,36,18,.12)}100%{transform:none}}
.vpick{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:11px;background:#F3EADF;font-size:13.5px;color:#4B5544}
.vpick span{margin-right:auto}
.vpick button{border:0;border-radius:30px;background:var(--pine);color:var(--eggshell);padding:8px 14px 7px;font:400 11px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;cursor:pointer}
.vothers{display:flex;flex-wrap:wrap;gap:6px}
.vothers:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px 4px;border-radius:30px;font:400 12px/1 var(--body);background:#F3EADF;color:#8B7E70}
.chip .ic,.chip svg{width:12px;height:12px;display:block}
.chip.approved{background:#E4ECDA;color:var(--v-ok)}
.chip.needs-work{background:#F5E6C9;color:#8A5A14}
.chip.scratched{background:#F3DCD6;color:#8A2A1E}

.nextup{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1px 10px;padding:10px 12px 9px 14px;border-radius:11px;background:var(--pine);color:var(--eggshell);text-decoration:none}
.nextup .k{grid-column:1;font:400 9.5px/1.2 var(--mono);letter-spacing:1.3px;text-transform:uppercase;opacity:.65}
.nextup .t{grid-column:1;font:400 15px/1.25 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextup .ic{grid-column:2;grid-row:1/3;transition:transform .2s var(--ease)}
.nextup .ic svg{width:18px;height:18px;display:block}
.nextup:hover .ic{transform:translateX(3px)}
.nextup.done{background:linear-gradient(120deg,#B88A2E,#D9B460)}
.nextup.fresh{animation:slidein .5s .18s var(--ease) both}
@keyframes slidein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.notes{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow:auto;padding-top:12px;border-top:1px solid #F0E6D8}
.note{border-left:2px solid #E5D2B8;padding-left:10px}
.note.new{animation:slidein .4s var(--ease) both}
/* The head wraps rather than squeeze the time onto two lines; the "Earlier version" tag comes after the time, so it is the
   part that drops to a line of its own. */
.note .nh{display:flex;flex-wrap:wrap;gap:4px 7px;align-items:center;font-size:13px}
.note .nh b{font-weight:500;min-width:0;overflow-wrap:anywhere}
.note .nh .nt{margin-left:auto;font:400 10px/1 var(--mono);color:#A99E92;white-space:nowrap}
.note .nh .priv svg{width:11px;height:11px;display:block;color:#9A7B3E}
.note p{margin:2px 0 0;font-size:13.5px;line-height:1.45;white-space:pre-wrap}
.note.private{border-left-color:#C9A45C}
.note.claude{border-left-color:#4C6234;background:#F4F1E6;border-radius:0 6px 6px 0;padding:6px 8px 6px 10px}

.compose{display:flex;flex-direction:column;gap:8px}
.f-body,.f-name{box-sizing:border-box;border:1px solid #E2D4C1;border-radius:9px;background:#fff;font:400 14px/1.4 var(--body);color:#162412;outline:none;transition:border-color .2s}
.f-body:focus,.f-name:focus{border-color:#B9C6A8}
.f-body{width:100%;min-height:44px;max-height:220px;padding:11px 12px;resize:none;field-sizing:content}
.f-body:focus,.f-body.open{min-height:80px}
.f-row{display:flex;align-items:center;gap:8px;min-height:34px}
.f-name{flex:1;min-width:0;height:34px;padding:0 10px}
.f-as{border:0;background:none;padding:0;font:400 12.5px/1 var(--body);color:#8B7E70;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.f-as:hover{color:var(--olive)}
.f-priv{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:#9A7B3E}
.f-priv svg{width:12px;height:12px;display:block}
.f-post{margin-left:auto;flex:none;border:0;border-radius:40px;background:var(--pine);color:var(--eggshell);padding:10px 18px 9px;font:400 11px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;cursor:pointer;transition:opacity .2s,transform .15s}
.f-post:not([disabled]):hover{transform:translateY(-1px)}
.f-post[disabled]{opacity:.35;cursor:default}
.f-err{margin:0;font-size:12px;color:#7A2E1D}
.f-err:empty{display:none}

/* Pictures in notes (review.js). The image button sits beside Post, in the reset button's quiet style. */
.f-att{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid #E2D4C1;background:#fff;color:#8B7E70;cursor:pointer;display:grid;place-items:center;padding:0;transition:color .2s,border-color .2s}
.f-att + .f-post{margin-left:0}
.f-att .ic,.f-att svg{width:17px;height:17px;display:block}
.f-att:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.f-att[disabled]{opacity:.35;cursor:default}
@media (hover:hover){.f-att:not([disabled]):hover{color:var(--olive);border-color:#C9BBA6}}
/* Phones: no grey tap flash on the new controls, and a press shows while the finger is down instead (Jake, WEB-12650). */
.f-att,.f-img .x,.nimg,.lb-x,.lb-nav{-webkit-tap-highlight-color:transparent}
.f-att:not([disabled]):active{background:#F3EADF;color:var(--olive)}
.f-img .x:active{background:#162412}
.nimg:active img{opacity:.82}
.lb-x:active,.lb-nav:active{background:rgba(248,238,226,.32)}
/* Waiting pictures: small tiles under the box, each with a cross to take it out (a bigger tap area than it looks). */
.f-imgs{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.f-img{position:relative;width:52px;height:52px;border-radius:8px;background:#F3EADF center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(22,36,18,.08)}
.f-img .x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:2px solid #FFFAF5;background:#4B5544;color:#FFFAF5;display:grid;place-items:center;padding:0;cursor:pointer}
.f-img .x::before{content:"";position:absolute;inset:-8px}
.f-img .x .ic,.f-img .x svg{width:10px;height:10px;display:block}
.f-img .x:focus-visible{outline:2px solid var(--olive);outline-offset:1px}
.rail-card.posting .f-img .x{visibility:hidden}
/* Files dragged over the rail: the box shows where they go. */
.rail-card.drop .f-body{border-color:var(--olive);border-style:dashed;background:#F8F3EA}
/* Posting with pictures: Post fills from the left as they go up. */
.f-post.busy,.f-post.busy[disabled]{opacity:1;cursor:progress;background:linear-gradient(90deg,var(--pine) var(--p,0%),#5F6F55 var(--p,0%))}
/* Under a posted note, sized before they load (review.js noteImages): one picture in its own shape, at most 144 px tall and
   as wide as the note; two to four in one row of equal squares. */
.nimgs{margin-top:6px}
.nimgs.grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,var(--cap)));gap:6px}
.nimg{position:relative;display:block;padding:0;border:0;border-radius:8px;overflow:hidden;background:#F3EADF;cursor:zoom-in}
.nimgs.one .nimg{max-width:100%;height:auto}
.nimgs.grid .nimg{width:100%;aspect-ratio:1}
.nimg::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(22,36,18,.08);pointer-events:none}
.nimg img{display:block;width:100%;height:100%;object-fit:cover}
.nimg:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.nimg.err{cursor:default}
.nimg.err img{visibility:hidden}

/* Full size: the picture over the page, as large as fits. A pinch zooms and pans as anywhere else; a one-finger sideways swipe
   moves on (review.js). */
/* The page stays still behind it. Its kept scrollbar gutter takes the backdrop's colour, so no cream strip shows at the side. */
html.lb-open{overflow:hidden;background:#1F271C}
dialog.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#F8EEE2;overflow:hidden}
dialog.lb::backdrop{background:rgba(17,26,15,.94)}
dialog.lb[open]{animation:lbin .16s ease-out}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:calc(60px + env(safe-area-inset-top)) 16px calc(52px + env(safe-area-inset-bottom));touch-action:manipulation;cursor:zoom-out}
.lb-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;background:#F3EADF;box-shadow:0 12px 40px rgba(0,0,0,.35);-webkit-user-select:none;user-select:none;-webkit-touch-callout:default;cursor:default}
.lb-img:not([src]){visibility:hidden}
.lb-x,.lb-nav{position:absolute;border:0;border-radius:50%;background:rgba(248,238,226,.14);color:#F8EEE2;display:grid;place-items:center;padding:0;cursor:pointer;transition:background-color .18s}
.lb-x{top:calc(10px + env(safe-area-inset-top));right:10px;width:44px;height:44px}
.lb-nav{top:calc(50% - 22px);width:44px;height:44px}
.lb-nav.prev{left:10px}
.lb-nav.next{right:10px}
.lb-x .ic,.lb-x svg{width:18px;height:18px;display:block}
.lb-nav .ic,.lb-nav svg{width:20px;height:20px;display:block}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:2px solid #F8EEE2;outline-offset:2px}
@media (hover:hover){.lb-x:hover,.lb-nav:hover{background:rgba(248,238,226,.26)}}
.lb-n{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));text-align:center;font:400 11px/1 var(--mono);letter-spacing:1.2px;color:rgba(248,238,226,.75);pointer-events:none}

/* Scratched: cards a reviewer scratched, kept at the bottom while they're reworked */
#scratched{margin-top:90px;padding-top:28px;border-top:1px dashed #D9C9B4}
.sc-head h2{margin:0;font:400 clamp(28px,3vw,36px)/1.1 var(--display);color:var(--v-no);letter-spacing:-.5px}
.sc-head p{margin:6px 0 0;max-width:60ch;font-size:15px;color:#4B5544}
#scratched section.q{padding-top:44px}
.tag.rework{background:#F3DCD6;color:#8A2A1E}
.dot.scr{box-shadow:inset 0 0 0 1.5px var(--v-no)}
/* Tabled: on hold for now (Wes, Oct 26, W6), after the scratched list. Quieter than scratched: nothing is being redone. */
#tabled{margin-top:90px;padding-top:28px;border-top:1px dashed #D9C9B4}
#tabled .sc-head h2{color:#7A6E62}
#tabled section.q{padding-top:44px}
.tag.tabled{background:#ECE5DA;color:#6B6157}
.dot.tab{opacity:.5;box-shadow:inset 0 0 0 1.5px #9C8F82}

/* Tally */
.tally{margin-top:90px;scroll-margin-top:calc(var(--dock-h) + 10px)}
.tally h2{font:400 clamp(28px,3vw,36px)/1.1 var(--display);color:var(--olive);margin:0 0 16px;letter-spacing:-.5px}
.tcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.tcol{padding:18px 18px 8px;border-radius:14px;background:#FFFAF5;border:1px solid #EADFCF}
.tcol.me{border-color:#B9C6A8;box-shadow:0 6px 18px rgba(22,36,18,.06)}
.th{display:flex;align-items:baseline;justify-content:space-between}
.th span:first-child{font:400 24px/1 var(--display);color:var(--olive)}
.tn{font:400 11px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#A99E92}
.tbar{height:4px;margin:12px 0 6px;border-radius:4px;background:#EFE4D5;overflow:hidden}
.tbar i{display:block;height:100%;background:var(--olive);border-radius:4px;transition:width .7s var(--ease)}
.tcol.full .tbar i{background:linear-gradient(90deg,#C89B3C,#E9C979)}
.trow{display:grid;grid-template-columns:130px 30px 1fr;align-items:center;gap:8px;padding:9px 0;border-top:1px solid #F0E6D8}
.trow:first-of-type{border-top:0}
.tk{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:#4B5544}
.tk .ic svg{width:14px;height:14px;display:block}
.trow.approved .tk .ic{color:var(--v-ok)}
.trow.needs-work .tk .ic{color:var(--v-mid)}
.trow.scratched .tk .ic{color:var(--v-no)}
.trow b{font:400 21px/1 var(--display);color:var(--ink)}
.tw{display:flex;flex-wrap:wrap;gap:4px}
.tw a{padding:4px 7px 3px;border-radius:5px;font:400 10.5px/1 var(--mono);letter-spacing:.5px;text-decoration:none;color:#FFFAF5;background:var(--v-ok);transition:transform .15s}
.trow.needs-work .tw a{background:var(--v-mid)}
.trow.scratched .tw a{background:var(--v-no)}
.tw a:hover{transform:translateY(-1px)}
footer.foot{margin-top:56px;padding-top:16px;border-top:1px solid #E5D2B8;font-size:12.5px;color:#A99E92}
/* Until the cards are drawn, what comes after them stays out of sight: the footer line showed under the header at first
   paint and was then pushed off the screen (a layout shift of about 0.13 on a phone). review.js build() adds .drawn; a class,
   not :empty, so the scratched list, tally and footer still show if every card has been moved to the scratched list. */
#questions:not(.drawn) ~ *{visibility:hidden}

@media (max-width:980px){
  section.q{grid-template-columns:minmax(0,1fr)}
  .rail-card{position:static;margin-top:0}
  .dock-in{grid-template-columns:minmax(0,1fr) auto auto;gap:6px 14px;padding:8px 0 10px}
  .dots{grid-column:1/-1;grid-row:2;justify-content:space-between}
}
@media (max-width:720px){
  :root{--dock-h:86px}
  .wrap{padding:26px 16px 80px}
  .dock{margin:0 -16px;padding:0 16px}
  header.top{padding-bottom:16px}
  .globals{width:100%}
  .pill-seg .lab{display:none}
  .dots{gap:0}
  .dot{width:13px;height:13px}
  .dock-now .t{font-size:17px}
  .who button .long{display:none}
  .who button .short{display:inline}
  .stage{padding:18px 8px;border-radius:14px}
  .stamp{right:12px;padding:5px 9px 4px}
  .stamp b{font-size:15px;letter-spacing:1.2px}
  .stamp small{margin-top:3px}
  .q-head{align-items:flex-start;flex-direction:column}
  .seg button{padding:8px 11px 7px;font-size:10px;letter-spacing:1px}
  .tcols{grid-template-columns:1fr}
  .trow{grid-template-columns:116px 26px 1fr}
}
/* On a phone the stage runs edge to edge, so the phone card shows at the width it has in the app on that phone (a 320 screen
   gets a 320 card, as today's onboarding does) instead of a card squeezed 48px narrower by the page gutter and the stage's
   own padding. The rail, the notes and the headings keep the gutter. */
@media (max-width:480px){
  .stage-wrap{margin:0 -16px}
  .stage{padding:18px 0;border-radius:0}
  .past-frame{border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .stamp.in,.stamp.lift,.dot.pop,.dock.cheer .dot,.stage.thump,.vb.on,.nextup.fresh,.note.new,.count b.tick,dialog.lb[open]{animation:none}
  .stamp.in{opacity:.94;transform:none}
}

/* Earlier versions: tiny date buttons between Redesign and Mockup. */
/* Tiny bordered buttons, newest first, sitting inside the tab pill. */
.seg button.pv{align-self:center;margin:0 1px;padding:3px 4px 2px;border:1px solid #E2D4C2;border-radius:4px;background:#FFFDF9;
  font-size:8px;line-height:1;letter-spacing:.2px;color:#9A8E82;box-shadow:0 1px 0 rgba(22,36,18,.05)}
.seg button.pv:first-of-type{margin-left:3px}
.seg [data-mode=wes]{margin-left:3px}
.seg button.pv:hover{color:var(--olive);border-color:#CDBDA6;background:#fff}
.seg button.pv.on{background:var(--pine);border-color:var(--pine);color:var(--eggshell)}
@media (max-width:640px){.q-controls{max-width:100%}.q-controls .seg:not(.ver){max-width:100%;overflow-x:auto;scrollbar-width:none}.q-controls .seg:not(.ver)::-webkit-scrollbar{display:none}}
/* Phones: Redesign, Mockup and Today stay in sight; the earlier-version dates follow Today, and while the row still runs on
   past the right edge that edge fades out (review.js sets "more"). The Phone/Desktop pill goes: a phone always gets phone cards. */
@media (max-width:640px){
  .seg button.pv{order:1}
  .seg [data-mode=redesign] + .pv{margin-left:4px}
  .q-controls .seg.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),rgba(0,0,0,.08));mask-image:linear-gradient(90deg,#000 calc(100% - 30px),rgba(0,0,0,.08))}
  .globals .pill-seg.size{display:none}
}
.stage.past{padding:0;background:none;min-height:0;display:block}
.past-frame{display:block;width:100%;height:760px;border:0;border-radius:18px;background:transparent}
.past-tag{position:absolute;left:12px;top:12px;z-index:2;padding:4px 8px 3px;border-radius:20px;background:rgba(29,48,24,.82);color:#F8EEE2;font:400 10px/1 var(--mono);letter-spacing:1.1px;text-transform:uppercase;pointer-events:none}

/* Fred's earlier notes: his notes from before these cards, copied from Slack and Linear, under the cards. Same note look as the rails. */
.earlier{margin-top:90px;padding-top:28px;border-top:1px dashed #D9C9B4;scroll-margin-top:calc(var(--dock-h) + 10px)}
.earlier .sc-head h2{color:var(--olive)}
.fe-group{margin-top:22px;padding:16px 18px 18px;border-radius:14px;background:#FFFAF5;border:1px solid #EADFCF}
.fe-group h3{margin:0 0 14px;font:400 10.5px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--olive-mid)}
.fe-list{columns:320px 2;column-gap:28px}
.fe-list .note{break-inside:avoid;margin-bottom:14px}
.fe-list .note:last-child{margin-bottom:0}
.fe-list .nh a{font-weight:500;color:inherit;text-decoration:none;overflow-wrap:anywhere}
.fe-list .note p a{color:var(--olive)}
@media (hover:hover){.fe-list a:hover{text-decoration:underline}}