/* KCServices — Kericho County Services. Mobile first, no external assets. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-latin-800.woff2") format("woff2"); }
/* Cormorant Garamond SemiBold and Bold (Latin), © Christian Thalmann, SIL Open Font License 1.1 (https://openfontlicense.org);
   from @fontsource/cormorant-garamond 5.3.0. Used for the county name and the services heading only. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cormorant-garamond-latin-700.woff2") format("woff2"); }

:root {
    /* Forest green, pale sage and restrained gold — shared by the menu, buttons, notices and service cards. */
    --green-900: #0b3a23;
    --green-800: #0f4a2c;
    --green-700: #17643a;
    --green-600: #1f7a46;
    --green-100: #d9ead2;
    --green-50: #eef5ea;
    --mint: #e5efdf;
    --gold-line: #d9a21b;
    --gold-accent: #e0a526;
    --gold-soft: #f2c14e;
    --gold: #b7791f;
    --gold-50: #fffbeb;
    --red-700: #b91c1c;
    --red-50: #fef2f2;
    --blue-700: #1d4ed8;
    --blue-50: #eff6ff;
    --ink: #111827;
    --text: #1f2937;
    --muted: #4b5563;
    --line: #e5e7eb;
    --soft: #f6f8f7;
    --white: #ffffff;
    --radius: 12px;
    --side: 264px;
    --gutter: clamp(16px, 2.4vw, 40px);
    --content-max: 1560px;
    --navy: #0f1f3d;
    /* The frame: warm ivory and pale sage at the top left, the eucalyptus account panel, a warm page, muted gold accents. */
    --band: clamp(150px, 19vh, 203px);
    --ivory: #f7f4ed;
    --sage: #edf2e8;
    --eucalyptus: #496b58;
    --paper: #faf8f2;
    --forest: #1f4d2e;
    --muted-gold: #c9a24a;
    --gold-light: #f8e09a;
    /* The county name: Cormorant Garamond (self-hosted), then serifs already on the device. */
    --serif: "Cormorant Garamond", Georgia, Cambria, "Noto Serif", "Times New Roman", serif;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.45; color: var(--text); background: var(--paper); }
img, svg { display: inline-block; vertical-align: middle; }
a { color: var(--green-700); }
a:focus-visible, button:focus-visible, input:focus-visible, .choice:focus-within { outline: 3px solid #f59e0b; outline-offset: 2px; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--white); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.plate { font-weight: 700; letter-spacing: .04em; }

/* Wide pages (home, header, footer): side margins that grow with the screen, and content capped and centred on large
   monitors so the banner and cards never stretch edge to edge. */
.wrap-wide { max-width: calc(var(--content-max) + 2 * var(--gutter)); padding: 0 var(--gutter); }

/* ───────── The frame. Desktop: a top band, full width and var(--band) tall, with a thin gold line along its foot; under it the
   account panel on the left and the page on the right. The upper menu is the left end of the band and has the same height,
   so both end on one line. The band and the menu stay put; the page scrolls beneath the band. ───────── */
.band { position: fixed; top: 0; right: 0; left: 0; z-index: 30; height: var(--band); isolation: isolate; border-bottom: 2px solid var(--gold-line); background: var(--ivory); }
/* The landscape runs under the whole band, menu area included (so there is no edge at the sidebar boundary), cropped so the
   open sky sits behind the header tools, the misty valley behind the welcome text, the sun mid-height on the right and
   the tea rows along the bottom… */
.band::after { content: ""; position: absolute; z-index: -2; inset: 0; background: url("../images/kericho-sunrise-landscape.webp") 60% 18% / cover no-repeat; }
/* …under one gentle mist — the only overlay. Warm ivory over pale sage: soft over the logo and menu, about 68% at the banner's
   left edge, 25% a third of the way across the banner, clear from its midpoint, so the sunrise and the right stay vivid. */
.band::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory) 28%, var(--sage) 100%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .94) 0, rgba(0, 0, 0, .68) var(--side), rgba(0, 0, 0, .25) calc(var(--side) + (100% - var(--side)) / 3), transparent calc(var(--side) + (100% - var(--side)) / 2));
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .94) 0, rgba(0, 0, 0, .68) var(--side), rgba(0, 0, 0, .25) calc(var(--side) + (100% - var(--side)) / 3), transparent calc(var(--side) + (100% - var(--side)) / 2)); }
.band-main { position: relative; height: 100%; margin-left: var(--side); }
.band-in { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; height: 100%; padding-top: 10px; padding-bottom: 12px; }
.band-top { display: flex; align-items: flex-start; gap: 12px; }
.bar-menu { display: none; }
.band-title { flex: 1; min-width: 0; }
.band-name { position: relative; display: inline-block; padding-bottom: 6px; font-family: var(--serif); font-size: clamp(1.6rem, 2.25vw, 2.3rem); font-weight: 700; line-height: 1.02; color: var(--navy); }
.band-name::after { content: ""; position: absolute; left: 2px; bottom: 0; width: clamp(60px, 6vw, 100px); height: 3px; border-radius: 2px; background: var(--muted-gold); }
.bar-tools { flex: none; display: flex; align-items: center; gap: 10px; margin-right: -10px; }
.bar-link { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--navy); font-weight: 700; text-decoration: none; white-space: nowrap; }
.bar-link:hover { background: rgba(255, 255, 255, .7); color: var(--green-800); }
.bar-link.bell::after { content: ""; position: absolute; top: 10px; right: -6px; bottom: 10px; width: 1px; background: rgba(15, 31, 61, .22); }
/* Welcome: sans-serif, so the county name stays the distinctive line. */
.band-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: .74rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--forest); }
.band-kicker::after { content: ""; flex: none; width: 48px; height: 2px; background: var(--muted-gold); }
.band-heading { margin-top: 2px; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--forest); }
.band-lead { margin-top: 2px; font-size: clamp(.92rem, 1vw, 1.05rem); font-weight: 600; color: var(--navy); }

