/* The review page around the cards. Forked from the question-ideas review.css, cleaner, with the QA fixes:
   header wraps at 320 (WESA-07), the version row wraps instead of hiding tabs (WESA-16), the phone stamp sits above the
   card instead of on its footer (QC-05), short dock and hello labels (QC-18, QC-19). */
html{scrollbar-gutter:stable}
body{margin:0;background:#F8EEE2;color:#162412;font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
:root{--v-ok:#2E5B2A;--v-mid:#AD7420;--v-no:#A3271C;--v-empty:#E6D9C7;--dock-h:58px}
[hidden]{display:none!important}
button{font-family:inherit}
.wrap{max-width:1264px;margin:0 auto;padding:36px 20px 96px;box-sizing:border-box}

/* Header */
header.top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;padding-bottom:20px}
header.top h1{font:400 clamp(32px,4.2vw,46px)/1.05 var(--display);letter-spacing:-.8px;color:var(--olive);margin:0}
header.top .lede{margin:6px 0 0;font:400 14px/1.4 var(--body);color:#5E6656}
.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 button,.seg button{border:0;background:none;border-radius:40px;min-height:36px;padding:8px 14px 7px;font:400 12px/1 var(--mono);letter-spacing:1px;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)}
@media (hover:hover){.pill-seg button:not(.on):hover,.seg button:not(.on):hover{background:#F1E7DA}}

/* Who's reviewing */
.hello{margin:0 0 20px}
.hello-in{padding:24px 24px 26px;border-radius:18px;background:#FFFAF5;border:1px solid #EADFCF;box-shadow:0 10px 30px rgba(22,36,18,.06);text-align:center}
.hello h2{margin:0;font:400 clamp(28px,3.4vw,38px)/1.1 var(--display);color:var(--olive);letter-spacing:-.6px}
.hello-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.hello-who{min-width:120px;min-height:48px;padding:12px 22px 11px;border-radius:12px;border:1px solid #D9C9B4;background:#fff;font:400 21px/1 var(--display);color:var(--olive);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.hello-who.on{background:var(--pine);border-color:var(--pine);color:var(--eggshell)}
@media (hover:hover){.hello-who:not(.on):hover{border-color:var(--olive);box-shadow:0 6px 14px rgba(22,36,18,.08)}}
.hello-other{display:flex;gap:6px;padding:5px;border-radius:12px;border:1px solid #D9C9B4;background:#fff}
.hello-name{width:200px;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;min-height:40px;border:0;border-radius:9px;background:var(--pine);color:var(--eggshell);padding:10px 16px 9px;font:400 12px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.hello-go[disabled]{opacity:.35;cursor:default}
.hello-in.set{padding:16px 20px 18px}
.hello-in.set h2{font-size:clamp(22px,2.4vw,28px)}
@media (max-width:720px){.hello-in{padding:18px 14px 20px}.hello-other{width:100%}.hello-name{flex:1;width:auto}.hello-who{flex:1}}

/* Dock: stays at the top while scrolling, one dot per card, grouped by module */
.dock{position:sticky;top:0;z-index:40;margin:0 -20px;padding:0 20px;background:rgba(248,238,226,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid #E5D2B8;border-bottom:1px solid #E5D2B8}
.dock-in{display:grid;grid-template-columns:minmax(140px,240px) minmax(0,1fr) auto auto;align-items:center;gap:16px;min-height:56px}
.dock-now{display:flex;align-items:center;gap:8px;min-width:0;text-decoration:none;color:var(--olive)}
.dock-now .t{font:400 18px/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;padding:6px 0}
.dgroup{display:flex;gap:3px}
.dot{position:relative;display:block;width:9px;height:9px;border-radius:50%;background:var(--v-empty);box-shadow:inset 0 0 0 1px rgba(22,36,18,.07);transition:box-shadow .2s}
.dot::before{content:"";position:absolute;inset:-6px -2px}
.dot.coming{background:none;box-shadow:inset 0 0 0 1px rgba(22,36,18,.16)}
.dot.here{box-shadow:0 0 0 2px #F8EEE2,0 0 0 3.5px var(--olive)}
.dot.scr{box-shadow:inset 0 0 0 1.5px var(--v-no)}
.dot.pop{animation:dotpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes dotpop{0%{transform:scale(1)}35%{transform:scale(1.6)}100%{transform:scale(1)}}
.count{font:400 12px/1 var(--mono);letter-spacing:.6px;color:#8B7E70;white-space:nowrap}
.count b{display:inline-block;font:400 22px/1 var(--display);letter-spacing:0;color:var(--olive);margin-right:1px}
.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 .6s var(--ease)}
.dock.all .dock-bar i{background:linear-gradient(90deg,#C89B3C,#E9C979,#C89B3C)}
.who button{max-width:160px;overflow:hidden;text-overflow:ellipsis}

/* Module heading: quiet */
.mod-h{margin:64px 0 0;padding-top:14px;border-top:1px solid #E5D2B8;display:flex;align-items:baseline;gap:12px;scroll-margin-top:calc(var(--dock-h) + 8px)}
.mod-h h2{margin:0;font:400 13px/1.2 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:#7D9366}
.mod-h span{font:400 12px/1 var(--body);color:#A99E92}

/* One card */
section.q{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;padding:40px 0 0;scroll-margin-top:calc(var(--dock-h) + 8px)}
.q-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin-bottom:12px}
.q-title{font:400 clamp(26px,2.8vw,34px)/1.15 var(--display);letter-spacing:-.5px;color:var(--olive);margin:0;text-wrap:balance}
.q-title .n{display:inline-block;vertical-align:.34em;margin-left:.45em;padding:4px 8px 3px;border-radius:6px;background:#E9EEDF;color:var(--olive);font:400 12px/1 var(--mono);letter-spacing:.4px}
.tag{display:inline-block;vertical-align:.38em;margin-left:.45em;padding:4px 8px 3px;border-radius:4px;font:400 11px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase}
.tag.upd{background:#E4ECDA;color:var(--v-ok)}
.tag.rework{background:#F3DCD6;color:#8A2A1E}
.q-controls{display:flex;align-items:center;gap:8px}
.seg{display:inline-flex;flex-wrap:wrap;gap:3px;border:1px solid #E5D2B8;border-radius:22px;padding:3px;background:#FFFAF5}
.seg button{padding:8px 12px 7px}
.seg button.base{color:#7A6E62}
.seg button.base.on{background:#5E5446;color:#FFFAF5}
.reset{width:40px;height:40px;border-radius:50%;border:1px solid #E5D2B8;background:#FFFAF5;color:var(--taupe);cursor:pointer;display:grid;place-items:center;padding:0}
@media (hover:hover){.reset:hover{color:var(--olive);border-color:#D2C2AC}}
.reset svg{width:16px;height:16px;display:block}
.reset.spin svg{animation:spin .45s var(--ease)}
@keyframes spin{to{transform:rotate(-360deg)}}

.stage-wrap{position:relative}
/* The garden-arcade painting behind every card, as on the question-ideas site. */
.stage{position:relative;border-radius:18px;background:#EDE3D5 url(../img/stage/stage-bg.webp) center/cover;padding:40px 24px;min-height:520px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.stage.thump{animation:thump .35s ease-out}
@keyframes thump{0%,100%{transform:none}30%{transform:translateY(2px)}}
.stage .mount{width:100%;display:flex;justify-content:center}
.saves{display:flex;gap:10px;align-items:baseline;min-height:20px;margin-top:8px;padding:0 4px;font-size:13px;color:#4B5544;opacity:0;transition:opacity .25s}
.saves.on{opacity:1}
.saves .k{font:400 11px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;color:#8B7E70;flex:none}
.facts{display:flex;flex-direction:column;gap:4px;margin:10px 4px 0;font:400 13.5px/1.45 var(--body);color:#4B5544}
.facts b{font-weight:500;color:#2E3A28}
.facts .flag{color:#8A5A14}
.facts .flag b{color:#7A5214}
.err{color:#7A2E1D}

/* The verdict stamp. Upright and unscaled so it stays sharp (Seth, Oct 18). On phones it sits in the stage's top margin,
   above the card, never on the card's footer (QA QC-05). */
.stamp{--ink:var(--v-ok);position:absolute;right:22px;top:22px;z-index:5;pointer-events:none;padding:8px 14px 6px;border:3px solid var(--ink);border-radius:7px;
  background:rgba(255,249,238,.92);color:var(--ink);text-align:center;opacity:0;transform:translateY(-8px);box-shadow:0 6px 18px rgba(22,36,18,.16)}
.stamp::after{content:"";position:absolute;inset:3px;border:1.5px solid var(--ink);border-radius:4px}
.stamp b{display:block;font:400 21px/1 'Alfa Slab One',Georgia,serif;letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.stamp small{display:block;margin-top:4px;font:400 11px/1 var(--mono);letter-spacing:1.4px;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}
.stamp.in{animation:stampin .42s cubic-bezier(.3,1.35,.5,1) forwards}
.stamp.lift{animation:stamplift .3s 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-card{position:sticky;top:calc(var(--dock-h) + 14px);display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:#FFFAF5;border:1px solid #EADFCF}
.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;min-height:64px;padding:10px 4px;border-radius:11px;border:1px solid #E5D8C6;background:#fff;
  font:500 12.5px/1.15 var(--body);color:#4B5544;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s;text-align:center}
.vb.needs-work{--c:var(--v-mid)}
.vb.scratched{--c:var(--v-no)}
.vb .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;color:var(--c)}
.vb .ic svg{width:15px;height:15px;display:block}
@media (hover:hover){.vb:hover{border-color:var(--c);box-shadow:0 4px 12px rgba(22,36,18,.08)}}
.vb:active{transform:translateY(1px)}
.vb:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.vb.on{background:var(--c);border-color:var(--c);color:#FFFAF5}
.vb.on .ic{border-color:rgba(255,250,245,.6);color:#FFFAF5}
.vpick{display:flex;flex-wrap:wrap;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{min-height:36px;border:0;border-radius:30px;background:var(--pine);color:var(--eggshell);padding:8px 14px 7px;font:400 12px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.vpick button.alt{background:none;border:1px solid #D9C9B4;color:var(--olive)}
.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.2 var(--body);background:#F3EADF;color:#6E6255}
.chip svg{width:12px;height:12px;display:block}
.chip.approved{background:#E4ECDA;color:var(--v-ok)}
.chip.needs-work{background:#F5E6C9;color:#7A5214}
.chip.scratched{background:#F3DCD6;color:#8A2A1E}
.chip.old{background:none;border:1px dashed currentColor}
.v-old{margin:0;padding:7px 10px;border-radius:8px;background:#F5E6C9;color:#6E4A12;font-size:12.5px;line-height:1.35}
.nextup{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1px 10px;min-height:44px;padding:9px 12px 8px 14px;border-radius:11px;background:var(--pine);color:var(--eggshell);text-decoration:none}
.nextup .k{grid-column:1;font:400 11px/1.2 var(--mono);letter-spacing:1px;text-transform:uppercase;opacity:.72}
.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}
.nextup .ic svg{width:18px;height:18px;display:block}
.nextup.done{background:linear-gradient(120deg,#B88A2E,#D9B460)}
.notes{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow:auto;padding-top:12px;border-top:1px solid #F0E6D8}
.notes:empty{display:none}
.note{border-left:2px solid #E5D2B8;padding-left:10px}
.note.old{opacity:.6}
.note .nh{display:flex;flex-wrap:wrap;gap:4px 7px;align-items:center;font-size:13px}
.note .nh b{font-weight:500}
.note .nh .at{margin-left:auto;font:400 11px/1 var(--mono);color:#8B7E70}
.note .nh .lk 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;overflow-wrap:anywhere}
.note.private{border-left-color:#C9A45C}
.note.unverified{border-left-style:dashed}
.old-tag{white-space:nowrap;font:400 10px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;padding:3px 5px 2px;border-radius:3px;background:#EFE6D8;color:#7A6E62}
.rev-line{padding:8px 10px;border-radius:8px;background:#E4ECDA;color:#2E4A28;font-size:12.5px;line-height:1.35}
.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 16px/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%;height:76px;padding:10px 12px;resize:none}
.f-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:36px}
.f-name{flex:1;min-width:120px;height:40px;padding:0 10px}
.f-as{min-height:32px;border:0;background:none;padding:0;font:400 13px/1 var(--body);color:#6E6255;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.f-priv{display:inline-flex;align-items:center;gap:5px;min-height:32px;font-size:12.5px;color:#7A5E28;cursor:pointer}
.f-priv input{width:16px;height:16px;margin:0;accent-color:#7A5E28}
.f-post{margin-left:auto;flex:none;min-height:40px;border:0;border-radius:40px;background:var(--pine);color:var(--eggshell);padding:10px 18px 9px;font:400 12px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.f-post[disabled]{opacity:.35;cursor:default}
.f-err{margin:0;font-size:12.5px;color:#7A2E1D}
.f-err:empty{display:none}

/* A card whose ideas are not in yet: a quiet line, no stage. */
section.q.coming{display:block;padding-top:18px}
section.q.coming .q-title{font-size:clamp(20px,2vw,24px);color:#7D8A6C}
section.q.coming .soon{margin:2px 0 0;font:400 13px/1.4 var(--body);color:#8B7E70}

/* Scratched: cards a reviewer scratched, at the bottom while they're reworked */
#scratched{margin-top:80px;padding-top:24px;border-top:1px dashed #D9C9B4}
#scratched>h2{margin:0;font:400 clamp(26px,3vw,34px)/1.1 var(--display);color:var(--v-no);letter-spacing:-.5px}

/* Tally */
.tally{margin-top:80px;scroll-margin-top:calc(var(--dock-h) + 10px)}
.tally h2{font:400 clamp(26px,3vw,34px)/1.1 var(--display);color:var(--olive);margin:0 0 14px;letter-spacing:-.5px}
.tcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.tcol{padding:16px 16px 8px;border-radius:14px;background:#FFFAF5;border:1px solid #EADFCF}
.tcol.me{border-color:#B9C6A8}
.th{display:flex;align-items:baseline;justify-content:space-between}
.th span:first-child{font:400 22px/1 var(--display);color:var(--olive)}
.tn{font:400 12px/1 var(--mono);letter-spacing:.8px;color:#8B7E70}
.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 .6s var(--ease)}
.trow{display:grid;grid-template-columns:118px 30px 1fr;align-items:start;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}
.trow b{font:400 20px/1 var(--display);color:var(--ink)}
.tw{display:flex;flex-wrap:wrap;gap:4px}
.tw a{padding:5px 7px 4px;border-radius:5px;font:400 11px/1.1 var(--body);text-decoration:none;color:#FFFAF5;background:var(--v-ok)}
.trow.needs-work .tw a{background:var(--v-mid)}
.trow.scratched .tw a{background:var(--v-no)}
.trow.old .tw a{background:#8B7E70}
footer.foot{margin-top:48px;padding-top:14px;border-top:1px solid #E5D2B8;font-size:12.5px;color:#8B7E70}

@media (max-width:980px){
  section.q{grid-template-columns:minmax(0,1fr)}
  .rail-card{position:static}
  .dock-in{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 14px;padding:6px 0 8px}
  .dots{grid-column:1/-1;grid-row:2;justify-content:flex-start}
}
@media (max-width:720px){
  :root{--dock-h:92px}
  .wrap{padding:22px 16px 80px}
  .dock{margin:0 -16px;padding:0 16px}
  /* One row on phones: the dots scroll sideways and keep the current card's dot in view. */
  .dots{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;gap:0 8px;padding:8px 2px;
    -webkit-mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
  .dots::-webkit-scrollbar{display:none}
  .dgroup{gap:3px;flex:none}
  .dot{width:10px;height:10px;flex:none}
  .stage{padding:56px 8px 16px;border-radius:14px;min-height:420px}
  .stamp{right:12px;top:10px;padding:5px 10px 4px}
  .stamp b{font-size:15px;letter-spacing:1.4px}
  .stamp small{font-size:10px}
  .q-head{align-items:flex-start;flex-direction:column}
  .q-controls{width:100%;justify-content:space-between}
  .tcols{grid-template-columns:1fr}
  .trow{grid-template-columns:104px 26px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .stamp.in,.stamp.lift,.dot.pop,.stage.thump,.reset.spin svg{animation:none}
  .stamp.in{opacity:.94;transform:none}
}