/* Barangay Anabu I-G Resident Portal
   One design system for every resident-facing page. */

:root {
  --ink:#18232e;
  --ink-soft:#384654;
  --muted:#58636e;
  --line:#e0dbd1;
  --line-strong:#8c939b;
  --bg:#f6f4ef;
  --surface:#ffffff;
  --surface-alt:#f2efe8;
  --surface-sunk:#e9e5dc;
  --navy:#12304b;
  --navy-deep:#0c2237;
  --navy-tint:#e9eff5;
  --navy-line:#b3c4d5;
  --green:#1b6847;
  --green-dark:#134f36;
  --green-tint:#e7f2eb;
  --green-line:#9bc5ad;
  --button:#1b6847;
  --button-hover:#134f36;
  --button-active:#0f412c;
  --band:#12304b;
  --band-line:#2b5275;
  --tile-primary:#12304b;
  --tile-primary-hover:#1a3f60;
  --hall-blue:#1d63b8;
  --hall-lime:#8cc63f;
  --wash-strong:rgba(246,244,239,.86);
  --wash-soft:rgba(246,244,239,.1);
  --wash-top:rgba(246,244,239,.06);
  --notice:#6b4800;
  --notice-tint:#fbf3e1;
  --notice-line:#dfc38a;
  --danger:#9d2c25;
  --danger-tint:#fbeeec;
  --danger-line:#e3b2ad;
  --focus:#a8741c;
  --shadow-sm:0 1px 2px rgba(18,35,52,.06);
  --shadow-md:0 1px 2px rgba(18,35,52,.07), 0 10px 22px -12px rgba(18,35,52,.32);
  --shadow-lg:0 2px 6px rgba(18,35,52,.08), 0 24px 48px -20px rgba(18,35,52,.4);
  --radius:8px;
  --radius-sm:6px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --fast:150ms;
  --base:200ms;
  --content:1140px;
  --font:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

body.dark-mode {
  --ink:#e4eaf0;
  --ink-soft:#c6d0da;
  --muted:#a3b0bc;
  --line:#2b3845;
  --line-strong:#66778a;
  --bg:#0f161d;
  --surface:#161f29;
  --surface-alt:#1c2733;
  --surface-sunk:#24303c;
  --navy:#d3e1ee;
  --navy-deep:#09131c;
  --navy-tint:#1a2a3a;
  --navy-line:#3b5470;
  --green:#7ccaa4;
  --green-dark:#9ad8b9;
  --green-tint:#15301f;
  --green-line:#2f6a4c;
  --button:#23754f;
  --button-hover:#1d6443;
  --button-active:#175338;
  --band:#132a42;
  --band-line:#2d4b68;
  --tile-primary:#1b3a57;
  --tile-primary-hover:#224869;
  --wash-strong:rgba(15,22,29,.82);
  --wash-soft:rgba(15,22,29,.28);
  --wash-top:rgba(15,22,29,.3);
  --notice:#f0cd84;
  --notice-tint:#2a2212;
  --notice-line:#5c4a20;
  --danger:#f1a79f;
  --danger-tint:#341a18;
  --danger-line:#6a312c;
  --focus:#e2b760;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 1px 2px rgba(0,0,0,.3), 0 10px 22px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.8);
  color-scheme:dark;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font:16px/1.55 var(--font); -webkit-tap-highlight-color:transparent; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin:0; }
h1, h2, h3, h4 { color:var(--ink); line-height:1.25; font-weight:650; }
h1 { letter-spacing:-.018em; }
img { max-width:100%; }
a { color:var(--green); text-underline-offset:3px; text-decoration-thickness:1px; transition:color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease); }
a:hover { color:var(--green-dark); text-decoration-thickness:2px; }
[hidden] { display:none !important; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:1000; background:var(--surface); color:var(--ink); padding:12px 18px; border:2px solid var(--focus); border-radius:var(--radius-sm); }
.skip-link:focus { top:12px; }

