/* EPA IPMS 2.0 — one stylesheet, served from our own origin.
   Implements docs/EPA Ghana interface redesign/: deep forest green, gold accent
   (a nod to the flag), warm paper neutrals.

   Type matches the live client portal at client.epa.gov.gh: Manrope for the
   interface, and the system monospace stack for reference numbers, fees and
   dates. The live portal also declares Inter, but its body rule resolves to
   Manrope, so Manrope is the face that actually renders there and the only one
   worth the bytes here. Its monospace is a system stack too — no webfont — so
   nothing is downloaded for it.

   Manrope is self-hosted rather than fetched from Google Fonts. The legacy
   portal asked for its webfonts over the network, its own CSP blocked the
   request, and it silently shipped system faces anyway; serving the woff2 from
   this origin costs no extra connection, cannot be blocked by our own policy,
   and keeps working when fonts.googleapis.com does not. It is a variable font,
   so one file per subset covers 200-800. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  /* Brand */
  --forest:       #0e2818;
  --forest-soft:  #123421;
  --green:        #1a6b3c;
  --green-dark:   #155a32;
  /* The landing template's brighter call-to-action green; it reads on a photograph. */
  --green-bright: #2f9e5f;
  --green-bright-dark: #278a51;
  --green-tint:   #ecf5ef;
  --green-pale:   #f0f6f2;
  --green-line:   #cbe3d4;
  --green-ink:    #1b4d30;

  --gold:         #d9a441;
  --gold-tint:    #fdf6e8;
  --gold-line:    #ecd9ad;
  --gold-ink:     #8f5210;
  --gold-bright:  #e9c87f;

  --red:          #b3261e;
  --red-tint:     #fdebea;
  --red-line:     #f0c4c1;

  --blue:         #155a8a;
  --blue-tint:    #eaf3fb;
  --blue-line:    #c4ddf2;

  /* National flag — used only as the official hairline and service marks. */
  --flag-red:   #ce1126;
  --flag-gold:  #fcd116;
  --flag-green: #006b3f;

  /* Neutrals — warm paper, not blue-grey */
  --ink:        #1b1f1c;
  --muted:      #63685f;
  --faint:      #8d938b;
  --line:       #e3e3dc;
  --line-soft:  #f2f2ec;
  --hair:       #eeeee8;
  --field-line: #cfd2cb;
  --surface:    #ffffff;
  --paper:      #f7f7f3;
  --paper-2:    #fafaf6;
  --sand:       #eceae4;

  /* On the dark sidebar */
  --on-dark:        #e8efe9;
  --on-dark-muted:  #b9ccbf;
  --on-dark-faint:  #9db8a6;

  /* Geometry is tight on purpose. This is a register of legal instruments, and
     large radii and drop shadows make a permit look like a marketing card. The
     only thing that floats is something genuinely above the page — a dialog. */
  --radius:    4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --shadow:    none;
  --shadow-lg: 0 16px 40px rgba(14, 40, 24, .18);

  --wrap:    1180px;
  --sidebar: 236px;

  /* The live portal's own stack. */
  --font: 'Manrope', Inter, system-ui, -apple-system, BlinkMacSystemFont,
          'Segoe UI', Roboto, sans-serif;

  /* Reference numbers, fees, dates and figures are the interface font too —
     one typeface across the page. They get tabular figures so a column of
     amounts still lines up on the decimal point, which is the only thing a
     monospace was buying here. */
  --numeric: var(--font);

  /* A genuine monospace, kept for the few strings someone reads out or types
     character by character: an activation code, a verification code, a
     recovery code, an authenticator secret. There, telling 0 from O and 1 from
     l matters more than matching the rest of the page. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          'Liberation Mono', 'Courier New', monospace;
}

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

/* --- icons ---------------------------------------------------------------
   One size, one stroke, aligned to the cap height of the text beside them
   rather than the line box, which is what stops an icon sitting a pixel low
   next to its label. */

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.15em; height: 1.15em; flex: none;
  vertical-align: -0.19em;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.nav-icon { width: 17px; height: 17px; opacity: .75; }
[aria-current="page"] > .nav-icon { opacity: 1; }
.callout-icon { width: 18px; height: 18px; margin-top: 1px; }
.search-icon { width: 16px; height: 16px; color: var(--faint); }

/* Spacing utilities.
   The Content-Security-Policy sets style-src 'self' with no 'unsafe-inline', so
   a style="" attribute in a template is silently dropped by the browser — it
   looks like it works and does nothing. Every one-off adjustment therefore has
   to be a class. This is the whole set; keep it that way. */
.u-flush      { margin: 0; }
.u-flush-top  { margin-top: 0; }
.u-gap-s      { margin-top: 12px; }
.u-gap        { margin-top: 18px; }
.u-gap-l      { margin-top: 28px; }
.u-gap-below  { margin-bottom: 18px; }
.u-grow       { flex: 1; }
.u-centre     { text-align: center; }
.u-danger     { color: var(--red); font-weight: 700; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-tight { max-width: 900px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--forest); color: #fff; padding: 12px 18px; font-weight: 600;
}
.skip-link:focus { left: 0; }

.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;
}

/* Two rings, so focus is visible on paper, on the dark sidebar and on the gold
   itself: an ink outline for shape and a gold halo for attention. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--gold);
  border-radius: 2px;
}
.app-sidebar :focus-visible, .auth-brand :focus-visible,
.site-footer :focus-visible, .help-card :focus-visible { outline-color: #fff; }

/* --- official marks ------------------------------------------------------ */

/* The national flag hairline sits on every screen, top of page or top of
   sidebar. It is decorative repetition of an official mark, not information. */
.flag-rule {
  height: 4px; flex: none;
  background: linear-gradient(90deg,
    var(--flag-red) 0 33.34%, var(--flag-gold) 33.34% 66.67%, var(--flag-green) 66.67% 100%);
}

.flag-chip {
  display: inline-block; width: 22px; height: 15px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg,
    var(--flag-red) 33.34%, var(--flag-gold) 33.34% 66.67%, var(--flag-green) 66.67%);
}

.service-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border-bottom: 1px solid var(--hair);
  padding: 8px 24px; font-size: 12px; color: var(--muted);
}
.service-bar strong { color: var(--ink); font-weight: 700; }
.service-bar .domain { margin-left: auto; font-family: var(--numeric); font-size: 11px; color: var(--faint); }

