/* =============================================================================
   Unified MOI e-Services Portal — application styles
   Colours come only from the theme's tokens.css. Layout uses logical
   properties (inline-start/end) so Arabic RTL mirrors automatically.
   ========================================================================== */

@font-face {
    font-family: "Public Sans";
    src: url("/assets/fonts/PublicSans.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Noto Kufi Arabic";
    src: url("/assets/fonts/NotoKufiArabic.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --font-latin: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-arabic: "Noto Kufi Arabic", "Public Sans", "Segoe UI", Tahoma, sans-serif;
    --font: var(--font-latin);
    --leading: 1.6;
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-card: 14px;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --shadow-pop: 0 12px 32px -8px rgb(23 42 74 / .28), 0 2px 6px rgb(23 42 74 / .12);
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- High-contrast scheme (accessibility menu) ---------------------------- */
html[data-contrast="high"] {
    --c-ink: #000000;
    --c-ink-soft: #000000;
    --c-muted: #1F1F1F;
    --c-primary: #0033A0;
    --c-primary-strong: #00206B;
    --c-primary-tint: #FFFFFF;
    --c-seal: #004D40;
    --c-seal-tint: #FFFFFF;
    --c-surface: #FFFFFF;
    --c-paper: #FFFFFF;
    --c-line: #000000;
    --c-warning: #5C3600;
    --c-on-dark-muted: #FFFFFF;
    --c-bar: #000000;
    --c-footer: #000000;
}

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

html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html[data-text="large"] { font-size: 112.5%; }
html[data-text="larger"] { font-size: 125%; }
html[lang="ar"] { --font: var(--font-arabic); --leading: 1.85; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: var(--leading);
    color: var(--c-ink-soft);
    background: var(--c-surface);
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { color: var(--c-ink); line-height: 1.25; margin: 0 0 var(--space-3); }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.5; }
h1 { font-size: 2.25rem; font-weight: 750; letter-spacing: -.015em; }
h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.0625rem; font-weight: 650; }
html[lang="ar"] h1, html[lang="ar"] h2 { letter-spacing: 0; }
p { margin: 0 0 var(--space-4); max-width: 70ch; }

a { color: var(--c-primary); text-underline-offset: .2em; }
a:hover { color: var(--c-primary-strong); }
html[data-underline="on"] a { text-decoration: underline; text-decoration-thickness: 2px; }

img, svg { max-width: 100%; }
button { font: inherit; }

:focus-visible {
    outline: 3px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
.utility-bar :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: #FFFFFF; }

.icon {
    width: 1.25em; height: 1.25em;
    flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -.25em;
}
.icon--lg { width: 1.75rem; height: 1.75rem; }

.wrap { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline: var(--space-5); }

.skip-link {
    position: absolute; inset-inline-start: var(--space-4); top: -4rem; z-index: 100;
    padding: var(--space-2) var(--space-4); background: var(--c-paper); color: var(--c-ink);
    font-weight: 700; border: 2px solid var(--c-primary); border-radius: var(--radius-s);
}
.skip-link:focus { top: var(--space-2); }

main:focus { outline: none; }

/* ---- Utility bar ------------------------------------------------------------ */
.utility-bar { background: var(--c-bar); color: var(--c-on-dark); font-size: .875rem; }
.utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 3rem; }
.utility-bar__env { margin: 0; color: var(--c-on-dark-muted); white-space: nowrap; }
.utility-bar__tools { display: flex; align-items: center; gap: var(--space-2); }

.tool-button {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 2.5rem; padding: var(--space-1) var(--space-3);
    color: inherit; background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-m); cursor: pointer; list-style: none;
}
.tool-button::-webkit-details-marker { display: none; }
.tool-button:hover { background: rgb(255 255 255 / .1); }
details[open] > .tool-button { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .3); }
.lang-form { margin: 0; }

/* ---- Popovers (persona switcher, accessibility menu) ---------------------- */
.popover { position: relative; }
.popover__panel {
    position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-2)); z-index: 50;
    width: min(24rem, calc(100vw - 2rem)); max-height: min(34rem, 80vh); overflow: auto;
    padding: var(--space-4); color: var(--c-ink-soft); background: var(--c-paper);
    border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop);
}
.popover__panel--narrow { width: min(19rem, calc(100vw - 2rem)); }
.popover__title { margin: 0 0 var(--space-1); font-weight: 700; color: var(--c-ink); }
.popover__note { margin: 0 0 var(--space-3); font-size: .8125rem; color: var(--c-muted); }