/* The menu: the upper part sits on the band (transparent, so the band's ivory and sage show through); the lower part, from
   the gold line down, is the account panel. */
.side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: var(--side); }
.side-in { display: flex; flex-direction: column; height: 100%; }
.side-upper { flex: none; display: flex; flex-direction: column; height: var(--band); padding: 14px 12px 10px; overflow: hidden; }
.side-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 0 6px 12px; border-bottom: 1px solid rgba(201, 162, 74, .55); }
.side-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--navy); text-decoration: none; }
.side-logo { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.side-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.side-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.side-tag { overflow: hidden; font-size: .8rem; color: #3f4a5a; white-space: nowrap; text-overflow: ellipsis; }
.side-close { display: none; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 8px; color: var(--navy); font-size: .98rem; font-weight: 700; text-decoration: none; }
.side-link .icon { flex: none; color: var(--green-700); }
.side-link:hover { background: rgba(255, 255, 255, .55); }
.side-link.is-on { background: #dfe9d7; color: var(--green-800); box-shadow: inset 3px 0 0 var(--green-700); }
.side-sub { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0 0 0 23px; padding: 0 12px; border-left: 2px solid #c9d9c0; color: var(--green-800); font-size: .9rem; font-weight: 600; text-decoration: none; }
.side-sub:hover { background: rgba(255, 255, 255, .55); }
.side-lower { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 12px 8px; background: var(--eucalyptus); color: var(--white); }
.side-account { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.side-foot { flex: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .2); }
.side-help { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--white); font-weight: 600; text-decoration: none; }
.side-lower a:focus-visible, .side-lower button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 1px; }

/* Signed out: the sign-in box. */
.guest { display: flex; flex-direction: column; gap: 10px; padding: 2px 8px; }
.guest-title { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
.guest-text { font-size: .95rem; color: rgba(255, 255, 255, .94); }
.guest .guest-signin { min-height: 46px; margin-top: 4px; background: var(--ivory); color: var(--green-800); }
.guest .guest-signin:hover { background: var(--white); }
.guest-create { align-self: center; padding: 6px; font-weight: 600; color: var(--white); text-underline-offset: 3px; }

/* Signed in: the account panel fills the menu below the gold line (about three quarters of its height on a desktop); its list
   scrolls on short screens and Sign out stays at the bottom, above Help. */
.me { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.me-kicker { flex: none; padding: 0 10px; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
.me-who { flex: none; display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 6px 10px; border-radius: 10px; color: var(--white); text-decoration: none; }
.me-avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e8efe2; color: #2c4637; font-size: 1rem; font-weight: 800; letter-spacing: .02em; }
.me-who-text { display: flex; flex-direction: column; min-width: 0; }
.me-name { font-size: 1.08rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.me-sub { font-size: .82rem; color: rgba(255, 255, 255, .85); }
.me-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: clamp(2px, .8vh, 8px); margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .2); }
.me-link { flex: none; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--white); font: inherit; font-size: 1rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.me-link .icon { flex: none; }
.me-out { flex: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .2); }
/* Hover is a faint lift; the page being viewed is a lighter green with a gold edge, so the two never look alike. */
.me-who:hover, .me-link:hover, .side-help:hover { background: rgba(255, 255, 255, .08); }
.me-who.is-on, .me-link.is-on, .side-help.is-on { background: rgba(255, 255, 255, .17); box-shadow: inset 4px 0 0 var(--gold-light); }

.page { margin-left: var(--side); padding-top: var(--band); min-height: 100vh; display: flex; flex-direction: column; }
.page > .wrap { flex: 1; padding-top: 22px; padding-bottom: 20px; }
@media (min-width: 1024px) {
    /* The upper menu shares the (compact) band height: a smaller logo and rows, still room for a service under Quick Pay. */
    .side-upper { padding: 6px 12px 4px; }
    .side-top { margin-bottom: 4px; padding-bottom: 6px; }
    .side-logo { width: 30px; height: 30px; border-radius: 8px; }
    .side-name { font-size: 1.08rem; }
    .side-tag { font-size: .74rem; }
    .side-nav { gap: 2px; }
    .side-link { min-height: 32px; }
    .side-sub { min-height: 28px; }
    /* The window itself never scrolls: the band and the menu stay put, and only the page area below the band scrolls, when it
       has more than fits — with a slim scrollbar beside the content, and none at all when everything fits. */
    html, body { height: 100%; overflow: hidden; }
    .page { position: fixed; top: var(--band); right: 0; bottom: 0; left: var(--side); min-height: 0; margin-left: 0; padding-top: 0; overflow-y: auto; overscroll-behavior: contain;
        scroll-padding-top: 12px; scrollbar-width: thin; scrollbar-color: #c6cdc1 transparent; }
    .page:focus { outline: none; }
}

/* Below 1024px: the band scrolls with the page (the landscape across its full width, the wash stronger behind the text) and
   the menu is a drawer, hidden until the menu button opens it (the script adds focus handling, Escape and the backdrop;
   without the script the button's #side link opens it through :target). */
.drawer-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(4, 30, 22, .45); }
html.drawer-open { overflow: hidden; }
@media (max-width: 1023px) {
    html { scroll-padding-top: 12px; }
    .band { position: relative; height: auto; }
    /* Phones show a slice of the wide image: the sun towards the right (where the wash is lightest) and the tea below; on
       tablets the whole width shows, cropped so the sun sits inside the band. */
    .band::after { background-position: 58% 35%; }
    /* Here the welcome text runs almost the full width over the tea rows, so the mist works top to bottom instead: light at
       the top (the sunrise shows behind the county name), moderate behind the welcome text (the tea still shows through). */
    .band::before { background: linear-gradient(180deg, rgba(247, 244, 237, .4) 0, rgba(247, 244, 237, .4) 22%, rgba(243, 244, 236, .8) 44%, rgba(237, 242, 232, .84) 100%);
        -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .85) 100%); mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .85) 100%); }
    .band-main { height: auto; margin-left: 0; }
    .band-in { gap: 10px; padding-top: 6px; padding-bottom: 12px; }
    .band-top { align-items: center; gap: 8px; }
    .band-heading { font-size: clamp(1.35rem, 5.2vw, 1.8rem); }
    .bar-menu { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: -8px; border-radius: 8px; color: var(--navy); }
    .bar-menu:hover { background: rgba(255, 255, 255, .7); }
    .band-name { font-size: clamp(1.15rem, 3.4vw, 1.7rem); padding-bottom: 6px; }
    .side { width: min(304px, 86vw); overflow: hidden; border-radius: 0 14px 14px 0; box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
        transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
    .side.is-open, .side:target { transform: none; visibility: visible; transition: transform .2s ease; }
    .side-upper { height: auto; background: linear-gradient(180deg, var(--ivory) 0%, var(--sage) 100%); border-bottom: 2px solid var(--gold-line); }
    .side-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 8px; color: var(--navy); }
    .side-close:hover { background: rgba(255, 255, 255, .6); }
    .page { margin-left: 0; padding-top: 0; }
}
@media (max-width: 600px) {
    .band-kicker { font-size: .7rem; gap: 10px; }
    .band-kicker::after { width: 36px; }
}
@media (max-width: 420px) {
    .bar-link span:not(.bell-count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .side, .side.is-open, .side:target { transition: none; } }

/* The sign-in window: centred over the page (near the top on phones, so the keyboard does not cover the fields). */
.signin { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 14px; background: var(--white); color: var(--text); box-shadow: 0 24px 60px rgba(4, 30, 22, .35); overflow: auto; }
.signin::backdrop { background: rgba(4, 30, 22, .5); }
.signin-form { display: grid; gap: 12px; padding: 16px 20px 20px; border-top: 4px solid var(--gold-accent); }
.signin-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.signin-title { font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.signin-x { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -10px -6px 0; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
.signin-x:hover { background: var(--green-50); }
.signin-lead { margin-top: -6px; font-size: .95rem; color: var(--muted); }
.signin .notice { margin: 0; }
.signin .input { height: 46px; }
.signin-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: .92rem; }
@media (max-width: 600px) { .signin { margin: 12px auto auto; } }

/* Short confirmations: fade in and out by themselves (no script needed). */
/* Centred over the page, under the open menu drawer (z-index), never catching taps. */
.toast { position: fixed; z-index: 38; bottom: 20px; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 460px; margin: 0 auto; padding: 12px 16px; border-radius: 10px;
    background: var(--green-900); color: var(--white); font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); pointer-events: none; opacity: 0; visibility: hidden; }
.toast .icon { flex: none; color: var(--gold-soft); }
.toast.is-live { animation: toast-life 5s ease forwards; }
@keyframes toast-life {
    0% { opacity: 0; visibility: visible; transform: translateY(8px); }
    6%, 90% { opacity: 1; visibility: visible; transform: none; }
    100% { opacity: 0; visibility: hidden; transform: none; }
}
@media (min-width: 1024px) { .toast { left: calc(var(--side) + 16px); } }
@media (prefers-reduced-motion: reduce) { .toast.is-live { animation-timing-function: steps(1, end); } }

/* Type */
.h1 { font-size: 1.45rem; line-height: 1.2; font-weight: 800; color: var(--ink); letter-spacing: -.015em; }
.h2 { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.lead { color: var(--muted); margin-top: 4px; }
.page-head { margin-bottom: 12px; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: .875rem; text-decoration: none; margin-bottom: 6px; font-weight: 600; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 8px; }

/* Search box (location lists) */
.search { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 0 12px; height: 46px; border: 1px solid #cbd5e1; border-radius: 10px; background: var(--white); color: var(--muted); }
.search:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); }
.search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; background: transparent; color: var(--ink); min-width: 0; }
/* Icon tiles (sign-in page). */
.quick { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.quick-tile { display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px; border: 1px solid #a7f3d0; border-radius: var(--radius); background: var(--green-50); color: var(--ink); text-decoration: none; }
.quick-tile:hover { border-color: var(--green-600); background: var(--green-100); }
.quick-tile:focus-visible { outline: 3px solid var(--green-600); outline-offset: 2px; }
.quick-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--green-700); color: var(--white); }
.quick-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.quick-title { font-weight: 700; font-size: 1rem; }
.quick-text { font-size: .84rem; color: var(--muted); }
.quick-go { flex: none; color: var(--green-700); }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; }
.chip { flex: none; border: 1px solid var(--line); background: var(--white); color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.chip.is-on { background: var(--green-700); border-color: var(--green-700); color: var(--white); }

.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 14px; }
.badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #eef0ef; color: var(--muted); white-space: nowrap; }
.badge-ok { background: var(--green-100); color: var(--green-800); }
.empty { padding: 16px; text-align: center; color: var(--muted); }

