/* TrueGlass V4 — the feedback box (H1-5): js/feedback.js's "Send
   feedback" button, its status line and its modal dialog. Linked after
   the page's own CSS by Your slabs, Settings and the camera page (and
   usable by the owner view): every rule is scoped to a feedback- class,
   so nothing else on a page changes. Tokens are v4.css's (and, on the
   camera page, seal-capture.css's dark-surface ones); no inline style
   anywhere (the pages run under a CSP without 'unsafe-inline'). Motion
   is a colour transition only, which v4.css's reduced-motion rule
   switches off. */

/* ── the entry: the button and the status line under it ─────────────── */
.feedback-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin-top: 32px;
  text-align: center;
}
.feedback-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--tg-border);
  border-radius: 999px;
  background: var(--tg-surface);
  color: var(--tg-ink);
  font: 500 0.9375rem/1.2 var(--tg-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--tg-productive) var(--tg-ease), border-color var(--tg-productive) var(--tg-ease);
}
.feedback-open:active { background: var(--tg-g10); }
.feedback-status {
  max-width: 34em;
  margin: 8px 0 0;
  color: var(--tg-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.feedback-status:empty { margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .feedback-open:hover { border-color: var(--tg-accent-light); background: var(--tg-accent-tint); color: var(--tg-accent-ink); }
}

/* the camera page: under the camera-off note, on the dark surface (the
   --cap- tokens are seal-capture.css's, set on the sealing #main). The
   "Open camera" disc rises half its height into the grid row under the
   note, and on a short screen that row shrinks to its 16 px minimum
   (seal-capture.css), so the entry keeps the disc's upper half clear
   below itself: the row's 16 px is then the least gap between the
   entry, its status line included, and the disc. */
.feedback-on-dark { margin-top: 16px; margin-bottom: calc(var(--cap-shutter, 84px) / 2); }
.feedback-on-dark .feedback-open {
  border-color: var(--cap-line, rgba(255, 255, 255, 0.24));
  background: var(--cap-glass, rgba(22, 22, 22, 0.62));
  color: var(--cap-ink, #FFFFFF);
  font-size: 0.875rem;
}
.feedback-on-dark .feedback-open:active { background: rgba(255, 255, 255, 0.16); }
.feedback-on-dark .feedback-open:focus-visible { outline-color: var(--tg-accent-light); box-shadow: none; }
.feedback-on-dark .feedback-status { color: var(--cap-soft, rgba(255, 255, 255, 0.76)); }
@media (hover: hover) and (pointer: fine) {
  .feedback-on-dark .feedback-open:hover {
    border-color: var(--tg-accent-light);
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
  }
}

/* ── the dialog: a light card in the middle of the screen ───────────── */
.feedback-dialog {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 480px;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 20px 20px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--tg-border);
  border-radius: 16px;
  background: var(--tg-surface);
  color: var(--tg-ink);
  font-family: var(--tg-font);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 12px 32px rgba(22, 22, 22, 0.24);
}
.feedback-dialog::backdrop { background: rgba(22, 22, 22, 0.48); }
.feedback-title {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}
.feedback-label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.feedback-note {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 132px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--tg-g50);
  border-radius: 12px;
  background: var(--tg-surface);
  color: var(--tg-ink);
  font: 400 1rem/1.5 var(--tg-font);
  resize: vertical;
}
.feedback-note:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: 1px; box-shadow: none; }
.feedback-note[readonly] { background: var(--tg-g10); }
.feedback-privacy {
  margin: 8px 0 0;
  color: var(--tg-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.feedback-error {
  margin: 10px 0 0;
  color: var(--tg-danger);
  font-size: 0.875rem;
  font-weight: 500;
}
.feedback-error:empty { margin: 0; }
.feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.feedback-btn {
  display: inline-flex;
  flex: 1 1 120px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: 500 1rem/1.25 var(--tg-font);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--tg-productive) var(--tg-ease);
}
.feedback-btn-primary { background: var(--tg-accent); color: #FFFFFF; }
.feedback-btn-secondary { background: var(--tg-accent-tint); color: var(--tg-accent-ink); }
.feedback-btn[aria-disabled="true"] {
  border-color: var(--tg-border);
  background: var(--tg-g10);
  color: var(--tg-faint);
  cursor: not-allowed;
}
.feedback-dialog[aria-busy="true"] .feedback-btn-primary { cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .feedback-btn-primary:not([aria-disabled="true"]):hover { background: var(--tg-accent-ink); }
  .feedback-btn-secondary:not([aria-disabled="true"]):hover { border-color: var(--tg-accent-light); }
}

@media (forced-colors: active) {
  .feedback-open, .feedback-btn { border: 1px solid ButtonText; }
}
@media print {
  .feedback-entry, .feedback-dialog { display: none; }
}