/* ==========================================================================
   K24 Admin — layered on top of the public styles.css, which supplies the
   design tokens, fonts, resets and the .btn / .form primitives.
   Nothing here redefines a token; drift between the two is the failure mode.
   ========================================================================== */

.adm { background: var(--surface); min-height: 100svh; display: flex; flex-direction: column; }

/* ---------- Top bar ---------- */
.adm__bar {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  /* The clamp above is the right COLUMN gap but a wasteful row gap: once the
     bar wraps it spent 40px separating two rows that are 30px tall each. */
  row-gap: .5rem;
  padding: .7rem clamp(1rem, 3vw, 2rem);
  background: var(--night); color: var(--on-night);
  border-bottom: 1px solid var(--night-line);
  position: sticky; top: 0; z-index: var(--z-sticky);
  flex-wrap: wrap;
}
.adm__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--on-night); }
.adm__brand b { font-family: var(--font-display); font-size: 1rem; letter-spacing: -.01em; display: block; }
.adm__mark { width: 30px; height: 30px; display: block; flex: none; }
.adm__mark svg { width: 100%; height: 100%; }
.adm__brandsub {
  display: block; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .12em; color: var(--on-night-soft);
}

.adm__nav { display: flex; gap: .3rem; flex-wrap: wrap; margin-right: auto; }
.adm__nav a {
  text-decoration: none; color: var(--on-night-soft);
  font-size: .9rem; padding: .45rem .8rem; border-radius: 8px;
  white-space: nowrap; transition: background .2s, color .2s;
}
.adm__nav a:hover { color: var(--on-night); background: color-mix(in oklab, var(--on-night) 10%, transparent); }
.adm__nav a[aria-current="page"] { color: var(--on-night); background: var(--night-3); }

/* margin-left:auto so this hugs the right edge on whichever row it lands.
   The bar wraps once the nav reaches twelve items plus the weather chip, and
   without this the wrapped row reads as an accident: chip and user crowded at
   the left with a hole where the rest of the bar should be. */
.adm__who { display: flex; align-items: center; gap: .75rem; font-size: .85rem; margin-left: auto; }
.adm__role {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: 999px;
  background: color-mix(in oklab, var(--taxi) 22%, transparent);
  color: var(--on-night); border: 1px solid color-mix(in oklab, var(--taxi) 45%, transparent);
}
.adm__user { color: var(--on-night-soft); }
.adm__out { color: var(--on-night-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.adm__out:hover { color: var(--beacon-glow); border-bottom-color: currentColor; }

/* ---------- Main + footer ---------- */
.adm__main { flex: 1; width: 100%; max-width: 1180px; margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1rem, 3vw, 2rem); }
/* Chromeless pages (sign-in, forced password change) paint edge to edge; the
   1180px cap would otherwise leave light gutters beside the dark panel. */
.adm__main--bare { max-width: none; padding: 0; }
.adm__foot {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
  border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .74rem;
  letter-spacing: .04em;
}

.adm h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); letter-spacing: -.025em; }
.adm h2 { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -.01em; margin-bottom: 1rem; }
.adm__lede { color: var(--ink-soft); margin-top: .5rem; max-width: 68ch; }
.adm__section { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Stat tiles ---------- */
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(.7rem, 1.5vw, 1rem); margin-top: 1.5rem; }
.adm-stat {
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem; text-decoration: none; color: inherit;
  transition: transform .18s var(--ease-out), box-shadow .2s, border-color .2s;
}
a.adm-stat:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -28px rgba(20,30,45,.5); }
.adm-stat__k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.adm-stat__v { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.adm-stat__s { font-size: .8rem; color: var(--ink-soft); }
.adm-stat--good { border-left-color: #37b24d; }
.adm-stat--warn { border-left-color: var(--tungsten); }
.adm-stat--bad  { border-left-color: var(--beacon); }
.adm-stat--bad .adm-stat__v { color: var(--beacon-deep); }

/* ---------- Tables ---------- */
/* Scroll shadows on the right edge when a table is wider than its wrapper.
   Without them a phone user has no way to know the State column exists at all —
   the table simply looks like it ends. The gradients are painted against the
   scroll container, so they appear only when there is genuinely more to see and
   fade out at the end, which is the affordance doing its job.
   background-attachment: local makes the cover panels move WITH the content;
   scroll pins the shadows to the frame. */
.adm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(to right,  var(--bg) 30%, transparent) left  / 2.5rem 100% no-repeat,
    linear-gradient(to left,   var(--bg) 30%, transparent) right / 2.5rem 100% no-repeat,
    radial-gradient(farthest-side at 0    50%, color-mix(in oklab, var(--ink) 14%, transparent), transparent) left  / .9rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, color-mix(in oklab, var(--ink) 14%, transparent), transparent) right / .9rem 100% no-repeat,
    var(--bg);
  background-attachment: local, local, scroll, scroll, local;
}
.adm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.adm-table th, .adm-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table th {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--surface); white-space: nowrap;
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table td.mono, .adm-table th.mono { font-family: var(--font-mono); }
.adm-table .num { text-align: right; font-family: var(--font-mono); }

