/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC TOOLS — the frame sheet (IMP-011, 04/11/2026).

   Two things share this file, on top of the two sheets every public page loads
   (imp-foundation.css tokens, imp-brand.css components):

     .tool-*   /tools, the index of the tools: the tool card and the block of news
     .util-*   the narrow utility pages (/my-nfc, the NFC landing): the column, the
               page title, the form, the hint, the help line, the glyph

   Tokens only: not one colour is typed in this file — a tint is a color-mix() of a
   token. The tool PAGES do not use this file: since round 2 they are the painel's
   templates in public mode and wear its shell. Motion is colour only; the
   reduce-motion floor in imp-foundation.css already stops every animation and
   transition written here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The cards on /tools ─────────────────────────────────────────────────────
   A flex column: the way in (`.more`, margin-top:auto) sits at the foot of every
   card in a row, whatever the lines above it hold. (The brand's `.card` is a grid
   with `align-content: start`, where an auto margin does nothing.) The status is
   the brand's own `.status`, written in words with a dot: never only a colour. */
.tool { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.tool .card-media { margin-bottom: .45rem; }
.tool .status { margin-top: .1rem; }
/* Lit means it works: a tool that is not built keeps its art dim — also on a
   phone, where the site otherwise lights every illustration. */
.tool.is-soon .il-acc { opacity: .42; filter: saturate(.12) brightness(1.05); }
@media (hover: hover) and (pointer: fine) { .tool.is-soon:hover { border-color: var(--imp-line); } }

/* ── A block of news: one sentence, what happened and the way out ────────────
   The ink is `.field-err`'s (the brand's error pink, which the markup carries);
   `warn` swaps it for the amber. The border and the tint follow the ink. Empty,
   it is folded away but stays in the page: a live region has to exist before it
   can speak. */
.tool-note {
  padding: .7rem .9rem; border-radius: var(--imp-r-input);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-size: .86rem; line-height: 1.45; text-align: left; overflow-wrap: break-word;
}
.tool-note[data-kind="warn"] { color: var(--imp-build); }
.tool-note:empty { padding: 0; border-width: 0; background: none; margin-block: -.5rem; }   /* in a flex column the two gaps around it fold into one */

/* ── The utility pages ───────────────────────────────────────────────────────
   One narrow column, a phone's width, centred on anything wider (the container
   grows, the content does not). `main` grows, so the slim footer rests at the
   foot of the screen on a short page. */
.util { min-height: 100dvh; display: flex; flex-direction: column; }
.util-main {
  flex: 1 0 auto; width: min(100% - 2 * var(--imp-gutter), 30rem); margin-inline: auto;
  padding-top: calc(var(--imp-nav-h) + clamp(1.5rem, 6vw, 3rem)); padding-bottom: clamp(2rem, 6vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1.25rem;
}
.util-main > section { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1rem; }
.util-main .lede { text-wrap: balance; }              /* no lonely last word on a line of its own */
/* A page that is one sentence and one button: centred in the screen, under the capsule. */
.util-main.is-center { align-content: center; text-align: center; }
.util-main.is-center > section { justify-items: center; }          /* the section stays the whole column: a button asked to be full width is full width */

/* `minmax(0, 1fr)`, never an auto column: a name that is one long word (`break-word` does not shrink the
   minimum width of a word) would stretch an auto column past the screen instead of breaking. */
.util-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
/* The page's own title (the name of a thing, a stranger's name for it): bold, a phone's size.
   `break-word`, never `anywhere`: a long name breaks only where it cannot fit, never in the middle of a short word. */
/* Focused by script (tabindex=-1) so a screen reader starts at the title; it is not a control, so the
   foundation's keyboard ring (an !important rule) must not frame it. Higher specificity, same !important. */
.util-head .util-h1:focus-visible, h1.util-h1[tabindex="-1"]:focus { outline: none !important; }
.util-h1 {
  font-size: clamp(1.75rem, 7vw, 2.4rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.1;
  overflow-wrap: break-word; text-wrap: balance;
}

/* The form: a panel from 560px up; on a phone it is flat on the page, because width is the scarce thing. */
.util-form { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.15rem, 3.4vw, 1.6rem); }
.util-form > * { min-width: 0; }
.util-form .btn { width: 100%; }
@media (max-width: 559px) {
  .util-form { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
}
/* Under a field: what went wrong first (next to the field), then what is allowed. */
.util-under > .field-err:not(:empty) { margin-bottom: .4rem; }
.util-hint { font-size: .84rem; line-height: 1.45; color: var(--imp-text-2); text-wrap: balance; }   /* two lines of a like length, never one word alone */
.util-help { font-size: .84rem; line-height: 1.5; color: var(--imp-text-2); }
.util-help a { color: var(--imp-text); text-decoration: underline; text-underline-offset: 3px; }
.util-foot { text-align: center; }

/* The one action of a page that is one sentence and one button: the full width of a phone,
   a button of its own from 561px (the label is centred either way). */
.util-actions { display: grid; justify-items: center; width: 100%; margin-top: .4rem; }
.util-actions .btn-grad { width: 100%; }
@media (min-width: 561px) { .util-actions .btn-grad { width: auto; min-width: 16rem; } }

/* A keychain being tapped: the ring in the pink at a third of its strength, the three arcs in the pink. */
.state-glyph { width: 72px; height: 72px; flex: none; }
.state-glyph circle { fill: none; stroke: color-mix(in srgb, var(--imp-pink) 35%, transparent); stroke-width: 2; }
.state-glyph path { fill: none; stroke: var(--imp-pink); stroke-width: 3; stroke-linecap: round; }