/* --- brand -------------------------------------------------------------- */

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--surface); object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.brand-text strong { display: block; font-size: 15px; font-weight: 800; line-height: 1.15; }
.brand-text small {
  display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

/* --- public header and footer ------------------------------------------- */

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 66px; flex-wrap: wrap;
}
.site-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.site-nav a:hover { color: var(--green); text-decoration: underline; }
.site-nav .button, .site-nav .button:hover { color: #fff; text-decoration: none; }
.site-nav .button-secondary, .site-nav .button-secondary:hover { color: var(--ink); }

.site-footer { background: #0c1210; color: #8ba695; padding: 44px 0 32px; margin-top: auto; }
.site-footer a, .site-footer .link-button { color: #8ba695; text-decoration: none; font: inherit; }
.site-footer a:hover, .site-footer .link-button:hover { color: #fff; text-decoration: none; }
.footer-row {
  display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: center;
  padding-bottom: 28px; border-bottom: 1px solid #1c2a21;
}
.footer-row .brand-mark { width: 32px; height: 32px; }
.footer-row .brand-text strong { color: #fff; font-size: 15px; font-weight: 600; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; font-weight: 500; }
.footer-base { padding-top: 20px; font-size: 13px; color: #5f7568; display: flex; gap: 16px; flex-wrap: wrap; }
.footer-base p { margin: 0; }
/* The staff footer carries the same line without the public footer's rule
   above it — there is nothing above it to separate. */
.footer-base-plain { padding-top: 0; }

/* --- page frame --------------------------------------------------------- */

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }

main.wrap { padding-top: 30px; padding-bottom: 56px; }

/* --- app shell (signed in) ---------------------------------------------- */

.app { display: flex; min-height: 100vh; align-items: stretch; }

.app-sidebar {
  width: var(--sidebar); flex: none;
  background: var(--forest); color: var(--on-dark);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.app-sidebar .brand { padding: 16px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.app-sidebar .brand-text strong { color: #fff; font-size: 13.5px; }
.app-sidebar .brand-text small { color: var(--on-dark-faint); font-size: 10px; letter-spacing: .07em; }
.app-sidebar .brand-mark { width: 40px; height: 40px; }

/* The nav sits inside a <details> so that on a phone it can fold into a
   hamburger with no JavaScript involved in the toggle itself. On a wide screen
   the disclosure is structure and nothing else: `display: contents` removes its
   box entirely, so .app-nav stays a direct child of the sidebar column and
   keeps the `flex: 1` that pushes the note and account chip to the bottom.
   The element ships with `open` in the HTML, so if anything at all goes wrong
   the nav is visible rather than unreachable. */
.nav-menu { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nav-toggle { display: none; }

.app-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; flex: 1; overflow-y: auto; }
.app-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px;
  color: var(--on-dark-muted); text-decoration: none; font-size: 13px;
}
.app-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.app-nav a[aria-current="page"] { background: var(--green); color: #fff; font-weight: 600; }
/* Groups: a row with a fold of views beneath it. The fold is a <details> whose
   summary is the caret at the row's end — placed there absolutely, so the
   details itself has no height while closed and the row reads as one line. */
.nav-group { position: relative; }
.nav-group > .nav-link { padding-right: 34px; }
.nav-sub > .nav-caret {
  position: absolute; top: 0; right: 4px; width: 30px; height: 100%; max-height: 40px;
  display: grid; place-items: center; cursor: pointer; list-style: none;
  color: var(--on-dark-faint); border-radius: 6px;
}
.nav-sub > .nav-caret::-webkit-details-marker { display: none; }
.nav-sub > .nav-caret::before {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);                 /* points right: closed */
  transition: transform .12s ease;
}
.nav-sub[open] > .nav-caret::before { transform: rotate(45deg); }   /* points down: open */
.nav-sub > .nav-caret:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-sub > .nav-caret:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; box-shadow: none; }
.nav-children { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px; }
.nav-children a {
  padding: 6px 12px 6px 40px; font-size: 12.5px; color: var(--on-dark-muted);
  border-radius: 6px;
}
.nav-children a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-children a[aria-current="page"] { color: #fff; font-weight: 600; background: rgba(255, 255, 255, .12); }
/* A group whose page is open but whose own view is not the current one still
   shows as the place you are, more quietly than a leaf. */
.app-nav .nav-link[aria-current="true"] { color: #fff; }

.app-nav .count {
  margin-left: auto; border-radius: 999px; padding: 1px 7px;
  font-size: 10px; font-weight: 600;
  background: rgba(255, 255, 255, .14); color: var(--on-dark);
}
.app-nav .count-due  { background: var(--gold); color: #241a05; }
.app-nav .count-owed { background: var(--red);  color: #fff; }

.sidebar-note {
  margin: 0 10px 12px; padding: 12px; border-radius: var(--radius);
  background: rgba(217, 164, 65, .12); border: 1px solid rgba(217, 164, 65, .3);
}
.sidebar-note strong { display: block; font-size: 11.5px; color: var(--gold-bright); }
.sidebar-note p { margin: 3px 0 0; font-size: 11px; color: var(--on-dark-muted); line-height: 1.45; }
.sidebar-note a { display: inline-block; margin-top: 7px; font-size: 11.5px; font-weight: 600; color: var(--gold); text-decoration: none; }
.sidebar-note a:hover { text-decoration: underline; }

.sidebar-account {
  padding: 14px 18px; border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--gold); color: #241a05;
  display: grid; place-items: center; font-weight: 700; font-size: 11px;
}
.sidebar-account .name { font-size: 12px; font-weight: 600; line-height: 1.3; }
.sidebar-account .ref  { font-family: var(--numeric); font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--on-dark-faint); }

.app-main { flex: 1; min-width: 0; background: var(--paper); display: flex; flex-direction: column; }

.app-topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 28px; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.app-topbar .spacer { flex: 1; }
.app-topbar .lang { font-size: 12px; color: var(--muted); }
.app-content { padding: 24px 28px 48px; }

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

/* The scale steps rather than creeps: a page title is plainly a different
   thing from a panel heading, instead of two points larger than one. Tracking
   tightens as size goes up, which is the one thing that stops a large heading
   in a geometric face looking loose. */
h1 { font-size: 25px; font-weight: 700; line-height: 1.18; letter-spacing: -.022em; margin: 0 0 6px; }
h2 { font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.006em; margin: 30px 0 12px; }
h3 { font-size: 13.5px; font-weight: 700; letter-spacing: -.003em; margin: 20px 0 8px; }
p  { margin: 0 0 12px; }

/* A link is underlined, always. Colour alone is not a signal for a reader who
   cannot see the difference, and a rule set thin and offset reads as a link
   without shouting through a paragraph. */
a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
a:hover { color: var(--green-dark); text-decoration-color: currentColor; }

::selection { background: var(--gold-tint); color: var(--ink); }

.button, .brand, .app-nav a, .pills a, .pager a, .listing-sort a,
.site-nav a, .footer-links a, thead th a.sortable, .breadcrumb a,
.help-card .chips a, .tab-link { text-decoration: none; }
.site-nav a:hover, .footer-links a:hover, .breadcrumb a:hover,
thead th a.sortable:hover { text-decoration: underline; }

/* In a list where a whole column is links, underlining every one turns the
   column into a fence. The link is obvious from position; the rule appears on
   hover and focus, where it confirms the target. */
td a, .deadlines a, .doc-card a { text-decoration: none; }
td a:hover, .deadlines a:hover, .doc-card a:hover { text-decoration: underline; }

/* An eyebrow is a label, not a heading: small, letterspaced, and the same
   colour as the body text it introduces rather than a paler grey. */
.eyebrow {
  text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px;
  font-weight: 700; color: var(--muted); margin: 0 0 5px;
}
.lede   { font-size: 14px; color: var(--muted); max-width: 68ch; }
.muted  { color: var(--muted); }
.small  { font-size: 13px; }
.ref    { font-family: var(--numeric); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; }
.today  { font-family: var(--numeric); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); }

/* --- page head ---------------------------------------------------------- */

.page-head, .panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-head h1, .panel-head h1 { margin-bottom: 4px; }
.page-head .actions, .panel-head .actions { margin-top: 0; }

.breadcrumb { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.breadcrumb a { font-weight: 500; }

.meta-row { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.meta-row b { color: var(--ink); font-weight: 600; }
.meta-row .mono { font-family: var(--numeric); font-variant-numeric: tabular-nums; }

/* --- panels and cards --------------------------------------------------- */

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 18px;
}
/* A panel inside a panel does not need a second border to say so. */
.panel .panel { border: 0; border-radius: 0; padding: 0; background: none; }
.panel > :first-child { margin-top: 0; }
.panel > :last-child  { margin-bottom: 0; }
.panel.narrow { max-width: 560px; margin-inline: auto; }
.panel-flush  { padding: 0; overflow: hidden; }

.panel-title {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--hair); margin: 0;
  font-size: 14px; font-weight: 700;
}
.panel-title .more { margin-left: auto; font-size: 12px; font-weight: 600; }

.grid { display: grid; gap: 16px; }
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .split      { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
  .split-wide { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
}
.stack { display: flex; flex-direction: column; gap: 16px; }

/* --- stat tiles --------------------------------------------------------- */

.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 17px;
}
.stat .label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.stat .value {
  font-family: var(--numeric); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 29px; line-height: 1.1;
  letter-spacing: -.02em; margin-top: 4px;
}
.stat .foot  { font-size: 11px; color: var(--muted); margin-top: 4px; }
.stat-good .foot  { color: var(--green);    font-weight: 600; }
.stat-warn .value,
.stat-warn .foot  { color: var(--gold-ink); }
.stat-warn .foot  { font-weight: 600; }
.stat-bad  .value,
.stat-bad  .foot  { color: var(--red); }
.stat-bad  .foot  { font-weight: 600; }

/* --- data rows ---------------------------------------------------------- */

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
caption { text-align: left; }
th, td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
/* A rule under the headings, not a grey band behind them. The band was doing
   the work a single line does better, and it made every table look like a
   spreadsheet pasted into the page. */
thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--muted); white-space: nowrap;
  background: none; padding-top: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: var(--paper-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.is-overdue { background: #fef4f3; }
td.numeric, th.numeric { text-align: right; font-family: var(--numeric); font-variant-numeric: tabular-nums; white-space: nowrap; }
td .sub { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
td .strong { font-weight: 600; }
tfoot th, tfoot td { border-bottom: 0; padding-top: 8px; padding-bottom: 8px; }

/* --- list controls: search, sorting, paging ------------------------------ */

.listing-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.listing-bar .pills { margin: 0; }

.listing-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.listing-search-field {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--field-line);
  border-radius: var(--radius); padding: 0 12px;
  min-width: 260px; flex: 1;
}
.listing-search-field:focus-within {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(26, 107, 60, .12);
}
/* Include the type selector so this reset outranks the generic form-control
   rule below; the wrapper owns the search field's single visible border. */
.listing-search-field input[type=search] {
  border: 0; padding: 9px 0; background: none; font-size: 13.5px;
  width: 100%; min-width: 0;
}
.listing-search-field input:focus { outline: none; box-shadow: none; }
/* Safari draws its own clear button on a search input; it collides with ours. */
.listing-search-field input::-webkit-search-decoration,
.listing-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* A sortable heading is a link filling the cell, so the whole header is the
   target rather than the few pixels of the label. */
thead th a.sortable {
  display: inline-flex; align-items: center; gap: 5px;
  color: inherit; text-decoration: none; font: inherit;
}
thead th a.sortable:hover { color: var(--ink); text-decoration: underline; }
thead th a.sortable.is-sorted { color: var(--ink); }
thead th .sort-mark { font-family: var(--mono); font-size: 10px; }
th.numeric a.sortable { justify-content: flex-end; }

/* Sorting for a card list, which has no column headings to click. */
.listing-sort { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12.5px; }
.listing-sort-label { color: var(--muted); margin-right: 2px; }
.listing-sort a {
  padding: 4px 9px; border-radius: 999px; font-weight: 600;
  color: var(--muted); text-decoration: none; border: 1px solid transparent;
}
.listing-sort a:hover { color: var(--ink); border-color: var(--line); text-decoration: none; }
.listing-sort a.is-current { background: var(--green-tint); border-color: var(--green-line); color: var(--green); }
.listing-sort .sort-mark { font-family: var(--mono); font-size: 10px; margin-left: 3px; }

.listing-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--hair); background: var(--paper-2);
}
.listing-count { margin: 0; font-size: 12.5px; color: var(--muted); }
.listing-per-page { margin: 0 0 0 auto; font-size: 12px; color: var(--muted); }
.listing-per-page a, .listing-per-page .is-current { margin: 0 2px; }
.listing-per-page .is-current { font-weight: 700; color: var(--ink); }

.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.pager a, .pager span {
  display: inline-block; min-width: 30px; text-align: center;
  padding: 5px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
  border: 1px solid transparent; text-decoration: none;
}
.pager a { color: var(--green); }
.pager a:hover { background: var(--surface); border-color: var(--line); text-decoration: none; }
.pager .is-current { background: var(--ink); color: #fff; }
.pager .is-disabled { color: var(--faint); }
.pager .pager-gap { min-width: 0; padding: 5px 2px; color: var(--faint); }

/* When the pager sits under a table it belongs to the same card, so the table
   loses its own bottom rule and the foot supplies it. */
.panel-flush .listing-foot { margin-top: -1px; }

/* --- badges ------------------------------------------------------------- */

/* Squared off. A fully rounded pill reads as an app notification; a permit
   status is a record, and a tag with a small radius carries that better. */
.badge {
  display: inline-block; padding: 3px 8px; border-radius: 3px;
  font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
  letter-spacing: .01em;
}
.badge-neutral { background: var(--paper);      color: var(--muted);    border-color: var(--line); }
.badge-info    { background: var(--blue-tint);  color: var(--blue);     border-color: var(--blue-line); }
.badge-good    { background: var(--green-tint); color: var(--green);    border-color: var(--green-line); }
.badge-warn    { background: var(--gold-tint);  color: var(--gold-ink); border-color: var(--gold-line); }
.badge-bad     { background: var(--red-tint);   color: var(--red);      border-color: var(--red-line); }

/* --- filter pills ------------------------------------------------------- */

.pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; padding: 0; }
.pills a {
  border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface); text-decoration: none;
}
.pills a:hover { border-color: var(--field-line); color: var(--ink); text-decoration: none; }
.pills a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill-count {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px;
  background: var(--paper); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums;
}
.pills a[aria-current="page"] .pill-count { background: rgba(255, 255, 255, .18); color: #fff; }

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

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
label { display: block; font-weight: 700; font-size: 12.5px; margin-bottom: 6px; }
.hint { font-size: 12px; color: var(--muted); margin: -2px 0 6px; }

input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: 10px 13px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--field-line); border-radius: var(--radius);
  box-sizing: border-box;
}
input[readonly] {
  background: var(--paper);
  color: var(--muted);
  border-color: var(--line);
  cursor: default;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(26, 107, 60, .12);
}
input[type=checkbox] { width: auto; margin-right: 8px; accent-color: var(--green); }
textarea { min-height: 96px; resize: vertical; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(179, 38, 30, .1);
}
/* A submit button sitting in a row of inputs lines up with their boxes, not
   with their labels. */
.field-action { margin-bottom: 0; align-self: end; }

/* A checkbox or radio label reads as a sentence, not as a field heading. */
.label-choice { font-weight: 400; }

/* A panel that recedes — used where a block is reference material rather than
   the subject of the page. */
.panel-recessed { background: var(--paper); }

/* Enrolment secret and recovery codes: long, unbreakable strings that must
   wrap rather than push the page sideways. */
.code-block {
  font-family: var(--mono);
  font-size: 18px; letter-spacing: .08em; margin: 0; word-break: break-all;
}
.code-wrap { font-family: var(--mono); word-break: break-all; margin-top: 8px; }
.code-list { font-family: var(--mono); columns: 2; margin: 0; padding-left: 20px; line-height: 2; }
@media (max-width: 620px) { .code-list { columns: 1; } }

/* Narrow inputs inside a table row of fee lines. */
.input-qty    { max-width: 80px; }
.input-amount { max-width: 120px; }

.field-inline label { font-weight: 400; font-size: 13.5px; display: flex; gap: 4px; align-items: flex-start; }

/* A fieldset used purely to group radios keeps its legend but none of the
   browser's default chrome. */
.fieldset-plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset-plain legend { font-size: 12.5px; font-weight: 700; padding: 0 0 8px; }
.fieldset-plain-legend { padding: 0; }

/* Validation summary at the top of a form. */
.error-list { margin: 0; padding-left: 20px; }

.search-box {
  display: flex; align-items: center; gap: 8px;
  flex: 1; max-width: 380px; min-width: 180px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 12px; color: var(--muted); font-size: 12.5px;
}

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

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--green); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600;
  letter-spacing: .005em; text-decoration: none; cursor: pointer; text-align: center;
}
.button:hover { background: var(--green-dark); color: #fff; text-decoration: none; }
.button:active { transform: translateY(1px); }
.button-secondary { background: var(--surface); color: var(--ink); border-color: var(--field-line); }
.button-secondary:hover { background: var(--paper); color: var(--ink); }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: #000; color: #fff; }
.button-small { padding: 8px 15px; font-size: 12.5px; }
.button-block { display: flex; width: 100%; }
.link-button {
  background: none; border: 0; color: inherit; font: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline;
}
/* --- waiting state -------------------------------------------------------
   Set by assets/js/app.js when a button submits or navigates. The styles are
   here rather than in the script so that a button which never reaches the
   script is simply a button, and so the spinner is themeable with everything
   else. */

.button.is-busy {
  pointer-events: none;   /* the second click is the one that duplicates a payment */
  opacity: .9;
}
.button.is-busy::before {
  content: "";
  width: 14px; height: 14px; flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: epaSpin .6s linear infinite;
}
.button-small.is-busy::before { width: 12px; height: 12px; }

/* A text-styled control has nowhere to put a ring, so it just recedes. */
.link-button.is-busy { opacity: .55; pointer-events: none; }

@keyframes epaSpin { to { transform: rotate(360deg); } }

/* Rotation is the kind of motion that causes trouble, so under a reduced-motion
   preference the ring stops turning and breathes instead — still clearly
   "working", without anything spinning. */
@media (prefers-reduced-motion: reduce) {
  .button.is-busy::before {
    border-top-color: currentColor;
    animation: epaPulse 1.6s ease-in-out infinite;
  }
  @keyframes epaPulse { 50% { opacity: .3; } }
}

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.inline-form { margin: 0; display: inline-flex; }

/* --- flashes, callouts -------------------------------------------------- */

.flash {
  margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-lg);
  font-size: 13.5px; border: 1px solid;
}
.flash > :last-child { margin-bottom: 0; }
.flash-success { background: var(--green-tint); border-color: var(--green-line); color: var(--green-ink); }
.flash-error   { background: var(--red-tint);   border-color: var(--red-line);   color: var(--red); }
.flash-info    { background: var(--blue-tint);  border-color: var(--blue-line);  color: var(--blue); }
.flash-warn    { background: var(--gold-tint);  border-color: var(--gold-line);  color: var(--gold-ink); }
.flash-stack { padding-top: 18px; }

/* --- in-app toast notifications ---------------------------------------- */

.toast-region {
  position: fixed; z-index: 90; top: 18px; right: 20px;
  width: min(390px, calc(100vw - 32px));
  display: grid; gap: 10px; pointer-events: none;
}
.toast {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px; align-items: start; padding: 14px 12px 14px 14px;
  border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius-xl); background: var(--surface); color: var(--ink);
  box-shadow: 0 14px 38px rgba(14, 40, 24, .17);
  pointer-events: auto;
}
.toast-success { border-left-color: var(--green); }
.toast-error { border-left-color: var(--red); }
.toast-warn { border-left-color: var(--gold); }
.toast-info { border-left-color: var(--blue); }
.toast-mark {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; font-size: 15px; font-weight: 800;
}
.toast-success .toast-mark { color: var(--green-ink); background: var(--green-tint); }
.toast-error .toast-mark { color: var(--red); background: var(--red-tint); }
.toast-warn .toast-mark { color: var(--gold-ink); background: var(--gold-tint); }
.toast-info .toast-mark { color: var(--blue); background: var(--blue-tint); }
.toast-copy { min-width: 0; display: grid; gap: 3px; padding-top: 1px; }
.toast-copy strong { font-size: 13.5px; line-height: 1.35; }
.toast-copy > span { color: var(--muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.toast-dismiss {
  display: none; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--faint);
  font: 500 22px/1 var(--font); cursor: pointer;
}
.toast-enhanced .toast-dismiss { display: grid; }
.toast-dismiss:hover { background: var(--paper); color: var(--ink); }
.toast-dismiss:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.toast-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: .2; transform-origin: left; }
.toast[data-toast-persistent] .toast-timer { display: none; }
.toast.is-leaving { opacity: 0; transform: translateX(16px); }

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toastIn .22s ease-out both; transition: opacity .18s ease, transform .18s ease; }
  .toast.is-timing .toast-timer { animation: toastTimer var(--toast-duration, 6000ms) linear forwards; }
  .toast.is-paused .toast-timer { animation-play-state: paused; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
  @keyframes toastTimer { to { transform: scaleX(0); } }
}
@media (max-width: 620px) {
  .toast-region { top: 10px; right: 10px; width: calc(100vw - 20px); }
}

/* An informational aside is marked with a rule down its edge rather than a
   filled panel. Filling every one of these made the page read as a stack of
   warnings, which then makes the actual warnings weigh nothing. */
.callout {
  display: flex; gap: 12px; align-items: flex-start;
  background: none; border: 0; border-left: 3px solid var(--green-line);
  border-radius: 0; padding: 2px 0 2px 16px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink);
}
.callout > :last-child { margin-bottom: 0; }
.callout .callout-icon { color: var(--green); }

/* A warning still gets a fill. That contrast is the point. */
.callout-warn {
  background: var(--gold-tint); border: 1px solid var(--gold-line);
  border-radius: var(--radius); padding: 13px 15px; color: var(--gold-ink);
}
.callout-warn .callout-icon { color: var(--gold-ink); }

.error-text { color: var(--red); font-size: 12.5px; font-weight: 600; margin: 6px 0 0; }

/* An action the applicant must take, at the top of the page it belongs to. */
.action-banner {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--gold-tint); border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 18px;
}
.action-banner .mark {
  width: 34px; height: 34px; flex: none; border-radius: var(--radius);
  background: var(--gold); color: #241a05; display: grid; place-items: center;
  font-weight: 800;
}
.action-banner .body { flex: 1; min-width: 220px; }
.action-banner.is-overdue { background: var(--red-tint); border-color: var(--red-line); }
.action-banner.is-overdue .mark { background: var(--red); color: #fff; }
.action-banner strong { display: block; font-size: 13.5px; }
.action-banner p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }
.action-banner b { color: var(--ink); }

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

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 14px; }
.timeline .rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.timeline .dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--surface); border: 1.5px solid var(--field-line); color: var(--muted);
}
.timeline .line { width: 2px; flex: 1; min-height: 26px; background: var(--line); }
.timeline .body { padding-bottom: 20px; flex: 1; min-width: 0; }
.timeline li:last-child .body { padding-bottom: 0; }
.timeline .body strong { display: block; font-size: 13.5px; }
.timeline .when { font-size: 12px; color: var(--muted); margin-top: 2px; }
.timeline .note { font-size: 12.5px; margin-top: 4px; }