.adm-pill {
  display: inline-block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .22rem .5rem; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-soft);
}
.adm-pill--new  { background: color-mix(in oklab, var(--taxi) 18%, var(--bg)); color: var(--taxi-ink); }
.adm-pill--warn { background: color-mix(in oklab, var(--tungsten) 26%, var(--bg)); color: oklch(0.44 0.085 72); }
.adm-pill--bad  { background: color-mix(in oklab, var(--beacon) 14%, var(--bg)); color: var(--beacon-deep); }
.adm-pill--good { background: color-mix(in oklab, #37b24d 15%, var(--bg)); color: #237a33; }

/* Caveat text under a table: explains what the data does NOT say. */
.adm-note { margin-top: .8rem; font-size: .85rem; color: var(--ink-soft); max-width: 76ch; }
.adm-note code {
  font-family: var(--font-mono); font-size: .82em; padding: .1rem .3rem;
  background: var(--surface-2); border-radius: 4px;
}

/* ---------- Flash messages ---------- */
.adm-flash { padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .92rem; margin-top: 1.25rem; }
.adm-flash--ok  { background: color-mix(in oklab, #37b24d 14%, var(--bg)); color: #237a33; border: 1px solid color-mix(in oklab, #37b24d 35%, var(--bg)); }
.adm-flash--err { background: color-mix(in oklab, var(--beacon) 12%, var(--bg)); color: var(--beacon-deep); border: 1px solid color-mix(in oklab, var(--beacon) 35%, var(--bg)); }

/* ---------- Filter tabs ---------- */
.adm-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0 1.25rem; }
.adm-tabs a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft);
  font-size: .9rem; transition: border-color .2s, color .2s, background .2s;
}
.adm-tabs a:hover { border-color: var(--beacon); color: var(--beacon-deep); }
.adm-tabs a[aria-current="page"] { background: var(--night); border-color: var(--night); color: var(--on-night); }
.adm-tabs a span { font-family: var(--font-mono); font-size: .78rem; opacity: .75; }

/* ---------- Message list ---------- */
.adm-msgs { display: flex; flex-direction: column; gap: .6rem; }
.adm-msg { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); overflow: clip; }
.adm-msg > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  justify-content: space-between; padding: .85rem 1.1rem; cursor: pointer; list-style: none;
}
.adm-msg > summary::-webkit-details-marker { display: none; }
.adm-msg > summary:hover { background: var(--surface); }
.adm-msg[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface); }
.adm-msg__who { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.adm-msg__when { font-size: .8rem; color: var(--ink-soft); }
.adm-msg__body { padding: 1.1rem; }
.adm-msg__text {
  margin: 1rem 0; padding: .9rem 1.1rem; background: var(--surface);
  border-left: 3px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6;
}
.adm-msg__acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.adm-msg__acts form { margin: 0; }
.adm-msg__meta { margin-top: .9rem; font-size: .74rem; color: var(--ink-soft); }
.btn--sm { padding: .5rem .9rem; font-size: .87rem; }

/* Key/value pairs */
.adm-kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.1rem; margin: 0; }
.adm-kv dt {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); padding-top: .15rem;
}
.adm-kv dd { margin: 0; }
@media (max-width: 560px) { .adm-kv { grid-template-columns: 1fr; gap: .1rem .5rem; } .adm-kv dd { margin-bottom: .5rem; } }

/* ---------- Empty states ---------- */
.adm-empty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; color: var(--ink-soft); background: var(--bg);
}
.adm-empty p { margin: 0; }
.adm-empty__d { margin-top: .5rem !important; font-size: .87rem; opacity: .85; }

/* ---------- Login ---------- */
.adm-login {
  min-height: 100svh; display: grid; place-items: center;
  padding: 2rem 1.15rem; background: var(--night); color: var(--on-night);
}
.adm-login__card { width: 100%; max-width: 400px; }
.adm-login__brand { display: flex; align-items: center; gap: .8rem; justify-content: center; margin-bottom: 1.75rem; }
.adm-login__brand svg { width: 40px; height: 40px; }
.adm-login__brand b { font-family: var(--font-display); font-size: 1.15rem; display: block; }
.adm-login__brand span span {
  display: block; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .12em; color: var(--on-night-soft);
}
.adm-login__box {
  background: var(--night-2); border: 1px solid var(--night-line);
  border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2rem);
}
.adm-login__box h1 { font-size: 1.25rem; margin-bottom: 1.25rem; color: var(--on-night); }
.adm-login label {
  display: block; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-soft); margin-bottom: .35rem;
}
.adm-login input[type="text"], .adm-login input[type="password"] {
  width: 100%; font: inherit; font-size: 1rem; padding: .7rem .85rem;
  background: var(--night); color: var(--on-night);
  border: 1px solid var(--night-line); border-radius: var(--radius-sm);
}
.adm-login input:focus { outline: none; border-color: var(--taxi); }
.adm-login__row + .adm-login__row { margin-top: 1rem; }
.adm-login .btn { width: 100%; justify-content: center; margin-top: 1.4rem; }
.adm-login__err {
  background: color-mix(in oklab, var(--beacon) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--beacon) 45%, transparent);
  color: #fff; padding: .7rem .85rem; border-radius: var(--radius-sm);
  font-size: .9rem; margin-bottom: 1.1rem;
}
.adm-login__back { display: block; text-align: center; margin-top: 1.5rem; font-size: .85rem; color: var(--on-night-soft); text-decoration: none; }
.adm-login__back:hover { color: var(--taxi); }

/* Change-password form when NOT in the forced full-screen state: same fields,
   rendered on the light admin surface inside the normal chrome. */
