/* report.css — styles for report.js, the v1 "Report a problem" widget.
 *
 * ⚠️ STANDALONE ON PURPOSE. Every colour/size/radius below reads a proto.css
 * design token (docs/ПРОТОТИП-V1/assets/proto.css → shell.css, --wood,
 * --brass, --bone, --tap, --card…) with a literal fallback value, so this
 * widget looks right whether or not the v1 shell's tokens are loaded yet —
 * var(--brass, #C9A227) uses the shell's brass once it exists and the same
 * brass hard-coded until then. Every class is prefixed `v1report-` so
 * nothing here can collide with the shell's own `.sheet`/`.btn`/`.toast`
 * (proto.css already defines those names for a different, larger set of
 * components) or with the old site's `style.css`.
 *
 * ⛔ ONE RED RULE (proto.css's own `.btn-red` comment, D4 locked 15): a
 * screen shows at most one red control, and it is never this one — sending
 * a report ends nothing and confirms nothing destructive. The tab and the
 * Send button use brass/wood, matching the old site's report-tab.js
 * ("brass on wood... this is not the colour of the thing that ends
 * something").
 */

/* ── the trigger: a fixed side tab when the shell has no slot ────────────
 * B12 finding #3 (BLOCKER, 2026-09-24): this used to be a TALL vertical
 * strip (writing-mode:vertical-rl) pinned at top:50% — ~122px high, dead
 * centre of the viewport, on every v1 screen. At 390/768 it physically sat
 * on top of real content underneath: door's 4th "Sign in to sit" button,
 * signin's password-rule paragraph, pricing's "Terms" link, table's feed
 * text. A first attempt shrank it to a single-row TEXT pill instead of a
 * column — still not enough: a measured sweep (v1report-tab-position-
 * test.mjs) found door.html at 390 has under 20px of clear space between
 * the nearest button and the footer, less than one 44px touch target, so
 * ANY visible-sentence shape collided with one or the other in that
 * corner. The fix that actually clears every tested spot is a fixed
 * 44×44 ICON in the bottom-right corner (report.js draws a flag glyph for
 * this fixed-tab variant; the full sentence moves to aria-label, still the
 * accessible name a screen reader announces). `right:0` stays exactly as
 * report-problem-test.mjs §2 already asserts ("welded to the right edge",
 * `right<=1`) — only `top`→`bottom`, and the shape, changed. */
