/* bugreport.css — the Feedback dialog (wireframe 18b).
   Loaded by the two pages that have a rail; the stop itself is styled with
   the rail, in pages/trainer/skin-playful-shell.css. The dialog reuses
   .zoom/.zoom-panel from dialog.css and the .p- kit from playful.css; only
   what those do not cover lives here. Colors are tokens only (decision 0008).

   The floating .bugbtn this file used to own is gone: 18a moved the control
   into the rail, so the second layer for one button went with it. */

/* 520px, not 420 — 28a: "a five-line form doesn't need half the screen",
   and the four surviving rows want the width the chips row asks for. The
   ledge deepens to the frame's 8px; this card is the thing on top. */
.bugpanel{
  background:var(--play-card);color:var(--play-ink);
  border:2px solid var(--play-ink);border-radius:12px;
  /* --play-ink, not --play-edge: the ledge tracks the border, which is what
     both frames draw (28a #2a2520, 28b #f3ede3 — the same cream as its
     rule). --play-edge is pure black in dark, where an 8px black slab on a
     near-black backdrop is simply not there. */
  box-shadow:8px 8px 0 var(--play-ink);
  font-family:var(--play-display);
  max-width:520px;padding:16px 18px;
  /* .zoom-panel centres its contents; 18b's head was centred so it rode
     along, but 28a's is a left-aligned row — title over its reassurance
     line, both ranged left of the mascot. Opting out by class is what
     .av-card and .cs-card already do. The sent card re-centres itself. */
  text-align:left;
}

/* Head: the mascot, the title, the ✕ hard right — one row. The title used to
   sit above a second line of small caps, which left it optically neither
   aligned to the row nor centred in it (bhassa-feedback#12). With that line
   gone the row centres, and the mascot moves into the space it freed: the
   panel keeps its face without spending a whole row on it. */
.fb-head{
  display:flex;align-items:center;gap:10px;
}
.fb-headtext{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}
.fb-h{font-size:1.25rem;line-height:1.05;font-weight:400;min-width:0}
/* Who reads it, under the title — 28a splits the reassurance in two and
   puts this half here, the screenshot half down beside SEND. */
.fb-reach{font-size:.7rem;line-height:1.3;color:var(--play-mute)}
.fb-head .fb-tanu{flex:none}
.fb-x{
  width:28px;height:28px;flex:none;
  border:2px solid var(--play-ink);border-radius:50%;
  background:var(--play-card);color:var(--play-ink);
  font-size:.75rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
.fb-x:hover{background:var(--play-paper)}
.fb-x:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* The small caps label the board calls .tag. Devanagari is never uppercased
   (the cancel below), so the rule is paired at the point of use. */
.fb-tag{
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--play-mute);font-family:var(--play-display);
}
:root[lang="hi"] .fb-tag{text-transform:none;letter-spacing:0}

.fb-sentnote{margin:10px 0 0;font-size:.85rem;color:var(--play-ink)}

/* Chips instead of a <select> — 18b's whole point about the category. 28a
   takes the glyphs off and rounds them to the board's own .pill. */
.fb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fb-chip{
  border:2px solid var(--play-ink);border-radius:999px;
  background:var(--play-card);color:var(--play-ink);
  font-family:var(--play-display);font-size:.8125rem;padding:3px 12px;
  cursor:pointer;white-space:nowrap;
}
.fb-chip:hover{background:var(--play-paper)}
/* --play-accent-ink, never white: white on the ember is 2.80:1 (#158), and
   28b draws this same chip with dark ink on the fill for that reason. */
.fb-chip.is-on{
  background:var(--play-accent);color:var(--play-accent-ink);font-weight:700;
  box-shadow:0 3px 0 var(--play-edge);
}
.fb-chip:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.fb-chip[disabled]{cursor:default;opacity:.6}

/* One box, with its own footer rule. 28a: attach and which-screen are
   properties of what you are typing, not steps — so they live ON the
   textarea rather than as rows beneath it. */
.fb-box{
  margin-top:10px;border:2px solid var(--play-ink);border-radius:12px;
  background:var(--play-card);overflow:hidden;
}
/* --play-display-jp, not --play-display: the placeholder models Japanese
   input (き) and a report may carry it, and the plain display stack has no
   face with kana (#224). The border lives on .fb-box now. */