.adm-pwcard { max-width: 400px; }
.adm-pwbox { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2rem); }
.adm-pwbox h1 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.adm-pwbox label {
  display: block; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem;
}
.adm-pwbox input[type="password"] {
  width: 100%; font: inherit; font-size: 1rem; padding: .7rem .85rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.adm-pwbox input:focus { outline: none; border-color: var(--beacon); }
.adm-pwbox .adm-login__err { background: color-mix(in oklab, var(--beacon) 12%, var(--bg)); color: var(--beacon-deep); border-color: color-mix(in oklab, var(--beacon) 35%, var(--bg)); }
.adm-pwbox .btn { width: 100%; justify-content: center; margin-top: 1.4rem; }

@media (max-width: 640px) {
  .adm__bar { gap: .6rem 1rem; }
  .adm__nav { order: 3; width: 100%; margin-right: 0; }
  .adm__who { margin-left: auto; }
  .adm__brandsub { display: none; }
}

/* ---------- Callout: explains a design guarantee, not a status ---------- */
.adm-callout {
  margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: var(--radius);
  background: color-mix(in oklab, var(--taxi) 9%, var(--bg));
  border: 1px solid color-mix(in oklab, var(--taxi) 30%, var(--bg));
  font-size: .92rem; line-height: 1.6; max-width: 82ch;
}
.adm-callout strong { display: block; margin-bottom: .25rem; }
.adm-callout code {
  font-family: var(--font-mono); font-size: .85em; padding: .1rem .3rem;
  background: var(--bg); border-radius: 4px;
}

.adm-count {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin-left: .6rem; font-weight: 400;
}

/* ---------- Forms ---------- */
.adm-form {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.6rem);
}
.adm-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.adm-form__row + .adm-form__row { margin-top: 1rem; }
.adm-form label {
  display: block; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
/* date, datetime-local and number were missing from this list, so every one of
   them across the admin rendered inline against its own label at browser
   default size instead of as a full-width field. Nine screens were affected. */
.adm-form input[type="text"], .adm-form input[type="email"], .adm-form select,
.adm-form input[type="date"], .adm-form input[type="datetime-local"],
.adm-form input[type="number"], .adm-form input[type="tel"], .adm-form textarea {
  display: block; width: 100%; margin-top: .35rem; font: inherit; font-size: .97rem;
  padding: .6rem .75rem; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-transform: none; letter-spacing: normal;
}
.adm-form input:focus, .adm-form select:focus { outline: none; border-color: var(--beacon); }
.adm-form__check {
  display: flex; align-items: center; gap: .5rem; align-self: end; padding-bottom: .6rem;
  text-transform: none; letter-spacing: normal; font-family: var(--font-body); font-size: .92rem;
  color: var(--ink);
}
.adm-form__check input { width: auto; margin: 0; }
.adm-form .btn { margin-top: 1.2rem; }

/* ---------- Breadcrumb + inline mini-forms ---------- */

/* ---------- Section tabs ----------
   For a module that spans several screens. Centred, and sitting ON the rule
   rather than above it, so the active tab reads as the front sheet of a set
   rather than a link that happens to be a different colour.

   Distinct from .adm-tabs, which is a pill FILTER inside one page (inbox
   status, invoice status). These navigate between pages; those narrow a list.
   Keeping them visually different keeps that difference legible.

   The 2px bottom rule on the container and the -2px margin on each tab are a
   pair: the active tab paints over the rule, which is what produces the
   "attached" look without any images or pseudo-element trickery. */
.adm-stabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 .1rem;
  margin: 0 0 1.75rem;
  border-bottom: 2px solid var(--line);
}
.adm-stabs a {
  position: relative;
  padding: .62rem 1.15rem;
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .93rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color .18s, background .18s, border-color .18s;
}
.adm-stabs a:hover {
  color: var(--ink);
  background: var(--surface-2);
  border-bottom-color: color-mix(in oklab, var(--ink) 22%, transparent);
}
.adm-stabs a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--beacon);
}
/* The label shifts by a fraction when it goes bold, which makes the whole row
   twitch as you move between tabs. Reserving the bold width up front holds
   every tab still. */
.adm-stabs a::after {
  content: attr(data-label);
  display: block; height: 0; overflow: hidden;
  font-weight: 700; visibility: hidden;
}

/* On a narrow screen the set SCROLLS rather than wraps.
   Wrapping put the last tab on a second row while the container rule stayed
   below it, so the active tab's underline no longer met the rule and the
   "front sheet of a set" reading fell apart — it just looked like two rows of
   links. Scrolling keeps every tab on the baseline.

   Centring is dropped while scrolling because a centred flex row with overflow
   clips the leading item unreachably in most browsers. Same scroll shadows as
   the tables, so it is visibly scrollable. */
@media (max-width: 40rem) {
  .adm-stabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    background:
      linear-gradient(to right, var(--bg) 30%, transparent) left  / 1.6rem 100% no-repeat,
      linear-gradient(to left,  var(--bg) 30%, transparent) right / 1.6rem 100% no-repeat,
      radial-gradient(farthest-side at 0    50%, color-mix(in oklab, var(--ink) 12%, transparent), transparent) left  / .7rem 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, color-mix(in oklab, var(--ink) 12%, transparent), transparent) right / .7rem 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .adm-stabs::-webkit-scrollbar { display: none; }
  .adm-stabs a { padding: .55rem .8rem; font-size: .9rem; }
}