.timeline .is-done .dot  { background: var(--green); border-color: var(--green); color: #fff; }
.timeline .is-done .line { background: var(--green); }
.timeline .is-now  .dot  { background: var(--gold-tint); border-color: var(--gold); color: var(--gold-ink); }
/* Newest first: everything below the current stage is already done, so its
   connector is the completed colour. */
.timeline .is-now  .line { background: var(--green); }
.timeline .is-todo .body { color: var(--muted); }

/* Wizard summary heading, beside the step rail. */
.wizard-type { font-size: 15px; font-weight: 800; line-height: 1.3; margin-top: 2px; }

/* Wizard step list, same rail, lighter body. */
.steps { list-style: none; margin: 22px 0 0; padding: 0; }
.steps li { display: flex; gap: 12px; }
.steps .rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.steps .dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  background: var(--surface); border: 1.5px solid var(--field-line); color: var(--muted);
}
.steps .line { width: 2px; flex: 1; min-height: 24px; background: var(--line); }
.steps .body { padding-bottom: 18px; }
.steps li:last-child .body { padding-bottom: 0; }
.steps .body strong { display: block; font-size: 13px; }
.steps .body span   { font-size: 11.5px; color: var(--muted); }
.steps .is-done .dot  { background: var(--green); border-color: var(--green); color: #fff; }
.steps .is-done .line { background: var(--green); }
.steps .is-now  .dot  { background: var(--ink); border-color: var(--ink); color: #fff; }
.steps .is-todo .body strong { color: var(--muted); }

/* --- guided application intake ----------------------------------------- */

.application-wizard-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
}
.application-wizard-head h1 { margin-bottom: 7px; }
.application-wizard-head .lede { margin-bottom: 0; }

.wizard-progress {
  list-style: none; display: flex; flex: none; gap: 8px; margin: 0; padding: 0;
  font-size: 11.5px; color: var(--muted);
}
.wizard-progress li { display: flex; align-items: center; gap: 7px; padding: 8px 10px; }
.wizard-progress li + li::before { content: "\2192"; margin-right: 1px; color: var(--field-line); }
.wizard-progress span {
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--field-line); border-radius: 50%; font-weight: 700;
}
.wizard-progress .is-current { color: var(--ink); font-weight: 700; }
.wizard-progress .is-current span { background: var(--green); border-color: var(--green); color: #fff; }

.application-family-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 10px 0 22px;
}
.application-family-card {
  position: relative; min-width: 0; display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px; align-items: start; gap: 12px;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.application-family-card:hover {
  border-color: var(--green-line); box-shadow: 0 8px 22px rgba(7, 31, 19, .08);
  color: var(--ink); text-decoration: none; transform: translateY(-1px);
}
.application-family-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.application-family-card.is-selected { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.application-family-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; background: var(--green-tint); color: var(--green);
  font-size: 15px; font-weight: 800;
}
.application-family-card.is-selected .application-family-mark { background: var(--green); color: #fff; }
.application-family-card strong, .application-family-card span span, .application-family-card small { display: block; }
.application-family-card strong { font-size: 14px; margin: 1px 0 3px; }
.application-family-card span span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.application-family-card small { margin-top: 8px; color: var(--green); font-size: 10.5px; font-weight: 700; }
.application-family-check { align-self: center; justify-self: end; color: var(--green); font-weight: 800; }

.application-route-form { max-width: 820px; }
.application-route-form .panel { padding: 24px 26px; }
.application-route-form .panel > h2 { margin-bottom: 20px; }
.permit-route-help, .route-preview {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px; margin-top: 11px; font-size: 11.5px; color: var(--muted);
}
.permit-route-help span, .route-preview span { line-height: 1.45; }
.permit-route-help strong { display: block; color: var(--ink); font-size: 11.5px; }
.route-preview {
  padding: 14px 16px; border-radius: var(--radius); background: var(--paper);
  border-left: 3px solid var(--green-line);
}
.route-preview > strong { grid-column: 1 / -1; font-size: 12.5px; }
.route-preview span::before { content: "\2713"; margin-right: 7px; color: var(--green); font-weight: 800; }
.application-compliance {
  margin-top: 20px; padding: 14px 16px; border: 1px solid var(--gold-line);
  border-radius: var(--radius); background: var(--gold-tint);
}
.application-compliance label { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.application-compliance input { margin-top: 3px; flex: none; }
.application-compliance strong, .application-compliance small { display: block; }
.application-compliance strong { color: var(--gold-ink); }
.application-compliance small { margin-top: 2px; font-weight: 400; line-height: 1.45; color: var(--muted); }
.application-wizard-actions { display: flex; align-items: center; gap: 10px; margin-top: -2px; }
.application-help-callout { max-width: 820px; margin-top: 24px; }

.application-document-checklist {
  margin-bottom: 18px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--green-tint); border-left: 3px solid var(--green);
}
.application-document-checklist p { margin: 0 0 7px; font-size: 12.5px; }
.application-document-checklist ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 22px; margin: 0; padding: 0; list-style: none;
  font-size: 12px; color: var(--muted);
}
.application-document-checklist li::before { content: "\25a1"; margin-right: 8px; color: var(--green); }

.application-start-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin: -4px 0 20px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line);
}
.application-start-strip a {
  min-width: 0; display: block; padding: 12px 14px; background: var(--surface);
  color: var(--ink); text-decoration: none;
}
.application-start-strip a:hover { background: var(--green-tint); color: var(--green); text-decoration: none; }
.application-start-strip strong, .application-start-strip span { display: block; }
.application-start-strip strong { font-size: 12.5px; }
.application-start-strip span { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }

/* An officer's message inside a timeline entry. */
.officer-note {
  margin-top: 10px; background: var(--gold-tint); border: 1px solid var(--gold-line);
  border-radius: 9px; padding: 12px 14px;
}
.officer-note .who { display: flex; gap: 9px; align-items: center; font-size: 12px; }
.officer-note .who .avatar { background: var(--forest); color: #fff; width: 26px; height: 26px; font-size: 10px; }
.officer-note .who b { font-weight: 700; }
.officer-note p { font-size: 12.5px; line-height: 1.55; margin: 8px 0 0; }

/* --- assignment plan ----------------------------------------------------
   The stages of a plan, in order, with the status of each in a column of its
   own. Before, the badge trailed the stage name inline and every row ended at
   a different place; a column is what lets the eye run down and read five
   statuses at once. */

.plan-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.plan-step { display: flex; gap: 12px; align-items: flex-start; }
.plan-rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 14px; align-self: stretch; }
.plan-dot {
  width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none;
  background: var(--surface); border: 2px solid var(--field-line);
}
.plan-rail::after { content: ""; flex: 1; width: 2px; background: var(--line); margin-top: 3px; }
.plan-step:last-child .plan-rail::after { display: none; }
.plan-step.is-completed .plan-dot   { background: var(--green); border-color: var(--green); }
.plan-step.is-completed .plan-rail::after { background: var(--green); }
.plan-step.is-in_progress .plan-dot { background: var(--blue); border-color: var(--blue); }
.plan-step.is-rejected .plan-dot    { background: var(--red); border-color: var(--red); }
.plan-step.is-reverted .plan-dot, .plan-step.is-recalled .plan-dot { border-color: var(--gold); }

.plan-body { flex: 1; min-width: 0; padding-bottom: 12px; }
.plan-step:last-child .plan-body { padding-bottom: 0; }
.plan-line { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.plan-line strong { font-size: 13.5px; }
.plan-status { margin-left: auto; flex: none; }
.plan-body .when { font-size: 12px; color: var(--muted); margin-top: 2px; }
.plan-body .small { margin-top: 3px; }

/* --- the queue as a mail client ------------------------------------------
   Two panes under the top bar, each scrolling on its own. The list column is
   sized by the reader: the divider is draggable when the script runs, and
   without it the column still resizes natively — `resize: horizontal` is the
   browser's own grip, no script required. */

/* The split takes whatever height is left under the top bar. Measured by flex
   rather than subtracted as a number, so the bar can change height without
   the page growing a scrollbar. */
.queue-split .app-main { height: 100vh; display: flex; flex-direction: column; }
/* Written with the surface class as well, so it outranks the staff surface's
   own content padding whatever order the two blocks sit in. */
.surface-ipms.queue-split .app-content,
.queue-split .app-content { padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.queue-split .app-content > .flash { margin: 12px 16px 0; flex: none; }

.mail {
  display: flex; align-items: stretch;
  flex: 1; min-height: 0;
}
.mail-list {
  width: 380px; min-width: 260px; max-width: 60vw; flex: none;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line); background: var(--surface);
  overflow: auto; resize: horizontal;
}
.mail-list-head {
  position: sticky; top: 0; z-index: 2;
  padding: 16px 14px 8px; background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
.mail-list-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.mail-list-title h1 { font-size: 20px; margin: 0; }
.mail-list-head .pills { flex-wrap: wrap; margin-bottom: 4px; }
.mail-list-head .pills a { padding: 6px 8px; font-size: 12.5px; }
.mail-list-head .listing-search { margin: 0; padding: 4px 0 2px; }
.mail-list-head .listing-sort { font-size: 12px; padding-top: 2px; }
.mail-list-head .listing-sort a { padding: 3px 7px; }

.mail-rows { list-style: none; margin: 0; padding: 0; }
.mail-row {
  display: block; padding: 11px 14px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-soft); border-left: 3px solid transparent;
}
.mail-row:hover { background: var(--paper-2); text-decoration: none; color: var(--ink); }
.mail-row.is-open { background: rgba(26, 107, 60, .07); border-left-color: var(--green); }
.mail-row-top { display: flex; align-items: baseline; gap: 8px; }
.mail-row-top .ref { font-size: 12.5px; font-weight: 600; }
.mail-row-when { margin-left: auto; font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.mail-row-name { display: block; font-size: 13.5px; font-weight: 500; margin-top: 2px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-type { display: block; font-size: 12px; color: var(--muted); margin-top: 1px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mail-row-owed { font-size: 11.5px; color: var(--gold-ink); font-weight: 500; }
.mail-list .listing-foot { border-top: 1px solid var(--line-soft); margin-top: auto; }
.mail-list .listing-per-page { display: none; }

.mail-divider {
  width: 7px; flex: none; cursor: col-resize; margin: 0 -3px; z-index: 3;
  background: transparent; position: relative;
}
.mail-divider::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px;
  background: transparent; transition: background-color .12s ease;
}
.mail-divider:hover::after, .mail-divider.is-dragging::after, .mail-divider:focus-visible::after {
  background: var(--green);
}
.mail-divider:focus-visible { outline: none; box-shadow: none; }
.mail.is-resizing { user-select: none; cursor: col-resize; }
/* With the script driving the divider, the native grip would fight it. */
.mail.js-resize .mail-list { resize: none; }

.mail-pane { flex: 1; min-width: 0; overflow: auto; padding: 28px 36px 64px; background: var(--paper); }
.mail-pane > .application-tabs, .mail-pane > .page-head, .mail-pane > .panel-head { max-width: none; }
.mail-back { display: none; }

.mail-empty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); gap: 6px; padding: 40px;
}
.mail-empty .icon { width: 34px; height: 34px; color: var(--faint); margin-bottom: 6px; }
.mail-empty strong { font-size: 15px; color: var(--ink); }
.mail-empty p { margin: 0; max-width: 34ch; font-size: 13px; }

/* On a phone there is one column: the list, or the open item with a way back —
   which is what a mail client does too. */
@media (max-width: 1000px) {
  .mail { display: block; height: auto; }
  .mail-list { width: auto; max-width: none; border-right: 0; resize: none; overflow: visible; }
  .mail-list-head { position: static; }
  .mail-divider { display: none; }
  .mail-pane { padding: 16px 16px 48px; }
  .queue-split:not(.has-open) .mail-pane { display: none; }
  .queue-split.has-open .mail-list { display: none; }
  .queue-split.has-open .mail-back {
    display: inline-block; margin-bottom: 12px; font-size: 13.5px; font-weight: 600;
  }
}

/* --- row menus ------------------------------------------------------------
   A right-click on a row in the queue, registry or reconciliation opens a menu
   of things to do with that item. The same menu opens from the ⋯ button at the
   end of the row, which is how it is reached on a touchscreen, by keyboard,
   and by anyone who does not know to right-click. The menu is built by the
   script from data the server put on the row; without the script the row is
   just a row, and every action in the menu is also somewhere on a page. */

.row-more {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer;
  display: inline-grid; place-items: center; opacity: 0;
}
.row-more .icon { width: 16px; height: 16px; }
.row-more:hover, .row-more:focus-visible, .has-menu .row-more { opacity: 1; background: rgba(0, 0, 0, .06); color: var(--ink); }
tr:hover .row-more, .mail-item:hover .row-more, tr:focus-within .row-more, .mail-item:focus-within .row-more { opacity: 1; }
@media (pointer: coarse) { .row-more { opacity: 1; } }
td.row-actions, th.row-actions { width: 34px; padding-left: 4px; padding-right: 8px; text-align: right; }

.mail-item { position: relative; }
.mail-item .row-more { position: absolute; top: 8px; right: 10px; z-index: 1; }
.mail-item.has-menu .mail-row, tr.has-menu { background: var(--paper-2); }

.ctx {
  position: fixed; z-index: 60; min-width: 220px; max-width: 320px;
  padding: 4px; margin: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow-lg);
  font-size: 13.5px; list-style: none;
}
.ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 10px; border: 0; border-radius: 5px;
  background: none; color: var(--ink); font: inherit; text-align: left;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ctx-item:hover, .ctx-item:focus { background: rgba(0, 0, 0, .06); color: var(--ink); text-decoration: none; outline: none; }
.ctx-item:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.ctx-item .ctx-hint { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.ctx-sep { height: 1px; margin: 4px 6px; background: var(--line-soft); }

.ctx-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 61; padding: 8px 14px; border-radius: 6px;
  background: var(--ink); color: #fff; font-size: 13px;
  box-shadow: var(--shadow-lg); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ctx { animation: ctxIn .1s ease-out; }
  @keyframes ctxIn { from { opacity: 0; transform: translateY(-2px); } }
}

/* --- staff home ---------------------------------------------------------- */

.home-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Staff home — hero band with the person's own numbers */
.home-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 20px 24px; margin: 0 0 14px;
  background:
    radial-gradient(130% 150% at 100% 0%, var(--green-tint) 0%, transparent 58%),
    var(--surface);
  border-color: var(--green-line);
}
.home-hero-copy h1 { margin: 3px 0 4px; }
.home-hero-copy .eyebrow { color: var(--green); }
.home-hero-stats { display: flex; gap: 0; flex: 0 0 auto; }
.home-hero-stat {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink);
  padding: 4px 20px; min-width: 92px;
}
.home-hero-stat + .home-hero-stat { border-left: 1px solid var(--green-line); }
.home-hero-stat .v { font-family: var(--numeric); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; line-height: 1; }
.home-hero-stat .l { font-size: 11.5px; color: var(--muted); }
.home-hero-stat:hover .l { color: var(--ink); }
.home-hero-stat.is-muted .v { color: var(--muted); }
.home-hero-stat.is-warn  .v { color: var(--gold-ink); }
.home-hero-stat.is-bad   .v { color: var(--red); }

@media (max-width: 560px) {
  .home-hero { padding: 16px 18px; }
  .home-hero-stats { width: 100%; }
  .home-hero-stat { flex: 1; padding: 4px 12px; min-width: 0; }
  .home-hero-stat:first-child { padding-left: 0; }
}
.stat-link { display: block; color: inherit; text-decoration: none; }
.stat-link:hover { border-color: var(--field-line); text-decoration: none; color: inherit; }
.stat-link .foot { color: var(--muted); }
.stat-link.stat-bad .foot, .stat-link.stat-bad .value { color: var(--red); }
.stat-link.stat-warn .foot { color: var(--gold-ink); }
.stat-link.stat-good .foot { color: var(--green); }

.home-deadlines { padding: 6px 18px 10px; }
.home-deadlines .date.is-late { background: var(--red-tint); }
.home-deadlines .date.is-late .d { color: var(--red); }
.home-deadlines .what b { display: flex; align-items: center; gap: 8px; }
.home-queue dd { text-align: right; font-variant-numeric: tabular-nums; }
.home-queue { grid-template-columns: 1fr max-content; }
.home-recent { padding: 4px 18px 8px; }
.home-recent .history-time { white-space: nowrap; }

/* --- activity history ---------------------------------------------------
   A log, not a stepper: there is no "current" entry in a history, so nothing
   is ringed as if it were still to happen. Days are headings; within a day,
   each act is one line — verb, actor, time — with its detail beneath. */

