/* Shared styles for the reference screens. Colours, sizes and motion come from tokens.css only.
   The extension and the site copy these rules into their own CSS (docs/design/screens/README.md). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html[data-size='2'] { font-size: 112.5%; }
html[data-size='3'] { font-size: 125%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-body) / 1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
img { display: block; }
a { color: var(--acai); text-underline-offset: 0.2em; }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: var(--radius-s); }
/* Headings take focus so a screen reader lands on them; nobody tabs to them. */
[tabindex='-1']:focus-visible { outline: 0; }

/* Icons only where they draw something real (Chrome's puzzle and pin in onboarding). Words carry every action. */
.i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- The proof mark: Acai's signature (design.md). Evidence is marked like a proofreader marks a typo. ---- */

/* The characters that differ from the real address. Wrap each character in a <span> so the reveal can part them.
   data-real holds the real character(s); the correction tag above is decorative (screen readers hear the address). */
.swap { position: relative; isolation: isolate; display: inline-block; color: var(--ink); padding: 0 1px; }
.swap::after {
  content: ''; position: absolute; inset: 0 -1px; z-index: -1; border-radius: 3px;
  background: var(--banana); box-shadow: inset 0 -3px 0 var(--mark);
}
.swap > span { display: inline-block; }
.swap[data-real]::before {
  content: attr(data-real) / ''; position: absolute; left: 50%; bottom: calc(100% + 2px); translate: -50% 0;
  padding: 0 5px 5px; font-size: 0.7em; line-height: 1.35; font-weight: 700; white-space: nowrap;
  color: var(--acai-ink); background: var(--acai); border-radius: 3px;
  /* a tag with a notch pointing down at the letters */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(50% + 5px) calc(100% - 5px), 50% 100%, calc(50% - 5px) calc(100% - 5px), 0 calc(100% - 5px));
}

/* The reveal (add .reveal to an ancestor): the letters start squeezed so "rn" reads as "m", then part,
   the highlight wipes in and the correction drops on. Once per page, never loops. Reduced motion: settled frame. */
.reveal .swap > span:first-child { animation: part-l var(--base) var(--ease-out) calc(var(--enter) + 150ms) both; }
.reveal .swap > span:last-child:not(:first-child) { animation: part-r var(--base) var(--ease-out) calc(var(--enter) + 150ms) both; }
.reveal .swap::after { transform-origin: left; animation: wipe var(--base) var(--ease-out) calc(var(--enter) + 350ms) both; }
.reveal .swap[data-real]::before { animation: drop var(--base) var(--ease-out) calc(var(--enter) + 550ms) both; }
@keyframes part-l { from { transform: translateX(0.12em); } }
@keyframes part-r { from { transform: translateX(-0.12em); } }
@keyframes wipe { from { transform: scaleX(0); } }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }

/* Evidence chip: the fact itself, marked the same way (a number, a word, an amount). Leads each reason. */
.ev {
  justify-self: start; padding: 0 6px; border-radius: var(--radius-tag);
  font: 600 var(--text-small) / 1.6 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--banana); box-shadow: inset 0 -3px 0 var(--mark); color: var(--ink);
}

/* Label: a margin note, not a pill. A square glyph in the risk colour, then the words. */
.label {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 700; font-size: var(--text-small); line-height: 1.5; white-space: nowrap; color: var(--ink);
}
.label::before {
  content: attr(data-glyph) / ''; display: grid; place-items: center; flex: none;
  width: 1.5rem; height: 1.5rem; border-radius: var(--radius-tag);
  font: 700 0.875rem / 1 var(--font-mono); background: var(--ink-2); color: var(--paper);
}
.label-stop { color: var(--stop); }
.label-stop::before { background: var(--stop); }
.label-caution { color: var(--caution); }
.label-caution::before { background: var(--caution); }
.label-info { color: var(--ink-2); }
.label-done { color: var(--done); }
.label-done::before { background: var(--done); }

/* Word cover (Family, product.md #30): a bar the colour of the text over a word the parent picked.
   The extension draws it with the CSS Custom Highlight API, not this span (docs/build/extension.md, word-cover.ts):
   ::highlight(acai-cover) { color: transparent; background-color: <the ink> }. This class only shows the look. */
.cover { border-radius: 2px; background: currentColor; -webkit-text-fill-color: transparent; user-select: none; }