.adm-crumb { margin-bottom: .5rem; font-size: .88rem; }
.adm-crumb a { color: var(--ink-soft); text-decoration: none; }
.adm-crumb a:hover { color: var(--beacon-deep); }

.adm-inline { display: flex; gap: .3rem; align-items: center; margin-top: .4rem; }
.adm-inline input[type="text"] {
  font: inherit; font-size: .85rem; padding: .3rem .45rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
}
.adm-form input[type="date"], .adm-form input[type="file"] {
  display: block; width: 100%; margin-top: .35rem; font: inherit; font-size: .93rem;
  padding: .55rem .7rem; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-transform: none; letter-spacing: normal;
}
.adm-form input[type="file"] { padding: .45rem; }
.adm-table a { color: var(--beacon-deep); }

.adm-actions { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-left: .8rem; vertical-align: middle; }
.adm-actions .btn { font-weight: 500; }
p.adm-actions { display: flex; margin-left: 0; }

/* .btn--ghost is built for the public site's dark hero, where --_fg is
   --on-night. On the admin's light surface that renders white on white and the
   button all but disappears. Re-point it for anything inside .adm. */
.adm .btn--ghost {
  --_fg: var(--ink);
  border-color: var(--line);
  backdrop-filter: none;
  box-shadow: none;
}
.adm .btn--ghost:hover {
  --_bg: var(--surface-2);
  --_fg: var(--ink);
  border-color: var(--ink-soft);
  transform: none;
}
/* Except in the dark top bar and the dark sign-in panel, where the original
   light-on-dark treatment is correct. */
.adm__bar .btn--ghost, .adm-login .btn--ghost { --_fg: var(--on-night); border-color: color-mix(in oklab, var(--on-night) 40%, transparent); }

.adm-periodbar { margin-top: 1.5rem; }
.adm-periodbar label {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.adm-periodbar input[type="month"] {
  display: block; margin-top: .35rem; font: inherit; font-size: .97rem;
  padding: .55rem .7rem; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.adm-table tfoot td { border-top: 2px solid var(--line); background: var(--surface); }

/* A disabled action must LOOK disabled. The generate button is rendered
   disabled whenever nothing is due, and in full primary red it read as the
   main call to action on the page — inviting a click that does nothing. */
.adm .btn[disabled],
.adm .btn[disabled]:hover {
  background: var(--surface-2); color: var(--ink-soft);
  border-color: var(--line); box-shadow: none;
  cursor: not-allowed; transform: none; opacity: 1;
}

/* A form field that needs the full width of the row rather than sharing it. */
.adm-form__full { display: block; margin-top: .9rem; }
/* .adm-form__row + .adm-form__row covers consecutive rows, but a row following
   a full-width block had no rule at all, so the two collided. */
.adm-form__full + .adm-form__row { margin-top: 1rem; }
.adm-form__full textarea { width: 100%; }

/* Dates and counts in a table read badly when they wrap mid-phrase — "Aug 2,
   2026 / 2 / days / late" over four lines on a phone. Keep them intact and let
   the wrapper scroll, which is what it is for. */
.adm-table td.mono { white-space: nowrap; }
.adm-table td.mono .adm-stat__s { white-space: nowrap; }

/* Document list. Deliberately plain — these are files to open, not data to
   scan, so a table would be more chrome than the content deserves. */
.adm-doclist { list-style:none; margin:.6rem 0 0; padding:0; }
.adm-doclist li { padding:.55rem 0; border-top:1px solid var(--line); }
.adm-doclist li:first-child { border-top:0; }
.adm-doclist a { font-weight:600; }
.adm-doclist .adm-stat__s { display:block; margin-top:.15rem; }

/* ---------- Month grid ----------
   Hand-rolled rather than FullCalendar, deliberately. Most events here are
   DERIVED — a work order's date belongs to the work order — so drag-to-
   reschedule would be actively wrong, and that is the main thing a calendar
   library buys you. Skipping it keeps the admin free of a CDN dependency, a
   build step and a CSP change, and the grid is a CSS grid and a for-loop.

   It server-renders, so it works with JavaScript off. */
.adm-cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: clip; margin-bottom: 1.75rem;
}
.adm-cal__dow {
  background: var(--surface-2); padding: .45rem .6rem; text-align: center;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.adm-cal__day {
  background: var(--bg); min-height: 6.5rem; padding: .35rem .4rem;
  display: flex; flex-direction: column; gap: .18rem;
}
.adm-cal__day.is-out { background: var(--surface); }
.adm-cal__day.is-out .adm-cal__num { opacity: .45; }
.adm-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--beacon); }
.adm-cal__num { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft); }
.adm-cal__day.is-today .adm-cal__num { color: var(--beacon-deep); font-weight: 700; }

/* Event chips. Filled bars rather than dots: at a glance you want to read the
   thing, not decode a colour key. */
