/* 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:    #f9f8f7;
  --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;

  /* Hover and pressed washes, so they can turn light on a dark surface. */
  --wash:        rgba(0, 0, 0, .045);
  --wash-strong: rgba(0, 0, 0, .07);
  color-scheme: light;
}

/* --- dark appearance (14 October 2026) -----------------------------------
   The same tokens, re-pointed. Chosen from the account menu, which pins
   <html data-theme="dark">, or by the device when nothing is pinned
   (includes/http.php). The sidebar and the authority's greens are already
   dark, so they stay; paper, ink and the tints turn over. The two blocks
   are the same list on purpose: a media query cannot be combined with an
   attribute selector in one rule, and a mixin would need a build step. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --green:        #2f8f55;
    --green-dark:   #27794a;
    --green-bright: #3fb573;
    --green-bright-dark: #35a064;
    --green-tint:   #16271d;
    --green-pale:   #131f18;
    --green-line:   #2a4a36;
    --green-ink:    #a9d9bb;
    --gold-tint:    #2a2314;
    --gold-line:    #5a4820;
    --gold-ink:     #ecc77a;
    --red:          #e0655a;
    --red-tint:     #2f1a18;
    --red-line:     #6a2e29;
    --blue:         #5aa3e6;
    --blue-tint:    #142030;
    --blue-line:    #284564;
    --ink:        #e7ebe8;
    --muted:      #a8b1aa;
    --faint:      #7f8982;
    --line:       #2b312d;
    --line-soft:  #222824;
    --hair:       #252b27;
    --field-line: #3c443e;
    --surface:    #171b18;
    --paper:      #101311;
    --paper-2:    #1c211d;
    --sand:       #1f2521;
    --shadow-lg:  0 16px 40px rgba(0, 0, 0, .55);
    --wash:        rgba(255, 255, 255, .06);
    --wash-strong: rgba(255, 255, 255, .1);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --green:        #2f8f55;
  --green-dark:   #27794a;
  --green-bright: #3fb573;
  --green-bright-dark: #35a064;
  --green-tint:   #16271d;
  --green-pale:   #131f18;
  --green-line:   #2a4a36;
  --green-ink:    #a9d9bb;
  --gold-tint:    #2a2314;
  --gold-line:    #5a4820;
  --gold-ink:     #ecc77a;
  --red:          #e0655a;
  --red-tint:     #2f1a18;
  --red-line:     #6a2e29;
  --blue:         #5aa3e6;
  --blue-tint:    #142030;
  --blue-line:    #284564;
  --ink:        #e7ebe8;
  --muted:      #a8b1aa;
  --faint:      #7f8982;
  --line:       #2b312d;
  --line-soft:  #222824;
  --hair:       #252b27;
  --field-line: #3c443e;
  --surface:    #171b18;
  --paper:      #101311;
  --paper-2:    #1c211d;
  --sand:       #1f2521;
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, .55);
  --wash:        rgba(255, 255, 255, .06);
  --wash-strong: rgba(255, 255, 255, .1);
}

*, *::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: var(--faint); padding: 44px 0 32px; margin-top: auto; }
.site-footer a, .site-footer .link-button { color: var(--faint); 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[hidden] { display: none; }
.app-nav .count-due  { background: var(--gold); color: var(--ink); }
.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: var(--ink);
  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); }

/* The copy button app.js puts beside a permit number (epaCopyableRef). Quiet
   until the number is hovered or the button is focused, so a register of forty
   rows is not forty icons competing with the numbers themselves; always there
   for touch, where there is no hover to reveal it. */
.copy-ref {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin-left: 4px; vertical-align: middle;
  border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer;
  opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.copy-ref .icon { width: 13px; height: 13px; }
.has-copy:hover .copy-ref, .has-copy:focus-within .copy-ref, .copy-ref:focus-visible, .copy-ref.is-done, .copy-ref.is-failed { opacity: 1; }
.copy-ref:hover { color: var(--ink); border-color: var(--line); }
.copy-ref.is-done { color: var(--green); }
.copy-ref.is-failed { color: var(--red); }

/* Show password: the eye button app.js puts inside a sign-in password box
   marked data-reveal. A 44px target for thumbs; the box keeps room for it so
   the last characters never run under the icon. Edge's own reveal eye is
   hidden here so the box never shows two. */
.password-reveal { position: relative; display: block; }
.password-reveal input[type] { padding-right: 46px; }
.password-reveal input::-ms-reveal, .password-reveal input::-ms-clear { display: none; }
.password-reveal-toggle {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 0 var(--radius) var(--radius) 0;
  background: none; color: var(--muted); cursor: pointer;
}
.password-reveal-toggle .icon { width: 18px; height: 18px; }
.password-reveal-toggle:hover { color: var(--ink); }
.password-reveal-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }
.password-reveal-toggle[aria-pressed="true"] { color: var(--green); }
@media (hover: none) { .copy-ref { opacity: .55; } }
/* A number that stands alone - the application's own, at the head of its page
   and on the signing screens - shows its button all the time: there is one,
   and it is the number the reader came to copy. */
.copy-ref-shown .copy-ref { opacity: 1; border-color: var(--line); }
h1.copy-ref-shown .copy-ref { width: 30px; height: 30px; margin-left: 8px; }
h1.copy-ref-shown .copy-ref .icon { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .copy-ref { transition: none; } }

