/* ==========================================================================
   Ulgama components · v1.4 · October 14, 2026
   Needs tokens.css first. Plain CSS, no build step, no JavaScript required.
   Works under a strict content security policy: no inline styles, no data:
   images, no third-party anything. Icons come from icons/sprite.svg:
     <svg class="icon" aria-hidden="true" focusable="false">
       <use href="/static/ulgama/icons/sprite.svg#status-current"></use></svg>

   Written with logical properties (inline/block, start/end) so a future
   right-to-left language mirrors without new CSS. Never uppercase anything:
   capitals break the Turkish dotted and dotless i.

   .is-hover, .is-focus, .is-active and .is-disabled exist only so the
   showcase page can show every state at once. Product markup never needs them.
   ========================================================================== */

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body,
[data-theme] {
  background: var(--paper);
  color: var(--ink);
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
}
h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
p { margin: 0; max-inline-size: var(--measure); text-wrap: pretty; }
ul, ol { margin: 0; padding-inline-start: 1.25em; }
small, .text-sm { font-size: var(--text-sm); }
.text-quiet { color: var(--ink-2); }
.number { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
figure { margin: 0; }
hr { border: 0; border-block-start: var(--border) solid var(--hairline); margin: var(--space-5) 0; }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
::selection { background: var(--brand-tint); color: var(--ink); }
:focus-visible { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-gap); }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: -100vh;
  max-inline-size: calc(100% - 2 * var(--space-4));
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target);
  padding: var(--space-2) var(--space-4);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-md);
  font-weight: var(--weight-strong);
}
.skip-link:focus { inset-block-start: var(--space-2); }

/* --- Layout helpers -------------------------------------------------------- */
.container { max-inline-size: 72rem; margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 40em) { .container { padding-inline: var(--space-6); } }
.stack > * + * { margin-block-start: var(--stack-gap, var(--space-4)); }
.stack--sm { --stack-gap: var(--space-2); }
.stack--lg { --stack-gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
@media (max-width: 40em) {
  /* On a phone the buttons stack full width; put the primary one first. */
  .actions > .button { flex: 1 1 100%; }
}
/* Always stacked, e.g. inside a phone sheet or a narrow panel. */
.actions--stack > .button { flex: 1 1 100%; }

/* --- Icons ----------------------------------------------------------------- */
.icon {
  display: inline-block;
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  vertical-align: -0.25em;
}
.icon--sm { inline-size: 1em; block-size: 1em; vertical-align: -0.15em; }
.icon--lg { inline-size: 2rem; block-size: 2rem; }
.icon--xl { inline-size: 3rem; block-size: 3rem; }
/* Arrows and chevrons point the other way in a right-to-left language. */
[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* --- Links ----------------------------------------------------------------- */
a,
.link {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border-radius: 2px;
}
a:hover,
.link.is-hover { color: var(--brand-pressed); text-decoration-thickness: 2px; }
a.is-focus,
.link.is-focus { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-gap); }
.link .icon { inline-size: 1em; block-size: 1em; margin-inline-start: 0.2em; vertical-align: -0.1em; }

/* --- Buttons --------------------------------------------------------------- */
/* Primary = ledger ink. Only one primary button per screen.
   There is deliberately no red "danger" button: anything clickable is ledger
   ink. Destructive actions use a secondary button with explicit words
   ("Remove this document") and a confirmation step. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--target);
  min-inline-size: var(--target);
  padding: var(--space-2) var(--space-4);
  border: var(--border) solid transparent;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-weight: var(--weight-strong);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.button:hover,
.button.is-hover { background: var(--brand-pressed); color: var(--on-brand); text-decoration: none; }
.button:active,
.button.is-active { transform: translateY(1px); }
.button:focus-visible,
.button.is-focus { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-gap); }

.button--secondary {
  background: var(--card);
  color: var(--brand);
  border-color: var(--control-border);
}
.button--secondary:hover,
.button--secondary.is-hover { background: var(--brand-tint); color: var(--brand); border-color: var(--brand); }

.button--quiet {
  background: transparent;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  padding-inline: var(--space-3);
}
.button--quiet:hover,
.button--quiet.is-hover { background: var(--paper-2); color: var(--brand-pressed); text-decoration: underline; text-decoration-thickness: 2px; }

.button:disabled,
.button[aria-disabled="true"],
.button.is-disabled {
  background: var(--disabled-bg);
  color: var(--disabled-ink);
  border: var(--border) dashed var(--control-border);
  text-decoration: none;
  cursor: not-allowed;
  transform: none;
}
.button[aria-busy="true"] { cursor: progress; }
.button[aria-busy="true"]::before {
  content: "";
  inline-size: 1em;
  block-size: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: ulgama-spin 0.8s linear infinite;
}
@keyframes ulgama-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .button[aria-busy="true"]::before { animation: none; } }
.button--block { inline-size: 100%; }

/* --- Form fields ----------------------------------------------------------- */
/* Order inside a field: label, help, error (when there is one), control.
   Mark the optional fields "(optional)"; never mark required ones with *. */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  margin-inline: 0;
  padding: 0;
  border: 0;
}
.label,
.field > legend { font-weight: var(--weight-strong); padding: 0; }
.label__optional { font-weight: var(--weight-regular); color: var(--ink-2); }
.help { color: var(--ink-2); font-size: var(--text-sm); max-inline-size: var(--measure); }
.error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--brick);
  font-weight: var(--weight-strong);
  max-inline-size: var(--measure);
}
.error .icon { margin-block-start: 0.1em; }