.adm-cal__ev {
  display: block; font-size: .72rem; line-height: 1.25;
  padding: .16rem .34rem; border-radius: 4px; text-decoration: none;
  background: var(--surface-2); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.adm-cal__ev:hover { filter: brightness(.94); }
.adm-cal__ev b { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; }
/* A cancelled event stays visible and struck through rather than vanishing —
   the same reasoning as the feed tombstone: people need to see it was called
   off, not just fail to find it. */
.adm-cal__ev.is-cancelled { text-decoration: line-through; opacity: .6; }

@media (max-width: 48rem) {
  /* Seven columns of 56px is unreadable. Below this the grid becomes a single
     column of days that actually have something on them — which is the agenda
     view, and is what somebody on a phone wants anyway. */
  .adm-cal { grid-template-columns: 1fr; }
  .adm-cal__dow { display: none; }
  .adm-cal__day { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
  .adm-cal__day:not(:has(.adm-cal__ev)) { display: none; }
  .adm-cal__num::after { content: ' '; }
  .adm-cal__ev { white-space: normal; flex: 1 1 100%; }
}

/* ==========================================================================
   Compliance register + NOTAM log
   ========================================================================== */

/* ---- Compliance register: cards, not a table ----
   These are twenty narrative obligations, each with a citation and a paragraph
   of context, not tabular data. Putting the prose in <th scope="row"> inherited
   .adm-table th — uppercase, nowrap, 0.64rem mono — so descriptions rendered as
   clipped shouting that overlapped the next column. Cards let the text wrap,
   and read the same on a phone. */
.creglist { list-style: none; display: grid; gap: .9rem; margin-top: 1.2rem; }
@media (min-width: 1180px) { .creglist { grid-template-columns: 1fr 1fr; align-items: start; } }

.creg {
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius); background: var(--bg); padding: 1rem 1.15rem;
}
.creg--bad  { border-left-color: var(--beacon); }
.creg--warn { border-left-color: var(--tungsten); }
.creg--good { border-left-color: oklch(0.68 0.15 150); }

.creg__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.creg__name { font-family: var(--font-display); font-size: 1rem; letter-spacing: -.01em; line-height: 1.35; }
.creg__top .adm-pill { flex: none; }

.creg__meta {
  margin-top: .4rem; font-size: .78rem; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline;
}
.creg__meta a { color: var(--taxi-ink); }
.creg__sep { opacity: .5; }
.creg__cat { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }
.creg__opt { font-style: italic; }
.creg__ev  { color: color-mix(in oklab, var(--tungsten) 75%, var(--ink)); }

.creg__desc { margin-top: .6rem; font-size: .85rem; line-height: 1.55; color: var(--ink); }

/* The seeded notes carry the live findings — a sixteen-year-old obstruction
   survey, a state designation that may have lapsed, an FAA record showing zero
   based aircraft. They are the most valuable text on the page. */
.creg__note {
  margin-top: .55rem; padding: .5rem .7rem; border-radius: var(--radius-sm);
  border-left: 2px solid var(--tungsten);
  background: color-mix(in oklab, var(--tungsten) 9%, transparent);
  font-size: .8rem; line-height: 1.55; color: var(--ink);
}
.creg__trig { margin-top: .55rem; font-size: .8rem; color: var(--taxi-ink); line-height: 1.5; }

.creg__dates { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: .8rem;
               padding-top: .7rem; border-top: 1px solid var(--line); }
.creg__dates dt {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.creg__dates dd { font-size: .84rem; margin-top: .15rem; }
.creg__n { display: block; font-family: var(--font-mono); font-size: .66rem; color: var(--ink-soft); }

.creg__rec { margin-top: .8rem; }
.creg__rec summary {
  cursor: pointer; font-size: .8rem; color: var(--taxi-ink);
  list-style: none; display: inline-flex; align-items: center; gap: .3rem;
}
.creg__rec summary::-webkit-details-marker { display: none; }
.creg__rec summary::before { content: "＋"; font-family: var(--font-mono); font-size: .85em; }
.creg__rec[open] summary::before { content: "－"; }
.creg__form { display: grid; gap: .55rem; margin-top: .7rem; }
.creg__frow { display: grid; gap: .55rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .creg__frow { grid-template-columns: 1fr; } }
.creg__form label { display: grid; gap: .2rem; font-size: .72rem; color: var(--ink-soft); }
.creg__form input, .creg__form select, .creg__form textarea { font-size: .85rem; }
.creg__hint { font-size: .72rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }

/* ---- Daily NOTAM check ---- */
.ntmchk {
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; margin: 1.2rem 0;
  padding: 1rem 1.2rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); border-left: 3px solid var(--ink-soft);
  background: var(--surface);
}
.ntmchk h2 { font-size: 1rem; font-family: var(--font-display); letter-spacing: -.01em; }
.ntmchk p  { margin-top: .3rem; font-size: .86rem; color: var(--ink-soft); max-width: 62ch; }
.ntmchk--today   { border-left-color: oklch(0.68 0.15 150); }
.ntmchk--never,
.ntmchk--overdue { border-left-color: var(--beacon);
                   background: color-mix(in oklab, var(--beacon) 6%, var(--surface)); }
.ntmchk--yesterday { border-left-color: var(--tungsten); }
.ntmchk__form { display: grid; gap: .5rem; min-width: 16rem; }
.ntmchk__form label { display: grid; gap: .2rem; font-size: .72rem; color: var(--ink-soft); }
.ntmchk__n input { max-width: 7rem; }

/* ---- Needs action ---- */
.ntmact { display: grid; gap: .8rem; margin-top: .9rem;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.ntmact__i {
  border: 1px solid var(--line); border-left: 3px solid var(--tungsten);
  border-radius: var(--radius-sm); background: var(--surface); padding: .85rem 1rem;
}
.ntmact__i--urgent { border-left-color: var(--beacon);
                     background: color-mix(in oklab, var(--beacon) 5%, var(--surface)); }
.ntmact__i header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ntmact__num { font-size: .72rem; color: var(--ink-soft); }
.ntmact__hrs { margin-left: auto; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-soft); }
.ntmact__txt { margin-top: .5rem; font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.ntmact__adv { margin-top: .5rem; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }
.ntmact__f { display: flex; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; }
.ntmact__f input { flex: 1 1 8rem; font-size: .8rem; }

/* ---- Compose flags ---- */
.ntmflags { display: grid; gap: .6rem; margin-top: 1rem; }
/* These carry the two rules that actually cause accidents, so they have to be
   readable prose. Without the override they inherit .adm-form label — mono,
   0.66rem, uppercase — and the explanation shouts in a way nobody reads. */
.adm-form label.ntmflag {
  display: flex; gap: .55rem; align-items: flex-start;
  font-family: var(--font-body); font-size: .82rem; line-height: 1.55;
  letter-spacing: normal; text-transform: none; color: var(--ink-soft);
}
.adm-form label.ntmflag input[type="checkbox"] { margin-top: .25rem; flex: none; width: auto; }
.ntmflag b  { color: var(--ink); font-weight: 700; }
.ntmflag em { font-style: italic; }

/* ---- Log ---- */
.ntmlog__txt { font-size: .78rem; max-width: 28rem; overflow-wrap: anywhere; }
.ntmlog__eff { font-family: var(--font-mono); font-size: .72rem; white-space: nowrap; color: var(--ink-soft); }
.ntmlog__f { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.ntmlog__f input  { max-width: 7rem; font-size: .8rem; }
.ntmlog__f select { font-size: .8rem; }

/* ---- Weather chip in the admin bar ----
   .wx itself is defined in the public stylesheet, which the admin already
   loads; this only adds the station line and the wrapping behaviour the
   admin bar needs. */
.adm__wx { flex: none; text-decoration: none; }
.adm__wxstn {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--on-night-soft);
  padding-left: .5rem; margin-left: .1rem;
  border-left: 1px solid color-mix(in oklab, var(--on-night) 22%, transparent);
  white-space: nowrap;
}
/* The bar already wraps. Below ~1300px the nav has twelve items and the chip
   would push the user block onto its own line, so shed the least critical
   parts first — the reading matters more than where it came from. */
@media (max-width: 1300px) { .adm__wxstn { display: none; } }
@media (max-width: 1100px) { .adm__wx .wx__detail { display: none; } }
@media (max-width: 720px)  { .adm__wx { display: none; } }

/* ---- Screen-reader-only utility ----
   Added deliberately rather than reused from the public sheet, which has no
   such class. An icon-only control needs an accessible name, and a class that
   does not exist renders the "hidden" text in full view — which is how it was
   caught the first time. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Notification bell ---- */
.adm__bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  color: var(--on-night-soft); text-decoration: none;
  transition: background .2s, color .2s;
}
.adm__bell svg { width: 18px; height: 18px; }
.adm__bell:hover { color: var(--on-night); background: color-mix(in oklab, var(--on-night) 10%, transparent); }
.adm__bell--on { color: var(--on-night); }
.adm__belln {
  position: absolute; top: -2px; right: -3px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px;
  background: var(--beacon); color: #fff;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700; line-height: 17px;
  text-align: center; border: 2px solid var(--night);
}

/* ---- Notification list ---- */
.ntf__bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.ntf__bar .adm-stabs { margin: 0; flex: 1 1 auto; }
.ntf__allform { flex: none; }

.ntflist { list-style: none; display: grid; gap: .6rem; margin-top: 1.2rem; }
.ntf {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: .9rem 1.1rem; border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: var(--radius);
  background: var(--bg);
}
/* Unread is carried by weight and a filled rail, not by colour alone — the
   severity pill already owns colour, and two colour systems in one row read
   as noise. */
.ntf--unread { border-left-color: var(--taxi); background: color-mix(in oklab, var(--taxi) 5%, var(--bg)); }
.ntf--unread .ntf__subj { font-weight: 700; }
.ntf__main { flex: 1 1 auto; min-width: 0; }
.ntf__head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.ntf__rule { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em; color: var(--ink-soft); }
.ntf__when { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft); white-space: nowrap; }
.ntf__subj { margin-top: .45rem; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.ntf__body {
  margin-top: .35rem; font-size: .82rem; line-height: 1.5; color: var(--ink-soft);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.ntf__link { display: inline-block; margin-top: .5rem; font-size: .8rem; color: var(--taxi-ink); }
.ntf__form { flex: none; }
.ntf__read {
  font: inherit; font-size: .74rem; cursor: pointer; white-space: nowrap;
  padding: .3rem .6rem; border-radius: 999px;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--line);
}
.ntf__read:hover { color: var(--ink); border-color: var(--ink-soft); }
@media (max-width: 560px) { .ntf { flex-direction: column; gap: .6rem; } }

/* ==========================================================================
   People (users.php)
   ========================================================================== */

/* Credentials shown exactly once. Loud on purpose: if this is closed without
   being copied, the password is unrecoverable and the account needs resetting. */
.usr-creds {
  margin-top: 1.2rem; padding: 1.1rem 1.3rem; border-radius: var(--radius);
  border: 2px solid var(--beacon);
  background: color-mix(in oklab, var(--beacon) 7%, var(--bg));
}
.usr-creds h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0; }
.usr-creds p  { margin-top: .5rem; font-size: .88rem; color: var(--ink-soft); max-width: 66ch; }
.usr-creds__pair { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: .9rem; }
.usr-creds__pair dt {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.usr-creds__pair dd { font-size: 1.05rem; margin-top: .2rem; user-select: all; }
.usr-creds__pw {
  font-size: 1.15rem; font-weight: 700; letter-spacing: .02em;
  padding: .3rem .6rem; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--line);
}
.usr-creds__note { font-size: .8rem; }

