/* feedback.css - the "Tell us" sheet drawn by feedback.js (Feedback F-1b part B). Tokens only, no colour of its own.
   A phone gets a bottom sheet over a dimmed page; from 600 px a centred panel. Text 16 px and up, targets 44 px, reflows at 320 px. */
.mec-fb-scrim{z-index:50}
.mec-fb{position:fixed;inset-inline:0;bottom:0;z-index:51;max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain;
  padding:var(--s-4) max(var(--gutter),var(--safe-r)) calc(var(--s-5) + var(--safe-b)) max(var(--gutter),var(--safe-l));
  border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--surface);color:var(--text);
  font-family:var(--font-ui);font-weight:400;box-shadow:var(--elev-sheet);animation:var(--k-in) var(--dur-std) var(--ease-enter) both}
@media (min-width:600px){
  .mec-fb{inset-inline:0;margin-inline:auto;bottom:auto;top:max(var(--s-5),6vh);max-height:calc(100vh - 2 * max(var(--s-5),6vh));max-height:calc(100dvh - 2 * max(var(--s-5),6vh));width:min(34rem,calc(100% - 2 * var(--gutter)));
    padding:var(--s-5);border:1px solid var(--edge);border-radius:var(--r-lg)}
}
.mec-fb h2{margin-bottom:var(--s-4)}
.mec-fb h2:focus{outline:none}
.mec-fb-opt{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);padding:var(--s-1) 0}
.mec-fb-opt input{flex:none;width:1.5rem;height:1.5rem;margin:0;accent-color:var(--brand-ink)}
.mec-fb-scores{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.mec-fb-num{flex:none;position:relative;gap:var(--s-2);padding:var(--s-1) var(--s-3);min-width:var(--tap);justify-content:center;border:1px solid var(--text-2);border-radius:var(--r-md)}
.mec-fb-num:has(input:checked){background:var(--tint);border:2px solid var(--brand-ink);padding:calc(var(--s-1) - 1px) calc(var(--s-3) - 1px);font-weight:700}
.mec-fb-num:has(input:focus-visible){outline:3px solid var(--brand-ink);outline-offset:2px}
.mec-fb-num input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0}
.mec-fb-clear{margin-top:var(--s-2)}
.mec-fb-words{margin-bottom:var(--s-3)}
.mec-fb-words .label{display:inline-block;margin-inline-end:var(--s-3)}
.mec-fb-count{float:inline-end}
.mec-fb-ta{display:block;clear:both;width:100%;box-sizing:border-box;min-height:7rem;margin-top:var(--s-2);padding:var(--s-3);font:inherit;font-size:var(--fs-body);color:var(--text);
  background:var(--bg);border:1px solid var(--text-2);border-radius:var(--r-md);resize:vertical}
.mec-fb-privacy{margin:0 0 var(--s-3)}
/* LK-39: while Sending, the box is read-only and Send is plainly off (looks only; the button keeps focus, so it is aria-disabled, not disabled) */
.mec-fb-ta[readonly]{background:var(--surface-2);color:var(--text-2)}
.mec-fb .btn[aria-disabled="true"]{background:var(--surface-2);color:var(--muted);border-color:var(--line);cursor:progress}
.mec-fb input[type=radio][aria-disabled="true"]{color:var(--muted);cursor:progress}
.mec-fb .mec-fb-opt:has(input[aria-disabled="true"]){color:var(--muted);cursor:progress}   /* its own rule: an engine without :has() would drop a shared list */   /* UX-3: the locked radios and their words look off like Send */
.mec-fb-msg{min-height:1.5rem;margin:0 0 var(--s-3);color:var(--text)}
.mec-fb-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-4)}
.mec-fb-thanks{margin-bottom:var(--s-4)}
.mec-fb-thanks-msg{margin:0 0 var(--s-3);font-weight:700}
.mec-fb-notes{margin-bottom:var(--s-4);border-top:1px solid var(--line);padding-top:var(--s-3)}
.mec-fb-list{list-style:none;margin:0;padding:0}
.mec-fb-nhead{margin:0 0 var(--s-2);font-size:var(--fs-body)}
.mec-fb-nhead:focus{outline:none}
.mec-fb-undo:not(:empty){margin-bottom:var(--s-2);position:sticky;top:0;z-index:1;padding-block:var(--s-2);background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 calc(-1 * var(--s-4)) 0 0 var(--surface)}   /* LK-47: stays in the scrollport while the list scrolls; the shadow (16 px) stays inside the 16 px gap above, so it never paints over Send (LK-49 review SA-1) */
.mec-fb-undo-btn{display:flex;width:100%;margin-bottom:var(--s-2)}
.mec-fb-note{padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.mec-fb-note[hidden]{display:none}
.mec-fb-note p{margin:0 0 var(--s-2);overflow-wrap:anywhere}
.mec-fb-note-head{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.mec-fb-tick{font-weight:700}
.mec-fb-draft{margin:0 0 var(--s-3)}
.mec-fb .mec-fb-done{display:block;width:100%;position:sticky;bottom:0;background:var(--surface);box-shadow:0 calc(-1 * var(--s-3)) 0 var(--surface)}
/* LK-34: from 600 px the panel is not a sheet, so Done is an ordinary last button (a sticky one drew over the privacy line when the panel scrolls) */
@media (min-width:600px){.mec-fb .mec-fb-done{position:static;box-shadow:none}}