.steps-list { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--green-700); color: var(--white); font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--green-800); }
.btn[disabled], .btn.is-busy { opacity: .7; cursor: progress; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: .9rem; }
.btn-block { display: flex; width: 100%; }
.btn-ghost { background: var(--white); color: var(--green-700); border: 1px solid #a7f3d0; }
.btn-ghost:hover { background: var(--green-50); }
.btn-pay { min-height: 54px; font-size: 1.1rem; }
.actions { display: grid; gap: 8px; margin-top: 12px; }

/* Lists */
.list { list-style: none; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list li + li { border-top: 1px solid var(--line); }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--text); min-height: 60px; }
.list-item:hover { background: var(--green-50); }
.list-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--green-50); color: var(--green-700); }
.list-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.list-title { font-weight: 700; color: var(--ink); }
.list-sub { font-size: .85rem; color: var(--muted); }
.list-go { color: var(--muted); flex: none; }

/* Location banner */
.place { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius); background: var(--green-50); border: 1px solid #a7f3d0; margin-bottom: 14px; }
.place-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--green-700); color: var(--white); }
.place-label { font-size: .8rem; color: var(--green-800); font-weight: 600; }
.place-name { font-size: 1.35rem; line-height: 1.2; font-weight: 800; color: var(--ink); }
.place-sub { font-size: .875rem; color: var(--muted); margin-top: 2px; }

