/*
 * The card's share of application.css (#521): the few base rules the
 * public card's page wears, copied to the declaration from that file so
 * the card no longer downloads the editor's and admin's whole stylesheet
 * ahead of its own. The signed-in screens keep application.css as it is
 * and do not load this file. A change to one of these rules is made in
 * both files; test/assets/base_stylesheet_test.rb holds them together.
 *
 * Colours, type and sizes are read from custom properties, which on the
 * card's page are card.css's own, on html.nadlan-card-root.
 */

*, *::before, *::after { box-sizing: border-box; }

/* Read aloud, never drawn: the accessibility footer's "opens in a new
   tab" (walk 7.9). */
.v-sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

body {
  margin: 0;
  background: var(--v-page);
  color: var(--v-ink);
  font-family: var(--v-font);
  font-size: var(--v-font-size);
  line-height: var(--v-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; margin-block: 0 .5em; }

a { color: var(--v-accent); }

img, svg { max-inline-size: 100%; block-size: auto; }

:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; }

/* The accessibility footer (#103), shared with the signed-in screens.
   Erez's shape — the icon centred, the links a muted centred row
   beneath, separated by a dot. */

.v-a11y { text-align: center; padding-block: 1.5rem 1.25rem; }

.v-a11y-toggle {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 2px solid var(--v-line);
  background: var(--v-surface);
  color: var(--v-accent);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v-a11y-toggle:hover { border-color: var(--v-accent); }

.v-a11y-legal-row {
  margin-block: .85rem 0;
  font-size: .85rem;
  /* The links wrap to a second line on a narrow phone rather than running
     off the edge; the dot wraps with them. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.v-a11y-legal { color: var(--v-ink-muted); text-decoration: none; }
.v-a11y-legal:hover { color: var(--v-ink); }
.v-a11y-dot { color: var(--v-ink-muted); }
/* The accessibility statement takes the line under the other two (#271,
   Adam's #253 hand test: three on one line crowd a phone). An empty item
   of no height takes the rest of the line before it, so the statement
   starts a line of its own and the row's centring puts it under them. The
   line belongs to the break and not to the link: a link carrying it would
   be a press the width of the footer, and a tap on the blank beside the
   words would open the statement (fresh reviewer, 2026-09-27). */
.v-a11y-line-break { flex-basis: 100%; block-size: 0; }