.persona__summary { gap: var(--space-3); }
.persona__who { display: grid; line-height: 1.2; text-align: start; }
.persona__caption { font-size: .6875rem; color: var(--c-on-dark-muted); }
.persona__name { font-weight: 650; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-chip {
    padding: .1rem .5rem; font-size: .75rem; font-weight: 650; white-space: nowrap;
    color: var(--c-ink); background: var(--c-on-dark); border-radius: 999px;
}
.role-chip--guest { background: transparent; color: var(--c-on-dark-muted); border: 1px solid rgb(255 255 255 / .35); }
.persona__group { margin: var(--space-3) 0 var(--space-1); font-size: .75rem; font-weight: 700; color: var(--c-muted); }
.persona__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.persona__option {
    display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-3); width: 100%;
    padding: var(--space-2) var(--space-3); text-align: start; color: var(--c-ink);
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-s); cursor: pointer;
}
.persona__option:hover { background: var(--c-primary-tint); }
.persona__option[aria-current="true"] { background: var(--c-primary-tint); border-color: var(--c-primary); }
.persona__option-name { font-weight: 650; }
.persona__option-meta { grid-column: 1; font-size: .8125rem; color: var(--c-muted); }
.persona__current { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .75rem; font-weight: 700; color: var(--c-primary); }
.persona__guest { margin-top: var(--space-3); }

.a11y-form { display: grid; gap: var(--space-2); margin: 0; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 var(--space-2); padding: 0; border: 0; }
.segmented legend { grid-column: 1 / -1; padding: 0; margin-bottom: var(--space-2); font-weight: 700; color: var(--c-ink); }
.segmented__item {
    min-height: 2.75rem; padding: var(--space-1); color: var(--c-ink); background: var(--c-surface);
    border: 1px solid var(--c-line); border-radius: var(--radius-s); cursor: pointer;
}
.segmented__item--large { font-size: 1.1em; }
.segmented__item--larger { font-size: 1.25em; }
.segmented__item[aria-pressed="true"] { color: var(--c-on-dark); background: var(--c-primary); border-color: var(--c-primary); font-weight: 700; }
.toggle {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    min-height: 2.75rem; padding: var(--space-2) var(--space-3); color: var(--c-ink);
    background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-s); cursor: pointer;
}
.toggle__state { font-size: .8125rem; font-weight: 700; color: var(--c-muted); }
.toggle[aria-pressed="true"] { border-color: var(--c-primary); background: var(--c-primary-tint); }
.toggle[aria-pressed="true"] .toggle__state { color: var(--c-primary); }
.link-button {
    padding: var(--space-2) 0; color: var(--c-primary); background: none; border: 0;
    text-decoration: underline; text-underline-offset: .2em; cursor: pointer; justify-self: start;
}