.bugpanel .fb-box textarea{
  display:block;width:100%;box-sizing:border-box;margin:0;border:0;border-radius:0;
  background:var(--play-card);color:var(--play-ink);
  padding:10px 12px 14px;font-size:.95rem;line-height:1.4;
  font-family:var(--play-display-jp);resize:vertical;min-height:76px;
}
.bugpanel .fb-box textarea::placeholder{color:var(--play-mute)}
.bugpanel .fb-box textarea:focus{outline:3px solid var(--play-link);outline-offset:-3px}

.fb-foot{
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  border-top:2px solid var(--play-track);background:var(--play-paper);
}
.fb-spacer{flex:1}
.fb-clip{
  width:24px;height:24px;flex:none;
  border:2px solid var(--play-ink);border-radius:50%;
  background:var(--play-card);color:var(--play-ink);
  font-size:.7rem;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.fb-clip:hover{background:var(--play-card)}
.fb-clip:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
/* The screen, pre-filled from where the dialog was opened and still a real
   <select> — 28a draws it as a pill, but the affordance stays native so a
   keyboard and a screen reader get the picker they already had. */
.fb-select{
  max-width:48%;min-width:0;min-height:26px;
  border:2px solid var(--play-ink);border-radius:999px;
  background:var(--play-card);color:var(--play-ink);
  font-family:var(--play-display);font-size:.7rem;padding:1px 8px;
  cursor:pointer;
}
.fb-select:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
/* The meter's replacement: a count, not a distance to a cap nobody reaches.
   It only takes the accent once the cap is genuinely close. */
.fb-words{font-size:.68rem;color:var(--play-mute);white-space:nowrap}
.fb-words.is-near{color:var(--play-link);font-weight:700}

.fb-send{
  display:block;width:100%;margin-top:10px;
  border:2px solid var(--play-ink);border-radius:14px;
  background:var(--play-accent);color:var(--play-accent-ink);
  box-shadow:0 4px 0 var(--play-edge);
  font-family:var(--play-display);font-weight:700;font-size:.95rem;
  padding:6px 20px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;
  transition:transform .06s ease,box-shadow .06s ease;
}
:root[lang="hi"] .fb-send{text-transform:none;letter-spacing:0}
.fb-send:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.fb-send:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
.fb-send:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

.fb-actions{display:flex;align-items:center;gap:12px;margin-top:12px}
.fb-actions .fb-send{width:auto;margin-top:0;flex:none}
.fb-note{font-size:.7rem;line-height:1.3;color:var(--play-mute);flex:1;min-width:0}

/* 28b: the sent state replaces the card rather than flashing over it, and
   gets the chest treatment the drills get. */
.fb-sent{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.fb-sent .fb-h{font-size:1.125rem;margin-top:8px}
.fb-sent .fb-sentnote{margin:2px 0 0;font-size:.7rem;color:var(--play-mute)}
.fb-reward{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:10px;padding-top:10px;width:100%;
  border-top:2px dashed var(--play-track);font-size:.875rem;
}
.fb-back{
  margin-top:10px;
  border:2px solid var(--play-ink);border-radius:14px;
  background:var(--play-card);color:var(--play-ink);
  font-family:var(--play-display);font-size:.75rem;padding:4px 14px;
  cursor:pointer;white-space:nowrap;
}
.fb-back:hover{background:var(--play-paper)}
.fb-back:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* Sending: fields are gone, not merely disabled — 18b shows a spinner card,
   and the draft is still in module state, so nothing is lost. */
.fb-busy{display:flex;align-items:center;gap:8px;margin-top:10px}
.fb-ring{
  width:34px;height:34px;flex:none;border-radius:50%;
  border:4px solid var(--play-track);
  border-top-color:var(--play-accent);border-right-color:var(--play-accent);
  animation:fb-spin .9s linear infinite;
}
@keyframes fb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .fb-ring{animation:none} }
.fb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* The attached screenshot, small: proof it took, not an editor. */
.bugshot{display:flex;align-items:center;gap:12px;margin-top:10px}
.bugshot img{
  max-width:120px;max-height:80px;border-radius:8px;
  border:2px solid var(--play-ink);object-fit:cover;
}

.bugpanel .err:not(:empty){
  margin-top:8px;padding:6px 10px;border-radius:10px;
  border:2px solid var(--bad);color:var(--bad);font-size:.8rem;
}