.v1report-tab{
  position:fixed;
  right:0; top:auto; left:auto;
  /* env() with the 0 fallback already covers browsers with no notch —
   * border-box (shell.css's `*` reset) means width/height below already
   * include the border, so this shift keeps the box exactly 44×44 on
   * every phone, notched or not, rather than growing it. */
  bottom:env(safe-area-inset-bottom, 0);
  transform:none;
  z-index:40;
  /* A COMPACT ICON, not a sentence-strip — see header above for why. Fixed
   * 44×44 (not min-width/min-height growing with content): report.js sets
   * this variant's textContent to a single glyph, so the box never grows
   * past the touch-target floor in any of the three languages. A pill wide
   * enough for "Report a problem" (or its longer uk/ru translations) had
   * no corner on a 390px phone that cleared both a nearby button and the
   * footer at once — v1report-tab-position-test.mjs's own sweep found the
   * gap between them is under 20px, less than one 44px touch target. */
  width:var(--tap, 44px); height:var(--tap, 44px);
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--wood-3, #2C211A);
  border:1px solid var(--brass-2, #A08320);
  border-right:0; border-bottom:0;
  border-radius:var(--card, 5px) 0 0 0;
  color:var(--brass, #C9A227);
  font:400 20px/1 Lato, system-ui, sans-serif;
  cursor:pointer;
  box-shadow:var(--lift, 0 1px 2px rgba(0,0,0,.5), 0 10px 24px -14px rgba(0,0,0,.95));
}
.v1report-tab:hover{ background:var(--wood-4, #3A2C22); color:var(--bone, #EFE7D8); }
.v1report-tab:focus-visible{ outline:3px solid var(--brass, #C9A227); outline-offset:2px; }

/* When the v1 shell provides its own #report-problem slot, the trigger is an
   ordinary in-flow control the shell positions — no fixed/rotated styling,
   the shell's own layout decides where this sits. */
.v1report-slot-btn{
  min-width:var(--tap, 44px); min-height:var(--tap, 44px);
  padding:8px 16px; /* V1-REDS-1/item1: was 8px 14px — 14 is off the 8px grid */
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--wood-3, #2C211A);
  border:1px solid var(--edge, #3E2F24);
  border-radius:var(--card, 5px);
  color:var(--bone, #EFE7D8);
  font:600 15px/1.2 Lato, system-ui, sans-serif;
  cursor:pointer;
}
.v1report-slot-btn:hover{ background:var(--wood-4, #3A2C22); }
.v1report-slot-btn:focus-visible{ outline:3px solid var(--brass, #C9A227); outline-offset:2px; }

@media (prefers-reduced-motion: no-preference){
  .v1report-tab, .v1report-slot-btn{ transition:background-color .15s ease; }
}

/* ── the sheet: bottom sheet on phone, centred card from 768 up (proto.css's
   own .sheet-back/.sheet breakpoint, mirrored here under our own names) ─── */
.v1report-back{
  position:fixed; inset:0; z-index:70;
  background:rgba(8,5,3,.72);
  display:flex; align-items:flex-end; justify-content:center;
}
@media (min-width:768px){ .v1report-back{ align-items:center; } }

.v1report-sheet{
  width:100%; max-width:460px;
  background:var(--wood-2, #221913);
  border:1px solid var(--edge, #3E2F24);
  border-radius:var(--card, 5px) var(--card, 5px) 0 0;
  padding:18px 16px 22px;
  box-shadow:var(--lift, 0 1px 2px rgba(0,0,0,.5), 0 10px 24px -14px rgba(0,0,0,.95));
}
@media (min-width:768px){ .v1report-sheet{ border-radius:var(--card, 5px); } }
.v1report-sheet h3{
  margin:0 0 10px; font:700 17px/1.25 Bitter, Georgia, serif; color:var(--bone, #EFE7D8);
}

.v1report-textarea{
  width:100%; min-height:100px; padding:10px 12px;
  background:#140E0B; color:var(--bone, #EFE7D8);
  border:1px solid var(--edge, #3E2F24); border-radius:var(--card, 5px);
  font:16px/1.4 Lato, system-ui, sans-serif;
  resize:vertical;
}
.v1report-textarea:focus-visible{ outline:3px solid var(--brass, #C9A227); outline-offset:2px; }

.v1report-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.v1report-note{
  min-height:1.3em; margin:8px 0 0; font-size:14px; color:var(--blood-lit, #E0787C);
}
.v1report-link{
  color:var(--brass, #C9A227); text-underline-offset:3px; cursor:pointer;
  display:inline-flex; align-items:center; min-height:var(--tap, 44px);
}

.v1report-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.v1report-btn{
  min-height:var(--tap, 44px); padding:8px 16px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--wood-3, #2C211A); border:1px solid var(--edge, #3E2F24);
  border-radius:var(--card, 5px); color:var(--bone, #EFE7D8);
  font:600 15px/1.2 Lato, system-ui, sans-serif; cursor:pointer;
}
/* FIX-CORE-FLOWS batch 2 (25.09.2026) — found live: report.js used to set
   `send.hidden = true` for a signed-out guest, and the button stayed on
   screen anyway, fully visible, with no label — an empty brass square next
   to "Close". `display:inline-flex` above is an AUTHOR rule; the browser's
   own `[hidden]{display:none}` lives in the UA stylesheet, which loses a
   tie in specificity to any author rule touching the same property, so the
   `hidden` attribute was silently doing nothing on this class. report.js no
   longer hides this button at all (a guest gets the same form as everyone
   else now), but the underlying trap stays fixed here too, defensively —
   the next `hidden` toggle on a `.v1report-btn` must not regress the same
   way twice. */
.v1report-btn[hidden]{ display:none; }
.v1report-btn:hover{ background:var(--wood-4, #3A2C22); }
.v1report-btn:disabled{ opacity:.5; cursor:default; }
.v1report-btn-primary{
  background:var(--brass-dim, #332912); border-color:var(--brass-2, #A08320); color:var(--brass, #C9A227);
}
.v1report-btn-primary:hover{ background:var(--brass-2, #A08320); color:#1A1310; }
.v1report-btn:focus-visible{ outline:3px solid var(--brass, #C9A227); outline-offset:2px; }

/* ── the toast: same shape as proto.css's own .toast, own class ──────────── */
.v1report-toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:80; max-width:min(92vw, 420px);
  background:var(--wood-3, #2C211A);
  border:1px solid var(--brass-2, #A08320);
  border-radius:var(--card, 5px);
  padding:12px 16px;
  color:var(--bone, #EFE7D8);
  font:15px/1.4 Lato, system-ui, sans-serif;
  box-shadow:var(--lift, 0 1px 2px rgba(0,0,0,.5), 0 10px 24px -14px rgba(0,0,0,.95));
  margin-bottom:env(safe-area-inset-bottom, 0);
}