/* ---- Site header ------------------------------------------------------------ */
.site-header { background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; min-height: 4.5rem; }
.brand { display: flex; align-items: center; gap: var(--space-4); text-decoration: none; color: var(--c-ink); }
.brand__logo { display: block; height: 2rem; width: auto; }
.brand--lockup .brand__logo { height: 4rem; }   /* raster lockup: 104 px source, crisp up to 1.6x */
.brand picture { display: block; }
.brand__text { display: grid; padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--c-line); line-height: 1.3; }
.brand__ministry { font-size: .8125rem; color: var(--c-muted); }
.brand__portal { font-weight: 700; }
.main-nav ul { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.main-nav a {
    display: inline-block; padding: var(--space-4) var(--space-3); color: var(--c-ink); font-weight: 600;
    text-decoration: none; border-bottom: 3px solid transparent;
}
.main-nav a:hover { border-bottom-color: var(--c-line); }
.main-nav a[aria-current="page"] { border-bottom-color: var(--c-primary); color: var(--c-primary); }

/* ---- Buttons ------------------------------------------------------------------- */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 3rem; padding: var(--space-2) var(--space-5); font-weight: 700; text-decoration: none;
    border: 2px solid transparent; border-radius: var(--radius-m); cursor: pointer;
    transition: background-color .15s var(--ease);
}
.button--primary { color: #FFFFFF; background: var(--c-primary); }
.button--primary:hover { color: #FFFFFF; background: var(--c-primary-strong); }

/* ---- Flash messages and notices -------------------------------------------- */
.flashes { padding-top: var(--space-4); }
.notice {
    display: flex; gap: var(--space-3); align-items: flex-start; max-width: none;
    margin: 0 0 var(--space-2); padding: var(--space-3) var(--space-4);
    border-inline-start: 4px solid var(--c-info); background: var(--c-info-tint); color: var(--c-ink);
    border-radius: var(--radius-s);
}
.notice .icon { margin-top: .2em; }
.notice--success { border-color: var(--c-success); background: var(--c-success-tint); }
.notice--warning { border-color: var(--c-warning); background: var(--c-warning-tint); }
.notice--error { border-color: var(--c-danger); background: var(--c-danger-tint); }

/* ---- Hero: the one bold moment. Passport-cover navy with a security print. -- */
.hero { position: relative; overflow: hidden; color: var(--c-on-dark); background: var(--c-hero); isolation: isolate; }
.hero__security {
    position: absolute; inset: 0; z-index: -1; background: var(--c-hero-print); opacity: var(--c-hero-print-opacity);
    -webkit-mask: url("/assets/img/guilloche.svg") center / cover no-repeat;
    mask: url("/assets/img/guilloche.svg") center / cover no-repeat;
    animation: print-in 1.6s var(--ease) both;
}
.hero__inner { padding-block: var(--space-8) calc(var(--space-8) + var(--space-2)); }
.hero__ministry { margin: 0 0 var(--space-3); color: var(--c-on-dark-muted); font-weight: 600; }
.hero__title {
    max-width: 16ch; margin-bottom: var(--space-4); color: var(--c-on-dark);
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.025em;
}
html[lang="ar"] .hero__title { line-height: 1.35; letter-spacing: 0; max-width: 18ch; }
.hero__text { max-width: 52ch; margin-bottom: var(--space-6); font-size: 1.125rem; color: var(--c-on-dark-muted); }
.hero__actions .button--primary { background: var(--c-paper); color: var(--c-ink); }
.hero__actions .button--primary:hover { background: var(--c-primary-tint); color: var(--c-ink); }
@keyframes print-in { from { opacity: 0; transform: scale(1.04); } }

/* ---- Sections ------------------------------------------------------------------ */
.section { padding-block: var(--space-7) 0; }
.section__title { margin-bottom: var(--space-2); }
.section__intro { color: var(--c-muted); margin-bottom: var(--space-5); }

/* A real sequence, so numbered. */
.journey {
    counter-reset: step; list-style: none; margin: var(--space-5) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-5);
    border-top: 2px solid var(--c-line);
}
.journey__step { counter-increment: step; position: relative; padding-top: var(--space-5); color: var(--c-primary); }
.journey__step::before {
    content: counter(step); position: absolute; top: -1rem; inset-inline-start: 0;
    display: grid; place-items: center; width: 2rem; height: 2rem; font-size: .875rem; font-weight: 800;
    color: var(--c-paper); background: var(--c-primary); border-radius: 50%; box-shadow: 0 0 0 4px var(--c-surface);
}
.journey__step .icon { display: block; margin-block: var(--space-3) var(--space-2); }
.journey__title { margin-bottom: var(--space-1); }
.journey__text { margin: 0; font-size: .9375rem; color: var(--c-muted); }

.categories {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    border-top: 1px solid var(--c-line); border-inline-start: 1px solid var(--c-line);
    background: var(--c-paper);
}
.category {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); align-content: start;
    padding: var(--space-5); border-bottom: 1px solid var(--c-line); border-inline-end: 1px solid var(--c-line);
}
.category__icon {
    grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem;
    color: var(--c-seal); background: var(--c-seal-tint); border-radius: var(--radius-m);
}
.category__name { margin: 0; }
.category__text { margin: 0; font-size: .9375rem; color: var(--c-muted); }

/* ---- Inner pages ----------------------------------------------------------------- */
.page { padding-block: var(--space-6) var(--space-8); }
.page--prose { max-width: 60rem; }
.page__header { margin-bottom: var(--space-5); }
.page__eyebrow { margin: 0 0 var(--space-1); font-weight: 650; color: var(--c-seal); }
.page__title { margin-bottom: var(--space-2); }
.page__lead { font-size: 1.125rem; color: var(--c-muted); }

.panel {
    padding: var(--space-5); background: var(--c-paper);
    border: 1px solid var(--c-line); border-radius: var(--radius-m);
}
.panel + .panel, .me-grid + .panel { margin-top: var(--space-5); }
.panel__title { font-size: 1.125rem; margin-bottom: var(--space-4); }