.history-day {
  margin: 20px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.history > .history-day:first-child { margin-top: 4px; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-entry {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.history-list > .history-entry:last-child { border-bottom: 0; }
.history-mark {
  width: 26px; height: 26px; flex: none; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--paper); color: var(--muted);
}
.history-mark .icon { width: 14px; height: 14px; }
.tone-good    .history-mark { background: var(--green-tint); color: var(--green); }
.tone-info    .history-mark { background: var(--blue-tint);  color: var(--blue); }
.tone-warn    .history-mark { background: var(--gold-tint);  color: var(--gold-ink); }
.tone-bad     .history-mark { background: var(--red-tint);   color: var(--red); }
.history-body { flex: 1; min-width: 0; }
.history-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; }
.history-actor { color: var(--muted); }
.history-time  { margin-left: auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.history-summary { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.history-note {
  margin: 6px 0 0; padding: 6px 10px; border-left: 2px solid var(--line);
  font-size: 12.5px; color: var(--ink); background: var(--paper-2); border-radius: 0 4px 4px 0;
}
.surface-ipms .history-line { font-size: 13.5px; }

/* --- definition lists --------------------------------------------------- */

.detail-list { display: grid; gap: 0 24px; margin: 0; }
@media (min-width: 620px) { .detail-list { grid-template-columns: max-content minmax(0, 1fr); } }
.detail-list dt { font-size: 12px; color: var(--muted); padding: 7px 0 0; }
.detail-list dd { margin: 0; padding: 7px 0; font-size: 13.5px; }
.detail-list dd.ref { font-size: 12.5px; }

/* --- document / permit cards -------------------------------------------- */

.doc-card {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 4px solid var(--green); border-radius: var(--radius-xl);
  padding: 20px 22px;
}
.doc-card.is-expiring { border-top-color: var(--gold); }
.doc-card .num { font-family: var(--numeric); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.doc-card .title { font-size: 15.5px; font-weight: 800; margin-top: 3px; }
.doc-card .for { font-size: 12px; color: var(--muted); margin-top: 2px; }
.doc-card .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* --- choice cards (account type) ---------------------------------------- */

.choice-grid { display: grid; gap: 12px; }
@media (min-width: 760px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.choice {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 20px;
}
.choice:hover { border-color: var(--field-line); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26, 107, 60, .1); }
.choice:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.choice-body { flex: 1; }
.choice-title { display: block; font-size: 14.5px; font-weight: 800; }
.choice-desc  { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.choice-tick {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--field-line); background: var(--surface);
  display: grid; place-items: center; font-size: 10px; color: transparent;
}
.choice:has(input:checked) .choice-tick { background: var(--green); border-color: var(--green); color: #fff; }

/* --- registration guide -------------------------------------------------- */

.guide-needs-label {
  margin: 12px 0 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.guide-needs { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.65; }
.guide-journey li { background: var(--paper); }

/* The name every issued document will carry, shown back before it is fixed. */
.issued-to {
  font-size: 19px; font-weight: 800; line-height: 1.25; margin: 0 0 6px;
  padding: 12px 14px; border-left: 4px solid var(--green);
  background: var(--green-pale); border-radius: 0 var(--radius) var(--radius) 0;
}

.panel-review-head { display: flex; align-items: baseline; gap: 12px; }
.panel-review-head .more { margin-left: auto; font-size: 12px; font-weight: 600; }

/* Development-only activation code — never rendered on a real deployment. */
.dev-code { font-family: var(--mono); font-size: 16px; letter-spacing: .22em; font-weight: 600; }

/* A code someone types in from an email or reads off a phone. Monospace here is
   not decoration: it is what separates 0 from O and 1 from l. The input
   selector is needed because `input { font: inherit }` above outranks a bare
   class and would quietly hand the field back to the interface font. */
.code-entry,
input.code-entry { font-family: var(--mono); letter-spacing: .12em; }

/* --- payment method choices --------------------------------------------- */

.pay-options { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.pay-option {
  display: flex; align-items: center; gap: 11px;
  border: 1.5px solid var(--line); border-radius: 9px; padding: 11px 13px; cursor: pointer;
}
.pay-option:hover { border-color: var(--field-line); }
.pay-option input { position: absolute; opacity: 0; pointer-events: none; }
.pay-option:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26, 107, 60, .1); }
.pay-option:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.pay-option .logo {
  width: 30px; height: 30px; flex: none; border-radius: 7px;
  display: grid; place-items: center; font-size: 8.5px; font-weight: 800;
  background: var(--paper); border: 1px solid var(--line);
}
.pay-option .logo-momo { background: #ffcc00; border-color: #ffcc00; color: #241a05; }
.pay-option .logo-card { background: var(--forest); border-color: var(--forest); color: #fff; }
.pay-option .logo-bank { background: var(--blue-tint); border-color: var(--blue-line); color: var(--blue); }
.pay-option .name { display: block; font-size: 13px; font-weight: 700; }
.pay-option .desc { display: block; font-size: 11px; color: var(--muted); }

.amount-due {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 14px 0; padding: 14px 16px; background: var(--paper); border-radius: 9px;
}
.amount-due .label { font-size: 12.5px; color: var(--muted); }
.amount-due .value { font-family: var(--numeric); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 22px; }

/* --- fee summary -------------------------------------------------------- */

.fee-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 5px 0; }
.fee-line span:first-child { color: var(--muted); }
.fee-line .amount { font-family: var(--numeric); font-variant-numeric: tabular-nums; font-weight: 600; }
.fee-total {
  margin-top: 8px; padding-top: 9px; border-top: 1px dashed var(--line);
  font-size: 13.5px; font-weight: 800;
}

/* --- deadlines list ----------------------------------------------------- */

.deadlines { list-style: none; margin: 0; padding: 0; }
.deadlines li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.deadlines li:last-child { border-bottom: 0; padding-bottom: 0; }
.deadlines .date {
  width: 40px; flex: none; text-align: center; background: var(--paper);
  border-radius: 6px; padding: 4px 0;
}
.deadlines .date .d { font-family: var(--numeric); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.deadlines .date .m { font-size: 9px; text-transform: uppercase; color: var(--muted); }
.deadlines .what { font-size: 12px; line-height: 1.4; }
.deadlines .what b { display: block; }
.deadlines .what span { color: var(--muted); }

/* --- dark help card ----------------------------------------------------- */

.help-card { background: var(--forest); color: var(--on-dark); border-radius: var(--radius-lg); padding: 16px 18px; }
.help-card strong { font-size: 13px; }
.help-card p { font-size: 12px; color: var(--on-dark-muted); margin: 5px 0 0; line-height: 1.5; }
.help-card .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.help-card .chips a {
  font-size: 11.5px; font-weight: 600; background: rgba(255, 255, 255, .1);
  border-radius: 6px; padding: 6px 10px; color: #fff; text-decoration: none;
}
.help-card .chips a:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }

/* --- empty state -------------------------------------------------------- */

.empty { text-align: center; padding: 34px 20px; color: var(--muted); }
.empty strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.empty p { font-size: 13px; margin: 0 auto 16px; max-width: 44ch; }

/* --- sign-in split ------------------------------------------------------ */

/* The split fills whatever is left below the service bar, whose height depends
   on how the official line wraps — so let flex measure it rather than guessing. */
.auth-page .page > main { display: flex; flex-direction: column; }
.auth-split { display: flex; flex: 1; background: var(--surface); }
.auth-brand {
  width: 44%; flex: none; color: var(--on-dark);
  background:
    linear-gradient(180deg, rgba(7, 24, 14, .72), rgba(7, 24, 14, .9)),
    url('../img/hero-1.jpg') center / cover no-repeat;
  display: flex; flex-direction: column; padding: 36px 38px;
}
.auth-brand .brand-mark { width: 52px; height: 52px; }
.auth-brand .brand-text strong { color: #fff; }
.auth-brand .brand-text small { color: var(--on-dark-faint); }
.auth-pitch { margin-top: auto; }
.auth-pitch h1 { font-size: 31px; font-weight: 800; line-height: 1.18; color: #fff; }
.auth-pitch p { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--on-dark-muted); }
.auth-figures { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.auth-figures .n { font-family: var(--numeric); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 20px; color: var(--gold); }
.auth-figures .l { font-size: 11px; color: var(--on-dark-faint); }
.auth-brand .footnote {
  margin: 30px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 11.5px; color: var(--on-dark-muted); line-height: 1.6;
}
.auth-brand .footnote a { color: var(--gold-bright); }

.auth-form { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; }
.auth-form-inner { width: 100%; max-width: 400px; }
.auth-form h1 { font-size: 23px; }
.auth-form .sub { font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.auth-form .aside {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hair);
  font-size: 11.5px; color: var(--muted); line-height: 1.6;
}
/* The staff surface signs in on a plain centred card, not the applicant split —
   an officer should never see the public-facing pitch panel. */
.auth-shell { display: grid; place-items: center; padding: 48px 20px; }
.auth-card  { width: 100%; max-width: 440px; margin-inline: auto; }
.recovery-auth-shell {
  flex: 1; min-height: 100%;
  background:
    linear-gradient(135deg, rgba(7, 24, 14, .9), rgba(14, 40, 24, .68)),
    url('../img/hero-1.jpg') center / cover no-repeat;
}
.recovery-auth-shell .auth-card {
  padding: 32px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 70px rgba(3, 14, 8, .28);
}
.recovery-auth-shell .brand { display: inline-flex; margin-bottom: 28px; }
.recovery-auth-shell .brand-text strong { color: var(--ink); }
.recovery-auth-shell h1 { font-size: 23px; }
.recovery-auth-shell .sub { color: var(--muted); margin-bottom: 26px; }
.recovery-auth-shell .aside {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--hair);
  text-align: center; font-size: 12px;
}
.recovery-confirmation { text-align: center; }
.recovery-confirmation .feature-icon { margin-inline: auto; }
.recovery-confirmation p { line-height: 1.6; }
.recovery-confirmation .flash { text-align: left; }

.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.label-row a { font-size: 12px; font-weight: 600; }
.or-rule { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 11px; margin: 16px 0; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Applicant portal mobile navigation. It stays out of desktop layouts and
   becomes a thumb-reachable, app-like dock on compact screens. */
.portal-mobile-nav { display: none; }

/* --- landing page ------------------------------------------------------- */

.landing .wrap { max-width: 1240px; padding: 0 clamp(20px, 5vw, 64px); }
.landing .button { background: var(--green-bright); border-radius: 6px; font-size: 15px; padding: 14px 26px; }
.landing .button:hover { background: var(--green-bright-dark); }
.landing .button-secondary { background: var(--surface); color: var(--ink); border-color: #c6d0c9; }
.landing .button-secondary:hover { border-color: var(--green); background: var(--surface); }
.landing .button-outline {
  background: rgba(10, 16, 12, .25); color: #fff; border-color: rgba(255, 255, 255, .55);
}
.landing .button-outline:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.landing .band a:not(.button) { color: #1d7a46; }

/* The hero: a full-height photograph with the header laid over it. */
.hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 92vh; min-height: 92svh; background: var(--forest); color: #fff;
}
.hero-media, .hero-scrim { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
}
.hero-slide-1 { background-image: url('../img/hero-1.jpg'); opacity: 1; }
.hero-slide-2 { background-image: url('../img/hero-2.jpg'); }
.hero-slide-3 { background-image: url('../img/hero-3.jpg'); }
.hero-slide-4 { background-image: url('../img/hero-4.jpg'); }
.hero-scrim {
  background: linear-gradient(180deg, rgba(8, 14, 11, .72) 0%, rgba(8, 14, 11, .45) 45%, rgba(8, 14, 11, .55) 100%);
}

.hero-header {
  position: fixed; top: 4px; left: 0; right: 0; z-index: 60; padding: 14px 0;
  background: rgba(8, 24, 15, .28); border-bottom: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.hero-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hero-brand { color: #fff; }
.hero-brand .brand-mark { width: 38px; height: 38px; }
.hero-brand-name { font-size: 16px; font-weight: 600; }
.hero-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-nav-link, .landing .hero-nav-link { color: #e9efeb; font-size: 14.5px; font-weight: 500; text-decoration: none; }
.hero-nav-link:hover { color: #fff; text-decoration: none; }
.hero-nav .button, .landing .hero-nav .button { padding: 10px 20px; font-size: 14.5px; }

.hero-body { position: relative; flex: 1; display: flex; align-items: center; padding: 48px 0; }
.hero-copy { max-width: 640px; }
.hero h1 {
  font-size: clamp(38px, 5.2vw, 62px); font-weight: 600; line-height: 1.12;
  letter-spacing: -.01em; color: #fff; margin: 0 0 22px; text-wrap: pretty;
}
.hero .lede { font-size: 16px; line-height: 1.65; color: #d7ded9; max-width: 420px; margin: 0 0 30px; }
.hero-actions { margin: 0; }

.hero-badges { list-style: none; margin: 40px 0 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-badges li {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; padding: 10px 16px;
  font-size: 13px; color: #e9efeb; background: rgba(10, 16, 12, .3); white-space: nowrap;
}
.hero-tick {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1.5px solid #6fce8f; color: #6fce8f; display: inline-grid; place-items: center;
}
.hero-tick .icon { width: 11px; height: 11px; stroke-width: 2.4; }

.hero-dots { display: flex; gap: 8px; margin-top: 28px; }
.hero-dot {
  width: 10px; height: 4px; border-radius: 2px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .35); transition: width .3s, background .3s;
}
.hero-dot.is-active { width: 26px; background: #fff; }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hero-credit { position: relative; margin: 0; padding: 0 clamp(20px, 5vw, 64px) 14px; font-size: 11px; color: rgba(233, 239, 235, .55); text-align: right; }
.hero-credit a, .landing .hero-credit a { color: rgba(233, 239, 235, .75); text-decoration: none; }
.hero-credit a:hover { color: #fff; text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  /* Four slides, six seconds each, a 1.4 s crossfade — in CSS, so the hero
     is whole without a script. The first slide starts inside its own cycle
     so nothing is blank on load. With reduced motion the first slide stays
     put. When app.js runs it takes the carousel over (is-scripted) so the
     dots can choose a slide; the keyframes then step aside. */
  .hero-media:not(.is-scripted) .hero-slide { animation: heroFade 24s infinite; }
  .hero-media:not(.is-scripted) .hero-slide-1 { animation-delay: -1.4s; }
  .hero-media:not(.is-scripted) .hero-slide-2 { animation-delay:  4.6s; }
  .hero-media:not(.is-scripted) .hero-slide-3 { animation-delay: 10.6s; }
  .hero-media:not(.is-scripted) .hero-slide-4 { animation-delay: 16.6s; }
  @keyframes heroFade {
    0%        { opacity: 0; }
    5.8%, 25% { opacity: 1; }
    30.8%     { opacity: 0; }
    100%      { opacity: 0; }
  }
  .hero-media.is-scripted .hero-slide { transition: opacity 1.4s ease; }
}
.hero-media.is-scripted .hero-slide { opacity: 0; }
.hero-media.is-scripted .hero-slide.is-active { opacity: 1; }

/* Bands */
.landing .band { background: var(--surface); border-top: 0; padding: clamp(56px, 8vw, 96px) 0; }
.landing .band-alt { background: #f6f8f6; }
.landing .band-dark { background: #0d2a1a; color: #fff; }
.landing .band-cta { padding: clamp(56px, 8vw, 88px) 0; }

.landing .section-head { max-width: 600px; margin-bottom: 44px; }
.landing .section-head.centred { max-width: 560px; margin-bottom: 48px; }
.landing .section-head h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 10px; }
.landing .section-head p { font-size: 16px; line-height: 1.6; color: #55645b; }

.step-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step-card { border: 1px solid #e5e9e6; border-radius: 10px; padding: 28px 26px; }
.step-n {
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 16px;
  display: grid; place-items: center; background: #1d7a46; color: #fff;
  font-family: var(--numeric); font-size: 14px; font-weight: 700;
}
.step-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.step-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #55645b; }

.landing .type-grid { gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.landing .type-card { background: var(--surface); border: 1px solid #e5e9e6; border-radius: 10px; padding: 24px; }
.landing .type-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.landing .type-card p { margin: 0; font-size: 14px; line-height: 1.55; color: #55645b; }
.agent-note {
  margin: 20px 0 0; background: var(--surface); border: 1px solid #e8dcb4; border-radius: 10px;
  padding: 16px 22px; font-size: 14px; line-height: 1.6; color: #6a5716;
}
.landing .band-alt .actions { margin-top: 28px; }

.landing .feature-grid { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.landing .feature { border: 1px solid #e5e9e6; border-radius: 10px; padding: 24px; }
.landing .feature-icon { color: #1d7a46; margin-bottom: 14px; }
.landing .feature-icon .icon { width: 22px; height: 22px; stroke-width: 1.6; }
.landing .feature h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.landing .feature p { margin: 0; font-size: 14px; line-height: 1.6; color: #55645b; }

/* Ask EPA */
.ask-band { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ask-band h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 12px; color: #fff; text-wrap: pretty; }
.ask-lede { font-size: 16px; line-height: 1.65; color: #b9cec1; margin: 0 0 26px; text-wrap: pretty; }
.ask-fine { font-size: 12.5px; color: #7a9787; margin: 12px 0 0; }
.ask-sample { background: #123521; border: 1px solid #23503a; border-radius: 12px; padding: 24px; display: grid; gap: 14px; }
.ask-sample p { margin: 0; font-size: 14px; line-height: 1.55; padding: 12px 16px; }
.ask-sample-you { justify-self: end; max-width: 85%; background: var(--green-bright); color: #fff; border-radius: 12px 12px 2px 12px; }
.ask-sample-epa { justify-self: start; max-width: 90%; background: #1a4029; color: #dcebe1; border-radius: 12px 12px 12px 2px; }

/* Closing call to action */
.cta-inner { max-width: 680px; text-align: center; }
.cta-inner h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px; }
.cta-inner p { font-size: 16px; line-height: 1.6; color: #55645b; margin: 0 0 28px; }
.cta-inner .actions { justify-content: center; }

/* Still used by the registration guide. */
.journey { list-style: none; margin: 0; padding: 0; counter-reset: journey; }
.journey li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.journey li + li { margin-top: 10px; }
.journey li::before {
  counter-increment: journey; content: counter(journey);
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--green-tint); color: var(--green);
  display: grid; place-items: center;
  font-family: var(--numeric); font-size: 12px; font-weight: 700;
}
.journey strong { display: block; font-size: 13.5px; }
.journey span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

.band { background: var(--surface); border-top: 1px solid var(--hair); padding: 56px 0; }
.band-paper { background: var(--paper); }
.section-head { max-width: 62ch; margin-bottom: 32px; }
.section-head.centred { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: 27px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 10px; }
.section-head p { font-size: 14.5px; color: var(--muted); margin: 0; }

.type-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.type-card {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 2px solid var(--green);
  border-radius: 0 0 var(--radius) var(--radius); padding: 20px 22px;
}
.type-card h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 800; }
.type-card p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.feature {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 2px solid var(--green);
  border-radius: 0 0 var(--radius) var(--radius); padding: 22px;
}
.feature-icon { color: var(--green); margin-bottom: 12px; }
.feature-icon .icon { width: 24px; height: 24px; stroke-width: 1.5; }
.feature h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 800; }
.feature p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* --- slide-over panel ---------------------------------------------------
   A page's fragment shown from the right edge, over the list it came from.
   A <dialog>, so Escape and the backdrop close it and focus stays inside. */
dialog.slide-over {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; z-index: 1000;
  width: min(820px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh;
  border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: -18px 0 48px rgba(14, 40, 24, .18);
  display: flex; flex-direction: column;
}
dialog.slide-over:not([open]) { display: none; }
dialog.slide-over::backdrop { background: rgba(14, 40, 24, .45); }
@media (prefers-reduced-motion: no-preference) {
  dialog.slide-over[open] { animation: slideOverIn .22s ease-out; }
  @keyframes slideOverIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.slide-over-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--hair); flex: none;
}
.slide-over-title { margin: 0; font-size: 16px; font-weight: 700; }
.slide-over-body { flex: 1; overflow: auto; padding: 18px 20px 32px; }
.slide-over-body:focus { outline: none; }
.slide-over-lede { margin: 0 0 10px; }
.slide-over-loading { padding: 24px 0; }
.u-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 620px) { dialog.slide-over { width: 100vw; border-left: 0; } }

/* --- staff surface: a workspace, not a portal ---------------------------
   The applicant portal is a public government service and looks like one. The
   staff surface is a tool people sit in all day, and it borrows the shape of a
   Notion workspace for that reason: a pale, dense sidebar; a slim top bar; a
   white page with one large title and quiet chrome; tables that read as
   databases rather than reports. Everything below is scoped to .surface-ipms,
   so nothing on the applicant side moves.

   Values were measured from a live workspace rather than approximated: a
   270px sidebar on #f9f8f7, 28px items at 14px/500 with a 6px radius, a 44px
   top bar, hairlines at rgba(28,19,1,.11). The accent stays EPA green — this
   is still EPA — but it is used the way Notion uses its blue, sparingly. */

.surface-ipms {
  /* Notion runs on the system face, which is a large part of why it feels
     like the operating system rather than a website. */
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
          'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
  --numeric: var(--font);

  --ink:        #2c2c2b;
  --muted:      #7d7a75;
  --faint:      #a8a5a0;
  --line:       #e9e8e6;
  --line-soft:  #f0efed;
  --hair:       #f0efed;
  --field-line: #dcdad6;
  --surface:    #ffffff;
  --paper:      #ffffff;
  --paper-2:    #f9f8f7;

  --radius:    6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --sidebar:   260px;

  font-size: 14px;
  -webkit-font-smoothing: auto;
}

/* Sign-in stays on the dark header — an officer arriving should still see the
   authority's colours before they see the tool. */
.surface-ipms .site-header { background: var(--forest); border-bottom: 0; }
.surface-ipms .site-header .brand-text strong { color: #fff; }
.surface-ipms .site-header .brand-text small { color: var(--on-dark-faint); }
.surface-ipms .site-header .brand-mark { background: var(--surface); }

/* Sidebar ---------------------------------------------------------------- */

.surface-ipms .app-sidebar {
  background: var(--paper-2); color: var(--ink);
  border-right: 1px solid var(--line);
}
.surface-ipms .app-sidebar .flag-rule { height: 3px; }

/* The brand row becomes a workspace switcher: small mark, one name, a chevron
   that is not yet wired to anything. */
.surface-ipms .app-sidebar .brand {
  padding: 10px 12px 6px; gap: 8px; border-bottom: 0;
  border-radius: var(--radius); margin: 6px 8px 0;
}
.surface-ipms .app-sidebar .brand:hover { background: rgba(0, 0, 0, .04); }
.surface-ipms .app-sidebar .brand-mark {
  width: 22px; height: 22px; border-radius: 4px; box-shadow: none;
}
.surface-ipms .app-sidebar .brand-text strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.surface-ipms .app-sidebar .brand-text small { display: none; }
.surface-ipms .app-sidebar .brand::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg) translateY(-2px);
}

.surface-ipms .app-nav { padding: 6px 8px; gap: 1px; }

/* A section label above the links, the way a workspace names its teamspaces. */
.surface-ipms .app-nav::before {
  content: "Workspace";
  display: block; padding: 10px 8px 4px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: .01em;
}

.surface-ipms .app-nav a {
  min-height: 28px; padding: 4px 8px; gap: 8px;
  border-radius: var(--radius);
  color: var(--ink); font-size: 14px; font-weight: 500;
}
.surface-ipms .app-nav a:hover { background: rgba(0, 0, 0, .045); color: var(--ink); }
.surface-ipms .app-nav a[aria-current="page"] {
  background: rgba(0, 0, 0, .065); color: var(--ink); font-weight: 600;
}
.surface-ipms .app-nav .nav-icon { width: 18px; height: 18px; opacity: 1; color: var(--muted); }
.surface-ipms .app-nav a[aria-current="page"] .nav-icon { color: var(--ink); }
.surface-ipms .nav-sub > .nav-caret { color: var(--faint); }
.surface-ipms .nav-sub > .nav-caret:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.surface-ipms .nav-children a { color: var(--muted); font-size: 13px; padding: 4px 8px 4px 36px; }
.surface-ipms .nav-children a:hover { color: var(--ink); background: rgba(0, 0, 0, .045); }
.surface-ipms .nav-children a[aria-current="page"] { color: var(--ink); font-weight: 600; background: rgba(0, 0, 0, .065); }
.surface-ipms .app-nav .nav-link[aria-current="true"] { color: var(--ink); background: rgba(0, 0, 0, .03); }
.surface-ipms .app-nav .count {
  background: var(--green); color: #fff; font-size: 10.5px; padding: 1px 6px;
}


/* The account row is the summary of a disclosure whose menu opens upward,
   the way a workspace's user menu does. Native <details>: keyboard-operable
   and announced without a line of script; the script only adds closing on an
   outside click. */
.surface-ipms .account-menu { position: relative; border-top: 1px solid var(--line); }
.surface-ipms .sidebar-account {
  border-top: 0; padding: 10px 12px; gap: 8px; margin: 0; color: var(--ink);
  cursor: pointer; list-style: none; border-radius: 0;
}
.surface-ipms .sidebar-account::-webkit-details-marker { display: none; }
.surface-ipms .sidebar-account:hover,
.surface-ipms .account-menu[open] > .sidebar-account { background: rgba(0, 0, 0, .045); }
.surface-ipms .sidebar-account-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.surface-ipms .account-caret {
  width: 7px; height: 7px; flex: none; margin-right: 4px;
  border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: rotate(-135deg) translateY(-2px);   /* points up: the menu opens that way */
}

.surface-ipms .account-popover {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 6px; z-index: 30;
}
.surface-ipms .account-popover-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft);
}
.surface-ipms .account-popover-head .avatar { width: 30px; height: 30px; font-size: 12px; }
.surface-ipms .account-popover-head .name { display: block; font-size: 13.5px; font-weight: 600; }
.surface-ipms .account-popover-head .meta { display: block; font-size: 12px; color: var(--muted); }
.surface-ipms .account-popover form { margin: 0; }
.surface-ipms .account-popover-item {
  display: flex; width: 100%; align-items: center;
  padding: 7px 8px; border: 0; border-radius: var(--radius);
  background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer;
}
.surface-ipms .account-popover-item:hover { background: rgba(0, 0, 0, .045); }
.surface-ipms a.account-popover-item { text-decoration: none; }
.surface-ipms .sidebar-account .avatar {
  width: 24px; height: 24px; border-radius: 4px; font-size: 10px;
  background: var(--green); color: #fff;
}
.surface-ipms .sidebar-account .name { font-size: 13px; font-weight: 500; }
.surface-ipms .sidebar-account .ref  { font-size: 11px; color: var(--muted); font-family: var(--font); }

/* Top bar ---------------------------------------------------------------- */

.surface-ipms .app-topbar {
  min-height: 44px; padding: 0 20px 0 16px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.surface-ipms .app-topbar .topbar-crumb {
  font-size: 13px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.surface-ipms .app-topbar .link-button {
  font-size: 13px; font-weight: 500; color: var(--muted);
  text-decoration: none; padding: 4px 8px; border-radius: var(--radius);
}
.surface-ipms .app-topbar .link-button:hover { background: rgba(0, 0, 0, .045); color: var(--ink); }

/* Page ------------------------------------------------------------------- */

/* No cap on width: a register of applications is wider than an essay, and
   a table that leaves a third of the screen empty is a table with columns it
   had to hide. */
.surface-ipms .app-content { padding: 36px 40px 64px; }

/* One large title, a quiet line under it, and the label that used to shout in
   capitals above it becomes the small grey caption a workspace page carries. */
.surface-ipms h1 {
  font-size: 32px; font-weight: 700; letter-spacing: -.024em; line-height: 1.2;
  margin: 0 0 6px;
}
.surface-ipms h2 { font-size: 15px; font-weight: 600; margin: 28px 0 10px; }
.surface-ipms .eyebrow {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500;
  color: var(--muted); margin-bottom: 8px;
}
.surface-ipms .page-head, .surface-ipms .panel-head { margin-bottom: 22px; }
.surface-ipms .lede, .surface-ipms .page-head .muted.small { font-size: 14px; }

/* Blocks ----------------------------------------------------------------- */

.surface-ipms .panel {
  border-color: var(--line); border-radius: var(--radius-lg); padding: 18px 20px;
}
.surface-ipms .panel-title {
  padding: 12px 16px; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
}

/* Filters read as a database's views: text tabs with a rule under the current
   one, rather than a row of pills. */
.surface-ipms .listing-bar { border-bottom: 1px solid var(--line); margin-bottom: 14px; gap: 6px 16px; }
.surface-ipms .pills { gap: 2px; margin-bottom: -1px; }
.surface-ipms .pills a {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 8px 10px; font-size: 13.5px; font-weight: 500; color: var(--muted);
  background: none;
}
.surface-ipms .pills a:hover { color: var(--ink); background: none; }
.surface-ipms .pills a[aria-current="page"] {
  background: none; color: var(--ink); border-bottom-color: var(--ink); font-weight: 600;
}
.surface-ipms .pill-count { background: none; color: var(--faint); padding: 0; margin-left: 4px; font-size: 12px; }
.surface-ipms .pills a[aria-current="page"] .pill-count { background: none; color: var(--muted); }

.surface-ipms .listing-search { margin-left: auto; padding-bottom: 6px; }
.surface-ipms .listing-search-field {
  border: 0; background: none; min-width: 200px; padding: 0 4px;
}
.surface-ipms .listing-search-field:focus-within { box-shadow: none; border: 0; }
.surface-ipms .listing-search-field input[type=search] { font-size: 13.5px; padding: 6px 0; }
.surface-ipms .listing-search .button { display: none; }        /* Enter submits; a button here is clutter */
.surface-ipms .listing-search .button-secondary { display: inline-flex; }  /* the Clear link stays */

/* Registry --------------------------------------------------------------- */

.registry-section { margin: 0 0 34px; }
.registry-section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
  margin: 0 0 12px;
}
.registry-section-head h2, .registry-section h2 { margin: 0; font-size: 17px; }
.registry-section > h2 { margin: 22px 0 12px; }
.registry-stat-grid, .registry-status-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.registry-stat-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.registry-status-strip { grid-template-columns: repeat(5, minmax(120px, 1fr)); margin: 0 0 22px; }
.registry-status-strip-6 { grid-template-columns: repeat(6, minmax(105px, 1fr)); }
.registry-status-strip .stat { padding: 12px 14px; }
.registry-status-strip .stat .value { font-size: 23px; }
.registry-money { font-size: clamp(17px, 1.8vw, 25px) !important; white-space: nowrap; }
.registry-breakdown-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.surface-ipms .registry-breakdown { margin: 0; }
.registry-breakdown .panel-title { padding: 11px 14px; }
.registry-breakdown th, .registry-breakdown td { padding: 8px 14px; }
.registry-date-filter { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.registry-date-filter label { margin-bottom: 3px; }
.registry-date-filter input { width: 145px; padding: 8px 10px; }

/* Registry dashboard — refreshed ---------------------------------------- */
.registry-dash-head { align-items: flex-start; }

.registry-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin: 0 0 12px; }
.registry-hero-primary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 24px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--green-tint) 0%, transparent 55%),
    var(--surface);
  border-color: var(--green-line);
}
.registry-hero-copy { min-width: 0; }
.registry-hero-value {
  font-family: var(--numeric); font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; line-height: 1.05;
  color: var(--green-ink); margin: 4px 0 6px; white-space: nowrap;
}
.registry-open {
  display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600;
  color: var(--green); text-decoration: none;
}
.registry-open:hover { text-decoration: underline; }

/* Collection-rate gauge (pure CSS conic ring) */
.registry-gauge {
  --rate: 0; flex: 0 0 auto;
  width: 118px; height: 118px; border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--rate) * 1%), var(--line) 0);
  display: grid; place-items: center;
}
.registry-gauge-hole {
  width: 84px; height: 84px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center; text-align: center; line-height: 1.1;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.registry-gauge-pct { display: block; font-family: var(--numeric); font-weight: 700; font-size: 22px; color: var(--ink); }
.registry-gauge-label { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.registry-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.registry-hero-side .stat { display: flex; flex-direction: column; justify-content: center; }

.registry-invoice-panel { padding: 18px 20px; margin: 0 0 12px; }

/* Segmented proportional bar + legend */
.seg-bar {
  display: flex; height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--hair); margin: 14px 0 12px;
}
.seg { display: block; height: 100%; }
.seg + .seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.45); }
.seg-good { background: var(--green); }
.seg-warn { background: var(--gold); }
.seg-bad  { background: var(--red); }
.seg-neutral { background: var(--line); }
.seg-empty { background: var(--paper); }
.seg-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; }
.seg-legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.seg-legend a { color: var(--muted); text-decoration: none; }
.seg-legend a:hover { color: var(--ink); text-decoration: underline; }
.seg-legend strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.seg-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* Permit / licence cards */
.registry-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.registry-doc-card { padding: 20px 22px; }
.registry-doc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.registry-doc-card-head h2 { margin: 2px 0 0; font-size: 18px; }
.registry-doc-figure { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 2px; }
.registry-doc-total { font-family: var(--numeric); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1; }
.registry-doc-caption { font-size: 12.5px; color: var(--muted); }
.registry-doc-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 16px; }
.registry-doc-facts .fact {
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 10px 12px;
}
.registry-doc-facts .fact-value { display: block; font-family: var(--numeric); font-weight: 700; font-size: 18px; color: var(--ink); }
.registry-doc-facts .fact-label { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.registry-doc-facts .fact-warn { border-color: var(--gold-line); background: var(--gold-tint); }
.registry-doc-facts .fact-warn .fact-value { color: var(--gold-ink); }
.registry-doc-facts .fact-bad { border-color: var(--red-line); background: var(--red-tint); }
.registry-doc-facts .fact-bad .fact-value { color: var(--red); }

.registry-types-head { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.registry-type-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; margin-bottom: 7px; }
.registry-type-name { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.registry-type-track { height: 7px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.registry-type-fill { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.registry-type-count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }

/* Permit / licence registry overview band */
.registry-overview { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 24px; align-items: center; padding: 20px 24px; margin: 0 0 14px; }
.registry-overview-figure { display: flex; flex-direction: column; gap: 4px; }
.registry-overview-figure .registry-doc-total { font-size: 40px; }
.registry-callouts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.registry-callout { font-size: 12px; color: var(--muted); background: var(--paper); border: 1px solid var(--hair); border-radius: 999px; padding: 5px 12px; text-decoration: none; }
.registry-callout strong { color: var(--ink); font-variant-numeric: tabular-nums; }
a.registry-callout:hover { border-color: var(--field-line); }
.registry-callout-warn { background: var(--gold-tint); border-color: var(--gold-line); color: var(--gold-ink); }
.registry-callout-warn strong { color: var(--gold-ink); }
.registry-overview-bar { min-width: 0; }
.registry-overview-all { display: inline-block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-decoration: none; }
.registry-overview-all.is-active { color: var(--green); }
.registry-overview-bar .seg-bar { margin-top: 8px; }
.registry-overview-wide { grid-template-columns: minmax(0, 400px) 1fr; }
.registry-overview-money { font-size: clamp(22px, 2.6vw, 32px) !important; color: var(--green-ink); white-space: nowrap; }
.registry-callout-bad { background: var(--red-tint); border-color: var(--red-line); color: var(--red); }
.registry-callout-bad strong { color: var(--red); }
a.registry-callout-bad:hover { border-color: var(--red); }
.seg-legend a.is-active { color: var(--ink); font-weight: 700; }

@media (max-width: 760px) {
  .registry-overview { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 900px) {
  .registry-hero { grid-template-columns: 1fr; }
  .registry-hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .registry-doc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .registry-hero-primary { flex-direction: column-reverse; align-items: flex-start; }
  .registry-hero-side { grid-template-columns: 1fr; }
}
.registry-filter-panel {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px; margin: 0 0 16px;
}
.registry-filter-fields { display: grid; grid-template-columns: repeat(6,minmax(120px,1fr)); gap: 10px; }
.registry-filter-fields label { color: var(--muted); font-size: 11.5px; margin-bottom: 4px; }
.registry-filter-fields select, .registry-filter-fields input { padding: 8px 9px; font-size: 12.5px; }
.registry-filter-actions { display: flex; gap: 8px; margin-top: 10px; }
.registry-listing-bar { justify-content: flex-end; }
.registry-listing-bar .listing-search { width: min(100%, 620px); }
.registry-listing-bar .listing-search-field { width: 100%; }
.registry-inline-total { min-width: 230px; }
.registry-wide-table { min-width: 1500px; }
.registry-row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.registry-row-actions form { margin: 0; }

@media (max-width: 1180px) {
  .registry-stat-grid-5, .registry-status-strip-6 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .registry-filter-fields { grid-template-columns: repeat(3,minmax(140px,1fr)); }
}

@media (max-width: 760px) {
  .registry-stat-grid, .registry-stat-grid-5, .registry-status-strip,
  .registry-status-strip-6 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .registry-breakdown-grid { grid-template-columns: 1fr; }
  .registry-filter-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .registry-date-filter { width: 100%; }
  .registry-date-filter > div { flex: 1 1 130px; }
  .registry-date-filter input { width: 100%; }
}

@media (max-width: 480px) {
  .registry-filter-fields { grid-template-columns: 1fr; }
  .registry-status-strip .stat .value { font-size: 20px; }
  .registry-money { white-space: normal; }
}

/* Tables: a database. Small text, no capitals, hairlines, a hover that says
   the row is one thing. */
.surface-ipms table { font-size: 13.5px; }
.surface-ipms thead th {
  font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--muted); border-bottom: 1px solid var(--line); padding: 8px 12px;
}
.surface-ipms th, .surface-ipms td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); }
.surface-ipms tbody tr:hover { background: var(--paper-2); }
.surface-ipms td .sub { font-size: 12px; }
.surface-ipms .listing-foot { background: none; border-top: 1px solid var(--line-soft); padding: 10px 12px; }

/* Status is a select-property tag: soft colour, no capitals, medium weight. */
.surface-ipms .badge {
  border: 0; border-radius: 4px; padding: 2px 7px;
  font-size: 12px; font-weight: 500; letter-spacing: 0;
}
.surface-ipms .badge-neutral { background: #ecebe9; color: #4f4d4a; }
.surface-ipms .badge-info    { background: #e1ecf5; color: #2c5a80; }
.surface-ipms .badge-good    { background: #dfeee4; color: #23573a; }
.surface-ipms .badge-warn    { background: #f9edd6; color: #7a4c0b; }
.surface-ipms .badge-bad     { background: #fbe1de; color: #8f2a22; }

/* Buttons are quieter: the secondary one is a soft grey block, the primary is
   the accent, both small. */
.surface-ipms .button { padding: 6px 12px; font-size: 13.5px; font-weight: 500; border-radius: var(--radius); }
.surface-ipms .button-secondary {
  background: rgba(0, 0, 0, .04); border-color: transparent; color: var(--ink);
}
.surface-ipms .button-secondary:hover { background: rgba(0, 0, 0, .08); }
.surface-ipms .button-small { padding: 4px 10px; font-size: 13px; }

.surface-ipms .stat { border-color: var(--line); }
.surface-ipms .stat .label { font-size: 12px; font-weight: 500; }
.surface-ipms .stat .value { font-size: 26px; font-weight: 600; }

.surface-ipms .flash { font-size: 13.5px; border-radius: var(--radius-lg); }
.surface-ipms .callout { font-size: 13.5px; }

.surface-ipms .empty { padding: 40px 20px; }
.surface-ipms .empty strong { font-size: 14px; font-weight: 600; }

/* The hamburger and its folded top bar go pale with the rest. */
@media (max-width: 1000px) {
  .surface-ipms .app-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .surface-ipms .account-menu { border-top: 0; margin-left: auto; }
  .surface-ipms .sidebar-account { border-top: 0; padding: 6px 10px; }
  .surface-ipms .account-popover { left: auto; right: 6px; bottom: auto; top: calc(100% + 4px); min-width: 240px; }
  .surface-ipms .account-caret { transform: rotate(45deg) translateY(-2px); }  /* points down */
  .surface-ipms .sidebar-account .ref { display: none; }
  .surface-ipms .sidebar-account .name {
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .surface-ipms .nav-menu { border-top-color: var(--line); }
  .surface-ipms .nav-toggle { color: var(--ink); }
  .surface-ipms .nav-toggle:hover { background: rgba(0, 0, 0, .04); }
  .surface-ipms .app:has(.nav-menu[open]) .app-topbar {
    background: var(--paper-2); color: var(--ink); border-bottom: 1px solid var(--line);
  }
  .surface-ipms .app:has(.nav-menu[open]) .app-topbar .topbar-crumb { color: var(--muted); }
  .surface-ipms .app:has(.nav-menu[open]) .app-topbar .link-button { color: var(--ink); }
  .surface-ipms .app-content { padding: 20px 18px 48px; }
}

/* An officer should never be in any doubt about which side of the portal they
   are on, so the staff session carries a mark the applicant surface never has. */
.staff-tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--gold); color: #241a05;
  font-size: 11px; font-weight: 700; text-transform: capitalize;
}

/* An officer should never be in any doubt about which side of the portal they
   are on, so the staff session carries a mark the applicant surface never has. */
.staff-tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--gold); color: #241a05;
  font-size: 11px; font-weight: 700; text-transform: capitalize;
}

/* Staff notifications: summary first, then a compact feed that makes unread
   work and the destination application easy to scan. */
.notification-page-head { align-items: end; }
.notification-new-summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  color: var(--green); background: var(--green-tint); border: 1px solid var(--green-line);
  border-radius: 999px; font-size: 12px; font-weight: 700;
}
.notification-new-summary > span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 4px rgba(26, 107, 60, .1);
}
.notification-summary-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.notification-stat {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 15px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.notification-stat-icon,
.notification-event-icon {
  display: grid; place-items: center; flex: none; border-radius: 50%; font-weight: 800;
}
.notification-stat-icon { width: 36px; height: 36px; font-size: 15px; }
.notification-stat-icon.is-new { color: var(--green); background: var(--green-tint); }
.notification-stat-icon.is-assigned { color: var(--blue); background: var(--blue-tint); }
.notification-stat-icon.is-review { color: var(--gold-ink); background: var(--gold-tint); }
.notification-stat strong { display: block; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.notification-stat small { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; }

.notification-feed { display: grid; gap: 24px; }
.notification-group-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
}
.notification-group-head h2 { margin: 0; font-size: 14px; }
.notification-group-head > span {
  display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px;
  color: var(--muted); background: var(--sand); border-radius: 999px; font-size: 11px; font-weight: 700;
}
.notification-list {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl);
}
.notification-item {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; padding: 17px 18px;
  border-bottom: 1px solid var(--hair);
}
.notification-item:last-child { border-bottom: 0; }
.notification-item.is-unread {
  background: linear-gradient(90deg, var(--green-tint), rgba(237, 247, 240, .2) 42%, var(--surface));
  box-shadow: inset 3px 0 0 var(--green);
}
.notification-event-icon { width: 40px; height: 40px; font-size: 17px; }
.notification-event-icon.is-assigned { color: var(--blue); background: var(--blue-tint); }
.notification-event-icon.is-review { color: var(--green); background: var(--green-tint); }
.notification-event-icon.is-response { color: var(--gold-ink); background: var(--gold-tint); }
.notification-event-icon.is-report { color: var(--blue); background: var(--blue-tint); }
.notification-event-icon.is-update { color: var(--muted); background: var(--paper); }
.notification-content { min-width: 0; }
.notification-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.notification-meta time { margin-left: auto; color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.notification-kind {
  color: var(--muted); font-size: 10.5px; font-weight: 800;
  letter-spacing: .045em; text-transform: uppercase;
}
.notification-kind.is-assigned, .notification-kind.is-report { color: var(--blue); }
.notification-kind.is-review { color: var(--green); }
.notification-kind.is-response { color: var(--gold-ink); }
.notification-content h3 { margin: 6px 0 3px; font-size: 14px; line-height: 1.35; }
.notification-content p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.notification-action { align-self: center; white-space: nowrap; }

.notification-empty { padding: 48px 24px; text-align: center; }
.notification-empty-icon {
  display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px;
  color: var(--green); background: var(--green-tint); border-radius: 50%;
}
.notification-empty-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notification-empty h2 { margin: 0 0 6px; font-size: 18px; }
.notification-empty p { margin: 0 0 18px; }

/* Application detail tabs are progressive enhancement: until JavaScript adds
   .js-tabs, the tab bar stays out of the way and every section remains visible. */
.application-tabs { margin-top: 10px; }
.application-tab-list { display: none; }
.application-tabs.js-tabs > .application-tab-list {
  display: flex; align-items: end; gap: 4px; overflow-x: auto;
  margin: 0 0 18px; padding: 0 2px; border-bottom: 1px solid var(--line);
  scrollbar-width: none; -ms-overflow-style: none;
}
.application-tabs.js-tabs > .application-tab-list::-webkit-scrollbar { display: none; }
.application-tab {
  appearance: none; flex: 0 0 auto; margin: 0 0 -1px; padding: 11px 14px;
  color: var(--muted); background: transparent; border: 0;
  border-bottom: 3px solid transparent; border-radius: var(--radius) var(--radius) 0 0;
  font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.application-tab:hover { color: var(--green); background: var(--green-tint); }
.application-tab[aria-selected="true"] {
  color: var(--green); background: var(--surface); border-bottom-color: var(--green);
}
.application-tab:focus-visible {
  outline: 3px solid rgba(26, 107, 60, .2); outline-offset: -3px;
}
.application-tab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  margin-left: 4px; padding: 0 6px; border-radius: 999px;
  color: var(--muted); background: var(--paper); font-size: 11px;
}
.application-tab[aria-selected="true"] .application-tab-count {
  color: var(--green); background: var(--green-tint);
}
.application-tab-panel { min-width: 0; }
.application-tabs.js-tabs > .application-tab-panel[hidden] { display: none; }

/* Administration tabs follow the same progressive-enhancement contract as
   application tabs: the tab bar is hidden until JavaScript adds .js-tabs,
   and every panel remains visible as a normal scrolling page without it. */
.admin-tabs { margin-top: 10px; }
.admin-tab-list { display: none; }
.admin-tabs.js-tabs > .admin-tab-list {
  display: flex; align-items: end; gap: 4px; overflow-x: auto;
  margin: 0 0 18px; padding: 0 2px; border-bottom: 1px solid var(--line);
  scrollbar-width: none; -ms-overflow-style: none;
}
.admin-tabs.js-tabs > .admin-tab-list::-webkit-scrollbar { display: none; }
.admin-tab {
  appearance: none; flex: 0 0 auto; margin: 0 0 -1px; padding: 11px 14px;
  color: var(--muted); background: transparent; border: 0;
  border-bottom: 3px solid transparent; border-radius: var(--radius) var(--radius) 0 0;
  font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.admin-tab:hover { color: var(--green); background: var(--green-tint); }
.admin-tab[aria-selected="true"] {
  color: var(--green); background: var(--surface); border-bottom-color: var(--green);
}
.admin-tab:focus-visible {
  outline: 3px solid rgba(26, 107, 60, .2); outline-offset: -3px;
}
.admin-tab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  margin-left: 4px; padding: 0 6px; border-radius: 999px;
  color: var(--muted); background: var(--paper); font-size: 11px;
}
.admin-tab[aria-selected="true"] .admin-tab-count {
  color: var(--green); background: var(--green-tint);
}
.admin-tab-panel { min-width: 0; }
.admin-tabs.js-tabs > .admin-tab-panel[hidden] { display: none; }

/* --- compact administration tables ------------------------------------- */

.admin-tab-panel .panel {
  padding: 16px 20px;
}
.admin-tab-panel .panel-head {
  margin-bottom: 12px;
}
.admin-tab-panel .panel-head h2 {
  margin: 0 0 2px;
  font-size: 15px;
}
.admin-tab-panel .panel-head p {
  margin: 0;
}
.admin-tab-panel .listing-bar {
  margin-bottom: 10px;
  gap: 10px;
}
.admin-tab-panel table {
  font-size: 12.5px;
}
.admin-tab-panel thead th {
  padding: 6px 12px;
  font-size: 10px;
}
.admin-tab-panel tbody th,
.admin-tab-panel tbody td {
  padding: 6px 12px;
  vertical-align: middle;
  line-height: 1.35;
}
.admin-tab-panel tbody td .sub {
  font-size: 11px;
  line-height: 1.2;
  margin-top: 1px;
}
.admin-tab-panel td.actions {
  text-align: right;
  padding-top: 4px;
  padding-bottom: 4px;
}
.admin-tab-panel td.actions .button,
.admin-tab-panel td.actions .button-small {
  padding: 3px 9px;
  font-size: 11.5px;
}
.admin-tab-panel .badge {
  padding: 2px 7px;
  font-size: 10.5px;
}
.admin-tab-panel .listing-foot {
  margin-top: 8px;
  padding-top: 8px;
}

/* --- modal dialogs ------------------------------------------------------ */

dialog.modal-dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(14, 40, 24, .25), 0 4px 16px rgba(0, 0, 0, .08);
  max-width: 680px;
  width: calc(100% - 32px);
  margin: auto;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
dialog.modal-dialog.modal-wide { max-width: 960px; }
dialog.modal-dialog:not([open]) {
  display: none;
}
dialog.modal-dialog[open] {
  display: block;
}
dialog.modal-dialog::backdrop {
  background: rgba(14, 40, 24, .65);
  backdrop-filter: blur(2px);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--hair);
}
.modal-head h2, .modal-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius);
}
.modal-close:hover {
  color: var(--ink);
  background: var(--paper);
}
.modal-body {
  padding: 20px 24px;
  max-height: calc(85vh - 130px);
  overflow-y: auto;
}
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--hair);
  background: var(--paper-2);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* --- Public Ask EPA AI Modal Dialog ------------------------------------ */

.ask-epa-modal {
  max-width: 680px;
  width: calc(100% - 32px);
  max-height: calc(90vh - 32px);
  height: 640px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
dialog.ask-epa-modal[open] {
  display: flex;
  flex-direction: column;
}
.ask-epa-modal-head {
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ask-epa-head-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ask-epa-head-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
/* The CSP permits no inline style attribute, so every one-off the assistant
   markup needs is a class here rather than a style="" that the browser drops. */
.ask-epa-modal .ask-epa-title { font-size: 17px; margin: 0; line-height: 1.2; }
.ask-epa-subtitle { font-size: 12px; color: var(--muted); }
.epa-chat-bubble-error { border-left: 3px solid var(--red); background: #fdf2f2; }
.epa-chat-thinking-label { margin-left: 6px; }
.epa-chat-kind-badge { margin-bottom: 6px; }
.epa-chat-evidence { margin-top: 2px; }
.epa-chat-gap-top { margin-top: 12px; }
.field-narrow { max-width: 32rem; }
.field-compact { max-width: 240px; }
.panel-canvas { background: var(--paper); }
.ask-epa-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--paper-2);
}
.ask-epa-suggestions {
  padding: 12px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
  flex-shrink: 0;
}
.ask-epa-suggestions-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}
.ask-epa-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ask-epa-messages {
  flex: 1 1 auto;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ask-epa-modal-footer {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--hair);
  padding: 12px 18px 14px;
}
.button-ask-epa, .nav-ask-epa, .footer-ask-epa {
  position: relative;
}
.ask-epa-sparkle {
  color: var(--gold-dark, #b58105);
  font-weight: 800;
  margin-right: 4px;
}
.nav-ask-epa {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius);
  transition: background .15s ease, color .15s ease;
}
.nav-ask-epa:hover {
  background: var(--paper);
  color: var(--forest-dark);
}
.footer-ask-epa {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.footer-ask-epa:hover {
  color: #fff;
  text-decoration: underline;
}

/* Authenticated staff-only launcher for the local AI working-draft assistant.
/* --- AI Assistant Floating Chat Widget (ADR 0002) ----------------------- */

.epa-chat-container {
  position: fixed;
  right: 24px;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 1000;
}

/* The launcher is the EPA mark alone: a 52px circle, no caption. The button
   already carries its name in aria-label, so removing the visible text loses
   nothing for a screen reader. */
.epa-chat-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  border: 2px solid var(--gold);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(7,31,19,.35), 0 2px 8px rgba(7,31,19,.2);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
}

.epa-chat-launcher:hover,
.epa-chat-launcher:focus-visible {
  background: #143823;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(7,31,19,.42), 0 3px 12px rgba(7,31,19,.25);
  outline: none;
}

.epa-chat-launcher-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.epa-chat-launcher-icon img,
.epa-chat-launcher-icon svg {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.epa-chat-launcher-label { display: none; }

.epa-chat-header-logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  object-fit: contain;
  display: block;
}

.epa-chat-window {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: min(430px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 100px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(7,31,19,.32), 0 6px 18px rgba(7,31,19,.16);
  overflow: hidden;
  animation: epaChatSlideUp .22s cubic-bezier(0.16, 1, 0.3, 1);
}

.epa-chat-window[hidden] {
  display: none !important;
}

@keyframes epaChatSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.epa-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--forest);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.epa-chat-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.epa-chat-sparkle {
  color: var(--gold);
  font-size: 18px;
}

.epa-chat-header-title strong {
  display: block;
  font-size: 14px;
  line-height: 1.2;
}

.epa-chat-context-pill {
  display: inline-block;
  font-size: 11px;
  color: var(--sand-tint);
  opacity: .9;
}

.epa-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.epa-chat-btn-ghost {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  font-size: 15px;
  transition: all .15s ease;
}

.epa-chat-btn-ghost:hover,
.epa-chat-btn-ghost:focus-visible {
  background: rgba(255,255,255,.15);
  color: #fff;
  outline: none;
}

.epa-chat-chips-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: var(--sand-tint);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

.epa-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 14px;
  background: #fff;
  color: var(--forest);
  border: 1px solid rgba(14,40,24,.18);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}

.epa-chip:hover,
.epa-chip:focus-visible {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
  outline: none;
}

.epa-chat-messages {
  flex: 1 1 auto;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fbfbf9;
}

.epa-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 92%;
}

.epa-chat-msg-bot {
  align-self: flex-start;
}

.epa-chat-msg-user {
  align-self: flex-end;
}

.epa-chat-bubble {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.epa-chat-msg-bot .epa-chat-bubble {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(0,0,0,.03);
}

.epa-chat-msg-user .epa-chat-bubble {
  background: var(--forest);
  color: #fff;
  border-bottom-right-radius: 2px;
}

.epa-chat-card {
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-size: 12.5px;
}

.epa-chat-card-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.epa-chat-checklist {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.epa-chat-checklist-item {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  background: #f8f8f6;
  border-radius: 6px;
  font-size: 12px;
}

.epa-chat-draft-box {
  margin: 8px 0;
  padding: 10px;
  background: #f5f6f4;
  border: 1px dashed rgba(14,40,24,.25);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: #1e2920;
}

.epa-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.epa-chat-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s ease;
}

.epa-chat-action-btn:hover,
.epa-chat-action-btn:focus-visible {
  background: #f0f0eb;
  border-color: var(--forest);
  outline: none;
}

.epa-chat-action-btn-primary {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
}

.epa-chat-action-btn-primary:hover {
  background: #143823;
}

.epa-chat-action-btn.is-done {
  background: #eef7f0;
  color: #1f5e33;
  border-color: #8ed0a4;
  cursor: default;
}

.epa-chat-cautions {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fcf6e8;
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  font-size: 11.5px;
  color: #5c4309;
}

.epa-chat-cautions ul {
  margin: 4px 0 0;
  padding-left: 16px;
}

.epa-chat-loading {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.epa-chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--forest);
  opacity: .4;
  animation: epaChatBounce .8s infinite ease-in-out;
}

.epa-chat-dot:nth-child(2) { animation-delay: .15s; }
.epa-chat-dot:nth-child(3) { animation-delay: .3s; }

@keyframes epaChatBounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: .3; }
  40% { transform: scale(1.2); opacity: 1; }
}

.epa-chat-form {
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid var(--line);
}

.epa-chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #f8f8f6;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 6px 4px 12px;
}

.epa-chat-input-wrap:focus-within {
  border-color: var(--forest);
  box-shadow: 0 0 0 2px rgba(14,40,24,.12);
}

.epa-chat-input-wrap textarea {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: 6px 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  resize: none;
  max-height: 100px;
  outline: none;
}

.epa-chat-send-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--forest);
  color: #fff;
  cursor: pointer;
  flex: 0 0 32px;
  transition: all .15s ease;
}

.epa-chat-send-btn:hover,
.epa-chat-send-btn:focus-visible {
  background: var(--gold);
  color: #241a05;
  outline: none;
}

.epa-chat-send-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  margin-left: 2px;
}

.epa-chat-footer-note {
  margin-top: 6px;
  text-align: center;
  font-size: 10.5px;
  color: var(--muted);
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1000px) {
  /* The sidebar becomes a header. Its nav is one horizontally scrollable strip
     rather than a wrapped block: wrapping five items over three lines spent
     more than half the first screen of a phone on navigation before any
     content appeared. */
  .app { display: block; }
  .app-sidebar {
    width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: 0 10px; padding-bottom: 0;
  }
  .app-sidebar .flag-rule { width: 100%; }
  .app-sidebar .brand { border-bottom: 0; padding: 10px 14px; gap: 9px; }
  .app-sidebar .brand-mark { width: 32px; height: 32px; }
  .app-sidebar .brand-text strong { font-size: 12.5px; }
  .app-sidebar .brand-text small { font-size: 9px; }

  /* Now the disclosure is a real box: a full-width bar under the brand row,
     with the links listed beneath it once opened. */
  .nav-menu {
    display: block; order: 3; flex: 1 1 100%;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .nav-toggle {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 16px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--on-dark);
    list-style: none;                    /* Firefox draws a triangle otherwise */
  }
  .nav-toggle::-webkit-details-marker { display: none; }   /* and Safari draws one */
  .nav-toggle:hover { background: rgba(255, 255, 255, .06); }
  .nav-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

  /* Both marks ship; CSS shows whichever matches the state, so the swap needs
     no script and cannot fall out of step with the disclosure. */
  .nav-toggle .icon { width: 19px; height: 19px; }
  .nav-toggle-shut { display: none; }
  .nav-menu[open] .nav-toggle-open { display: none; }
  .nav-menu[open] .nav-toggle-shut { display: block; }

  .app-nav {
    flex-direction: column; gap: 2px;
    padding: 0 10px 8px; overflow: visible;
  }
  .app-nav a { padding: 11px 12px; }

  .sidebar-note { display: none; }
  .sidebar-account { margin-left: auto; border-top: 0; padding: 8px 14px; }
  .sidebar-account .name { font-size: 11.5px; }

  /* The top bar's controls belong to the menu on a phone, so they are hidden
     with it and revealed with it. The rule is written as "hide it while the
     menu is closed" rather than "show it while the menu is open" on purpose: a
     browser without :has() drops the selector and simply leaves the bar where
     it has always been, rather than losing Sign out altogether. */
  .app:has(.nav-menu:not([open])) .app-topbar { display: none; }

  .app:has(.nav-menu[open]) .app-topbar {
    background: var(--forest); color: var(--on-dark);
    border-bottom: 0; padding: 0 12px 14px; gap: 10px 12px;
  }
  .app:has(.nav-menu[open]) .app-topbar .spacer { display: none; }
  .app:has(.nav-menu[open]) .app-topbar .lang { order: 1; color: var(--on-dark-faint); }
  .app:has(.nav-menu[open]) .app-topbar .inline-form { order: 2; margin-left: auto; }
  .app:has(.nav-menu[open]) .app-topbar .link-button { color: var(--on-dark-muted); }
  .app:has(.nav-menu[open]) .app-topbar .link-button:hover { color: #fff; }
  .app:has(.nav-menu[open]) .app-topbar .button {
    order: 3; flex: 1 1 100%;
    background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff;
  }
  .app:has(.nav-menu[open]) .app-topbar .button:hover { background: rgba(255, 255, 255, .18); }

  .app-topbar { position: static; padding: 10px 18px; }
  .app-content { padding: 18px 18px 40px; }
}

@media (max-width: 860px) {
  .auth-split { display: block; min-height: 0; }
  .auth-brand { width: auto; padding: 28px 24px 32px; }
  .auth-pitch { margin-top: 26px; }
  .auth-pitch h1 { font-size: 25px; }
  .auth-form { padding: 32px 24px 48px; }
  .auth-form-inner { max-width: none; }
  .hero-body { padding: 32px 0 40px; }
  .application-wizard-head { display: block; }
  .wizard-progress { margin-top: 16px; }
  .application-start-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .portal-mobile-nav {
    position: fixed; z-index: 900; left: 12px; right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 66px; padding: 6px 7px;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 22px;
    background: rgba(7, 31, 19, .94); color: rgba(255, 255, 255, .72);
    box-shadow: 0 16px 42px rgba(3, 15, 8, .34), 0 2px 10px rgba(3, 15, 8, .22);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .portal-mobile-nav.is-signed-in { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .portal-mobile-nav a {
    min-width: 0; min-height: 52px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    border-radius: 15px; color: inherit; text-decoration: none;
    font-size: 9.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  }
  .portal-mobile-nav a:hover { color: #fff; text-decoration: none; }
  .portal-mobile-nav a[aria-current="page"] { color: var(--gold-bright); background: rgba(255, 255, 255, .08); }
  .portal-mobile-nav .icon { width: 21px; height: 21px; }
  .portal-mobile-nav .portal-mobile-nav-create { overflow: visible; }
  .portal-mobile-nav-create-mark {
    width: 38px; height: 38px; margin-top: -21px; display: grid; place-items: center;
    border: 4px solid var(--paper); border-radius: 50%;
    background: var(--gold); color: var(--forest-dark);
    box-shadow: 0 7px 18px rgba(3, 15, 8, .34); font-size: 25px; font-weight: 500;
  }
  .portal-mobile-nav-create[aria-current="page"] .portal-mobile-nav-create-mark { background: var(--gold-bright); }
  .has-portal-mobile-nav { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .has-portal-mobile-nav .app-content { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

  /* The dock replaces the applicant sidebar's route list on a phone. Keep the
     compact account header and sign-out control above the page. */
  .has-portal-mobile-nav .app-sidebar .nav-menu { display: none; }
  .has-portal-mobile-nav .app-topbar,
  .has-portal-mobile-nav .app:has(.nav-menu[open]) .app-topbar {
    display: flex; position: static; padding: 8px 14px;
    background: var(--surface); color: var(--muted); border-bottom: 1px solid var(--line);
  }
  .has-portal-mobile-nav .app-topbar > .button { display: none; }
  .has-portal-mobile-nav .app-topbar .lang { color: var(--muted); }
  .has-portal-mobile-nav .app-topbar .link-button { color: var(--green); }
}

@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .recovery-auth-shell { padding: 24px 14px; }
  .recovery-auth-shell .auth-card { padding: 24px 20px; }

  /* iOS Safari zooms the whole page when a field smaller than 16px takes
     focus, and never zooms back out. Every control gets 16px on a phone —
     the one place the type scale is not ours to choose. */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=search], input[type=tel], select, textarea,
  .listing-search-field input[type=search],
  .epa-chat-input-wrap textarea {
    font-size: 16px;
  }

  /* Page headings and their actions stack, and the action goes full width so it
     is reachable with a thumb rather than pinned to a far corner. */
  .page-head, .panel-head { gap: 12px; }
  .page-head .actions, .panel-head .actions { width: 100%; }
  .page-head .actions .button, .panel-head .actions .button { flex: 1 1 auto; }
  h1 { font-size: 19px; }

  /* Search fills the row; its button sits beside it rather than below. */
  .listing-bar { gap: 10px; }
  .listing-search { width: 100%; flex-wrap: nowrap; }
  .listing-search-field { min-width: 0; }
  .listing-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .pager { margin-left: 0; justify-content: center; }
  .listing-per-page { margin-left: 0; text-align: center; }
  .listing-count { text-align: center; }

  .actions .button-block { width: 100%; }
  .amount-due { flex-wrap: wrap; }
  .hero { min-height: 0; }
  .hero-brand-name { font-size: 14px; }
  .hero-nav { gap: 14px; }
  .hero-badges li { white-space: normal; }
  .hero .lede { font-size: 15px; }
  .hero-credit { text-align: left; }
  .footer-row { align-items: flex-start; }
  .panel { padding: 18px; }
  .service-bar { padding: 8px 18px; font-size: 11px; }
  .service-bar .domain { display: none; }
  th, td { padding: 10px 14px; }
  .band { padding: 40px 0; }
  .section-head h2 { font-size: 22px; }
  .epa-chat-container { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .epa-chat-window { right: 0; bottom: 58px; width: calc(100vw - 24px); height: min(520px, calc(100vh - 80px)); }
  .notification-page-head { align-items: start; }
  .notification-summary-grid { grid-template-columns: 1fr; }
  .notification-stat { padding: 12px 14px; }
  .notification-item { grid-template-columns: 36px minmax(0, 1fr); gap: 11px; padding: 15px 14px; align-items: start; }
  .notification-event-icon { width: 36px; height: 36px; }
  .notification-meta time { width: 100%; margin-left: 0; }
  .notification-action { grid-column: 2; justify-self: start; }
  .application-family-grid { grid-template-columns: 1fr; }
  .application-family-card { padding: 14px; }
  .application-route-form .panel { padding: 18px; }
  .permit-route-help, .route-preview, .application-document-checklist ul { grid-template-columns: 1fr; }
  .route-preview > strong { grid-column: auto; }
  .application-wizard-actions { flex-wrap: wrap; }
  .application-wizard-actions .u-grow { display: none; }
  .application-wizard-actions .button { flex: 1 1 100%; text-align: center; justify-content: center; }
}

/* --- tables on a phone ---------------------------------------------------
   A row becomes a card and each cell states its own column, so a six-column
   list is read down the screen instead of dragged across it. Only tables
   marked .table-stack change: a table that is genuinely a grid of figures is
   better left scrolling than folded into a column of labels. */

@media (max-width: 620px) {
  .table-stack thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }

  .table-stack tr {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface); padding: 4px 0; margin: 0 0 10px;
  }
  .table-stack tr:last-child { margin-bottom: 0; }
  .table-stack tr.is-overdue { background: #fef4f3; border-color: var(--red-line); }

  .table-stack td {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 2px 14px; border: 0; padding: 7px 14px; text-align: left;
  }
  /* The value sits opposite its label; anything secondary — a sub-line, a
     reference under a name — drops to its own line underneath rather than
     fighting the value for the same row. Matching any block child rather than
     a list of class names keeps this working as views are edited. */
  .table-stack td > .strong { flex: 1 1 auto; text-align: right; }
  .table-stack td > div,
  .table-stack td > .sub { flex: 1 1 100%; text-align: right; }
  .table-stack td { overflow-wrap: break-word; min-width: 0; }
  .table-stack td::before {
    content: attr(data-label);
    flex: none; font-size: 11px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em;
  }
  /* A cell with nothing to label is a full-width row of its own. */
  .table-stack td[data-label=""]::before { content: none; }
  .table-stack td.numeric { text-align: right; }

  /* The first cell is the row's identity, so it reads as a heading. */
  .table-stack td:first-child {
    border-bottom: 1px solid var(--line-soft); padding-bottom: 9px; margin-bottom: 2px;
  }

  /* A totals row keeps its label and figure on one line — that pairing is the
     whole point of it. */
  .table-stack tfoot { display: block; }
  .table-stack tfoot tr {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; border: 0; background: none; padding: 0; margin: 4px 0 0;
  }
  .table-stack tfoot th, .table-stack tfoot td {
    display: block; padding: 4px 14px; text-align: left; border: 0; white-space: nowrap;
  }
  .table-stack tfoot th { background: none; text-transform: none; font-size: 13px; letter-spacing: 0; }
  .table-stack tfoot td { text-align: right; }

  /* Nothing scrolls sideways once the rows are stacked. */
  .table-scroll:has(.table-stack) { overflow-x: visible; }
}

/* --- touch targets -------------------------------------------------------
   Sized by input device, not by screen width: a small tablet with a mouse does
   not need 44px targets, and a large phone does. */

@media (pointer: coarse) {
  .button { min-height: 44px; }
  .button-small { min-height: 38px; }
  .pills a, .pager a, .pager span, .listing-sort a {
    min-height: 38px; display: inline-flex; align-items: center;
  }
  .app-nav a { min-height: 40px; }
  .link-button { min-height: 38px; display: inline-flex; align-items: center; }
  .choice, .pay-option { padding-top: 16px; padding-bottom: 16px; }
  thead th a.sortable { min-height: 34px; }

  /* The reference in the first cell is how a row is opened — on a phone it is
     the most-tapped link on the page, so it gets a real target rather than the
     height of its own text. */
  td.ref a { display: inline-flex; align-items: center; min-height: 34px; }
  .listing-per-page a,
  .listing-per-page .is-current {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 6px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .app-nav a, .pills a { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
}

@media print {
  .app-sidebar, .app-topbar, .site-header, .site-footer, .actions, .skip-link, .pills,
  .epa-chat-container, .portal-mobile-nav, .application-tab-list, .admin-tab-list, dialog.modal-dialog { display: none !important; }
  .application-tabs.js-tabs > .application-tab-panel[hidden],
  .admin-tabs.js-tabs > .admin-tab-panel[hidden] { display: block !important; }
  .app-content { padding: 0; }
  body { background: #fff; }
  .panel { border: 1px solid #ccc; box-shadow: none; }
}

/* --- documents, obligations, plan stages (FR-1005, FR-1008, FR-1009) ------ */

.obligations { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 4px; }
.obligations-lead { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.obligation {
  display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
}
.obligation:hover, .obligation:focus { text-decoration: underline; }
.obligation-warn { background: var(--amber-100); color: var(--amber-600); border-color: #f0d68a; }
.obligation-bad  { background: var(--red-100);   color: var(--red);   border-color: #edb9bf; }
.obligation-info { background: var(--blue-100);  color: var(--blue-700);  border-color: #b9cbf6; }

.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stage { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; }
.stage-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.stage-done .stage-dot { background: var(--green-600); border-color: var(--green-600); }
.stage-now  .stage-dot { background: #fff; border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); }
.stage-now  .stage-name { font-weight: 700; }
.stage-stopped .stage-dot { background: var(--red); border-color: var(--red); }
.stage-todo .stage-name { color: var(--ink-muted); }

.file-list { list-style: none; margin: 0; padding: 0; }
.file { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.file:last-child { border-bottom: 0; }
.file-name { font-weight: 600; word-break: break-word; }
.file .link-button { color: var(--red); }
input[type=file] { font: inherit; font-size: 14px; }

.correction, .report-request { padding: 12px 0; border-bottom: 1px solid var(--line); }
.correction:last-of-type, .report-request:last-of-type { border-bottom: 0; }
.correction.is-open { background: var(--red-100); margin: 0 -8px; padding: 12px 8px; border-radius: 6px; }

/* --- human resources and reporting --------------------------------------- */
.hr-tab-list {
  display: flex; gap: 4px; overflow-x: auto; margin: 10px 0 18px;
  padding: 0 2px; border-bottom: 1px solid var(--line); scrollbar-width: none;
}
.hr-tab { flex: 0 0 auto; margin-bottom: -1px; padding: 11px 14px; color: var(--muted);
  border-bottom: 3px solid transparent; font-size: 13px; font-weight: 700; text-decoration: none; }
.hr-tab:hover { color: var(--green); background: var(--green-tint); }
.hr-tab.is-active { color: var(--green); background: var(--surface); border-bottom-color: var(--green); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; align-items: end; }
.form-grid label, .searchbar label { display: grid; gap: 6px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.form-grid .field-wide { grid-column: 1 / -1; }
.table-wrap { overflow-x: auto; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-form { flex-wrap: wrap; gap: 6px; align-items: center; }
.inline-form input { min-width: 130px; width: auto; }
.searchbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 14px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } .form-grid .field-wide { grid-column: auto; } }

/* --- system oversight ---------------------------------------------------- */
.oversight-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  padding: 18px;
}
.oversight-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface);
}
.oversight-check.is-good { border-left-color: var(--green); }
.oversight-check.is-warn { border-left-color: var(--amber-600); }
.oversight-check.is-bad  { border-left-color: var(--red); }
.oversight-check-value {
  min-width: 42px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.oversight-check strong { display: block; font-size: 13px; }
.oversight-check p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.stack-form { display: grid; gap: 7px; min-width: 210px; }
.stack-form input { min-width: 0; width: 100%; }

@media (max-width: 680px) {
  .oversight-check-grid { grid-template-columns: 1fr; padding: 12px; }
  .oversight-check { padding: 12px; }
}

/* --- staff user management ------------------------------------------------ */
.credential-reveal {
  border: 1px solid var(--gold-line);
  background: var(--gold-tint);
  border-radius: var(--radius-xl);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.credential-reveal h2 { margin: 0 0 6px; font-size: 16px; }
.credential-reveal p { margin: 6px 0; }
.credential-reveal .credential-value {
  display: inline-block;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 8px 14px;
  margin: 6px 0;
  background: var(--surface);
  border: 1px dashed var(--gold-line);
  border-radius: var(--radius);
  user-select: all;
}
.staff-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 16px;
  margin: 0 0 14px;
}
.staff-facts div { font-size: 13px; }
.staff-facts dt { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.staff-facts dd { margin: 2px 0 0; }
.staff-security { display: grid; gap: 12px; }
.staff-security .security-action {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 10px 0; border-top: 1px solid var(--hair);
}
.staff-security .security-action:first-child { border-top: 0; padding-top: 0; }
.staff-security .security-action p { margin: 0; }
.staff-security .security-action form { margin: 0; }
.staff-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.staff-flags .badge { font-size: 10.5px; }

/* --- operational staff import ------------------------------------------- */
.staff-import-inset { padding: 18px; }
.staff-import-margin { margin: 18px; }

@media (max-width: 680px) {
  .staff-import-inset { padding: 12px; }
  .staff-import-margin { margin: 12px; }
}

/* --- a folded form inside a panel (the transfer form) ------------------- */
details.fold > summary { cursor: pointer; font-weight: 600; color: var(--green); list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: '›'; display: inline-block; margin-right: 6px; transition: transform .15s; }
details.fold[open] > summary::before { transform: rotate(90deg); }

/* --- export menu (CSV / PDF), a native details dropdown ----------------- */
.export-menu { position: relative; display: inline-block; }
.export-menu > summary { list-style: none; cursor: pointer; }
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu > summary::after { content: ' ▾'; font-size: .85em; }
.export-menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 168px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 4px; display: grid; gap: 2px;
}
.export-menu-list a {
  display: block; padding: 8px 12px; border-radius: var(--radius); font-size: 13px;
  color: var(--ink); text-decoration: none;
}
.export-menu-list a:hover { background: var(--paper); text-decoration: none; }

/* --- page preloader ------------------------------------------------------
   The EPA mark under a turning ring, over an opaque ground, covering the page
   from first paint until it has loaded. Additive: it never hides content, only
   sits above it and fades away. With JavaScript, app.js removes it on load and
   re-shows it while the next page is fetched. Without JavaScript, the floor
   animation fades it on its own after a few seconds so nothing is ever left
   behind a permanent curtain. */
.page-preloader {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  opacity: 1; visibility: visible;
  transition: opacity .4s ease, visibility 0s linear .4s;
  animation: epaPreloaderFloor .01s linear 6s forwards;
}
.page-preloader.is-done {
  opacity: 0; visibility: hidden; pointer-events: none;
  animation: none;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
@keyframes epaPreloaderFloor { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.page-preloader-mark { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.page-preloader-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--green-line);
  border-top-color: var(--green);
  animation: epaPreloaderSpin .9s linear infinite;
}
.page-preloader-logo {
  width: 58px; height: 58px; object-fit: contain;
  animation: epaPreloaderPulse 1.6s ease-in-out infinite;
}
@keyframes epaPreloaderSpin  { to { transform: rotate(360deg); } }
@keyframes epaPreloaderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .78; } }

@media (prefers-reduced-motion: reduce) {
  .page-preloader-ring, .page-preloader-logo { animation: none; }
}

/* The staff surface's ground is the same warm white token, so the cover reads
   consistently on both surfaces; the ring stays EPA green either way. */