/* 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;
}
.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);
}