.details { display: grid; gap: 0; margin: 0; }
.details > div { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: var(--space-4); padding-block: var(--space-2); border-bottom: 1px solid var(--c-line); }
.details > div:last-child { border-bottom: 0; }
.details dt { color: var(--c-muted); }
.details dd { margin: 0; color: var(--c-ink); font-weight: 550; overflow-wrap: anywhere; }
.details dd[dir="ltr"] { text-align: start; }
html[dir="rtl"] .details dd[dir="ltr"] { text-align: right; }
.details--columns { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); column-gap: var(--space-6); }
.details--columns > div { grid-template-columns: 1fr; gap: 0; }

.attention { margin-bottom: var(--space-5); }
.attention__title { font-size: 1.125rem; }
.attention__list { list-style: none; margin: 0; padding: 0; }

.me-grid { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: var(--space-5); align-items: start; }

/* ---- Identity card (ID-1 proportions, 85.6 × 54 mm) --------------------------- */
.id-card {
    position: relative; overflow: hidden; isolation: isolate;
    aspect-ratio: 1.586; min-height: 17rem; display: grid; grid-template-rows: auto 1fr;
    background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-card);
    box-shadow: 0 1px 0 var(--c-line), 0 18px 40px -24px rgb(23 42 74 / .45);
}
.id-card__security {
    position: absolute; inset: 0; z-index: -1; background: var(--c-card-print); opacity: .12;
    -webkit-mask: url("/assets/img/guilloche.svg") center / 180% no-repeat;
    mask: url("/assets/img/guilloche.svg") center / 180% no-repeat;
}
.id-card--staff .id-card__security { background: var(--c-primary); }
.id-card__head {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-5); color: var(--c-on-dark); background: var(--c-card-head);
    font-size: .8125rem; font-weight: 650; border-bottom: 3px solid var(--c-accent);
    direction: ltr; /* a physical card: English left, Arabic right, in both page languages */
}
.id-card__head [lang="ar"] { font-family: var(--font-arabic); }
.id-card__body { display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-5); padding: var(--space-5); align-content: center; }
.id-card__photo {
    display: grid; place-items: center; aspect-ratio: 3 / 4; font-size: 1.75rem; font-weight: 800;
    color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-s);
}
.id-card__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); margin: 0; }
.id-card__field dt { font-size: .6875rem; font-weight: 650; color: var(--c-muted); }
.id-card__field dd { margin: 0; color: var(--c-ink); font-weight: 650; line-height: 1.35; }
.id-card__field--number, .id-card__field--names, .id-card__field--wide { grid-column: 1 / -1; }
.id-card__field--number dd {
    font-size: 1.375rem; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums;
    font-family: var(--font-latin); text-align: start;
}
html[dir="rtl"] .id-card__field--number dd { text-align: right; }
.id-card__field--names dd { display: grid; gap: 2px; justify-items: start; }
.id-card__field--names [lang="ar"] { font-family: var(--font-arabic); }
.id-card__field--names [lang="en"] { font-family: var(--font-latin); font-weight: 600; color: var(--c-ink-soft); }
.id-card__expiry--soon { color: var(--c-danger) !important; }

/* ---- Tables, code, lists --------------------------------------------------------- */
.table-scroll { overflow-x: auto; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: start; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.table thead th { font-size: .8125rem; color: var(--c-muted); background: var(--c-surface); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody th { color: var(--c-ink); font-weight: 650; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
html[dir="rtl"] .table td.num { text-align: right; }
.code { padding: var(--space-4); overflow-x: auto; background: var(--c-ink); color: var(--c-on-dark); border-radius: var(--radius-m); font-size: .875rem; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); }
.checklist .icon { color: var(--c-seal); margin-top: .2em; }

.page--error { text-align: start; }
.error__code { margin: 0; font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--c-line); }

/* ==== Step 2: service catalogue ================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.button--secondary { color: var(--c-primary); background: var(--c-paper); border-color: var(--c-primary); }
.button--secondary:hover { color: var(--c-primary-strong); background: var(--c-primary-tint); }
.button--danger { color: #FFFFFF; background: var(--c-danger); }
.button--danger:hover { color: #FFFFFF; background: #8F1C13; }
.button--danger-quiet { min-height: 2.5rem; padding-inline: var(--space-3); color: var(--c-danger); background: transparent; border-color: transparent; font-weight: 650; }
.button--danger-quiet:hover { background: var(--c-danger-tint); }
summary.button { list-style: none; }
summary.button::-webkit-details-marker { display: none; }

/* Page band: the header strip of inner catalogue pages */
.page-band { padding-block: var(--space-5) var(--space-6); background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.page-band__title { margin-bottom: var(--space-2); }
.page-band__lead { font-size: 1.125rem; color: var(--c-muted); margin-bottom: var(--space-5); }
.page-band--service .page-band__lead { margin-bottom: var(--space-4); }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: .875rem; color: var(--c-muted); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--c-line); }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb [aria-current] { color: var(--c-ink); font-weight: 600; }