.input,
.textarea {
  inline-size: 100%;
  max-inline-size: 32rem;
  min-block-size: var(--target);
  padding: var(--space-2) var(--space-3);
  border: var(--border) solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  line-height: var(--leading-body);
}
.input--short { max-inline-size: 14rem; }
.textarea { min-block-size: 7rem; resize: vertical; }
.input::placeholder,
.textarea::placeholder { color: var(--ink-2); opacity: 1; }
.input:hover,
.textarea:hover,
.input.is-hover { border-color: var(--ink-2); }
.input:focus,
.textarea:focus,
.input.is-focus {
  outline: var(--focus-width) solid var(--brand);
  outline-offset: 0;
  border-color: var(--brand);
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.field--error .input,
.field--error .textarea {
  border: var(--border-strong) solid var(--brick);
  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
}
.input:disabled,
.textarea:disabled,
.input.is-disabled {
  background: var(--disabled-bg);
  color: var(--disabled-ink);
  border-style: dashed;
  cursor: not-allowed;
}
.input[readonly] { background: var(--paper-2); }

/* Date: the browser's own picker is the most familiar one on every phone. */
.input[type="date"] { max-inline-size: 14rem; }
.input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* Select: native, with a drawn chevron. */
.select { position: relative; display: block; inline-size: 100%; max-inline-size: 32rem; }
.select > select { appearance: none; padding-inline-end: 2.75rem; cursor: pointer; }
.select::after {
  content: "";
  position: absolute;
  inset-inline-end: 1.1rem;
  inset-block-start: 50%;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* --- Checkboxes and radios -------------------------------------------------- */
/* The whole row is the target (44px tall); the box itself is 1.5rem. */
.choices { display: flex; flex-direction: column; gap: var(--space-1); }
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-block-size: var(--target);
  padding-block: var(--space-2);
  cursor: pointer;
}
.choice__text { display: flex; flex-direction: column; gap: var(--space-1); padding-block-start: 0.05rem; }
.choice__hint { color: var(--ink-2); font-size: var(--text-sm); }
.choice input {
  appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0;
  border: var(--border-strong) solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
}
.choice input[type="radio"] { border-radius: 50%; }
.choice input::before {
  content: "";
  inline-size: 0.45rem;
  block-size: 0.85rem;
  border: solid var(--on-brand);
  border-width: 0 3px 3px 0;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0;
}
.choice input[type="radio"]::before {
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  transform: none;
}
.choice:hover input,
.choice.is-hover input { border-color: var(--ink-2); }
.choice input:checked { background: var(--brand); border-color: var(--brand); }
.choice input[type="radio"]:checked { background: var(--card); }
.choice input:checked::before { opacity: 1; }
.choice input:indeterminate::before,
.choice input.is-mixed::before {
  inline-size: 0.8rem;
  block-size: 0;
  border-width: 0 0 3px 0;
  transform: none;
  opacity: 1;
}
.choice input:indeterminate,
.choice input.is-mixed { background: var(--brand); border-color: var(--brand); }
.choice input:focus-visible,
.choice.is-focus input { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-gap); }
.choice input:disabled,
.choice.is-disabled input { background: var(--disabled-bg); border-style: dashed; cursor: not-allowed; }
.choice:has(input:disabled),
.choice.is-disabled { color: var(--disabled-ink); cursor: not-allowed; }
.field--error .choice input { border-color: var(--brick); }

/* --- File upload ------------------------------------------------------------ */
/* <label class="button button--secondary upload__button">Choose a file
     <input class="visually-hidden" type="file"></label>  works with no JS. */
.upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-inline-size: 32rem;
  padding: var(--space-5);
  border: var(--border-strong) dashed var(--control-border);
  border-radius: var(--radius-md);
  background: var(--card);
  text-align: center;
}
.upload > .icon { inline-size: 2rem; block-size: 2rem; color: var(--ink-2); }
.upload.is-dragover { border-color: var(--brand); border-style: solid; background: var(--brand-tint); }
.field--error .upload { border-color: var(--brick); }
.upload__button { position: relative; overflow: hidden; }
.upload__button:focus-within { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-gap); }

.files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-inline-size: 32rem; }
.file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card);
}
.file > .icon { color: var(--ink-2); }
.file__name { font-weight: var(--weight-strong); overflow-wrap: anywhere; }
.file__meta { grid-column: 2; color: var(--ink-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.file > .button { grid-row: 1 / span 2; grid-column: 3; }
.file .progress { grid-column: 2; }

.progress {
  appearance: none;
  inline-size: 100%;
  block-size: 0.5rem;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--hairline);
  overflow: hidden;
}
.progress::-webkit-progress-bar { background: var(--hairline); border-radius: var(--radius-round); }
.progress::-webkit-progress-value { background: var(--brand); border-radius: var(--radius-round); }
.progress::-moz-progress-bar { background: var(--brand); border-radius: var(--radius-round); }

/* --- Status tags and severity ---------------------------------------------- */
/* A status tag is tint, icon, word: in that order, always all three.
   Severity is a label with a four-step meter and a word, never a tint, so a
   row never carries two coloured blocks. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  padding: 0.125em 0.625em 0.125em 0.45em;
  border-radius: var(--radius-sm);
  background: var(--grey-tint);
  color: var(--grey);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: 1.45;
  vertical-align: middle;
}
.tag .icon { inline-size: 1.15em; block-size: 1.15em; vertical-align: 0; }
.tag--missing,
.tag--expired { background: var(--brick-tint); color: var(--brick); }
.tag--expiring { background: var(--amber-tint); color: var(--amber); }
.tag--review { background: var(--plum-tint); color: var(--plum); }
.tag--current { background: var(--moss-tint); color: var(--moss); }
.tag--off { background: var(--grey-tint); color: var(--grey); }

.severity {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  color: var(--grey);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: 1.45;
  vertical-align: middle;
}
.severity .icon { inline-size: 1.15em; block-size: 1.15em; vertical-align: 0; }
.severity--critical { color: var(--brick); }
.severity--high { color: var(--amber); }
.severity--medium { color: var(--plum); }
.severity--low { color: var(--grey); }

/* A count, e.g. unread items. Ink, never a signal colour. */
.count {
  display: inline-block;
  min-inline-size: 1.6em;
  padding: 0 0.45em;
  border-radius: var(--radius-round);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: 1.6;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Cards ------------------------------------------------------------------ */
/* Paper page, white cards, a hairline between them. No shadows. */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
}
.card__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.card__title { font-size: var(--text-lg); font-weight: var(--weight-strong); line-height: var(--leading-tight); }
.card__meta { color: var(--ink-2); font-size: var(--text-sm); }
.card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: auto; padding-block-start: var(--space-2); }
/* A whole card that opens something: one real link, stretched over the card. */
.card--link { position: relative; }
.card--link .card__link { color: inherit; text-decoration: none; }
.card--link .card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link:hover,
.card--link.is-hover { border-color: var(--control-border); }
.card--link:hover .card__link,
.card--link.is-hover .card__link { text-decoration: underline; }
.card--link:focus-within,
.card--link.is-focus { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-gap); }
.card--link .card__link:focus-visible { outline: none; }
.card--selected { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

/* --- Tables that become cards on a phone ------------------------------------ */
/* Give every <td> a data-label with its column name. The table turns into
   cards when its container is narrower than 36em, whatever the screen.
   Keep role="table", "row", "columnheader" and "cell" on the elements so
   screen readers still hear a table after the layout changes. */
.table-wrap { container-type: inline-size; overflow-x: auto; }
.table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card);
}
.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--border) solid var(--hairline);
  text-align: start;
  vertical-align: top;
}
.table tr:last-child td { border-block-end: 0; }
.table thead th {
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}
.table thead th:first-child { border-start-start-radius: var(--radius-md); }
.table thead th:last-child { border-start-end-radius: var(--radius-md); }
.table tbody tr:hover,
.table tbody tr.is-hover { background: var(--paper-2); }
.table tbody tr[aria-selected="true"],
.table tbody tr.is-selected { background: var(--brand-tint); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }
.table__primary { font-weight: var(--weight-strong); }

