/* The report overlay and its trigger.

   NO COMPONENT RULE BELOW NAMES A COLOR DIRECTLY. Every one goes through the
   --kcr-* layer defined underneath this comment, which resolves to the site's
   own tokens where they exist and falls back where they do not. See that block
   for why: this overlay appears on pages with three different palettes.

   The trigger is quiet by default and becomes visible on hover or on keyboard
   focus anywhere in its card. It is NEVER display:none and never removed: an
   affordance that only exists on hover does not exist for a screen reader or
   for anybody navigating by keyboard, and this is the control people use to
   tell us something is wrong. */

/* ---------------------------------------------------------------------------
   A SELF-SUFFICIENT COLOR LAYER, because this overlay is not on one page.

   The first draft styled straight off --wt-* from cdo-watchtower.css. That is
   correct on the poster, song and gallery pages and BROKEN on /wall/, which
   loads no watchtower stylesheet at all and carries its own smaller token set
   (--bg / --panel / --ink / --muted / --line / --green). Every var() would have
   resolved to nothing there: transparent panels, inherited text, an invisible
   dialog. Caught before shipping by diffing the tokens the page defines against
   the tokens this file asks for.

   So each color is a CHAIN, most specific first:
     the site's watchtower token  ->  the page's own token  ->  a literal

   A page with watchtower gets the exact audited site colors. /wall/ gets its
   own palette, including its own dark mode, because its tokens are already
   theme-aware. A page with neither still renders correctly from the literals,
   and the media query below swaps only those literals so that last-resort case
   is dark-correct too. Where an earlier token in a chain exists it wins, so no
   theme is ever handled twice. */