/* Search bar: page version and the hero version on the home page */
.search-bar {
    display: flex; align-items: center; gap: var(--space-2); max-width: 44rem; padding: var(--space-1);
    padding-inline-start: var(--space-4); background: var(--c-paper); border: 2px solid var(--c-line); border-radius: var(--radius-m);
}
.search-bar:focus-within { border-color: var(--c-primary); }
.search-bar__icon { color: var(--c-muted); }
.search-bar input { flex: 1; min-width: 0; min-height: 2.75rem; border: 0; background: transparent; font: inherit; font-size: 1.0625rem; color: var(--c-ink); }
.search-bar input:focus { outline: none; }
.search-bar--hero { margin-bottom: var(--space-4); border-color: transparent; }
.search-bar--hero:focus-within { border-color: var(--c-accent); }
.search-bar--hero .button--primary { color: #FFFFFF; background: var(--c-primary); }
.search-bar--hero :focus-visible { outline-color: var(--c-primary); }
.hero__secondary { color: var(--c-on-dark); font-weight: 650; }
.hero__secondary:hover { color: var(--c-on-dark-muted); }

/* Catalogue layout: filters beside results */
.catalogue { display: grid; grid-template-columns: 16rem 1fr; gap: var(--space-6); padding-block: var(--space-6) var(--space-8); align-items: start; }
.filters { position: sticky; top: var(--space-4); }
.filters__summary { display: flex; align-items: center; gap: var(--space-2); list-style: none; margin-bottom: var(--space-3); pointer-events: none; }
.filters__summary::-webkit-details-marker { display: none; }
.filters__title { font-size: 1rem; margin: 0; }
.filters fieldset { margin: 0 0 var(--space-5); padding: 0; border: 0; }
.filters legend { padding: 0; margin-bottom: var(--space-2); font-size: .8125rem; font-weight: 700; color: var(--c-muted); }
.filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.filters__clear { font-size: .9375rem; }
.choice { display: flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding-block: var(--space-1); cursor: pointer; color: var(--c-ink); }
.choice input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--c-primary); flex: none; }
.choice__count { margin-inline-start: auto; font-size: .8125rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }

.results__count { font-size: 1rem; font-weight: 650; color: var(--c-muted); margin-bottom: var(--space-3); }
.service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.service-row {
    display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5);
    background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m);
    transition: border-color .15s var(--ease);
}
.service-row:hover { border-color: var(--c-accent); }
.service-row__main { flex: 1; min-width: 0; }
.service-row__category { margin: 0 0 var(--space-1); font-size: .8125rem; font-weight: 650; color: var(--c-seal); }
.service-row__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); font-size: 1.125rem; }
.service-row__name a { color: var(--c-ink); text-decoration: none; }
.service-row__name a:hover { color: var(--c-primary); text-decoration: underline; }
.service-row__summary { margin-bottom: var(--space-3); color: var(--c-ink-soft); }
.service-row--suspended { background: var(--c-surface); }
.service-row--suspended .service-row__name a { color: var(--c-muted); }

.facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--c-muted); }
.facts li { display: inline-flex; align-items: center; gap: var(--space-2); }
.facts .icon { width: 1.125rem; height: 1.125rem; color: var(--c-seal); }

.badge {
    display: inline-flex; align-items: center; padding: .1rem .55rem; font-size: .75rem; font-weight: 700; line-height: 1.6;
    color: var(--c-ink-soft); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 999px; white-space: nowrap;
}
.badge--active { color: var(--c-success); background: var(--c-success-tint); border-color: transparent; }
.badge--draft { color: var(--c-info); background: var(--c-info-tint); border-color: transparent; }
.badge--suspended { color: var(--c-warning); background: var(--c-warning-tint); border-color: transparent; }
.badge--prefill { color: var(--c-seal); background: var(--c-seal-tint); border-color: transparent; }

/* Favourite star: outline when not saved, filled when saved */
.fav-form { flex: none; margin: 0; }
.fav-button {
    display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
    color: var(--c-muted); background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
}
.fav-button:hover { color: var(--c-primary); background: var(--c-primary-tint); }
.fav-button[aria-pressed="true"] { color: var(--c-primary); }
.fav-button--labelled { display: inline-flex; gap: var(--space-2); width: auto; padding-inline: var(--space-4); font-weight: 650; border-color: var(--c-line); border-radius: var(--radius-m); }