@container (max-width: 36em) {
  .table--cards,
  .table--cards tbody,
  .table--cards tr,
  .table--cards td { display: block; }
  .table--cards { border: 0; background: none; }
  .table--cards thead {
    position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .table--cards tr {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    margin-block-end: var(--space-3);
    border: var(--border) solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--card);
  }
  .table--cards tbody tr:hover { background: var(--card); }
  .table--cards td {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) 1fr;
    gap: var(--space-3);
    padding: 0;
    border: 0;
  }
  .table--cards td::before {
    content: attr(data-label);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-strong);
  }
  .table--cards td.table__primary { grid-template-columns: 1fr; font-size: var(--text-lg); }
  .table--cards td.table__primary::before { display: none; }
  .table--cards .num { text-align: start; }
}
@container (max-width: 18em) {
  /* Very narrow, or text at 200%: label above value. */
  .table--cards td { grid-template-columns: 1fr; gap: 0; }
}

/* --- Banners ---------------------------------------------------------------- */
/* Never a coloured block. A neutral panel; only the icon and the title carry
   the signal colour. Put a banner at the top of the content it is about. */
.banner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4);
  border: var(--border) solid var(--control-border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
}
.banner > .icon { grid-row: 1 / span 3; margin-block-start: 0.1em; color: var(--brand); }
.banner__title { font-weight: var(--weight-strong); color: var(--brand); }
.banner__text { grid-column: 2; }
.banner__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-block-start: var(--space-2); }
.banner--attention > .icon,
.banner--attention .banner__title { color: var(--amber); }
.banner--critical > .icon,
.banner--critical .banner__title { color: var(--brick); }
.banner--offline > .icon,
.banner--offline .banner__title { color: var(--grey); }

