/* ArcAngel CRM — navy / gold, carried over from the ArcAngel brand sheet.
   Token names are shared with ArcAngel School Manager (docs/INTERFACE.md §3)
   so a component can be lifted between the two products without rework. */
:root {
  --navy: #0b1f3a;
  --navy-dark: #071627;
  --navy-2: #16345c;
  --navy-3: #22497c;
  --gold: #c9a227;
  --gold-light: #e2c766;
  --gold-2: var(--gold-light);   /* older name, kept so existing rules still resolve */

  /* White-label accent. Decorative edges and rules only — never behind text,
     so any colour a customer picks stays readable. */
  --brand-accent: var(--gold);

  /* White-label header. These default to the ArcAngel palette, so an
     organization that sets nothing is pixel-identical to the platform. When
     one sets a header colour, _brand_style.html overrides them with
     server-computed, contrast-checked shades — see apps/orgs/branding.py. */
  --header-bg: var(--navy);
  --header-ink: #ffffff;
  --header-ink-dim: #dfe6f0;
  --header-muted: #b9c3d4;
  --header-active: var(--gold-light);
  --header-hover: var(--navy-2);

  --bg: #f4f6f9;
  --card: #ffffff;
  --ink: #17202b;
  --muted: #5c6470;
  --line: #dde1e8;
  --line-2: #eef1f5;
  --danger: #b3261e;
  --danger-bg: #fdecea;
  --ok: #1e6b3c;
  --ok-bg: #e8f4ec;
  --warn: #8a5a00;
  --warn-bg: #fdf3e0;
  --info-bg: #eaf1fb;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 27, 43, .08), 0 2px 12px rgba(16, 27, 43, .05);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* Column layout so the footer sits at the bottom of a short page rather
     than floating halfway up it. */
  min-height: 100vh; display: flex; flex-direction: column;
}

a { color: var(--navy-3); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
small, .small { font-size: .82rem; }
.muted { color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
/* A top bar, not a left sidebar (docs/INTERFACE.md §2). */
/* One page width for the app and an organization's front door (the operator,
   25 October 2026: use more of a wide screen). Reading measures (forms, the
   legal pages) keep their own narrower widths. */
:root { --page-max: 1480px; }
main.container { padding: 1.25rem; max-width: var(--page-max); width: 100%; margin: 0 auto; flex: 1; }
main { padding: 1.25rem; max-width: var(--page-max); width: 100%; margin: 0 auto; }

/* ---------- top bar ---------- */
.topbar {
  background: var(--header-bg); color: var(--header-ink);
  display: flex; align-items: center; gap: 1.25rem;
  padding: .65rem 1.25rem;
  border-bottom: 3px solid var(--brand-accent);
  position: sticky; top: 0; z-index: 30;
}
.topbar .spacer { flex: 1; }
.topbar form { margin: 0; }
.topbar-collapse { display: flex; align-items: center; gap: 1.25rem; flex: 1; }
.nav-toggle { display: none; }

.brand {
  font-size: 1.1rem; color: var(--header-ink); text-decoration: none;
  letter-spacing: .02em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .55rem;
}
.brand:hover { text-decoration: none; }
.brand .accent { color: var(--gold); }
/* No colour filter: the crest assets are already the right colour for the
   header they sit on, and a filter would flatten the mark's interior detail
   to a silhouette — and would recolour a tenant's own logo. */
.brand-logo { height: 28px; width: auto; max-width: 180px; display: block; border-radius: 3px; }
.brand-name { overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }

.topbar nav { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.topbar nav a {
  color: var(--header-ink-dim); text-decoration: none; padding: .35rem .7rem;
  border-radius: 6px; font-size: .95rem;
}
.topbar nav a:hover { background: var(--header-hover); color: var(--header-ink); text-decoration: none; }
.topbar nav a.active { background: var(--header-hover); color: var(--header-active); }
.topbar nav a.nav-cta {
  background: var(--gold); color: var(--navy); font-weight: 600;
}
.topbar nav a.nav-cta:hover { background: var(--gold-light); color: var(--navy); }
.topbar .whoami { color: var(--header-muted); font-size: .85rem; }

/* Grouped navigation. <details> opens without JavaScript and is
   keyboard-navigable by default, which a custom dropdown would have to
   re-earn. */
.menu { position: relative; display: inline-block; }
.menu summary {
  list-style: none; cursor: pointer; color: var(--header-ink-dim);
  padding: .35rem .7rem; border-radius: 6px; font-size: .95rem;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--header-hover); color: var(--header-ink); }
.menu[open] summary { background: var(--header-hover); color: var(--header-active); }
.menu .menu-items {
  position: absolute; top: 100%; left: 0; margin-top: .25rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); min-width: 190px; padding: .3rem; z-index: 40;
}
.menu .menu-items a {
  display: block; color: var(--ink); padding: .45rem .6rem;
  border-radius: 6px; text-decoration: none; font-size: .92rem;
}
.menu .menu-items a:hover { background: var(--navy); color: #fff; text-decoration: none; }

.profile-menu { margin-left: auto; }
.profile-trigger { display: inline-flex; align-items: center; gap: .5rem; }
.profile-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--header-hover); color: var(--header-ink);
  font-size: .8rem; font-weight: 700; overflow: hidden;
}
.profile-menu .menu-items { left: auto; right: 0; min-width: 240px; }
.profile-items .profile-head { padding: .5rem .6rem .4rem; }
.profile-items .profile-head strong { color: var(--navy); }
.profile-items .profile-head .muted { font-size: .82rem; }
.profile-items hr { border: 0; border-top: 1px solid var(--line); margin: .35rem 0; }
.profile-switch { padding: .2rem .6rem .4rem; }
.profile-switch label { display: block; color: var(--muted); font-size: .78rem;
                        text-transform: uppercase; letter-spacing: .03em; }
.profile-switch select { width: 100%; margin-top: .2rem; padding: .35rem .4rem;
                         border: 1px solid var(--line); border-radius: 6px; }
.profile-signout { padding: .1rem; }
.profile-signout button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--ink); padding: .45rem .6rem; border-radius: 6px; cursor: pointer;
  font-size: .92rem; font-family: inherit;
}
.profile-signout button:hover { background: var(--navy); color: #fff; }

/* ---------- components ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card > header {
  padding: .7rem 1rem; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: .6rem;
}
.card > header h2, .card > header h3 { margin: 0; font-size: .98rem; }
.card > header .spacer { flex: 1; }
.card .body { padding: 1rem; }
.card .body.tight { padding: .5rem 1rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.dash { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.dash.dash-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A resident's page: what they can do, grouped (River of Refuge's training, items 1 and 9). */
.action-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1rem; }
.action-group h2 { font-size: 1rem; margin: 0 0 .6rem; }
.stack-tight { display: flex; flex-direction: column; gap: .5rem; }
@media (max-width: 980px) {
  .dash, .dash.dash-even { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- tablet and phone ---------- */
@media (max-width: 760px) {
  /* The top bar collapses behind a hamburger. */
  .topbar { flex-wrap: wrap; gap: .4rem .6rem; padding: .55rem .9rem; }
  .brand { margin-right: auto; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    background: none; border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 7px; padding: 8px 9px; cursor: pointer;
  }
  .nav-toggle-bar { display: block; width: 22px; height: 2px; background: var(--header-ink); border-radius: 2px; }
  .topbar-collapse {
    display: none; flex-basis: 100%; flex-direction: column;
    align-items: stretch; gap: .15rem; padding-top: .3rem;
  }
  .topbar-collapse.open { display: flex; }
  .topbar-collapse .spacer { display: none; }
  .topbar-collapse nav { flex-direction: column; align-items: stretch; width: 100%; gap: .1rem; }
  .topbar-collapse nav a { padding: .6rem .7rem; border-radius: 6px; }
  .topbar-collapse form { width: 100%; margin: .2rem 0 0; }

  /* Grouped items become an inline accordion rather than an overlay: a
     dropdown that opens off the side of a phone is unreachable. */
  .menu, .profile-menu { width: 100%; margin-left: 0; }
  .menu summary { padding: .6rem .7rem; }
  .menu .menu-items {
    position: static; box-shadow: none; border: 0; min-width: 0;
    background: rgba(255, 255, 255, .08); margin: .1rem 0 .2rem;
  }
  .menu .menu-items a, .profile-signout button { color: var(--header-ink-dim); }
  .menu .menu-items a:hover, .profile-signout button:hover { background: var(--navy-dark); color: #fff; }
  .profile-items .profile-head strong { color: var(--header-ink); }
  .profile-name { max-width: none; }

  main.container { padding: 1rem .9rem 2.5rem; }
  h1 { font-size: 1.35rem; }
  table.data { display: block; overflow-x: auto; white-space: nowrap; }
}

.page-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.page-head .spacer { flex: 1; }
.page-head p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }

.btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: .88rem;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #f7f9fc; text-decoration: none; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-2); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #2b2000; font-weight: 600; }
.btn.gold:hover { background: var(--gold-2); }
.btn.danger { color: var(--danger); border-color: #e7bdb9; background: #fff; }
.btn.danger:hover { background: var(--danger-bg); }
.btn.small { padding: .25rem .55rem; font-size: .8rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }

.badge {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
  background: var(--line-2); color: var(--muted); white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.info { background: var(--info-bg); color: var(--navy-3); }
.badge.gold { background: #fbf1d4; color: #7a6111; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .65rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; }
tbody tr:hover { background: #fafbfd; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a {
  padding: .3rem .7rem; border-radius: 999px; font-size: .85rem; color: var(--muted); border: 1px solid transparent;
}
.tabs a:hover { background: #fff; text-decoration: none; }
.tabs a.active { background: #fff; border-color: var(--line); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: .75rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; box-shadow: var(--shadow); }
.tile .label { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tile .value { font-size: 1.65rem; font-weight: 660; line-height: 1.15; margin-top: .15rem; }
.tile .sub { font-size: .8rem; color: var(--muted); }
.tile a { color: inherit; }

.messages { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.msg { padding: .6rem .85rem; border-radius: 8px; border: 1px solid; font-size: .9rem; }
.msg.success { background: var(--ok-bg); border-color: #bfe0cc; color: var(--ok); }
.msg.error { background: var(--danger-bg); border-color: #eec3bf; color: var(--danger); }
.msg.warning { background: var(--warn-bg); border-color: #efd9a8; color: var(--warn); }
.msg.info { background: var(--info-bg); border-color: #c6d8f3; color: var(--navy-3); }

.banner { padding: .55rem 1.25rem; font-size: .88rem; display: flex; gap: .75rem; align-items: center; }
.banner.viewas { background: var(--gold); color: #2b2000; }
.banner.support { background: var(--danger-bg); color: var(--danger); border-bottom: 1px solid #e7bdb9; }
.banner.beta { background: var(--navy-3); color: #fff; }
.banner.maint { background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid #efd9a8; }
.banner.emergency { background: #b3261e; color: #fff; font-size: .95rem; }
.banner.emergency .btn { background: #fff; color: #b3261e; border-color: #fff; }
.banner.drill { background: #f2b705; color: #2b2000; font-size: .95rem; }
.banner.drill .btn { background: #fff; color: #2b2000; border-color: #fff; }
.roll-counts { display: flex; flex-wrap: wrap; gap: .4rem; }
.roll-counts .badge { font-size: .85rem; }
.roll-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
  padding: .6rem 0; border-bottom: 1px solid var(--line); }
.roll-row:last-child { border-bottom: 0; }
.roll-who { flex: 1 1 14rem; }
.roll-help { margin-top: .25rem; padding: .25rem .5rem; background: var(--warn-bg); color: var(--warn);
  border-radius: 4px; font-size: .88rem; }
.roll-report { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-top: .75rem; }
.roll-report label { display: flex; flex-direction: column; gap: .2rem; }
.kind-edit { display: flex; align-items: center; gap: .4rem; margin: 0; }
.kind-edit input[type=number] { width: 5rem; }
.roll-marks { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0; }
.roll-marks .btn.small { min-height: 2.4rem; padding: .35rem .7rem; }
.banner.readonly { background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid #efd9a8; }
.banner form { margin: 0; }
/* The public demo (ARC-174): on every page a demo visitor sees. */
.banner.demo { background: #f6e7b0; color: #2b2000; border-bottom: 1px solid var(--gold); }
.banner.demo .btn { margin-left: auto; }
.demo-roles { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.demo-role { display: flex; gap: .75rem; align-items: center; justify-content: space-between;
             border-top: 1px solid var(--line); padding-top: .5rem; }
.demo-role strong, .demo-role span { display: block; }
.demo-role form { margin: 0; flex: none; }

/* ---------- forms ---------- */
form .helptext { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; }
label { font-weight: 600; font-size: .85rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=datetime-local], input[type=url], input[type=search], select, textarea {
  width: 100%; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 8px; font: inherit;
  font-size: .9rem; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--navy-3); outline-offset: 1px; border-color: var(--navy-3); }
textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .85rem; }
.form-grid > div, .field { min-width: 0; }
.field { margin-bottom: .85rem; }
.field > label { display: block; margin-bottom: .2rem; }
.errorlist { list-style: none; margin: .2rem 0 0; padding: 0; color: var(--danger); font-size: .82rem; }
form ul.errorlist li { margin: 0; }
.checkbox-row { display: flex; align-items: center; gap: .45rem; }
.checkbox-row input { width: auto; }
/* min-width: 0, because a fieldset otherwise never shrinks below its widest
   content: a table of rows inside one stretched the whole application page
   sideways on a phone instead of scrolling in its own box. */
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 1rem; background: #fff; min-width: 0; }
legend { font-weight: 650; font-size: .92rem; padding: 0 .35rem; }
.inline-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.filters input[type=search], .filters input[type=text] { width: 220px; }
.filters select, .filters input[type=date] { width: auto; max-width: 15rem; }
.filters select.wide { max-width: 100%; }
.filters label { font-weight: 500; display: inline-flex; align-items: center; gap: .35rem; }

/* Django's div-based form rendering */
form .field-wrap > div { margin-bottom: .85rem; }
form div > label { display: block; margin-bottom: .2rem; font-weight: 600; font-size: .85rem; }
form div.checkbox label { display: inline; }

.empty { padding: 1.5rem; text-align: center; color: var(--muted); font-size: .9rem; }
.definition { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: .35rem .9rem; font-size: .9rem; }
.definition dt { color: var(--muted); }
.definition dd { margin: 0; }
.timeline { list-style: none; margin: 0; padding: 0; font-size: .87rem; }
.timeline li { padding: .4rem 0; border-bottom: 1px solid var(--line-2); }
.timeline li:last-child { border-bottom: 0; }

.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .6rem; }
.unit {
  border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .7rem; background: #fff;
  display: block; color: inherit; border-left: 4px solid var(--line);
}
.unit:hover { text-decoration: none; box-shadow: var(--shadow); }
.unit b { display: block; }
.unit.occupied { border-left-color: var(--ok); }
.unit.available { border-left-color: var(--navy-3); }
.unit.to_be_cleaned { border-left-color: var(--gold); }
.unit.under_maintenance { border-left-color: var(--warn); }
.unit.unavailable { border-left-color: var(--muted); opacity: .7; }

.bar { height: 8px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--navy-3); }
.bar.gold > span { background: var(--gold); }

.spark { display: block; }
.spark .line { fill: none; stroke: var(--navy-3); stroke-width: 2; }
.spark .area { fill: rgba(34, 73, 124, .1); }
.spark .line.debt { stroke: var(--danger); }
.spark .area.debt { fill: rgba(179, 38, 30, .08); }

details.drill { border-top: 1px solid var(--line-2); }
details.drill > summary { cursor: pointer; padding: .4rem 0; font-size: .85rem; color: var(--navy-3); }

/* ---------- public pages ---------- */
/* A table of rows on the applicant's form keeps its boxes wide enough to type
   in, and scrolls in its own box on a phone rather than squeezing them. */
.public td input:not([type=checkbox]), .public td select { min-width: 8.5rem; }
.public td input[type=date] { min-width: 10rem; }
.public { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 4rem; min-width: 0; width: 100%; box-sizing: border-box; }
.public-head { background: var(--header-bg); color: var(--header-ink); padding: 1.1rem 0;
               border-bottom: 3px solid var(--brand-accent); }
.public-head .subtitle { color: var(--header-muted); }
.public-head .inner { max-width: 760px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; gap: .75rem; }
.public-head img { width: 34px; }
.hero { background: var(--navy); color: #fff; padding: 3.5rem 1rem; }
.hero .inner { max-width: 1000px; margin: 0 auto; }
.hero h1 { font-size: 2.3rem; max-width: 20ch; }
.hero p { font-size: 1.05rem; color: #c9d5e6; max-width: 60ch; }
.hero .rule { width: 64px; height: 3px; background: var(--gold); margin: 1.2rem 0; }
.marketing { max-width: 1000px; margin: 0 auto; padding: 2.5rem 1rem; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.feature h3 { margin-bottom: .3rem; }
.feature p { font-size: .9rem; color: var(--muted); margin: 0; }
.landing-section { margin-bottom: 2.5rem; }
.photo-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.photo { margin: 0; display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.photo img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.digest-preview { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; margin: 0; }
label.block { display: block; margin: .25rem 0; }
.landing-section > h2 { margin-bottom: .6rem; }
.hero .hero-tagline { color: var(--gold); font-weight: 600; }
footer.site { border-top: 1px solid var(--line); padding: 1.5rem 1rem; color: var(--muted); font-size: .85rem; text-align: center; }

/* ---------- legal documents ---------- */
/* Longer measure and looser leading than the app: these are read, not scanned. */
.legal { max-width: 780px; margin: 0 auto; }
.legal h1 { margin-bottom: .25rem; }
.legal h2 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
.legal h3 { font-size: .95rem; margin: 1.1rem 0 .35rem; color: var(--navy-2); }
.legal p, .legal li { line-height: 1.65; }
.legal ul { margin: .4rem 0 .8rem; padding-left: 1.25rem; }
.legal li { margin: .3rem 0; }
.legal ul ul { margin: .35rem 0 .5rem; }
.legal-meta { color: var(--muted); font-size: .9rem; margin-top: 0; }
.legal-draft {
  background: var(--warn-bg); border: 1px solid var(--gold);
  border-radius: var(--radius); padding: .75rem .9rem; font-size: .92rem;
}
.legal-nav {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 0 0 1.5rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--line);
}
.legal-nav a { font-size: .88rem; color: var(--navy-3); }
.legal-contact { color: var(--muted); font-size: .9rem; }
.legal hr { border: none; border-top: 1px solid var(--line); margin: 1.75rem 0 1rem; }
/* The Data Processing Addendum's annexes and the retention schedule (ARC-080b). */
.legal-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .92rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: .45rem .55rem;
  border-bottom: 1px solid var(--line); line-height: 1.5; }
.legal-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.legal-table tbody th { width: 28%; font-weight: 600; }
.legal-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: .75rem; }
.legal-signatures p { margin: .9rem 0 0; white-space: nowrap; overflow: hidden; }
@media (max-width: 640px) {
  .legal-signatures { grid-template-columns: 1fr; }
  .legal-table { display: block; overflow-x: auto; }
}
footer.site a { color: var(--muted); text-decoration: underline; }

/* --- Public pricing page (ADR-0005) ------------------------------------- */
.estimator-card { margin-bottom: 1.5rem; }
.est-label { display: block; font-size: .88rem; color: var(--muted); margin-bottom: .5rem; }
#revenue { width: 100%; accent-color: var(--navy-3); margin: 0; }
.est-scale {
  display: flex; justify-content: space-between;
  font-size: .72rem; color: var(--muted); margin: .2rem 0 1rem;
}
.est-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; margin: 0; }
.est-revenue { font-size: 1.35rem; font-weight: 600; color: var(--navy); }
.est-price { font-size: 1.35rem; color: var(--navy-3); }
.est-price strong { font-size: 1.7rem; }
.est-detail { flex-basis: 100%; font-size: .88rem; color: var(--muted); }
.est-caveat { font-size: .82rem; margin: 1rem 0 0; }

table.bands { width: 100%; border-collapse: collapse; background: #fff;
              border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.bands caption { caption-side: bottom; padding: .7rem .2rem 0; font-size: .85rem; text-align: left; }
table.bands th, table.bands td { padding: .55rem .8rem; border-bottom: 1px solid var(--line); }
table.bands thead th { background: var(--navy); color: #fff; font-size: .82rem;
                       font-weight: 600; text-align: left; border-bottom: none; }
table.bands tbody tr:last-child td { border-bottom: none; }
table.bands .num { text-align: right; }
table.bands thead th.num { text-align: right; }
/* The highlight is a left rule plus a tint: a tint alone would be the only
   signal, and it disappears in high-contrast mode and on a bad projector. */
table.bands tbody tr.is-current { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--gold); }
table.bands tbody tr.is-current td { font-weight: 600; }

/* The table scrolls inside its own box rather than pushing the page sideways.
   A pricing table that makes the whole document scroll horizontally reads as
   broken, and on a phone it hides the column a reader came for. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* The struck-out list price sits beside the payable one. Muted and lighter, so
   the number a reader takes away is the one they would actually be charged. */
.was { color: var(--muted); font-weight: 400; margin-right: .35rem; }

@media (max-width: 560px) {
  .est-revenue, .est-price { font-size: 1.1rem; }
  .est-price strong { font-size: 1.35rem; }
  table.bands th, table.bands td { padding: .45rem .5rem; font-size: .85rem; }
  /* Included storage is the least-asked column and is already spelled out in
     the estimator readout above, so it is the one to drop on a narrow screen
     rather than squeezing five columns into 375px. */
  table.bands .storage-col { display: none; }
}

/* --- Social Security number (apps/common/ssn.py) ------------------------- */
.ssn-line { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.1rem; margin: 0 0 .5rem; }
/* The revealed state looks different on purpose: somebody glancing at a shared
   screen should be able to tell at once that a real number is showing. */
.ssn-line.revealed { background: var(--warn-bg); border-left: 3px solid var(--gold);
                     padding: .4rem .6rem; font-weight: 600; }

/* --- Two-factor (ARC-033) ----------------------------------------------- */
.mfa-qr { background: #fff; padding: .75rem; border: 1px solid var(--line);
          border-radius: var(--radius); max-width: 15rem; }
.mfa-qr svg { width: 100%; height: auto; display: block; }
.mfa-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem;
              letter-spacing: .08em; word-break: break-all; background: var(--warn-bg);
              padding: .5rem .7rem; border-radius: var(--radius); }
.mfa-codes { list-style: none; padding: 0; margin: 1rem 0; display: grid;
             grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .4rem; }
.mfa-codes li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem;
                background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
                padding: .4rem .6rem; text-align: center; }

/* --- Utilities (ARC-041) ------------------------------------------------ */
/* These were inline style attributes. The Content-Security-Policy does not allow
   those — a nonce covers a <style> element, never an attribute — so each became
   a class here. `!important` is deliberate and confined to this block: an
   inline style beat every stylesheet rule, and these must keep doing so or a
   page quietly changes shape wherever a component rule happens to be more
   specific. Do not add a style attribute to a template; add a class here. */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .35rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: .75rem !important; }
.mt-4 { margin-top: 1rem !important; }

/* Sign-up: the ways out of the form, each on its own line and easy to find. */
.signup-help { list-style: none; margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line);
  font-size: 1.05rem; }
.signup-help li { margin: 0 0 .6rem; }
.signup-help a { font-weight: 700; text-decoration: underline; }
/* The agreement, set apart so it is read rather than ticked past. */
.signup-agree { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.signup-agree .field { margin-bottom: .4rem; }
.signup-agree a { font-weight: 700; text-decoration: underline; }
.mt-5 { margin-top: 1.5rem !important; }
.mt-6 { margin-top: 2rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: .75rem !important; }
.pt-3 { padding-top: .75rem !important; }
.pad-head { padding: .5rem 1rem 0 !important; }
.pad-head-tight { padding: .5rem .65rem 0 !important; }
.measure-34 { max-width: 34rem !important; }
.measure-38 { max-width: 38rem !important; }
.measure-480 { max-width: 480px !important; }
.measure-560 { max-width: 560px !important; }
.measure-640 { max-width: 640px !important; }
.measure-760 { max-width: 760px !important; }
.measure-820 { max-width: 820px !important; }
.w-44 { width: 44px !important; }
.w-70 { width: 70px !important; }
.w-130 { width: 130px !important; }
/* A week's budget (River of Refuge, 26 October 2026): two boxes across at most,
   so each line has room for its three figures. On the wider pages four fitted,
   and the amount boxes shrank until the figures were cut off. */
.budget-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); }
.budget-grid > * { min-width: 0; }
.budget-grid td.w-130 { width: 8.5rem !important; }
.budget-grid td.w-130 input, .budget-grid td.w-130 select { width: 100%; min-width: 7rem; }
.budget-grid td input[type=text] { width: 100%; min-width: 9rem; }
.budget-grid td .muted { white-space: nowrap; }
.w-140 { width: 140px !important; }
.grow { flex: 1 !important; }
.inline { display: inline !important; }
.gap-tight { gap: .4rem !important; }
.justify-end { justify-content: flex-end !important; }
.text-lg { font-size: 1.1rem !important; }
.text-xl { font-size: 1.4rem !important; }
.text-danger { color: var(--danger) !important; }
.text-ok { color: var(--ok) !important; }
.border-gold { border-color: var(--gold) !important; }
.figure { font-size: 1.3rem !important; font-weight: 650 !important; }
.auth-panel { max-width: 420px !important; margin: 2rem auto !important; }
.auth-panel.wide { max-width: 480px !important; margin: 1.5rem auto !important; }
/* The front door's breaks between programs and other ways in (ARC-188), in the
   organization's accent colour (a validated #rrggbb, apps/orgs/branding.py). */
.accent-rule { border: 0; border-top: 3px solid var(--brand-accent); margin: 1.5rem 0 1rem; }
.btn-block { width: 100% !important; justify-content: center !important; margin-top: .5rem !important; }
.tile-flat { flex: 1 !important; box-shadow: none !important; border: 0 !important; }
.brand-link { gap: .6rem !important; color: inherit !important; text-decoration: none !important; }
.landing-link { color: #c9d5e6 !important; margin-right: 1rem !important; }
.logo-preview { max-width: 100% !important; max-height: 90px !important; }
.divider { border: 0 !important; border-top: 1px solid var(--line-2) !important; margin: 1rem 0 !important; }
/* The honeypot field on the public inquiry form: present for a bot that fills
   in every input, absent for a person. */
.offscreen { position: absolute !important; left: -9999px !important; }
/* Progress bars, in steps of 5%. A width computed per page cannot be a style
   attribute any more, and nobody reads a savings bar to the nearest percent. */
.bar > .pct-0 { width: 0%; }
.bar > .pct-5 { width: 5%; }
.bar > .pct-10 { width: 10%; }
.bar > .pct-15 { width: 15%; }
.bar > .pct-20 { width: 20%; }
.bar > .pct-25 { width: 25%; }
.bar > .pct-30 { width: 30%; }
.bar > .pct-35 { width: 35%; }
.bar > .pct-40 { width: 40%; }
.bar > .pct-45 { width: 45%; }
.bar > .pct-50 { width: 50%; }
.bar > .pct-55 { width: 55%; }
.bar > .pct-60 { width: 60%; }
.bar > .pct-65 { width: 65%; }
.bar > .pct-70 { width: 70%; }
.bar > .pct-75 { width: 75%; }
.bar > .pct-80 { width: 80%; }
.bar > .pct-85 { width: 85%; }
.bar > .pct-90 { width: 90%; }
.bar > .pct-95 { width: 95%; }
.bar > .pct-100 { width: 100%; }

@media print {
  .topbar, .btn, .tabs, .filters { display: none !important; }
  body { background: #fff; }
  .legal-nav, .public-head { display: none !important; }
}

/* A checkbox column in a settings table: narrow, so the label does the work
   of being clickable (ARC-030). A class rather than a style attribute,
   because the policy forbids inline styles (ARC-041). */
.tickbox { width: 2.5rem; }

/* Forms (ARC-046): a filled-in form reads as one column on a phone. */
.form-section legend { font-size: 1rem; }
.form-entry + .form-entry { border-top: 1px solid var(--line); margin-top: .75rem; padding-top: .75rem; }
.form-entry h4 { margin: 0 0 .5rem; font-size: .92rem; }
.form-total { margin: .75rem 0 0; }
.form-prompt { margin: .75rem 1rem 0; }
.add-question select { width: auto; }
.filled-form input[type=number], .filled-form input[type=date], .filled-form input[type=time] { max-width: 14rem; }
/* The save buttons stay reachable at the bottom of a long form on a phone. */
.sticky-actions { position: sticky; bottom: 0; background: var(--bg, #fff); padding: .6rem 0; margin-top: 1rem; }
.totals meter { display: block; width: 100%; min-width: 4rem; height: .5rem; margin-top: .2rem; }

/* ---------- accessibility (ARC-135, WCAG 2.2 AA) ---------- */
/* First thing a keyboard reaches: past the navigation, straight to the page. */
.skip-link {
  position: absolute; left: .75rem; top: -3rem; z-index: 100;
  background: var(--navy); color: #fff; padding: .5rem .8rem; border-radius: 8px;
}
.skip-link:focus { top: .5rem; }
main:focus { outline: none; }

/* Where the keyboard is, always visible — on every control, not only inputs. */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible,
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}

/* 2.5.8: nothing to tap is smaller than 24 × 24. */
.btn.small { min-height: 1.75rem; }
input[type=checkbox], input[type=radio] { min-width: 1.1rem; min-height: 1.1rem; }

/* On a touch screen, buttons are thumb-sized. */
@media (pointer: coarse) {
  .btn { min-height: 2.75rem; }
  .btn.small { min-height: 2.25rem; }
}

/* 16 px on a phone: anything smaller and iOS zooms the page when a field is
   tapped, and a night manager loses their place in the form. */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 1.4.10 reflow: nothing scrolls sideways at 320 px except a table, inside its
   own box. A grid column sized `1fr` will not shrink below its widest child, so
   one wide table used to stretch the whole page (ARC-135). */
.dash > *, .grid > *, .stack > *, .card { min-width: 0; }
.card .body { overflow-x: auto; }
/* Shown once, so it has to be readable and selectable at a glance (ARC-083). */
.passphrase code { display: block; font-size: 1.25rem; letter-spacing: .06em; word-break: break-all;
  background: var(--line-2); border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; }

/* Signs (ARC-100): the editor pages. The screen itself carries its own
   styles, so a downloaded sign needs nothing from here. */
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: .2rem 0; }
.sign-link { display: block; word-break: break-all; background: var(--line-2); border: 1px solid var(--line);
  border-radius: 8px; padding: .6rem .8rem; }
.sign-thumbs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sign-thumb { margin: 0; padding: .6rem; }
.sign-thumb img { display: block; width: 100%; height: 130px; object-fit: contain; background: var(--line-2);
  border-radius: 6px; }
.sign-thumb figcaption { display: flex; gap: .5rem; align-items: center; justify-content: space-between;
  margin-top: .4rem; }

/* Report builder (ARC-106). */
.report-builder { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.report-columns ul, .report-columns div > div { list-style: none; margin: 0; padding: 0; }
.report-columns.two ul, .report-columns.two div > div { columns: 2; column-gap: 1.5rem; }
.report-columns label { font-weight: normal; }
.report-filter { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; margin-bottom: .8rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.report-filter > span { grid-column: span 2; min-width: 0; }
.report-filter > span:nth-child(1), .report-filter > span:nth-child(2) { grid-column: span 3; }
.report-filter select, .report-filter input { width: 100%; }
a.report-source { color: inherit; text-decoration: none; }
a.report-source:hover { border-color: var(--brand-accent, var(--line)); }
td.bar { width: 30%; }
td.bar meter { width: 100%; }

/* Pantry (ARC-112). */
.pantry-line { display: grid; grid-template-columns: 3fr 1fr; gap: .4rem; margin-bottom: .45rem; }
.pantry-line.dated, .pantry-line:has(input[type=date]) { grid-template-columns: 3fr 1fr 1.4fr; }
.pantry-line select, .pantry-line input { width: 100%; }
.pantry-line.dated.placed { grid-template-columns: 3fr 1fr 1.4fr 1.2fr; }
.pantry-line.heading { margin-bottom: .15rem; }
/* Record a visit: the shelf list wants the room (ARC-112c). */
.visit-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 900px) { .visit-grid { grid-template-columns: 1fr; } }
.shelf-pick input { width: 6rem; text-align: right; }
/* Only the fields for the "who is it for" choice made; every field shows where :has() does not. */
@supports selector(:has(*)) {
  .visit-who .who-for { display: none; }
  .visit-who:has(input[value="resident"]:checked) .who-resident,
  .visit-who:has(input[value="community"]:checked) .who-community,
  .visit-who:has(input[value="anonymous"]:checked) .who-anonymous { display: block; }
}
/* Documents to sign (ARC-153): a document's text, and the locked signing screen. */
.signing-text h2 { font-size: 1.15rem; margin: 1rem 0 .4rem; }
.signing-text h3 { font-size: 1rem; margin: .8rem 0 .3rem; }
.signing-text p, .signing-text ul { line-height: 1.55; }
.signing-heading h2, .signing-heading p { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: 600; }
.fill-in { border-bottom: 1px solid var(--muted); padding: 0 .2rem; font-weight: 600; }
body.signing-mode { background: var(--bg, #f4f5f8); }
.signing-bar { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.25rem; background: var(--surface, #fff);
  border-bottom: 1px solid var(--line, #dde); }
.signing-main { max-width: 46rem; margin: 1.5rem auto 4rem; padding: 0 1rem; font-size: 1.05rem; }
.signing-section { background: var(--surface, #fff); border: 1px solid var(--line, #dde); border-radius: 10px;
  padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.signing-sign input[name=typed_name] { font-size: 1.2rem; }
.signing-list li { padding: .6rem 0; border-bottom: 1px solid var(--line, #dde); }
.signing-code { font-size: 2rem; font-weight: 700; letter-spacing: .15em; font-family: ui-monospace, monospace; }
.signing-main input#code { font-size: 1.4rem; letter-spacing: .12em; padding: .45rem .6rem; width: 13rem;
  font-family: ui-monospace, monospace; text-transform: uppercase; }
/* A family's page (27 September 2026): this week's money, and the household record folded away. */
.week-status .row { padding: .35rem 0; border-bottom: 1px solid var(--line, #dde); gap: .5rem; }
.week-status .row:last-child { border-bottom: 0; }
.record-fold { background: var(--surface, #fff); border: 1px solid var(--line, #dde); border-radius: 10px;
  padding: .75rem 1rem; }
.record-fold > summary { cursor: pointer; }
/* The pantry's own links, grouped by what each is for. */
.link-groups { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1rem; }
.link-group .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  margin-bottom: .35rem; }
.allotment-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .5rem; }
.allotment-row input { width: 100%; }

/* Sessions (ARC-103a): one row per person, the three choices side by side. */
table.attendance { width: 100%; }
table.attendance th { text-align: left; font-weight: 500; padding: .45rem .5rem .45rem 0; text-transform: none;
  letter-spacing: normal; font-size: inherit; color: inherit; }
table.attendance td > div { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
table.attendance label { font-weight: normal; }

/* Signage editor (ARC-100b): the canvas is the screen, drawn with the same
   stylesheet the screen uses (signage.css), one --u to a hundredth of its width. */
.sign-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
@media (max-width: 1000px) { .sign-editor { grid-template-columns: 1fr; } }
.sign-canvas { container-type: inline-size; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); background: #000; }
.sign-canvas .stage { --u: 1cqw; }
.sign-canvas .still { opacity: .55; }
.sign-canvas .box { position: relative; outline: 2px dashed rgba(255, 255, 255, .75); outline-offset: -2px;
  cursor: move; touch-action: none; min-width: 0; min-height: 0; display: flex; }
.sign-canvas .box > .w { flex: 1; }
.sign-canvas .box.chosen, .sign-canvas .box:focus { outline: 3px solid #f5b83d; }
.sign-canvas .box-empty { background: rgba(255, 255, 255, .12); font-size: calc(var(--u) * 1.6); }
.sign-canvas .box-handle { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; background: #f5b83d;
  cursor: nwse-resize; }
.palette { display: flex; flex-wrap: wrap; gap: .35rem; }
.slide-row { padding: .5rem 0; border-top: 1px solid var(--line); }
/* The slide editor's switch between this slide and every slide (ARC-100d). */
.layer-switch { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.layer-switch a { padding: .35rem .85rem; border: 1px solid var(--line, #dde3ec); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .9rem; color: inherit; background: var(--surface, #fff); }
.layer-switch a[aria-current="page"] { background: var(--navy, #0b1f3a); border-color: var(--navy, #0b1f3a); color: #fff; }
.sign-canvas.editing-every .box { outline-color: rgba(245, 184, 61, .9); }

/* A pay stub beside its figures (ARC-156): the picture as large as the column allows. */
.stub-picture { display: block; }
.stub-picture img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain;
  background: var(--line-2); border: 1px solid var(--line); border-radius: var(--radius); }

/* Breadcrumbs (ARC-158): above the page title; on a phone, only the way back. */
.crumbs { margin: 0 0 .6rem; font-size: .85rem; color: var(--muted); }
/* Quick tools (ARC-164): beside the breadcrumbs, out of the way. */
.crumbs-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .3rem 1rem; }
.crumbs-bar .crumbs { flex: 1 1 auto; min-width: 0; }
.quick-tool { color: var(--muted); }
.quick-tool summary { cursor: pointer; list-style: none; }
.quick-tool summary::-webkit-details-marker { display: none; }
.quick-tool form { display: flex; gap: .4rem; margin-top: .3rem; }
.quick-tool input[type=text] { min-width: 12rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; }
.crumbs li { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.crumbs li + li::before { content: "\203A"; color: var(--muted); }
.crumbs a { color: var(--navy-3, inherit); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.crumbs li:only-child { display: none; }
@media (max-width: 640px) {
  .crumbs li { display: none; }
  .crumbs li:nth-last-child(2) { display: inline-flex; }
  .crumbs li:nth-last-child(2)::before { content: "\2039"; }
}

/* The giving page's QR codes on the online giving page (ARC-104g). */
.qr-preview { background: #fff; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius, 8px);
  width: 140px; }
.qr-preview svg { width: 100%; height: auto; display: block; }

/* The event door's camera, reading the code on a ticket (ARC-137). */
.door-camera { display: block; width: 100%; max-width: 360px; margin-top: .75rem; border-radius: var(--radius, 8px);
  background: #000; }
.door-camera[hidden] { display: none; }

/* The Modules page (13 October 2026): areas of two-column cards, add-ons inside. */
.module-summary .tabs { margin-bottom: 0; }
.module-area { margin-bottom: 1.25rem; }
.module-area > summary { display: flex; align-items: baseline; gap: .75rem; cursor: pointer; list-style: none;
  padding: .35rem 0; margin-bottom: .5rem; border-bottom: 1px solid var(--line); }
.module-area > summary::-webkit-details-marker { display: none; }
.module-area > summary::before { content: "\25B8"; color: var(--muted, #6b7280); font-size: .85rem; }
.module-area[open] > summary::before { content: "\25BE"; }
.module-area > summary h2 { margin: 0; font-size: 1.1rem; }
.module-card .module-head, .module-parts .module-head { display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; }
.module-card .module-head strong { font-size: 1rem; }
.module-card .body > p { margin: .4rem 0 0; }
.module-card.is-on { border-left: 3px solid var(--ok, #15803d); }
.module-switch .badge { margin-right: .15rem; }
.module-parts { list-style: none; margin: .75rem 0 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--line); }
.module-parts li { padding: .45rem 0; }
.module-parts li + li { border-top: 1px dashed var(--line); }
.module-parts .module-parts { margin-top: .4rem; }
/* Two columns, as chosen: auto-fit would make three on a wide screen. One on a phone. */
.module-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 760px) { .module-grid { grid-template-columns: minmax(0, 1fr); } }

/* A sponsor logo (ARC-137c): on the staff page and the public event page. */
.sponsor-logo img { display: block; max-width: 200px; max-height: 90px; width: auto; height: auto; }
.sponsor-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

/* The seating page (ARC-137d): a line of small controls, not a stack of wide ones. */
.seat-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.seat-controls label { margin: 0; font-weight: 500; }
.seat-controls input[type=text] { width: 10rem; }
.seat-controls .seat-num { width: 5.5rem; }
.seat-controls select { width: auto; max-width: 14rem; }

/* The table plan (ARC-137e): the room as a 3:2 drawing; tables and markers placed by their centre. */
.plan-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .plan-wrap { grid-template-columns: minmax(0, 1fr); } }
.plan-room { position: relative; aspect-ratio: 3 / 2; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius, 8px); overflow: hidden; touch-action: none; }
.plan-room.seating .plan-table { outline: 2px dashed var(--navy-3, #2c4a7a); outline-offset: 2px; cursor: copy; }
.plan-table { position: absolute; transform: translate(-50%, -50%); width: var(--d, 10%); aspect-ratio: 1;
  border-radius: 50%; border: 2px solid var(--navy-3, #2c4a7a); background: #eef3fb; display: flex;
  flex-direction: column; align-items: center; justify-content: center; padding: 0; font-size: .75rem;
  line-height: 1.1; cursor: grab; user-select: none; touch-action: none; }
.plan-table.long { aspect-ratio: 3 / 1; border-radius: 6px; }
.plan-table.full { background: #e6f4ea; border-color: var(--ok, #15803d); }
.plan-table strong { font-size: .8rem; max-width: 95%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-table span { color: var(--muted, #6b7280); }
.plan-marker { position: absolute; transform: translate(-50%, -50%); padding: .25rem .6rem; border-radius: 4px;
  background: var(--navy, #0b1f3a); color: #fff; font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; cursor: grab; user-select: none; touch-action: none; }
.plan-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; }
.plan-guests { display: flex; flex-direction: column; gap: .35rem; max-height: 28rem; overflow-y: auto; }
.plan-guest { text-align: left; border: 1px solid var(--line); border-radius: 6px; background: #fff;
  padding: .35rem .55rem; cursor: grab; touch-action: none; }
.plan-guest .small { display: block; }
.plan-guest.chosen { border-color: var(--navy-3, #2c4a7a); background: #eef3fb; }
.plan-guest.dragging { opacity: .6; }

/* An auction item's photos (ARC-137i): on the staff page and the phone pages. */
.auction-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; }
.auction-photos figure { margin: 0; }
.auction-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius, 8px);
  border: 1px solid var(--line); display: block; }
.auction-photos figcaption { margin-top: .35rem; display: flex; flex-direction: column; align-items: flex-start;
  gap: .25rem; }
.bid-list { list-style: none; margin: 0; padding: 0; }
.bid-list li { display: flex; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.bid-list img { width: 4.5rem; height: 3.4rem; object-fit: cover; border-radius: 6px; flex: none; }
.bid-list .what { flex: 1 1 auto; min-width: 0; }
.bid-photo { width: 100%; max-height: 22rem; object-fit: contain; border-radius: var(--radius, 8px); background: #f3f4f6; }
.door-qr { background: #fff; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius, 8px);
  width: min(100%, 22rem); margin: 0 auto; }
.door-qr svg { width: 100%; height: auto; display: block; }
/* The paddle raise's levels (ARC-137j): big buttons to tap as paddles go up. */
.paddle-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; margin-top: .5rem; }
.paddle-levels .btn { display: flex; flex-direction: column; align-items: center; padding: .8rem .6rem; font-size: 1.15rem; }
.paddle-levels .btn .small { font-size: .78rem; font-weight: 400; margin-top: .2rem; white-space: normal; }

/* A short form in one row (raffle prizes and bundles, paddle levels, a raffle
   sale): each label above its box, boxes sized to what they hold, the button
   level with the boxes. */
.inline-fields { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: .75rem; }
.inline-fields .field { margin: 0; }
.inline-fields .w-sm input, .inline-fields .w-sm select { width: 8rem; }
.inline-fields .w-md input, .inline-fields .w-md select { width: 18rem; max-width: 100%; }
.inline-fields .btn { margin-bottom: .1rem; }
/* A button that reads as a link: small actions under a photo. */
.link-button { background: none; border: 0; padding: 0; color: var(--navy-3); font: inherit; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.link-button.danger { color: var(--danger, #b42318); }

/* A floor plan with a place's emergency information (ARC-168a). */
.floor-plan { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius, 8px); }
.floor-plan-figure { margin: 0 0 1rem; }

/* ---------- guides (rewritten October 2026) ---------- */
.guide-group { font-size: 1.05rem; margin: 1.25rem 0 .6rem; color: var(--navy); }
.guide h2 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.guide h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.guide h3 { font-size: 1rem; margin: 1.1rem 0 .35rem; }
.guide p, .guide li { line-height: 1.55; }
.guide ol, .guide ul { padding-left: 1.3rem; }
.guide .where { color: var(--muted); font-size: .9rem; margin-top: -.25rem; }
.guide .tip { background: var(--info-bg); border-left: 3px solid var(--navy-3); padding: .55rem .8rem; border-radius: 4px; margin: .75rem 0; }
.guide .rules { background: #f6f7f9; border: 1px solid var(--line); border-radius: 6px; padding: .6rem 1rem; margin: .75rem 0 1rem; }
.guide .rules li { margin: .3rem 0; }
.guide table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .92rem; }
.guide th, .guide td { text-align: left; vertical-align: top; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.guide .toc { columns: 2; font-size: .92rem; margin: 0 0 1rem; }

/* ---- An organization's own front door (ARC-189, the operator's redesign) ----
   Archivo is served from here, never from Google: a visitor's address is
   nobody else's business, least of all on a shelter's page. SIL OFL 1.1,
   static/fonts/archivo/LICENSE. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/archivo/archivo-latin-400-normal.9246d621d7f0.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/archivo/archivo-latin-500-normal.562c73adab45.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/archivo/archivo-latin-600-normal.7ab89eedd1b0.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/archivo/archivo-latin-700-normal.8574a5d7eebc.woff2") format("woff2"); }

body.front-door { --fd-brand: var(--navy); --fd-ink: #1a2433; --fd-body: #36424f; --fd-line: #d5dce6;
  --fd-rule: #e3e8ef; font-family: "Archivo", system-ui, sans-serif; background: #eaeef4; color: var(--fd-ink);
  min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
/* One large watermark here, not the tiled one other pages may have. */
body.front-door::before { display: none; }
.fd-head { background: var(--header-bg); color: var(--header-ink); height: 88px;
  border-bottom: 2px solid rgba(0, 0, 0, .25); position: relative; z-index: 2; }
.fd-inner { max-width: var(--page-max); height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center;
  gap: 20px; }
.fd-logo { height: 100%; width: auto; max-width: 60%; object-fit: contain; display: block; }
.fd-name { font-size: 1.3rem; }
.fd-divider { width: 2px; height: 36px; background: currentColor; opacity: .35; flex: none; }
.fd-subtitle { font-size: 17px; font-weight: 500; }
.fd-main { flex: 1; position: relative; z-index: 1; max-width: none; padding: 0; }
.fd-watermark { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: min(1100px, 78vw);
  background: var(--header-bg); -webkit-mask: var(--silhouette) center / contain no-repeat;
  mask: var(--silhouette) center / contain no-repeat; pointer-events: none; z-index: 0; }
.fd-wrap { position: relative; z-index: 1; max-width: var(--page-max); margin: 0 auto; padding: 48px 24px 56px; display: flex;
  flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.fd-full { flex: 1 1 100%; }
.fd-left { flex: 2 1 320px; min-width: 0; }
.fd-card, .fd-panel { border: 1px solid var(--fd-line); border-radius: 8px; box-shadow: 0 1px 3px rgba(16, 32, 56, .08); }
.fd-card { background: #fff; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.fd-card h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.fd-card h2 { margin: 0; font-size: 17px; font-weight: 600; }
.fd-card .accent-rule { margin: 0; }
.fd-card .public-program { display: flex; flex-direction: column; gap: 10px; }
.fd-card .public-program p { margin: 0; color: var(--fd-body); line-height: 1.55; }
.fd-primary, .fd-secondary { display: flex; align-items: center; justify-content: center; min-height: 44px;
  border-radius: 6px; font-size: 15px; text-decoration: none; padding: 0 16px; text-align: center; }
.fd-primary { background: #0d1f3a; color: #fff; font-weight: 600; }
.fd-primary:hover, .fd-primary:focus-visible { background: var(--header-bg); color: var(--header-ink); }
.fd-secondary { background: #fff; color: var(--fd-ink); border: 1px solid #cfd7e2; }
.fd-secondary:hover, .fd-secondary:focus-visible { background: #f2f5f9; border-color: var(--fd-brand); color: var(--fd-ink); }
.fd-links { display: flex; flex-direction: column; gap: 10px; }
.fd-sign-in { display: flex; flex-direction: column; gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fd-sign-in .field-wrap { margin: 0; }
.fd-sign-in input[type=email], .fd-sign-in input[type=password] { min-height: 44px; font-family: inherit; }
.fd-sign-in button.fd-primary { border: 0; cursor: pointer; font-family: inherit; width: 100%; }
.fd-sign-in[disabled] { opacity: .7; }
.fd-forgot { align-self: flex-start; margin-top: -6px; }
.fd-panel { flex: 3 1 460px; min-width: 0; background: rgba(255, 255, 255, .55); overflow: hidden; display: flex;
  flex-direction: column; }
.fd-photo { display: block; width: 100%; aspect-ratio: 2048 / 1040; object-fit: cover; }
/* A video, played only when asked (ARC-189b): a 16:9 box with its still. */
.fd-video { position: relative; aspect-ratio: 16 / 9; background: var(--header-bg); color: var(--header-ink);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fd-video-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fd-play { position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.2rem;
  border: 0; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; }
.fd-play:hover, .fd-play:focus-visible { background: rgba(0, 0, 0, .8); }
.fd-play-mark { font-size: 1.2rem; }
.fd-video-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .35rem .8rem;
  font-size: 12px; background: rgba(0, 0, 0, .45); color: #fff; }
.fd-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fd-panel-body { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 16px; }
.fd-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fd-brand); }
.fd-heading { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-wrap: pretty; }
.fd-body { font-size: 16px; line-height: 1.65; color: var(--fd-body); }
.fd-body > :first-child { margin-top: 0; }
.fd-body > :last-child { margin-bottom: 0; }
.fd-contact { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--fd-rule); font-size: 15px;
  color: var(--fd-body); }
.fd-phone { font-size: 18px; font-weight: 600; color: var(--fd-brand); text-decoration: none; white-space: nowrap; }
.fd-phone:hover { text-decoration: underline; }
body.front-door footer.site { border-top: 1px solid var(--fd-line); }
@media (max-width: 600px) {
  .fd-head { height: 72px; }
  .fd-wrap { padding: 24px 16px 40px; gap: 24px; }
  .fd-panel-body { padding: 22px 20px 24px; }
}

/* The format bar above a sign's text (25 October 2026). */
.format-bar { display: flex; gap: .25rem; margin: .25rem 0 .35rem; flex-wrap: wrap; }
.format-bar .format-button { min-width: 2.2rem; font-weight: 700; }
.format-bar .format-button[aria-label="Italic"] { font-style: italic; }
.format-bar .format-button[aria-label="Underline"] { text-decoration: underline; }