/* Marilao Business Permit Portal — design system.
   Brand: My Marilao magenta (#FC186E) paired with deep ink for a trustworthy,
   modern government-service feel. Fonts: Lexend (headings) + Source Sans 3. */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* The `hidden` attribute hides an element only through the UA rule
   [hidden]{display:none}, which ANY author `display:` declaration outranks.
   Components that set `display:flex` (.dr-menu, .dr-rename, .dr-confirm, …)
   therefore stayed permanently visible — the drafts kebab menu was stuck open.
   Enforce `hidden` globally so JS toggling `el.hidden` always works. */
[hidden] { display: none !important; }

:root {
  --brand: #FC186E;
  --brand-600: #E60F60;
  --brand-700: #BA356F;
  --brand-900: #7A1E4B;
  --accent: #FF658B;
  --ink: #14121A;
  --ink-2: #3F3A4A;
  --muted: #6B6875;
  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --surface-2: #FBF6F8;
  --line: #ECEAF1;
  --line-2: #E1DEE8;
  --ok: #16A34A; --ok-bg: #E7F7EE;
  --warn: #E8590C; --warn-bg: #FFF0E3;
  --err: #E11D48; --err-bg: #FDE7EC;
  --info: #2563EB; --info-bg: #E7EEFF;
  /* Ink variants for MESSAGE TEXT. --err / --info are tuned for fills and
     borders; as body copy they clear WCAG AA only barely. These are darkened to
     ~6.8:1 on white and ~5.7:1 on their own tint, because the residents who most
     need to read an error are the ones reading it on a cheap phone in daylight. */
  --err-ink: #B4123F;
  --info-ink: #1D4ED8;
  --radius: 18px;
  --radius-sm: 12px;
  --sidebar-w: 244px;
  --mtopbar-h: 56px;
  --shadow-sm: 0 1px 2px rgba(20,18,26,.06), 0 2px 8px rgba(20,18,26,.05);
  --shadow: 0 10px 30px rgba(20,18,26,.10);
  --shadow-lg: 0 24px 60px rgba(122,30,75,.18);
  --ease: cubic-bezier(.4,0,.2,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .brand-font { font-family: 'Lexend', sans-serif; letter-spacing: -.01em; }
.container { width: 100%; max-width: 680px; margin: 0 auto; padding: 20px 16px 48px; }
a { color: var(--brand-600); }

/* ---------- App header (dashboard / wizard) ---------- */
/* ---------- Sidebar shell (replaces the old top bar) ---------- */
body.has-sidebar { padding-left: var(--sidebar-w); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 60;
  display: flex; flex-direction: column; gap: 6px; padding: 20px 15px;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-700) 62%, var(--brand-900) 100%);
  color: #fff; box-shadow: 6px 0 22px rgba(122,30,75,.18);
}
.sb-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; padding: 4px 6px 16px; }
.sb-brand img { height: 40px; width: 40px; border-radius: 10px; background: #fff; padding: 4px; box-shadow: var(--shadow-sm); }
.sb-brand-txt b { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1.02rem; display: block; line-height: 1.12; }
.sb-brand-txt small { font-size: .76rem; opacity: .9; }
.sb-nav { display: flex; flex-direction: column; gap: 4px; }
.sb-link {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 12px;
  color: rgba(255,255,255,.9); text-decoration: none; font-weight: 600; font-size: .95rem;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.sb-link svg { width: 20px; height: 20px; flex: none; }
.sb-link:hover { background: rgba(255,255,255,.13); color: #fff; }
.sb-link.active { background: rgba(255,255,255,.2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
/* Comply & Resubmit callout */
.comply-callout { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px;
  background: #FFF7ED; border: 1px solid #FED7AA; }
.comply-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: linear-gradient(135deg,#F59E0B,#D97706);
  color: #fff; display: grid; place-items: center; }
.comply-ic svg { width: 22px; height: 22px; }
.comply-callout b { display: block; color: #9A3412; font-size: 15px; margin-bottom: 4px; }
.comply-remarks { font-size: 13.5px; color: #7C4A1E; line-height: 1.5; }

/* Compliance edit form fields */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .frow { grid-template-columns: 1fr; } }
#editBody h3 { font-size: 15px; font-weight: 800; color: var(--ink); }
.ffield { margin-bottom: 14px; }
.ffield label { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin: 0 0 6px; }
.ffield label i { color: var(--brand); font-style: normal; font-weight: 800; }
.ffield input, .ffield select {
  width: 100%; padding: 12px 13px; border: 1.4px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: .98rem; background: #fff; color: var(--ink); outline: none;
  transition: border-color .15s;
}
.ffield input:focus, .ffield select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(252,24,110,.1); }

/* Line-of-Business searchable dropdown */
.lob-wrap { position: relative; }
.lob-wrap .lob-search { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; z-index: 1; }
.lob-wrap > input#lineOfBusiness { padding-left: 44px; }
.lob-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px;
  box-shadow: 0 18px 44px rgba(18,20,28,.16); max-height: 328px; overflow-y: auto; display: none; }
.lob-results.show { display: block; animation: lobIn .14s ease-out; }
@keyframes lobIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.lob-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0;
  background: none; cursor: pointer; padding: 11px 12px; border-radius: 12px; font-family: inherit;
  font-size: .95rem; font-weight: 600; color: var(--ink); transition: background .12s; }
.lob-opt + .lob-opt { margin-top: 2px; }
.lob-opt:hover, .lob-opt:focus { background: linear-gradient(90deg, #FFF1F6, #FBF6F8); outline: none; }
.lob-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(252,24,110,.1); color: var(--brand); }
.lob-ic svg { width: 17px; height: 17px; }
.lob-name { flex: 1; line-height: 1.3; }
.lob-loading, .lob-empty { padding: 14px 12px; color: var(--muted); font-size: .9rem; }

/* Checkbox grid (closure retirement verification) */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.check-item {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--line, #e2e8f0); background: #fff; cursor: pointer; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.check-item:hover { border-color: var(--brand, #2563eb); background: #f8fafc; }
.check-item input { width: 18px; height: 18px; accent-color: var(--brand, #2563eb); flex: none; }
.check-item:has(input:checked) { border-color: var(--brand, #2563eb); background: rgba(37,99,235,.06); }

.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.sb-bell { width: 100%; cursor: pointer; border: none; background: transparent; font: inherit; text-align: left; }
.sb-bell.on { color: #6ee7b7; }
.sb-bell.on svg { color: #6ee7b7; }
.sb-bell.off { color: rgba(255,255,255,.5); }
.sb-logout {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 12px; border: none; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font: inherit; font-weight: 600; font-size: .92rem;
  transition: background .18s var(--ease);
}
.sb-logout:hover { background: rgba(255,255,255,.26); }
.sb-logout svg { width: 18px; height: 18px; flex: none; }

/* Mobile top bar + drawer overlay (hidden on desktop) */
.mtopbar { display: none; }
.sb-overlay { display: none; }

/* In-body page header + Back control (surfaced from the old top bar) */
.page-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 18px; }
.page-back {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: #fff; color: var(--brand-700); font-family: 'Lexend', sans-serif; font-weight: 700;
  font-size: .9rem; cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.page-back:hover { background: var(--surface-2); border-color: var(--brand); }
.page-back svg { width: 17px; height: 17px; }
.page-head .ph-title { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1.16rem; line-height: 1.15; color: var(--ink); }
.page-head .ph-sub { font-size: .84rem; color: var(--muted); }

@media (max-width: 860px) {
  body.has-sidebar { padding-left: 0; padding-top: var(--mtopbar-h); }
  .sidebar { transform: translateX(-100%); transition: transform .26s var(--ease); width: 272px; }
  .sidebar.open { transform: translateX(0); }
  .mtopbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; height: var(--mtopbar-h); z-index: 45; padding: 0 14px;
    background: linear-gradient(115deg, var(--brand) 0%, var(--brand-700) 75%, var(--brand-900) 100%);
    color: #fff; box-shadow: 0 4px 16px rgba(122,30,75,.22);
  }
  .mtopbar img { height: 32px; width: 32px; border-radius: 8px; background: #fff; padding: 3px; }
  .mtopbar-title { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1rem; }
  .mburger { background: rgba(255,255,255,.16); border: none; color: #fff; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
  .mburger svg { width: 22px; height: 22px; }
  .sb-overlay.show { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(20,18,26,.45); }
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 26px; margin: 18px 0;
}
.card h2 { margin: 0 0 4px; font-size: 1.24rem; font-weight: 700; }
.card .muted, .muted { color: var(--muted); }
.card .muted { font-size: .95rem; margin-top: 0; }

/* ---------- Fields ---------- */
.field { margin: 16px 0; position: relative; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px; color: var(--ink-2); }
.field label .req { color: var(--brand); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit;
  background: #fff; color: var(--ink); transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
/* A checkbox or radio is a glyph, not a text box. The width:100% above stretched
   them into a 200px bar — harmless while invisible, but the invalid state now
   draws a border, which outlined the bar and made a tick look like a broken
   input. Kept next to the rule that causes it. */
.field input[type="checkbox"], .field input[type="radio"] { width: auto; }
.field input::placeholder { color: #A7A3B0; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(252,24,110,.14);
}
/* A wrong answer is marked three ways — colour, a thicker border, and the ⚠ on
   the message below — because a resident who cannot pick out pink from grey on a
   sun-washed screen must still be able to tell. */
.field.invalid input, .field.invalid select, .field.invalid textarea {
  border-color: var(--err); border-width: 2px; background: #FFF8FA;
}
/* …but a tick box draws its own border; overriding it just smears the control. */
.field.invalid input[type="checkbox"], .field.invalid input[type="radio"] { border-width: 0; background: none; }
.field-error { color: var(--err-ink); font-size: .95rem; line-height: 1.45; margin-top: 8px; display: none; font-weight: 600; }
.field.invalid > .field-error, .field.invalid .field-error { display: flex; gap: 7px; align-items: flex-start; }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.input-icon input { padding-left: 44px; }
.hint { font-size: .82rem; color: var(--muted); }

.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-chip {
  border: 1.5px solid var(--line-2); border-radius: 999px; padding: 10px 18px;
  cursor: pointer; font-size: .92rem; font-weight: 500; user-select: none;
  transition: all .16s var(--ease); background: #fff;
}
.radio-chip:hover { border-color: var(--accent); }
.radio-chip.selected { border-color: var(--brand); background: var(--surface-2); color: var(--brand-700); font-weight: 700; box-shadow: 0 0 0 3px rgba(252,24,110,.10); }

/* Tap-to-fill suggestions for the "Others" place-ownership reason. Visibly
   LIGHTER than .radio-chip on purpose: these fill a text box rather than select
   a fixed option, so they must not read as a fourth radio choice. */
.suggest-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.suggest-chip {
  border: 1px dashed var(--line-2); border-radius: 999px; padding: 6px 13px;
  cursor: pointer; font-size: .8rem; color: var(--muted); background: transparent;
  transition: all .16s var(--ease);
}
.suggest-chip:hover { border-style: solid; border-color: var(--accent); color: var(--brand-700); }
.suggest-chip:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700;
  font-family: 'Lexend', sans-serif; cursor: pointer; border: none; text-decoration: none;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(252,24,110,.30); }
.btn-primary:hover { background: var(--brand-600); box-shadow: 0 10px 26px rgba(252,24,110,.38); }
.btn-primary:disabled { background: #F4A9C7; box-shadow: none; cursor: not-allowed; }
.btn-secondary { background: #fff; color: var(--brand-700); border: 1.5px solid var(--line-2); }
.btn-secondary:hover { border-color: var(--accent); background: var(--surface-2); }
.btn-block { width: 100%; }
/* wrap so the docked validation summary can claim a full line of its own above
   the buttons without squeezing them (see .form-summary) */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn-row .btn { flex: 1; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.badge-checking { background: var(--info-bg); color: #1D4ED8; }
.badge-compliance { background: var(--warn-bg); color: var(--warn); }
.badge-approved { background: var(--ok-bg); color: #15803D; }
.badge-denied { background: var(--err-bg); color: var(--err); }
.badge-default { background: #EEECF2; color: #5A5666; }

/* ---------- Step indicator ---------- */
.step-indicator { display: flex; gap: 6px; margin: 6px 0 6px; }
.step-dot { flex: 1; height: 7px; border-radius: 999px; background: var(--line-2); transition: background .3s var(--ease); }
.step-dot.done { background: var(--accent); }
.step-dot.active { background: var(--brand); box-shadow: 0 0 0 3px rgba(252,24,110,.15); }
.step-label { font-size: .82rem; color: var(--muted); margin-bottom: 10px; font-weight: 600; }

/* ---------- Business cards ---------- */
.biz-card {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  box-shadow: var(--shadow-sm); margin: 14px 0; transition: transform .15s var(--ease), box-shadow .18s var(--ease);
}
.biz-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.biz-card .avatar { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-700)); color: #fff; font-weight: 800; font-family: 'Lexend'; flex: none; }
.biz-card .info { flex: 1; min-width: 0; }
.biz-card .name { font-weight: 700; }
.biz-card .id { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Misc ---------- */
.center { text-align: center; }
.link { color: var(--brand-600); text-decoration: none; font-weight: 700; }
.link:hover { text-decoration: underline; }
.error-banner { background: var(--err-bg); color: var(--err-ink); border: 1.5px solid #F3A9BC; border-radius: var(--radius-sm); padding: 14px 16px 14px 44px; font-size: 1rem; line-height: 1.45; font-weight: 600; display: none; margin: 14px 0; position: relative; }
.error-banner.show { display: block; animation: fadeUp .22s var(--ease); }
.error-banner::before { content: '!'; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: var(--err); color: #fff; font-weight: 800;
  font-size: .8rem; display: grid; place-items: center; }
/* Confirmation counterpart of .error-banner — same geometry so a pane can swap
   one for the other without the layout jumping. Used by the PIN reset flow to say
   a code actually went out; that step used to claim success unconditionally, so
   this must only ever be shown on a real server confirmation. */
.ok-banner { background: var(--ok-bg); color: #15803D; border: 1px solid #BBF7D0; border-radius: var(--radius-sm); padding: 13px 15px 13px 42px; font-size: .92rem; font-weight: 500; display: none; margin: 14px 0; position: relative; }
.ok-banner.show { display: block; animation: fadeUp .22s var(--ease); }
.ok-banner::before { content: '✓'; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; font-weight: 800;
  font-size: .8rem; display: grid; place-items: center; }
/* inline per-field error gets a warning glyph so it reads as an error without
   depending on the colour, which is the half of the signal presbyopia eats */
.field-error::before { content: '⚠'; flex: none; font-size: 1.02rem; line-height: 1.35; }
/* shake the field we jump to, so the resident's eye lands on it */
@keyframes fieldShake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
.field.shake { animation: fieldShake .4s ease; }

/* ---------- Plain-language form help (js/formhelp.js) ---------- */

/* Focus hint — say what belongs in the box BEFORE they get it wrong. Kept
   deliberately far from an error: informational blue, a rounded tint rather than
   a hard border, and an ℹ instead of a ⚠, so the two are told apart by shape as
   well as by colour. A real error always outranks it (:not(.invalid) below).

   Screen-reader-only until the field takes focus. Sighted residents get it on
   demand; a screen reader gets it every time through aria-describedby, which is
   the same courtesy delivered by another route. */
.field-hint {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.field.show-hint:not(.invalid) > .field-hint {
  position: static; width: auto; height: auto; clip: auto; clip-path: none;
  overflow: visible; white-space: normal;
  display: flex; gap: 8px; align-items: flex-start;
  margin: 8px 0 0; padding: 10px 13px; border-radius: 11px;
  background: var(--info-bg); border: 1px solid #C3D4FF; color: var(--info-ink);
  font-size: .93rem; line-height: 1.45; font-weight: 600;
}
.field.show-hint:not(.invalid) > .field-hint::before { content: 'ℹ'; flex: none; font-weight: 800; font-size: 1rem; }

/* The chips are the only way to answer a yes/no question, so they must show
   where the keyboard is — the shared :focus ring never reached a <span>. */
.radio-chip:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; }

/* Validation summary, docked to the sticky .btn-row.

   This is the fix for the complaint that started all of it: the old banner sat
   at the top of the form, in document flow. Answer a question near the bottom of
   a long step, press Next, and the message appeared a screenful above you — the
   page did not visibly change and the button looked broken. Riding the sticky
   action row puts the answer directly above the button that produced it, at any
   scroll position, and inherits that row's z-index (5) so it stays under the
   Line-of-Business dropdown, the sidebar and the modals rather than fighting them.

   order:-1 + width:100% gives it its own line whether .btn-row is laid out as a
   row (desktop) or a column (phone, see the max-width block below). */
.form-summary {
  order: -1; flex: 0 0 auto; width: 100%; position: relative;
  background: var(--err-bg); color: var(--err-ink);
  border: 1.5px solid #F3A9BC; border-left: 6px solid var(--err);
  border-radius: var(--radius-sm); padding: 14px 52px 15px 16px; margin: 0 0 12px;
  box-shadow: var(--shadow);
}
/* Sticky strip for pages with no action row of their own to ride. No background
   of its own — the summary inside it is opaque, and an empty strip must not
   paint a band across the page. */
.form-summary-dock { position: sticky; bottom: 12px; z-index: 5; }
.form-summary-dock > .form-summary { margin-bottom: 0; }
@keyframes summaryIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.form-summary.is-in { animation: summaryIn .28s var(--ease); }
.form-summary .es-head {
  display: flex; align-items: center; gap: 11px;
  font-family: 'Lexend', sans-serif; font-size: 1.08rem; font-weight: 700; line-height: 1.3;
}
.form-summary .es-glyph {
  flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--err); color: #fff;
  display: grid; place-items: center; font-size: 1rem; font-weight: 700;
}
.form-summary .es-lead { margin: 10px 0 9px; font-size: .97rem; font-weight: 600; }
/* Capped and scrollable: eight missing answers must never push the Next button
   off a small screen, nor bury the field the summary is pointing at — that would
   trade one usability bug for a worse one. The headline carries the true count,
   so a scrolled list never hides how much is left. */
.form-summary .es-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 19vh; overflow-y: auto; overscroll-behavior: contain;
}
.form-summary .es-note { margin: 10px 0 0; font-size: .97rem; font-weight: 600; }
.es-jump {
  font: inherit; font-size: .97rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 44px; padding: 9px 15px;
  background: #fff; color: var(--err-ink); border: 1.5px solid #F3A9BC; border-radius: 999px;
  text-decoration: underline; text-underline-offset: 3px; text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.es-jump:hover { background: var(--err); border-color: var(--err); color: #fff; }
.es-jump:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.es-x {
  position: absolute; top: 7px; right: 7px; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: transparent; color: var(--err-ink); font-size: 1.6rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.es-x:hover { background: rgba(225,29,72,.13); }
.es-x:focus-visible { outline: 3px solid var(--ink); outline-offset: -2px; }
/* "prefilled from your profile" note in the owner step */
.profile-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px;
  border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: .88rem; line-height: 1.5; }
.profile-note svg { width: 18px; height: 18px; flex: none; color: #059669; margin-top: 1px; }
/* Expanded Data Privacy Notice (New Permit step 1) */
.privacy { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 4px; }
.pv-block { border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; background: var(--surface-2); }
.pv-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.pv-h svg { width: 19px; height: 19px; flex: none; color: var(--brand); }
.pv-h h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.pv-block ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.pv-block li { font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.privacy-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 15px 16px;
  border-radius: 14px; background: linear-gradient(135deg, rgba(252,24,110,.06), rgba(197,14,84,.04));
  border: 1.5px solid rgba(252,24,110,.22); }
.privacy-consent input { width: auto; margin-top: 3px; flex: none; width: 20px; height: 20px; accent-color: var(--brand); }
/* The consent box is not a .field, so it needs its own untouched-yet marking —
   it is the one thing standing between the resident and step 2. */
.privacy-consent.invalid { border-color: var(--err); background: var(--err-bg); }
.privacy-consent span { font-size: .92rem; line-height: 1.55; color: var(--ink); }
.empty { text-align: center; color: var(--muted); padding: 36px 14px; font-size: 1rem; }
.section { display: none; }
.section.active { display: block; animation: fadeUp .28s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ================= AUTH (login) split hero ================= */
.auth {
  min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr;
}
.auth-hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 120% at 0% 0%, #FF4E92 0%, var(--brand) 35%, var(--brand-700) 72%, var(--brand-900) 100%);
  padding: 56px 52px; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-hero::before, .auth-hero::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.09);
}
.auth-hero::before { width: 420px; height: 420px; right: -140px; top: -120px; }
.auth-hero::after { width: 300px; height: 300px; left: -110px; bottom: -90px; background: rgba(255,255,255,.06); }
.auth-hero .brandline { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.auth-hero .brandline img { height: 52px; width: 52px; border-radius: 14px; background: #fff; padding: 5px; box-shadow: var(--shadow); }
.auth-hero .brandline .n { font-family: 'Lexend'; font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.auth-hero .brandline .s { font-size: .85rem; opacity: .9; }
.auth-hero .headline { position: relative; z-index: 1; }
.auth-hero .headline h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.08; margin: 0 0 14px; }
.auth-hero .headline p { font-size: 1.08rem; opacity: .95; max-width: 34ch; margin: 0; }
.auth-hero .points { position: relative; z-index: 1; display: grid; gap: 14px; margin-top: 8px; }
.auth-hero .point { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.auth-hero .point .ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.16); display: grid; place-items: center; flex: none; }
.auth-hero .point .ic svg { width: 20px; height: 20px; }
.auth-hero .foot { position: relative; z-index: 1; font-size: .82rem; opacity: .8; }

.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 28px; background: var(--bg); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .welcome { font-family: 'Lexend'; font-weight: 800; font-size: 1.7rem; margin: 0 0 6px; }
.auth-card .sub { color: var(--muted); margin: 0 0 22px; }
.auth-mobile-brand { display: none; }

/* Responsive: stack on tablet/mobile */
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-form { min-height: 100dvh; align-items: flex-start; padding-top: 0; }
  .auth-mobile-brand {
    display: flex; align-items: center; gap: 13px; width: 100%;
    background: linear-gradient(115deg, var(--brand), var(--brand-700) 75%, var(--brand-900));
    color: #fff; padding: 22px 20px; margin: 0 -28px 26px; box-shadow: 0 6px 20px rgba(122,30,75,.22);
  }
  .auth-mobile-brand img { height: 44px; width: 44px; border-radius: 12px; background: #fff; padding: 4px; }
  .auth-mobile-brand .n { font-family: 'Lexend'; font-weight: 800; font-size: 1.05rem; line-height: 1.1; }
  .auth-mobile-brand .s { font-size: .8rem; opacity: .92; }
  .auth-card { padding: 0 4px; }
}
/* ================= DASHBOARD — My Businesses ================= */
.dash-hero {
  position: relative; overflow: hidden; color: #fff;
  border-radius: var(--radius);
  background: radial-gradient(120% 130% at 0% 0%, #FF4E92 0%, var(--brand) 38%, var(--brand-700) 78%, var(--brand-900) 100%);
  padding: 26px 26px 24px; margin: 18px 0 4px;
  box-shadow: var(--shadow-lg);
}
.dash-hero::before, .dash-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.10); pointer-events: none; }
.dash-hero::before { width: 260px; height: 260px; right: -90px; top: -110px; }
.dash-hero::after { width: 170px; height: 170px; right: 40px; bottom: -110px; background: rgba(255,255,255,.07); }
.dash-hero .eyebrow { position: relative; z-index: 1; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .88; margin-bottom: 8px; }
.dash-hero h1 { position: relative; z-index: 1; font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 1.72rem; line-height: 1.12; margin: 0 0 8px; }
.dash-hero p { position: relative; z-index: 1; margin: 0; font-size: 1rem; opacity: .95; max-width: 40ch; }

/* Prominent New Permit call-to-action */
.cta-new {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  background: linear-gradient(115deg, var(--brand) 0%, var(--brand-600) 55%, var(--brand-700) 100%);
  color: #fff; border-radius: var(--radius); padding: 18px 20px; margin: 18px 0 6px;
  box-shadow: 0 12px 28px rgba(252,24,110,.30);
  transition: transform .14s var(--ease), box-shadow .2s var(--ease);
}
.cta-new:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(252,24,110,.40); }
.cta-new:active { transform: translateY(0); }
.cta-new .cta-ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.20); display: grid; place-items: center; flex: none; }
.cta-new .cta-ic svg { width: 26px; height: 26px; }
.cta-new .cta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cta-new .cta-title { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1.08rem; line-height: 1.2; }
.cta-new .cta-sub { font-size: .86rem; opacity: .9; }
.cta-new .cta-arrow svg { width: 22px; height: 22px; opacity: .9; }

.list-head { display: flex; align-items: center; gap: 10px; margin: 24px 2px 4px; }
.list-head h2 { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1.12rem; margin: 0; }
.list-head .count { font-size: .78rem; font-weight: 700; color: var(--brand-700); background: var(--surface-2); border: 1px solid var(--line-2); padding: 2px 10px; border-radius: 999px; }

/* Search over the resident's own businesses (dashboard). Sits between the
   "Your businesses" heading and the list; revealed by mountSearch(). */
.biz-search { position: relative; margin: 10px 2px 14px; }
.biz-search svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted); pointer-events: none;
}
.biz-search input {
  width: 100%; box-sizing: border-box; padding: 11px 14px 11px 40px;
  font: inherit; font-size: .95rem; color: inherit;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.biz-search input::placeholder { color: var(--muted); }
.biz-search input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(252, 24, 110, .1);
}
/* Safari draws its own round clear button, which collides with the radius. */
.biz-search input::-webkit-search-cancel-button { cursor: pointer; }

/* Business card polish (extends .biz-card) */
.biz-card { text-decoration: none; color: inherit; }
.biz-card .chev { color: var(--line-2); flex: none; transition: color .16s var(--ease), transform .16s var(--ease); }
.biz-card:hover .chev { color: var(--brand); transform: translateX(2px); }

/* Empty state */
.empty-state { text-align: center; padding: 40px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 14px 0; }
.empty-state .empty-ic { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 22px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--brand); }
.empty-state .empty-ic svg { width: 38px; height: 38px; }
.empty-state h3 { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1.16rem; margin: 0 0 6px; }
.empty-state p { color: var(--muted); margin: 0 auto 20px; max-width: 34ch; }
.empty-state .btn { display: inline-flex; }

/* ================= WIZARD — New Business Permit ================= */
.wizard-progress {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 18px; margin: 18px 0 4px;
}
.wizard-progress .wp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wizard-progress .wp-name { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.wizard-progress .step-label { margin: 0; }
.wizard-progress .step-indicator { margin: 0; }

/* Section step header: icon + title */
.step-head { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
.step-head .step-ic {
  width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--surface-2), #fff); border: 1.5px solid var(--line-2); color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.step-head .step-ic svg { width: 24px; height: 24px; }
.step-head h2 { margin: 0; }
.section.card > .muted:first-of-type, .section.card .step-head + .muted { margin-top: 2px; }
.sub-head { display: flex; align-items: center; gap: 10px; margin: 22px 0 4px; }
.sub-head .sub-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--brand-700); }
.sub-head .sub-ic svg { width: 17px; height: 17px; }
.sub-head h2 { margin: 0 !important; font-size: 1.02rem !important; }

.section.card { padding-top: 22px; }
/* The fade is a fixed 20px at the top rather than a percentage: the row now also
   carries the validation summary, and a percentage fade would leave the page
   showing through behind a tall one. */
.btn-row { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg) calc(100% - 20px), rgba(245,246,250,0)); padding: 14px 0 6px; margin-top: 26px; z-index: 5; }

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

/* ---------- Business item actions (dashboard) ---------- */
.biz-item { margin: 14px 0; }
.biz-item .biz-card { margin: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.biz-actions { display: flex; gap: 0; border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; background: #fff; }
.pill-btn { flex: 1; text-align: center; padding: 11px; font-weight: 700; font-family: 'Lexend';
  font-size: .9rem; text-decoration: none; cursor: pointer; transition: background .15s var(--ease); }
.pill-btn.renew { color: var(--brand-700); border-right: 1px solid var(--line); }
.pill-btn.renew:hover { background: var(--surface-2); }
.pill-btn.close { color: var(--muted); }
.pill-btn.close:hover { background: #F7F5F9; color: var(--err); }

/* ---------- Simple sub-page shell (renew / closure / csm) ---------- */
.subpage { max-width: 560px; }
.rating-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rating-chip { width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--line-2);
  display: grid; place-items: center; font-weight: 700; cursor: pointer; font-family: 'Lexend'; transition: all .15s var(--ease); }
.rating-chip.selected { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 6px 16px rgba(252,24,110,.28); }
.q-block { padding: 14px 0; border-bottom: 1px solid var(--line); }
.q-block:last-child { border-bottom: none; }
.q-block .q { font-weight: 600; margin-bottom: 10px; }
.success-hero { text-align: center; padding: 20px 8px; }
.success-hero .ic { width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ok), #0E9F6E); color: #fff; }

/* clickable business card + detail view */
a.biz-card { text-decoration: none; color: inherit; }
a.biz-card .chev { color: var(--muted); flex: none; }
.detail-sec { margin: 18px 0; }
.detail-sec h3 { font-size: 1.02rem; margin: 0 0 10px; }
.kv { display: grid; grid-template-columns: 40% 60%; gap: 6px 10px; }
.kv .k { color: var(--muted); font-size: .9rem; }
.kv .v { font-weight: 600; font-size: .92rem; word-break: break-word; }
.doc-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.doc-item:last-child { border-bottom: none; }
.doc-item .folder { font-size: .78rem; color: var(--muted); }
.insp-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.insp-item:last-child { border-bottom: none; }
.insp-item .dept { font-weight: 600; }

/* ================= Responsive (phones / small tablets) ================= */
@media (max-width: 560px) {
  .container { padding: 14px 12px 40px; }
  .card { padding: 18px; border-radius: 14px; }
  .app-header { padding: 12px 14px; gap: 10px; }
  .app-header img { height: 36px; width: 36px; }
  .app-header .title { font-size: .98rem; }
  .app-header .subtitle { font-size: .74rem; }
  .app-header a.logout, .app-header .logout { padding: 6px 12px; font-size: .8rem; }
  .card h2 { font-size: 1.12rem; }
  .auth-card .welcome { font-size: 1.45rem; }
  /* stack key/value in detail view */
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv .k { margin-top: 8px; font-size: .82rem; }
  .kv .v { font-size: 1rem; }
  /* rating chips fit small screens */
  .rating-row { gap: 6px; }
  .rating-chip { width: 40px; height: 40px; font-size: .95rem; }
  /* buttons stack when cramped */
  .btn-row { flex-direction: column; }
  .btn { padding: 13px 18px; }
  .radio-chip { padding: 9px 15px; font-size: .88rem; }
  /* wizard nav stays usable */
  .field input, .field select, .field textarea { font-size: 16px; } /* avoid iOS zoom */
}
@media (max-width: 380px) {
  .rating-chip { width: 36px; height: 36px; }
  .auth-hero { padding: 40px 24px; }
}
/* dash hero + cta scale down */
@media (max-width: 560px) {
  .dash-hero { padding: 22px 18px !important; }
  .dash-hero h1 { font-size: 1.7rem !important; }
  .cta-new { padding: 16px !important; }
}

/* ---------- Document upload slots (add / replace / remove / compile) ---------- */
.doc-slot { margin-bottom: 20px; }
.doc-slot > label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; color: var(--ink-2); }
.doc-slot > label .req { color: var(--brand); }
.doc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 9px; }
.doc-file {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.doc-file svg { width: 20px; height: 20px; flex: none; }
.doc-file-name { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-file-view { flex: none; color: var(--brand-600); font-weight: 700; font-size: .82rem; text-decoration: none; }
.doc-file-view:hover { text-decoration: underline; }
.doc-file-rm {
  flex: none; width: 27px; height: 27px; border-radius: 8px; border: none;
  background: var(--err-bg); color: var(--err); font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .16s var(--ease);
}
.doc-file-rm:hover { background: #F7C6D2; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-mini {
  padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--line-2); background: #fff;
  color: var(--brand-700); font-family: 'Lexend', sans-serif; font-weight: 700; font-size: .82rem;
  cursor: pointer; transition: background .16s var(--ease), border-color .16s var(--ease);
}
.btn-mini:hover { background: var(--surface-2); border-color: var(--brand); }
.doc-compile { border-color: var(--brand); color: var(--brand); background: var(--surface-2); }
.doc-status { margin-top: 7px; min-height: 1em; }

/* ================= Business detail — wide, compact layout ================= */
.container-wide { max-width: 1180px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.detail-grid .card { margin: 0; padding: 20px; }
.detail-grid .span-2 { grid-column: 1 / -1; }
.card-h { margin: 0 0 14px; font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 9px; }
.count-pill { font-size: .72rem; font-weight: 800; background: var(--surface-2); color: var(--brand-700); border: 1px solid var(--line); padding: 2px 9px; border-radius: 999px; }
/* compact key/value — two pairs per row on desktop */
.kv-cols { display: grid; grid-template-columns: minmax(96px,max-content) 1fr minmax(96px,max-content) 1fr; gap: 9px 18px; align-items: baseline; }
.kv-cols .k { color: var(--muted); font-size: .86rem; }
.kv-cols .v { font-weight: 600; font-size: .9rem; word-break: break-word; }

/* department chips (inspection + approvals) */
.dept-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.dept-chip { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.dept-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; }
.dept-ic svg { width: 18px; height: 18px; }
.dept-nm { flex: 1; font-weight: 600; font-size: .9rem; }

/* documents gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.doc-tile { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: #fff; cursor: pointer; text-align: left; font: inherit; transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .12s var(--ease); }
.doc-tile:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.tile-thumb { position: relative; aspect-ratio: 4/3; border-radius: 9px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.tile-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tile-thumb svg { width: 42px; height: 42px; }
.tile-ext { position: absolute; bottom: 7px; font-size: .64rem; font-weight: 800; letter-spacing: .5px; color: var(--muted); }
.tile-meta { display: flex; flex-direction: column; min-width: 0; }
.tile-name { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-folder { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* single row, centered; each button hugs its own label. Never wraps — on a
   narrow viewport the row scrolls sideways rather than breaking to two lines. */
.detail-actions { position: static; background: none; padding: 0; display: flex;
  flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 12px;
  max-width: 100%; margin: 0 auto; overflow-x: auto; }
.detail-actions .act-btn { flex: 0 0 auto; padding: 11px 20px; font-size: .875rem;
  border-radius: 13px; min-height: 52px; gap: 10px; }
.detail-actions .act-ic { width: 34px; height: 34px; border-radius: 10px; }
.detail-actions .act-btn svg { width: 16px; height: 16px; }
/* labels stay on one line and are never truncated */
.detail-actions .act-tx { white-space: nowrap; line-height: 1.2; }
/* divider that visually separates the compliance group from Renew / Close */
.act-sep { flex: 0 0 1px; align-self: stretch; margin: 6px 8px; border-radius: 1px;
  background: linear-gradient(180deg, transparent, rgba(15,23,42,.14), transparent); }

/* payments & assessment (official receipts) */
.pay-list { display: flex; flex-direction: column; gap: 10px; }
.pay-row { border: 1px solid rgba(15,23,42,.08); border-radius: 12px; padding: 12px 14px; background: #fff; }
.pay-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pay-period { font-weight: 700; color: #0f172a; }
/* The year, quiet, beside the assessment's real title. */
.pay-year { margin-left: 8px; font-size: .76rem; font-weight: 700; color: #94A3B8; }
.pay-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: #0f172a; }
.pay-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 7px; font-size: .82rem; color: #64748b; }
.pay-badge { font-size: .7rem; font-weight: 700; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; }
.pay-badge.paid { background: rgba(16,185,129,.12); color: #047857; }
.pay-badge.unpaid { background: rgba(245,158,11,.14); color: #b45309; }
.pay-or { font-weight: 600; color: #0f172a; }

/* QRPh payment modal (MannyPay) */
.pm-panel { max-width: 420px; width: 92%; }
/* The pay modal reuses .modal-panel, which is a tall fixed-height box built for
   the document viewer. Let this one shrink to its (short) content so there is
   no empty space below the QR/status. ID-scoped to also beat the mobile rule. */
#payModal .modal-panel.pm-panel { height: auto; max-height: 90vh; }
/* The panel is a flex column with overflow:hidden, so the body must be the part
   that scrolls — and it needs min-height:0, or a flex item refuses to shrink
   below its content and the overflow is clipped instead of scrolled. Without
   this the wheel does nothing here and the page behind moves instead.
   overscroll-behavior stops the scroll chaining to the page at either end. */
.pm-body { padding: 8px 22px 26px; text-align: center;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; }
/* Belt and braces: while the pay dialog is open the page behind cannot scroll. */
body.modal-open { overflow: hidden; }

/* How long a Tax Order of Payment stays payable — see validity() in
   top-viewer.js. Neutral by default; amber inside a week; red once lapsed. */
.top-valid { display: block; font-size: .72rem; font-weight: 700; margin-top: 2px;
  color: var(--muted, #64748B); }
.top-valid.is-soon { color: #B45309; }
.top-valid.is-lapsed { color: #B91C1C; }

/* A short question, not a viewer. .modal-panel is a tall fixed-height box built
   for the receipt/TOP viewer; a two-button prompt in it would be a wall of white
   with the buttons stranded at the top. */
.modal-panel.ask-panel { height: auto; width: min(440px, 92vw); padding: 24px 24px 20px;
  display: block; }
.ask-panel h2 { font-family: 'Lexend', sans-serif; font-size: 1.15rem; margin: 0 0 8px; }
.ask-panel p { margin: 0 0 18px; font-size: .9rem; line-height: 1.5; }
.ask-panel .btn-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ask-panel .btn-row .btn { flex: 1 1 auto; min-width: 150px; }
@media (max-width: 420px) {
  .ask-panel .btn-row { flex-direction: column-reverse; }
  .ask-panel .btn-row .btn { width: 100%; }
}

/* Payment method chooser — two real options, weighted equally. */
.pm-methods { display: grid; gap: 10px; margin: 18px 0 16px; text-align: left; }
.pm-method { display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 14px; border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff; cursor: pointer; text-align: left; position: relative;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.pm-method:hover { border-color: rgba(252,24,110,.45); transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.pm-method.sel { border-color: var(--brand, #fc186e); box-shadow: 0 0 0 3px rgba(252,24,110,.12); }
.pm-method-ic { flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; }
.pm-method-ic.qrph { background: rgba(252,24,110,.10); color: var(--brand, #fc186e); }
.pm-method-ic.lbp { background: rgba(16,110,190,.10); color: #0b6ebe; }
.pm-method-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-method-t { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: .95rem;
  color: #0f172a; display: flex; align-items: center; gap: 7px; }
.pm-method-d { font-size: .8rem; color: #64748b; line-height: 1.45; }
.pm-chip { font-family: inherit; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  background: rgba(252,24,110,.12); color: var(--brand, #fc186e); }
.pm-method-check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px;
  border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center;
  color: transparent; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.pm-method.sel .pm-method-check { background: var(--brand, #fc186e);
  border-color: var(--brand, #fc186e); color: #fff; }
.pm-continue { width: 100%; }
.pm-amt { font-size: 2.1rem; font-weight: 800; color: #0f172a; margin-top: 6px; }
.pm-sub { color: #64748b; font-size: .85rem; margin-bottom: 18px; }
.pm-open { display: block; width: 100%; margin: 4px 0 14px; }
.pm-hint { font-size: .82rem; color: #64748b; line-height: 1.5; margin: 10px 0; }
.pm-ref { font-size: .72rem; color: #94a3b8; margin-top: 12px; }
.pm-wait { display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 16px 0 4px; font-size: .9rem; font-weight: 600; color: var(--brand, #fc186e); }
.pm-spin { width: 16px; height: 16px; border: 2px solid rgba(252,24,110,.25);
  border-top-color: var(--brand, #fc186e); border-radius: 50%; animation: pm-rot .8s linear infinite; }
@keyframes pm-rot { to { transform: rotate(360deg); } }
.pm-result { padding: 14px 0 6px; }
.pm-result .pm-ic { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; }
.pm-result.ok .pm-ic { background: rgba(16,185,129,.12); color: #059669; }
.pm-result.bad .pm-ic { background: rgba(239,68,68,.12); color: #dc2626; }
.pm-result h3 { margin: 0 0 8px; font-size: 1.15rem; color: #0f172a; }
.pm-result p { color: #64748b; font-size: .9rem; margin: 0 0 18px; }

/* Fee breakdown (what the resident is paying for) — premium, grouped */
.fee-details { margin-top: 12px; }
.fee-details > summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--brand, #fc186e);
  list-style: none; padding: 8px 12px; border-radius: 10px; background: rgba(252,24,110,.06);
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s ease; }
.fee-details > summary:hover { background: rgba(252,24,110,.1); }
.fee-details > summary::-webkit-details-marker { display: none; }
.fee-details > summary::before { content: '▸'; font-size: .7rem; }
.fee-details[open] > summary::before { content: '▾'; }
.fee-list { margin-top: 12px; border: 1px solid rgba(15,23,42,.08); border-radius: 14px; padding: 14px;
  background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.fee-group { margin-bottom: 14px; }
.fee-group:last-of-type { margin-bottom: 6px; }
.fee-grp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fee-grp-ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--brand, #fc186e);
  display: grid; place-items: center; }
.fee-grp-ic svg { width: 15px; height: 15px; }
.fee-grp-name { flex: 1; font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: #64748b; }
.fee-grp-sub { font-size: .74rem; font-weight: 800; color: #64748b; font-variant-numeric: tabular-nums; }
.fee-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0 5px 30px; font-size: .85rem; }
.fee-row .fee-name { color: #334155; }
.fee-row .fee-amt { color: #0f172a; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fee-late { font-size: .6rem; font-weight: 800; color: #b45309; background: rgba(245,158,11,.16);
  padding: 1px 5px; border-radius: 4px; text-transform: uppercase; margin-left: 4px; }
.fee-total { display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
  padding: 12px 14px; border-radius: 12px; font-weight: 800; color: #0f172a; font-size: .9rem;
  background: linear-gradient(90deg, rgba(252,24,110,.12), rgba(252,24,110,.03)); }
.fee-total-amt { color: var(--brand, #fc186e); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.fee-note { margin-top: 8px; font-size: .72rem; color: #94a3b8; line-height: 1.5; }
.pm-fees { text-align: left; margin: 10px 0 16px; }
.pm-fees > summary { width: 100%; justify-content: center; }
.pm-soon-badge { display: inline-block; margin: 2px auto 10px; padding: 4px 12px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #b45309; background: rgba(245,158,11,.15); }
.pm-inperson { text-align: left; margin: 4px 0 18px; padding: 14px; border-radius: 12px;
  background: rgba(252,24,110,.05); border: 1px solid rgba(252,24,110,.14); }
.pm-inperson-h { font-weight: 700; font-size: .9rem; color: #0f172a; margin-bottom: 4px; }
.pm-inperson p { font-size: .82rem; color: #64748b; line-height: 1.55; margin: 0; }

/* ---- Cash / pay at the Municipal Hall -------------------------------------
   An instruction panel, not a transaction. Amber-slate rather than the brand
   pink, so it never reads as "payment in progress". Every cue is icon + label
   + text, never colour alone. */
.pm-method-ic.cash { background: rgba(180,83,9,.10); color: #b45309; }
.pm-cash-badge { display: inline-flex; align-items: center; gap: 6px; margin: 2px auto 10px;
  padding: 5px 12px; border-radius: 999px; font-size: .68rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: #b45309; background: rgba(245,158,11,.15); }
.pm-cash-warn { display: flex; gap: 9px; text-align: left; margin: 0 0 16px; padding: 12px 14px;
  border-radius: 12px; background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.18);
  color: #b91c1c; font-size: .8rem; line-height: 1.5; }
.pm-cash-warn svg { flex: none; margin-top: 2px; }
.pm-cash-where { text-align: left; margin: 0 0 14px; padding: 14px; border-radius: 14px;
  background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.22); }
.pm-cash-where-h { display: flex; align-items: center; gap: 11px; color: #b45309; }
.pm-cash-where-h svg { flex: none; }
.pm-cash-where-t { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: .98rem; color: #0f172a; }
.pm-cash-where-s { font-size: .82rem; color: #64748b; margin-top: 2px; }
.pm-cash-ref { text-align: left; margin: 0 0 14px; padding: 14px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); }
.pm-cash-ref-h { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: 9px; }
.pm-cash-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 6px 0; border-top: 1px solid rgba(15,23,42,.06); font-size: .85rem; }
.pm-cash-kv:first-of-type { border-top: 0; }
.pm-cash-kv span { color: #64748b; flex: none; }
.pm-cash-kv b { color: #0f172a; font-weight: 700; text-align: right; word-break: break-word;
  font-variant-numeric: tabular-nums; }
.pm-cash-steps { list-style: none; margin: 4px 0 14px; padding: 0; text-align: left;
  display: grid; gap: 12px; }
.pm-cash-step { display: flex; gap: 11px; align-items: flex-start; }
.pm-cash-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid;
  place-items: center; font-size: .74rem; font-weight: 800; color: #b45309;
  background: rgba(245,158,11,.16); }
.pm-cash-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-cash-tx b { font-size: .875rem; font-weight: 700; color: #0f172a; line-height: 1.4; }
.pm-cash-tx span { font-size: .8rem; color: #64748b; line-height: 1.5; }
.pm-cash-note { display: flex; gap: 9px; text-align: left; margin: 0 0 16px; padding: 12px 14px;
  border-radius: 12px; background: #f8fafc; border: 1px solid var(--line);
  font-size: .8rem; color: #475569; line-height: 1.55; }
.pm-cash-note svg { flex: none; margin-top: 2px; color: #64748b; }
.pm-cash-note b { color: #0f172a; }
.pm-cash-actions { display: grid; gap: 9px; }
@media print {
  .pm-cash-actions, .pm-cash-steps, .pm-cash-note { display: none; }
}

/* List of Incorporators (SEC / Corporation / Cooperative) */
.inc-field[hidden] { display: none; }
.inc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.inc-head label { margin: 0; }
.inc-head .hint { margin: 4px 0 0; }
.inc-add { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; cursor: pointer;
  border: 0; border-radius: 11px; padding: 10px 15px; font-family: inherit; font-size: .85rem; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--brand, #FC186E), #d1105a);
  box-shadow: 0 6px 16px rgba(252,24,110,.28); transition: transform .12s ease, box-shadow .12s ease; }
.inc-add:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(252,24,110,.34); }
.inc-add:active { transform: translateY(0); }
.inc-add svg { width: 16px; height: 16px; }
.inc-list { display: flex; flex-direction: column; gap: 12px; }
.inc-row { border: 1px solid rgba(15,23,42,.09); border-radius: 14px; padding: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04); animation: lobIn .16s ease-out; }
.inc-row-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.inc-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-size: .78rem;
  font-weight: 700; color: var(--brand, #FC186E); background: rgba(252,24,110,.1); }
.inc-remove { cursor: pointer; border: 0; background: rgba(239,68,68,.08); color: #dc2626;
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; transition: background .12s ease; }
.inc-remove:hover { background: rgba(239,68,68,.16); }
.inc-remove svg { width: 15px; height: 15px; }
.inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; }
.inc-row input { width: 100%; }
.inc-row input.inc-bad { border-color: #ef4444; background: #fff5f5; }
.inc-field.invalid > .field-error { display: flex; gap: 7px; align-items: flex-start; }
@media (max-width: 560px) { .inc-grid { grid-template-columns: 1fr; } }

/* document viewer dialog */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(12,10,18,.74); backdrop-filter: blur(2px); }
.modal-panel { position: relative; z-index: 1; width: min(1040px, 94vw); height: min(88vh, 940px); background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.modal-title { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-sub { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.modal-x { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--surface-2); color: var(--ink-2); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.modal-x:hover { background: var(--err-bg); color: var(--err); }
.modal-body { flex: 1; overflow: auto; display: grid; place-items: center; background: var(--surface-2); }
.modal-body img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.modal-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.viewer-fallback { text-align: center; padding: 44px 24px; }
.viewer-fallback .vf-ic { position: relative; display: inline-grid; place-items: center; margin-bottom: 14px; }
.viewer-fallback .vf-ic svg { width: 64px; height: 64px; }
.viewer-fallback p { color: var(--muted); margin: 0 0 18px; }
.modal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); display: grid; place-items: center; }
.modal-nav:hover { background: #fff; }
.modal-nav.prev { left: 12px; } .modal-nav.next { right: 12px; }

@media (max-width: 820px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid .span-2 { grid-column: auto; }
  .kv-cols { grid-template-columns: minmax(90px,max-content) 1fr; }
  .modal-panel { width: 96vw; height: 92vh; border-radius: 12px; }
}

/* documents grouped by type */
.doc-groups { display: flex; flex-direction: column; gap: 20px; }
.doc-group-h { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; font-family: 'Lexend', sans-serif; font-weight: 700; font-size: .92rem; color: var(--ink-2); }
.doc-group-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.doc-group-h .count-pill { flex: none; }

/* ================= Business detail — PREMIUM restyle ================= */
.detail-grid .card { box-shadow: 0 2px 4px rgba(20,18,26,.04), 0 10px 30px rgba(20,18,26,.05); border-color: #EFEDF3; border-radius: 18px; }

/* Hero summary banner */
.biz-hero {
  border-radius: 22px; padding: 26px 30px; margin-bottom: 18px; color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(255,101,139,.55) 0%, rgba(255,101,139,0) 46%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 56%, var(--brand-900) 100%);
  box-shadow: 0 18px 44px rgba(122,30,75,.30);
}
.biz-hero::after { content:""; position:absolute; right:-50px; top:-70px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.08); }
.biz-hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; position:relative; z-index:1; }
.biz-eyebrow { text-transform:uppercase; letter-spacing:1.5px; font-size:.72rem; font-weight:700; opacity:.85; }
.biz-hero-name { font-family:'Lexend',sans-serif; font-weight:800; font-size:1.72rem; line-height:1.1; margin:7px 0 4px; }
.biz-hero-id { font-size:.9rem; opacity:.92; font-variant-numeric:tabular-nums; }
.biz-hero-stats { display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:22px; position:relative; z-index:1;
  border-top:1px solid rgba(255,255,255,.16); padding-top:18px; }
.hstat { display:flex; flex-direction:column; gap:3px; }
.hstat-l { font-size:.7rem; text-transform:uppercase; letter-spacing:.7px; opacity:.82; }
.hstat-v { font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums; }

/* premium status pill with dot */
.spill { display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 11px; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; border:1px solid transparent; }
.spill-dot { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(255,255,255,.3); }
.spill-ok   { background:var(--ok-bg);   color:#15803D; border-color:#BBF7D0; }
.spill-warn { background:var(--warn-bg); color:#B45309; border-color:#FDE3C7; }
.spill-bad  { background:var(--err-bg);  color:var(--err); border-color:#F7C6D2; }
.spill-wait { background:#EDF1F7; color:#475569; border-color:#E2E8F0; }
/* Per-stage status colors (FOR CHECKING → RELEASED). Each stage reads distinctly. */
.spill-checking   { background:#EEF3FF; color:#1D4ED8; border-color:#C7D7FE; }
.spill-inspection { background:#F3EEFE; color:#6D28D9; border-color:#DDD0FB; }
.spill-approval   { background:#FEF4E6; color:#B45309; border-color:#FBE0B5; }
.spill-payment    { background:#FFF0E6; color:#C2410C; border-color:#FED2B4; }
.spill-releasing  { background:#E6F7FA; color:#0E7490; border-color:#BAE8F0; }
.spill-compliance { background:#FEECEF; color:#BE123C; border-color:#FBCFD8; }
/* Highlighted "action needed" compliance callout (top of a FOR COMPLIANCE detail). */
/* ⚠️ `display:block` is load-bearing. An EARLIER `.comply-callout` rule (see the
   "Comply & Resubmit callout" block above) sets `display:flex`, and the cascade
   merges per-property — so without this the head, the "Required documents"
   heading, the list and the CTA all lay out as one horizontal row instead of
   stacking. The inner .comply-callout-head does its own flex. */
.comply-callout { display: block; margin: 14px 0 4px; padding: 18px 18px 16px; border-radius: 18px;
  background: linear-gradient(180deg,#FFF5F8 0%,#FEECEF 100%); border: 1.5px solid #F9B9C8;
  box-shadow: 0 12px 30px rgba(190,18,60,.10); }
.comply-callout-head { display:flex; gap:13px; align-items:flex-start; }
.comply-ic { flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:#FBD5DE; color:#BE123C; }
.comply-ic svg { width:20px; height:20px; }
.comply-ttl { font-weight:800; font-size:.98rem; color:#9F1239; letter-spacing:.1px; }
.comply-sub { margin-top:3px; font-size:.86rem; color:#7A2233; line-height:1.5; }
/* The LGU's OWN words about what is wrong.
   This used to be tacked onto the end of the boilerplate sentence at .86rem,
   where residents looked straight at it and reported they could not see
   anything. It is the single most important text on the page — the only line
   that says what to actually DO — so it gets its own panel, a heavier face, and
   a short pulse on arrival.
   The pulse animates the RING only, never opacity or transform: text that fades
   or moves is harder to read, which would defeat the point. It runs three times
   and stops — a box that throbs forever becomes wallpaper. */
.comply-reason {
  position: relative;
  margin: 16px 0 4px;
  padding: 14px 15px 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F6 100%);
  border: 2px solid #F43F5E;
  animation: complyAura 2.2s ease-in-out infinite;
}
/* The red aura. It KEEPS breathing rather than settling after a few cycles:
   the whole reason this exists is that residents looked straight at a static
   version and reported seeing nothing, and this panel is the only thing on the
   page that says what they must actually do. Still motion-safe — only the glow
   moves, never the text. */
@keyframes complyAura {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(244, 63, 94, .42),
                0 0 14px 0 rgba(244, 63, 94, .22);
    border-color: #FB7185;
  }
  50% {
    box-shadow: 0 0 0 9px rgba(244, 63, 94, 0),
                0 0 26px 4px rgba(244, 63, 94, .40);
    border-color: #E11D48;
  }
}
.comply-reason-lbl {
  display: flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: #9F1239; margin-bottom: 10px;
}
/* A small live dot — the cue that this is the thing waiting on you. */
.comply-reason-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #E11D48; flex: none;
  animation: complyDot 2.2s ease-in-out infinite;
}
@keyframes complyDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, .55); }
  70%      { box-shadow: 0 0 0 7px rgba(244, 63, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .comply-reason-dot { animation: none; box-shadow: 0 0 0 3px rgba(244, 63, 94, .25); }
}
/* One row per office. Two offices asking for different documents are two
   separate requests, and used to run together into one sentence joined by
   " • " that nobody could parse. */
.comply-ask { padding-bottom: 12px; }
.comply-ask + .comply-ask { border-top: 1px dashed #FBCFE8; padding-top: 12px; }
.comply-ask-office {
  display: inline-block; margin-bottom: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: #9F1239; color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
}
.comply-ask-tx {
  margin: 0;
  font-size: 1.02rem; line-height: 1.55; font-weight: 650; color: #7F1D1D;
  white-space: pre-wrap;      /* the LGU types real line breaks */
  overflow-wrap: anywhere;    /* long clearance names must not overflow */
}
/* Someone who asked for less motion still gets the emphasis, just still. */
@media (prefers-reduced-motion: reduce) {
  /* No breathing, but keep the red aura so the emphasis survives. */
  .comply-reason {
    animation: none;
    border-color: #E11D48;
    box-shadow: 0 0 18px 2px rgba(244, 63, 94, .30);
  }
}

.comply-docs-h { margin:14px 0 6px; font-size:.72rem; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; color:#BE123C; }
.comply-docs { margin:0 0 4px; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.comply-docs li { position:relative; padding:9px 12px 9px 34px; border-radius:11px; background:#fff;
  border:1px solid #F6C9D4; font-size:.88rem; font-weight:600; color:#0f172a; }
.comply-docs li::before { content:''; position:absolute; left:13px; top:50%; width:9px; height:9px;
  margin-top:-4.5px; border-radius:50%; background:#F43F5E; box-shadow:0 0 0 3px rgba(244,63,94,.16); }
.comply-cta { display:block; width:100%; margin-top:14px; text-align:center; }
/* A denial is a harder stop than a compliance request: deeper red, no CTA,
   nothing to act on. Same geometry as the compliance callout so the two read as
   one family — a resident who has seen either recognises the other. */
.comply-callout-denied { background: linear-gradient(180deg,#FEF2F2 0%,#FEE2E2 100%);
  border-color:#FCA5A5; box-shadow:0 12px 30px rgba(185,28,28,.12); }
.comply-callout-denied .comply-ic { background:#FECACA; color:#B91C1C; }
.comply-callout-denied .comply-ttl { color:#7F1D1D; }
.comply-callout-denied .comply-sub { color:#7F1D1D; }
@media (max-width: 640px) { .comply-callout { padding:16px 14px 14px; } }

/* premium department rows */
.dept-grid { display:flex; flex-direction:column; gap:9px; }
.dept-row {
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:13px;
  background:#fff; border:1px solid var(--line); position:relative; overflow:hidden;
  transition: box-shadow .16s var(--ease), transform .12s var(--ease), border-color .16s var(--ease);
}
.dept-row::before { content:""; position:absolute; left:0; top:11px; bottom:11px; width:3px; border-radius:0 3px 3px 0; background:#CBD5E1; }
.dept-row.tone-ok::before   { background:#22C55E; }
.dept-row.tone-warn::before { background:#F59E0B; }
.dept-row.tone-bad::before  { background:var(--err); }
.dept-row:hover { box-shadow:0 6px 18px rgba(20,18,26,.07); transform:translateY(-1px); border-color:var(--line-2); }
.dept-ic { width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; }
.dept-ic svg { width:18px; height:18px; }
.dept-ic.tone-ok   { background:var(--ok-bg);   color:#15803D; }
.dept-ic.tone-warn { background:var(--warn-bg); color:#B45309; }
.dept-ic.tone-bad  { background:var(--err-bg);  color:var(--err); }
.dept-ic.tone-wait { background:#EDF1F7; color:#64748B; }
.dept-nm { flex:1; font-weight:600; font-size:.92rem; }

/* progress indicator */
.card-h-row { display:flex; align-items:center; justify-content:space-between; }
.prog { height:7px; border-radius:999px; background:#EEF1F6; overflow:hidden; margin:2px 0 7px; }
.prog-bar { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--brand-600)); transition:width .5s var(--ease); }
.prog-meta { font-size:.76rem; color:var(--muted); font-weight:600; margin-bottom:15px; }

/* premium gallery tiles */
.doc-tile { border-radius:14px; box-shadow:0 1px 2px rgba(20,18,26,.04); }
.doc-tile:hover { box-shadow:0 10px 26px rgba(20,18,26,.10); }
.doc-group-h { color:var(--ink-2); }

/* department row remark (color-coded by tone) */
.dept-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dept-remark { font-size: .78rem; line-height: 1.35; font-weight: 500; }
.dept-remark.tone-ok   { color: #15803D; }
.dept-remark.tone-warn { color: #B45309; }
.dept-remark.tone-bad  { color: var(--err); }
/* Per-stage tones for department rows (accent bar, icon tile, remark text). */
.dept-row.tone-checking::before   { background:#3B82F6; }
.dept-row.tone-inspection::before { background:#8B5CF6; }
.dept-row.tone-approval::before   { background:#F59E0B; }
.dept-row.tone-payment::before    { background:#F97316; }
.dept-row.tone-releasing::before  { background:#06B6D4; }
.dept-row.tone-compliance::before { background:#F43F5E; }
.dept-ic.tone-checking   { background:#EEF3FF; color:#1D4ED8; }
.dept-ic.tone-inspection { background:#F3EEFE; color:#6D28D9; }
.dept-ic.tone-approval   { background:#FEF4E6; color:#B45309; }
.dept-ic.tone-payment    { background:#FFF0E6; color:#C2410C; }
.dept-ic.tone-releasing  { background:#E6F7FA; color:#0E7490; }
.dept-ic.tone-compliance { background:#FEECEF; color:#BE123C; }
.dept-remark.tone-checking   { color:#1D4ED8; }
.dept-remark.tone-inspection { color:#6D28D9; }
.dept-remark.tone-approval   { color:#B45309; }
.dept-remark.tone-payment    { color:#C2410C; }
.dept-remark.tone-releasing  { color:#0E7490; }
.dept-remark.tone-compliance { color:#BE123C; }
.dept-remark.tone-wait { color: var(--muted); }

/* ================= Premium dashboard business cards ================= */
.biz-item {
  margin: 14px 0; background: #fff; border: 1px solid #EFEDF3; border-radius: 18px;
  box-shadow: 0 2px 4px rgba(20,18,26,.04), 0 10px 28px rgba(20,18,26,.05);
  overflow: hidden; transition: box-shadow .18s var(--ease), transform .14s var(--ease);
}
.biz-item:hover { box-shadow: 0 6px 12px rgba(20,18,26,.06), 0 18px 42px rgba(20,18,26,.09); transform: translateY(-2px); }
.biz-item .biz-card {
  display: flex; align-items: center; gap: 14px; padding: 18px; margin: 0;
  border: none; border-radius: 0; background: transparent; box-shadow: none; text-decoration: none; color: inherit;
}
.biz-item .biz-card:hover { transform: none; box-shadow: none; }
.biz-card .avatar { width: 50px; height: 50px; border-radius: 15px; font-size: 1.15rem; box-shadow: 0 6px 14px rgba(252,24,110,.28); }
.biz-card .name { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 1.12rem; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-card .id { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.biz-actions { display: flex; gap: 10px; padding: 0 16px 16px; border: none; background: transparent; }
.act-btn {
  flex: 1 1 190px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 13px;
  padding: 15px 18px; border-radius: 18px; font-family: 'Lexend', sans-serif; font-weight: 700;
  font-size: .98rem; line-height: 1.2; text-align: left; text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .16s var(--ease), box-shadow .22s var(--ease), filter .2s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
/* soft top sheen for depth */
.act-btn::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: -1;
  background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events: none; }
.act-btn:active { transform: translateY(0) scale(.99); }
.act-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: transform .16s var(--ease); }
.act-btn:hover .act-ic { transform: scale(1.06) rotate(-3deg); }
.act-ic svg { width: 20px; height: 20px; }
/* fallback: a bare svg (no .act-ic wrapper) must never stretch to fill the button */
.act-btn > svg { flex: 0 0 auto; width: 20px; height: 20px; }
.act-tx { display: block; }
.act-renew { background: linear-gradient(135deg, var(--brand), var(--brand-700)); color: #fff; box-shadow: 0 10px 22px rgba(252,24,110,.3); }
.act-renew:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(252,24,110,.42); }
.act-close { background: var(--surface-2); color: var(--brand-700); border: 1.5px solid var(--line-2); }
/* Amend sits between Renew (loud) and Close (quiet): a real action, but not
   the one the page is pushing. */
.act-amend { background: var(--surface-2); color: #6D28D9; border: 1.5px solid rgba(109,40,217,.28); }
.act-amend .act-ic { background: rgba(109,40,217,.12); color: #6D28D9; box-shadow: none; }
.act-amend:hover { transform: translateY(-2px); border-color: rgba(109,40,217,.5); }
.act-close .act-ic { background: rgba(252,24,110,.1); box-shadow: none; }
.act-close:hover { transform: translateY(-2px); background: #fff; border-color: var(--brand); color: var(--brand); box-shadow: 0 12px 24px rgba(252,24,110,.14); }
/* Comply & Resubmit — amber call-to-action (matches the "For Compliance" tone) */
.act-comply { background: linear-gradient(135deg, #FBBF24, #E08A00); color: #fff; box-shadow: 0 10px 22px rgba(217,119,6,.3); }
.act-comply:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(217,119,6,.44); }
/* Edit business details — indigo, paired with Comply during compliance */
.act-edit { background: linear-gradient(135deg, #6366F1, #4F46E5); color: #fff; box-shadow: 0 10px 22px rgba(79,70,229,.3); }
.act-edit:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(79,70,229,.44); }
/* Download issued permit — green success tone */
.act-permit { background: linear-gradient(135deg, #34D399, #059669); color: #fff; box-shadow: 0 10px 22px rgba(5,150,105,.3); }
.act-permit:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(5,150,105,.44); }

/* dashboard hero illustration + section heading icon */
.hero-art { position: absolute; right: 6px; bottom: -6px; width: 200px; height: auto; opacity: .17; z-index: 0; pointer-events: none; }
.list-head h2 { display: flex; align-items: center; gap: 9px; }
.list-head h2 svg { width: 21px; height: 21px; color: var(--brand); flex: none; }
@media (max-width: 560px) { .hero-art { width: 132px; opacity: .13; } }

/* ---- Save as draft: banner, button, toast ---- */
.btn-draft { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface-2); color: var(--brand-700); border: 1.5px solid var(--line-2); }
.btn-draft svg { width: 18px; height: 18px; }
.btn-draft:hover { background: #fff; border-color: var(--brand); color: var(--brand); }
.btn-sm { padding: 8px 14px; font-size: .86rem; border-radius: 11px; }

/* ---- autosave indicator (wizard header) --------------------------------- */
.save-state { min-height: 16px; margin-top: 8px; font-size: .78rem; font-weight: 600;
  color: var(--muted); display: flex; align-items: center; gap: 6px; transition: color .2s var(--ease); }
.save-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0; transition: opacity .2s var(--ease); }
.save-state.is-saving, .save-state.is-saved, .save-state.is-warn { }
.save-state.is-saving::before, .save-state.is-saved::before, .save-state.is-warn::before { opacity: 1; }
.save-state.is-saving { color: var(--muted); }
.save-state.is-saving::before { animation: savePulse 1s var(--ease) infinite; }
.save-state.is-saved { color: var(--ok); }
.save-state.is-warn { color: var(--warn); }
@keyframes savePulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---- draft cards (dashboard section + drafts.html) ---------------------- */
.draft-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.dr-loading { padding: 18px; color: var(--muted); font-size: .9rem; }

.draft-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); }
.draft-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }

/* progress ring */
.dr-ring-wrap { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.dr-ring { width: 56px; height: 56px; transform: rotate(-90deg); }
.dr-ring circle { fill: none; stroke-width: 3.2; }
.dr-ring-bg { stroke: var(--line); }
.dr-ring-fg { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease); }
.dr-pct { position: absolute; font-size: .72rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; }

.dr-body { flex: 1; min-width: 0; }
.dr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-title { margin: 0; font-family: 'Lexend', sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dr-meta { margin: 3px 0 0; font-size: .82rem; color: var(--muted); }
.dr-pill { font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.dr-pill-warn { color: var(--warn); background: var(--warn-bg); border: 1px solid rgba(232,89,12,.22); }

.dr-missing { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dr-missing-lbl { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dr-chip { font-size: .74rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line-2); padding: 2px 9px; border-radius: 999px; }

.dr-bar { margin-top: 10px; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.dr-bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .5s var(--ease); }

.dr-rename { margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.dr-rename input { flex: 1; min-width: 0; padding: 7px 10px; font: inherit; font-size: .88rem;
  border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); }
.dr-rename input:focus { outline: none; border-color: var(--brand); }
.dr-confirm { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: .82rem; color: var(--ink-2); background: var(--err-bg);
  border: 1px solid rgba(225,29,72,.2); border-radius: 12px; padding: 9px 11px; }
.dr-del-yes { background: var(--err); color: #fff; border: none; }
.dr-del-yes:hover { background: #BE123C; }

.dr-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.dr-resume { text-decoration: none; white-space: nowrap; }
.dr-menu-wrap { position: relative; }
.dr-more { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease); }
.dr-more svg { width: 18px; height: 18px; }
.dr-more:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.dr-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 152px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: var(--shadow); padding: 5px; display: flex; flex-direction: column; }
.dr-menu button { text-align: left; padding: 9px 11px; font: inherit; font-size: .87rem; font-weight: 600;
  color: var(--ink-2); background: none; border: none; border-radius: 8px; cursor: pointer; }
.dr-menu button:hover { background: var(--surface-2); color: var(--ink); }
.dr-menu button.danger { color: var(--err); }
.dr-menu button.danger:hover { background: var(--err-bg); }

.dr-seeall { display: inline-block; align-self: flex-start; margin-top: 2px; padding: 8px 2px;
  font-size: .86rem; font-weight: 700; color: var(--brand-700); text-decoration: none; }
.dr-seeall:hover { color: var(--brand); }
.dr-seeall-top { margin-left: auto; font-size: .82rem; font-weight: 700;
  color: var(--brand-700); text-decoration: none; white-space: nowrap; }
.dr-seeall-top:hover { color: var(--brand); }

.page-head-split { justify-content: space-between; flex-wrap: wrap; }
.sb-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: .7rem; font-weight: 800;
  background: var(--brand); color: #fff; }

/* On a phone the ring + actions must not squeeze the title to nothing. */
@media (max-width: 560px) {
  .draft-card { flex-wrap: wrap; }
  .dr-actions { width: 100%; justify-content: space-between; margin-top: 4px; }
  .dr-resume { flex: 1; text-align: center; }
}
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 2000;
  background: #0F172A; color: #fff; padding: 12px 20px; border-radius: 12px; font-weight: 600; font-size: .92rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* business-detail action buttons at the top (under the hero) */
.detail-actions-top { margin: 24px auto 24px; max-width: 100%; }

/* dashboard business cards as a responsive premium grid (fills the width) */
#list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
#list .biz-item { margin: 0; height: 100%; display: flex; flex-direction: column; }
#list .biz-item .biz-card { flex: 1; }
#list .empty-state { grid-column: 1 / -1; }
.list-head { margin-top: 22px; }
@media (max-width: 720px) { #list { grid-template-columns: 1fr; } }

/* business card meta row (id + status pill) — grid-friendly */
.biz-card .meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 3px; }
.biz-card .meta .id { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.biz-card .meta .spill { font-size: .64rem; padding: 3px 9px 3px 8px; }

/* in the grid, let long business names wrap instead of truncating */
#list .biz-card .name { white-space: normal; overflow: visible; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ================= Payment deadline & payable total =================
   The due date is the single most consequential thing on an unpaid assessment,
   so it is given colour and weight rather than being another grey meta line.
   Two tones only: amber = still payable, red = the deadline has lapsed and the
   resident must go to the Municipal Hall. Shared by the dashboard card
   (.biz-due) and the business detail page (.due-banner / .due-chip). */

/* --- detail page: banner above the Pay button --- */
.due-banner { margin: 4px 0 14px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(245,158,11,.04));
  border: 1.5px solid rgba(245,158,11,.35); }
.due-banner.overdue { background: linear-gradient(135deg, rgba(220,38,38,.10), rgba(220,38,38,.04));
  border-color: rgba(220,38,38,.38); }
.due-banner-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.due-banner-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(245,158,11,.16); color: #B45309; }
.due-banner-ic svg { width: 20px; height: 20px; }
.due-banner.overdue .due-banner-ic { background: rgba(220,38,38,.14); color: #B91C1C; }
.due-banner-l { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #B45309; }
.due-banner.overdue .due-banner-l { color: #B91C1C; }
.due-banner-d { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 1.06rem; color: #0F172A; }
.due-banner-amt { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.due-banner-amt-l { font-size: .72rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .04em; }
.due-banner-amt-v { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 1.32rem;
  color: var(--brand, #fc186e); font-variant-numeric: tabular-nums; }
/* Itemised total, right-aligned under "Total payable". Zero rows stay visible
   but muted, so the resident can see nothing is being hidden from the total. */
.due-banner-parts { margin-top: 8px; display: flex; flex-direction: column; gap: 2px;
  font-size: .76rem; color: #94A3B8; font-variant-numeric: tabular-nums; }
.due-banner-parts > span { display: flex; justify-content: space-between; gap: 14px; }
.due-banner-parts .dbp-k { font-weight: 600; }
.due-banner-parts .dbp-v { font-weight: 700; }
.due-banner-parts > span.dbp-on { color: #64748B; }
.due-banner.overdue .due-banner-parts > span.dbp-on { color: var(--err, #dc2626); }
.due-banner-note { margin-top: 8px; font-size: .84rem; line-height: 1.55; color: #475569; }
.due-banner.overdue .due-banner-note { color: #991B1B; font-weight: 600; }

/* --- detail page: per-assessment deadline chip --- */
.due-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px;
  padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: rgba(245,158,11,.12); color: #B45309; }
.due-chip svg { width: 14px; height: 14px; flex: none; }
.due-chip em { font-style: normal; font-weight: 600; opacity: .78; }
.due-chip.overdue { background: rgba(220,38,38,.12); color: #B91C1C; }
.pay-row-overdue { border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.02); }
.pay-pen { color: #B45309; font-weight: 600; }

/* --- fee breakdown: surcharge / interest lines above the total --- */
.fee-sub { display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; font-size: .84rem; color: #64748B; font-variant-numeric: tabular-nums; }
.fee-sub.fee-pen { color: #B45309; font-weight: 600; }
/* The penalty is part of the assessed total, not an extra charged on top of it.
   This line says so in words, because the amounts alone read as an addition. */
.fee-note-inc {
  padding: 6px 2px 0;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--muted);
}

/* --- "pay at the Municipal Hall" notice (lapsed deadline) --- */
.hall-notice { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px;
  padding: 14px 16px; border-radius: 14px; background: rgba(220,38,38,.05);
  border: 1.5px solid rgba(220,38,38,.28); }
.hall-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(220,38,38,.12); color: #B91C1C; }
.hall-ic svg { width: 20px; height: 20px; }
.hall-h { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: .96rem; color: #0F172A; margin-bottom: 3px; }
.hall-notice p { margin: 0; font-size: .85rem; line-height: 1.55; color: #475569; }
/* Same lapsed deadline, but online payment is still open (OVERDUE_ONLINE_ENABLED).
   Amber rather than red: it is a warning above a live Pay button, not a dead end. */
.hall-notice-payable { background: rgba(217,119,6,.06); border-color: rgba(217,119,6,.32); }
.hall-notice-payable .hall-ic { background: rgba(217,119,6,.14); color: #B45309; }

/* --- dashboard card: deadline strip + Pay button --- */
.biz-due-slot:empty { display: none; }
/* Plain text, no panel — see dueStrip(). The amber .biz-due block it replaced
   repeated the Pay button's own amount. .biz-due itself stays: .biz-due-clear
   (the settled state) still uses it. */
.biz-due-when { margin: 0 16px 12px; font-size: .8rem; color: var(--muted, #64748B); }
.biz-due-when b { font-family: 'Lexend', sans-serif; font-weight: 700; color: #334155; }
.biz-due { display: flex; align-items: center; gap: 11px; margin: 0 16px 12px;
  padding: 11px 13px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(245,158,11,.04));
  border: 1.5px solid rgba(245,158,11,.32); }
.biz-due-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(245,158,11,.16); color: #B45309; }
.biz-due-ic svg { width: 17px; height: 17px; }
/* settled — green, and calmer than the amber/red states: it is reassurance, not
   a call to action, so it must not compete with a card that actually owes money */
.biz-due-clear { background: linear-gradient(135deg, rgba(5,150,105,.09), rgba(5,150,105,.03));
  border-color: rgba(5,150,105,.24); }
.biz-due-clear .biz-due-ic { background: rgba(5,150,105,.13); color: #047857; }
.biz-due-clear .biz-due-l { font-family: 'Lexend', sans-serif; font-weight: 700; color: #065F46; }
.biz-due-clear .biz-due-s { color: #059669; font-weight: 600; }
.biz-due-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.biz-due-l { font-size: .84rem; color: #475569; }
.biz-due-l b { font-family: 'Lexend', sans-serif; font-weight: 800; color: #0F172A; }
.biz-due-s { font-size: .74rem; font-weight: 700; color: #B45309; }
.biz-due-amt { margin-left: auto; text-align: right; display: flex; flex-direction: column; flex: none; }
.biz-due-amt-l { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94A3B8; }
.biz-due-amt-v { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 1rem;
  color: var(--brand, #fc186e); font-variant-numeric: tabular-nums; }
/* Pay — the strongest action on the card, so it leads on its OWN full-width row
   above Renew/Close. Three buttons in one no-wrap row shrank past their labels
   and clipped them to "Pay ₱31.", "Ren", "Clos"; wrapping fixes that and gives
   the money action the visual weight it should have had anyway. */
.biz-actions { flex-wrap: wrap; }
/* Header keeps its natural height at the TOP of the card and the actions pin to
   the bottom, so a card with no dues strip no longer floats its name in the
   middle of the stretched grid row. */
#list .biz-item .biz-card { flex: 0 0 auto; }
#list .biz-actions { margin-top: auto; }
/* Renew held pending payment */
.act-locked { opacity: .42; filter: saturate(.25); box-shadow: none; cursor: not-allowed; }
.act-locked:hover { transform: none; box-shadow: none; }
.act-lock-note { flex: 1 1 100%; margin: 2px 2px 0; font-size: .74rem; line-height: 1.4;
  font-weight: 600; color: var(--muted, #6B7280); }
/* Waiting on an approval desk — the assessment exists but the LGU has not
   released it for collection, so this notice stands where Pay would be. */
.act-pay-blocked { order: -1; margin: 0 2px 10px; padding: 11px 13px; border-radius: 14px;
  font-size: .8rem; color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A; }
/* Basis trimmed from 190px so Renew + Close still share one row inside a
   360px grid column once wrapping is on — otherwise they stack and the card
   grows a redundant third row. */
.biz-actions .act-btn { flex: 1 1 150px; min-width: 0; }
.act-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* specificity must match `.biz-actions .act-btn` above, or Pay falls back to the
   150px basis and shares the row it is supposed to own */
.biz-actions .act-pay { flex: 1 1 100%; justify-content: center; }
.act-pay { background: linear-gradient(135deg, #34D399, #059669); color: #fff; box-shadow: 0 10px 22px rgba(5,150,105,.3); }
.act-pay:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(5,150,105,.44); }
/* the amount is the point of the button — let it breathe */
.act-pay .act-tx { font-size: 1.02rem; letter-spacing: -.01em; }
@media (max-width: 460px) {
  .biz-due { flex-wrap: wrap; }
  .biz-due-amt { margin-left: 43px; text-align: left; }
}
/* placeholder until the dues lookup resolves — must not take flex space */
.biz-pay-slot { display: none; }

/* ================= Official receipt (paid assessments) =================
   Web twin of the mobile OfficialReceiptCard: seal header, perforated edge,
   rotated PAID stamp, then the gateway reference block. Display-only. */
.or-panel { max-width: 460px; }
.or-body { padding: 16px; max-height: min(78vh, 760px); overflow-y: auto; }
.or-doc { background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(252,24,110,.16); border: 1px solid var(--line, #EFEDF3); }
.or-head { padding: 18px 16px 16px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--brand, #fc186e), var(--brand-700, #c2145a)); }
.or-seal { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.or-seal svg { width: 24px; height: 24px; }
.or-gov { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.or-lgu { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 1.02rem; margin-top: 2px; }
.or-title { margin-top: 8px; font-family: 'Lexend', sans-serif; font-weight: 800;
  font-size: .82rem; letter-spacing: .14em; }
/* perforated tear line between header and body */
.or-main { position: relative; padding: 20px 18px 18px;
  background-image: radial-gradient(circle at 6px 0, transparent 5px, #fff 5px);
  background-size: 14px 12px; background-repeat: repeat-x; }
.or-mini { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #94A3B8; }
.or-orno { text-align: right; margin-bottom: 10px; }
.or-orno-v { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 1rem;
  color: var(--brand-700, #c2145a); font-variant-numeric: tabular-nums; }
.or-biz { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 1.06rem;
  line-height: 1.25; color: var(--ink, #0F172A); }
.or-permit { font-size: .8rem; color: var(--muted, #6B7280); margin: 2px 0 12px;
  font-variant-numeric: tabular-nums; }
.or-payer { font-weight: 700; color: var(--ink, #0F172A); margin: 2px 0 14px; }
.or-line { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem;
  padding: 10px 0; border-top: 1px dashed var(--line-2, #E7E3EC); color: #475569; }
.or-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 0 4px; border-top: 2px solid var(--line-2, #E7E3EC);
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; color: #64748B; }
.or-total-v { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 1.34rem;
  letter-spacing: -.01em; color: var(--brand-700, #c2145a); font-variant-numeric: tabular-nums; }
.or-stamp { margin: 10px 0 4px; display: inline-block; transform: rotate(-8deg);
  padding: 4px 14px; border: 2.5px solid rgba(5,150,105,.55); border-radius: 8px;
  color: #059669; font-family: 'Lexend', sans-serif; font-weight: 800;
  letter-spacing: .16em; font-size: .84rem; }
.or-kvs { margin-top: 14px; border-top: 1px dashed var(--line-2, #E7E3EC); padding-top: 12px;
  display: flex; flex-direction: column; gap: 7px; }
.or-kv { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; }
.or-k { color: #94A3B8; }
.or-v { color: var(--ink, #0F172A); font-weight: 600; text-align: right;
  word-break: break-word; }
.or-foot { margin-top: 14px; text-align: center; font-size: .7rem; color: #94A3B8; }
.or-actions { display: flex; gap: 10px; padding: 14px 16px 16px; }
.or-actions .btn { flex: 1 1 auto; }
/* the trigger on a paid row */
.or-open { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 8px 13px; border-radius: 11px; cursor: pointer; font-weight: 700;
  font-size: .82rem; color: var(--brand-700, #c2145a); background: var(--surface-2, #FBF7FA);
  border: 1.5px solid var(--line-2, #E7E3EC); transition: background .16s, border-color .16s; }
.or-open:hover { background: #fff; border-color: var(--brand, #fc186e); }
.or-open svg { width: 15px; height: 15px; }

/* Print just the receipt — the resident needs a filing copy, not the portal. */
@media print {
  body.modal-open > *:not(#orModal) { display: none !important; }
  #orModal, #orModal .modal-panel { position: static !important; inset: auto !important;
    max-width: none !important; box-shadow: none !important; background: #fff !important; }
  #orModal .modal-backdrop, #orModal .or-head-bar, #orModal .or-actions { display: none !important; }
  #orModal .or-body { max-height: none !important; overflow: visible !important; padding: 0 !important; }
  .or-doc { box-shadow: none !important; border: none !important; }
  .or-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* live duplicate notice on Business Name / Registration No. ---------------- */
/* Shown while the applicant is still on the field, so a clash never waits
   until submit. Red = blocking (registration no.), amber = advisory (name). */
.dup-note { display: none; align-items: flex-start; gap: 9px; margin-top: 8px;
  padding: 10px 12px; border-radius: 10px; font-size: .85rem; line-height: 1.45;
  font-weight: 500; border: 1px solid transparent;
  animation: dupIn .18s ease both; }
.dup-note.show { display: flex; }
.dup-note .dup-ico { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff; margin-top: 1px; }
.dup-note .dup-msg { flex: 1 1 auto; }
.dup-note.is-block { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.dup-note.is-block .dup-ico { background: #dc2626; }
.dup-note.is-warn  { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.dup-note.is-warn .dup-ico { background: #d97706; }
@keyframes dupIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-color-scheme: dark) {
  .dup-note.is-block { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.35); color: #fca5a5; }
  .dup-note.is-warn  { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.35); color: #fcd34d; }
}

/* ---- Tax Order of Payment ------------------------------------------------
   Viewable only: rendered to canvas from bytes, never an <iframe src>, and
   with no download/share affordance anywhere. */
.tabbar { display: flex; gap: 4px; padding: 4px; margin: 0 0 16px;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; }
.tabb { flex: 1; padding: 10px 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: .9rem; font-weight: 700;
  transition: background .15s ease, color .15s ease; }
.tabb:hover { color: var(--ink); }
.tabb.is-on { background: var(--brand); color: #fff; }

.top-wrap { display: flex; flex-direction: column; gap: 12px; }
.top-intro { padding: 12px 14px; border-radius: 14px; font-size: .85rem; line-height: 1.5;
  color: var(--ink-2); background: rgba(252,24,110,.055); border: 1px solid rgba(252,24,110,.16); }
.top-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px; border-radius: 16px; cursor: pointer; font: inherit;
  background: var(--card, #fff); border: 1px solid var(--line); transition: border-color .15s ease, transform .12s ease; }
.top-row:hover { border-color: rgba(252,24,110,.45); transform: translateY(-1px); }
.top-row.is-latest { border-color: rgba(252,24,110,.32); }
.top-ic { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; color: var(--brand); background: rgba(252,24,110,.10); }
.top-ic svg { width: 20px; height: 20px; }
.top-tx { flex: 1 1 auto; min-width: 0; }
.top-name { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; color: var(--ink); }
.top-badge { padding: 2px 8px; border-radius: 999px; background: var(--brand); color: #fff;
  font-size: .65rem; font-weight: 800; letter-spacing: .3px; }
.top-sub { display: block; margin-top: 3px; font-size: .8rem; color: var(--muted); }
.top-chev { flex: 0 0 auto; color: var(--muted); font-size: 1.5rem; line-height: 1; }

.top-panel { max-width: 980px; width: 96vw; }
.top-body { display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 18px; overflow-y: auto; background: #2A2F3A; }
/* flex:0 0 auto is load-bearing: in a column flex scroll container the pages
   otherwise shrink to fit and overflow:hidden crops each one to a letterbox. */
.top-page { flex: 0 0 auto; width: 100%; max-width: 820px; height: auto;
  border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.35); background: #fff; }
.top-loading, .top-error { padding: 48px 24px; text-align: center; color: #D7D9DE; }
.top-error p { margin: 0 0 14px; }
.top-pages { padding-bottom: 6px; color: #9AA0AC; font-size: .78rem; }
/* Download sits between the title and the ×, which keeps the far right.
   .modal-x carries margin-left:auto, so this takes it instead. */
.top-dl { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  flex: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card, #fff); color: var(--ink); font: inherit; font-size: .82rem;
  font-weight: 700; cursor: pointer; }
.top-dl:hover { border-color: var(--brand); color: var(--brand); }
.top-dl[hidden] { display: none; }
#topViewer .modal-x { margin-left: 8px; }

@media (prefers-color-scheme: dark) {
  .top-intro { background: rgba(252,24,110,.10); border-color: rgba(252,24,110,.28); }
}

/* ---- Business amendment ---------------------------------------------------
   The app files a request; it never applies one. The before → after preview is
   the whole point of the screen: a resident should see exactly what they are
   asking the LGU to change before they ask for it. */
.amd-kinds { display: grid; gap: 10px; margin: 16px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Selectable cards, not bare checkboxes: this is the one decision the page
   asks for, so it should look like a choice rather than a form control. */
.amd-kind { position: relative; display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 40px 14px 14px; border: 1.5px solid var(--line); border-radius: 16px;
  background: var(--card, #fff); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.amd-kind:hover { border-color: rgba(252,24,110,.4); transform: translateY(-1px); }
.amd-kind input { position: absolute; opacity: 0; pointer-events: none; }
.amd-kind-ic { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 11px; color: var(--muted); background: var(--surface-2, #f6f7f9);
  transition: color .15s ease, background .15s ease; }
.amd-kind-ic svg { width: 18px; height: 18px; }
.amd-kind-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.amd-kind-tx b { font-size: .9rem; color: var(--ink); }
.amd-kind-tx small { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.amd-kind-check { position: absolute; top: 14px; right: 13px; width: 20px; height: 20px;
  border-radius: 999px; border: 1.5px solid var(--line-2); transition: all .15s ease; }
.amd-kind:has(input:checked) { border-color: var(--brand); background: rgba(252,24,110,.045); }
.amd-kind:has(input:checked) .amd-kind-ic { color: #fff; background: var(--brand); }
.amd-kind:has(input:checked) .amd-kind-check { border-color: var(--brand); background: var(--brand);
  box-shadow: inset 0 0 0 3px var(--card, #fff); }
.amd-kind input:focus-visible ~ .amd-kind-check { outline: 2px solid var(--brand); outline-offset: 2px; }
.amd-section { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.amd-line-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.amd-line-row input { flex: 1 1 220px; }
.amd-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.amd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px;
  border-radius: 999px; font-size: .8rem; font-weight: 700; }
.amd-chip button { border: 0; background: none; cursor: pointer; font-size: 1rem;
  line-height: 1; color: inherit; padding: 0 2px; }
.amd-chip.is-cur { color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); padding: 0; }
.amd-chip.is-cur button { display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.amd-chip.is-cur small { font-size: .72rem; font-weight: 700; color: var(--brand-600); }
.amd-chip.is-cur:hover { border-color: var(--brand); }
/* A suggestion the resident actually clicked, on the closure form. It is a
   shortcut that wrote into the reason box, not a selected option, so it is
   marked rather than filled in. */
.amd-chip.is-cur.is-on { border-color: var(--brand); background: var(--brand-50, rgba(252,24,110,.07)); }
.amd-chip.is-cur.is-on button { color: var(--brand-600); }
/* Why a document is being asked for, under its name in a doc slot. */
.doc-note { margin: -2px 0 8px; }
.amd-chip.is-add { color: #15803D; background: rgba(21,128,61,.09); border: 1px solid rgba(21,128,61,.28); }
.amd-chip.is-rm  { color: #B91C1C; background: rgba(185,28,28,.09); border: 1px solid rgba(185,28,28,.28); }

.amd-preview { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.amd-change { padding: 11px 12px; border-radius: 14px; background: var(--card, #fff);
  border: 1px solid var(--line); }
.amd-change-label { font-size: .62rem; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted); }
.amd-change-vals { display: flex; align-items: baseline; gap: 8px; margin-top: 6px;
  flex-wrap: wrap; }
.amd-old { color: var(--muted); text-decoration: line-through; font-size: .85rem; }
.amd-arrow { color: var(--muted); }
.amd-new { color: var(--ink); font-weight: 800; font-size: .88rem; }

.amd-history { padding: 14px 0; border-top: 1px solid var(--line); }
.amd-history:first-of-type { border-top: 0; }
.amd-history-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.amd-status { padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.amd-status.is-pending { color: #EA580C; background: rgba(234,88,12,.10); }
.amd-status.is-done { color: #15803D; background: rgba(21,128,61,.10); }