/* --- Empty states ------------------------------------------------------------ */
/* What will be here, why it matters, and the one action that fills it. */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card);
  text-align: center;
}
.empty > .icon { inline-size: 3rem; block-size: 3rem; color: var(--ink-2); }
.empty__title { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.empty__text { color: var(--ink-2); max-inline-size: 40ch; }
.empty .actions { justify-content: center; margin-block-start: var(--space-2); }

/* --- Confirmation ------------------------------------------------------------ */
/* 1. After something worked: a calm panel that says what changed.
   2. Before something that cannot be undone: a <dialog> that names the
      consequence, with the safe choice as the primary button. */
.confirmation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-5);
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card);
}
.confirmation > .icon { grid-row: 1 / span 3; inline-size: 2rem; block-size: 2rem; color: var(--brand); }
.confirmation__title { font-size: var(--text-xl); font-weight: var(--weight-strong); line-height: var(--leading-tight); }
.confirmation > :not(.icon) { grid-column: 2; }
@media (max-width: 40em) {
  /* Narrow screens and large text: the icon sits above the words. */
  .confirmation { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .confirmation > .icon { grid-row: auto; }
  .confirmation > :not(.icon) { grid-column: 1; }
}

.dialog {
  inline-size: min(34rem, calc(100% - 2 * var(--space-4)));
  max-block-size: calc(100% - 2 * var(--space-4));
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
}
.dialog::backdrop { background: var(--overlay); }
.dialog__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.dialog__title { font-size: var(--text-xl); }
@media (max-width: 40em) {
  /* On a phone the dialog rises from the bottom, within thumb reach. */
  .dialog[open] {
    inline-size: 100%;
    max-inline-size: 100%;
    margin: auto 0 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
}
.dialog.is-static { position: relative; inset: auto; margin: 0; display: block; }

/* --- Toasts ------------------------------------------------------------------ */
/* Confirms something small that just happened. No timer: it stays until it is
   closed or the next page loads, because some people read slowly.
   <div class="toast-region" role="status" aria-live="polite">…</div> */
.toast-region {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}
@media (min-width: 40em) {
  .toast-region { inset-inline: auto var(--space-5); inset-block-end: var(--space-5); align-items: flex-end; }
}
.toast-region.is-static { position: static; align-items: flex-start; }
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-inline-size: min(30rem, 100%);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--toast-bg);
  color: var(--toast-ink);
  box-shadow: var(--shadow-overlay);
  pointer-events: auto;
}
.toast__text { flex: 1; min-inline-size: 0; padding-block: var(--space-2); }
.toast a,
.toast a:hover { color: inherit; font-weight: var(--weight-strong); }
.toast__close {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--target);
  min-block-size: var(--target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.toast__close:hover { background: rgb(128 128 128 / 0.25); }
.toast__close:focus-visible { outline: var(--focus-width) solid currentColor; outline-offset: -4px; }

/* --- Tabs --------------------------------------------------------------------- */
/* Links to server-rendered views. On a narrow screen the row scrolls
   sideways; labels are never cut short. */
.tabs {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  border-block-end: var(--border) solid var(--hairline);
  scrollbar-width: thin;
}
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  justify-content: center;
  min-block-size: var(--target);
  min-inline-size: var(--target);
  padding-block: var(--space-2);
  margin-block-end: -1px;
  border-block-end: 3px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.tabs__tab:hover,
.tabs__tab.is-hover { color: var(--ink); border-block-end-color: var(--control-border); }
.tabs__tab[aria-current="page"],
.tabs__tab[aria-selected="true"] {
  color: var(--brand);
  font-weight: var(--weight-strong);
  border-block-end-color: var(--brand);
}
.tabs__tab:focus-visible,
.tabs__tab.is-focus { outline: var(--focus-width) solid var(--brand); outline-offset: -2px; }

/* --- Breadcrumb ---------------------------------------------------------------- */
/* On a phone it becomes one "back to the parent" link. */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before {
  content: "";
  inline-size: 0.45em;
  block-size: 0.45em;
  border: solid var(--ink-2);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg);
}
[dir="rtl"] .breadcrumb li + li::before { transform: rotate(135deg); }
.breadcrumb a { display: inline-flex; align-items: center; min-block-size: var(--target); }
.breadcrumb [aria-current="page"] { color: var(--ink-2); }
@container (max-width: 30em) {
  .breadcrumb li { display: none; }
  .breadcrumb li:nth-last-child(2) { display: inline-flex; }
  .breadcrumb li:nth-last-child(2)::before {
    content: "";
    inline-size: 0.45em;
    block-size: 0.45em;
    border: solid var(--brand);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(135deg);
  }
  [dir="rtl"] .breadcrumb li:nth-last-child(2)::before { transform: rotate(-45deg); }
}
.breadcrumb { container-type: inline-size; }

/* --- Pagination ----------------------------------------------------------------- */
.pagination { container-type: inline-size; }
.pagination__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pagination__pages { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.pagination a,
.pagination [aria-current="page"],
.pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-inline-size: var(--target);
  min-block-size: var(--target);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
}
.pagination a { text-decoration: none; }
.pagination a:hover,
.pagination a.is-hover { background: var(--paper-2); text-decoration: underline; }
.pagination [aria-current="page"] { background: var(--brand); color: var(--on-brand); font-weight: var(--weight-strong); }
.pagination__gap { color: var(--ink-2); padding-inline: 0; min-inline-size: auto; }
.pagination__status { color: var(--ink-2); display: none; }
@container (max-width: 34em) {
  .pagination__pages { display: none; }
  .pagination__status { display: block; }
}

/* --- Lists ---------------------------------------------------------------------- */
/* A white list with a hairline between rows: tasks, things that need attention,
   the menu. Each list is a container, so its rows lay themselves out by the
   room they have, not by the screen. */
.list {
  container-type: inline-size;
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card);
}
.list > li + li { border-block-start: var(--border) solid var(--hairline); }
.lead { font-size: var(--text-lg); }
/* A list with no bullets, e.g. facts inside a card. */
.plain { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-round);
  background: var(--paper-2);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: 1;
}
/* An icon-only link or button. Always give it an aria-label. */
.icon-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-inline-size: var(--target);
  min-block-size: var(--target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--brand);
  cursor: pointer;
}
.icon-button:hover { background: var(--paper-2); color: var(--brand-pressed); }
.icon-button .icon { inline-size: 1.5rem; block-size: 1.5rem; }

/* --- App shell ------------------------------------------------------------------ */
/* One markup for every screen size.
   Phone and tablet (narrower than 64em): a top bar with the organization, the
   page, and a tab bar along the bottom: Today, Inbox, Documents, Menu.
   Desktop (64em and wider): a sidebar with everything, the page beside it.
   Very large text (narrower than 18em, e.g. 200% on a phone): the tab bar
   goes and the top bar shows one "Menu" button, so the page keeps the screen.

   <body class="app">
     <a class="skip-link" href="#main">…</a>
     <header class="app-bar">…</header>             phone and tablet
     <nav class="sidebar" aria-label="…">…</nav>     desktop
     <main class="app-main" id="main">
       <div class="page">…</div>
       <footer class="app-footer">…</footer>
     </main>
     <nav class="tabbar" aria-label="…">…</nav>      phone and tablet
   </body>

   The sidebar and the tab bar carry the same links. Only one is ever shown;
   the other is display: none, so a screen reader meets one navigation. */
.app { min-block-size: 100vh; min-block-size: 100dvh; }

/* The organization: its own square logo (an <img>) and its name, never cut short. */
.org {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  min-block-size: var(--target);
  color: var(--ink);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  text-decoration: none;
}
.org:hover { color: var(--ink); text-decoration: underline; }
.org__logo { flex: none; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-sm); }
.org__name { min-inline-size: 0; overflow-wrap: anywhere; }

.app-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  border-block-end: var(--border) solid var(--hairline);
  background: var(--paper);
}
.app-bar .org { flex: 1; }
.app-bar__menu { display: none; }

.tabbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block-end: env(safe-area-inset-bottom);
  border-block-start: var(--border) solid var(--hairline);
  background: var(--card);
}
.tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-block-size: 3.5rem;
  padding: var(--space-1) var(--space-1) var(--space-2);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.tabbar__item .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.tabbar__item:hover { color: var(--ink); text-decoration: underline; }
/* The current tab: ledger ink, bold, and a bar above it, so it is never
   colour alone. */
.tabbar__item[aria-current="page"] { color: var(--brand); font-weight: var(--weight-strong); }
.tabbar__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 22%;
  block-size: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--brand);
}
.tabbar__item:focus-visible { outline-offset: -4px; }
.tabbar__badge { position: absolute; inset-block-start: 0.2rem; inset-inline-start: calc(50% + 0.4rem); }

.app-main { padding-block-end: calc(3.5rem + env(safe-area-inset-bottom)); }
.app-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

@media (max-width: 18em) {
  /* Very large text: the page keeps the screen. */
  .tabbar { display: none; }
  .app-bar { position: static; flex-wrap: wrap; padding-block: var(--space-2); }
  .app-bar .org { flex: 1 1 100%; }
  .app-bar__menu { display: inline-flex; margin-inline-start: auto; }
  .app-main { padding-block-end: 0; }
}

.sidebar { display: none; }
@media (min-width: 64em) {
  .app { display: grid; grid-template-columns: 17rem minmax(0, 1fr); }
  .app-bar,
  .tabbar { display: none; }
  .app-main { grid-column: 2; grid-row: 1; padding-block-end: 0; }
  .app-footer { padding-inline: var(--space-6); }
  .sidebar {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    block-size: 100vh;
    block-size: 100dvh;
    overflow-y: auto;
    padding: var(--space-4) var(--space-3) 0;
    border-inline-end: var(--border) solid var(--hairline);
    background: var(--paper);
  }
  /* Me and the settings stay in view while a long list of areas scrolls. */
  .sidebar__foot {
    position: sticky;
    inset-block-end: 0;
    margin-inline: calc(-1 * var(--space-3));
    padding: var(--space-3) var(--space-3) var(--space-4);
    background: var(--paper);
  }
}
.sidebar > .org { padding-inline: var(--space-2); }
.sidebar__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: var(--border) solid var(--hairline);
}

/* Search: a labelled field and a button; works without JavaScript. */
.search { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.search .input { flex: 1 1 8rem; min-inline-size: 0; }
.search .button { flex: none; padding-inline: var(--space-3); }

/* Navigation. Up to six areas: one plain list. More than six: grouped under
   four plain headings (Board, People and programs, Money, Building), always
   in the same order, so a director scans and a volunteer sees a short list. */
.nav { display: flex; flex-direction: column; gap: var(--space-5); }
.nav-group { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-heading {
  padding-inline: var(--space-3);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: var(--leading-body);
}
.nav-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--target);
  padding: var(--space-2) var(--space-3);
  border-inline-start: 3px solid transparent;
  border-radius: var(--radius-md);
  color: var(--ink);
  line-height: 1.25;
  text-decoration: none;
}
.nav-item > .icon { color: var(--ink-2); }
.nav-item:hover { background: var(--paper-2); color: var(--ink); text-decoration: underline; }
.nav-item[aria-current="page"] {
  border-inline-start-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: var(--weight-strong);
}
.nav-item[aria-current="page"] > .icon { color: var(--brand); }
.nav-item .count { margin-inline-start: auto; }
.nav-item__text { display: flex; flex-direction: column; min-inline-size: 0; }
.nav-item__hint { color: var(--ink-2); font-size: var(--text-sm); font-weight: var(--weight-regular); }

