/* Feature Requests: only what the live board needs on top of marketing-v1.css
   (loading, empty and error states, the form error line, delete links,
   user-written text wrapping). Every colour already exists in that sheet. */
.fr-more{display:flex;justify-content:center;margin-top:18px}
.fr-more[hidden]{display:none}
.fr .empty button{margin-top:10px}
.fr .empty button.link-quiet{display:inline-block;color:var(--ax-text);font-weight:600}
.idea-t,.idea-d,.detail h1,.detail .body,.cmt p{overflow-wrap:anywhere}
.detail .body p,.cmt p{white-space:pre-line}
.detail .by .st{margin-left:0;color:var(--ax-text);font-weight:600}
.form-err{margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--err)}
.form-err[hidden]{display:none}
.cform-wrap{margin-top:20px}
.cform-wrap .cform{margin-top:0}
.cmt-h .link-quiet{margin-left:12px;font-size:13px;font-weight:400}
.detail .own{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:34px}
.edited{margin-left:6px;font-size:13px;font-weight:400;color:var(--faint-t)}
.composer.editor{margin-top:22px;animation:none}
.cedit{margin-top:6px}
.cedit textarea{display:block;width:100%;box-sizing:border-box;padding:12px 18px;border:0;border-radius:18px;background:var(--field);font:inherit;font-size:16px;line-height:1.45;color:var(--ink);resize:none;transition:background .2s,box-shadow .2s}
.cedit textarea:focus{outline:none;background:var(--card);box-shadow:inset 0 0 0 2px var(--ax)}
.cedit .row{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:10px}
.btn[disabled],.link-quiet[disabled]{opacity:.5;cursor:default;pointer-events:none}
.detail:focus,.detail h1:focus{outline:none}

/* ---------- search ---------- */
.fr-find{position:relative;margin-top:34px}
.fr-find+.fr-bar{margin-top:16px}
.fr-find .mag{position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;fill:none;stroke:var(--subtle);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.fr-find input{display:block;width:100%;box-sizing:border-box;height:44px;padding:0 44px;border:0;border-radius:99px;background:var(--field);font:inherit;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none;transition:background .2s,box-shadow .2s}
.fr-find input::placeholder{color:var(--placeholder)}
.fr-find input:focus{outline:none;background:var(--card);box-shadow:inset 0 0 0 2px var(--ax)}
.fr-find .clr{all:unset;position:absolute;right:8px;top:50%;width:28px;height:28px;margin-top:-14px;display:grid;place-items:center;border-radius:50%;color:var(--subtle);cursor:pointer;transition:background .2s,color .2s}
.fr-find .clr[hidden]{display:none}
.fr-find .clr:hover{background:var(--chip);color:var(--ink)}
.fr-find .clr:focus-visible{outline:2px solid var(--ax);outline-offset:1px}
.fr-find .clr svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}

/* ---------- Done in the segmented control ---------- */
.seg-c .n{margin-left:6px;font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--subtle);transition:color .25s}
.seg-c button[aria-pressed="true"] .n{color:var(--ink-3)}

/* ---------- rows: meta line, comment count ---------- */
.idea-x{min-width:0}
.idea-m{display:flex;align-items:center;gap:14px;margin:7px 0 0;font-size:13px;line-height:1;color:var(--subtle)}
.cmt-n{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.cmt-n svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.list.busy{opacity:.5;transition:opacity .2s}
.list.still .idea{animation:none}

/* ---------- the done circle (Apple Reminders style) ---------- */
.idea.has-check{grid-template-columns:auto minmax(0,1fr) auto;align-items:start}
.idea.has-check .vpill{align-self:center}
.check{all:unset;position:relative;box-sizing:border-box;flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:var(--card);box-shadow:inset 0 0 0 1.5px var(--dot);transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .35s var(--ease)}
.check svg{width:72%;height:72%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.check svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .32s var(--ease) .04s}
button.check{cursor:pointer}
button.check::after{content:"";position:absolute;inset:-11px}
button.check:hover{box-shadow:inset 0 0 0 1.5px var(--icon-2)}
button.check:hover svg{opacity:1;color:var(--faint)}
button.check:hover svg path{stroke-dashoffset:0}
button.check:active{transform:scale(.88)}
button.check:focus-visible{outline:2px solid var(--ax);outline-offset:3px}
.check[aria-pressed="true"],.check.static{background:var(--subtle);box-shadow:none}
.check[aria-pressed="true"] svg,.check.static svg{opacity:1;color:var(--card)}
.check[aria-pressed="true"] svg path,.check.static svg path{stroke-dashoffset:0}
button.check[aria-pressed="true"]:hover{background:var(--icon-2)}
.check.pop{animation:pop .42s var(--ease)}
@keyframes pop{40%{transform:scale(1.18)}}

/* a done request: soft grey, thin line through the title, the votes quieter */
.idea.is-done .idea-t a{color:var(--subtle);font-weight:600;text-decoration:line-through;text-decoration-thickness:1px}
.idea.is-done .idea-d{color:var(--subtle)}
.idea.is-done .vpill{opacity:.55}

/* the row leaves its list: it holds a beat with the circle filled, then folds away */
.idea.settling{box-sizing:border-box;overflow:hidden;animation:none;transition:height .34s var(--ease),padding .34s var(--ease),opacity .28s,border-color .34s}
.idea.leaving{padding-top:0;padding-bottom:0;opacity:0;border-top-color:transparent}

/* the detail header */
.dh{--fs:clamp(32px,5vw,52px);--cs:calc(var(--fs) * .6);display:flex;align-items:flex-start;gap:clamp(12px,2vw,18px)}
.dh h1{min-width:0}
.dh .check{width:var(--cs);height:var(--cs);margin-top:calc((var(--fs) * 1.04 - var(--cs)) / 2)}
.dh.is-done h1{color:var(--subtle);text-decoration:line-through;text-decoration-thickness:max(1px,.022em)}

@media (prefers-reduced-motion:reduce){
  .check,.check svg,.check svg path,.idea.settling,.list.busy,.seg-c .n{transition:none}
  .check.pop{animation:none}
}

/* narrow phones: Top, New, Done and the request button share a line when they fit */
@media (max-width:440px){
  .fr-bar{gap:10px}
  .fr .seg-c button{padding:0 10px}
  .seg-c .n{margin-left:4px}
  #newBtn{flex:none;padding-left:12px;padding-right:12px}
}