.empty { padding: var(--space-6); text-align: center; background: var(--c-paper); border: 1px dashed var(--c-line); border-radius: var(--radius-m); }
.empty p { margin-inline: auto; }
.empty__title { font-weight: 700; color: var(--c-ink); font-size: 1.125rem; margin-bottom: var(--space-2); }

/* Service page */
.service-detail { display: grid; grid-template-columns: 1fr 20rem; gap: var(--space-6); padding-block: var(--space-6) var(--space-8); align-items: start; }
.service-detail__main > .notice { margin-bottom: var(--space-5); }
.section-block { padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--c-line); }
.section-block:last-child { border-bottom: 0; margin-bottom: 0; }
.section-block h2 { font-size: 1.25rem; }
.conditions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.conditions li { display: flex; gap: var(--space-3); color: var(--c-ink); }
.conditions .icon { color: var(--c-seal); margin-top: .2em; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.doc-list__item { display: flex; gap: var(--space-4); padding: var(--space-4); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.doc-list__item > .icon { color: var(--c-seal); }
.doc-list__name { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; font-weight: 650; color: var(--c-ink); }
.doc-list__hint { margin: var(--space-1) 0; }
.doc-list__meta { margin: 0; font-size: .8125rem; color: var(--c-muted); }
.field-preview { list-style: none; margin: 0; padding: 0; columns: 2 16rem; column-gap: var(--space-6); }
.field-preview li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-2); border-bottom: 1px solid var(--c-line); break-inside: avoid; color: var(--c-ink); }

.fee-card { position: sticky; top: var(--space-4); padding: var(--space-5); background: var(--c-paper); border: 1px solid var(--c-line); border-top: 4px solid var(--c-primary); border-radius: var(--radius-m); }
.fee-card__title { font-size: 1.0625rem; }
.fee-card__list { margin: 0 0 var(--space-4); }
.fee-card__list > div { padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); }
.fee-card__list dt { font-size: .8125rem; font-weight: 650; color: var(--c-muted); }
.fee-card__list dd { margin: 0; color: var(--c-ink); }
.fee-card__amount { font-size: 1.75rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.fee-card__note { font-size: .8125rem; color: var(--c-muted); }
.fee-card__admin { margin: var(--space-4) 0 0; font-size: .9375rem; }
.fee-card__admin a { display: inline-flex; gap: var(--space-2); align-items: center; }

/* Home: most requested and category tiles as links */
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.section__head .section__title, .section__head .panel__title { margin: 0; }
.section__more { font-weight: 650; }
.popular { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-3); }
.popular__link {
    display: grid; gap: var(--space-1); height: 100%; padding: var(--space-4) var(--space-5); text-decoration: none;
    background: var(--c-paper); border: 1px solid var(--c-line); border-inline-start: 4px solid var(--c-primary); border-radius: var(--radius-m);
}
.popular__link:hover { border-color: var(--c-accent); border-inline-start-color: var(--c-primary-strong); }
.popular__name { font-weight: 700; color: var(--c-ink); }
.popular__link:hover .popular__name { color: var(--c-primary); text-decoration: underline; }
.popular__category { font-size: .8125rem; color: var(--c-muted); }
.category { position: relative; }
.category__link { color: var(--c-ink); text-decoration: none; }
.category__link::after { content: ""; position: absolute; inset: 0; }   /* whole tile is the link */
.category:hover { background: var(--c-primary-tint); }
.category:hover .category__link { color: var(--c-primary); text-decoration: underline; }
.category:focus-within { outline: 3px solid var(--c-primary); outline-offset: -3px; }
.category__link:focus-visible { outline: none; }
.category__count { grid-column: 2; margin: var(--space-2) 0 0; font-size: .8125rem; font-weight: 650; color: var(--c-seal); }