/* Forms */
.form { display: grid; gap: 14px; }
.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); margin-bottom: 6px; padding: 0; }
.step-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-700); color: var(--white); font-size: .75rem; }
.input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--white); }
.input:focus { border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); outline: 0; }
.input-plate { text-transform: uppercase; font-weight: 800; letter-spacing: .08em; font-size: 1.3rem; height: 56px; }
.input-plate::placeholder { font-weight: 600; letter-spacing: .04em; color: #9ca3af; }
.is-invalid, .is-invalid:focus { border-color: var(--red-700); }
.help { font-size: .82rem; color: var(--muted); margin-top: 4px; }
.error { font-size: .875rem; color: var(--red-700); margin-top: 4px; font-weight: 600; }
.choices { display: grid; gap: 8px; }
.choices.is-invalid { border: 0; }
.choice { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; cursor: pointer; background: var(--white); }
.choice:has(input:checked) { border-color: var(--green-600); background: var(--green-50); box-shadow: 0 0 0 1px var(--green-600); }
.choice input { width: 20px; height: 20px; accent-color: var(--green-700); flex: none; margin: 0; }
.choice-body { flex: 1; display: flex; flex-direction: column; }
.choice-title { font-weight: 700; color: var(--ink); }
.choice-sub { font-size: .8rem; color: var(--muted); }
.amount { font-weight: 800; color: var(--ink); white-space: nowrap; }
.goods-group + .goods-group { margin-top: 12px; }
.goods-group-title { font-weight: 700; font-size: .85rem; color: var(--muted); margin: 0 0 6px; }
.is-picking .goods-group-title { display: none; }
/* Packing options as three columns (No. | Description | Price): a long description wraps inside its own column. */
.goods-head, .choice.goods-option { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.goods-head { padding: 0 13px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.goods-head span:last-child, .goods-option .amount { text-align: right; }
.goods-no { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--muted); }
.goods-desc { font-weight: 700; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.fixed-choice { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }

/* Notices */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: .92rem; }
.notice .icon { flex: none; margin-top: 1px; }
.notice-info { background: var(--blue-50); color: var(--blue-700); }
.notice-ok { background: var(--green-50); color: var(--green-800); }
.notice-warn { background: var(--gold-50); color: #92400e; }
.notice-error { background: var(--red-50); color: var(--red-700); }

/* Summary / receipt */
.summary { margin-bottom: 14px; padding: 0; overflow: hidden; }
.summary dl, .receipt dl, .mini { display: grid; }
.summary dl > div, .receipt dl > div, .mini > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
dt { color: var(--muted); font-size: .9rem; }
dd { text-align: right; font-weight: 600; color: var(--ink); }
.total { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--green-50); }
.total strong { font-size: 1.35rem; color: var(--ink); }

/* Progress */
.progress { display: grid; gap: 10px; }
.progress-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto; border-radius: 50%; }
.progress-icon.is-waiting { background: var(--green-50); }
.progress-icon.is-stopped { background: var(--gold-50); color: #92400e; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--green-100); border-top-color: var(--green-700); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.track { list-style: none; padding: 0; display: flex; justify-content: space-between; gap: 6px; font-size: .78rem; color: var(--muted); }
.track li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 4px; border-radius: 8px; background: var(--soft); }
.track .done { color: var(--green-800); background: var(--green-50); }
.track .now { color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 2px var(--green-600); }
.mini { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mini > div:last-child, .receipt dl > div:last-child { border-bottom: 0; }
.retry { margin-top: 12px; }

.paid { display: grid; gap: 6px; justify-items: center; margin-bottom: 14px; }
.paid-icon { color: var(--green-700); }
.receipt { padding: 0; overflow: hidden; }
.receipt-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px dashed #cbd5e1; background: var(--soft); }
.receipt-org { font-weight: 800; color: var(--ink); }
.receipt > p { padding: 10px 14px; border-top: 1px solid var(--line); }
.error-page { display: grid; gap: 10px; max-width: 520px; margin: 20px auto; }

/* Footer: a compact Help centre, then a slim identity bar */
.footer { border-top: 1px solid #e4dfd3; padding: 12px 0 14px; margin-top: 24px; }
.footer-help { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-bottom: 12px; }
.footer-title { display: inline-flex; align-items: center; gap: 8px; font-size: .98rem; font-weight: 700; color: var(--green-800); }
.footer-help-text { font-size: .92rem; color: var(--muted); }
.footer-help .contact { flex-basis: 100%; }
.contact { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .92rem; }
.contact li { display: flex; align-items: center; gap: 8px; }
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.footer-help + .footer-bar { margin-top: 0; }
.footer-bar:first-child { padding-top: 0; border-top: 0; }
.footer-org { font-weight: 600; color: var(--ink); }
.footer-secure { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.footer-secure strong { color: var(--green-700); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; }
.footer-links a { color: var(--muted); text-decoration: none; padding: 4px 14px; border-left: 1px solid #cbd5e1; }
.footer-links a:first-child { border-left: 0; padding-left: 0; }
.footer-links a:last-child { padding-right: 0; }
.footer-links a:hover { color: var(--green-700); text-decoration: underline; }
.footer-credit { margin-top: 8px; font-size: .74rem; color: #6b7280; }
.footer-credit a { color: inherit; }

@media (min-width: 560px) {
    .actions { grid-template-columns: 1fr 1fr; }
    .h1 { font-size: 1.65rem; }
}
@media (min-width: 860px) {
    .form, .summary, .progress, .retry, .receipt, .paid, .actions, .place, .notice { max-width: 560px; }
}

/* Printable parking sign */
.poster-tools { display: grid; gap: 8px; margin-bottom: 12px; }
.poster-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.poster { max-width: 680px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; background: var(--white); }
.poster-head { display: flex; align-items: center; justify-content: center; gap: 12px; padding-bottom: 12px; border-bottom: 3px solid var(--green-700); }
.poster-head img { width: 44px; height: 44px; border-radius: 10px; }
.poster-org { font-weight: 800; font-size: 1.1rem; color: var(--ink); text-align: left; }
.poster-sub { font-size: .85rem; color: var(--muted); text-align: left; }
.poster-title { margin-top: 16px; font-size: 2.1rem; line-height: 1.1; font-weight: 900; color: var(--green-800); letter-spacing: -.02em; }
.poster-lead { margin-top: 6px; color: var(--muted); font-weight: 600; }
.poster-place { margin: 14px auto 0; padding: 10px 14px; border-radius: 10px; background: var(--green-50); display: inline-block; min-width: 60%; }
.poster-place-name { font-size: 1.6rem; font-weight: 800; color: var(--ink); }
.poster-place-sub { color: var(--muted); }
.poster-qr { margin: 16px auto 0; }
.poster-qr img { display: block; width: min(78vw, 360px); height: auto; margin: 0 auto; }
.poster-qr figcaption { display: grid; gap: 2px; margin-top: 6px; color: var(--muted); }
.poster-qr figcaption strong { font-family: var(--mono); color: var(--ink); font-size: 1.05rem; word-break: break-all; }
.poster-steps { list-style: none; padding: 0; margin: 16px auto 0; display: grid; gap: 6px; max-width: 460px; text-align: left; font-weight: 600; color: var(--ink); }
.poster-steps li { display: flex; align-items: center; gap: 10px; }
.poster-steps span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green-700); color: var(--white); font-weight: 800; }
.poster-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; padding-top: 10px; border-top: 1px dashed #cbd5e1; font-size: .9rem; color: var(--muted); }

@media print {
    .side, .band, .drawer-backdrop, .signin, .toast, .footer, .no-print, .skip { display: none !important; }
    /* The page is a full-screen-height column; printed from a phone that height is the screen's and can push a 2nd page
       (fixed for receipts in receipt.css — this covers every page, e.g. the printable signs). */
    .page { position: static; margin-left: 0; padding-top: 0; min-height: 0; overflow: visible; }
    html, body { height: auto; overflow: visible; }
    .receipt { border: 1px solid #000; }
    body { color: #000; }
    .is-poster .page > .wrap { max-width: none; padding: 0; }
    .poster { max-width: none; border: 0; padding: 0; }
    .poster-title { font-size: 44pt; }
    .poster-place-name { font-size: 28pt; }
    .poster-qr img { width: 105mm; }
    .poster-steps { font-size: 15pt; max-width: 150mm; }
    .poster, .poster * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@page { size: A4 portrait; margin: 12mm; }

/* Compliance notice: keep the line breaks of County wording and of the holder's own message. */
.prewrap { white-space: pre-line; }

/* Taxpayer accounts */
.narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
.form.narrow, .notice.narrow { max-width: 480px; }
.card.narrow + .card.narrow, .form.narrow + .card.narrow, .card.narrow + p.narrow, .form.narrow + p.narrow { margin-top: 12px; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; cursor: pointer; padding: 4px 0; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--green-700); }
.check.is-invalid { color: var(--red-700); }
.textarea { height: auto; padding: 10px 14px; line-height: 1.45; resize: vertical; }
select.input { appearance: auto; }
.file { font: inherit; font-size: .85rem; max-width: 100%; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--green-700); text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.inline { display: inline; margin: 0; }
.btn-danger { background: var(--red-700); }
.btn-danger:hover { background: #991b1b; }
.badge-warn { background: var(--gold-50); color: #92400e; }

.js .ctx-go { display: none; }
.acct-acting { display: block; margin-bottom: 12px; color: var(--green-800); background: var(--green-50); border-radius: 8px; padding: 6px 10px; }

.bell { position: relative; }
.bell-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--red-700); color: var(--white); font-size: .65rem; font-weight: 800; line-height: 16px; text-align: center; }

.stats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--text); }
.stat:hover { border-color: var(--green-600); background: var(--green-50); }
.stat-n { font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.stat-l { font-size: .82rem; color: var(--muted); }
.list-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.list-item.is-unread .list-title { color: var(--green-800); }
.list-item.is-unread { background: var(--green-50); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.filters { display: grid; gap: 4px; margin-bottom: 10px; }
.filters .chips { margin-bottom: 0; }
.filters .chip { text-decoration: none; }
.narrow-btn { max-width: 560px; margin-bottom: 12px; }
.rep-edit, .doc .upload { padding: 0 14px 12px 62px; }
.rep-edit summary { cursor: pointer; color: var(--green-700); font-weight: 600; }
.rep-edit .form { margin-top: 8px; }
.rep-edit .form + .form { padding-top: 10px; border-top: 1px dashed var(--line); }
.doc .upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.timeline { list-style: none; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.timeline li { padding-left: 12px; border-left: 2px solid var(--green-100); }
.withdraw { margin-top: 14px; }
.thread { list-style: none; padding: 0; display: grid; gap: 8px; margin-bottom: 12px; }
.msg { padding: 10px 12px; border-radius: 10px; background: var(--soft); max-width: 640px; }
.msg-county { background: var(--green-50); border: 1px solid #a7f3d0; }
.prose { display: grid; gap: 6px; }
.prose .h3 { margin: 6px 0 0; }
@media (max-width: 559px) {
    .rep-edit, .doc .upload { padding-left: 14px; }
}

/* ───────── Home ───────── */
.btn-outline { background: var(--white); color: var(--green-800); border: 1.5px solid var(--green-700); }
.btn-outline:hover { background: var(--green-50); }

/* "What would you like to pay for?": search, the no-account note, the payable services, then what is coming */
.pay { container-type: inline-size; }
/* Heading (with its one-line hint) on the left and the search on the right, centred in one row; stacked when narrow. */
.pay-head { display: grid; gap: 14px; align-items: center; }
@container (min-width: 860px) { .pay-head { grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); gap: 28px; } }
.pay-title { font-family: var(--serif); font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.05; font-weight: 700; color: var(--navy); }
.pay-title:focus { outline: 0; }
.pay-sub { margin-top: 4px; font-size: 1.02rem; font-weight: 700; color: #1d3a6e; }
/* Banner, search, note, cards and the coming-soon strip all share the same left and right edges. */
.pay-search { display: flex; align-items: stretch; border: 1px solid #cfd6cf; border-radius: 10px; background: var(--white); overflow: hidden; }
.pay-search:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); }
.pay-search-field { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 14px; color: var(--muted); }
.pay-search-field input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--ink); text-overflow: ellipsis; }
.pay-search-field input:focus-visible { outline: 0; }
.pay-search-field input::placeholder { color: #6b7280; }
.pay-search-btn { flex: none; min-height: 48px; padding: 0 32px; border-radius: 0; font-weight: 600; }
.pay .notice { max-width: none; margin-top: 14px; }

/* Service cards: three equal columns across the content (two on tablets, one on phones; more services flow into further
   rows). Cards in a row share one height and their buttons sit at the bottom, so the buttons line up. */
.svc-grid { list-style: none; padding: 0; display: grid; gap: 16px; margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 620px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 940px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc { display: flex; min-width: 0; border: 1px solid #e6e1d6; border-radius: 10px; background: var(--white); }
.svc:hover { border-color: #c9d6c0; }
.svc-in { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "icon body" "action action";
    align-items: start; gap: 18px 16px; padding: 18px; }
.svc-icon { grid-area: icon; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 10px; background: #e7efe1; color: var(--green-800); }
.svc-body { grid-area: body; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 4px; }
.svc-title { font-size: 1.15rem; line-height: 1.25; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.svc-text { font-size: .93rem; color: var(--muted); }
.svc-action { grid-area: action; align-self: end; width: 100%; min-height: 48px; gap: 10px; font-size: 1rem; font-weight: 600; white-space: nowrap; }
.svc-empty { margin-top: 14px; padding: 24px 16px; border: 1px dashed #cfd8d3; border-radius: 10px; text-align: center; color: var(--muted); }
.svc-empty-title { margin-bottom: 4px; font-size: 1.05rem; font-weight: 700; color: var(--ink); }

/* Not online yet: one small muted line under the cards, never a link or button. */
.soon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 18px; font-size: .95rem; color: #3a5683; }
.soon-title { flex: none; }
.soon-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; }
.soon-how { flex-basis: 100%; margin: .25rem 0 0; font-size: .85rem; color: var(--muted, #5b6770); }
.soon-item:not([hidden]) ~ .soon-item:not([hidden])::before { content: "·"; padding: 0 9px; color: #8b97ab; }
/* Phones: the Search button stays attached, just narrower. */
@media (max-width: 480px) {
    .pay-search-field { gap: 8px; padding-left: 12px; }
    .pay-search-btn { padding: 0 18px; }
    .svc-in { padding: 16px; }
}
/* ───────── Signed-in portal (every account page) ───────── */
/* Light grey-green workspace, full width with 16–32px outer spacing, white cards with subtle borders. */
.is-portal { background: var(--paper); --gutter: clamp(16px, 2vw, 32px); --card-line: #e2e8e4; }
.is-portal .wrap-wide { max-width: none; }
.is-portal .footer { margin-top: 28px; }
.is-portal .footer-bar { padding-top: 0; border-top: 0; }
.is-portal .list { background: var(--white); }

/* "Current account" (top of the page, only for people who act for more than one taxpayer) */
.acct-switch { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.acct-switch-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.acct-switch-field { position: relative; display: block; }
.acct-switch-select { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; padding: 0 28px 0 0; border: 0; background: transparent; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); text-overflow: ellipsis; cursor: pointer; }
.acct-switch-select:focus-visible { outline: 0; }
.acct-switch-caret { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.acct-switch .ctx-go { margin-top: 6px; }
.acct-switch--page { margin-bottom: 14px; padding: 6px 14px; border: 1px solid #cfd8d3; border-radius: 12px; background: var(--white); }
.acct-switch--page:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 3px var(--gold-soft); }
.acct-switch--page .acct-switch-select { height: 40px; }

/* Dashboard: compact welcome banner */
.pt-welcome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; min-height: 150px; padding: 22px clamp(20px, 2.6vw, 36px); border-radius: 18px; color: var(--white);
    background-color: var(--green-900);
    background-image: linear-gradient(90deg, rgba(3, 46, 33, .97) 0%, rgba(4, 58, 41, .9) 38%, rgba(6, 74, 52, .45) 72%, rgba(6, 74, 52, .15) 100%), url("../images/kericho-sunrise-landscape.webp");
    background-size: cover; background-position: center 55%; }
.pt-welcome-body { flex: 1 1 380px; min-width: 0; }
.pt-welcome-kicker { color: var(--gold-soft); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pt-welcome-title { margin-top: 4px; font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pt-welcome-meta { margin-top: 6px; color: rgba(255, 255, 255, .92); overflow-wrap: anywhere; }
.pt-welcome-meta strong { display: block; margin-bottom: 2px; color: var(--white); }
.pt-welcome-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pt-welcome-actions .btn { min-height: 48px; padding: 0 20px; font-size: 1rem; font-weight: 600; }
.btn-light { background: var(--white); color: var(--green-800); }
.btn-light:hover { background: var(--green-50); }
.btn-on-dark { background: transparent; color: var(--white); border: 1.5px solid rgba(255, 255, 255, .7); }
.btn-on-dark:hover { background: rgba(255, 255, 255, .12); }
.pt-claim { margin: 14px 0 0; }

/* Summary cards */
.pt-stats { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.pt-stat { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--card-line); border-radius: 16px; background: var(--white); color: var(--text); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
.pt-stat:hover { border-color: var(--green-600); }
.pt-stat-icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--mint); color: var(--green-800); }
.pt-stat.is-due .pt-stat-icon { background: var(--gold-50); color: #92400e; }
.pt-stat-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-stat-label { font-size: .95rem; font-weight: 500; color: var(--ink); }
.pt-stat-value { font-size: clamp(1.3rem, 1.7vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.pt-stat-note { font-size: .9rem; color: var(--muted); }
.pt-stat-link { font-size: .92rem; color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; }
.pt-stat-go { flex: none; color: var(--ink); }
/* Sized by the room the page actually has (beside the side menu), not the screen. */
.acct-main { min-width: 0; container-type: inline-size; }
@container (min-width: 560px) {
    .pt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 560px) and (max-width: 819px) {
    .pt-stat { padding: 16px; }
    .pt-stat-icon, .pt-stat-go { display: none; }
}

/* Bills (≈60%) and receipts (≈40%) panels */
.pt-panels { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
@container (min-width: 900px) { .pt-panels { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.pt-panel { min-width: 0; padding: 18px 20px; border: 1px solid var(--card-line); border-radius: 16px; background: var(--white); }
.pt-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pt-panel-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.pt-panel-more { font-size: .95rem; color: var(--green-700); text-underline-offset: 2px; white-space: nowrap; }
.pt-rows { list-style: none; padding: 0; }
.pt-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pt-row:last-child { padding-bottom: 0; border-bottom: 0; }
.pt-row-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--mint); color: var(--green-800); }
.pt-row-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pt-row-title { overflow: hidden; font-weight: 600; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.pt-row-sub { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.pt-row-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pt-row-amount { font-weight: 800; color: var(--ink); white-space: nowrap; }
.pt-row-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.pt-row-action { min-height: 40px; padding: 0 16px; }
.pt-icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #cfd8d3; border-radius: 10px; background: var(--white); color: var(--green-800); }
.pt-icon-btn:hover { background: var(--green-50); }
/* Phones: no row icons, titles may wrap, actions stay beside the amount. */
@media (max-width: 480px) {
    .pt-row { align-items: flex-start; gap: 10px; }
    .pt-row-icon { display: none; }
    .pt-row-title { white-space: normal; overflow-wrap: anywhere; }
}
.pt-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 12px 12px; text-align: center; }
.pt-empty-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; background: var(--mint); color: var(--green-700); }
.pt-empty.is-warn .pt-empty-icon { background: var(--gold-50); color: #92400e; }
.pt-empty-title { font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.pt-empty-text { color: var(--muted); }

/* Quick Pay tiles and the help strip */
.pt-quick { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--card-line); border-radius: 16px; background: var(--white); }
.pt-quick-sub { margin-top: 2px; color: var(--muted); }
.pt-tiles { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 14px; }
.pt-tile { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--white); color: var(--ink); font-weight: 700; text-decoration: none; }
.pt-tile:hover { border-color: var(--green-600); background: var(--green-50); }
.pt-tile-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--mint); color: var(--green-800); }
.pt-tile-title { flex: 1; min-width: 0; }
.pt-tile-go { flex: none; }
.pt-help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding: 14px 20px; border: 1px solid #cfe5d7; border-radius: 14px; background: var(--green-50); color: var(--green-800); text-decoration: none; }
.pt-help-title { flex: 1; font-size: 1.05rem; font-weight: 700; }
.pt-help-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 2px; }

/* Empty lists on the full bill / receipt / permit pages */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px; }
.empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green-50); color: var(--green-700); }
.empty-state .empty-title { font-weight: 600; color: var(--ink); }

@media (max-width: 760px) {
    .pt-welcome { background-image: linear-gradient(180deg, rgba(3, 46, 33, .93) 0%, rgba(4, 58, 41, .82) 100%), url("../images/kericho-sunrise-landscape.webp"); }
    .pt-welcome-actions { width: 100%; }
    .pt-welcome-actions .btn { flex: 1 1 200px; }
}
/* Receipts (the narrower panel): the View / PDF buttons sit under the amount so the text keeps its room. */
.pt-row-end .pt-row-actions { margin-top: 2px; }
.pt-icon-btn--sm { width: 36px; height: 36px; }
/* ───────── My profile ───────── */
.pf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pf-head-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mint); color: var(--green-800); }
.pf-title { font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pf-sub { margin-top: 2px; color: var(--muted); }
/* Three columns when the page has room, two in between, one on phones (sized by the room beside the side menu). */
.pf-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.pf-grid + .pf-grid { margin-top: 20px; }
@container (min-width: 640px) { .pf-grid--3, .pf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .pf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pf-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--card-line, #e2e8e4); border-radius: 16px; background: var(--white); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.pf-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.pf-card-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--mint); color: var(--green-800); }
.pf-card-heading { min-width: 0; padding-top: 2px; }
.pf-card-title { font-size: 1.2rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.pf-card-sub { margin-top: 2px; font-size: .95rem; color: var(--muted); }
/* Each form fills its card so the action buttons line up along the bottom of a row. */
.pf-form { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.pf-form .label { margin-bottom: 6px; font-size: .95rem; }
.pf-form .input { height: 44px; font-size: 1rem; }
.pf-form .help, .pf-form .error { margin-top: 6px; }
.pf-actions { margin-top: auto; padding-top: 4px; }
/* Second row: the cards keep equal heights, but a card's button stays under its own content when the other grows. */
.pf-grid--2 .pf-actions { margin-top: 0; }
.pf-actions .btn { min-height: 46px; padding: 0 24px; font-weight: 600; }
.pf-strip { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid #cfe5d7; border-radius: 10px; background: var(--green-50); }
.pf-strip strong { font-weight: 700; color: var(--green-800); overflow-wrap: anywhere; }
.pf-strip span { font-size: .9rem; color: var(--muted); }
.pf-strip--row { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.pf-strip--row span { font-size: 1rem; }
.pf-strip--muted { border-color: var(--line); background: var(--soft); }
.pf-strip--muted strong { color: var(--ink); }
.pf-pending { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--gold-50); color: #92400e; font-size: .92rem; overflow-wrap: anywhere; }
.pf-pending .icon { flex: none; margin-top: 2px; }
.pf-notice { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--green-50); color: var(--green-800); font-size: .95rem; }
.pf-notice .icon { flex: none; margin-top: 1px; }
.pf-notice:focus { outline: 3px solid var(--gold-soft); outline-offset: 2px; }
.pf-meta { margin: 0 0 14px; font-size: .92rem; color: var(--muted); }
.pf-privacy-intro { margin: -8px 0 14px; }
/* Inputs with a status badge or a show/hide control inside them */
.input-wrap { position: relative; display: block; }
.input.has-reveal { padding-right: 52px; }
.input.has-badge { padding-right: 136px; }
.input-badge { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; pointer-events: none; }
.input-badge.is-warn { background: var(--gold-50); color: #92400e; }
.input-badge.is-ok { background: var(--green-100); color: var(--green-800); }
.input-reveal { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.input-reveal:hover { background: var(--green-50); }
.input-reveal .reveal-hide, .input-reveal.is-shown .reveal-show { display: none; }
.input-reveal.is-shown .reveal-hide { display: block; }
/* "Withdraw your consent": opening it only shows the explanation */
.pf-disclosure { border: 1px solid #cfd8d3; border-radius: 12px; background: var(--white); }
.pf-disclosure > summary { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 14px 16px; list-style: none; cursor: pointer; border-radius: 12px; }
.pf-disclosure > summary::-webkit-details-marker { display: none; }
.pf-disclosure > summary:hover { background: var(--green-50); }
.pf-disclosure > summary:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.pf-disclosure-caret { flex: none; transition: transform .15s; }
.pf-disclosure[open] .pf-disclosure-caret { transform: rotate(180deg); }
.pf-disclosure-title { display: block; font-weight: 700; color: var(--ink); }
.pf-disclosure-sub { display: block; font-size: .92rem; color: var(--muted); }
.pf-disclosure-body { padding: 4px 16px 16px; }
@media (max-width: 480px) {
    .pf-card { padding: 18px; }
    .input.has-badge { padding-right: 124px; }
}