/* css/hint.css — the "?" beside a label and its panel, and where .disclosure stood.
   One of the files src/index.html links in order; see tokens.css for why. */

/* ==========================================================================
   The "?" beside a label — statute and concepts, on demand
   ==========================================================================
   A 24x24 target (2.5.8 again), a real button, and a ring like everything else.
   Closed by default: the explanation is available to the person who wants it
   and invisible to the person filing her ninth submission.
   ========================================================================== */
.hint-toggle{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;
  /* ---- ALIGNMENT AND SPACING BELONG TO THE BUTTON, NOT TO ITS HOLDER ------
     This has now shipped wrong twice, and both times because the correction was
     made on whatever container happened to be in front of somebody. The button
     is dropped in three different shapes of parent and only one of them is a
     flex row that can align and space it:

       field()       — a flex `.field-label-row` beside the <label>   (was fine)
       `.hinted-label` — a flex inline row                            (was fine)
       choiceGroup() — INSIDE the <legend>, which must stay the first
                       child of its fieldset and so cannot be wrapped
       any heading   — e.g. the roster's `<h2>5 people</h2>`

     The last two are ordinary inline context, and there the button had neither
     property applied to it: no gap, so it touched the final letter, and no
     vertical-align, so it sat on the text baseline — a 24px box hanging below
     the line rather than centred on it. That is the same defect as the "~10px
     low" one already fixed once, and it came back because that fix was made on
     a screen instead of here.

     So both properties live here and apply everywhere:
       vertical-align centres the box on the x-height of whatever text it
         follows, at any font size. It is ignored on a flex item, which is why
         the two flex parents are unaffected;
       margin-inline-start is the clear space. Both flex parents therefore drop
         their column-gap — the spacing is stated once, here, and a parent that
         wants a "?" no longer has to know anything about it. */
  vertical-align:middle;
  margin-inline-start:.4rem;
  font-family:var(--data);font-size:.8125rem;font-weight:600;line-height:1;
  color:var(--ink-soft);background:var(--field);
  border:1.5px solid var(--rule-strong);border-radius:50%;
  cursor:pointer;
}
.hint-toggle:hover{color:var(--ink);border-color:var(--ink)}
.hint-toggle[aria-expanded="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink)}

.hint-panel{
  margin:.35rem 0 .5rem;padding:.6rem .75rem;
  background:var(--paper);
  border:1px solid var(--rule-strong);border-radius:var(--r-sm);
  font-family:var(--legible);font-size:.875rem;line-height:1.55;color:var(--ink);
}
/* A statute inside a hint keeps its rule and its citation but drops the outer
   margin — the panel already provides the inset. */
.hint-panel .statute{margin:0;padding-left:.75rem}
.hint-panel > :first-child{margin-top:0}
.hint-panel > :last-child{margin-bottom:0}
/* [hidden] must actually hide. A display rule elsewhere in a stylesheet beats
   the UA default, and this one has a display rule elsewhere. */
.hint-panel[hidden]{display:none}

/* The non-field form: a heading or a row with its own "?" beside it. */
.hinted-label{display:inline-flex;align-items:center;font-weight:600}

/* ==========================================================================
   .disclosure STOOD HERE AND IS GONE — CIT-3
   ==========================================================================
   Four rules for the closed-by-default <details> that held the audit trail on a
   submission's own page. That card was removed and disclosure() went with it —
   see the note in ui/components.js — so this is markup that can no longer be
   produced. Deleted with its component, like the `table.stacks` rules and
   .file-preview before it, because CSS with nothing behind it is what a later
   reader preserves out of caution forever.

   The "?" every screen uses is hint(), which is a button and a panel rather than
   <details>; its rules are above and are untouched.
   ========================================================================== */