/* My space: saved services */
.saved__list { list-style: none; margin: 0; padding: 0; }
.saved__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); }
.saved__item:last-child { border-bottom: 0; }
.saved__item a { font-weight: 650; }
.saved__meta { color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* ==== Step 2: administration ======================================================= */
.page__header--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.page__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.page--admin .breadcrumb ol { margin-bottom: var(--space-3); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tabs__item { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: var(--space-1) var(--space-4); color: var(--c-ink); font-weight: 650; text-decoration: none; border-radius: var(--radius-m); }
.tabs__item:hover { background: var(--c-paper); }
.tabs__item[aria-current="page"] { color: #FFFFFF; background: var(--c-primary); }
.tabs__count { display: inline-block; min-width: 1.6rem; padding: 0 .4rem; font-size: .75rem; font-weight: 700; text-align: center; color: var(--c-ink-soft); background: var(--c-line); border-radius: 999px; }
.tabs__item[aria-current="page"] .tabs__count { color: var(--c-primary); background: #FFFFFF; }
.toolbar__search { display: flex; gap: var(--space-2); }
.toolbar__search input { min-height: 3rem; min-width: 16rem; padding-inline: var(--space-3); font: inherit; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); }

.table--admin tbody tr:hover > * { background: var(--c-surface); }
.cell-title { display: block; }
.cell-code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; font-weight: 400; color: var(--c-muted); }
.cell-date, .cell-by { display: block; }
.cell-date { white-space: nowrap; }
.cell-by { font-size: .8125rem; color: var(--c-muted); }
.link-action { font-weight: 650; cursor: pointer; }
summary.link-action { display: inline-block; min-height: 2.75rem; padding-block: var(--space-2); list-style: none; color: var(--c-primary); text-decoration: underline; text-underline-offset: .2em; }
summary.link-action::-webkit-details-marker { display: none; }

.panel__subtitle { font-size: 1rem; margin: var(--space-5) 0 var(--space-3); }
.status-panel { border-inline-start: 4px solid var(--c-info); margin-bottom: var(--space-5); }
.status-panel--active { border-inline-start-color: var(--c-success); }
.status-panel--suspended { border-inline-start-color: var(--c-warning); }
.status-panel__reason { padding: var(--space-3) var(--space-4); background: var(--c-warning-tint); border-radius: var(--radius-s); }
.gaps { margin-bottom: var(--space-4); padding: var(--space-4); background: var(--c-warning-tint); border-radius: var(--radius-s); color: var(--c-ink); }
.gaps__title { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); font-weight: 700; }
.gaps__title .icon { color: var(--c-warning); }
.gaps ul { margin: 0; padding-inline-start: var(--space-5); }
.status-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.status-actions form { margin: 0; }
.status-actions .form-hint { margin-top: var(--space-2); }
.status-actions details[open] { flex-basis: 100%; }

.inline-form__body { margin-top: var(--space-3); padding: var(--space-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.inline-form__actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.inline-form__delete { margin-top: var(--space-2); }
.inline-form--add { margin-top: var(--space-4); }

/* Forms */
.admin-form .panel + .panel { margin-top: var(--space-5); }
.admin-form + .panel, .panel#documents, .panel#fields, .panel#history { margin-top: var(--space-5); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); align-items: end; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bilingual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
.form-row { margin: 0 0 var(--space-4); padding: 0; border: 0; min-width: 0; }
.form-label { display: block; margin-bottom: var(--space-1); font-weight: 650; color: var(--c-ink); }
.form-lang { margin-inline-start: var(--space-2); padding: 0 .4rem; font-size: .6875rem; font-weight: 700; color: var(--c-muted); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-s); vertical-align: .1em; }
.form-hint { margin: 0 0 var(--space-2); font-size: .8125rem; color: var(--c-muted); }
.form-error { margin: 0 0 var(--space-2); font-size: .875rem; font-weight: 650; color: var(--c-danger); }
.form-row input, .form-row select, .form-row textarea {
    display: block; width: 100%; min-height: 3rem; padding: var(--space-2) var(--space-3); font: inherit; color: var(--c-ink);
    background: var(--c-paper); border: 1px solid #A39B94; border-radius: var(--radius-s);
}
.form-row textarea { min-height: 6rem; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--c-primary); outline: 3px solid var(--c-primary-tint); outline-offset: 0; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--c-danger); border-width: 2px; }
.form-row.has-error { padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--c-danger); }
.form-check { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-3); align-items: start; margin-bottom: var(--space-3); }
.form-check input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--c-primary); }
.form-check label { color: var(--c-ink); font-weight: 600; cursor: pointer; }
.form-check .form-hint, .form-check .form-error { grid-column: 2; margin-top: var(--space-1); }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
.check-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.panel--save { border-top: 4px solid var(--c-primary); }

/* Documents and fields lists */
.item-list { list-style: none; margin: 0; padding: 0; }
.item { padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); }
.item:first-child { padding-top: 0; }
.item__summary { display: grid; gap: var(--space-1); }
.item__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-weight: 650; color: var(--c-ink); }
.item__meta { margin: 0; font-size: .875rem; color: var(--c-muted); }
.item:target { background: var(--c-primary-tint); }