/* Masthead */
.gov-bar { background:var(--navy-deep); color:#d9e4ee; font-size:13px; }
body.dark-mode .gov-bar { border-bottom:1px solid var(--line); }
.gov-bar-inner { max-width:var(--content); margin:0 auto; padding:5px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.theme-toggle { white-space:nowrap; background:none; border:1px solid #58728b; color:#fff; font:inherit; font-size:13px; padding:4px 12px; border-radius:var(--radius-sm); cursor:pointer; min-height:34px; transition:border-color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.theme-toggle:hover { border-color:#c9d6e2; background:rgba(255,255,255,.06); }
.theme-toggle:active { background:rgba(255,255,255,.12); }
.theme-toggle:focus-visible { outline-color:#e2b760; }
.site-header { background:var(--surface); border-top:3px solid var(--hall-blue); box-shadow:inset 0 2px 0 var(--hall-lime); }
.site-header-inner { max-width:var(--content); margin:0 auto; padding:14px 20px 10px; display:flex; align-items:center; gap:16px; }
.site-brand { display:flex; align-items:center; gap:14px; color:inherit; text-decoration:none; min-width:0; border-radius:var(--radius-sm); }
.site-brand:hover { color:inherit; }
.site-brand img { width:auto; height:54px; flex-shrink:0; }
body.dark-mode .site-brand img { padding:3px; background:#fff; border-radius:var(--radius-sm); }
.site-brand-text { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; min-width:0; }
.site-brand-text strong { flex-basis:100%; font-size:20px; font-weight:650; color:var(--navy); line-height:1.2; letter-spacing:-.01em; }
.site-brand-text span { font-size:14px; color:var(--muted); }
.site-brand-text .site-brand-portal { color:var(--green-dark); font-weight:600; }
.site-brand-portal::before { content:"\00B7"; margin-right:8px; color:var(--muted); font-weight:400; }
.menu-toggle.btn { display:none; margin-left:auto; gap:10px; }
.menu-icon { position:relative; width:18px; height:2px; border-radius:1px; background:currentColor; transition:background-color var(--fast) var(--ease); }
.menu-icon::before, .menu-icon::after { content:""; position:absolute; left:0; width:18px; height:2px; border-radius:1px; background:currentColor; transition:transform var(--base) var(--ease); }
.menu-icon::before { top:-6px; }
.menu-icon::after { top:6px; }
.menu-label-open { display:none; }
.menu-toggle[aria-expanded="true"] { background:var(--surface-alt); border-color:var(--ink-soft); }
.menu-toggle[aria-expanded="true"] .menu-icon { background:transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform:translateY(-6px) rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .menu-label-open { display:inline; }
.menu-toggle[aria-expanded="true"] .menu-label-closed { display:none; }

/* Navigation */
.site-nav { background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); }
.site-nav-inner { max-width:var(--content); margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.site-nav ul { list-style:none; padding:0; display:flex; align-items:center; gap:2px; }
.site-nav-list a { position:relative; display:flex; align-items:center; min-height:50px; padding:0 12px; color:var(--ink-soft); font-weight:600; font-size:15px; text-decoration:none; }
.site-nav-list a::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--line-strong); transform:scaleX(0); transform-origin:left center; transition:transform var(--base) var(--ease), background-color var(--fast) var(--ease); }
.site-nav-list a:hover, .site-nav-list a:focus-visible { color:var(--ink); }
.site-nav-list a:hover::after, .site-nav-list a:focus-visible::after { transform:scaleX(1); }
.site-nav-list a[aria-current="page"] { color:var(--ink); }
.site-nav-list a[aria-current="page"]::after { transform:scaleX(1); background:var(--green); }
.site-nav ul.site-nav-account { gap:8px; }
.site-nav-account a:not(.btn) { display:inline-flex; align-items:center; min-height:44px; padding:0 10px; color:var(--ink-soft); font-weight:600; font-size:15px; border-radius:var(--radius-sm); }
.site-nav-account a:not(.btn):hover { color:var(--ink); }
.site-nav-account a[aria-current="page"] { color:var(--ink); text-decoration-thickness:2px; text-decoration-color:var(--green); }

/* Page structure */
.site-main { flex:1; display:block; }
.site-main:focus { outline:none; }
.container { width:100%; max-width:var(--content); margin:0 auto; padding:36px 20px 64px; }
.section { margin-top:52px; }
.section-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; margin-bottom:14px; }
.section-head h2 { font-size:22px; }
.section-head a { display:inline-flex; align-items:center; min-height:44px; }
.narrow { max-width:720px; }
.muted { color:var(--muted); }
.small { font-size:14px; }
.stack > * + * { margin-top:16px; }

/* Surfaces */
.card, .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card { margin-bottom:20px; }
.card-header { padding:24px 28px 20px; border-bottom:1px solid var(--line); }
.card-header h1 { font-size:28px; }
.card-header h2 { font-size:21px; }
.card-header p { color:var(--muted); margin-top:4px; }
.card-body { padding:24px 28px 28px; }
.card-accent { border-top:3px solid var(--navy); }
body.dark-mode .card-accent { border-top-color:var(--green); }
.panel { padding:22px 24px; }
.panel h2 { font-size:19px; margin-bottom:10px; }
.panel h3 { font-size:17px; margin-bottom:6px; }
.help-list { margin-top:8px; }
.panel p + p { margin-top:8px; }
.panel-tint { background:var(--navy-tint); border-color:var(--navy-line); box-shadow:none; }
.plain-list { padding-left:20px; }
.plain-list li + li { margin-top:6px; }

/* Buttons */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 20px; border:1px solid transparent; border-radius:var(--radius-sm); font:inherit; font-size:16px; font-weight:600; line-height:1.2; text-align:center; text-decoration:none; cursor:pointer; box-shadow:var(--shadow-sm); transition:background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease); }
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); box-shadow:none; }
.btn-green { background:var(--button); color:#fff; }
.btn-green:hover { background:var(--button-hover); color:#fff; box-shadow:var(--shadow-md); }
.btn-green:active { background:var(--button-active); }
.btn-outline { background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-outline:hover { background:var(--surface-alt); border-color:var(--ink-soft); color:var(--ink); }
.btn-outline:active { background:var(--surface-sunk); }
.btn-small { min-height:44px; padding:8px 14px; font-size:15px; }
.btn-link { background:none; border:0; padding:0; min-height:0; color:var(--green); font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.btn-link:hover { color:var(--green-dark); text-decoration-thickness:2px; }
.btn-full { width:100%; }
.btn:disabled, .btn[aria-disabled="true"] { background:var(--surface-sunk); color:var(--muted); border-color:var(--line); box-shadow:none; cursor:not-allowed; transform:none; }
.btn[aria-busy="true"], [data-submitting] .btn[type="submit"] { background:var(--button-hover); color:#fff; border-color:transparent; cursor:progress; }
.btn[aria-busy="true"]::before, [data-submitting] .btn[type="submit"]::before { content:""; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.btn-row-split { justify-content:space-between; }

/* Alerts and notices */
.alert { display:block; padding:12px 16px; border:1px solid var(--line); border-left-width:4px; border-radius:var(--radius-sm); background:var(--surface); margin-bottom:20px; animation:rise-in var(--base) var(--ease) both; }
.alert ul { margin-top:6px; padding-left:20px; }
.alert-green { background:var(--green-tint); border-color:var(--green-line); border-left-color:var(--green); }
.alert-blue { background:var(--navy-tint); border-color:var(--navy-line); border-left-color:#4f7394; }
.alert-yellow { background:var(--notice-tint); border-color:var(--notice-line); border-left-color:#b78a2b; }
.alert-red { background:var(--danger-tint); border-color:var(--danger-line); border-left-color:var(--danger); }
.unconfirmed { font-size:15px; color:var(--notice); background:var(--notice-tint); border:1px solid var(--notice-line); border-radius:var(--radius-sm); padding:10px 14px; }
.unconfirmed strong { font-weight:650; }
.tag-unconfirmed { display:inline-block; font-size:13px; font-weight:600; line-height:1.4; color:var(--notice); background:var(--notice-tint); border:1px dashed #b78a2b; border-radius:4px; padding:0 6px; white-space:nowrap; }

/* Forms */
.form-group { margin-bottom:22px; }
.form-label { display:block; font-weight:600; margin-bottom:6px; }
.form-label .req, .form-label .optional { font-weight:400; color:var(--muted); font-size:14px; }
.form-note { font-size:14px; color:var(--muted); margin-top:6px; }
.form-input { display:block; width:100%; min-height:48px; padding:10px 12px; font:inherit; font-size:16px; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm); transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.form-input:hover { border-color:var(--ink-soft); }
.form-input:focus { outline:3px solid var(--focus); outline-offset:1px; border-color:var(--ink-soft); }
.form-input[readonly] { background:var(--surface-alt); border-color:var(--line); color:var(--ink-soft); }
.form-input[aria-invalid="true"] { border-color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger); }
.field-error { display:flex; align-items:flex-start; gap:8px; margin-top:6px; font-size:14px; font-weight:600; color:var(--danger); animation:rise-in var(--base) var(--ease) both; }
.field-error::before { content:"!"; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--danger); color:var(--surface); font-size:12px; font-weight:700; line-height:1; }
.checkbox-row, .resident-remember { display:flex; align-items:flex-start; gap:12px; }
.checkbox-row input, .resident-remember input { width:22px; height:22px; margin:2px 0 0; flex-shrink:0; accent-color:var(--green); cursor:pointer; }
.checkbox-row input:disabled { cursor:not-allowed; }
.checkbox-row input:disabled + label { color:var(--muted); }
.resident-remember { margin-bottom:22px; font-size:15px; color:var(--ink-soft); cursor:pointer; }
.fieldset-title { font-size:17px; margin:8px 0 12px; }
details.more { border-top:1px solid var(--line); margin-top:24px; padding-top:14px; }
details.more summary { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; font-weight:600; color:var(--green); list-style:none; border-radius:var(--radius-sm); }
details.more summary::-webkit-details-marker { display:none; }
details.more summary::before { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform var(--fast) var(--ease); flex-shrink:0; }
details.more[open] summary::before { transform:rotate(45deg); }
details.more summary:hover { color:var(--green-dark); }
details.more[open] summary { margin-bottom:10px; }
details.more[open] > :not(summary) { animation:rise-in var(--base) var(--ease) both; }

/* Definition lists */
.details-list { display:grid; grid-template-columns:minmax(140px, 190px) 1fr; }
.details-list dt, .details-list dd { padding:13px 0; border-top:1px solid var(--line); }
.details-list dt { color:var(--muted); font-size:15px; padding-right:16px; }
.details-list dd { font-weight:600; overflow-wrap:anywhere; }
.details-list > :nth-child(-n+2) { border-top:0; }
.summary-list { display:grid; grid-template-columns:minmax(120px, 180px) 1fr; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-alt); }
.summary-list dt, .summary-list dd { padding:11px 16px; border-top:1px solid var(--line); }
.summary-list dt { color:var(--muted); font-size:15px; padding-right:12px; }
.summary-list dd { font-weight:600; overflow-wrap:anywhere; background:var(--surface); }
.summary-list > :nth-child(-n+2) { border-top:0; }
.summary-list > dd:nth-of-type(1) { border-top-right-radius:var(--radius-sm); }
.summary-list > dd:last-of-type { border-bottom-right-radius:var(--radius-sm); }

/* Status labels: color is always paired with a written label and a marker shape. */
.status { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:650; line-height:1.3; padding:4px 10px; border-radius:4px; border:1px solid var(--line-strong); background:var(--surface-alt); color:var(--ink-soft); white-space:nowrap; }
.status::before { content:""; width:8px; height:8px; border-radius:50%; border:2px solid currentColor; flex-shrink:0; }
.status-progress { background:var(--navy-tint); border-color:var(--navy-line); color:var(--navy); }
.status-progress::before { border-right-color:transparent; }
.status-ready { background:var(--green-tint); border-color:var(--green); color:var(--green-dark); }
.status-ready::before { background:currentColor; }
.status-rejected { background:var(--danger-tint); border-color:var(--danger-line); color:var(--danger); }
.status-rejected::before { border-radius:1px; transform:rotate(45deg); }
.status-done { color:var(--muted); }
.status-done::before { width:9px; height:5px; border-width:0 0 2px 2px; border-radius:0; transform:translateY(-2px) rotate(-45deg); }

/* Home: introduction over the Barangay Hall photo; the wash is strong only behind the text */
.portal-band { position:relative; border-bottom:1px solid var(--line); background-color:var(--bg); background-image:linear-gradient(90deg, var(--wash-strong) 0%, var(--wash-strong) 43%, var(--wash-soft) 52%), var(--hall-photo); background-size:cover; background-position:center, 50% calc(34px - 20.7vw); background-repeat:no-repeat; }
.portal-band-inner { max-width:var(--content); margin:0 auto; padding:max(150px, 9.5vw) 20px 52px; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:32px 56px; align-items:center; }
.portal-hero { max-width:560px; }
.portal-hero h1 { font-size:40px; letter-spacing:-.02em; color:var(--navy); margin-bottom:12px; }
.portal-hero p { font-size:18px; line-height:1.6; color:var(--ink-soft); max-width:34em; }
.portal-hero .portal-hero-account { margin-top:18px; font-size:15px; color:var(--muted); }
.portal-band-caption { position:absolute; right:max(20px, calc((100% - var(--content)) / 2 + 20px)); bottom:12px; padding:2px 8px; border-radius:4px; background:var(--surface); font-size:12px; color:var(--ink-soft); box-shadow:var(--shadow-sm); }
.portal-service-grid { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows:repeat(3, auto); gap:10px; }
.portal-service-card { position:relative; display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:84px; padding:14px 46px 14px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); color:var(--ink); text-decoration:none; transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.portal-service-card strong { font-size:17px; color:var(--navy); }
.portal-service-card span { color:var(--muted); font-size:14px; line-height:1.45; }
.portal-service-card::after { content:""; position:absolute; right:20px; top:50%; width:8px; height:8px; margin-top:-4px; border-top:2px solid var(--green); border-right:2px solid var(--green); transform:rotate(45deg); transition:transform var(--fast) var(--ease); }
.portal-service-card:hover, .portal-service-card:focus-visible { color:var(--ink); }
.portal-service-card:active { transform:translateY(0); box-shadow:var(--shadow-sm); }
.portal-service-primary { grid-row:1 / span 3; justify-content:flex-end; gap:8px; padding:24px; background:var(--tile-primary); border-color:var(--tile-primary); color:#fff; }
.portal-service-primary strong { font-size:25px; color:#fff; letter-spacing:-.01em; }
.portal-service-primary span { color:#c8d6e3; font-size:15px; }
.portal-service-primary::after { display:none; }
.portal-service-primary:hover, .portal-service-primary:focus-visible { color:#fff; }
.portal-service-primary .service-start { display:inline-flex; align-self:flex-start; align-items:center; min-height:46px; margin-top:14px; padding:11px 20px; border-radius:var(--radius-sm); background:var(--button); color:#fff; font-weight:650; font-size:16px; transition:background-color var(--fast) var(--ease); }

/* Home: steps and fees */
.service-info { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:32px 56px; align-items:start; }
.service-info h2, .home-section h2 { font-size:22px; }
.howto-steps { list-style:none; padding:0; counter-reset:howto; margin-top:12px; }
.howto-steps li { counter-increment:howto; position:relative; padding:11px 0 11px 30px; border-top:1px solid var(--line); color:var(--ink-soft); }
.howto-steps li:first-child { border-top:0; }
.howto-steps li::before { content:counter(howto) "."; position:absolute; left:0; top:11px; font-weight:700; color:var(--navy); }
.howto-steps strong { color:var(--ink); }
.howto-note { padding-top:12px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.doc-rates-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px; margin-bottom:12px; }
.doc-rates-table { width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-size:15px; }
.doc-rates-table thead th { padding:9px 16px; background:var(--surface-alt); border-bottom:1px solid var(--line); font-size:13px; font-weight:650; color:var(--muted); text-align:left; }
.doc-rates-table tbody th { padding:10px 16px; border-top:1px solid var(--line); font-weight:500; text-align:left; }
.doc-rates-table td, .doc-rates-table thead th:last-child { text-align:right; }
.doc-rates-table td { padding:10px 16px; border-top:1px solid var(--line); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.doc-rates-table tbody tr:first-child > * { border-top:0; }
.doc-rates-note { margin-top:10px; font-size:14px; color:var(--muted); }

/* Home: notices, Barangay Hall details and hotlines */
.home-section { margin-top:56px; }
.home-section > h2 { margin-bottom:14px; }
.notice-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.notice-callout { padding:14px 18px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--hall-blue); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.notice-callout h3 { margin-bottom:4px; font-size:15px; color:var(--navy); }
.notice-callout p { font-size:15px; color:var(--ink-soft); }
.office-section { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:28px 48px; align-items:start; padding-top:40px; border-top:1px solid var(--line); }
.office-details h2 { margin-bottom:6px; }
.office-intro { margin-bottom:12px; color:var(--ink-soft); }
.info-list > div { display:grid; grid-template-columns:120px 1fr; gap:2px 16px; padding:10px 0; border-top:1px solid var(--line); }
.info-list > div:first-child { border-top:0; }
.info-list dt { font-size:15px; color:var(--muted); }
.info-list dd { font-weight:500; }
.office-note { margin-top:8px; padding-top:12px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.next-note { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-size:15px; color:var(--ink-soft); }
.panel-tint .next-note { border-top-color:var(--navy-line); }
.next-note strong { color:var(--ink); }
.office-list { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; }
.office-list dt { color:var(--muted); font-size:15px; }
.office-list dd { font-weight:600; }
.hotline-panel { padding:22px 24px 24px; background:var(--band); border-radius:var(--radius); color:#fff; }
.hotline-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin-bottom:14px; }
.hotline-panel .hotline-head h2 { font-size:20px; color:#fff; }
.hotline-head p { font-size:14px; color:#c3d1de; }
.hotline-panel a { color:#fff; }
.hotline-panel :focus-visible { outline-color:#e2b760; }
.hotline-list { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.hotline-list li { padding:10px 14px; background:rgba(255,255,255,.05); border:1px solid var(--band-line); border-radius:var(--radius-sm); }
.hotline-list span { display:block; font-size:13px; color:#c3d1de; }
.hotline-list a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; white-space:nowrap; font-size:19px; font-weight:650; font-variant-numeric:tabular-nums; text-decoration:none; }
.hotline-list a:hover { text-decoration:underline; text-decoration-color:#9fd3b8; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.map-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.map-panel iframe { display:block; width:100%; height:300px; border:0; background:var(--surface-alt); }
.map-panel p { padding:12px 16px; font-size:14px; color:var(--muted); border-top:1px solid var(--line); }

/* Inner page header: breadcrumb, title and one line of guidance */
.page-band { background:var(--surface); border-bottom:1px solid var(--line); }
.page-band-inner { max-width:var(--content); margin:0 auto; padding:18px 20px 26px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 32px; }
.page-band-text { max-width:720px; }
.breadcrumb ol { list-style:none; padding:0; display:flex; flex-wrap:wrap; margin-bottom:10px; font-size:14px; }
.breadcrumb li + li::before { content:"/"; margin:0 8px; color:var(--line-strong); }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--green-dark); }
.breadcrumb [aria-current="page"] { color:var(--ink-soft); }
.page-band h1 { font-size:32px; color:var(--navy); }
.page-band-lead { margin-top:8px; max-width:62ch; color:var(--ink-soft); font-size:17px; }
.page-band-lead p + p, .page-band-lead div p + p { margin-top:4px; }
.page-band-meta { font-size:15px; }
.page-band .resident-number { margin-top:6px; font-size:15px; color:var(--muted); }
.page-band-below { max-width:var(--content); margin:0 auto; padding:0 20px; }
.section-first { margin-top:0; }

/* Sign in and registration */
.auth-layout { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 360px); gap:24px 48px; align-items:start; }
.auth-layout .card { margin-bottom:0; box-shadow:var(--shadow-md); }
.auth-aside { padding-top:8px; }
.auth-aside h2 { font-size:17px; margin-bottom:6px; }
.auth-aside p, .auth-aside li { color:var(--ink-soft); font-size:15px; }
.auth-aside .plain-list { margin-top:8px; }
.auth-aside section + section { margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.auth-links { margin-top:22px; font-size:15px; color:var(--muted); }
.auth-links a { font-weight:600; }
.progress-steps { list-style:none; padding:0; margin:0 0 14px; display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; counter-reset:progress; }
.progress-steps-5 { grid-template-columns:repeat(5, 1fr); }
.progress-steps li { counter-increment:progress; position:relative; display:flex; gap:6px; align-items:baseline; font-size:14px; line-height:1.35; color:var(--muted); padding-top:10px; border-top:4px solid var(--surface-sunk); }
.progress-steps li::after { content:""; position:absolute; left:0; right:0; top:-4px; height:4px; border-radius:2px; background:var(--green-line); transform:scaleX(0); transform-origin:left center; }
.progress-steps li.done::after { transform:scaleX(1); }
.progress-steps li[aria-current="step"]::after { transform:scaleX(1); background:var(--green); animation:fill-bar 220ms var(--ease) both; }
.progress-steps li::before { content:counter(progress); font:650 13px/1.35 var(--mono); }
.progress-steps li.done { color:var(--ink-soft); }
.progress-steps li.done::before { color:var(--green-dark); }
.progress-steps li[aria-current="step"] { color:var(--ink); font-weight:650; }
.progress-steps li[aria-current="step"]::before { color:var(--green-dark); }
.step-count, .steps-summary { font-size:15px; font-weight:650; color:var(--green-dark); margin-bottom:16px; }
.steps { margin-bottom:18px; }

/* Document request flow */
.request-layout { max-width:780px; }
.screen { display:none; }
.screen.active { display:block; animation:rise-in var(--base) var(--ease) both; }
.screen:focus { outline:none; }
.tnc-box { max-height:340px; overflow-y:auto; padding:16px 18px; background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:15px; }
.tnc-box h3 { font-size:17px; margin-bottom:4px; }
.tnc-box h4 { font-size:15px; margin:16px 0 4px; }
.tnc-box ol, .tnc-box ul { padding-left:20px; }
.tnc-box .terms-meta { color:var(--muted); font-size:14px; margin-top:16px; }
.tnc-scroll-notice { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin:10px 0 18px; }
.tnc-scroll-notice.is-read { color:var(--green-dark); font-weight:600; }
.tnc-scroll-notice.is-read::before { content:""; width:10px; height:5px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(-45deg); flex-shrink:0; }
.cert-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:16px; }
.cert-btn { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:14px; width:100%; min-height:76px; padding:14px 16px 14px 18px; background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--radius); font:inherit; text-align:left; cursor:pointer; transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.cert-btn .label { grid-column:1; font-weight:650; font-size:16px; }
.cert-btn .fee { grid-column:1; font-size:15px; color:var(--muted); }
.cert-btn .cert-selected { grid-column:1; display:none; font-size:14px; font-weight:650; color:var(--green-dark); }
.cert-check { grid-column:2; grid-row:1 / span 3; position:relative; width:24px; height:24px; border:2px solid var(--line-strong); border-radius:50%; background:var(--surface); transition:background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.cert-check::after { content:""; position:absolute; left:6px; top:3px; width:6px; height:11px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg) scale(.4); opacity:0; transition:transform var(--base) var(--ease), opacity var(--fast) var(--ease); }
.cert-btn:active { transform:translateY(0); box-shadow:none; }
.cert-btn:focus-visible { border-color:var(--green); }
.cert-btn.selected { border-color:var(--green); background:var(--green-tint); box-shadow:inset 0 0 0 1px var(--green); }
.cert-btn.selected .cert-selected { display:block; }
.cert-btn.selected .cert-check { background:var(--green); border-color:var(--green); }
body.dark-mode .cert-btn.selected .cert-check { background:var(--button); border-color:var(--green); }
.cert-btn.selected .cert-check::after { opacity:1; transform:rotate(45deg) scale(1); }
.selected-document { font-size:15px; margin-bottom:4px; padding:10px 14px; background:var(--green-tint); border:1px solid var(--green-line); border-left:4px solid var(--green); border-radius:var(--radius-sm); animation:rise-in var(--base) var(--ease) both; }
.request-subject { display:inline-flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; margin-top:8px; padding:6px 12px; background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink-soft); font-size:15px; }
.request-subject strong { color:var(--ink); }
.upload-box { display:block; width:100%; padding:28px 16px; background:var(--surface); border:2px dashed var(--line-strong); border-radius:var(--radius); color:var(--ink); font:inherit; text-align:center; cursor:pointer; transition:border-color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.upload-box::before { content:""; display:block; width:14px; height:14px; margin:8px auto 14px; border-top:3px solid var(--green); border-left:3px solid var(--green); transform:rotate(45deg); }
.upload-box:hover, .upload-box.is-dragover { border-color:var(--green); background:var(--green-tint); }
.upload-box:active { background:var(--surface-alt); }
.upload-box strong { display:block; font-size:16px; margin-bottom:2px; }
.upload-box span { color:var(--muted); font-size:14px; }
.attachment-preview { padding:14px; background:var(--green-tint); border:1px solid var(--green-line); border-left:4px solid var(--green); border-radius:var(--radius-sm); animation:rise-in var(--base) var(--ease) both; }
.attachment-preview-inner { display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center; }
.attachment-preview img { width:120px; max-height:110px; border-radius:4px; object-fit:cover; background:var(--surface); border:1px solid var(--line); }
.attachment-preview p { margin:2px 0 10px; font-size:14px; font-weight:600; overflow-wrap:anywhere; color:var(--ink-soft); }
.attachment-status { font-weight:650; color:var(--green-dark); }
.confirm-head { display:flex; align-items:center; gap:14px; }
.confirm-mark { position:relative; width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--button); box-shadow:0 0 0 5px var(--green-tint); }
.confirm-mark::after { content:""; position:absolute; left:15px; top:9px; width:9px; height:17px; border-right:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(45deg); }
.screen.active .confirm-mark { animation:pop-in 220ms var(--ease) 60ms both; }
.confirm-ticket { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-bottom:12px; padding:16px 20px; background:var(--surface-alt); border:1px dashed var(--line-strong); box-shadow:inset 4px 0 0 var(--green); border-radius:var(--radius); }
.confirm-ticket-label { font-size:13px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.copy-code-button.is-copied { background:var(--green-tint); border-color:var(--green); color:var(--green-dark); }
.copy-code-button.is-copied::before { content:""; width:10px; height:5px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(-45deg); }
.confirm-code { margin-top:2px; font:650 28px/1.2 var(--mono); letter-spacing:.04em; color:var(--ink); overflow-wrap:anywhere; }
.confirm-steps { list-style:none; padding:0; counter-reset:confirm; }
.confirm-steps li { counter-increment:confirm; position:relative; padding:9px 0 9px 34px; border-top:1px solid var(--line); }
.confirm-steps li:first-child { border-top:0; }
.confirm-steps li::before { content:counter(confirm, decimal-leading-zero); position:absolute; left:0; top:9px; font:650 14px/1.6 var(--mono); color:var(--green-dark); }
.status-search-row { display:flex; gap:10px; }
.status-search-row .form-input { flex:1; min-width:0; font-family:var(--mono); letter-spacing:.03em; }
#status-result { margin-top:16px; }
#toast-wrap { position:fixed; right:16px; bottom:16px; z-index:500; display:flex; flex-direction:column; gap:8px; max-width:min(420px, calc(100vw - 32px)); }
.toast { padding:12px 16px; border-radius:var(--radius-sm); background:#1c2733; color:#fff; font-size:15px; box-shadow:var(--shadow-lg); border-left:4px solid #8aa2b8; animation:rise-in var(--base) var(--ease) both; }
.toast.red { background:#8e2a24; border-left-color:#f1a79f; }
.toast.green { background:#134f36; border-left-color:#9ad8b9; }
#loader { position:fixed; inset:0; z-index:400; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(246,244,239,.85); color:var(--ink); }
body.dark-mode #loader { background:rgba(15,22,29,.85); }
.spinner { width:36px; height:36px; border:4px solid var(--line); border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; }

/* My requests and profile */
.resident-number { font-size:15px; color:var(--muted); margin-top:10px; }
.resident-number strong { font-family:var(--mono); font-size:15px; font-weight:600; color:var(--ink); letter-spacing:.02em; }
.list-caption { font-size:14px; color:var(--muted); margin-bottom:10px; }
.request-list { list-style:none; padding:0; }
.request-item { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px 20px; box-shadow:var(--shadow-sm); }
.request-item + .request-item { margin-top:12px; }
.request-item.is-ready { border-color:var(--green-line); box-shadow:inset 4px 0 0 var(--green), var(--shadow-sm); }
.request-item.is-rejected { border-color:var(--danger-line); box-shadow:inset 4px 0 0 var(--danger), var(--shadow-sm); }
.request-item-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 16px; }
.request-item h2, .request-item h3 { font-size:19px; }
.request-meta { display:flex; flex-wrap:wrap; gap:6px 28px; margin-top:8px; font-size:14px; }
.request-meta > div { display:flex; flex-wrap:wrap; gap:0 8px; }
.request-meta dt { color:var(--muted); }
.request-meta dd { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.request-meta .reference { font-family:var(--mono); letter-spacing:.02em; }
p.request-meta { color:var(--muted); }
.request-status-note { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:15px; color:var(--ink-soft); }
.request-callout { margin-top:12px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); font-size:15px; }
.request-callout strong { display:block; margin-bottom:2px; color:var(--ink); }
.request-callout ul { padding-left:20px; margin-top:4px; }
.request-callout li + li { margin-top:2px; }
.request-callout-next { margin-top:6px; }
.request-callout-ready { background:var(--green-tint); border-color:var(--green-line); }
.request-callout-rejected { background:var(--danger-tint); border-color:var(--danger-line); }
.request-callout-remarks { background:var(--navy-tint); border-color:var(--navy-line); }
.empty-state { text-align:left; }
.empty-state p { color:var(--muted); margin:6px 0 16px; }
.pagination { list-style:none; padding:0; display:flex; gap:8px; margin-top:20px; }
.pagination .page-link { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); text-decoration:none; transition:background-color var(--fast) var(--ease); }
.pagination a.page-link:hover { background:var(--surface-alt); }
.pagination .disabled .page-link { color:var(--muted); opacity:.6; }
.profile-layout { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:24px; align-items:start; }
.record-sheet { padding:0; overflow:hidden; }
.record-sheet-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding:16px 24px; background:var(--surface-alt); border-bottom:1px solid var(--line); }
.record-sheet-head h2 { font-size:18px; margin:0; }
.record-lock { font-size:14px; color:var(--muted); }
.record-sheet .details-list { padding:6px 24px 10px; }
.details-list .resident-number-value { font-family:var(--mono); letter-spacing:.02em; }
.corrections-panel { border-left:4px solid var(--navy); }
body.dark-mode .corrections-panel { border-left-color:var(--navy-line); }
.numbered-list { list-style:none; padding:0; counter-reset:numbered; margin-top:10px; }
.numbered-list li { counter-increment:numbered; position:relative; padding:8px 0 8px 32px; border-top:1px solid var(--navy-line); }
.numbered-list li::before { content:counter(numbered, decimal-leading-zero); position:absolute; left:0; top:8px; font:650 14px/1.6 var(--mono); color:var(--navy); }

/* Information page */
.jump-links { display:flex; flex-wrap:wrap; gap:0; margin-top:-10px; }
.jump-links a { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; font-weight:600; color:var(--ink-soft); text-decoration:none; border-bottom:3px solid transparent; transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.jump-links a:hover { color:var(--ink); border-bottom-color:var(--green); }
.requirements-intro { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; margin-bottom:18px; }
.requirements-intro .unconfirmed { align-self:start; }
.service-table { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.service-list { list-style:none; padding:0; }
.service-list-head { display:grid; grid-template-columns:1fr 160px 120px; gap:16px; padding:10px 20px; font-size:13px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--surface-alt); border-bottom:1px solid var(--line); }
.service-item { display:grid; grid-template-columns:1fr 160px 120px; gap:8px 16px; align-items:center; padding:14px 20px; border-top:1px solid var(--line); transition:background-color var(--fast) var(--ease); }
.service-item:first-child { border-top:0; }
.service-item:hover { background:var(--surface-alt); }
.service-item h3 { font-size:17px; }
.service-fee { font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-soft); }
.service-fee-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.service-item .btn { justify-self:end; }

/* Footer and dialog */
.site-footer { background:var(--navy-deep); color:#d9e4ee; font-size:15px; border-top:4px solid var(--button); }
.site-footer-inner { max-width:var(--content); margin:0 auto; padding:40px 20px 28px; display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap:28px 40px; }
.site-footer-brand { display:flex; align-items:flex-start; gap:14px; }
.site-footer-brand img { width:auto; height:52px; flex-shrink:0; padding:4px; background:#fff; border-radius:var(--radius-sm); }
.site-footer strong { display:block; color:#fff; font-size:17px; }
.site-footer p { color:#b8c8d7; }
.site-footer-note { margin-top:8px; font-size:14px; }
.site-footer-col h2 { font-size:15px; font-weight:650; color:#fff; margin-bottom:6px; }
.site-footer-col p { font-size:14px; }
.site-footer-col p + p { margin-top:8px; }
.site-footer ul { list-style:none; padding:0; }
.site-footer li a { display:flex; align-items:center; min-height:44px; }
.site-footer a { color:#e6eef5; }
.site-footer a:hover { color:#fff; }
.site-footer :focus-visible { outline-color:#e2b760; }
.site-footer .tag-unconfirmed { color:#f0cd84; background:#2a2212; border-color:#8a6a2a; }
.site-footer-base { max-width:var(--content); margin:0 auto; padding:16px 20px 24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px; border-top:1px solid #243d55; font-size:13px; }
.site-footer-base p { color:#9fb2c4; }
.resident-logout-dialog { max-width:420px; width:calc(100% - 32px); padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); }
.resident-logout-dialog[open] { animation:rise-in var(--base) var(--ease) both; }
.resident-logout-dialog h2 { font-size:20px; margin-bottom:8px; }
.resident-logout-dialog p { color:var(--muted); }
.resident-logout-dialog::backdrop { background:rgba(9,19,28,.55); }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes rise-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes fill-bar { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes pop-in { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }

/* Lift only where a real hover exists; keyboard focus gets the same emphasis. */
@media (hover:hover) {
  .portal-service-card:hover { transform:translateY(-2px); border-color:var(--green); box-shadow:var(--shadow-md); }
  .portal-service-card:hover::after { transform:translateX(3px) rotate(45deg); }
  .portal-service-primary:hover { background:var(--tile-primary-hover); border-color:var(--tile-primary-hover); }
  .portal-service-primary:hover .service-start { background:var(--button-hover); }
  .cert-btn:not(.selected):hover { transform:translateY(-1px); border-color:var(--green); box-shadow:var(--shadow-md); }
}
.portal-service-card:focus-visible { transform:translateY(-2px); border-color:var(--green); box-shadow:var(--shadow-md); }
.portal-service-primary:focus-visible { background:var(--tile-primary-hover); border-color:var(--tile-primary-hover); }
.portal-service-primary:focus-visible .service-start { background:var(--button-hover); }

@media (max-width:960px) {
  .portal-band { --photo-clear:calc(max(100vw, 650px) * .29); --photo-height:calc(max(100vw, 650px) * .586); background-image:linear-gradient(180deg, var(--wash-top) 0, var(--wash-top) var(--photo-clear), var(--wash-strong) calc(var(--photo-clear) + 56px), var(--bg) calc(var(--photo-height) - 8px)), var(--hall-photo); background-size:auto, max(100%, 650px) auto; background-position:0 0, 62% 0; }
  .portal-band-inner { grid-template-columns:1fr; padding-top:calc(var(--photo-clear) + 44px); padding-bottom:52px; }
  .service-info, .office-section, .auth-layout, .profile-layout, .requirements-intro { grid-template-columns:1fr; }
  .hotline-list { grid-template-columns:repeat(2, 1fr); }
  .site-footer-inner { grid-template-columns:1fr 1fr; }
  .auth-aside { padding-top:0; }
}

/* Tablets and touch screens get full-size targets in the government bar. */
@media (max-width:1024px), (pointer:coarse) {
  .theme-toggle { min-height:44px; }
}

/* The full navigation needs about 840px; below that it collapses behind the menu button. */
@media (max-width:880px) {
  .nav-collapsible .menu-toggle { display:inline-flex; }
  .nav-collapsible .site-nav:not(.is-open) { display:none; }
  .nav-collapsible .site-nav.is-open { animation:rise-in var(--base) var(--ease) both; }
  .site-nav { border-top:1px solid var(--line); }
  .site-nav-inner { flex-direction:column; align-items:stretch; gap:0; padding-bottom:14px; }
  .site-nav ul { flex-direction:column; align-items:stretch; gap:0; }
  .site-nav-list a { min-height:48px; border-bottom:1px solid var(--line); padding-left:16px; }
  .site-nav-list a::after { left:0; right:auto; top:10px; bottom:10px; width:3px; height:auto; border-radius:0 3px 3px 0; transform:scaleY(0); transform-origin:center; }
  .site-nav-list a:hover::after, .site-nav-list a:focus-visible::after { transform:scaleY(1); }
  .site-nav-list a[aria-current="page"] { background:var(--surface-alt); }
  .site-nav-list a[aria-current="page"]::after { transform:scaleY(1); }
  .site-nav ul.site-nav-account { flex-direction:row; flex-wrap:wrap; gap:10px; padding-top:14px; }
  .site-nav-account li { flex:1 1 140px; }
  .site-nav-account a:not(.btn) { display:flex; justify-content:center; border:1px solid var(--line-strong); }
  .site-nav-account .btn { width:100%; }
}

@media (max-width:760px) {
  .gov-bar-inner, .site-header-inner, .site-nav-inner { padding-left:16px; padding-right:16px; }
  .site-header-inner { padding-top:12px; padding-bottom:12px; }
  .site-brand { gap:10px; }
  .site-brand img { height:44px; }
  .site-brand-text strong { font-size:17px; }
  .site-brand-text span { font-size:13px; }
  .site-brand-text .site-brand-portal { display:none; }
  .container { padding:24px 16px 48px; }
  .portal-band-inner { padding-left:16px; padding-right:16px; gap:18px; }
  .portal-band-caption { right:16px; }
  .portal-hero h1 { font-size:30px; margin-bottom:8px; }
  .portal-hero p { font-size:16px; }
  .portal-hero .portal-hero-account { margin-top:12px; }
  .page-band-inner { padding:10px 16px 16px; gap:12px; }
  .breadcrumb ol { margin-bottom:4px; font-size:13px; }
  .auth-layout { margin-top:-8px; }
  .page-band h1 { font-size:26px; }
  .page-band-lead { font-size:16px; }
  .page-band-below { padding:0 8px; }
  .page-band-actions, .page-band-actions .btn { width:100%; }
  .section, .home-section { margin-top:40px; }
  .section-head h2, .service-info h2, .home-section h2 { font-size:20px; }
  .card-header { padding:18px 18px 16px; }
  .card-header h1 { font-size:25px; }
  .card-body, .panel { padding:18px; }
  .two-column, .notice-row { grid-template-columns:1fr; }
  .portal-service-grid { grid-template-columns:1fr; grid-template-rows:none; }
  .portal-service-primary { grid-row:auto; padding:20px 18px; }
  .portal-service-primary strong { font-size:22px; }
  .portal-service-primary .service-start { align-self:stretch; justify-content:center; }
  .portal-service-card { min-height:64px; }
  .info-list > div { grid-template-columns:1fr; }
  .hotline-panel { padding:18px 16px; }
  .cert-grid { grid-template-columns:1fr; }
  .progress-steps li span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .btn-row .btn { flex:1 1 100%; }
  .btn-row-split .btn { flex:1 1 calc(50% - 6px); }
  .service-list-head { display:none; }
  .service-item { grid-template-columns:1fr auto; padding:14px 16px; }
  .service-item .service-fee { grid-column:1; grid-row:2; font-size:15px; }
  .service-fee-label { position:static; width:auto; height:auto; overflow:visible; clip:auto; font-weight:400; color:var(--muted); }
  .service-item .btn { grid-column:2; grid-row:1 / span 2; }
  .map-panel iframe { height:240px; }
  .record-sheet-head, .record-sheet .details-list { padding-left:18px; padding-right:18px; }
  .site-footer-inner { grid-template-columns:1fr; padding:32px 16px 20px; gap:24px; }
  .site-footer-base { padding:16px 16px 24px; }
}

@media (max-width:600px) {
  .portal-service-grid { grid-template-columns:1fr; }
  .gov-bar { font-size:12px; }
  .hotline-list { grid-template-columns:1fr; gap:0; }
  .hotline-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 0; background:none; border:0; border-top:1px solid var(--band-line); border-radius:0; }
  .hotline-list li:first-child { border-top:0; }
  .hotline-list a { font-size:18px; }
  .details-list, .summary-list { grid-template-columns:1fr; }
  .details-list dt, .summary-list dt { padding-bottom:0; }
  .details-list dd { border-top:0; padding-top:2px; }
  .summary-list dd { border-top:0; padding-top:2px; background:none; }
  .details-list > :nth-child(2) { border-top:0; }
  .status-search-row { flex-direction:column; }
  .attachment-preview-inner { grid-template-columns:1fr; }
  .attachment-preview img { width:100%; max-height:200px; object-fit:contain; }
  .confirm-code { font-size:23px; }
  .confirm-ticket .btn { width:100%; }
  .request-item { padding:16px 16px 18px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .spinner, .btn[aria-busy="true"]::before, [data-submitting] .btn[type="submit"]::before { animation-duration:1.6s !important; animation-iteration-count:infinite !important; }
  .portal-service-card:hover, .portal-service-card:focus-visible, .cert-btn:hover { transform:none !important; }
}