/* --- Page --------------------------------------------------------------------------- */
.page {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}
@media (min-width: 40em) { .page { padding: var(--space-6); } }
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}
.page-header__text { display: flex; flex: 1 1 20rem; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.page-header__meta { color: var(--ink-2); }
.section { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; }
.section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}
.section__note { color: var(--ink-2); font-size: var(--text-sm); }
/* Two columns when the page is wide enough: the main job, then what supports it. */
.split { display: grid; gap: var(--space-6); align-items: start; }
@container (min-width: 52em) {
  .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.cards--stack { grid-template-columns: minmax(0, 1fr); }

/* --- Tasks (Today) ------------------------------------------------------------------- */
.task {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.task__body { display: flex; flex: 1 1 15rem; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
.task__title { font-weight: var(--weight-strong); }
.task__meta { color: var(--ink-2); font-size: var(--text-sm); }
.task__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-inline-start: auto;
}
.task__end form { display: flex; margin: 0; }

/* --- Menu: every area, as big rows --------------------------------------------------- */
.menu-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 3.5rem;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  text-decoration: none;
}
.list > li:first-child > .menu-item { border-start-start-radius: var(--radius-md); border-start-end-radius: var(--radius-md); }
.list > li:last-child > .menu-item { border-end-start-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.menu-item:hover { background: var(--paper-2); color: var(--ink); }
.menu-item:hover .menu-item__title { text-decoration: underline; }
.menu-item:focus-visible { outline-offset: -3px; }
.menu-item__icon {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--paper-2);
  color: var(--ink);
}
.menu-item__text { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; }
.menu-item__title { color: var(--brand); font-weight: var(--weight-strong); }
.menu-item__hint { color: var(--ink-2); font-size: var(--text-sm); }
.menu-item > .icon:last-child { color: var(--ink-2); }
@container (max-width: 16em) {
  .menu-item { grid-template-columns: minmax(0, 1fr) auto auto; }
  .menu-item__icon { display: none; }
}
.menu-groups { display: grid; gap: var(--space-6); }
@container (min-width: 46em) {
  .menu-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* --- Readiness score ------------------------------------------------------------------ */
/* One internal number the board watches over time. Ink, never a signal colour:
   the score is a trend to discuss, not a verdict. */
.score { display: grid; gap: var(--space-4) var(--space-6); align-items: center; }
@container (min-width: 44em) {
  .score { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.score__main { display: flex; flex-direction: column; gap: var(--space-2); }
.score__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.score__number { font-size: var(--text-3xl); font-weight: var(--weight-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.score__of { color: var(--ink-2); }
.progress--ink::-webkit-progress-value { background: var(--ink); }
.progress--ink::-moz-progress-bar { background: var(--ink); }
/* The trend: one bar per quarter. The numbers and months are HTML text, so
   they grow with the reader's text size; each bar is a tiny SVG whose height
   is an attribute, which a strict content security policy allows. */
.trend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
  max-inline-size: 22rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trend li { display: grid; grid-template-rows: auto 4.5rem auto; justify-items: center; gap: var(--space-1); }
.trend__value { grid-row: 1; color: var(--ink-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.trend__bar { grid-row: 2; inline-size: 100%; max-inline-size: 3rem; block-size: 100%; }
.trend__bar rect { fill: var(--control-border); }
.trend__label { grid-row: 3; color: var(--ink-2); font-size: var(--text-sm); }
.trend__now .trend__value,
.trend__now .trend__label { color: var(--ink); font-weight: var(--weight-strong); }
.trend__now .trend__bar rect { fill: var(--ink); }
details.disclosure > summary {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target);
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
details.disclosure > summary:hover { color: var(--brand-pressed); text-decoration-thickness: 2px; }
details.disclosure[open] > summary { margin-block-end: var(--space-2); }

/* --- Shelf summary -------------------------------------------------------------------- */
.shelves { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.counts { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.counts li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.counts__n { font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }

/* --- Needs attention: what it is, what happens if it lapses, by when ------------------ */
.issue { display: grid; gap: var(--space-3) var(--space-6); padding: var(--space-4); }
.issue__main { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.issue__signals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.issue__title { font-size: var(--text-lg); }
.issue__where { color: var(--ink-2); font-size: var(--text-sm); }
.issue__label { font-weight: var(--weight-strong); }
.issue__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
@container (min-width: 44em) {
  .issue { grid-template-columns: minmax(0, 1fr) auto; }
  .issue__act { flex-direction: column; align-items: flex-end; text-align: end; }
}

/* --- Entrance: sign-in and the steps around it ---------------------------------------- */
.entrance { display: flex; flex-direction: column; min-block-size: 100vh; min-block-size: 100dvh; }
.entrance__top { display: flex; justify-content: flex-end; padding: var(--space-1) var(--space-3); }
.entrance__top a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target); padding-inline: var(--space-2); }
.entrance__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-4) var(--space-7);
}
@media (min-width: 40em) { .entrance__main { padding-block-start: var(--space-7); } }
.entrance__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.entrance__logo { display: block; inline-size: 10rem; block-size: auto; color: var(--logo); }
.entrance__tagline { color: var(--ink-2); text-wrap: balance; }
.entrance__panel { inline-size: 100%; max-inline-size: 28rem; gap: var(--space-5); padding: var(--space-5); }
@media (max-width: 30em) { .entrance__panel { padding: var(--space-4); } }
.entrance__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4);
  color: var(--ink-2);
  font-size: var(--text-sm);
}
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-2); font-size: var(--text-sm); }
.divider::before,
.divider::after { content: ""; flex: 1; border-block-start: var(--border) solid var(--hairline); }
.input--code {
  max-inline-size: 13rem;
  font-size: var(--text-xl);
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}
.feature-icon {
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: var(--radius-round);
  background: var(--paper-2);
  color: var(--ink);
}
.feature-icon .icon { inline-size: 2.5rem; block-size: 2.5rem; }
.ticks { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: flex-start; gap: var(--space-2); }
.ticks .icon { margin-block-start: 0.15em; color: var(--ink-2); }

/* --- Facts: label and value pairs ------------------------------------------------ */
/* <dl class="facts"><dt>Where</dt><dd>Back stairs</dd>…</dl>. Side by side when
   there is room, label above value when there is not. */
.facts {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  margin: 0;
}
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; min-inline-size: 0; }
@container (max-width: 28em) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd { margin-block-end: var(--space-3); }
}

/* --- History: what happened, when, by whom ----------------------------------------- */
/* <ol class="list history"><li><span class="history__date">…</span>
   <div><p class="history__what">…</p><p class="history__who">…</p></div></li></ol>
   Newest first. Nothing in it can be edited: it is the record. */
.history > li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.history__date { color: var(--ink-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; padding-block-start: 0.1em; }
.history__what { font-weight: var(--weight-strong); }
.history__who { color: var(--ink-2); font-size: var(--text-sm); }
@container (max-width: 30em) {
  .history > li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* --- A file that is filed, or about to be ------------------------------------------- */
.doc-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.doc-file > .icon { inline-size: 2rem; block-size: 2rem; color: var(--ink-2); }
.doc-file__text { display: flex; flex: 1 1 12rem; flex-direction: column; min-inline-size: 0; }
.doc-file__name { font-weight: var(--weight-strong); overflow-wrap: anywhere; }
.doc-file__meta { color: var(--ink-2); font-size: var(--text-sm); }

/* A photo that is filed in the vault but not shown inline. */
.photo-slot {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  max-inline-size: 22rem;
  aspect-ratio: 4 / 3;
  padding: var(--space-4);
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper-2);
  color: var(--ink-2);
  text-align: center;
}
.photo-slot .icon { inline-size: 2rem; block-size: 2rem; }

/* --- Scanned pages on the phone ------------------------------------------------------ */
.thumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.thumb {
  inline-size: 5.5rem;
  aspect-ratio: 17 / 22;
  padding: 0.5rem;
  border: var(--border) solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--control-border);
}
.thumb svg { display: block; inline-size: 100%; block-size: 100%; }

/* --- Lock screen: PIN dots and keypad ------------------------------------------------- */
.lock { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.lock__symbol { inline-size: 3rem; block-size: auto; color: var(--logo); }
.pin { display: flex; justify-content: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pin__dot {
  inline-size: 1rem;
  block-size: 1rem;
  border: var(--border-strong) solid var(--ink);
  border-radius: var(--radius-round);
}
.pin__dot.is-filled { background: var(--ink); }
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 4.5rem);
  gap: var(--space-3) var(--space-5);
  justify-content: center;
}
.keypad__key {
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius-round);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
  cursor: pointer;
}
.keypad__key:hover { background: var(--paper-2); }
.keypad__key--quiet { border-color: transparent; background: transparent; color: var(--brand); font-size: var(--text-md); }
@media (max-width: 20em) {
  .keypad { grid-template-columns: repeat(3, var(--target)); gap: var(--space-2); }
  .keypad__key { inline-size: var(--target); block-size: var(--target); font-size: var(--text-md); }
}