/* Change history */
.panel__title .icon { color: var(--c-seal); }
.history { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--c-line); }
.history__item { position: relative; padding: 0 0 var(--space-5); padding-inline-start: var(--space-5); }
.history__item::before { content: ""; position: absolute; top: .55rem; inset-inline-start: -.4rem; width: .7rem; height: .7rem; background: var(--c-paper); border: 2px solid var(--c-primary); border-radius: 50%; }
.history__item:last-child { padding-bottom: 0; }
.history__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-1); color: var(--c-ink); }
.history__meta { font-size: .8125rem; color: var(--c-muted); }
.history__note { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); background: var(--c-surface); border-radius: var(--radius-s); }
.history__changes { margin: 0; padding-inline-start: var(--space-5); font-size: .875rem; }
.history__col { font-weight: 650; color: var(--c-ink); margin-inline-end: var(--space-2); }
.history del { color: var(--c-danger); text-decoration-thickness: 1px; }
.history ins { color: var(--c-success); text-decoration: none; font-weight: 650; }

@media (max-width: 64rem) {
    .catalogue { grid-template-columns: 1fr; }
    .filters { position: static; padding: 0 var(--space-4); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
    .filters__summary { pointer-events: auto; cursor: pointer; min-height: 3rem; margin: 0; padding-block: var(--space-2); }
    .filters__summary::after { content: ""; width: .6rem; height: .6rem; margin-inline-start: auto; border-right: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); transform: rotate(45deg);   /* physical: a down chevron in both directions */ transition: transform .15s var(--ease); }
    .filters[open] .filters__summary::after { transform: rotate(-135deg); }
    .filters[open] .filters__form { padding-bottom: var(--space-4); }
    .filters__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 var(--space-5); }
    .filters__actions { grid-column: 1 / -1; }
    .service-detail { grid-template-columns: 1fr; }
    .fee-card { position: static; }
    .form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
    .page-band { padding-block: var(--space-4) var(--space-5); }
    .search-bar { padding-inline-start: var(--space-3); }
    .search-bar .button { padding-inline: var(--space-4); }
    .service-row { padding: var(--space-4); }
    .form-grid, .form-grid--3, .bilingual, .check-grid { grid-template-columns: 1fr; }
    .toolbar__search, .toolbar__search input { width: 100%; min-width: 0; }
    .page__header--split .button { width: 100%; }
    .facts { gap: var(--space-2) var(--space-4); }
}
@media print {
    .filters, .fav-form, .search-bar { display: none; }
    .catalogue, .service-detail { grid-template-columns: 1fr; }
}

/* ---- Footer ---------------------------------------------------------------------- */
.site-footer { margin-top: var(--space-8); padding-block: var(--space-6); background: var(--c-footer); color: var(--c-on-dark-muted); font-size: .875rem; }
.site-footer__inner { display: grid; gap: var(--space-4); }
.site-footer__logo { height: 1.75rem; width: auto; }
.site-footer__logo--lockup { height: 3.5rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--c-on-dark); }
.site-footer__note { margin: 0; }
.site-footer__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; max-width: none; }

/* ---- Responsive ------------------------------------------------------------------ */
@media (max-width: 64rem) {
    .journey { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-6); }
    .me-grid { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
    .wrap { padding-inline: var(--space-4); }
    h1 { font-size: 1.875rem; }
    .utility-bar__env { display: none; }
    .utility-bar__inner { justify-content: flex-end; }
    .tool-button > span:not(.persona__who):not(.role-chip) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .persona__summary .role-chip { display: none; }
    .persona__name { max-width: 9rem; }
    .brand__text { display: none; }
    .brand--lockup .brand__logo { height: 2.75rem; }
    .main-nav a { padding-block: var(--space-2); white-space: nowrap; }
    .main-nav { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .site-header__inner { padding-block: var(--space-2); }
    .journey { grid-template-columns: 1fr; border-top: 0; border-inline-start: 2px solid var(--c-line); padding-inline-start: var(--space-5); }
    .journey__step { padding-top: 0; }
    .journey__step::before { top: 0; inset-inline-start: calc(-1 * var(--space-5) - 1rem - 1px); }
    .journey__step .icon { margin-top: 0; }
    .id-card { aspect-ratio: auto; }
    .id-card__body { grid-template-columns: 4.5rem 1fr; gap: var(--space-4); padding: var(--space-4); }
    .id-card__field--number dd { font-size: 1.125rem; }
    .details > div { grid-template-columns: 1fr; gap: 0; }
}

/* ---- Reduced motion (device setting or accessibility menu) --------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

@media print {
    .utility-bar, .site-header nav, .site-footer, .skip-link { display: none; }
    body { background: #FFFFFF; }
}