.usr-roles { font-size: .85rem; line-height: 1.55; color: var(--ink-soft); min-height: 1.4em; }
.usr-hint  { font-size: .8rem; color: var(--ink-soft); margin-top: .4rem; }
.usr-hint a { color: var(--taxi-ink); }

.usr__name { display: block; font-weight: 600; }
.usr__meta { display: block; font-size: .72rem; color: var(--ink-soft); margin-top: .15rem; }
.usr__you  { font-size: .68rem; color: var(--ink-soft); font-style: italic; margin-left: .3rem; }
.usr__seen { font-size: .8rem; white-space: nowrap; }
.usr__never { color: var(--ink-soft); font-style: italic; }
.usr__rolef select { font-size: .82rem; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.usr__acts { display: flex; gap: .4rem; flex-wrap: wrap; }
/* Deactivated rows stay legible — they are still referenced by the audit log —
   but recede so the active roster reads first. */
.usr--off { opacity: .55; }
.usr-pwnote {
  align-self: end; font-size: .76rem; line-height: 1.5; color: var(--ink-soft);
  margin: 0 0 .55rem;
}

/* A class that sets `display` outranks the [hidden] attribute's UA rule, so
   .adm-form__full[hidden] stayed visible. Anything hidden must actually hide,
   whatever else claims a display value. */
[hidden] { display: none !important; }

/* ==========================================================================
   Board governance (board.php, meeting.php)
   ========================================================================== */
.brd-back { margin-bottom: .6rem; font-size: .85rem; }
.brd-back a { color: var(--taxi-ink); text-decoration: none; }
.brd-dash { color: var(--ink-soft); }

/* ---- Minutes outstanding ---- */
.brd-due { list-style: none; display: grid; gap: .5rem; margin-top: 1rem; }
.brd-due__i {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: .65rem .9rem; border: 1px solid var(--line);
  border-left: 3px solid var(--tungsten); border-radius: var(--radius-sm);
  background: var(--surface);
}
.brd-due__i--overdue { border-left-color: var(--beacon);
                       background: color-mix(in oklab, var(--beacon) 6%, var(--surface)); }
.brd-due__i a { font-weight: 600; color: var(--ink); text-decoration: none; }
.brd-due__i a:hover { text-decoration: underline; }
.brd-due__d, .brd-due__n { font-size: .78rem; color: var(--ink-soft); }
.brd-due__n { margin-left: auto; font-family: var(--font-mono); font-size: .7rem; }

/* ---- Meetings table ---- */
.brd-mt__t { font-weight: 600; color: var(--ink); text-decoration: none; }
.brd-mt__t:hover { text-decoration: underline; }
.brd-mt__k { display: block; font-family: var(--font-mono); font-size: .66rem;
             color: var(--ink-soft); margin-top: .15rem; }
.brd-mt__w { white-space: nowrap; font-size: .85rem; }

/* ---- Roster ---- */
.brd-roster { display: grid; gap: .8rem; margin-top: 1rem;
              grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.brd-m {
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius); background: var(--bg); padding: .9rem 1rem;
}
.brd-m--serving  { border-left-color: oklch(0.68 0.15 150); }
.brd-m--expiring { border-left-color: var(--tungsten); }
.brd-m--expired  { border-left-color: var(--beacon); }
.brd-m--former   { opacity: .55; }
.brd-m header { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.brd-m__n { font-weight: 700; }
.brd-m__o { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
            text-transform: uppercase; color: var(--taxi-ink); }
.brd-m__duty { margin-top: .35rem; font-size: .76rem; line-height: 1.5; color: var(--ink-soft); }
.brd-m__term { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .6rem;
               padding-top: .55rem; border-top: 1px solid var(--line); }
.brd-m__term dt { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em;
                  text-transform: uppercase; color: var(--ink-soft); }
.brd-m__term dd { font-size: .8rem; margin-top: .15rem; }
.brd-m__days { display: block; font-family: var(--font-mono); font-size: .66rem; color: var(--ink-soft); }
.brd-m__c { margin-top: .5rem; font-size: .74rem; color: var(--ink-soft); overflow-wrap: anywhere; }

/* ---- Notice compliance banner ---- */
.brd-notice { margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: var(--radius);
              border: 1px solid var(--line); border-left: 3px solid var(--ink-soft);
              background: var(--surface); }
.brd-notice h2 { font-size: 1rem; margin: 0; }
.brd-notice p  { margin-top: .45rem; font-size: .86rem; line-height: 1.55; color: var(--ink-soft); max-width: 72ch; }
.brd-notice form { margin-top: .7rem; }
.brd-notice--compliant    { border-left-color: oklch(0.68 0.15 150); }
.brd-notice--short_notice { border-left-color: var(--beacon);
                            background: color-mix(in oklab, var(--beacon) 7%, var(--surface)); }
.brd-notice--not_recorded { border-left-color: var(--tungsten);
                            background: color-mix(in oklab, var(--tungsten) 10%, var(--surface)); }

/* ---- Agenda ---- */
.brd-ag { margin-top: 1rem; padding-left: 1.4rem; display: grid; gap: .6rem; }
.brd-ag__i { padding: .55rem .8rem; border: 1px solid var(--line);
             border-left: 3px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.brd-ag__i--action         { border-left-color: var(--taxi); }
.brd-ag__i--closed_session { border-left-color: var(--beacon);
                             background: color-mix(in oklab, var(--beacon) 5%, var(--bg)); }
.brd-ag__t { font-weight: 600; }
.brd-ag__k { display: block; font-family: var(--font-mono); font-size: .64rem;
             letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-top: .15rem; }
.brd-ag__krs { display: inline-block; margin-top: .3rem; font-family: var(--font-mono);
               font-size: .7rem; color: var(--beacon-deep); }
.brd-ag__d { margin-top: .35rem; font-size: .82rem; color: var(--ink-soft); line-height: 1.5; }
.brd-locked { border-left: 3px solid var(--tungsten); padding-left: .7rem; }

/* ---- Roll call ---- */
.brd-roll { margin-top: 1rem; display: grid; gap: .4rem; }
.brd-roll__h { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
               text-transform: uppercase; color: var(--ink-soft); margin: .5rem 0 .4rem; }
.brd-roll__r { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
               padding: .4rem .6rem; border: 1px solid var(--line);
               border-radius: var(--radius-sm); background: var(--bg); }
.brd-roll__n { flex: 1 1 9rem; font-size: .88rem; font-weight: 600; }
.brd-roll__o { display: inline-flex; align-items: center; gap: .25rem;
               font-size: .76rem; color: var(--ink-soft); text-transform: none;
               font-family: var(--font-body); letter-spacing: normal; }
.brd-roll__o input { width: auto; margin: 0; }

/* ---- Motions ---- */
.brd-mo { display: grid; gap: .7rem; margin-top: 1rem; }
.brd-mo__i { border: 1px solid var(--line); border-left: 3px solid var(--taxi);
             border-radius: var(--radius); background: var(--bg); padding: .85rem 1rem; }
.brd-mo__t { font-weight: 600; line-height: 1.5; }
.brd-mo__by { margin-top: .3rem; font-size: .78rem; color: var(--ink-soft); }
.brd-mo__v { margin-top: .5rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.brd-mo__tally { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-soft); }
.brd-mo__roll { list-style: none; display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .5rem;
                padding-top: .5rem; border-top: 1px solid var(--line); }
.brd-mo__roll li { font-size: .74rem; color: var(--ink-soft); }
.brd-mo__vv { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }

/* ---- Minutes ---- */
.brd-genf { margin-top: .8rem; }
.brd-min { margin-top: .8rem; }
.brd-min__s { margin-top: .8rem; display: flex; align-items: center; gap: .6rem; }
.brd-min__d { font-size: .76rem; color: var(--ink-soft); }
.brd-min__b {
  width: 100%; font-family: var(--font-mono); font-size: .78rem; line-height: 1.6;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); white-space: pre-wrap;
}
.brd-min__b--ro { overflow-x: auto; }
.brd-min__acts { margin-top: .6rem; }

.brd-new { margin-top: 1rem; }
.brd-new summary { cursor: pointer; font-size: .85rem; color: var(--taxi-ink);
                   list-style: none; display: inline-flex; align-items: center; gap: .3rem; }
.brd-new summary::-webkit-details-marker { display: none; }
.brd-new summary::before { content: "＋"; font-family: var(--font-mono); }
.brd-new[open] summary::before { content: "－"; }
.brd-new .adm-form { margin-top: .7rem; }
.brd-warn { font-size: .78rem; line-height: 1.55; color: var(--ink-soft);
            margin-top: .7rem; padding-left: .7rem;
            border-left: 2px solid var(--tungsten); max-width: 76ch;
            font-family: var(--font-body); letter-spacing: normal; text-transform: none; }
/* The roll is a grid, so a button inside it stretches to the full row. */
.brd-roll > .btn { justify-self: start; }

/* ==========================================================================
   Support — the ResponseDesk link and the airport's own tickets
   ========================================================================== */
.rd-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem;
  padding: 1.1rem 1.3rem; border-radius: var(--radius);
  border: 1px solid var(--line); border-left: 3px solid var(--taxi);
  background: var(--bg);
}
.rd-card__txt { flex: 1 1 22rem; min-width: 0; }
.rd-card h3 { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -.01em; }
.rd-card__why { margin-top: .4rem; font-size: .85rem; line-height: 1.55; color: var(--ink-soft); max-width: 66ch; }
.rd-card .btn { flex: none; }

.rd-wrap { margin-top: 1rem; }
.rd-t__s { display: block; font-weight: 600; }
.rd-t__m { display: block; font-size: .7rem; color: var(--ink-soft); margin-top: .15rem; }
/* "nobody has answered you yet" is the thing a client most wants to see at a glance, so it gets
   words rather than another colour competing with the status pill. */
.rd-t__await { display: block; font-size: .7rem; color: var(--ink-soft); margin-top: .25rem; font-style: italic; }
.rd-t__when { white-space: nowrap; font-size: .82rem; }
.rd-t__who  { display: block; font-size: .68rem; color: var(--ink-soft); }