:root{
  --kcr-ink:         var(--wt-ink, var(--ink, #14201c));
  --kcr-ink-soft:    var(--wt-ink-soft, var(--muted, #3d4f48));
  --kcr-ink-quiet:   var(--wt-ink-quiet, var(--muted, #61736b));
  --kcr-surface:     var(--wt-surface, var(--panel, #ffffff));
  --kcr-card:        var(--wt-card-bg, var(--panel, #ffffff));
  --kcr-rule:        var(--wt-rule, var(--line, #d3ded8));
  --kcr-rule-strong: var(--wt-rule-strong, var(--ink, #283a31));
  --kcr-field:       var(--wt-field-border, var(--line, #767d73));
  --kcr-accent:      var(--wt-accent, var(--green, #2c5f4e));
  --kcr-link:        var(--wt-link, var(--green, #2c5f4e));
  --kcr-link-hover:  var(--wt-link-hover, var(--green-2, #1f4638));
  --kcr-chip:        var(--wt-chip-bg, var(--line, #ede7da));
  --kcr-chip-ink:    var(--wt-chip-ink, var(--ink, #34403a));
  --kcr-eyebrow:     var(--wt-eyebrow, var(--muted, #5f6a60));
}
@media (prefers-color-scheme: dark){
  :root{
    --kcr-ink:         var(--wt-ink, var(--ink, #e7eee9));
    --kcr-ink-soft:    var(--wt-ink-soft, var(--muted, #c0cdc6));
    --kcr-ink-quiet:   var(--wt-ink-quiet, var(--muted, #93a49c));
    --kcr-surface:     var(--wt-surface, var(--panel, #181f1b));
    --kcr-card:        var(--wt-card-bg, var(--panel, #1a201d));
    --kcr-rule:        var(--wt-rule, var(--line, #2c3831));
    --kcr-rule-strong: var(--wt-rule-strong, var(--ink, #b9c7c0));
    --kcr-field:       var(--wt-field-border, var(--line, #7d8b84));
    --kcr-accent:      var(--wt-accent, var(--green, #7cc3a5));
    --kcr-link:        var(--wt-link, var(--green, #7cc3a5));
    --kcr-link-hover:  var(--wt-link-hover, var(--green-2, #a6dcc4));
    --kcr-chip:        var(--wt-chip-bg, var(--line, #1e2f28));
    --kcr-chip-ink:    var(--wt-chip-ink, var(--ink, #d7e4de));
    --kcr-eyebrow:     var(--wt-eyebrow, var(--muted, #9aa89f));
  }
}

/* ---------- the trigger ---------- */
.kc-report-trigger {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 8px;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--kcr-ink-quiet);
  cursor: pointer;
  border-radius: 4px;

  /* QUIET IS A COLOR CHOICE HERE, NOT AN OPACITY, and that is a correction.

     This rule used to carry opacity: 0.55, with a comment claiming the control
     "always meets its contrast floor". The comment was wrong. Opacity composites
     the text toward whatever is behind it, so the ratio a person actually sees
     is the BLENDED color against the page, not the token's own:

       light  #5f6a60 at 0.55 over #fffdf9  ->  #a7aca5   2.27:1   fails AA
       dark   #93a093 at 0.55 over #1e2522  ->  #5e6960   2.73:1   fails AA

     Measured, not eyeballed. AA for normal text is 4.5:1, so the affordance
     people use to tell us something is wrong was the least legible thing on the
     card, and it failed in BOTH themes.

     Dropping the opacity fixes it and loses nothing: --kcr-ink-quiet is already
     a muted grey-green chosen to recede, and at full strength it measures

       light  #5f6a60 on #fffdf9   5.56:1   PASS
       dark   #93a093 on #1e2522   5.73:1   PASS

     The louder state is still louder, because hover and focus change the COLOR
     to full ink and add a chip background (11.07:1 light, 10.22:1 dark). */
  transition: color 140ms ease, background-color 140ms ease;
}
.kc-report-trigger:hover,
.kc-report-trigger:focus-visible,
:hover > .kc-report-trigger,
:focus-within > .kc-report-trigger {
  color: var(--kcr-ink);
  background: var(--kcr-chip);
}
.kc-report-trigger:focus-visible {
  outline: 3px solid var(--kcr-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .kc-report-trigger { transition: none; }
}

/* ---------- the dialog ---------- */
dialog.kc-report {
  padding: 0;
  border: 1px solid var(--kcr-rule);
  border-radius: 12px;
  background: var(--kcr-surface);
  color: var(--kcr-ink);
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.4);
}
dialog.kc-report::backdrop {
  background: rgba(12, 18, 15, 0.55);
  backdrop-filter: blur(2px);
}
.kc-report__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 20px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

.kc-report__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.kc-report__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--kcr-ink);
  text-wrap: balance;
}
/* The heading takes focus on open so a screen reader announces the dialog by
   name. It is not an interactive control, so it gets no focus ring. */
.kc-report__title:focus { outline: none; }

.kc-report__x {
  appearance: none;
  background: none;
  border: 0;
  font-size: 1.7rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  color: var(--kcr-ink-quiet);
  border-radius: 4px;
  flex: none;
}
.kc-report__x:hover { color: var(--kcr-ink); }
.kc-report__x:focus-visible { outline: 3px solid var(--kcr-accent); outline-offset: 2px; }

.kc-report__lede {
  margin: 0;
  color: var(--kcr-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ---------- reasons ---------- */
.kc-report__reasons {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.kc-report__legend {
  padding: 0;
  margin: 0 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kcr-eyebrow);
}
.kc-report__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.35;
}
.kc-report__opt:hover { background: var(--kcr-chip); }
.kc-report__opt input {
  width: 18px;
  height: 18px;
  accent-color: var(--kcr-accent);
  flex: none;
  margin: 0;
}
/* The ring goes on the LABEL so the whole row is visibly focused, which is what
   a person tabbing through eight options actually needs to see. */
.kc-report__opt:has(input:focus-visible) {
  outline: 3px solid var(--kcr-accent);
  outline-offset: 1px;
  background: var(--kcr-chip);
}

/* ---------- crisis block ---------- */
.kc-report__crisis {
  border-left: 4px solid var(--kcr-accent);
  background: var(--kcr-chip);
  color: var(--kcr-ink);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  display: grid;
  gap: 6px;
}
.kc-report__crisis strong { font-size: 0.92rem; line-height: 1.35; }
.kc-report__crisis p { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.kc-report__crisis-link {
  font-size: 0.9rem;
  color: var(--kcr-link);
  font-weight: 600;
  justify-self: start;
}
.kc-report__crisis-link:focus-visible { outline: 3px solid var(--kcr-accent); outline-offset: 2px; }

/* ---------- context field ---------- */
.kc-report__more { display: grid; gap: 6px; }
.kc-report__more-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--kcr-ink);
  display: grid;
  gap: 2px;
}
.kc-report__hint {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--kcr-ink-quiet);
}
.kc-report__more textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--kcr-field);
  background: var(--kcr-card);
  color: var(--kcr-ink);
  resize: vertical;
  min-height: 84px;
}
.kc-report__more textarea:focus-visible {
  outline: 3px solid var(--kcr-accent);
  outline-offset: 1px;
  border-color: var(--kcr-accent);
}

/* ---------- how to reach them ----------
   Shown only to somebody with no account. Styled like the context field above
   it rather than set apart, because it is one more optional thing they may tell
   us, not a signup. Nothing here is emphasised, there is no checkbox, and no
   button says "subscribe". */
.kc-report__email { display: grid; gap: 6px; }
.kc-report__email input {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--kcr-field);
  background: var(--kcr-card);
  color: var(--kcr-ink);
}
.kc-report__email input:focus-visible {
  outline: 3px solid var(--kcr-accent);
  outline-offset: 1px;
  border-color: var(--kcr-accent);
}

/* ---------- errors ----------
   Carries an icon-free but explicit label plus color, never color alone. */
.kc-report__err {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid currentColor;
  background: var(--kcr-chip);
  color: var(--kcr-link-hover);
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 600;
}

/* ---------- actions ---------- */
.kc-report__acts {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.kc-report__cancel {
  background: none;
  border: 1.5px solid var(--kcr-rule-strong);
  color: var(--kcr-ink);
}
.kc-report__acts .kc-btn[disabled] { opacity: 0.6; cursor: default; }

/* ---------- confirmation ---------- */
.kc-report__done { display: grid; gap: 8px; }
.kc-report__done-h {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--kcr-ink);
}
.kc-report__done p {
  margin: 0;
  color: var(--kcr-ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}

@media (max-width: 30rem) {
  .kc-report__form { padding: 18px 16px 16px; }
  .kc-report__acts { justify-content: stretch; }
  .kc-report__acts .kc-btn { flex: 1 1 auto; }
}

/* ---------- the flag glyph centres ITSELF ----------
   Kaʻo, twice: "flag in circle needs to move to right to be visually centered",
   then "this one is way left. Same icon everywhere."

   The first fix was a CSS transform on .kc-flagbtn svg, and it was the wrong
   layer. Two things gave it away. It only worked where kc-report.css is loaded,
   so the game page, which does not load it, kept the worst version of all; and
   a transform stacked on top of a glyph that is already drawn off-centre is two
   numbers to keep in step instead of one.

   So the PATH is centred now, in every file that draws it. The ink used to span
   x=5 to 15.5 in a 24-unit viewBox (centre of mass 10.25, box centre 12); it
   now spans 7.6 to 17.4, centre 12.5. Half a unit right of geometric centre on
   purpose: the pole is a thin full-height line and the pennant is a solid mass
   at the top, so the eye weights the pennant and a geometrically centred flag
   still reads left. Optical centring is not geometric centring.

   No transform anywhere. One glyph, one definition, identical on every surface
   whether or not this stylesheet is present. */