/* --- The iPhone app -------------------------------------------------------------------- */
/* The same shell with four tabs at every width (Today, Inbox, Documents, Me)
   and no sidebar: administration stays on the web. */
.app--ios .page { max-inline-size: 40rem; }
@media (min-width: 64em) {
  .app--ios { display: block; }
  .app--ios .tabbar { display: grid; }
  .app--ios .app-main { padding-block-end: calc(3.5rem + env(safe-area-inset-bottom)); }
}
.back-link { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--target); }

/* --- Printed letter (receipts, acknowledgments) --------------------------------------- */
/* One US Letter page. On screen it sits on the paper like a sheet; printed,
   it is black on white with one-inch margins. */
.letter {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  max-inline-size: 8.5in;
  min-block-size: 11in;
  margin-inline: auto;
  padding: 0.8in 0.9in;
  background: var(--card);
  color: var(--ink);
  font-size: 12pt;
  line-height: 1.45;
}
.letter p { max-inline-size: none; }
.letter__head { display: flex; align-items: center; gap: 1em; padding-block-end: 1em; border-block-end: 1px solid var(--ink); }
.letter__logo { inline-size: 0.6in; block-size: 0.6in; }
.letter__org { font-size: 14pt; font-weight: var(--weight-strong); line-height: 1.2; }
.letter__address { font-size: 10pt; color: var(--ink-2); }
.letter__receipt { inline-size: 100%; border-collapse: collapse; font-size: 11pt; }
.letter__receipt th,
.letter__receipt td { padding: 0.35em 0.6em; border: 1px solid var(--ink); text-align: start; vertical-align: top; }
.letter__receipt th { inline-size: 40%; font-weight: var(--weight-strong); }
.letter__signature { display: flex; flex-direction: column; gap: 0.2em; }
.letter__line { inline-size: 2.6in; margin-block: 2.2em 0.3em; border-block-start: 1px solid var(--ink); }
.letter__foot { margin-block-start: auto; padding-block-start: 1em; border-block-start: 1px solid var(--ink-2); color: var(--ink-2); font-size: 9.5pt; }
.letter-page { padding: var(--space-5) var(--space-3); }
@media (max-width: 40em) {
  .letter { min-block-size: 0; padding: var(--space-5) var(--space-4); font-size: var(--text-md); }
}

.error-code { font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: 0.06em; }

/* --- An email as it arrives ------------------------------------------------------------- */
.mail { display: flex; flex-direction: column; gap: 0; max-inline-size: 40rem; padding: 0; overflow: hidden; }
.mail__head { padding: var(--space-4) var(--space-5); border-block-end: var(--border) solid var(--hairline); background: var(--paper-2); }
.mail__head .facts { gap: var(--space-1) var(--space-4); }
.mail__body { padding: var(--space-5); white-space: pre-line; overflow-wrap: anywhere; }

/* --- Very large text on a phone ------------------------------------------------ */
/* 200% text on a phone leaves about 11em of width. Headings step down one
   size, padding tightens and long words hyphenate instead of breaking at
   random. Nothing scrolls sideways. */
@media (max-width: 20em) {
  body { hyphens: auto; -webkit-hyphens: auto; }
  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-lg); }
  .page { padding-inline: var(--space-3); }
  .card, .entrance__panel { padding: var(--space-3); }
  .task, .issue, .menu-item { padding-inline: var(--space-3); }
  .app-bar .icon-button { display: none; }
  .mail__head, .mail__body { padding: var(--space-3); }
  .menu-item { grid-template-columns: minmax(0, 1fr) auto; }
  .menu-item > .icon:last-child { display: none; }
}

/* --- Standalone links are 44px targets too ------------------------------------ */
/* A link that stands on its own (a title, "See all", a footer link) gets a
   44px-tall hit area. Padding with an equal negative margin grows the target
   without moving anything. Links inside running text stay as they are. */
.task__title,
.table__primary a,
.card__title a,
.issue__title a,
.card__footer > a:not(.button),
.section__header a,
.photo-slot a,
details.disclosure p a {
  padding-block: 0.75rem;
  margin-block: -0.75rem;
}
.app-footer a,
.entrance__foot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target);
  min-inline-size: var(--target);
}
.app-footer,
.entrance__foot { align-items: center; }

/* --- Windows high contrast -------------------------------------------------------- */
/* --- 1.4: what the product needed ------------------------------------------------- */
/* The organization before it has a logo of its own: its first letter, in ink. */
.org__mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-weight: var(--weight-strong);
  line-height: 1;
}

/* A button that reads as a link: the language switch, which has to POST. */
button.link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
button.link:focus-visible { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-gap); }
.app-footer .link,
.entrance__top .link,
.entrance__foot .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target);
  min-inline-size: var(--target);
}
.app-footer form,
.entrance__top form,
.entrance__foot form { display: contents; }

/* A number of minutes beside a Done button. */
.input--tiny { inline-size: 7rem; max-inline-size: 7rem; }
.task__end form { flex-wrap: wrap; gap: var(--space-2); }

/* Short standalone links are 44px wide as well as tall ("Open" under a card). */
.card__footer > a:not(.button) { min-inline-size: var(--target); }
/* A link that is the whole value of a fact, or a paragraph of its own in the sign-in panel. */
.facts dd > a:only-child,
.entrance__panel > p > a:only-child { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }

/* A card that opens and closes: its heading is the 44px target, a chevron says so. */
details.card > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-block-size: var(--target);
  cursor: pointer;
  list-style: none;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary .card__meta { margin-inline-start: auto; }
details.card > summary::after {
  content: "";
  inline-size: 0.55rem;
  block-size: 0.55rem;
  margin-inline-end: 0.2rem;
  border: solid var(--ink-2);
  border-width: 0 2px 2px 0;
  transform: translateY(-25%) rotate(45deg);
}
details.card[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
details.card > summary:focus-visible { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-gap); border-radius: var(--radius-sm); }

/* A receipt with one row per gift: every column as wide as it needs. */
.letter__receipt--rows th { inline-size: auto; }
.letter h2 { font-size: 13pt; }

/* Targets found short on the converted pages: a one-word crumb or disclosure,
   a link alone in a table cell or beside a status, a document's name. */
.breadcrumb a,
details.disclosure > summary { min-inline-size: var(--target); }
.table td > a:only-child { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
.cluster > a:not(.button) { display: inline-flex; align-items: center; min-block-size: var(--target); }
a.doc-file__name { display: inline-flex; align-items: center; min-block-size: var(--target); }

/* A monthly trend: as many bars as there are months, up to a year. */
.trend--months { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-inline-size: 36rem; }

/* Something to copy exactly, such as a private calendar address. */
.code-block {
  display: block;
  padding: var(--space-3);
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  user-select: all;
}

/* A row of tags or chips as a list: no bullets, no indent. */
.plain-row { margin: 0; padding: 0; list-style: none; }

/* Disclosures side by side; the one that opens takes the whole row. */
.cluster > details[open] { flex-basis: 100%; }

/* The CSRF field opens most forms; it takes no space, so it adds no gap either. */
.stack > input[type="hidden"] + * { margin-block-start: 0; }

/* Long words at 200% text: a column may shrink below its longest word, which then wraps. */
.split > *,
.choice__text { min-inline-size: 0; }
.banner { grid-template-columns: auto minmax(0, 1fr); }
.banner__text,
.banner__title,
.choice__text { overflow-wrap: break-word; hyphens: auto; }

/* What only makes sense on a screen: back links and buttons above a letter. */
@media print { .screen-only, .breadcrumb { display: none; } }

/* Three or four tabs: Documents shows only to those who may open it. */
.tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* Messages after a form: calm banners at the top of the page, which stay until
   the next page, so nobody has to catch them before they vanish. */
.messages { display: flex; flex-direction: column; gap: var(--space-3); }

/* Pages with no organization around them: privacy, help, an ended membership. */
.site-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-block-end: var(--border) solid var(--hairline);
  background: var(--paper);
}
.site-bar__home { display: inline-flex; align-items: center; min-block-size: var(--target); color: var(--logo); }
.site-bar__logo { display: block; inline-size: 7rem; block-size: auto; }
.site-bar__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.site-bar__links a { display: inline-flex; align-items: center; min-block-size: var(--target); }

@media (forced-colors: active) {
  .tag, .severity, .button, .card, .banner, .toast, .empty, .confirmation, .upload, .file { border: 1px solid CanvasText; }
  .choice input:checked, .choice input:indeterminate { background: Highlight; border-color: Highlight; }
  .choice input::before { border-color: HighlightText; }
  .choice input[type="radio"]::before { background: Highlight; }
  .tabs__tab[aria-current="page"] { border-block-end-color: Highlight; }
  .pagination [aria-current="page"] { border: 2px solid Highlight; }
  .nav-item[aria-current="page"], .tabbar__item[aria-current="page"] { border: 2px solid Highlight; }
  .pin__dot.is-filled { background: CanvasText; }
  .keypad__key, .thumb, .photo-slot { border: 1px solid CanvasText; }
  .list, .menu-item__icon, .avatar, .feature-icon { border: 1px solid CanvasText; }
}

@page { size: letter; margin: 0.75in 0.9in; }

/* --- Print: black on white, every state still readable by icon and word ------------ */
@media print {
  /* !important so print wins over every palette and theme. */
  :root, [data-theme], [data-palette] {
    color-scheme: light;
    --paper: #FFFFFF !important; --paper-2: #FFFFFF !important; --card: #FFFFFF !important;
    --ink: #000000 !important; --ink-2: #333333 !important; --hairline: #999999 !important; --control-border: #666666 !important;
    --logo: #000000 !important;
    --brand: #000000 !important; --brand-tint: #FFFFFF !important; --on-brand: #FFFFFF !important;
    --brick: #000000 !important; --amber: #000000 !important; --plum: #000000 !important; --moss: #000000 !important; --grey: #333333 !important;
  }
  body, [data-theme] { background: #FFFFFF; color: #000000; }
  .tag { background: none; border: 1px solid currentColor; }
  .card, .table tr, .banner, .confirmation { break-inside: avoid; }
  .skip-link, .tabs, .pagination, .toast-region, .actions, .toast__close,
  .app-bar, .sidebar, .tabbar, .app-footer, .task__end, .issue__act .button { display: none; }
  .app { display: block; }
  .app-main { padding: 0; }
  .task, .issue, .history > li { break-inside: avoid; }
  .letter-page { padding: 0; }
  .letter { max-inline-size: none; min-block-size: 0; padding: 0; font-size: 12pt; }
  .letter__logo { filter: grayscale(1); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}