/* Player feedback (public/feedback-ui.js): the button, the "tap where the problem is" layer and the report form (<dialog>).
   Loaded after the paint (index.html template, data-pos 395: after the themes' screens, before ui-modern-a.css). Every rule is id-prefixed: the shared
   `button` / `dialog` / `.row` rules of style.css and the iso themes would win over a bare class (AGENTS.md 2026-10-02). Paint rules say :enabled so a disabled
   button falls through to the shared disabled look (test/disabled-button-look.test.mjs).

   Where the button sits: it is a key of the left rail (#quick-dock, index.html), on phones and on desktop alike (2026-11-06). A loose corner button sat on the chat's
   send button on phones; as a rail key it takes the rail's size, paint, caption and its hiding (sheet, action card, Istanbul card, placement bar, "bar-overflow"),
   and the rail's own layout keeps it clear of every other HUD item. style.css's `#quick-dock > :not(...)` whitelist hides every key it does not name, so the
   rule below is one id stronger (2 ids + :not([hidden])) and names this key; feedback-ui.js sync() decides `hidden`. */
#quick-dock > #feedback-btn:not([hidden]) { display: flex; align-items: center; justify-content: center; touch-action: manipulation; }
body:has(:is(#intro, #away, #help, #whats-new):not([hidden])) #feedback-btn { visibility: hidden; }
html.walk-mode :is(#feedback-btn, #feedback-mark) { display: none !important; }

/* Marking layer: dims the screen a little, takes the tap. The screenshot comes from the canvas, so the dim never shows in it. */
#feedback-mark { position: fixed; inset: 0; z-index: var(--z-info, 30); background: rgba(12, 9, 6, .3); cursor: crosshair; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#feedback-mark[hidden] { display: none; }
#feedback-banner { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); box-sizing: border-box;
  width: min(520px, calc(100vw - 20px)); padding: 10px 12px 12px; border-radius: 14px; text-align: center; cursor: var(--cursor, default);
  background: var(--surface); color: var(--ink); border: 1px solid var(--border-soft, var(--border)); box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
#feedback-banner p { margin: 0 0 8px; font-weight: 700; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
#feedback-banner .fb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#feedback-banner button { flex: 1 1 auto; box-sizing: border-box; min-width: 44px; min-height: 44px; max-width: 100%; margin: 0; padding: 6px 14px;
  font: 600 14px/1.25 var(--font-body, inherit); white-space: normal; overflow-wrap: anywhere; border-radius: 10px; }
#feedback-banner button:enabled { border: 1px solid var(--border); border-image: none; background: var(--surface-raised, var(--surface)); color: var(--ink); box-shadow: none; }
@media (hover: hover) { #feedback-banner button:enabled:hover { background: var(--surface-selected, var(--surface-raised)); } }

/* The form. On a phone it fits above the keyboard (mobile-ui.js publishes --visible-h / --visible-top). Three rows in a column: the title, the body (.fb-body, the only
   scrolling part) and the button row. The button row is a flex item OUTSIDE the scroll area, not a sticky child of it: on a short phone the body scrolled under a
   sticky row and showed through the translucent theme surface (360x640, 2026-11-06). Dialog and row use --a-solid (ui-modern-a.css: the glass without alpha, the
   map text behind a translucent form made it unreadable); the other themes' --surface is opaque already. The dialog says display:flex only while [open] or it would never close. */
#feedback-dialog { box-sizing: border-box; width: min(460px, calc(100vw - 24px)); max-height: calc(var(--visible-h, 100dvh) - 24px); margin: auto; padding: 0;
  overflow: hidden; background: var(--a-solid, var(--surface)); color: var(--ink); border: 1px solid var(--border-soft, var(--border)); border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-modal); }
#feedback-dialog[open], #feedback-form { display: flex; flex-direction: column; }
#feedback-dialog[open] { min-height: 0; }
#feedback-form { flex: 1 1 auto; min-height: 0; max-height: inherit; margin: 0; }
#feedback-dialog .fb-body { flex: 1 1 auto; min-height: 0; padding: 0 18px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.keyboard-open #feedback-dialog { top: calc(var(--visible-top, 0px) + 8px); bottom: auto; margin: 0 auto; max-height: calc(var(--visible-h, 100dvh) - 16px); }
#feedback-dialog h2 { flex: none; margin: 0; padding: 18px 18px 8px; font-family: var(--font-display); font-size: 20px; overflow-wrap: anywhere; }
#feedback-dialog label { display: block; margin: 12px 0; font-weight: 600; overflow-wrap: anywhere; }
#feedback-dialog :is(select, textarea) { display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin-top: 6px; padding: 10px; font: inherit; font-size: max(16px, 1rem); }
#feedback-dialog textarea { min-height: 7.5em; max-height: 40dvh; resize: vertical; }
@media (max-height: 700px) { #feedback-dialog textarea { min-height: 5em; } }
#feedback-dialog .fb-count { display: block; margin-top: 4px; text-align: right; font-size: 12px; font-weight: 400; color: var(--muted); }
#feedback-dialog .fb-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0; cursor: var(--cursor-pointer, pointer); }
#feedback-dialog .fb-check input { flex: none; width: 22px; height: 22px; min-width: 0; min-height: 0; margin: 0; }
#feedback-dialog .fb-preview { position: relative; display: block; width: fit-content; max-width: 100%; margin: 4px auto 0; line-height: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border-soft, var(--border)); background: #000; }
#feedback-dialog .fb-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: 30dvh; }
@media (max-height: 700px) { #feedback-dialog .fb-preview img { max-height: 24dvh; } }
#feedback-dialog .fb-preview i { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; background: #e5484d;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); pointer-events: none; }
#feedback-dialog .fb-preview i[hidden] { display: none; }
#feedback-dialog .fb-note { margin: 8px 0; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
#feedback-dialog .fb-info { margin: 12px 0; }
#feedback-dialog .fb-info summary { cursor: var(--cursor-pointer, pointer); font-weight: 600; }
#feedback-info-json { max-height: 9em; margin: 6px 0 0; padding: 8px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 8px;
  font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--surface-inset, rgba(0, 0, 0, .06)); }
#feedback-dialog .fb-actions { flex: none; display: flex; gap: 8px; margin: 0; padding: 10px 18px 14px; background: var(--a-solid, var(--surface));
  border-top: 1px solid var(--border-soft, var(--border)); }
#feedback-dialog .fb-actions button { flex: 1 1 0; min-width: 0; margin: 0; overflow-wrap: anywhere; }