/* --- 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; }

/* --- turnaround (application page) ------------------------------------- */
.turnaround-figures       { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 10px; }
.turnaround-figures div   { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.turnaround-figures dt    { font-size: 12px; color: var(--muted); margin: 0 0 2px; }
.turnaround-figures dd    { margin: 0; font-weight: 600; font-size: 16px; }
.plan-turnaround          { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.plan-turnaround-total    { font-weight: 600; }

.panel-note { padding: 0 16px 10px; margin: 0; }

/* --- public holidays (Administration) ----------------------------------- */
.holiday-add            { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 4px 0 16px; }
.holiday-add .field     { margin: 0; }
.holiday-add-name       { flex: 1 1 240px; }
tr.is-past td           { color: var(--muted); }

/* --- EPA's tariff (includes/tariff.php) ------------------------------------ */
.tariff-actions         { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.tariff-filter          { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 4px 0 16px; }
.tariff-filter .field   { margin: 0; flex: 0 1 200px; }
.tariff-filter .field:first-of-type { flex: 1 1 240px; }
.tariff-table .tariff-option { display: block; font-weight: 600; }
.tariff-table td:first-child { min-width: 260px; }
.tariff-addons          { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.tariff-addon           { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tariff-addon .input-qty { width: 110px; }
.tariff-lines td, .tariff-lines th { vertical-align: top; }
/* What the application's own words point at, for the officer to confirm. */
.tariff-match           { border-left: 3px solid var(--gold); background: var(--gold-tint); border-radius: var(--radius);
                          padding: 10px 12px; display: grid; gap: 4px; }
.tariff-match ul        { margin: 6px 0 0; padding-left: 18px; }
/* A multi-select: a closed box listing what is chosen, opening to a list of ticks. */
.multiselect            { position: relative; max-width: 100%; }
.multiselect > summary  { list-style: none; cursor: pointer; border: 1.5px solid var(--field-line); border-radius: var(--radius); background: var(--surface);
                          padding: 10px 36px 10px 13px; font-size: 13.5px; color: var(--ink); position: relative; }
.multiselect > summary::-webkit-details-marker { display: none; }
.multiselect > summary::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink); font-size: 14px; }
.multiselect[open] > summary { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26, 107, 60, .12); }
.multiselect > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.multiselect-options    { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 4px; max-height: 280px; overflow-y: auto;
                          background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px;
                          box-shadow: 0 8px 24px rgba(0, 0, 0, .08); display: grid; gap: 2px; }
.multiselect-options .label-choice { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.fee-estimate           { margin-top: 12px; }
.fee-estimate h3        { margin: 12px 0 4px; font-size: 1rem; }
.fee-estimate .fee-estimate-total { font-weight: 600; }
.holiday-add + .table-scroll .nowrap, td.nowrap { white-space: nowrap; }

/* --- authenticator enrolment -------------------------------------------- */
/* The QR is drawn into the page as SVG, so it is sized and framed here rather
   than by the encoder: a white quiet zone is part of the code, not decoration. */
.qr-enrol        { margin: 0 0 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qr-enrol .qr    { width: 190px; height: 190px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 6px; }
.qr-enrol figcaption { text-align: center; }

/* --- 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: var(--red-tint); }
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: var(--surface); }
.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: var(--surface); }
.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; }

.hs-fee-choices { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.hs-fee-choice { display: flex; align-items: flex-start; gap: 6px; padding: 12px; margin: 0; font-weight: 400; border-bottom: 1px solid var(--line); }
.hs-fee-choice:last-child { border-bottom: 0; }
.hs-fee-choice > span { min-width: 0; overflow-wrap: anywhere; }
.hs-fee-choice > span > span { display: block; margin-top: 3px; }

.reference-lookup { position: relative; }
.draft-save-status { position: sticky; top: 72px; z-index: 20; padding: 12px 16px; box-shadow: 0 3px 12px rgba(0,0,0,.06); font-size: 13px; }
.draft-save-status .hint:empty { display: none; }
.draft-save-status[hidden], .draft-save-status [hidden] { display: none; }
.reference-lookup input { padding-right: 40px; }
.reference-toggle { position: absolute; right: 3px; top: 3px; bottom: 3px; width: 34px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.reference-options { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.reference-option { padding: 10px 13px; cursor: pointer; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.reference-option:last-child { border-bottom: 0; }
.reference-option span { display: block; font-size: 12px; margin-top: 3px; }
.reference-option:hover, .reference-option[aria-selected="true"] { background: var(--paper); }

/* 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; }

/* The reason is the column a HOD reads the register for, so it gets room to
   be a sentence rather than a truncated phrase. */
.refusal-reason { max-width: 34rem; white-space: normal; }

/* The refusal letter as it prints: a letter, not a certificate. Wide margins,
   one column, and an unsigned copy that says so on its face — a printout must
   never pass for a decision the applicant can rely on. */
.letter-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.letter-toolbar .spacer { flex: 1; }
.letter {
  max-width: 46rem; margin: 32px auto 64px; padding: 0 24px;
  font-size: 15px; line-height: 1.6;
}
.letter.is-draft { opacity: .96; }
.letter-stamp {
  border: 1px dashed var(--red-line); color: var(--red); background: var(--red-tint);
  padding: 8px 12px; border-radius: 3px; font-size: 12.5px; margin: 0 0 24px;
  text-align: center; letter-spacing: .04em; text-transform: uppercase;
}
.letter-head { display: flex; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.letter-logo { width: 54px; height: auto; }
.letter-agency { margin: 0; font-weight: 700; font-size: 16px; }
.letter-office { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.letter-ref { margin: 0 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.letter-ref span:first-child { font-weight: 700; }
.letter-to { display: flex; flex-direction: column; gap: 2px; font-style: normal; margin: 26px 0 0; font-size: 14px; }
.letter-subject { font-size: 17px; margin: 26px 0 0; text-decoration: underline; text-underline-offset: 4px; }
.letter-body p { margin: 16px 0 0; }
.letter-reason {
  margin: 12px 0 0; padding: 12px 16px; border-left: 3px solid var(--line);
  background: var(--surface-2); white-space: pre-wrap;
}
.letter-sign { margin-top: 40px; }
.letter-signature {
  margin: 0; font-size: 26px; line-height: 1;
  /* The same hand the certificate signs with, so a permit and a refusal from
     the same office look like they came from the same office. */
  font-family: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', 'URW Chancery L', 'Brush Script MT', cursive;
}
.letter-signature-pending { margin: 0; color: var(--muted); font-style: italic; }
.letter-signature-title { margin: 8px 0 0; font-weight: 600; border-top: 1px solid var(--ink); display: inline-block; padding-top: 4px; }
@media print {
  .letter-toolbar { display: none; }
  .letter { margin: 0; max-width: none; }
}

/* The CEO's own queue sits beside the status pills and is marked as its own
   kind of question: work sent down from the secretariat, not a stage. */
.pills a.pill-ceo { border-color: var(--gold-line); color: var(--gold-ink); }
.pills a.pill-ceo[aria-current="page"] { background: var(--gold-tint); border-color: var(--gold-line); }

/* Where the undertaking is, on a queue row and a board card (BTOR §3.3). Quiet
   by design: it is what tells two applications in the same sector apart, not
   the first thing to read on the row. */
.mail-row-place,
.ipms-board-place {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin: 2px 0 0;
}
/* The desk that holds the application and who is working on it. */
.mail-row-holder,
.ipms-board-holder {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 2px 0 0;
}

/* Received / refused / issued, one panel per population (BTOR §3.3). The two
   panels are deliberately identical in shape: the heading is what tells a
   regional reader which figures are theirs and which are the country's. */
.totals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.totals-panel { padding: 18px 20px; }
.totals-title { margin: 0; font-size: 15px; }
.totals-scope { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.totals-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.totals-figures div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.totals-figures dt {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.totals-figures dd {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The overview map (includes/ipms/map.php). Shades and pins are classes, not
   inline styles: the surface's Content-Security-Policy allows no inline style. */
.region-map-panel { margin-top: 14px; }
.region-map-layout {
  display: grid;
  grid-template-columns: minmax(260px, 5fr) minmax(280px, 4fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1180px) { .region-map-layout { grid-template-columns: 1fr; } .region-map { max-height: 440px; } }
.region-map-figure { margin: 0; }
.region-map { width: 100%; height: auto; max-height: 520px; display: block; }
.region-map-region { stroke: var(--surface); stroke-width: 1.2; stroke-linejoin: round; transition: fill .15s; }
.region-map-region:hover { fill: var(--gold-bright); }
.region-map-region.is-reader { stroke: var(--gold-ink); stroke-width: 2.2; }
.region-map-shade-0 { fill: var(--sand); }
.region-map-shade-1 { fill: #dfeee4; }
.region-map-shade-2 { fill: #bcdcc8; }
.region-map-shade-3 { fill: #8fc4a4; }
.region-map-shade-4 { fill: #4f9a6d; }
.region-map-shade-5 { fill: var(--green-dark); }
.region-map-labels text {
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.region-map-pins circle { fill: var(--flag-red); fill-opacity: .82; stroke: var(--surface); stroke-width: .7; pointer-events: none; }
/* A pin's colour is where its application stands; a ring, not a colour, marks a position an officer captured on site.
   Issued is violet, not green: the regions beneath are shaded green and a green pin is lost on them. */
.region-map-pins circle.is-pending,  .region-map-focus-pins circle.is-pending,  .region-map-state-key.is-pending .region-map-state-dot,  .region-map-tip-state.is-pending::before  { fill: #d97706; background: #d97706; }
.region-map-pins circle.is-approved, .region-map-focus-pins circle.is-approved, .region-map-state-key.is-approved .region-map-state-dot, .region-map-tip-state.is-approved::before { fill: #2563eb; background: #2563eb; }
.region-map-pins circle.is-issued,   .region-map-focus-pins circle.is-issued,   .region-map-state-key.is-issued .region-map-state-dot,   .region-map-tip-state.is-issued::before   { fill: #7e22ce; background: #7e22ce; }
.region-map-pins circle.is-rejected, .region-map-focus-pins circle.is-rejected, .region-map-state-key.is-rejected .region-map-state-dot, .region-map-tip-state.is-rejected::before { fill: #c0262d; background: #c0262d; }
.region-map-pins circle.is-closed,   .region-map-focus-pins circle.is-closed,   .region-map-state-key.is-closed .region-map-state-dot,   .region-map-tip-state.is-closed::before   { fill: #6b7280; background: #6b7280; }
.region-map-pins circle.is-verified { fill-opacity: 1; stroke: #111827; stroke-width: 1.2; }
/* The map opened larger: the same stage laid over the page as a modal, so its switches, pins and script are the ones already there. */
.region-map-stage.is-fullscreen { position: fixed; inset: 0; z-index: 1200; padding: 3vh 3vw; background: rgba(15, 23, 42, .62); }
.region-map-stage.is-fullscreen .region-map-figure { position: relative; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--surface); border-radius: 12px; box-shadow: 0 24px 60px rgba(3, 15, 8, .4); }
.region-map-stage.is-fullscreen .region-map { flex: 1 1 auto; min-height: 0; height: 100%; max-height: none; }
.region-map-stage.is-fullscreen .region-map-caption { flex: none; }
.region-map-is-full, .region-map-is-full body { overflow: hidden; }
.region-map-control svg { display: block; margin: auto; }
.region-map-control[aria-pressed="true"] { background: var(--green-dark, #155a32); color: #fff; }
.region-map-states { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.region-map-state-key { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; user-select: none; }
.region-map-state-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1.5px solid var(--surface); box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.region-map-tip-state::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.region-map-state-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.region-map-state-toggle.is-pending:not(:checked)  ~ .region-map-figure circle.is-pending,
.region-map-state-toggle.is-approved:not(:checked) ~ .region-map-figure circle.is-approved,
.region-map-state-toggle.is-issued:not(:checked)   ~ .region-map-figure circle.is-issued,
.region-map-state-toggle.is-rejected:not(:checked) ~ .region-map-figure circle.is-rejected,
.region-map-state-toggle.is-closed:not(:checked)   ~ .region-map-figure circle.is-closed { display: none; }
.region-map-state-toggle.is-pending:not(:checked)  ~ .region-map-figure .region-map-state-key.is-pending,
.region-map-state-toggle.is-approved:not(:checked) ~ .region-map-figure .region-map-state-key.is-approved,
.region-map-state-toggle.is-issued:not(:checked)   ~ .region-map-figure .region-map-state-key.is-issued,
.region-map-state-toggle.is-rejected:not(:checked) ~ .region-map-figure .region-map-state-key.is-rejected,
.region-map-state-toggle.is-closed:not(:checked)   ~ .region-map-figure .region-map-state-key.is-closed { opacity: .4; text-decoration: line-through; }
.region-map-state-toggle:focus-visible ~ .region-map-figure .region-map-states { outline: 2px solid var(--blue); outline-offset: 3px; }
.region-map-toggle-box.is-verified { background: transparent; border: 2px solid #111827; border-radius: 50%; opacity: 1; }
.region-map-verified-key { display: inline-flex; align-items: center; gap: 6px; }
.locate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.compliance-site { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 4px; }
.compliance-site legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.compliance-site .field-row .field { margin-bottom: 8px; }
.compliance-site-line .badge { vertical-align: 1px; }
.region-map-pins-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.region-map-pins-toggle:not(:checked) ~ .region-map-figure .region-map-pins { display: none; }
.region-map-stage { position: relative; }
.region-map-caption { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; }
.region-map-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.region-map-toggle-box { width: 12px; height: 12px; border-radius: 50%; background: #374151; opacity: .35; border: 1px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.region-map-pins-toggle:checked ~ .region-map-figure .region-map-toggle-box { opacity: .85; }
.region-map-pins-toggle:disabled ~ .region-map-figure .region-map-toggle { cursor: default; color: var(--muted); }
.region-map-pins-toggle:focus-visible ~ .region-map-figure .region-map-toggle-box { outline: 2px solid var(--blue); outline-offset: 2px; }
.region-map-credit { flex-basis: 100%; font-size: 11.5px; }
/* Zoom, focus and named pins (public/assets/js/ipms.js setupRegionMap). */
.region-map-figure { position: relative; }
.region-map-stage.js-map .region-map { cursor: grab; touch-action: none; }
.region-map-stage.js-map.is-dragging .region-map { cursor: grabbing; }
.region-map-stage.js-map .region-map-region { cursor: pointer; }
.region-map-stage.is-focused .region-map-region:not(.is-focus) { fill: var(--sand); fill-opacity: .55; pointer-events: none; }
.region-map-stage.is-focused .region-map-region.is-focus { stroke: var(--green-ink); stroke-width: 1.6; cursor: default; }
.region-map-stage.is-focused .region-map-region.is-focus:hover { fill: inherit; }
.region-map-stage.is-focused .region-map-pins, .region-map-stage.is-focused .region-map-labels { display: none; }
/* Streets under the outlines, once the reader is close enough to want them.
   The shading is what the map says at country scale; here the streets are, so
   the fills step back to a tint and the edges keep their line. */
.region-map-tiles image { image-rendering: auto; }
.region-map.has-tiles .region-map-region { fill-opacity: .22; stroke: var(--green-ink); stroke-width: .8; }
.region-map.has-tiles .region-map-region:hover { fill-opacity: .34; }
.region-map.has-tiles .region-map-labels text { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.region-map-controls { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.region-map-control {
  width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.region-map-control:hover { background: var(--paper); }
.region-map-focus { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.region-map-focus-pins a { cursor: pointer; }
.region-map-focus-pins circle { fill: var(--flag-red); fill-opacity: .8; stroke: var(--surface); vector-effect: non-scaling-stroke; stroke-width: 1; }
.region-map-focus-pins circle.is-verified { fill-opacity: 1; stroke: #111827; stroke-width: 2; }
.region-map-focus-pins a:hover circle, .region-map-focus-pins a:focus circle { fill: var(--gold); fill-opacity: 1; stroke: var(--ink); }
.region-map-focus-pins a:focus { outline: none; }
.region-map-tip {
  position: absolute; z-index: 3; max-width: 260px; padding: 8px 10px; background: var(--ink); color: var(--on-dark);
  border-radius: var(--radius); font-size: 12.5px; line-height: 1.35; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.region-map-tip strong { color: #fff; font-family: var(--numeric); }
.region-map-tip .muted { color: var(--on-dark-muted); }
.region-map-table tr[data-region-row] { cursor: pointer; }
.region-map-table tr[data-region-row]:hover td { background: var(--green-pale); }
.region-map-table tr.is-focus td { background: var(--green-tint); }
.region-map-table table { width: 100%; }
.region-map-table td, .region-map-table th { padding: 6px 8px; }
.region-map-table td:first-child { white-space: nowrap; }
.region-map-table tr.is-reader td { background: var(--gold-tint); }
.region-map-table tr.region-map-unplaced td { color: var(--muted); border-top: 1px solid var(--line); }
.region-map-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.08); }
.region-map-swatch.region-map-shade-0 { background: var(--sand); }
.region-map-swatch.region-map-shade-1 { background: var(--green-tint); }
.region-map-swatch.region-map-shade-2 { background: #bcdcc8; }
.region-map-swatch.region-map-shade-3 { background: #8fc4a4; }
.region-map-swatch.region-map-shade-4 { background: #4f9a6d; }
.region-map-swatch.region-map-shade-5 { background: var(--green-dark); }
.totals-figures dd.is-refused { color: var(--red); }
.totals-figures dd.is-issued { color: var(--green); }

/* Past reviews on the desk panel: a list of questions asked of other desks and
   what came back, so the reasons stay with the application rather than in the
   memory of whoever asked. */
.review-history { list-style: none; margin: 8px 0 0; padding: 0; }
.review-history li { padding: 8px 0; border-top: 1px solid var(--hair); }
.review-history li:first-child { border-top: 0; }

/* The Technical Review Committee gate on a stage that requires it: bordered,
   because it is a condition of completing the stage rather than another field
   on the way to it. */
.trc-block {
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: var(--gold-tint);
  padding: 14px 16px;
}
.trc-block legend { padding: 0 6px; color: var(--gold-ink); }
.trc-block .field { margin-top: 10px; }
.trc-block input[type="file"] { font-size: 12.5px; }

/* 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: var(--surface); }
.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-copy .toast-link { justify-self: start; font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.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); }
/* Money owed reads red (13 October 2026). */
.callout-bad {
  background: var(--red-tint); border: 1px solid var(--red-line);
  border-radius: var(--radius); padding: 13px 15px; color: var(--red);
}
.callout-bad .callout-icon { color: var(--red); }
.is-owed dt, .is-owed dd, .is-owed th, .is-owed td, .is-owed strong,
.fee-total.is-owed span, .amount-due.is-owed .value { color: var(--red); }

.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: var(--ink); 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: var(--surface); }
.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; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.mail-row-owed { font-size: 11.5px; color: var(--gold-ink); font-weight: 500; }

/* Supporting documents the applicant filed, marked in the queue and in the
   permit and licence registers (includes/documents.php). */
.attachment-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.attachment-mark .icon { width: 13px; height: 13px; }
td .attachment-mark { margin-left: 2px; vertical-align: 1px; }
.invoice-auto-mark { display: inline-flex; margin-left: 4px; vertical-align: -1px; color: var(--blue); }
.invoice-auto-mark .icon { width: 14px; height: 14px; fill: currentColor; }
.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: var(--wash-strong); 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: var(--wash-strong); 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: var(--surface); 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; }
.legacy-submission-record { min-width: 0; overflow-wrap: anywhere; }
.legacy-submission-record .legacy-submission { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 0 20px; }
.legacy-submission-record .legacy-submission dt,
.legacy-submission-record .legacy-submission dd { min-width: 0; padding: 9px 0; border-bottom: 1px solid var(--line, #e3e6ea); }
.legacy-submission-group { min-width: 0; margin: 20px 0; }
.legacy-submission-record .legacy-submission-heading { font-size: 14px; font-weight: 650; margin: 0 0 10px; }
.legacy-submission-record h3.legacy-submission-heading { padding: 10px 12px; background: var(--paper, #f5f7fa); border-radius: 6px; }
.legacy-submission-list { margin: 8px 0; padding-left: 24px; }
.legacy-submission-list > li { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line, #e3e6ea); border-radius: 8px; }
.legacy-submission-list > li::marker { color: var(--muted); font-size: 12px; }
.legacy-submission-list > li > .legacy-submission-group:first-child { margin-top: 0; }
.legacy-submission-list > li > .legacy-submission-group:last-child { margin-bottom: 0; }
@media (max-width: 540px) {
  .legacy-submission-record .legacy-submission { grid-template-columns: minmax(0, 1fr); }
  .legacy-submission-record .legacy-submission dt { padding-bottom: 0; border-bottom: 0; }
  .legacy-submission-record .legacy-submission dd { padding-top: 4px; }
  .legacy-submission-list > li { padding: 8px 10px; }
}

/* --- 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); }
/* The permit at the top of the application page (16 October 2026). */
.permit-held { margin: 0 0 18px; }
.permit-held h2 { margin: 0 0 10px; }
.download-wait-note { align-self: center; font-size: 12.5px; color: var(--muted); }
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }

/* --- document tiles (15 October 2026) -----------------------------------
   The application's Documents tab: each file a tile to pick up, not a line
   in a list. Links and forms as before, so nothing needs the script. */
.doc-tiles { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.doc-tile {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 148px;
  padding: 16px 16px 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl);
}
.doc-tile.is-issued { border-top: 4px solid var(--green); }
.doc-tile.is-unavailable { background: var(--paper); border-style: dashed; }
.doc-tile-glyph { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; background: var(--green-tint); color: var(--green-ink); margin-bottom: 4px; }
.doc-tile-glyph .icon { width: 18px; height: 18px; }
.doc-tile.is-unavailable .doc-tile-glyph { background: var(--sand); color: var(--muted); }
.doc-tile-kind { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.doc-tile-name { font-weight: 700; line-height: 1.35; word-break: break-word; color: var(--ink); text-decoration: none; }
a.doc-tile-name:hover { text-decoration: underline; }
.doc-tile-meta { font-size: 12.5px; color: var(--muted); }
.doc-tile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.doc-tile-actions .inline-form { margin: 0; }
.doc-tile-remove { color: var(--red); }
@media (max-width: 480px) { .doc-tiles { grid-template-columns: 1fr; } .doc-tile { min-height: 0; } }
.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: var(--ink); }
.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: var(--field-line); }
.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: var(--green); }

/* 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: var(--surface); }
.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: var(--paper-2); }
.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: var(--muted); }

.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 var(--line); 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: var(--muted); }

.landing .type-grid { gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.landing .type-card { background: var(--surface); border: 1px solid var(--line); 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: var(--muted); }
.agent-note {
  margin: 20px 0 0; background: var(--surface); border: 1px solid var(--gold-line); border-radius: 10px;
  padding: 16px 22px; font-size: 14px; line-height: 1.6; color: var(--gold-ink);
}
.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 var(--line); border-radius: 10px; padding: 24px; }
.landing .feature-icon { color: var(--green); 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: var(--muted); }

/* 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: var(--muted); 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;
}
/* The staff face in the dark: warm greys rather than the portal's greens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .surface-ipms {
    --ink: #e4e4e1; --muted: #9f9c97; --faint: #74716c;
    --line: #2d2d2b; --line-soft: #252523; --hair: #252523; --field-line: #3d3d3a;
    --surface: #1c1c1b; --paper: #171716; --paper-2: #202020;
  }
}
:root[data-theme="dark"] .surface-ipms {
  --ink: #e4e4e1; --muted: #9f9c97; --faint: #74716c;
  --line: #2d2d2b; --line-soft: #252523; --hair: #252523; --field-line: #3d3d3a;
  --surface: #1c1c1b; --paper: #171716; --paper-2: #202020;
}

/* 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: var(--wash); }
.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: var(--wash); color: var(--ink); }
.surface-ipms .app-nav a[aria-current="page"] {
  background: var(--wash-strong); 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: var(--wash-strong); 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: var(--wash); }
.surface-ipms .nav-children a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--wash-strong); }
.surface-ipms .app-nav .nav-link[aria-current="true"] { color: var(--ink); background: var(--wash); }
.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: var(--wash); }
.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: var(--wash); }
.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: var(--wash); 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; }
/* The permit & licence registry keeps a row's actions on one line (up to six
   icons). Its two-word headings may wrap instead, so the table still fits the
   page rather than squeezing the Action column to one icon's width. */
.registry-documents-table .registry-row-actions { flex-wrap: nowrap; }
@media (min-width: 621px) { .registry-documents-table thead th { white-space: normal; } }

@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: var(--sand); color: var(--muted); }
.surface-ipms .badge-info    { background: var(--blue-tint); color: var(--blue); }
.surface-ipms .badge-good    { background: var(--green-tint); color: var(--green-ink); }
.surface-ipms .badge-warn    { background: var(--gold-tint); color: var(--gold-ink); }
.surface-ipms .badge-bad     { background: var(--red-tint); color: var(--red); }

/* Sector is a classification, not a state (epaSectorBadge): outlined rather
   than filled, with a dot keyed to the code so a sector keeps its colour on
   every list and page. A code without its own colour gets the neutral dot. */
.surface-ipms .badge-sector {
  --sector: #8a8783;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); color: #3f3d3a; box-shadow: inset 0 0 0 1px #dcdad6;
}
.surface-ipms .badge-sector::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sector);
}
.badge-sector[data-sector="general_construction"] { --sector: #b26b1f; }
.badge-sector[data-sector="hospitality_tourism"]  { --sector: #c2417a; }
.badge-sector[data-sector="energy"]               { --sector: #d19a00; }
.badge-sector[data-sector="manufacturing"]        { --sector: #4f6d8f; }
.badge-sector[data-sector="health"]               { --sector: #c8372d; }
.badge-sector[data-sector="mining"]               { --sector: #6b5644; }
.badge-sector[data-sector="natural_resources"]    { --sector: #2f8a4c; }
.badge-sector[data-sector="communication_masts"]  { --sector: #6a4fb3; }
.badge-sector[data-sector="waste_management"]     { --sector: #5a7a2a; }
.badge-sector[data-sector="urban_tree_felling"]   { --sector: #1f7a6d; }
.badge-sector[data-sector="industrial_chemical"]  { --sector: #2b78b5; }
.badge-sector[data-sector="pesticide"]            { --sector: #8a3fa0; }
.badge-sector[data-sector="hazardous_waste"]      { --sector: #a3271b; }

/* 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: var(--wash); border-color: transparent; color: var(--ink);
}
.surface-ipms .button-secondary:hover { background: var(--wash-strong); }
.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: var(--wash); }
  .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: var(--ink);
  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: var(--ink);
  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, .page-tabs { margin-top: 10px; }
.admin-tab-list, .page-tab-list { display: none; }
.admin-tabs.js-tabs > .admin-tab-list,
.page-tabs.js-tabs > .page-tab-list {
  display: flex; align-items: end; flex-wrap: wrap; gap: 4px;
  margin: 0 0 18px; padding: 0 2px; border-bottom: 1px solid var(--line);
}
/* The bar no longer scrolls sideways: a group's menu drops below it, and a
   scrolling box would clip the menu at the bar's edge. Four entries wrap. */
.admin-tab, .page-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, .page-tab:hover { color: var(--green); background: var(--green-tint); }
.admin-tab[aria-selected="true"], .page-tab[aria-selected="true"] {
  color: var(--green); background: var(--surface); border-bottom-color: var(--green);
}
.admin-tab:focus-visible, .page-tab:focus-visible {
  outline: 3px solid rgba(26, 107, 60, .2); outline-offset: -3px;
}
.admin-tab-count, .page-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,
.page-tab[aria-selected="true"] .page-tab-count {
  color: var(--green); background: var(--green-tint);
}
/* Tab groups: a menu of tabs under one heading, which names the tab open in
   it. Without script the list is hidden anyway; with it, the menu opens on
   the heading and closes on a choice, a click elsewhere, or Escape. */
.admin-tab-group { position: relative; flex: 0 0 auto; }
.admin-tab-group-toggle[data-group-active="true"] { color: var(--green); border-bottom-color: var(--green); background: var(--surface); }
.admin-tab-caret { font-size: 11px; margin-left: 2px; }
.admin-tab-menu {
  position: absolute; left: 0; top: 100%; z-index: 30; min-width: 220px; margin-top: 1px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) var(--radius);
  box-shadow: 0 8px 24px rgba(14, 40, 24, .12);
}
.admin-tab-menu[hidden] { display: none; }
.admin-tab-in-group { margin: 0; padding: 9px 12px; border-bottom: 0; border-radius: 6px; text-align: left; white-space: normal; }
.admin-tab-in-group[aria-selected="true"] { background: var(--green-tint); }
.admin-tab-panel, .page-tab-panel { min-width: 0; }
.admin-tabs.js-tabs > .admin-tab-panel[hidden] { display: none; }
.page-tabs.js-tabs > .page-tab-panel[hidden] { display: none; }

/* Sub-tabs: the cards under one administration tab, one at a time. The
   same contract — hidden bar without script, every card in flow. */
.admin-subtabs { margin-top: 2px; }
.admin-subtab-list { display: none; }
.admin-subtabs.js-tabs > .admin-subtab-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px;
}
.admin-subtab {
  appearance: none; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.admin-subtab:hover { color: var(--green); border-color: var(--green-line, var(--line)); }
.admin-subtab[aria-selected="true"] { color: var(--green); background: var(--green-tint); border-color: var(--green); }
.admin-subtab:focus-visible { outline: 3px solid rgba(26, 107, 60, .2); outline-offset: 1px; }
.admin-subtab-count { margin-left: 6px; color: var(--muted); font-weight: 600; }
.admin-subtabs.js-tabs > [role="tabpanel"][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;
}

/* The workflow stage editor is a table of inputs: one row per desk, in the
   order applications pass through them. Fields are sized to the value they
   hold so the sequence stays readable across six or seven columns. */
/* Eight columns: the table keeps a working width and scrolls inside its
   wrapper rather than squeezing every field to a few characters. */
.workflow-stages { min-width: 1240px; }
.workflow-stages tbody td { vertical-align: top; padding-top: 8px; }
.workflow-stages input[type="text"],
.workflow-stages select {
  width: 100%;
  min-width: 8ch;
  padding: 4px 7px;
  font-size: 12px;
}
.workflow-stages td:nth-child(2) { min-width: 22ch; }
.workflow-stages td:nth-child(3) select, .workflow-stages td:nth-child(4) select { min-width: 16ch; }
.workflow-stages td:nth-child(7) { min-width: 15ch; }
.workflow-stages td:nth-child(7) label { display: block; white-space: nowrap; }
.workflow-stages td:nth-child(8) { min-width: 26ch; }
.workflow-stages input[type="text"] + input[type="text"] { margin-top: 4px; }
.workflow-stages .input-narrow { width: 6ch; min-width: 0; text-align: center; }
.workflow-stages textarea { width: 100%; min-width: 16ch; font-size: 12px; }
.workflow-stages .stage-tools { display: flex; gap: 2px; margin-top: 4px; }
.workflow-stages .stage-tools .button { padding: 0 6px; min-width: 0; line-height: 1.6; }
/* Taking a desk out is the one destructive control in the row; it reads as such
   on hover rather than sitting there in red beside the two arrows. */
.workflow-stages .stage-tools .stage-remove:hover,
.workflow-stages .stage-tools .stage-remove:focus-visible { border-color: var(--red-line); color: var(--red); }
.workflow-matrix th[scope="row"] { font-weight: 500; white-space: nowrap; }
.workflow-matrix .matrix-depth-1 th[scope="row"] { padding-left: 28px; }
.workflow-matrix .matrix-depth-2 th[scope="row"] { padding-left: 48px; color: var(--muted, #556); }
.workflow-matrix .matrix-depth-0 td, .workflow-matrix .matrix-depth-0 th { border-top: 2px solid var(--line, #dde); }
.workflow-matrix tr.is-linked th[scope="row"]::after { content: " •"; color: var(--good, #2a7); }
.workflow-matrix select { max-width: 24ch; }
.workflow-test { margin-bottom: 14px; }
.workflow-test .field-inline { display: flex; gap: 8px; align-items: center; max-width: 36rem; }
#workflow-sub-scope .field-inline { display: flex; gap: 8px; align-items: center; }
#workflow-sub-scope .field-inline .input-narrow { width: 8ch; }
.plan-workflow { margin: -6px 0 10px; }
.workflow-stages label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
}
.workflow-stages label input { margin-right: 4px; }
.workflow-stages tr.is-final td { background: color-mix(in srgb, var(--green) 6%, transparent); }
.workflow-versions tr.is-selected td { background: color-mix(in srgb, var(--green) 8%, transparent); }
.u-inline { display: inline-block; }

/* --- 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);
}

/* --- fee lines entered by hand (views/ipms/application.php review panel) -- */

.fee-review-lines { margin: 0 0 12px; }
.fee-review-lines td .badge { white-space: nowrap; }
.hand-lines-reason {
  margin: 0 0 16px; padding: 10px 14px;
  border: 1px solid var(--gold-line); border-radius: var(--radius); background: var(--gold-tint);
}
.hand-lines-reason p { margin: 0; max-width: 68ch; }
.hand-lines-reason p + p { margin-top: 4px; }
/* A HOD's change to the draft (migration 043): the same shape, in the review's own blue. */
.invoice-adjustment {
  margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--blue-line); border-radius: var(--radius); background: var(--blue-tint);
}
.invoice-adjustment p { margin: 0; max-width: 68ch; }
.invoice-adjustment p + p { margin-top: 4px; }
.invoice-adjust { margin-bottom: 16px; }
.invoice-adjust > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.invoice-adjust form { margin-top: 10px; }
.invoice-adjust-lines td { vertical-align: middle; }
.invoice-adjust-lines input[type="text"] { width: 100%; min-width: 12rem; }
.invoice-adjust-lines .ref { display: block; margin-bottom: 4px; }
.invoice-adjust-new select { width: 100%; margin-bottom: 6px; }

/* --- instalment plans (includes/instalments.php) --------------------------- */

.instalment-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.instalment {
  display: grid; grid-template-columns: 1.6rem auto 1fr auto; gap: 10px; align-items: center;
  padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface);
  font-size: 13.5px;
}
.instalment-seq { font-family: var(--numeric); font-weight: 600; color: var(--muted); }
.instalment-amount { font-family: var(--numeric); font-variant-numeric: tabular-nums; font-weight: 600; }
.instalment-due { color: var(--muted); white-space: nowrap; }
.instalment.is-paid { opacity: .75; }
.instalment.is-overdue { border-color: var(--red-line); background: var(--red-tint); }
.instalment-plan .instalment-list { margin-top: 8px; }
/* A renewal's fee beside the permit it renews (views/ipms/partials/renewal_fee.php). */
.renewal-fee { padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--blue-line); border-radius: var(--radius); background: var(--surface); }
.renewal-fee p { margin: 0 0 6px; }
.renewal-fee p:last-child { margin-bottom: 0; }
.renewal-fee-table { width: 100%; margin: 4px 0 8px; font-size: 13px; }
.renewal-fee-table th, .renewal-fee-table td { padding: 5px 8px; text-align: left; }
.renewal-fee-table tr.is-changed td { background: var(--gold-tint); }
.instalment-agree > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.instalment-agree form { margin-top: 10px; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row .field { flex: 0 0 auto; }
@media (max-width: 640px) {
  .instalment { grid-template-columns: 1.6rem 1fr auto; }
  .instalment-due { grid-column: 2 / span 2; }
}

/* --- post-permit compliance (views/ipms/compliance.php) ------------------ */

.compliance-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 18px; }
.compliance-figures .stat { margin: 0; }
.compliance-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.compliance-entry {
  padding: 12px 16px; border: 1px solid var(--line-soft); border-left: 3px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.compliance-entry.is-monitoring { border-left-color: var(--green); }
.compliance-entry.is-correspondence { border-left-color: var(--blue); }
.compliance-entry.is-complaint { border-left-color: var(--gold-ink); }
.compliance-entry.is-open { border-left-color: var(--red); }
.compliance-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 6px; }
.compliance-entry p { margin: 0; max-width: 76ch; }
.compliance-entry p + p { margin-top: 6px; }
.compliance-closed { color: var(--muted); }
.renewal-history { border-color: var(--gold-line); background: var(--gold-tint); }

.workers-table td .sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; max-width: 60ch; }
.workers-table td .sub code { font-size: 11.5px; }
.workers-table .registry-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- transactions (views/ipms/transactions.php) ---------------------------- */

.transactions-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.transactions-filter select { max-width: 16rem; }
.transactions td .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.confirm-by-hand > summary { list-style: none; display: inline-block; }
.confirm-by-hand > summary::-webkit-details-marker { display: none; }
.confirm-by-hand-form {
  margin-top: 8px; padding: 10px 12px; min-width: 18rem;
  border: 1px solid var(--gold-line); border-radius: var(--radius); background: var(--gold-tint);
}
.confirm-by-hand-form .field { margin-bottom: 8px; }
.confirm-by-hand-form input[type="text"], .confirm-by-hand-form textarea { width: 100%; }

/* --- What's new (views/partials/whats_new_modal.php, views/whats_new.php) - */

dialog.whats-new-modal { max-width: 620px; }
/* The registration fee held at the door: no close control, nothing behind it to reach. */
.registration-fee-modal { max-width: 560px; }
.registration-fee-modal .modal-head { align-items: flex-start; }
.registration-fee-modal .modal-head .eyebrow { color: var(--green-dark); }
.registration-fee-modal .modal-body { max-height: calc(90vh - 150px); }
.registration-fee-modal .amount-due { margin: 14px 0 18px; }
.registration-fee-modal .modal-foot { justify-content: space-between; }
.registration-fee-modal .modal-foot .inline-form { margin: 0; }
.registration-fee-modal::backdrop { background: rgba(14, 40, 24, .8); backdrop-filter: blur(4px); }
.register-defer { border-top: 1px solid var(--hair); padding-top: 14px; }

.whats-new-modal .modal-head { align-items: flex-start; }
/* The body scrolls, so it must also contain the links' absolutely placed
   screen-reader text; otherwise that text overflows the dialog itself. The
   head carries an eyebrow, so the body gives up a little more height. */
.whats-new-modal .modal-body { position: relative; max-height: calc(85vh - 160px); }
.whats-new-modal .modal-head .eyebrow { color: var(--green-dark); }
.whats-new-modal .modal-foot { justify-content: space-between; }
.whats-new-release + .whats-new-release { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); }
.panel.whats-new-release + .panel.whats-new-release { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--line); }
.whats-new-release h3 { margin: 0 0 4px; font-size: 15px; }
.whats-new-meta { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.whats-new-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.whats-new-item {
  padding: 12px 14px 12px 16px; border: 1px solid var(--line-soft); border-left: 3px solid var(--green);
  border-radius: var(--radius); background: var(--surface);
}
.whats-new-item-title { display: block; font-size: 14px; color: var(--ink); }
.whats-new-item p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 68ch; }
.whats-new-item-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; text-decoration: none; }
.whats-new-item-link:hover { text-decoration: underline; }

/* Announcements an administrator posts (views/partials/announcements_modal.php).
   The rule along the top says how much it matters before a word is read. */
dialog.announcement-modal { max-width: 600px; border-top: 4px solid var(--blue); }
dialog.announcement-modal.announcement-tone-warning { border-top-color: var(--gold); }
dialog.announcement-modal.announcement-tone-critical { border-top-color: var(--red); }
.announcement-modal .modal-head { align-items: flex-start; }
.announcement-modal .modal-head .eyebrow { color: var(--blue); }
.announcement-modal.announcement-tone-warning .modal-head .eyebrow { color: var(--gold-ink); }
.announcement-modal.announcement-tone-critical .modal-head .eyebrow { color: var(--red); }
.announcement-modal .modal-body { max-height: calc(85vh - 160px); }
.announcement + .announcement { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair); }
.announcement h3 { margin: 0 0 4px; font-size: 15px; }
.announcement-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.announcement-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; max-width: 68ch; overflow-wrap: anywhere; }
.announcement-body p:last-child { margin-bottom: 0; }
.announcement-body :is(ul, ol) { margin: 0 0 10px; padding-left: 22px; font-size: 14px; line-height: 1.55; }
.announcement-body :is(ul, ol):last-child { margin-bottom: 0; }
.announcement-body :is(h1, h2, h3) { margin: 0 0 8px; font-size: 15px; }
.announcement-body a { font-weight: 600; }

/* --- 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;
}
/* With the assistant off the floater is the report button, and wears its own mark. */
.epa-chat-launcher.is-support-only .epa-chat-launcher-icon { font-size: 19px; line-height: 1; }


.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: var(--surface);
  padding: 2px;
  object-fit: contain;
  display: block;
}

.epa-chat-window {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: min(430px, calc(100vw - 32px));
  height: min(760px, 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 {
  flex-shrink: 0;
  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 {
  flex-shrink: 0;
  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: var(--surface);
  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: var(--surface);
  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: var(--surface);
  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: var(--surface);
  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: var(--surface);
  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 {
  flex-shrink: 0;
  padding: 10px 12px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

#epa-chat-mode-note { margin: 4px 0 8px; }

.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 {
  min-height: 32px;
  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: var(--ink);
  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);
}

/* --- Report a problem (ADR 0004) ---------------------------------------- *
 *
 * The panel takes over the body of the chat window rather than sitting inside
 * the conversation. A fault report is not a message to the assistant, and the
 * two should not look like the same act.
 */

.epa-chip-support {
  margin-left: auto;
  border-color: var(--gold);
}

/* While the browser is taking the picture, the window that asked for it gets
   out of the way. A support desk looking at a screenshot of the report form
   learns nothing about the fault behind it. */
.epa-chat-container.is-capturing {
  visibility: hidden;
}

.epa-support-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
}

.epa-support-panel[hidden] {
  display: none !important;
}

.epa-support-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--sand-tint, #f7f5ef);
}

.epa-support-head strong {
  font-size: 13px;
}

.epa-support-back {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm, 6px);
  font: inherit;
  font-size: 12px;
  padding: 3px 9px;
  cursor: pointer;
}

.epa-support-back:hover,
.epa-support-back:focus-visible {
  border-color: var(--forest);
  outline: none;
}

.epa-support-form {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.epa-support-intro {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--gold);
  background: var(--sand-tint, #f7f5ef);
  border-radius: 0 6px 6px 0;
}

.epa-support-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
}

.epa-support-field > span:first-child {
  font-weight: 600;
}

.epa-support-field select,
.epa-support-field textarea {
  font: inherit;
  font-size: 13px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  color: var(--ink);
}

.epa-support-field textarea {
  resize: vertical;
  min-height: 78px;
}

.epa-support-field select:focus-visible,
.epa-support-field textarea:focus-visible {
  border-color: var(--forest);
  outline: 2px solid rgba(20,56,35,.18);
  outline-offset: 0;
}

.epa-support-capture-note {
  margin: 0;
}

.epa-support-capture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* The capture is shown at a size where its contents can actually be judged.
   A thumbnail nobody can read is consent in name only. */
.epa-support-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  background: var(--sand-tint, #f7f5ef);
}

.epa-support-preview[hidden] {
  display: none !important;
}

.epa-support-preview img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  object-position: top left;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}

.epa-support-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm, 6px);
  background: rgba(200,160,60,.08);
}

.epa-support-consent[hidden] {
  display: none !important;
}

.epa-support-consent input {
  margin-top: 2px;
  flex: 0 0 auto;
}

.epa-support-message {
  padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
  font-size: 12.5px;
  border: 1px solid var(--line);
  background: var(--sand-tint, #f7f5ef);
}

.epa-support-message[hidden] {
  display: none !important;
}

.epa-support-message.is-warn {
  border-color: #b4762a;
  background: rgba(180,118,42,.1);
}

.epa-support-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
/* What a sent report leaves behind: the reference to write down, and the way
   back to the form for the next one. */
.epa-support-done { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.epa-support-done p { margin: 0; }
.epa-support-done .ref { letter-spacing: .02em; }

.epa-support-list-link {
  color: var(--forest);
}

/* --- 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: var(--red-tint); 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 {
  .copy-ref { display: none !important; }
  .app-sidebar, .app-topbar, .site-header, .site-footer, .actions, .skip-link, .pills,
  .epa-chat-container, .portal-mobile-nav, .application-tab-list, .admin-tab-list, .page-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; }
  .page-tabs.js-tabs > .page-tab-panel[hidden] { display: block !important; }
  .app-content { padding: 0; }
  body { background: var(--surface); }
  .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: var(--surface); }
.stage-done .stage-dot { background: var(--green-600); border-color: var(--green-600); }
.stage-now  .stage-dot { background: var(--surface); 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; }
/* Correction notes (includes/correction_notes.php): EPA's requests and the
   applicant's answers, oldest first, on the portal and on the staff page. */
.correction-thread { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.correction-note { padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }
.correction-note.is-epa { border-left: 3px solid var(--gold-line, #e2c27a); }
.correction-note.is-applicant { border-left: 3px solid var(--green-line, #9ccbb0); background: var(--paper); }
.correction-note-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 4px; }
.correction-note-head .badge { margin-left: auto; }
.correction-note-body { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.correction-note-files { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.correction-note-files .icon { width: 14px; height: 14px; vertical-align: -2px; }
.application-tab-count.is-open { background: var(--red-tint, #fbe1de); color: var(--red, #8f2a22); }

/* --- 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; }
}

/* --- where a new application looks like it belongs ----------------------
   The one filled block on the Desk panel. It is information rather than a
   warning, so it takes the blue tint and leaves the gold to the things that
   are actually wrong. */
.desk-suggest {
  background: var(--blue-tint); border: 1px solid var(--blue-line);
  border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px;
}
.desk-suggest > :last-child { margin-bottom: 0; }
.desk-suggest-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--blue);
}
.desk-suggest .hint { margin: 0 0 8px; color: var(--blue); opacity: .85; }
.desk-suggest-list { list-style: none; margin: 0; padding: 0; }
.desk-suggest-item {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--blue-line);
}
.desk-suggest-item:first-child { border-top: 0; padding-top: 3px; }
/* The desk, then its reason under it, so the button keeps one column down the
   right and every row is the same shape. */
.desk-suggest-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.desk-suggest-name { font-weight: 700; color: var(--ink); }
.desk-suggest-why { font-size: 12px; color: var(--muted); }
.desk-suggest-item form { margin: 0; }
/* On a phone the button takes its own line under every desk, rather than one
   line for the short names and another for the long ones. */
@media (max-width: 560px) {
  .desk-suggest-text { flex: 1 1 100%; }
}

/* --- 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 a translucent 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: rgba(255, 255, 255, .35);
  background: color-mix(in srgb, var(--surface) 35%, transparent);
  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 translucent surface keeps the page visible beneath the EPA green ring. */

/* Row actions share a compact target; title and aria-label name each icon. */
table .table-action,
.surface-ipms table .table-action.table-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; min-width: 36px; height: 36px; min-height: 36px;
  padding: 0; gap: 0; vertical-align: middle; border-radius: 7px;
  text-decoration: none; cursor: pointer; flex: none; list-style: none;
}
table .table-action:not(.button) {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
table .table-action:not(.button):hover { background: var(--paper-2); }
table .table-action .icon { width: 18px; height: 18px; flex: none; stroke-width: 2; }
table .table-action:focus-visible { outline: 2px solid var(--blue, var(--green)); outline-offset: 3px; }
table .table-action:disabled,
.surface-ipms table .table-action:disabled,
.surface-ipms table .table-action:disabled:hover {
  opacity: 1; cursor: not-allowed; transform: none;
  background: var(--paper-2); color: var(--muted); border-color: var(--line);
}
table .table-action::-webkit-details-marker { display: none; }
table .table-action.is-busy .icon { display: none; }
/* An icon-only action waiting on its file (a PDF download) turns into the ring. */
table .table-action.is-busy { pointer-events: none; }
table .table-action.is-busy::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; animation: epaSpin .6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  table .table-action.is-busy::before { border-top-color: currentColor; animation: epaPulse 1.6s ease-in-out infinite; }
}
table .row-more { opacity: 1; width: 36px; height: 36px; }
table td.row-actions, table th.row-actions { width: 44px; }
@media (pointer: coarse), (max-width: 760px) {
  table .table-action,
  .surface-ipms table .table-action.table-action,
  table .row-more { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
}

.portal-help-floater { position: fixed; right: 24px; bottom: 24px; z-index: 80; border-radius: 999px; box-shadow: 0 5px 22px #0003; }
@media (max-width: 760px) { .portal-help-floater { right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); } }

/* Bulk controls always retain their icon and label, with a clear inactive state. */
.bulk-application-actions .button { display: inline-flex; align-items: center; gap: 8px; }
.bulk-application-actions .button:disabled,
.bulk-application-actions .button:disabled:hover { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.bulk-application-actions.panel { padding: 16px 20px; margin: 0; border: 0; border-bottom: 1px solid var(--line); }

/* --- application form wizard -------------------------------------------
   app.js turns each section panel into one page. The bar is a row of
   segments, each a button to that section; the label above says where you are. */
.form-wizard-progress { margin-bottom: 14px; }
.form-wizard-label { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.wizard-bar { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.wizard-bar li { flex: 1; min-width: 0; }
/* A 20px target drawing a 6px bar; the text is kept for screen readers. */
.wizard-segment {
  display: block; width: 100%; height: 20px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 0; color: transparent; overflow: hidden; position: relative;
}
.wizard-segment::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 6px;
  border-radius: 3px; background: var(--line);
}
.wizard-segment.is-done::before { background: var(--green-line); }
.wizard-segment.is-now::before  { background: var(--green); }
.wizard-segment:hover::before   { background: var(--green-bright); }
form.is-wizard [data-wizard-step][hidden] { display: none; }
.wizard-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 18px; }
.wizard-nav [hidden] { display: none; }
.wizard-review { margin: 0 0 18px; padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.wizard-review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.wizard-review-head:first-child { margin-top: 0; }
.wizard-review-head h3 { margin: 0; }
.wizard-review .detail-list { margin-bottom: 6px; }
@media (min-width: 620px) { .wizard-review .detail-list { grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); } }
.wizard-review dd { overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .wizard-nav .u-grow { display: none; }
  .wizard-nav .button { flex: 1 1 auto; justify-content: center; }
}

.verify-qr { margin: 20px 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.verify-qr h2 { margin-top: 0; }
.verify-qr .actions { margin-bottom: 12px; }
.verify-qr-video { display: block; width: 100%; max-height: 360px; object-fit: contain; background: #111; border-radius: 6px; margin-bottom: 12px; }
.verify-qr[hidden], .verify-qr [hidden] { display: none !important; }
.verify-qr .button:disabled { opacity: .45; cursor: not-allowed; }

/* Registration selfie (NIA identity verification). The preview is mirrored so
   it moves like a mirror; the photo taken is not, because NIA compares it with
   the card as it is. */
.selfie-capture { margin: 16px 0; }
.selfie-capture[hidden], .selfie-capture [hidden], [data-selfie-file][hidden] { display: none !important; }
.selfie-stage { max-width: 420px; margin-bottom: 12px; }
.selfie-video, .selfie-preview { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #111; border-radius: 8px; }
.selfie-video { transform: scaleX(-1); }
.selfie-stage { position: relative; }
.selfie-prompt { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0 8px; padding: 8px 12px; background: rgba(14,40,24,.85); color: #fff; border-radius: 6px; font-weight: 600; text-align: center; }
.selfie-prompt[hidden] { display: none; }
.selfie-face { position: absolute; border: 3px solid rgba(255,255,255,.85); border-radius: 10px; box-shadow: 0 0 0 2px rgba(14,40,24,.5); pointer-events: none; transition: left .12s linear, top .12s linear, width .12s linear, height .12s linear; }
.selfie-face.is-good { border-color: #6fd08c; }
.nia-photo { margin: 0 0 12px; }
.nia-photo img { display: block; max-width: 160px; border-radius: 6px; border: 1px solid var(--line); }
.selfie-capture .button:disabled, [data-selfie-submit]:disabled { opacity: .45; cursor: not-allowed; }

.list-bulk-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 16px; }
.list-bulk-select { display:inline-flex; align-items:center; gap:8px; margin:0; font-size:13px; }
.list-bulk-toolbar .actions { display:flex; flex-wrap:wrap; gap:8px; }
.list-bulk-toolbar .button { display:inline-flex; align-items:center; gap:6px; }
.list-bulk-toolbar .button:disabled { opacity:.45; cursor:not-allowed; }
.list-bulk-check { width:36px; }
.list-bulk-review { max-height:240px; overflow:auto; padding-left:24px; }
.list-row-select { display:inline-flex; align-items:center; margin:8px 12px; }
.mail-rows > li[data-list-row] { position:relative; padding-left:40px; }
.mail-rows > li[data-list-row] > .list-row-select { position:absolute; left:16px; top:16px; margin:0; z-index:1; }
.mail-rows > li[data-list-row] > .mail-row { padding-left:8px; }
/* A notification is a three-column grid; a checkbox dropped in as a fourth child pushed every cell one column over. */
.notification-item[data-list-row] { position:relative; padding-left:48px; }
.notification-item[data-list-row] > .list-row-select { position:absolute; left:16px; top:50%; transform:translateY(-50%); margin:0; z-index:1; }

.list-bulk-hint { flex-basis: 100%; }

.memo-plain-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.memo-reply { padding: 18px 0; border-bottom: 1px solid var(--line, #e5e7eb); }
.memo-reply h3 { margin: 0; }

/* Field screening: an application as a checklist on the officer's phone.
   Big targets, one item per block, the three outcomes as a segmented control. */
.screening-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: flex-start; margin-bottom: 16px; }
.screening-head h1 { margin: 4px 0; }
.screening-progress { font-size: 14px; padding: 10px 14px; background: var(--panel, #fff); border: 1px solid var(--line, #dde3ea); border-radius: 8px; }
.screening-save-state { display: block; font-size: 12px; color: var(--muted, #667); margin-top: 4px; min-height: 1em; }
.screening-section { margin-bottom: 16px; }
.screening-items { list-style: none; margin: 0; padding: 0; }
.screening-item { padding: 12px 0; border-top: 1px solid var(--line, #dde3ea); }
.screening-item:first-child { border-top: 0; }
.screening-item-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.screening-item-label { font-size: 13px; color: var(--muted, #667); }
.screening-item-declared { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.screening-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; border: 0; }
.screening-outcome { position: relative; }
.screening-outcome input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.screening-outcome span { display: block; text-align: center; padding: 12px 6px; border: 1px solid var(--line, #cfd6de); border-radius: 8px; font-weight: 600; font-size: 14px; background: var(--surface); cursor: pointer; user-select: none; }
.screening-outcome input:focus-visible + span { outline: 2px solid var(--accent, #0e2818); outline-offset: 2px; }
.screening-outcome.is-confirmed input:checked + span { background: #dff3e6; border-color: #2f8f4e; color: #14532d; }
.screening-outcome.is-differs input:checked + span { background: #fde3e3; border-color: #c0392b; color: #7a1c1c; }
.screening-outcome.is-not_applicable input:checked + span { background: #e9ecf1; border-color: #7a8593; color: #3b4450; }
.screening-observed { margin-top: 8px; }
.screening-observed label { display: block; font-size: 13px; margin-bottom: 4px; }
.screening-observed input { width: 100%; font-size: 16px; padding: 10px; }
.screening-note { margin-top: 8px; }
.screening-note summary { font-size: 13px; color: var(--muted, #667); cursor: pointer; }
.screening-note textarea { width: 100%; margin-top: 6px; font-size: 15px; }
.screening-item-state { display: block; min-height: 1em; margin-top: 4px; }
.screening-item-state.is-error { color: #b42318; }
.screening-item.is-differs { background: #fff8f8; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
.screening-actions { position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(to top, rgba(247,249,252,1), rgba(247,249,252,.85)); }
.screening-actions .button { width: 100%; }
.screening-photos { list-style: none; margin: 0 0 12px; padding: 0; }
.screening-photos li { padding: 6px 0; border-top: 1px solid var(--line, #dde3ea); }
.screening-photos li:first-child { border-top: 0; }
.screening-visits { list-style: none; margin: 0; padding: 0; }
.screening-visits li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line, #dde3ea); }
.screening-visits li:first-child { border-top: 0; }
.screening-visit-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.screening-visit-holder { font-weight: 600; }
.screening-findings { list-style: none; margin: 0; padding: 0; }
.screening-finding { padding: 10px 0; border-top: 1px solid var(--line, #dde3ea); }
.screening-finding:first-child { border-top: 0; }
.screening-finding .actions { margin-top: 6px; }
@media (max-width: 560px) { .screening-head { flex-direction: column; } .screening-progress { width: 100%; } }

/* The landing page on a phone: a website's header, not an app's. It scrolls
   away with the page instead of floating over it, keeps to two short rows,
   and leaves Create Account to the hero's own button just below. */
@media (max-width: 760px) {
  .landing .hero-header { position: absolute; padding: 10px 0 12px; }
  .landing .hero-header-inner { gap: 8px 16px; }
  .landing .hero-brand-name { font-size: 13.5px; line-height: 1.25; }
  .landing .hero-nav { gap: 6px 18px; width: 100%; }
  .landing .hero-nav .button { display: none; }
  .landing .hero-nav-link { font-size: 14px; padding: 6px 0; }
  .landing .hero-body { padding-top: 128px; }
}

/* A help ticket's thread: the proponent's messages and EPA's, in order. */
.ticket-thread { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.ticket-message { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line, #dde3ea); background: var(--surface); max-width: 46rem; }
.ticket-message p { margin: 0; }
.ticket-message-head { margin-bottom: 4px !important; font-size: 13px; }
.ticket-message.is-staff { background: #eef6f0; border-color: #cfe3d5; margin-left: 24px; }
.ticket-reply { margin-top: 8px; max-width: 46rem; }
@media (max-width: 560px) { .ticket-message.is-staff { margin-left: 12px; } }

/* The cookie notice: a bar along the bottom of a public page until the visitor accepts. */
.cookie-notice { position: fixed; z-index: 950; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: rgba(7, 31, 19, .97); color: #eef3f0; box-shadow: 0 -8px 28px rgba(3, 15, 8, .28); }
.cookie-notice-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.cookie-notice p { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; }
.cookie-notice a { color: #fff; text-decoration: underline; }
.cookie-notice form { margin: 0; flex: none; }
.cookie-notice .button { min-width: 120px; }
@media (max-width: 560px) { .cookie-notice form, .cookie-notice .button { width: 100%; } }

/* The selected activity stays compact; its search and choices open on demand. */
.searchable-select { position: relative; }
.searchable-select [hidden] { display: none; }
.searchable-select-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.searchable-select-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.searchable-select-toggle[aria-invalid="true"] { border-color: var(--danger, #b42318); }
.searchable-select-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; padding: 10px; background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.searchable-select-dropdown input[type="search"] { margin-bottom: 8px; }
.searchable-select-options { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.searchable-select-option { padding: 10px 12px; cursor: pointer; overflow-wrap: anywhere; border-radius: 4px; }
.searchable-select-option:hover, .searchable-select-option.is-active { background: var(--paper); }
.searchable-select-option[aria-selected="true"] { font-weight: 700; }
.searchable-select-group { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
/* Inside a dialog the list opens in the flow, so the dialog grows and scrolls rather than clipping it. */
dialog .searchable-select-dropdown { position: static; margin-top: 4px; box-shadow: none; }
.searchable-select-dropdown .hint:empty { display: none; }

/* Mixed consignments keep each size beside its own quantity. */
.container-mix[hidden], .container-mix [hidden] { display: none; }
.container-mix .field > .button { margin-top: 8px; }

/* Server-rendered fee tabs keep search, filters and pagination in shareable URLs. */
.fee-rule-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 12px 0 18px; }
.fee-rule-tabs .page-tab { text-decoration: none; }
.fee-rule-tabs .page-tab[aria-current="page"] { color: var(--green); background: var(--surface); border-bottom-color: var(--green); }
.fee-rule-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 18px 0 12px; }
.fee-rule-filters label { display: grid; gap: 6px; flex: 1 1 150px; min-width: 0; font-size: 12px; font-weight: 700; }
.fee-rule-filters label:first-of-type { flex: 2 1 240px; }
.fee-rule-filters input, .fee-rule-filters select { width: 100%; }

/* One document viewer across the staff and applicant workspaces. */
dialog.modal-dialog.document-preview-modal { width: min(1100px, calc(100vw - 32px)); max-width: 1100px; max-height: calc(100dvh - 32px); }
.document-preview-modal .modal-head h2 { min-width: 0; overflow-wrap: anywhere; }
.document-preview-modal .modal-head .actions { flex-shrink: 0; }
.document-preview-modal .modal-body { max-height: none; }
.document-preview-content { min-height: 0; }
.document-preview-frame { display: block; width: 100%; height: 65vh; height: 65dvh; border: 1px solid var(--line); background: #f5f6f7; }
.document-preview-image { display: block; width: 100%; max-height: 65vh; max-height: 65dvh; object-fit: contain; background: #f5f6f7; }
@media (max-width: 600px) {
    .document-preview-modal .modal-head { flex-wrap: wrap; }
    .document-preview-modal .modal-head, .document-preview-modal .modal-body { padding: 12px; }
    .document-preview-frame { height: 55vh; height: 55dvh; }
}

/* Saved staff conversations and in-chat peer questions. */
.epa-chat-history-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.epa-chat-history-bar button { width: auto; color: var(--forest); font-size: 11px; }
.epa-chat-question { display: grid; gap: 8px; min-width: 0; }
.epa-chat-question label { display: grid; gap: 3px; font-size: 12px; }
.epa-chat-question input, .epa-chat-question select, .epa-chat-question textarea { font-size: 12px; width: 100%; }
.epa-chat-question textarea { min-height: 76px; resize: vertical; }
.epa-chat-destinations { min-width: 0; padding: 6px; }
.epa-chat-destination-list { max-height: 150px; overflow-y: auto; }
.epa-chat-destination-list label { display: flex; align-items: flex-start; padding: 4px 0; font-weight: normal; }
.epa-chat-destination-list span { min-width: 0; overflow-wrap: anywhere; }
.epa-chat-destination-list input { width: auto; flex-shrink: 0; margin-top: 4px; }
.epa-chat-destination-list label[hidden], .epa-chat-destinations[hidden] { display: none; }
.epa-chat-post-error { color: var(--danger, #a12727); margin: 0; }

/* Each timing report card owns its filters and navigation. */
.officer-time-card { margin-top: 22px; scroll-margin-top: 24px; }
.officer-time-card .officer-time-controls { margin: 0; border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); background: transparent; }
.officer-time-controls > label { flex: 1 1 150px; max-width: 240px; }
.officer-time-controls > .officer-time-search { flex-basis: 240px; max-width: 340px; }
.officer-time-controls > .actions { flex: 1 0 100%; margin-top: 2px; }
.officer-time-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.officer-time-pagination .actions { margin: 0; align-items: center; }
@media (max-width: 640px) {
  .officer-time-controls > label, .officer-time-controls > .officer-time-search { flex-basis: 100%; max-width: none; }
}

/* --- the application page as a case file (30 September 2026) ------------- */
/* The header says who, where, which desk, who has it and when it is due; the
   Processing tab keeps the work in a main column and the facts on a rail. The
   rail is decided by the width of the page's own container, not the window,
   because the same view sits inside the queue's reading pane. */
.case-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin: 0 0 12px; }
.case-head-main { min-width: 0; }
.case-head h1 { margin-bottom: 4px; }
.case-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 6px; }
.case-head .application-with { margin: 0; }
.case-head-actions { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* The full-screen control (views/ipms/application.php): a square icon button
   that shows "collapse" while the view is full screen. */
.button-icon { display: inline-flex; align-items: center; justify-content: center; padding-left: 7px; padding-right: 7px; }
.button-icon .icon { width: 16px; height: 16px; }
.case-fullscreen .icon-collapse, .case-fullscreen.is-fullscreen .icon-expand { display: none; }
.case-fullscreen.is-fullscreen .icon-collapse { display: inline-block; }
/* Full screen in the queue (app.js, setupFullscreen): the reading pane takes
   over the workspace - the list, its filters and the divider give way - and
   the menu and the top bar stay. A phone already shows one column. */
@media (min-width: 1001px) {
  .ipms-workspace.is-reading > .mail-list-head,
  .ipms-workspace.is-reading .mail-list,
  .ipms-workspace.is-reading .mail-divider { display: none; }
  .ipms-workspace.is-reading .mail-pane { padding-left: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px); }
}
@media (max-width: 1000px) {
  .case-fullscreen { display: none; }
}
.case-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px 18px;
  margin: 0 0 14px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.case-facts > div { min-width: 0; }
.case-facts dt { font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 0 0 2px; }
.case-facts dd { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.case-facts dd .sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 1px; }
.case-facts dd a.sub { display: inline; }
.case-facts .case-fact-warn { color: var(--gold-ink); }

/* A notice is one line until it is opened. */
details.notice { padding: 10px 14px; }
details.notice > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
details.notice > summary::-webkit-details-marker { display: none; }
details.notice > summary::before { content: "\25B8"; font-size: 11px; flex: 0 0 auto; }
details.notice[open] > summary::before { content: "\25BE"; }
details.notice[open] > summary { margin-bottom: 8px; }
.flash.notice > p:last-child { margin-bottom: 0; }

/* The explanation of a figure waits behind its heading. */
details.help > summary { cursor: pointer; font-size: 12px; color: var(--muted); list-style: none; }
details.help > summary::-webkit-details-marker { display: none; }
details.help > summary::before { content: "\24D8  "; }
details.help[open] > summary { margin-bottom: 4px; }

.case-split { container-type: inline-size; }
.case-main, .case-rail { min-width: 0; }
.case-rail .panel { padding: 16px 18px; margin-bottom: 14px; }
.case-rail h2 { font-size: 15px; }
.case-rail .turnaround-figures { grid-template-columns: 1fr; gap: 8px; }
.case-rail .turnaround-figures div { padding: 8px 12px; }
.case-rail .turnaround-figures dd { font-size: 15px; }
@container (min-width: 960px) {
  .case-split-inner { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
}

/* A completed stage is a green tick, not a filled dot (30 September 2026). */
.plan-step.is-completed .plan-dot {
  width: 16px; height: 16px; margin-top: 3px; position: relative;
  background: var(--green); border-color: var(--green);
}
.plan-step.is-completed .plan-dot::after {
  content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.plan-step.is-completed .plan-status .badge-good::before { content: "\2713 "; }

/* The staff sidebar reads heavier: the labels were a shade too light against the paper. */
.surface-ipms .app-nav a { font-weight: 600; }
.surface-ipms .app-nav a[aria-current="page"], .surface-ipms .app-nav .nav-link[aria-current="true"] { font-weight: 700; }
.surface-ipms .nav-children a { font-weight: 500; }
.surface-ipms .nav-children a[aria-current="page"] { font-weight: 700; }
.surface-ipms .app-sidebar .brand-text strong { font-weight: 700; }

/* --- a phone, and any touch screen (30 September 2026) --------------------- */
/* What the finish on a phone comes down to: type in a control at 16px so iOS
   does not zoom into it, anything tapped at least 44px tall, a row of filter
   pills as a drop-down, a sideways-scrolling table that says so, and dialogs
   that rise from the bottom. Layouts already stack; this is the last mile. */
@media (max-width: 620px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px; }
  .button { min-height: 44px; }
  .button-small { min-height: 40px; }
  .sortable, .listing-sort a, .application-tab, .admin-tab, .page-tab, .link-button, .file-list .file-name,
  details.fold > summary, details.notice > summary, details.help > summary, .nav-children a, .pager a, .pager span,
  .pills a, .breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
  .application-tab, .admin-tab, .page-tab { padding-top: 0; padding-bottom: 0; }
  .ref, .case-facts dd, .detail-list dd { overflow-wrap: anywhere; }
  .table-scroll, .table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .table-scroll.is-scrollable:not(.is-at-end), .table-wrap.is-scrollable:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
}
@media (max-width: 620px) {
  /* The pills become one control; the script builds it from the links. */
  /* !important, because a list's own phone rules restyle its pills with more specificity. */
  .pills.has-select a { display: none !important; }
  .pills-select { width: 100%; min-height: 44px; margin: 0; }
  .listing-bar .pills.has-select { flex: 1 1 100%; }
  /* Actions stack, full width, in the order they were written. */
  .actions > .button, .actions > form, .actions > form > .button, .actions > a.button { flex: 1 1 100%; width: 100%; justify-content: center; text-align: center; }
  .actions > form.inline-form { display: block; }
  /* A dialog is a sheet from the bottom of the screen. */
  dialog.modal-dialog { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .page-head, .panel-head, .case-head { flex-direction: column; align-items: stretch; }
  .page-head .actions, .panel-head .actions, .case-head-actions { margin-top: 10px; }
}

/* --- the applicant's account menu (30 September 2026) --------------------- */
/* The chip at the foot of the sidebar - at the top of the page on a phone -
   opens a menu with Change password and Sign out. On a phone the sidebar's
   route list gives way to the dock, and this is where signing out lives. */
.app-sidebar .account-menu { position: relative; }
.app-sidebar .account-menu > .sidebar-account { cursor: pointer; list-style: none; }
.app-sidebar .account-menu > .sidebar-account::-webkit-details-marker { display: none; }
.app-sidebar .account-menu[open] > .sidebar-account,
.app-sidebar .account-menu > .sidebar-account:hover { background: rgba(255, 255, 255, .07); }
.app-sidebar .sidebar-account-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.app-sidebar .account-caret {
  width: 7px; height: 7px; flex: none; margin-right: 4px;
  border-right: 1.5px solid var(--on-dark-faint); border-bottom: 1.5px solid var(--on-dark-faint);
  transform: rotate(-135deg) translateY(-2px);
}
.app-sidebar .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: 40;
}
.app-sidebar .account-popover form { margin: 0; }
.app-sidebar .account-popover-item {
  display: flex; width: 100%; align-items: center; min-height: 40px;
  padding: 7px 10px; border: 0; border-radius: var(--radius);
  background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500;
  text-align: left; cursor: pointer; text-decoration: none;
}
.app-sidebar .account-popover-item:hover { background: var(--wash); text-decoration: none; }
@media (max-width: 760px) {
  /* On a phone the chip sits in the top bar, so the menu drops down from it. */
  .has-portal-mobile-nav .app-sidebar .account-popover { bottom: auto; top: calc(100% + 4px); left: auto; right: 0; min-width: 220px; }
  .has-portal-mobile-nav .app-sidebar .account-caret { transform: rotate(45deg) translateY(-2px); }
  .has-portal-mobile-nav .app-sidebar { overflow: visible; }
}
@media (min-width: 621px) { .pills-select { display: none; } }

/* --- how-to guides (1 October 2026) ---------------------------------------- */
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 22px; }
.guide-card { margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.guide-card h3 { margin: 0; font-size: 15px; }
.guide-card h3 a { color: inherit; text-decoration: none; }
.guide-card h3 a:hover { text-decoration: underline; }
.guide-card .actions { margin-top: auto; padding-top: 8px; }
.guide-group { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 10px; }
.guide-steps { padding-left: 22px; margin: 12px 0 0; }
.guide-steps li { margin-bottom: 12px; }
.guide-steps li p { margin: 2px 0 4px; }
.guide-panel {
  /* Above the assistant's floating button, which keeps the bottom-right corner. */
  position: fixed; right: 20px; bottom: 92px; z-index: 90; width: min(360px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 14px 16px 16px;
}
.guide-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guide-panel-head .eyebrow { margin: 0; }
.guide-panel-close { color: var(--muted); text-decoration: none; font-size: 14px; padding: 4px 6px; border-radius: var(--radius); }
.guide-panel-close:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
.guide-panel-count { margin: 6px 0 2px; }
.guide-panel-title { margin: 0 0 6px; font-size: 16px; }
.guide-panel-body { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.guide-panel-actions { display: flex; gap: 8px; align-items: center; }
.guide-panel-actions form { margin: 0; }
/* The ring on the thing the step points at, and the dimming of everything
   else: a spot laid over the target whose shadow covers the screen. The spot
   takes no pointer events, and a shadow is not a surface, so the page stays
   usable; the panel sits above the shadow. */
.guide-highlight { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.guide-spotlight {
  position: fixed; z-index: 85; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(8, 20, 14, .58);
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.has-guide-spotlight .guide-panel { z-index: 90; }
@media (max-width: 620px) {
  .guide-panel { right: 10px; left: 10px; bottom: 84px; width: auto; }
  .has-portal-mobile-nav .guide-panel { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Link to proponent, on the staff application's Applicant card (migration 137). */
.proponent-link > p { margin: 8px 0; }
.proponent-link .inline-form { gap: 8px; align-items: center; flex-wrap: wrap; }
.proponent-link input[name="client_ref"][type="text"] { width: 12em; max-width: 100%; }
dd .inline-form { margin-top: 6px; }

/* Registry → Schedules filters (views/ipms/registry_schedules.php). */
.schedule-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-right: auto; }
.schedule-filters select { width: auto; max-width: 100%; }
.schedule-filters.submits-on-change .schedule-filters-apply { display: none; }

/* Illustrated staff help library */
.help-tabs { display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.help-tabs a { padding:12px 16px; color:var(--muted); border-bottom:3px solid transparent; text-decoration:none; }
.help-tabs a[aria-current="page"] { color:var(--green); border-color:#d9a441; font-weight:700; }
.help-search { display:flex; flex-wrap:wrap; align-items:end; gap:12px; }
.help-search > div:first-child { flex:2 1 260px; }
.help-search > div:nth-child(2) { flex:1 1 220px; }
.help-search label { display:block; margin-bottom:6px; }
.help-search input, .help-search select { width:100%; }
.staff-help-card { border-top:3px solid #1a6b3c; }
.staff-help-card .eyebrow { margin:0; font-size:10px; }
.staff-help-article { max-width:1050px; }
.help-before, .help-result { padding:16px 20px; border-left:3px solid #d9a441; background:var(--surface); margin:20px 0; }
.help-before h3, .help-result h4 { margin-top:0; }
.help-before p, .help-result p { margin-bottom:0; }
.help-section { margin:28px 0; }
.help-section .guide-steps li { padding-left:6px; line-height:1.65; }
.help-figure { margin:22px 0; }
.help-figure img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; }
.help-figure figcaption { margin-top:8px; font-size:12px; line-height:1.5; color:var(--muted); }
@media (max-width:600px) { .help-tabs a { padding:10px; } .help-before, .help-result { padding:12px; } }

/* Installing the app (includes/app_install.php): the menu item app.js shows
   only where the browser offers installation, and the offline page. */
.account-popover-item[hidden] { display: none; }
.app-offline { box-sizing: border-box; min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px 16px; background: var(--surface); }
.app-offline-card { box-sizing: border-box; width: 100%; max-width: 26rem; text-align: center; }
.app-offline-card img { display: block; margin: 0 auto 16px; }
.app-offline-card h1 { margin: 0 0 8px; }
.app-offline-card p { color: var(--muted); }

/* Draft attachments (5 October 2026): a Clear button app.js puts after a file
   picker, and the Remove tick beside each file already saved with a draft. */
.file-clear { display: inline-block; margin: 6px 0 0; min-height: 44px; }
.file-clear[hidden], .file-chosen[hidden] { display: none; }
/* Files chosen and not yet saved, each with its own Remove (16 October 2026). */
.file-chosen { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.file-chosen li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.file-chosen-name { font-weight: 600; word-break: break-word; }
.file-chosen-size { font-size: 12.5px; color: var(--muted); }
.file-chosen-remove { margin-left: auto; min-height: 44px; color: var(--red); }
.saved-attachments li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 2px 0; }
.saved-attachments .label-choice, .field > .label-choice.small { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; }

/* Deleting a schedule (5 October 2026): the one destructive button, in red. */
.button.button-danger { background: var(--surface, #fff); color: var(--red); border: 1px solid var(--red); }
.button.button-danger:hover { background: var(--red); color: #fff; }

/* The stage's Recall dialog (5 October 2026), beside Transfer. Without the
   script that opens it, it is an ordinary form on the page. */
html:not(.js) .stage-recall-dialog { display: block; position: static; margin: 0 0 16px; max-width: none; }

/* Administration → Forms: question rows dragged by a handle (public/assets/js/app.js). */
.question-handle-cell { width: 2rem; padding-inline: 4px !important; vertical-align: middle; }
.question-handle-head { width: 2rem; }
.question-handle { cursor: grab; border: 0; background: transparent; color: var(--muted, #667); font-size: 1.1rem; line-height: 1; padding: 6px 4px; border-radius: 4px; touch-action: none; }
.question-handle:focus-visible { outline: 2px solid var(--focus, #2563eb); outline-offset: 2px; }
.question-handle:active { cursor: grabbing; }
tr.is-dragging { opacity: .5; }
tr.drop-before > td { box-shadow: inset 0 3px 0 0 var(--accent, #1f6f4a); }
tr.drop-after > td { box-shadow: inset 0 -3px 0 0 var(--accent, #1f6f4a); }
@media (max-width: 760px) { .question-handle-cell { width: auto; } }

/* A table of rows on a proponent form. */
.rows-table { width: 100%; border-collapse: collapse; }
.rows-table th, .rows-table td { padding: 4px 6px; text-align: left; vertical-align: top; }
.rows-table th { font-size: .82rem; font-weight: 600; }
.rows-table input, .rows-table select { width: 100%; min-width: 7rem; }
.rows-remove-head, .rows-remove-cell { width: 5rem; white-space: nowrap; }
@media (max-width: 640px) {
  .rows-table thead { position: absolute; left: -9999px; }
  .rows-table, .rows-table tbody, .rows-table tr, .rows-table td { display: block; width: 100%; }
  .rows-table tr { border-bottom: 1px solid var(--line, #d9ddd6); padding-block: 6px; }
  .rows-table td::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--muted, #667); }
}

/* Proof of payment (9 October 2026): the filed image, shown to Finance. */
.proof-preview { display: block; max-width: 100%; max-height: 640px; border: 1px solid var(--line); border-radius: 6px; }
.payment-proofs { margin-bottom: 14px; }
.payment-proofs .what > span { display: block; }
.payment-proofs .badge { align-self: flex-start; }
.proof-withdraw summary { display: inline-flex; list-style: none; }
.proof-withdraw summary::-webkit-details-marker { display: none; }
.proof-withdraw form { max-width: 420px; }
.proof-withdraw form .button { justify-self: start; }

/* Report tables: search, filters, sorting and pages (10 October 2026; app.js). */
.report-table-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 12px 16px 4px; }
.report-table-search input { min-width: 220px; }
.report-table-filter { display: inline-flex; flex-direction: column; gap: 2px; margin: 0; }
.report-table-filter select { min-width: 150px; }
.report-table-status { margin-left: auto; align-self: center; }
.report-table-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 8px 16px 12px; }
.report-table-pager[hidden] { display: none; }
th[aria-sort] .report-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; }
th[aria-sort] .report-sort:focus-visible { outline: 2px solid var(--focus, #1d6b4a); outline-offset: 2px; border-radius: 3px; }
th[aria-sort] .report-sort::after { content: '↕'; opacity: .35; font-size: .85em; }
th[aria-sort="ascending"] .report-sort::after { content: '↑'; opacity: .9; }
th[aria-sort="descending"] .report-sort::after { content: '↓'; opacity: .9; }
th.numeric[aria-sort] .report-sort { justify-content: flex-end; width: 100%; }
@media (max-width: 640px) { .report-table-search input { min-width: 0; width: 100%; } .report-table-search { flex: 1 1 100%; } .report-table-status { margin-left: 0; } }

/* --- appearance switch, in the account menu (14 October 2026) ------------- */
.theme-switch { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 6px; margin: 4px 0 0; border-top: 1px solid var(--line-soft); }
.theme-switch-label { font-size: 12px; color: var(--muted); }
.theme-switch-options { display: flex; gap: 4px; }
.theme-switch-options button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 32px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.theme-switch-options button .icon { width: 15px; height: 15px; }
.theme-switch-options button:hover { color: var(--ink); background: var(--wash); }
.theme-switch-options button[aria-pressed="true"] { background: var(--green-tint); border-color: var(--green-line); color: var(--green-ink); }

/* Paper is paper: a dark screen never prints dark. The light values again,
   because a printed page has no way to re-read the device setting. */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light;
    --green: #1a6b3c; --green-dark: #155a32; --green-bright: #2f9e5f; --green-bright-dark: #278a51;
    --green-tint: #ecf5ef; --green-pale: #f0f6f2; --green-line: #cbe3d4; --green-ink: #1b4d30;
    --gold-tint: #fdf6e8; --gold-line: #ecd9ad; --gold-ink: #8f5210;
    --red: #b3261e; --red-tint: #fdebea; --red-line: #f0c4c1;
    --blue: #155a8a; --blue-tint: #eaf3fb; --blue-line: #c4ddf2;
    --ink: #1b1f1c; --muted: #63685f; --faint: #8d938b; --line: #e3e3dc; --line-soft: #f2f2ec; --hair: #eeeee8;
    --field-line: #cfd2cb; --surface: #ffffff; --paper: #f7f7f3; --paper-2: #f9f8f7; --sand: #eceae4;
    --wash: rgba(0, 0, 0, .045); --wash-strong: rgba(0, 0, 0, .07);
  }
  .theme-switch { display: none; }
}

/* Help tickets: summary first, one conversation and separate commands. */
.ticket-workspace { --ticket-green: #176c42; min-width: 0; }
.ticket-workspace .ticket-page-head { margin-bottom: 20px; align-items: center; }
.ticket-workspace h1 { overflow-wrap: anywhere; }
.ticket-workspace .ticket-back { display: inline-block; margin-bottom: 16px; font-size: 13px; }
.ticket-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 20px 0; }
.ticket-metrics > a { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); color: var(--ink); text-decoration: none; }
.ticket-metrics > a:hover { border-color: var(--ticket-green); }
.ticket-metrics span { font-size: 13px; color: var(--muted); }
.ticket-metrics strong { font-size: 28px; line-height: 1.2; }
.ticket-metrics small { font-size: 12px; color: var(--muted); }
.ticket-workspace .listing-bar { gap: 14px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.ticket-workspace .pills { flex-wrap: wrap; }
.ticket-workspace .ticket-queue { overflow: hidden; }
.ticket-workspace .ticket-queue td { vertical-align: top; }
.ticket-next { display: block; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.ticket-next.is-waiting { color: #97560d; font-weight: 600; }
.ticket-workspace .panel.ticket-summary { border-top: 3px solid var(--ticket-green); background: linear-gradient(110deg,color-mix(in srgb,var(--ticket-green) 8%,var(--surface)) 0%,var(--surface) 70%); margin-bottom: 20px; }
.ticket-summary-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ticket-summary-heading h1 { font-size: clamp(22px,2vw,30px); margin: 4px 0 0; }
.ticket-summary-heading .eyebrow { margin: 0; }
.ticket-summary-heading > .badge { flex-shrink: 0; }
.ticket-summary-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding-top: 18px; margin: 18px 0 0; border-top: 1px solid var(--line); }
.ticket-summary-facts dt { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.ticket-summary-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ticket-summary-facts small, .ticket-summary-facts .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.ticket-summary-actions { margin-top: 20px; flex-wrap: wrap; }
.ticket-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,280px); align-items: start; gap: 20px; }
.ticket-workspace .ticket-section-head { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.ticket-section-head h2 { margin: 0; }
.ticket-workspace .ticket-conversation-thread { margin: 20px 0; gap: 16px; }
.ticket-workspace .ticket-message { max-width: 100%; padding: 16px 18px; overflow-wrap: anywhere; }
.ticket-workspace .ticket-message.is-client { margin-right: 30px; background: var(--paper, #f8fafc); }
.ticket-workspace .ticket-message.is-staff { margin-left: 30px; background: color-mix(in srgb,var(--ticket-green) 8%,var(--surface)); }
.ticket-workspace .ticket-message-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 10px !important; }
.ticket-message-head time { font-size: 11px; color: var(--muted); margin-left: auto; }
.ticket-author-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ticket-workspace .ticket-composer { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; scroll-margin-top: 80px; }
.ticket-composer > label { font-weight: 650; }
.ticket-composer textarea { display: block; width: 100%; margin: 12px 0; }
.ticket-composer .actions { flex-wrap: wrap; }
.ticket-workspace .ticket-context h2 { font-size: 16px; }
.ticket-context dd { overflow-wrap: anywhere; }
.ticket-context .hint { margin-top: 20px; }
dialog.ticket-action-modal { max-width: 620px; }
@media (max-width:1100px) {
  .ticket-detail-layout { grid-template-columns: minmax(0,1fr); }
  .ticket-context { grid-row: 2; }
}
@media (max-width:700px) {
  .ticket-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ticket-metrics > a { padding: 14px; }
  .ticket-summary-facts { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .ticket-workspace .ticket-page-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .ticket-workspace .ticket-message.is-client { margin-right: 10px; }
  .ticket-workspace .ticket-message.is-staff { margin-left: 10px; }
  .ticket-message-head time { margin-left: 0; width: 100%; }
}

.ticket-workspace .sub { display: block; }
.ticket-workspace .ticket-queue:not(:has([data-list-row] input:checked)) .list-bulk-toolbar .actions,
.ticket-workspace .ticket-queue:not(:has([data-list-row] input:checked)) .list-bulk-hint { display: none; }