/* Buttons: always a word. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: var(--tap-primary); padding: 0 var(--s5);
  border: 2px solid transparent; border-radius: var(--radius-s);
  font: 600 var(--text-body) / 1.2 var(--font-text);
  text-decoration: none; cursor: pointer;
  transition: transform var(--fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn-primary { background: var(--acai); color: var(--acai-ink); }
.btn-secondary { background: var(--surface); color: var(--acai); border-color: var(--acai); }
.btn-quiet { background: transparent; color: var(--acai); min-height: var(--tap); padding: 0 var(--s3); text-decoration: underline; text-underline-offset: 0.2em; }
.btn:disabled { background: var(--line); color: var(--ink-2); cursor: not-allowed; }
.btn-block { display: flex; width: 100%; }
@media (hover: hover) {
  .btn-primary:hover { background: color-mix(in srgb, var(--acai) 88%, var(--ink)); }
  .btn-secondary:hover, .btn-quiet:hover { background: color-mix(in srgb, var(--acai) 8%, var(--surface)); }
}

/* Glass: only what floats over something (docs/design/extension.md). */
.glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-depth); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* The character: the still paints at once, the Rive canvas fades in over it. */
.cast { position: relative; flex: none; aspect-ratio: 220 / 264; }
.cast img, .cast canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 92%; }
.cast canvas { opacity: 0; transition: opacity var(--base) var(--ease-out); }
.cast canvas.live { opacity: 1; }
.cast:has(canvas.live) img { opacity: 0; transition: opacity var(--base) var(--ease-out); }

/* Cards are flat sheets: a hairline, no drop shadow. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }

/* Choice (radio as a card): selected = açaí border plus the margin rule, never a tinted fill. */
.pick { position: relative; display: grid; gap: 2px; padding: var(--s3) var(--s5); border: 1px solid var(--line); border-radius: var(--radius-tag); background: var(--surface); cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { border-color: var(--acai); box-shadow: inset var(--rule) 0 0 var(--acai); }
.pick:has(input:focus-visible) { outline: var(--focus); outline-offset: 3px; }

/* Reasons: evidence chip, then our own sentence. */
.reasons { list-style: none; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s3) var(--s3); align-items: baseline; }
.reasons li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; }
.steps { padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--s3); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: var(--s3); align-items: baseline; }
.steps li::before { content: counter(step); font: 700 var(--text-body) / 1 var(--font-mono); color: var(--acai); text-align: center; }

/* "A A A" text size switch. */
.sizes { display: inline-flex; gap: 0; }
.sizes button {
  min-width: 40px; min-height: var(--tap); border: 0; background: transparent;
  color: var(--ink-2); font-family: var(--font-text); font-weight: 600; cursor: pointer; line-height: 1;
}
.sizes button:nth-child(1) { font-size: 1rem; }
.sizes button:nth-child(2) { font-size: 1.25rem; }
.sizes button:nth-child(3) { font-size: 1.5rem; }
.sizes button[aria-pressed='true'] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Entrance: a fade and an 8px rise. .enter-2 follows 80 ms later (the evidence after the headline). */
.enter { animation: enter var(--enter) var(--ease-out) both; }
.enter-2 { animation: enter var(--enter) var(--ease-out) 80ms both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
/* Reduced motion: every animation is its settled frame (delays included). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Windows High Contrast: borders and words carry everything. */
@media (forced-colors: active) {
  .btn:not(.btn-quiet), .card, .pick { border: 2px solid ButtonText; }
  .btn-quiet { border-color: Canvas; } /* a transparent border turns visible in forced colors; links stay links */
  .sizes button[aria-pressed='true'] { forced-color-adjust: none; color: Highlight; box-shadow: inset 0 -2px 0 Highlight; }
  .glass { border: 1px solid CanvasText; }
  .btn-primary { background: ButtonText; color: ButtonFace; forced-color-adjust: none; }
  .btn:disabled { color: GrayText; border-color: GrayText; }
  .pick:has(input:checked) { border-color: Highlight; box-shadow: inset var(--rule) 0 0 Highlight; forced-color-adjust: none; }
  :focus-visible { outline: 3px solid Highlight; }
  .swap, .ev, .label::before, .cover { forced-color-adjust: none; }
  .cover { background: CanvasText; }
  .swap { color: HighlightText; }
  .swap::after { background: Highlight; box-shadow: none; }
  .swap[data-real]::before, .label::before { background: CanvasText; color: Canvas; }
  .ev { background: Canvas; color: CanvasText; box-shadow: inset 0 -3px 0 Highlight; border: 1px solid CanvasText; }
}

/* Author display rules (grid, flex) would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }