/* Pavia BPLO resident portal — design system.
 *
 * Who this is for: a small business owner in Pavia, on a phone, doing an
 * unfamiliar government task once a year. Every decision below serves being
 * understood by someone who is not sure they are doing it right.
 *
 * The palette is Pavia BPLO's own — the dark green and warm cream of the app
 * residents already use (BPLO/lib/utilities/global.dart), with the gold of the
 * municipal seal as the one warm accent. Illustrations in
 * assets/illustrations/ are drawn from the same palette and carry their own
 * dark-mode colours.
 *
 * COLOUR ROLES ARE SPLIT. A "fill" token is a background something sits on
 * (`--brand`, `--danger-fill`); an "ink" token is text or an icon
 * (`--brand-ink`, `--danger`). In light mode they are often the same hex; in
 * dark mode they are not — a green you can put white text on is a green you
 * cannot read as text on near-black.
 *
 * ELEVATION IS DECLARED ONCE. A surface is either bordered or raised, never
 * both: a 1px border under a wide soft shadow is a smudge, not depth. Flat
 * bordered panels are the page; shadow is reserved for things that genuinely
 * float above it, and for a card the pointer is on.
 */

/* ---------------------------------------------------------------- tokens - */

:root {
  color-scheme: light;

  --brand:       #146b2b;   /* fill: primary buttons, done steps */
  --brand-deep:  #0e5420;   /* fill: top bar, hover */
  --brand-ink:   #146b2b;   /* text and icons in the brand colour */
  --brand-soft:  #28a745;
  --brand-tint:  #e3f1e7;
  --brand-wash:  #f2f9f4;
  --brand-line:  #c2e0cd;

  --gold:        #d79d11;
  --gold-ink:    #7a5600;
  --gold-tint:   #fdf3d9;

  --ink:         #1b2318;
  --ink-2:       #465043;
  --ink-3:       #5b6658;   /* 5.3:1 on --bg: the quietest text allowed */
  --line:        #ddd7c5;
  --line-soft:   #ebe6d7;

  --bg:          #faf5e9;
  --surface:     #ffffff;
  --surface-2:   #fffdf7;
  --overlay:     rgba(27,35,24,.05);

  --danger:      #a8271f;  --danger-fill: #a8271f;  --danger-bg: #fcecea;  --danger-line: #f0cac7;
  --warn:        #7a5200;  --warn-bg:     #fdf2da;  --warn-line:  #eedcae;
  --ok:          #146b2b;  --ok-bg:       #e3f1e7;  --ok-line:    #c2e0cd;
  --info:        #1f5673;  --info-bg:     #e8f1f7;  --info-line:  #cfe0ec;

  --focus:       #1f8a3c;
  --sk-a:        #ebe6d7;
  --sk-b:        #f7f3e8;

  --hero-1:      #0b4a1c;
  --hero-2:      #146b2b;
  --hero-3:      #1d8038;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;

  /* Offset and blur, never a zero-offset halo. */
  --lift:    0 6px 16px -6px rgba(27,35,24,.18), 0 2px 5px -2px rgba(27,35,24,.10);
  --lift-hi: 0 18px 40px -14px rgba(27,35,24,.26), 0 4px 10px -4px rgba(27,35,24,.12);

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --maxw: 1080px;

  /* Light-only nudges, as tokens so the dark palette can undo them. */
  --info-strong:   #17405a;
  --warn-strong:   #5f4000;
  --danger-strong: #82201a;
  --ok-strong:     #0f4d20;
  --steps-done:    var(--brand);
  --danger-fill-hover: #8d1f18;
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23465043' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --picker-filter: none;
  --mark-chip: transparent;
  --appbar-bg: rgba(250,245,233,.9);
  /* The sidebar: the deep green of the top bar it replaces, top to bottom. */
  --sb-1: #13612a; --sb-2: #0e5420; --sb-3: #0b4419;

  --tap: 48px;   /* the floor for anything a thumb must hit */
  --tabbar-h: 64px;
}

/* THE THEME IS THE RESIDENT'S CHOICE, light by default (js/theme.js). The
   inline script in each page's <head> sets <html data-theme> to "light",
   "dark" or "system" before the first paint. The dark palette is written
   twice — once for "dark", once for "system" on a dark device — because CSS
   has no way to say "this selector, or that media query" in one rule. Keep
   the two blocks identical. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --brand:       #1b7a35;
    --brand-deep:  #0f3b1c;
    --brand-ink:   #74d08e;
    --brand-soft:  #4cc06a;
    --brand-tint:  #183424;
    --brand-wash:  #142a1d;
    --brand-line:  #2a5236;

    --gold:        #e2ac2c;
    --gold-ink:    #f0c45c;
    --gold-tint:   #352a12;

    --ink:         #e8eee5;
    --ink-2:       #c3cdbf;
    --ink-3:       #9eab9a;
    --line:        #2c3a30;
    --line-soft:   #223028;

    --bg:          #0e1611;
    --surface:     #152019;
    --surface-2:   #18241c;
    --overlay:     rgba(255,255,255,.06);

    --danger:      #f29a8f;  --danger-fill: #b3342a;  --danger-bg: #3a1a17;  --danger-line: #5c2a25;
    --warn:        #f0c45c;  --warn-bg:     #33280f;  --warn-line:  #57451a;
    --ok:          #74d08e;  --ok-bg:       #163323;  --ok-line:    #2a5236;
    --info:        #8cc4e3;  --info-bg:     #132b38;  --info-line:  #24475a;

    --focus:       #6fd98c;
    --sk-a:        #1d2a22;
    --sk-b:        #26362c;

    --hero-1:      #0a2a14;
    --hero-2:      #0f3b1c;
    --hero-3:      #165426;

    --lift:    0 8px 20px -8px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
    --lift-hi: 0 20px 44px -14px rgba(0,0,0,.7), 0 4px 10px -4px rgba(0,0,0,.5);

    --info-strong:   #8cc4e3;
    --warn-strong:   #f0c45c;
    --danger-strong: #f29a8f;
    --ok-strong:     #74d08e;
    --steps-done:    var(--brand-soft);
    --danger-fill-hover: #c2453a;
    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cdbf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --picker-filter: invert(.85);
    --mark-chip: #fff;
    --appbar-bg: rgba(14,22,17,.88);
    --sb-1: #0f4a20; --sb-2: #0b3a19; --sb-3: #082c13;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
      color-scheme: dark;

      --brand:       #1b7a35;
      --brand-deep:  #0f3b1c;
      --brand-ink:   #74d08e;
      --brand-soft:  #4cc06a;
      --brand-tint:  #183424;
      --brand-wash:  #142a1d;
      --brand-line:  #2a5236;

      --gold:        #e2ac2c;
      --gold-ink:    #f0c45c;
      --gold-tint:   #352a12;

      --ink:         #e8eee5;
      --ink-2:       #c3cdbf;
      --ink-3:       #9eab9a;
      --line:        #2c3a30;
      --line-soft:   #223028;

      --bg:          #0e1611;
      --surface:     #152019;
      --surface-2:   #18241c;
      --overlay:     rgba(255,255,255,.06);

      --danger:      #f29a8f;  --danger-fill: #b3342a;  --danger-bg: #3a1a17;  --danger-line: #5c2a25;
      --warn:        #f0c45c;  --warn-bg:     #33280f;  --warn-line:  #57451a;
      --ok:          #74d08e;  --ok-bg:       #163323;  --ok-line:    #2a5236;
      --info:        #8cc4e3;  --info-bg:     #132b38;  --info-line:  #24475a;

      --focus:       #6fd98c;
      --sk-a:        #1d2a22;
      --sk-b:        #26362c;

      --hero-1:      #0a2a14;
      --hero-2:      #0f3b1c;
      --hero-3:      #165426;

      --lift:    0 8px 20px -8px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
      --lift-hi: 0 20px 44px -14px rgba(0,0,0,.7), 0 4px 10px -4px rgba(0,0,0,.5);

      --info-strong:   #8cc4e3;
      --warn-strong:   #f0c45c;
      --danger-strong: #f29a8f;
      --ok-strong:     #74d08e;
      --steps-done:    var(--brand-soft);
      --danger-fill-hover: #c2453a;
      --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cdbf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      --picker-filter: invert(.85);
      --mark-chip: #fff;
      --appbar-bg: rgba(14,22,17,.88);
      --sb-1: #0f4a20; --sb-2: #0b3a19; --sb-3: #082c13;
  }
}

/* While the theme changes, nothing animates: a switch is a cut. */
.theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: none !important;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 "Source Sans 3", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ------------------------------------------------------------ typography - */

h1, h2, h3 {
  font-family: Lexend, "Source Sans 3", sans-serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0 0 .35em;
  color: var(--ink);
}
h1 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.4rem); }
h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
h3 { font-size: 1.06rem; letter-spacing: -.012em; }

/* More room above a heading than below it: the gap belongs to what follows. */
* + h2 { margin-top: 1.9em; }
* + h3 { margin-top: 1.5em; }

p { margin: 0 0 1.05em; max-width: 68ch; }
a { color: var(--brand-ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--brand-ink); text-decoration-thickness: 2.5px; }

.muted  { color: var(--ink-3); }
.small  { font-size: .9rem; line-height: 1.5; }
.tiny   { font-size: .82rem; line-height: 1.45; }
.tabular{ font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.lede   { font-size: 1.08rem; color: var(--ink-2); max-width: 60ch; }

/* ---------------------------------------------------------------- layout - */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
main  { padding: 26px 0 96px; }
/* .wrap's side padding must not cancel main's top and bottom. */
main.wrap { padding-top: 26px; padding-bottom: 96px; }
@media (max-width: 420px) { .wrap { padding: 0 16px; } }

.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }
@media (min-width: 700px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid.cols-3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 560px) and (max-width: 899px) { .grid.cols-3 { grid-template-columns: 1fr 1fr; } }

.row    { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.end{ justify-content: flex-end; }
.spread { display: flex; gap: 14px; align-items: center;
          justify-content: space-between; flex-wrap: wrap; }
.stack > * + * { margin-top: 14px; }
.grow { flex: 1 1 auto; min-width: 0; }

/* A page's "back to everything" link: a real target, with its arrow. */
main > p:first-child > a.small[href="dashboard.html"] {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 600; text-decoration: none;
}
main > p:first-child > a.small[href="dashboard.html"]:hover { text-decoration: underline; }

/* Page heading with an icon tile beside it. */
.page-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.page-head h1 { margin: 0; }
.page-head .ico-tile { width: 48px; height: 48px; border-radius: 14px; }
.page-head .ico-tile svg { width: 24px; height: 24px; }

.ico-tile {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-ink);
}
.ico-tile svg { width: 22px; height: 22px; }
.ico-tile.gold   { background: var(--gold-tint); color: var(--gold-ink); }
.ico-tile.danger { background: var(--danger-bg); color: var(--danger); }
.ico-tile.quiet  { background: var(--line-soft); color: var(--ink-2); }

/* --------------------------------------------------------------- top bar - */

.topbar { background: var(--brand-deep); color: #fff; position: relative; z-index: 20; }
.topbar .wrap { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.topbar a { color: rgba(255,255,255,.9); text-decoration: none; }
.topbar a:hover { color: #fff; }

.brand { display: flex; align-items: center; gap: 11px; color: #fff !important;
         font-family: Lexend; font-weight: 600; letter-spacing: -.01em;
         min-height: 44px; margin-right: auto; }
.brand .mark {
  width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain;
  background: transparent; border-radius: 0;
}
.brand small { display: block; font: 400 11px/1.2 "Source Sans 3";
               color: rgba(255,255,255,.78); letter-spacing: .06em;
               text-transform: uppercase; }

.topnav { display: flex; gap: 2px; align-items: center; }
.topnav a, .topnav button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 9px 13px; border-radius: 10px; font: 600 15px/1 "Source Sans 3";
  background: transparent; border: 0; cursor: pointer; color: rgba(255,255,255,.9);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.topnav a svg { width: 18px; height: 18px; opacity: .9; }
.topnav a:hover, .topnav button:hover { background: rgba(255,255,255,.12); color:#fff; }
.topnav .current { background: rgba(255,255,255,.16); color: #fff; }
.topnav .short { display: none; }

.topbar-out {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 9px 12px; margin-left: 2px; border-radius: 10px; border: 0;
  background: transparent; color: rgba(255,255,255,.82); cursor: pointer;
  font: 600 15px/1 "Source Sans 3";
  transition: background .16s var(--ease), color .16s var(--ease);
}
.topbar-out:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar-out svg { width: 19px; height: 19px; }

.topbar :focus-visible { outline-color: var(--gold); }

@media (max-width: 860px) {
  .topbar-out .lbl { display: none; }
  .topbar-out { width: 44px; justify-content: center; padding: 0; }
}

@media (max-width: 640px) {
  .brand small { display: none; }
  .topnav:not(.tabbar) a { padding: 9px 10px; font-size: 14.5px; }
}

/* The language switch (built by I18N.switcher): a pill-shaped segmented
   control. The selected half carries aria-pressed="true". The base look sits
   on a light surface (the account page); .topbar overrides it for the green. */
.lang-switch {
  display: inline-flex; flex: 0 0 auto; align-items: stretch; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: var(--line-soft); border: 1px solid var(--line);
}
.lang-switch button {
  min-height: 44px; min-width: 44px; padding: 0 18px; border: 0;
  border-radius: 999px; background: transparent; color: var(--ink-2);
  font: 600 15px/1 "Source Sans 3"; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.lang-switch button:hover { color: var(--ink); background: var(--overlay); }
.lang-switch button[aria-pressed="true"] {
  background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.lang-switch button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.topbar .lang-switch {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2);
}
.topbar .lang-switch button {
  min-height: 36px; padding: 0 10px; color: rgba(255,255,255,.85);
  font-size: 13.5px; letter-spacing: .04em;
}
.topbar .lang-switch button:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar .lang-switch button[aria-pressed="true"] {
  background: #fff; color: var(--brand-deep);
}
.topbar .lang-switch button:focus-visible { outline-color: var(--gold); }
@media (max-width: 720px), (pointer: coarse) {
  .topbar .lang-switch { padding: 0; gap: 0; }
  .topbar .lang-switch button { min-height: 44px; }
}

/* Phones: the bar holds the seal, the switch, the bell and sign out (signed
   in), or the switch and two links (signed out). The switch keeps 44px
   targets; the links drop to icons and the wordmark may shrink, so nothing
   scrolls sideways at 375px. */
.brand { min-width: 0; }
.brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topnav a span { white-space: nowrap; }
@media (max-width: 560px) {
  .topnav:not(.tabbar) a { width: 44px; padding: 0; justify-content: center; }
  .topnav:not(.tabbar) a svg { width: 20px; height: 20px; }
  .topnav:not(.tabbar) .full {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (max-width: 480px) {
  .topbar .wrap { gap: 6px; }
  .brand { gap: 8px; font-size: 16px; }
  .topbar .lang-switch button { padding: 0; font-size: 13px; }
  .topbar-out { margin-left: 0; }
}
/* ------------------------------------------------------------- the shell - */
/*
 * Signed in, the page sits beside a deep-green sidebar — the same frame as
 * the staff console, so the office and the resident see one product. The
 * current place is lit in the page's own colour, as though the page reached
 * into the sidebar to mark where you are. From 1024px the sidebar is always
 * there and folds to icons (remembered); below that it is a drawer behind the
 * menu button, and the four places a thumb needs most stay in a tab bar.
 * Built by js/auth.js (mountShell).
 */
:root { --sb-w: 264px; --sb-w-c: 76px; --appbar-h: 60px; --sb-hi: #f6cf63; }

body.has-sidebar { padding-left: var(--sb-w); }

.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 45;
  width: var(--sb-w);
  display: flex; flex-direction: column;
  color: #fff;
  background: linear-gradient(180deg, var(--sb-1) 0%, var(--sb-2) 48%, var(--sb-3) 100%);
  border-top: 3px solid var(--gold);
}
.sidebar :focus-visible { outline: 2px solid var(--sb-hi); outline-offset: 1px; }

.sb-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.sb-brand { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 44px;
            color: #fff; text-decoration: none; border-radius: 12px; }
.sb-brand:focus-visible { outline-offset: 4px; }
.sb-brand .mark { width: 40px; height: 40px; flex: none; object-fit: contain; }
.sb-brand > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sb-brand strong { color: #fff; font: 600 17px/1.15 Lexend; letter-spacing: -.01em; white-space: nowrap; }
.sb-brand small { font: 400 11px/1.3 "Source Sans 3"; letter-spacing: .06em;
                  text-transform: uppercase; color: rgba(255,255,255,.78); white-space: nowrap; }
.sb-close { display: none; }

.sb-nav { flex: 1 1 auto; overflow-y: auto; padding: 4px 12px 12px; overscroll-behavior: contain; }
.sb-group + .sb-group { margin-top: 14px; }
.sb-group-label {
  margin: 10px 12px 6px; font: 600 11.5px/1.2 "Source Sans 3";
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7);
}
.sb-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sb-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 0 12px; border-radius: 12px;
  color: rgba(255,255,255,.88); text-decoration: none;
  font: 600 15.5px/1.2 "Source Sans 3";
  transition: background .16s var(--ease), color .16s var(--ease);
}
.sb-link svg { width: 20px; height: 20px; flex: none; }
.sb-link:hover { background: rgba(255,255,255,.09); color: #fff; }
.sb-link.is-active {
  background: var(--bg); color: var(--ink);
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.55);
}
.sb-link.is-active svg { color: var(--brand-ink); }
.sb-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-badge {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: var(--gold); color: #2b1f00;
  font: 700 12px/1 "Source Sans 3"; font-variant-numeric: tabular-nums;
}
.sb-badge[hidden] { display: none; }

/* Language and appearance, one row each: the word, then the control. */
.sb-prefs { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.1);
            display: grid; gap: 6px; }
.sb-pref { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sb-pref-label { font-size: 14px; color: rgba(255,255,255,.78); }
.sb-pref-mini { display: none; }
.sidebar .lang-switch, .sidebar .theme-switch {
  padding: 2px; gap: 2px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
}
.sidebar .lang-switch button, .sidebar .theme-switch button {
  min-height: 40px; min-width: 44px; padding: 0 10px;
  color: rgba(255,255,255,.85); font-size: 13.5px; letter-spacing: .04em;
}
.sidebar .lang-switch button:hover, .sidebar .theme-switch button:hover {
  background: rgba(255,255,255,.12); color: #fff;
}
.sidebar .lang-switch button[aria-pressed="true"],
.sidebar .theme-switch button[aria-pressed="true"] {
  background: #fff; color: var(--sb-2); box-shadow: none;
}
.sidebar .lang-switch button:focus-visible,
.sidebar .theme-switch button:focus-visible { outline: 2px solid var(--sb-hi); outline-offset: 1px; }

.sb-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 8px; }
.sb-user {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 12px; background: rgba(255,255,255,.06);
}
.sb-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sb-hi); color: #3a2a00;
  font: 700 13px/1 "Source Sans 3"; letter-spacing: .02em;
}
.sb-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-user-text strong, .sb-user-text small {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-text strong { font-size: 14.5px; font-weight: 600; }
.sb-user-text small { font-size: 13px; color: rgba(255,255,255,.78);
                      font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.sb-actions { display: flex; gap: 6px; }
.sb-signout, .sb-toggle, .sb-cycle {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 10px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  background: transparent; color: rgba(255,255,255,.9);
  font: 600 14.5px/1 "Source Sans 3"; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.sb-signout { flex: 1 1 auto; }
.sb-signout svg, .sb-toggle svg, .sb-cycle svg { width: 18px; height: 18px; flex: none; }
.sb-signout:hover { background: rgba(168,39,31,.32); border-color: rgba(255,170,160,.5); color: #fff; }
.sb-toggle:hover, .sb-cycle:hover { background: rgba(255,255,255,.1); color: #fff; }
.sb-signout:disabled { opacity: .65; cursor: progress; }
.sb-toggle .ic-panel-open { display: none; }

/* The slim bar above the page: the menu (drawer widths), where you are, the bell. */
.topbar.appbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--appbar-bg); color: var(--ink);
  -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.appbar-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 12px; min-height: var(--appbar-h);
}
.topbar.appbar a { color: inherit; }
.topbar.appbar :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sb-open, .appbar-brand { display: none; }
.crumbs { min-width: 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center;
             gap: 6px; min-width: 0; }
.crumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crumbs li svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.crumbs a { color: var(--ink-2) !important; font-size: 15px; text-decoration: none;
            white-space: nowrap; padding: 10px 2px; }
.crumbs a:hover { color: var(--ink) !important; text-decoration: underline; }
.crumbs [aria-current] { font: 600 17px/1.2 Lexend; letter-spacing: -.01em; color: var(--ink);
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar-spacer { flex: 1 1 auto; }
.topbar.appbar .topbell { color: var(--ink-2); border: 1px solid var(--line); background: var(--surface); }
.topbar.appbar .topbell:hover { background: var(--overlay); color: var(--ink); }
.topbar.appbar .topbell.current { background: var(--brand-tint); color: var(--brand-ink);
                                  border-color: var(--brand-line); }
.topbar.appbar .topbell-badge { color: #2b1f00; box-shadow: 0 0 0 2px var(--surface); }

.sb-scrim { display: none; }
.tabbar { display: none; }

/* --- wide screens: folds to icons -------------------------------------- */
@media (min-width: 1024px) {
  .sb-collapsed body.has-sidebar { padding-left: var(--sb-w-c); }
  .sb-collapsed .sidebar { width: var(--sb-w-c); }
  .sb-collapsed .sb-head { justify-content: center; padding: 16px 0 12px; }
  .sb-collapsed .sb-brand > span,
  .sb-collapsed .sb-group-label,
  .sb-collapsed .sb-user-text,
  .sb-collapsed .sb-pref { display: none; }
  .sb-collapsed .sb-nav { overflow: visible; padding: 4px 12px; }
  .sb-collapsed .sb-group + .sb-group { margin-top: 10px; padding-top: 10px;
                                        border-top: 1px solid rgba(255,255,255,.12); }
  .sb-collapsed .sb-link { justify-content: center; padding: 0; }
  .sb-collapsed .sb-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sb-collapsed .sb-badge {
    position: absolute; top: 3px; right: 4px;
    min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px;
  }
  .sb-collapsed .sb-prefs { padding: 10px 12px; }
  .sb-collapsed .sb-pref-mini { display: grid; gap: 6px; }
  .sb-collapsed .sb-lang-cycle { font-size: 13px; letter-spacing: .04em; }
  .sb-collapsed .sb-user { justify-content: center; padding: 6px 0; background: transparent; }
  .sb-collapsed .sb-actions { flex-direction: column; }
  .sb-collapsed .sb-signout { padding: 0; }
  .sb-collapsed .sb-toggle .ic-panel-close { display: none; }
  .sb-collapsed .sb-toggle .ic-panel-open { display: inline; }

  /* A name beside each icon, on hover or keyboard focus. */
  .sb-collapsed .sb-link::after, .sb-collapsed .sb-user::after,
  .sb-collapsed .sb-signout::after, .sb-collapsed .sb-toggle::after,
  .sb-collapsed .sb-cycle::after {
    content: attr(data-label);
    position: absolute; left: calc(100% + 14px); top: 50%;
    transform: translate(-4px, -50%); opacity: 0; pointer-events: none;
    background: var(--ink); color: var(--bg); white-space: nowrap;
    font: 600 13.5px/1 "Source Sans 3"; letter-spacing: 0; text-transform: none;
    padding: 8px 10px; border-radius: 8px; box-shadow: var(--lift);
    transition: opacity .14s var(--ease), transform .14s var(--ease);
    z-index: 50;
  }
  .sb-collapsed .sb-link:hover::after, .sb-collapsed .sb-link:focus-visible::after,
  .sb-collapsed .sb-user:hover::after,
  .sb-collapsed .sb-signout:hover::after, .sb-collapsed .sb-signout:focus-visible::after,
  .sb-collapsed .sb-toggle:hover::after, .sb-collapsed .sb-toggle:focus-visible::after,
  .sb-collapsed .sb-cycle:hover::after, .sb-collapsed .sb-cycle:focus-visible::after {
    opacity: 1; transform: translate(0, -50%);
  }
  .sb-collapsed .sb-signout .sb-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  body.has-sidebar .rt-toasts { left: calc(50% + var(--sb-w) / 2); }
  .sb-collapsed body.has-sidebar .rt-toasts { left: calc(50% + var(--sb-w-c) / 2); }
}

/* --- below 1024px: a drawer, and the tab bar ---------------------------- */
@media (max-width: 1023.98px) {
  body.has-sidebar { padding-left: 0; }
  body.sb-locked { overflow: hidden; }
  body.sb-locked .env-badge { display: none; }

  .sidebar {
    width: min(304px, 86vw); z-index: 70;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .26s var(--ease-out), visibility 0s linear .26s;
  }
  .sidebar.is-open {
    transform: none; visibility: visible;
    transition: transform .26s var(--ease-out);
    box-shadow: 0 0 48px rgba(0,0,0,.4);
  }
  .sb-close {
    display: grid; place-items: center; flex: none; margin-left: auto;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
    background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
  }
  .sb-close svg { width: 22px; height: 22px; }
  .sb-toggle { display: none; }

  .sb-scrim {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(8,22,12,.52);
    opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
  }
  .sb-scrim.is-on { opacity: 1; pointer-events: auto; }

  .appbar-in { padding: 0 16px; gap: 8px; }
  .sb-open {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; padding: 0; margin-left: -4px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--ink); cursor: pointer;
  }
  .sb-open svg { width: 22px; height: 22px; }
  .sb-open:hover { background: var(--overlay); }
  .appbar-brand { display: flex; align-items: center; flex: none; min-height: 44px; }
  .appbar-brand img { width: 32px; height: 32px; object-fit: contain; }

  /* The four places a thumb needs most, each with its icon AND its word. */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    padding: 6px 6px max(6px, env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 20px -14px rgba(0,0,0,.35);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 52px; padding: 6px 4px; border-radius: 12px; text-decoration: none;
    color: var(--ink-3); font: 600 12.5px/1.1 "Source Sans 3"; text-align: center;
  }
  .tabbar a svg { width: 22px; height: 22px; transition: transform .25s var(--ease-out); }
  .tabbar a:hover { background: var(--overlay); color: var(--ink); }
  .tabbar a.current { background: var(--brand-tint); color: var(--brand-ink); }
  .tabbar a.current svg { transform: translateY(-1px) scale(1.06); }
  .tabbar a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  @media (min-width: 640px) { .tabbar { padding-left: max(6px, calc(50% - 300px));
                                        padding-right: max(6px, calc(50% - 300px)); } }

  body.has-tabbar main { padding-bottom: calc(var(--tabbar-h) + 64px); }
  body.has-tabbar .env-badge { bottom: calc(var(--tabbar-h) + 18px); }
  body.has-tabbar .rt-toasts { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  /* Only where you are: the parent is one tap away in the drawer. */
  .crumbs li:not(:last-child), .crumbs li > svg { display: none; }
  .crumbs [aria-current] { font-size: 16px; }
}
.rt-banner { top: calc(var(--appbar-h) + 16px) !important; }

/* --- appearance control (js/theme.js) ----------------------------------- */
.theme-switch {
  display: inline-flex; flex: 0 0 auto; align-items: stretch; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: var(--line-soft); border: 1px solid var(--line);
}
.theme-switch button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 16px; border: 0;
  border-radius: 999px; background: transparent; color: var(--ink-2);
  font: 600 15px/1.15 "Source Sans 3"; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.theme-switch button svg { width: 18px; height: 18px; flex: none; }
.theme-switch button:hover { color: var(--ink); background: var(--overlay); }
.theme-switch button[aria-pressed="true"] {
  background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.theme-switch button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.theme-switch.is-compact button { padding: 0 9px; }
.theme-switch.is-compact .lbl {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* On the account page the three words must fit a phone: they stack. */
.theme-switch-full { margin-top: 4px; }
@media (max-width: 520px) {
  .theme-switch-full { display: grid; grid-template-columns: 1fr; width: 100%;
                       border-radius: 16px; }
  .theme-switch-full button { justify-content: flex-start; border-radius: 12px; }
}


/* -------------------------------------------------------------- surfaces - */
/* Bordered OR raised. Never both. */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
}
.card.pad-lg { padding: 28px; }
.card > :first-child { margin-top: 0; }
.card > :last-child  { margin-bottom: 0; }
@media (max-width: 420px) { .card { padding: 18px; } .card.pad-lg { padding: 22px; } }

/* A card that is a link or a button gets its lift on interaction only. */
.card-link {
  display: block; text-decoration: none; color: inherit; background: var(--surface);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease);
}
.card-link:hover {
  border-color: var(--brand-line); box-shadow: var(--lift);
  transform: translateY(-2px); color: inherit;
}
.card-link:active { transform: translateY(0) scale(.995); box-shadow: none; }

/* Inside a card, a group is separated by space and a rule — not another card. */
.group + .group { margin-top: 20px; padding-top: 20px;
                  border-top: 1px solid var(--line-soft); }

.section-title { display: flex; align-items: center; gap: 10px; margin: 34px 0 12px; }
.section-title h2 { margin: 0; }
.section-title svg { width: 20px; height: 20px; color: var(--brand-ink); }

hr.sep { border: 0; border-top: 1px solid var(--line-soft); margin: 22px 0; }

/* --------------------------------------------------------------- buttons - */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--tap); padding: 12px 20px;
  border-radius: var(--r-sm); border: 1.5px solid transparent;
  font: 600 16px/1.1 "Source Sans 3"; cursor: pointer; text-decoration: none;
  text-align: center;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .12s var(--ease),
              box-shadow .16s var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn[aria-busy="true"] { opacity: .85; cursor: progress; }
.btn svg { width: 19px; height: 19px; flex: 0 0 auto; }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-deep); color: #fff;
                                    box-shadow: var(--lift); }
.btn-ghost   { background: var(--surface); color: var(--brand-ink);
               border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brand-ink); background: var(--brand-wash);
                                  color: var(--brand-ink); }
.btn-quiet   { background: transparent; color: var(--ink-2); border-color: transparent;
               min-height: 44px; padding: 8px 12px; }
.btn-quiet:hover:not(:disabled) { color: var(--ink); background: var(--overlay); }
.btn-danger  { background: var(--danger-fill); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger-fill-hover); color: #fff; }
.btn-block   { width: 100%; }
.btn-sm      { min-height: 44px; padding: 8px 14px; font-size: 15px; }

/* The one spinner in the system: inside a button that is doing something. */
.spin {
  width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite; opacity: .9;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- forms - */

.field { display: block; margin-bottom: 18px; }
.field > span, .field > label, .label {
  display: block; font-weight: 600; font-size: .95rem; margin-bottom: 7px;
  color: var(--ink);
}
.field > span .muted, .field > label .muted { font-weight: 400; }
.field .hint { font-size: .875rem; color: var(--ink-3); margin: 6px 0 0; }

/* `input:not([type])` matters: an <input> with no type IS a text input, but no
   [type=text] selector matches it, and half this project's fields omit it. */
input:not([type]), input[type=text], input[type=tel], input[type=email],
input[type=number], input[type=password], input[type=date], input[type=search],
select, textarea {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  font: inherit; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease),
              background .16s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .85; }
input:hover:not(:disabled), select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent);
}
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
select { appearance: none; padding-right: 42px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right 14px center;
  background-size: 18px; }
input[type=date]::-webkit-calendar-picker-indicator { filter: var(--picker-filter); }

fieldset { border: 1px solid var(--line); border-radius: var(--r);
           padding: 18px; margin: 0 0 18px; min-width: 0; }
legend { font-weight: 600; padding: 0 8px; font-size: .95rem; }

.code-input {
  font: 600 27px/1 "Source Sans 3" !important; letter-spacing: .42em;
  text-align: center; padding: 14px 10px 14px 24px !important;
  font-variant-numeric: tabular-nums;
}

.check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px;
         padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
         cursor: pointer; transition: border-color .16s var(--ease),
                                      background .16s var(--ease); }
.check:hover { border-color: var(--brand-line); background: var(--brand-wash); }
.check:has(input:checked) { border-color: var(--brand-ink); background: var(--brand-wash); }
.check input[type=checkbox] { width: 21px; height: 21px; margin: 1px 0 0;
                              flex: 0 0 auto; accent-color: var(--brand); }
.check > span { flex: 1 1 auto; }
/* Consent and certification boxes (js/consents.js). An unticked box the
 * resident tried to get past is outlined like any other field left empty. */
.check:has(input[aria-invalid="true"]) { border-color: var(--danger); background: var(--danger-bg); }
.check.consent a { font-weight: 600; }
.check.certify { margin: 16px 0 0; }
.consent-done { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.consent-done svg { flex: 0 0 auto; color: var(--brand-ink); }
/* A slot's inline "remove this file?" question (js/documents.js). */
.doc-confirm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
               flex: 1 1 100%; justify-content: flex-end; }
.doc-confirm p { margin: 0; font-size: .9rem; }

input[type=file] {
  width: 100%; padding: 14px; font: inherit; color: var(--ink-3);
  background: var(--surface-2); border: 2px dashed var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
input[type=file]:hover { border-color: var(--brand-line); background: var(--brand-wash); }
input[type=file]:focus { outline: none; border-color: var(--brand-ink);
                         box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent); }
input[type=file]::file-selector-button {
  font: 600 14.5px/1 "Source Sans 3"; margin-right: 14px; padding: 11px 16px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--brand); color: #fff;
}
input[type=file]::file-selector-button:hover { background: var(--brand-deep); }

/* ---------------------------------------------------------------- status - */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; white-space: nowrap; line-height: 1.3;
  border: 1px solid transparent;
}
.pill svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pill-ok     { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-line); }
.pill-warn   { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-line); }
.pill-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.pill-info   { background: var(--info-bg);   color: var(--info);   border-color: var(--info-line); }
.pill-quiet  { background: var(--line-soft); color: var(--ink-2); }

.note {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--r-sm); padding: 15px 17px; font-size: .96rem;
  border: 1px solid transparent; margin-bottom: 16px;
}
.note svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.note > div { flex: 1 1 auto; min-width: 0; }
.note p:last-child { margin-bottom: 0; }
.note .btn { margin-top: 4px; }
.note-info   { background: var(--info-bg);   border-color: var(--info-line);   color: var(--info); }
.note-warn   { background: var(--warn-bg);   border-color: var(--warn-line);   color: var(--warn); }
.note-danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.note-ok     { background: var(--ok-bg);     border-color: var(--ok-line);     color: var(--ok); }
/* On the light tints the plain role colour is a shade too soft for a
   paragraph; the "strong" tokens are the same hue, darker (dark: unchanged). */
.note-info { color: var(--info-strong); } .note-warn { color: var(--warn-strong); }
.note-danger { color: var(--danger-strong); } .note-ok { color: var(--ok-strong); }

/* A moment worth marking — submitted, paid, released, sent back. The picture
   carries the feeling; the heading and sentence carry the facts. */
.banner {
  display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center;
  padding: 18px 22px 18px 14px; border-radius: var(--r); margin-bottom: 16px;
  border: 1px solid transparent;
}
.banner h2 { margin: 0 0 4px; font-size: 1.2rem; }
.banner p  { margin: 0; color: var(--ink-2); }
.banner .row { margin-top: 12px; }
.banner-art { width: 132px; height: auto; display: block; }
.banner-ok   { background: var(--ok-bg);   border-color: var(--ok-line); }
.banner-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.banner-info { background: var(--info-bg); border-color: var(--info-line); }
.banner .banner-art { animation: pop .6s var(--ease-out) both .08s; }
@media (max-width: 520px) {
  .banner { grid-template-columns: 1fr; text-align: center; padding: 18px; gap: 6px; }
  .banner-art { width: 148px; margin: 0 auto; }
  .banner .row { justify-content: center; }
}

/* -------------------------------------------------------------- progress - */

.steps { display: flex; gap: 5px; margin: 16px 0 8px; }
.steps i { flex: 1; height: 8px; border-radius: 999px; background: var(--line-soft);
           position: relative; overflow: hidden; }
.steps i::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
                  transform-origin: left; transform: scaleX(0);
                  transition: transform .5s var(--ease); }
.steps i.done::after { transform: scaleX(1); }
.steps i.now::after  { background: var(--gold); transform: scaleX(1); }
.steps i.done::after { background: var(--steps-done); }

/* The new-permit wizard: the bar gets each step's name on a wide screen. */
#steps.steps { margin-top: 12px; }

/* The seven clearances, as a list a person can scan in one pass. */
.clearances { display: grid; gap: 9px; }
@media (min-width: 620px) { .clearances { grid-template-columns: 1fr 1fr; } }
.clearance {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.clearance.is-done { background: var(--brand-wash); border-color: var(--brand-line); }
.clearance .c-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
                    display: grid; place-items: center;
                    background: var(--line-soft); color: var(--ink-2); }
.clearance .c-ico svg { width: 18px; height: 18px; }
.clearance.is-done .c-ico { background: var(--brand); color: #fff; }

/* A document slot is a clearance row with an action. One column, always. */
.doc-list { display: grid; gap: 9px; }
.doc-slot { flex-wrap: wrap; align-items: flex-start; position: relative; }
.doc-slot > .grow { flex: 1 1 220px; }
.doc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.doc-file { display: flex; gap: 6px; align-items: center; margin-top: 4px;
            overflow-wrap: anywhere; flex-wrap: wrap; }
.doc-file svg { width: 15px; height: 15px; flex: 0 0 auto; }
.upload-bar { height: 6px; margin-top: 8px; border-radius: 999px;
              background: var(--line-soft); overflow: hidden; }
.upload-bar i { display: block; height: 100%; background: var(--brand-soft);
                border-radius: inherit; transition: width .2s linear; }

/* The directory on the help page. */
.office dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
             margin: 10px 0 0; font-size: .95rem; }
.office dt { color: var(--ink-3); }
.office dd { margin: 0; overflow-wrap: anywhere; }
.office dd a { display: inline-block; padding: 2px 0; }

/* ---------------------------------------------------------------- tables - */

table.data { width: 100%; border-collapse: collapse; font-size: .96rem; }
table.data th, table.data td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.data th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
                color: var(--ink-3); font-weight: 700; background: var(--surface-2); }
table.data th:first-child { border-top-left-radius: var(--r-sm); }
table.data th:last-child  { border-top-right-radius: var(--r-sm); }
table.data td.num, table.data th.num { text-align: right;
                                       font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tbody tr { transition: background .15s var(--ease); }
table.data tbody tr:hover { background: var(--brand-wash); }
table.data tr:last-child td { border-bottom: 0; }
/* The total row: the number the resident actually pays. */
table.data tbody tr:last-child:has(strong) td {
  border-top: 2px solid var(--line); background: var(--brand-wash);
  font-size: 1.05rem; padding-top: 14px; padding-bottom: 14px;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
                margin: 0 -22px; padding: 0 22px; }
@media (max-width: 420px) { .table-scroll { margin: 0 -18px; padding: 0 18px; } }

/* ------------------------------------------------------- empty and error - */

.empty { text-align: center; padding: 36px 24px 40px; }
.empty .illo { width: 220px; max-width: 70%; height: auto; display: block;
               margin: 0 auto 12px; }
.empty .art { width: 68px; height: 68px; margin: 0 auto 18px; color: var(--brand-ink);
              background: var(--brand-tint); border-radius: 20px;
              display: grid; place-items: center; }
.empty .art svg { width: 32px; height: 32px; }
.empty h3 { color: var(--ink); font-size: 1.22rem; margin-top: 0; }
.empty p  { color: var(--ink-3); margin-left: auto; margin-right: auto; max-width: 46ch; }
.empty .btn { margin-top: 4px; }
.empty.is-compact { padding: 24px 20px 28px; }
.empty.is-compact .illo { width: 168px; }
.empty .illo { animation: pop .6s var(--ease-out) both .05s; }

/* ------------------------------------------------------------- skeletons - */

.skeleton { background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 37%, var(--sk-a) 63%);
            background-size: 400% 100%; animation: sk 1.4s ease infinite;
            border-radius: var(--r-sm); display: block; }
@keyframes sk { 0% { background-position: 100% 50%; }
                100% { background-position: 0 50%; } }
.sk-card { display: flex; gap: 14px; align-items: center; }
.sk-ico  { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; }
.sk-lines { flex: 1 1 auto; display: grid; gap: 10px; }
.sk-line { height: 14px; border-radius: 7px; }
.sk-line.sm { height: 10px; }
.sk-hero { height: 168px; border-radius: var(--r-lg); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px;
}
.card-link:focus-visible, .service:focus-visible, .notif:focus-visible {
  outline-offset: 3px; border-radius: var(--r);
}

.skip { position: absolute; left: 12px; top: -60px; z-index: 100;
        background: var(--surface); color: var(--brand-ink); padding: 10px 14px;
        border-radius: var(--r-sm); font-weight: 600; box-shadow: var(--lift); }
.skip:focus { top: 12px; }

/* --------------------------------------------------------------- motion - */
/* Content arrives from an already-visible default, so a failed script or a
   reduced-motion setting leaves a readable page. */

@keyframes rise { from { opacity: 0; transform: translateY(10px); }
                  to   { opacity: 1; transform: none; } }
@keyframes pop  { from { opacity: 0; transform: scale(.9) translateY(6px); }
                  to   { opacity: 1; transform: none; } }
.rise { animation: rise .5s var(--ease) both; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .1s; }
.rise-3 { animation-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .spin { animation: none; border-right-color: currentColor; opacity: .5; }
}

/* ------------------------------------------------------------ sign-in --- */
/* index.html: sign in, sign up and forgot PIN on one page (js/signin.js).
 *
 * Three compositions, never a squeezed one:
 *   wide (>= 1024px)    the green brand column beside a card on cream;
 *   tablet (720-1023)   the green becomes a banner and the card overlaps it;
 *   phone (< 720)       a compact green header, then the card as a sheet.
 * The card is raised in light and bordered in dark — one or the other. */

:root {
  --auth-card-shadow: 0 28px 60px -30px rgba(14,84,32,.38), 0 8px 20px -12px rgba(27,35,24,.16);
  --auth-card-edge: transparent;
  --auth-cta-shadow: 0 10px 22px -12px rgba(20,107,43,.75);
}
:root[data-theme="dark"] {
  --auth-card-shadow: none;
  --auth-card-edge: var(--line);
  --auth-cta-shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --auth-card-shadow: none;
    --auth-card-edge: var(--line);
    --auth-cta-shadow: none;
  }
}

.auth { position: relative; min-height: 100vh; min-height: 100dvh; background: var(--bg); }
/* `hidden` must win over .btn's inline-flex (e.g. #send-push). */
.auth [hidden] { display: none !important; }

/* --- the green side ---------------------------------------------------- */

.auth-hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background:
    radial-gradient(80% 55% at 100% 0%, rgba(226,169,31,.09), transparent 65%),
    radial-gradient(70% 50% at 0% 100%, rgba(255,255,255,.07), transparent 70%),
    linear-gradient(160deg, var(--hero-1) 0%, var(--hero-2) 58%, var(--hero-3) 100%);
}
.auth-hero h1 {
  color: #fff; max-width: 16ch; margin: 0 0 .5em;
  font-size: clamp(1.9rem, 1.15rem + 2.1vw, 2.85rem); letter-spacing: -.026em;
}
.hero-lead { color: rgba(255,255,255,.9); max-width: 44ch; font-size: 1.1rem; margin: 0; }
.auth-hero .mark { display: block; width: 76px; height: 72px; object-fit: contain; margin: 0 0 28px; }
.hero-points { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; max-width: 46ch; }
.hero-points li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.96); line-height: 1.45; }
.hero-points svg { width: 24px; height: 24px; flex: 0 0 auto; padding: 4px; border-radius: 8px;
                   color: #0b3f18; background: var(--gold); stroke-width: 2.4; }
.hero-art { display: block; height: auto; }
.hero-brand { display: none; }

/* --- language and appearance -------------------------------------------- */

.auth-tools { position: absolute; z-index: 3; top: 20px; right: 24px;
              display: flex; align-items: center; gap: 8px; }
.auth-lang:empty, .auth-theme:empty { display: none; }
.auth-tools .lang-switch button { padding: 0 14px; font-size: 14px; letter-spacing: .04em; }
.auth-cycle {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.auth-cycle:hover { color: var(--ink); border-color: var(--ink-3); }
.auth-cycle svg { width: 20px; height: 20px; }
.auth-cycle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Over the green (tablet and phone): white on translucent white. */
@media (max-width: 1023.98px) {
  .auth-tools .lang-switch { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); }
  .auth-tools .lang-switch button { color: rgba(255,255,255,.9); }
  .auth-tools .lang-switch button:hover { background: rgba(255,255,255,.14); color: #fff; }
  .auth-tools .lang-switch button[aria-pressed="true"] { background: #fff; color: #0e5420; box-shadow: none; }
  .auth-tools .auth-cycle { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); color: #fff; }
  .auth-tools .auth-cycle:hover { background: rgba(255,255,255,.2); }
  .auth-tools :focus-visible { outline-color: var(--gold); }
}

/* --- the card ------------------------------------------------------------ */

.auth-main { position: relative; z-index: 1; }
.auth-card {
  width: 100%; max-width: 456px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--auth-card-edge);
  border-radius: 16px; box-shadow: var(--auth-card-shadow);
  padding: 36px 36px 30px;
  animation: rise .55s var(--ease) both;
}
.lockup { display: flex; align-items: center; gap: 12px; margin: 0 0 30px; }
.lockup img { width: 46px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.lockup-words { display: grid; line-height: 1.2; }
.lockup-words strong { font: 600 1.12rem/1.2 Lexend, "Source Sans 3", sans-serif; letter-spacing: -.015em; color: var(--ink); }
.lockup-words span { font-size: .86rem; color: var(--ink-3); }

.auth-card h2 { margin: 0 0 6px; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.7rem); }
.pane-lead { color: var(--ink-2); margin: 0 0 24px; }
.pane-lead strong { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pane { animation: rise .32s var(--ease) both; }
#banner .note { margin-bottom: 20px; }
#si-error .note, #su-error .note, #code-error .note, #d-error .note, #np-error .note { margin: 0 0 16px; }

/* Step indicator: one bar per step, the words under it. */
.auth-steps { margin: -6px 0 26px; }
.auth-steps ol { list-style: none; margin: 0; padding: 0; display: grid;
                 grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.auth-steps li { display: grid; gap: 7px; min-width: 0; }
.auth-steps .bar { display: block; height: 4px; border-radius: 4px; background: var(--line-soft);
                   transition: background .3s var(--ease); }
.auth-steps .lbl { font-size: .8rem; line-height: 1.2; color: var(--ink-3);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-steps li.is-done .bar { background: var(--steps-done); }
.auth-steps li.is-done .lbl { color: var(--ink-2); }
.auth-steps li.is-current .bar { background: var(--gold); }
.auth-steps li.is-current .lbl { color: var(--ink); font-weight: 600; }

/* Mobile number: a fixed +63, then the ten digits. */
.phone {
  display: flex; align-items: stretch; min-height: 52px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field > span.phone { display: flex; margin: 0; font-weight: 400; font-size: 1rem; }
.phone:hover { border-color: var(--ink-3); }
.phone-cc { display: flex; align-items: center; padding: 0 12px 0 15px; margin: 8px 0;
            border-right: 1px solid var(--line); font-weight: 600; color: var(--ink-2);
            font-variant-numeric: tabular-nums; }
.field .phone input {
  flex: 1 1 auto; min-width: 0; min-height: 0; border: 0; background: transparent;
  padding: 0 14px 0 12px; font-size: 1.12rem; letter-spacing: .03em; font-variant-numeric: tabular-nums;
}
.field .phone input:focus, .field .phone input:focus-visible { outline: none; box-shadow: none; }
.phone:focus-within { border-color: var(--brand-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 30%, transparent); }
.field .phone input.fe-invalid, .field .phone input[aria-invalid="true"] { box-shadow: none !important; }
.phone:has(input[aria-invalid="true"]), .phone:has(.fe-invalid) {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent);
}
.phone:has(.fe-pulse) { animation: fe-shake .36s cubic-bezier(.36,.07,.19,.97) 1; }

/* Label row with an action on the right (Show / Hide). */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
              margin-bottom: 8px; min-height: 28px; }
.field-head label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.reveal {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px;
  margin: -8px -10px -8px 0; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--brand-ink); font: 600 .92rem/1 "Source Sans 3"; cursor: pointer;
}
.reveal:hover { background: var(--brand-wash); }
.reveal svg { width: 18px; height: 18px; }

/* Digit boxes: one real input over N painted boxes (js/signin.js). */
.digits { position: relative; }
.digits-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 292px; }
.digits[data-len="6"] .digits-boxes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 372px; }
.digit {
  position: relative; display: grid; place-items: center; height: 60px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface);
  font: 600 1.6rem/1 Lexend, "Source Sans 3", sans-serif; color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.digits:hover .digit { border-color: var(--ink-3); }
.digit.is-filled { border-color: var(--brand-line); background: var(--brand-wash); }
.digit.is-masked::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.digit.is-active { border-color: var(--brand-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 30%, transparent); }
.digit.is-active:not(.is-filled)::before {
  content: ""; width: 2px; height: 26px; border-radius: 1px; background: var(--brand-ink);
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.field .digits-input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0;
  padding: 0; margin: 0; border: 0; border-radius: 12px; background: transparent;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent;
  font-size: 16px; cursor: pointer; box-shadow: none;
  transition: background-color 600000s 0s;   /* no autofill tint over the boxes */
}
.field .digits-input:focus, .field .digits-input:focus-visible { outline: none; box-shadow: none; }
.field .digits-input::selection { background: transparent; }
.field .digits-input.fe-invalid { box-shadow: none !important; }
.digits:has(.fe-invalid) .digit, .digits:has([aria-invalid="true"]) .digit { border-color: var(--danger); }
.digits:has(.fe-invalid) .digit.is-active { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
.digits:has(.fe-pulse) .digits-boxes { animation: fe-shake .36s cubic-bezier(.36,.07,.19,.97) 1; }
.digits ~ .hint { margin-top: 10px; }

/* Secondary actions. */
.link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: 0 -6px;
  border: 0; background: none; border-radius: 8px; cursor: pointer;
  font: 600 .97rem/1.2 "Source Sans 3"; color: var(--brand-ink);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: text-decoration-color .16s var(--ease), color .16s var(--ease);
}
.link-btn:hover { text-decoration-color: currentColor; }
.link-btn.is-quiet { color: var(--ink-2); }
.form-aux { display: flex; justify-content: flex-end; margin: -10px 0 14px; }
.pane-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
#send-push { margin-top: 12px; }
.pane-back { margin-top: 10px; }

.btn-lg { min-height: 54px; font-size: 17px; border-radius: 12px; }
.auth-card .btn-primary { box-shadow: var(--auth-cta-shadow); }
.auth-card .btn-primary svg { transition: transform .2s var(--ease); }
.auth-card .btn-primary:hover:not(:disabled) svg { transform: translateX(3px); }

.trust { display: flex; align-items: flex-start; justify-content: center; gap: 8px;
         margin: 16px auto 0; font-size: .875rem; line-height: 1.4; color: var(--ink-3); text-align: left; }
.trust svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--brand-ink); }

.auth-alt { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-soft); text-align: center; }
.auth-alt > span { display: block; color: var(--ink-2); margin-bottom: 12px; }

.grid.cols-2.tight { gap: 0 14px; }

.auth-foot { text-align: center; font-size: .9rem; line-height: 1.5; color: var(--ink-3);
             padding: 22px 16px 28px; }
.auth-foot p { margin: 0 auto 4px; max-width: 46ch; }

/* --- wide: brand column + card ------------------------------------------ */
@media (min-width: 1024px) {
  .auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(500px, .9fr); }
  .auth-hero { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
               padding: 56px clamp(40px, 5vw, 80px) 0; }
  .hero-copy { max-width: 560px; }
  .hero-art { width: 100%; max-width: 620px; max-height: 42vh; object-fit: contain;
              object-position: 50% 100%; margin: auto auto 0; padding-top: 32px;
              animation: rise .8s var(--ease) both .12s; }
  .auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center;
               padding: 92px clamp(24px, 4vw, 56px) 8px; }
  .auth-card { margin: 0; }
}

/* A short wide window: the card keeps its fold. */
@media (min-width: 1024px) and (max-height: 860px) {
  .auth-main { padding-top: 80px; }
  .auth-card { padding-top: 28px; padding-bottom: 24px; }
  .lockup { margin-bottom: 22px; }
  .pane-lead { margin-bottom: 18px; }
  .auth-alt { margin-top: 20px; padding-top: 18px; }
  .auth-hero { padding-top: 40px; }
  .auth-hero .mark { width: 60px; height: 57px; margin-bottom: 20px; }
}

/* --- tablet: green banner, card overlapping it -------------------------- */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .auth-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 34%);
               align-items: end; gap: 24px; padding: 28px 40px 92px; }
  .auth-hero .mark { width: 56px; height: 53px; margin-bottom: 18px; }
  .auth-hero h1 { font-size: clamp(1.7rem, 1rem + 2vw, 2.15rem); max-width: 20ch; }
  .hero-lead { font-size: 1.02rem; }
  .hero-points { display: none; }
  .hero-art { width: 100%; max-height: 190px; object-fit: contain; object-position: 50% 100%;
              align-self: end; }
  .hero-copy { padding-top: 4px; padding-right: 8px; }
  .auth-main { margin-top: -60px; padding: 0 24px; }
}
@media (max-width: 1023.98px) {
  .auth-tools { top: 16px; right: 16px; }
}

/* --- phone: compact header, card as a sheet ----------------------------- */
@media (max-width: 719.98px) {
  .auth-hero { padding: 14px 16px 46px; }
  .hero-brand { display: flex; align-items: center; gap: 10px; min-height: 44px;
                padding-right: 150px; }
  .hero-brand-seal { width: 42px; height: 40px; object-fit: contain; flex: 0 0 auto; }
  .hero-brand-words { display: grid; line-height: 1.15; min-width: 0; }
  .hero-brand-words strong { font: 600 1.02rem/1.2 Lexend, "Source Sans 3", sans-serif; color: #fff; }
  .hero-brand-words span { font-size: .8rem; color: rgba(255,255,255,.82); }
  .auth-hero .mark, .hero-lead, .hero-points, .hero-art { display: none; }
  .auth-hero h1 { font-size: 1.42rem; max-width: 22ch; margin: 18px 0 0; letter-spacing: -.02em; }
  .auth-tools { top: 14px; right: 12px; gap: 6px; }
  .auth-tools .lang-switch button { padding: 0 11px; font-size: 13px; }
  .auth-main { margin-top: -22px; background: var(--surface); border-radius: 22px 22px 0 0;
               border-top: 1px solid var(--auth-card-edge); min-height: calc(100dvh - 120px); }
  .auth-card { max-width: none; border: 0; border-radius: 22px 22px 0 0; box-shadow: none;
               padding: 26px 20px 8px; animation: none; }
  .lockup { display: none; }
  .auth-card .auth-steps { margin-top: 0; }
  .auth-foot { border-top: 1px solid var(--line-soft); margin: 8px 20px 0; padding: 20px 0 28px; }
  .digit { height: 56px; }
}
@media (max-width: 380px) {
  .hero-brand-words span { display: none; }
  .digits[data-len="6"] .digits-boxes { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .digit.is-active:not(.is-filled)::before { animation: none; }
  .phone:has(.fe-pulse), .digits:has(.fe-pulse) .digits-boxes { animation: none; }
}

/* ------------------------------------------------- sticky form actions --- */
/* On a phone the primary action must not be below a 50-field form's fold. */

.actionbar {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 14px 22px max(14px, env(safe-area-inset-bottom));
  margin: 24px -22px -22px;
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  border-radius: 0 0 var(--r) var(--r);
}
.actionbar .btn { flex: 1 1 auto; }
@media (min-width: 640px) { .actionbar .btn { flex: 0 0 auto; }
                            .actionbar #next { margin-left: auto; } }
@media (max-width: 420px) { .actionbar { margin: 24px -18px -18px; padding-left: 18px; padding-right: 18px; } }
@media (max-width: 1023.98px) {
  body.has-tabbar .actionbar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}

.env-badge {
  position: fixed; right: 14px; bottom: 14px; z-index: 99;
  box-shadow: var(--lift); pointer-events: none;
}

/* ------------------------------------------------------ notification bell - */

.topbell {
  position: relative; flex: 0 0 auto;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 11px; color: rgba(255,255,255,.9);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.topbell:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbell.current { background: rgba(255,255,255,.16); color: #fff; }
.topbell svg { width: 22px; height: 22px; transform-origin: 50% 10%; }
.topbell:hover svg { animation: ring .6s var(--ease); }
@keyframes ring { 0%,100% { transform: rotate(0); } 20% { transform: rotate(14deg); }
                  45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } }
.topbell-badge {
  position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; background: var(--gold);
  color: #0e5420; font: 700 11.5px/19px "Source Sans 3";
  text-align: center; box-shadow: 0 0 0 2px var(--brand-deep);
  font-variant-numeric: tabular-nums;
  animation: pop .45s var(--ease-out) both;
}
.topbell-badge[hidden] { display: none; }

/* ---------------------------------------------------------- notifications - */

.notes-list { display: grid; gap: 9px; }
.notif {
  display: flex; gap: 13px; align-items: flex-start; width: 100%;
  padding: 15px 17px; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); cursor: pointer; text-decoration: none;
  transition: border-color .16s var(--ease), background .16s var(--ease),
              transform .16s var(--ease), box-shadow .16s var(--ease);
}
.notif:hover { border-color: var(--brand-line); box-shadow: var(--lift); transform: translateY(-1px); }
.notif:active { transform: none; box-shadow: none; }
.notif.is-unread { background: var(--brand-wash); border-color: var(--brand-line); }
.notif .ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--line-soft); color: var(--ink-2);
}
.notif.is-unread .ico { background: var(--brand); color: #fff; }
.notif .ico svg { width: 20px; height: 20px; }
.notif h3 { margin: 0 0 2px; font-size: 1rem; }
.notif:not(.is-unread) h3 { font-family: "Source Sans 3", sans-serif;
                            font-weight: 600; color: var(--ink-2); }
.notif p { margin: 0; overflow-wrap: anywhere; }
.notif .dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 8px;
              border-radius: 50%; background: var(--gold);
              box-shadow: 0 0 0 3px var(--gold-tint); }

/* ------------------------------------------------------- verify a permit - */
/* Read at arm's length by an inspector or a customer holding a phone up to a
   wall. The verdict is the whole page: one word, huge, in a colour AND a
   picture with its own mark, so it survives a cracked screen and colour
   blindness alike. */

.verdict {
  border-radius: var(--r-lg); padding: 22px 22px 28px; text-align: center;
  border: 2px solid transparent;
}
.verdict .illo { width: 210px; max-width: 72%; height: auto; display: block;
                 margin: 0 auto 6px; animation: pop .6s var(--ease-out) both .05s; }
.verdict .ico { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%;
                display: grid; place-items: center; }
.verdict .ico svg { width: 40px; height: 40px; stroke-width: 2.25; }
.verdict .word { font: 700 clamp(2.2rem, 1.6rem + 3vw, 3.2rem)/1 Lexend;
                 letter-spacing: -.02em; margin: 0 auto 10px;
                 display: inline-flex; align-items: center; gap: 10px; }
.verdict .word svg { width: .8em; height: .8em; stroke-width: 2.6; }
.verdict p { margin: 0 auto; max-width: 40ch; font-size: 1.05rem; }
.verdict.ok      { background: var(--ok-bg);     border-color: var(--ok-line);     color: var(--ok); }
.verdict.ok .ico { background: var(--brand); color: #fff; }
.verdict.bad     { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.verdict.bad .ico { background: var(--danger-fill); color: #fff; }
.verdict.unknown { background: var(--line-soft); border-color: var(--line); color: var(--ink); }
.verdict.unknown .ico { background: var(--ink-2); color: var(--surface); }
.verdict.offline { background: var(--warn-bg);   border-color: var(--warn-line);   color: var(--warn); }
.verdict.offline .ico { background: var(--gold); color: #3a2a00; }
.verdict.ok { color: var(--ok-strong); } .verdict.bad { color: var(--danger-strong); }
.verdict.offline { color: var(--warn-strong); }

.facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.facts > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px;
               padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--ink-3); font-size: .95rem; }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* A copyable link: the URL itself, then the button. */
.copyrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.copyrow code {
  flex: 1 1 240px; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font: 500 .88rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere; color: var(--ink-2);
}

/* ------------------------------------------------------- dashboard hero - */
/* The resident's own band: a greeting in their language, their name, and
   where their permits stand — in words with numbers, not a wall of tiles. */

.dash-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); color: #fff;
  background: linear-gradient(150deg, var(--hero-1) 0%, var(--hero-2) 60%, var(--hero-3) 100%);
  padding: 28px 28px 26px; margin-bottom: 18px;
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
.dash-hero::before {
  content: ""; position: absolute; z-index: -1; right: -60px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,169,31,.32), rgba(226,169,31,0) 70%);
}
.dash-hero h1 { color: #fff; margin: 0 0 4px; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem); }
.dash-hero .who { color: rgba(255,255,255,.85); margin: 0; font-size: 1rem; }
.dash-hero .hero-art { display: none; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff; font-weight: 600; font-size: .95rem;
  text-decoration: none; border: 1px solid rgba(255,255,255,.16);
  transition: background .16s var(--ease), transform .16s var(--ease);
}
a.hero-chip:hover { background: rgba(255,255,255,.2); color: #fff; transform: translateY(-1px); }
.hero-chip svg { width: 18px; height: 18px; }
.hero-chip b { font: 600 1.05rem/1 Lexend; font-variant-numeric: tabular-nums; }
.hero-chip.is-hot { background: var(--gold); color: #2e2100; border-color: transparent; }
a.hero-chip.is-hot:hover { background: #ebb73a; color: #2e2100; }
.hero-chip .skeleton { width: 120px; height: 16px; border-radius: 8px;
                       background: rgba(255,255,255,.18); animation: none; }
@media (min-width: 820px) {
  .dash-hero { grid-template-columns: 1fr 300px; padding: 32px 0 0 34px; gap: 6px 24px; }
  .dash-hero .hero-text { padding-bottom: 30px; }
  .dash-hero .hero-art { display: block; width: 340px; max-width: none; height: auto;
                         align-self: end; margin: -6px -24px 0 -20px; }
}

/* ------------------------------------------------------- service tiles - */

.services {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.service {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  min-height: 100%; padding: 14px 16px 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  color: inherit; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease);
}
.service:hover { transform: translateY(-3px); box-shadow: var(--lift);
                 border-color: var(--brand-line); color: inherit; }
.service:active { transform: translateY(-1px) scale(.99); box-shadow: none; }
.service img { width: 100%; max-width: 150px; height: auto; aspect-ratio: 120 / 96;
               display: block; margin: 0 auto 4px;
               transition: transform .3s var(--ease-out); }
.service:hover img { transform: translateY(-2px) scale(1.04); }
.service h3 { margin: 0; font-size: 1.02rem; line-height: 1.25; }
.service p { margin: 0; font-size: .88rem; line-height: 1.4; color: var(--ink-3); }
.service .go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center;
               gap: 6px; color: var(--brand-ink); font-weight: 600; font-size: .9rem; }
.service .go svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.service:hover .go svg { transform: translateX(3px); }
.service .tag { position: absolute; top: 10px; right: 10px; }

/* The one thing most people come for: bigger, greener, first. */
.service.is-primary {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px;
  background: var(--brand); border-color: var(--brand); color: #fff;
  padding: 18px 20px;
}
.service.is-primary:hover { border-color: var(--brand-deep); background: var(--brand-deep); color: #fff; }
.service.is-primary img { width: 132px; max-width: 34%; margin: 0; flex: 0 0 auto;
                          background: rgba(255,255,255,.1); border-radius: 16px; padding: 4px; }
.service.is-primary h3 { color: #fff; font-size: 1.25rem; }
.service.is-primary p { color: rgba(255,255,255,.88); font-size: .95rem; }
.service.is-primary .go { color: #fff; background: rgba(255,255,255,.14);
                          padding: 9px 14px; border-radius: 10px; margin-top: 10px;
                          align-self: flex-start; }
@media (min-width: 700px) { .service.is-primary { grid-column: span 2; } }
@media (min-width: 1000px) { .service.is-primary { grid-column: span 2; grid-row: span 1; } }
.service.is-urgent { border-color: var(--warn-line); background: var(--warn-bg); }

/* ------------------------------------------------------ application card - */

.app-card { padding: 18px 20px; }
.app-card .head { display: flex; gap: 14px; align-items: flex-start; }
.app-card .head h3 { margin: 0 0 2px; font-size: 1.08rem; overflow-wrap: anywhere; }
.app-card .foot { display: flex; align-items: center; justify-content: space-between;
                  gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.app-card .cta { display: inline-flex; align-items: center; gap: 6px;
                 color: var(--brand-ink); font-weight: 600; font-size: .95rem; }
.app-card .cta svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.app-card:hover .cta svg { transform: translateX(3px); }
.app-card.needs-you { border-color: var(--warn-line); }
.app-card.needs-you .cta { color: var(--warn); }
@media (max-width: 480px) {
  .app-card .head > .pill { order: 3; }
  .app-card .head { flex-wrap: wrap; }
  .app-card .head .grow { flex: 1 1 calc(100% - 60px); }
}

/* --------------------------------------------------- application header - */

.app-head .title-row { display: flex; gap: 14px; align-items: flex-start; }
.app-head .title-row h1 { margin: 0 0 2px; font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2rem);
                          overflow-wrap: anywhere; }
.app-head .facts-row { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.app-head .fact { padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2);
                  border: 1px solid var(--line-soft); min-width: 0; }
.app-head .fact .k { display: flex; gap: 6px; align-items: center; font-size: .85rem;
                     color: var(--ink-3); }
.app-head .fact .k svg { width: 15px; height: 15px; }
.app-head .fact .v { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 560px) { .app-head .facts-row { grid-template-columns: 1fr; gap: 8px; }
                            .app-head .fact { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } }

/* ------------------------------------------------------------- timeline - */

.timeline { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 18px 44px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: 2px;
  width: 2px; background: var(--line); border-radius: 2px;
}
.timeline li:last-child::before { display: none; }
.timeline .t-dot {
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface);
  border: 2px solid var(--line); color: var(--ink-3);
}
.timeline .t-dot svg { width: 16px; height: 16px; }
.timeline li.is-latest .t-dot { background: var(--brand); border-color: var(--brand); color: #fff;
                                box-shadow: 0 0 0 5px var(--brand-tint); }
.timeline li.is-warn .t-dot { background: var(--gold); border-color: var(--gold); color: #2e2100; }
.timeline li.is-latest.is-warn .t-dot { box-shadow: 0 0 0 5px var(--gold-tint); }
.timeline .t-head { display: flex; justify-content: space-between; gap: 4px 12px;
                    flex-wrap: wrap; align-items: baseline; padding-top: 4px; }
.timeline .t-what { font-weight: 600; }
.timeline .t-why { margin-top: 4px; font-size: .92rem; color: var(--ink-2);
                   background: var(--surface-2); border: 1px solid var(--line-soft);
                   border-radius: var(--r-sm); padding: 8px 12px; }

/* ---------------------------------------------------------- payment bill - */

.bill { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.bill .amount { font: 600 clamp(2rem, 1.5rem + 2.4vw, 2.8rem)/1 Lexend;
                letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bill img { width: 120px; height: auto; }
@media (max-width: 480px) { .bill img { width: 88px; } }

/* -------------------------------------------------------------- 404 / misc - */

.lost { text-align: center; }
.lost .illo { width: 240px; max-width: 80%; height: auto; display: block;
              margin: 0 auto 8px; animation: pop .6s var(--ease-out) both; }

/* Signed out on a phone, the two links are icons with hidden words (see the
   language switch rules under the top bar): the EN | FIL switch needs the
   room the words used to take. */

/* On a phone the status goes under the name, so a long business name keeps
   the width it needs. */
@media (max-width: 560px) {
  .app-head .title-row { flex-wrap: wrap; }
  .app-head .title-row .grow { flex: 1 1 calc(100% - 60px); }
  .app-head .title-row > .pill { margin-left: 58px; }
}

/* --------------------------------------------------- field errors --- */
/* js/form-errors.js. The halo is the danger red over the field's own
 * shape; the summary is a calm card, not an alarm — it says how many and
 * walks the resident through them. */
.fe-invalid { border-color: var(--danger) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent) !important; }
.check.fe-invalid { background: var(--danger-bg); }
/* Focus keeps the field red until it is fixed: green would read as "done". */
.fe-invalid:focus, .fe-invalid:focus-visible,
.fe-invalid:focus-within { outline-color: var(--danger) !important; }
.fe-invalid input:focus-visible, .fe-invalid button:focus-visible { outline-color: var(--danger); }
.doc-slot.fe-invalid { border-radius: var(--r-sm); background: var(--danger-bg); }
.fe-pulse { animation: fe-halo .9s var(--ease) 1, fe-shake .36s cubic-bezier(.36,.07,.19,.97) 1; }
@keyframes fe-halo {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); }
  60%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--danger) 0%, transparent); }
  100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
}
@keyframes fe-shake {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  /* A halo that stays, and no movement at all. */
  .fe-pulse { animation: none !important; transform: none !important; }
}
.fe-msg { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0;
  color: var(--danger); font-size: .9rem; font-weight: 600; line-height: 1.35;
  flex: 1 1 100%; }
.fe-msg svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.check + .fe-msg { margin: -10px 0 18px; }
.fe-banner { position: sticky; z-index: 6; display: flex; gap: 10px; align-items: center;
  margin: 0 0 16px; padding: 10px 10px 10px 14px; border-radius: var(--r-sm);
  background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger);
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--danger) 45%, transparent);
  animation: fe-drop .22s var(--ease); }
.fe-banner-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; background: var(--surface); }
.fe-banner-ico svg { width: 17px; height: 17px; }
.fe-count { flex: 1 1 auto; font-weight: 600; }
.fe-next { background: var(--danger-fill); color: #fff; border: 0; }
.fe-next:hover:not(:disabled) { background: var(--danger-fill-hover); color: #fff; }
.fe-next svg { width: 16px; height: 16px; }
@keyframes fe-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }