/* site.css — furniture for THIS prototype only.
 *
 * Deliberately separate from design/tokens/mp.css: that file is the contribution a department would adopt
 * (six additions on top of the shipped system, nothing duplicating a shipped class). Everything here is
 * scaffolding for the demonstration — the concept banner, the before/after comparison, the debug drawer —
 * and would not ship. Values resolve through the system's tokens wherever a token exists, so dark mode
 * comes for free; the few literal colours are the system's own primitives, written out where a token
 * would not survive both themes.
 *
 * How the file is organised
 *   1. Corrections to the shipped system (measured contrast and target findings, reported upstream)
 *   2. Chrome every page carries: ribbon, navbar, banner, footer, dock, modal, rails
 *   3. Primitives: rows, chips, cards, fields, disclosures, forms, tables, code
 *   4. Surfaces, one block per page family
 *   5. Theme: the dark remaps
 *   6. Print
 *
 * Cascade rules this file relies on
 *   - The shipped stylesheet is layered. An unlayered normal declaration here beats any layered one, so
 *     ordinary overrides need no !important and no extra specificity.
 *   - For !important the order reverses: an important declaration inside an EARLIER layer beats one in a
 *     later layer or outside every layer. Every !important in this file therefore sits inside
 *     @layer ux4g-tokens, the system's first layer, and nowhere else.
 *   - Each selector is defined once. A later duplicate that used to override an earlier one has been
 *     folded into the single definition with the value that actually won.
 */

/* =====================================================================================================
   1. Corrections to the shipped system
   ===================================================================================================== */

/* [hidden] must win. The system sets display:flex on alerts, rows and its d-flex utility with !important
   inside its own layers, which otherwise beats the attribute and leaves "hidden" elements on screen. */
@layer ux4g-tokens { [hidden] { display: none !important; } }

/* A link in running text must not rely on colour alone (WCAG 1.4.1). Underline every text link; the
   offset keeps Devanagari matras clear. */
.ux4g-text-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Hit targets. The Handbook sets 44px as the floor for anything you tap. The styled container is the tap
   target and the bare <input> fills it: forcing a height on the inner element pushes it out through the
   container's padding. */
.ux4g-input { min-height: 48px; align-items: center; }
.ux4g-input select.ux4g-input-input { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
#main-signed-in .ux4g-input-container { width: 100%; }
/* A free-text field in a form whose other fields run full width takes the same width. */
.mp-input-full { max-width: none; }

/* Form actions: one column, at most 320px, centred, so every button in it is the same width. The button
   is the mark and a verb, and it is not a banner. */
.ux4g-form-box { max-width: 560px; }
.ux4g-form-actions { max-width: 320px; width: 100%; margin-inline: auto; }
.ux4g-form-actions .ux4g-btn-md,
.ux4g-form-actions button { min-height: 44px; }
.ux4g-form-actions a,
.ux4g-form-box a.ux4g-text-link,
.mp-other-ways > summary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* …but a link inside running text stays inline (WCAG's inline exception): the line is the target, and a
   44px box on it only tears the paragraph apart. */
.ux4g-form-box :is(p, span, li, dd, dt, label, small) a.ux4g-text-link { display: inline; min-height: 0; }
:is(p, span, li, dd, dt, label, td, small, figcaption) > .ux4g-text-link { display: inline; }
.ux4g-form-footer { color: var(--ux4g-text-neutral-secondary, #525252); }
.ux4g-form-footer .ux4g-label-m-default { color: #404040; }
[data-theme="dark"] .ux4g-form-footer .ux4g-label-m-default { color: #d9d9d9; }

/* Status alert text contrast. The system's alert paints its message in the -600 step of the status hue,
   which on the -100 tint it uses as a background measures about 1.8:1 — below AA for body text. docs/02 §8.2
   already says status TEXT takes the -800 step; applying that here fixes the contrast without touching the
   hue or the icon. Recorded as a documentation gap to report upstream. */
.ux4g-alert-info    { color: #006d75; }
.ux4g-alert-info    .ux4g-alert-icon { color: #13c2c2; }
.ux4g-alert-success { color: #00522c; }
.ux4g-alert-success .ux4g-alert-icon { color: #128937; }
.ux4g-alert-warning { color: #ad4e00; }
.ux4g-alert-warning .ux4g-alert-icon { color: #fa8c16; }
.ux4g-alert-error   { color: #8a1a16; }
.ux4g-alert-error   .ux4g-alert-icon { color: #db372d; }
[data-theme="dark"] .ux4g-alert-info    { color: #91e8e0; }
[data-theme="dark"] .ux4g-alert-success { color: #80da88; }
[data-theme="dark"] .ux4g-alert-warning { color: #ffc973; }
[data-theme="dark"] .ux4g-alert-error   { color: #ffb3ae; }

/* The one-time-code helper text ships as color:#737373 !important — 4.54:1 on white, which passes, and
   3.78:1 on a dark surface, which does not. The disabled resend timer is #a1a1a1 !important, 2.58:1 in
   light. Reported upstream in docs/07 §6, beside the alert-contrast finding. */
@layer ux4g-tokens {
  .ux4g-otp-resend-disabled { color: #737373 !important; }
  [data-theme="dark"] .ux4g-otp-helper { color: #a1a1a1 !important; }
  [data-theme="dark"] .ux4g-otp-resend-disabled { color: #a1a1a1 !important; }
}
/* One-time code: wide tracking so six digits read as six, not a word. */
.mp-otp { font-size: 24px; letter-spacing: .38em; text-align: center; font-variant-numeric: tabular-nums; }

/* Disclosure summaries. The system ships a `summary` rule — inline-flex, padding 10px 0, centred — that
   beat every class of ours, so "Other ways to sign in" shrank to the width of its own text and the chevron
   hugged the label instead of the edge. A summary that is the whole control has to be the whole width. */
@layer ux4g-tokens {
  .mp-other-ways__summary, .mp-alt-code__summary, .mp-session__summary {
    display: flex !important; width: 100% !important; box-sizing: border-box !important;
    align-items: center !important; justify-content: space-between !important;
    padding: 12px 16px !important; min-height: 48px !important;
  }
  .mp-session__summary { width: auto !important; justify-content: flex-start !important; padding: 6px 10px !important; }
}

/* =====================================================================================================
   2. Chrome every page carries
   ===================================================================================================== */

/* --- the accessibility ribbon ------------------------------------------------------------------------ */
.ux4g-topbar__wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; min-height: 46px;
}
.ux4g-topbar__gov, .ux4g-topbar__group { display: flex; align-items: center; gap: 10px; }
/* The lockup can shrink rather than set a floor on the strip. */
.ux4g-topbar__gov { min-height: 44px; min-width: 0; flex-wrap: wrap; }
/* The utility strip wraps on a phone rather than pushing the page sideways. */
nav.ux4g-topbar__group { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; min-width: 0; }
/* The strip is primary-600; its links must be the inverse text token, not the link colour, which would be
   purple on purple. */
.ux4g-topbar__gov, .ux4g-topbar__gov:visited,
.ux4g-topbar__skip, .ux4g-topbar__skip:visited { color: #fafafa; }
.ux4g-topbar__skip { min-height: 44px; display: inline-flex; align-items: center; }
.ux4g-topbar__iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border: 0; background: none; color: inherit; cursor: pointer;
}
.ux4g-topbar__select {
  min-width: 168px; max-width: 220px; min-height: 44px; height: auto; padding: 4px 8px;
  border: 1px solid rgba(250, 250, 250, .4); border-radius: 6px;
  background: rgba(250, 250, 250, .12); color: #fafafa; font: inherit; font-size: 13px;
}
.ux4g-topbar__select option { color: #171717; background: #ffffff; }
.india-flag {
  width: 22px; height: 15px; flex: none; border-radius: 2px;
  background: linear-gradient(#ff9933 33.3%, #ffffff 33.3% 66.6%, #138808 66.6%);
}
/* In dark mode the system flips the strip to primary-300 — a LIGHT surface — so its text has to invert
   with it, not stay white. */
[data-theme="dark"] .ux4g-topbar__gov,
[data-theme="dark"] .ux4g-topbar__gov:visited,
[data-theme="dark"] .ux4g-topbar__skip,
[data-theme="dark"] .ux4g-topbar__skip:visited,
[data-theme="dark"] .ux4g-topbar__iconbtn { color: #1a0e3d; }
[data-theme="dark"] .ux4g-topbar__select { color: #1a0e3d; border-color: rgba(26, 14, 61, .4); background: rgba(26, 14, 61, .08); }
@media (max-width: 767px) {
  .ux4g-topbar__wrap { justify-content: center; row-gap: 4px; }
  .ux4g-topbar__select { flex: 1 1 140px; min-width: 0; }
  .acc-top-divider { display: none; }
}
/* Phones: the ribbon on one row. The government link keeps its text for screen readers and the skip link
   appears on focus, as on every page before. */
@media (max-width: 600px) {
  .ux4g-topbar__wrap { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  .ux4g-topbar__group, nav.ux4g-topbar__group { flex-wrap: nowrap; gap: 2px; }
  .ux4g-topbar__gov { flex: none; flex-wrap: nowrap; }
  .ux4g-topbar__gov .ux4g-icon-outlined { display: none; }
  .ux4g-topbar__gov .mp-bi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* The skip link keeps its 44px box off-screen above and drops into view on focus. */
  .ux4g-topbar__skip { position: absolute; top: -200px; left: 8px; min-height: 44px; padding: 0 12px; border-radius: 8px; background: var(--ux4g-bg-primary-strong, #4a2bc2); z-index: 1100; }
  .ux4g-topbar__skip:focus { top: 4px; }
  .ux4g-topbar__iconbtn { width: 40px; min-width: 40px; }
  .ux4g-topbar__select { flex: 0 1 96px; min-width: 88px; padding-inline: 8px; }
}

/* Bilingual inline: both languages stay in the DOM; in tight chrome they sit on one line separated by a
   dot instead of stacking. */
.mp-bi--inline { flex-direction: row; align-items: baseline; gap: 6px; }
.mp-bi--inline > [lang]:not(:first-child)::before { content: "·"; margin-inline-end: 6px; opacity: .6; }

/* --- the disclosure banner, on every page ---------------------------------------------------------- */
.mp-concept { border-radius: 0; justify-content: center; text-align: center; padding-block: 10px; }
/* It collapses to one line after first view (critique, 29 Aug; docs/12). */
.mp-concept--compact { padding-block: 0; }
.mp-concept--compact .ux4g-alert-message { font-size: 12px; line-height: 16px; }
.mp-concept--compact .ux4g-alert-icon { font-size: 16px; }
.mp-concept__more { background: none; border: 0; color: inherit; font: inherit; font-size: 12px; cursor: pointer; padding: 0 8px; min-height: 44px; text-decoration: underline; }
/* Decided before first paint (assets/head.js): a returning visitor's banner is drawn at its one-line
   height from the first frame, so the page never moves when the script collapses it a moment later. */
@media (max-width: 899px) {
  [data-concept="compact"] .mp-concept:not(.mp-concept--compact) { padding-block: 0; }
  [data-concept="compact"] .mp-concept:not(.mp-concept--compact) .ux4g-alert-message { display: block; flex: 1 1 0; min-width: 0; font-size: 12px; line-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  [data-concept="compact"] .mp-concept:not(.mp-concept--compact) .ux4g-alert-icon { font-size: 16px; }
}

/* --- the navbar ------------------------------------------------------------------------------------- */
/* The identity strip stays while the page scrolls; the utility ribbon and the demo banner scroll away,
   because fixing all three would take a third of a phone screen. Nothing in the system's contracts asks
   for a fixed header; its own sticky utilities exist for exactly this. The account tab strip and the
   desktop sidebar sit beneath the navbar by its measured height (set in boot()). */
:root { --mp-nav-h: 92px; }
nav.ux4g-navbar { position: sticky; top: 0; z-index: 1040; }

/* The hub's own wordmark (no State Emblem: the hub is not a department). It is the way home, so it is a
   link and a 44px target; inline-flex keeps it sitting exactly where the static text sat. */
.mp-wordmark { color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-wordmark__mark { flex: none; }
.mp-home { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.mp-home:hover, .mp-home:focus-visible { text-decoration: underline; }
/* One wordmark everywhere: the same size and weight on a public page as inside the account. */
@layer ux4g-tokens {
  .mp-wordmark .mp-home { font-size: 16px !important; line-height: 20px !important; font-weight: 600 !important; letter-spacing: 0; }
  .mp-wordmark .ux4g-body-xs-default { font-size: 12px !important; line-height: 16px !important; }
}

/* Navbar utility links need a hit target and a token that survives both themes. */
.ux4g-navbar-wrap > a, .mp-nav-right > a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
[data-theme="dark"] .ux4g-navbar-wrap > a, [data-theme="dark"] .mp-nav-right > a { color: #c0b3ff; }
/* The account corner: Help beside Sign out, one group at the right, never a lone link mid-bar. */
.mp-nav-right { margin-left: auto; }
/* The department's own Help link: a 20px target, and in dark mode it inherited a link colour that landed
   at 2.11:1 on the navbar. Both are the navbar's problem, not the link's. */
.ux4g-navbar .ux4g-text-link-md { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
[data-theme="dark"] .ux4g-navbar .ux4g-text-link-md { color: var(--ux4g-color-primary-200); }
/* The public pages' navigation row. */
.mp-nav { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; justify-content: flex-end; }
.mp-nav .ux4g-btn { margin-left: 4px; }
@media (max-width: 720px) { .mp-nav a:not(.ux4g-btn) { display: none; } }
@media (max-width: 600px) { .mp-nav-help { display: none; } }

/* The session lockup in the department's own navbar. A disclosure, not a custom dropdown: it is
   keyboard-operable and screen-reader navigable for free, and closes on Escape without any script. */
.mp-session { display: inline-flex; align-items: center; gap: 8px; position: relative; }
.mp-session__summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: 8px; cursor: pointer; list-style: none; }
.mp-session__summary::-webkit-details-marker { display: none; }
.mp-session__summary:hover,
.mp-session[open] .mp-session__summary { background: var(--ux4g-color-primary-50); }
.mp-session__menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  min-width: 260px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--ux4g-bg-neutral-elevated);
  border: 1px solid var(--ux4g-border-color-neutral-subtle);
  border-radius: 12px; box-shadow: var(--ux4g-shadow-l3);
}
/* Links in the menu are targets too, not only the buttons. */
.mp-session__menu > a,
.mp-session__menu > button { display: flex; align-items: center; min-height: 44px; padding: 0 4px; }
.mp-session__menu > button { text-align: left; background: none; border: 0; cursor: pointer; }
/* A closed <details> still gives its absolutely-positioned children a box in Chromium, so this menu pushed
   the page 6px sideways while being invisible. Taking it out of layout fixes the page. */
.mp-session:not([open]) .mp-session__menu { display: none; }
@media (max-width: 560px) { .mp-session__menu { position: fixed; left: 12px; right: 12px; min-width: 0; } }
@media (max-width: 400px) { .mp-session__summary [data-bind="session.short"] { display: none; } }

/* Phones: the navbar on one row, the department title giving way before the session control does. */
@media (max-width: 600px) {
  .ux4g-navbar-wrap { padding: 8px 0; gap: 8px; }
  .ux4g-navbar .ux4g-flex-column > .ux4g-body-xs-default { display: none; }
  .ux4g-navbar .ux4g-label-m-strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .ux4g-navbar .ux4g-label-m-strong .mp-bi { white-space: nowrap; }
  .ux4g-navbar .ux4g-navbar-wrap > .ux4g-d-flex:first-child { min-width: 0; flex: 1 1 auto; }
  .ux4g-navbar .ux4g-navbar-wrap > .ux4g-d-flex:first-child .ux4g-flex-column { min-width: 0; }
  .ux4g-navbar .ux4g-navbar-wrap > .ux4g-d-flex:last-child { flex: none; }
  .mp-session__summary { white-space: nowrap; gap: 4px; }
}

/* --- footer trust chrome (Handbook §5.1.7) ---------------------------------------------------------- */
.mp-footer { padding: 28px 0 36px; border-top: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-footer .ux4g-container { display: flex; flex-direction: column; gap: 14px; }
.mp-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.mp-footer__links a { min-height: 44px; display: inline-flex; align-items: center; }
.mp-footer__meta { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.mp-footer__meta, .mp-footer__meta span { color: #525252; }
[data-theme="dark"] .mp-footer__meta, [data-theme="dark"] .mp-footer__meta span { color: #e5e5e5; }

/* --- the "you are leaving" interstitial (Handbook §5.1.12) and the confirm dialogs ----------------- */
.mp-modal { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 14, 61, .55); }
.mp-modal__panel { width: min(480px, 100%); padding: 24px; border-radius: 12px; background: var(--ux4g-bg-neutral-elevated, #ffffff); box-shadow: 0 12px 32px rgba(0, 0, 0, .24); }
.mp-modal__box {
  background: var(--ux4g-bg-neutral-elevated, #fff); border-radius: 12px; padding: 22px;
  max-width: 34rem; width: 100%; max-height: 90dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.mp-modal__box p { margin: 0; }
[data-theme="dark"] .mp-modal__box { background: var(--ux4g-color-neutral-800, #262626); }
/* Sheets: the shipped modal box over whichever page the citizen is on (`sheet` in mp.js) — the help form,
   every "add" journey, every second check. */
.mp-sheet-box { max-height: 90dvh; display: flex; flex-direction: column; }
.mp-sheet-box.ux4g-modal-l { width: min(680px, 94vw); }
.mp-sheet-box.ux4g-modal-m { width: min(520px, 94vw); }
.mp-sheet-box .ux4g-modal-body { overflow: auto; padding-bottom: 20px; }
.mp-sheet-box .ux4g-modal-header-sub-heading { font-weight: 400; color: var(--ux4g-text-neutral-secondary, #525252); }
.mp-sheet-box .ux4g-modal-close { min-width: 44px; min-height: 44px; }
.mp-has-sheet { overflow: hidden; }
/* A journey inside a sheet: one step showing at a time; the last is the small acknowledgement. */
.mp-flow__step { display: grid; gap: 14px; padding-top: 4px; }
.mp-flow__step > form { display: contents; }
.mp-flow__step .ux4g-form-actions { max-width: none; }
.mp-flow__done { justify-items: center; text-align: center; padding: 20px 0 8px; }
.mp-flow__done h3, .mp-flow__done p { margin: 0; }
/* The other service's own screen inside the journey: its name on a dark bar, so the hand-over is visible. */
.mp-xs { border: 1px solid var(--ux4g-border-color-neutral-default, #a1a1a1); border-radius: 12px; overflow: hidden; }
.mp-xs__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--ux4g-color-neutral-900, #171717); color: #fafafa; }
.mp-xs__name { font-weight: 700; font-size: 16px; }
.mp-xs__tag { font-size: 12px; opacity: .8; }
.mp-xs__body { display: grid; gap: 12px; padding: 16px; }
.mp-xs__body p { margin: 0; }
.mp-xs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mp-xs__list li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-xs__list li span { color: var(--ux4g-text-neutral-secondary, #525252); }
/* The second check. */
.mp-confirm { display: grid; gap: 16px; padding-top: 4px; }
.mp-confirm p { margin: 0; }
.mp-confirm__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 0; }
.mp-confirm__actions button { min-height: 48px; flex: 1 1 10rem; }
/* Backup codes and the authenticator's code. */
.mp-codes-sheet, .mp-auth-sheet { display: grid; gap: 14px; padding-top: 4px; }
.mp-codes-sheet p, .mp-auth-sheet p { margin: 0; }
.mp-codegrid { list-style: none; margin: 0; padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; border-radius: 8px; background: var(--ux4g-bg-neutral-subtle, #f5f5f5); font: 500 18px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .mp-codegrid { grid-template-columns: 1fr; } }
.mp-codes-sheet__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-codes-sheet__actions > * { flex: 1 1 12rem; min-height: 48px; }
.mp-auth-sheet .mp-qr { align-self: center; justify-self: center; }
[data-theme="dark"] .mp-codegrid { background: var(--ux4g-color-neutral-900, #171717); }
/* A section's one primary act, beside its heading: "Link an identity", "Add a business". */
.mp-section-cta { margin: 4px 0 12px; }
.mp-section-cta .ux4g-btn-primary { display: inline-flex; align-items: center; gap: 6px; }

/* --- prototype controls, bottom-right ---------------------------------------------------------------- */
.mp-debug { position: fixed; right: 16px; bottom: 16px; z-index: 1070; }
.mp-debug > details {
  border: 1px solid var(--ux4g-border-color-neutral-subtle, #d9d9d9); border-radius: 8px;
  background: var(--ux4g-bg-neutral-elevated, #ffffff); box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.mp-debug summary { cursor: pointer; padding: 10px 14px; min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 600; }
.mp-debug__body { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; max-width: 260px; }
.mp-debug__body .ux4g-btn-sm { min-height: 44px; }
.mp-debug__rails { display: flex; align-items: center; gap: 10px; }
.mp-debug__rails .ux4g-body-s-default { line-height: 1.35; }
@media (max-width: 899px) { .mp-debug { position: static; margin: 0 16px 16px; display: flex; justify-content: flex-end; } .mp-debug > details { box-shadow: none; } }

/* --- rails: "Show rails" reveals which rail each element stands on (docs/12 §1.4) ------------------
   Off by default: nothing marked, the citizen experience only. On: Proposed = information hue + dashed
   outline; Live rail = success hue. The word is always in the markup, so a screen reader can read it when
   the switch is on; colour never carries the meaning alone. */
.mp-rail { display: none; }
[data-rails="on"] .mp-rail {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-inline-start: 6px;
  padding: 1px 8px; border-radius: 999px; font: 500 12px/18px "Noto Sans", sans-serif; white-space: nowrap;
  border: 1px solid var(--ux4g-border-color-info-strong, #13c2c2);
  color: var(--ux4g-text-status-info, #006d75); background: var(--ux4g-bg-info, #e6fffb);
}
[data-rails="on"] .mp-rail[data-rail="live"] {
  border-color: var(--ux4g-border-color-success-strong, #128937);
  color: var(--ux4g-text-status-success, #00522c); background: var(--ux4g-bg-success, #f2fcef);
}
[data-rails="on"] [data-rail-box="proposed"] { outline: 1px dashed var(--ux4g-border-color-info-strong, #13c2c2); outline-offset: 3px; border-radius: 12px; }

/* --- "you are continuing to <portal>" context strip ------------------------------------------------ */
.mp-context {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  width: min(560px, 100%); margin: 0 auto 12px; padding: 10px 14px;
  border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 8px;
  background: var(--ux4g-bg-neutral-elevated, #ffffff);
}
.mp-context__line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.mp-context__line .ux4g-icon-outlined { font-size: 18px; color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-context__step { margin: 0; font-size: 12px; color: var(--ux4g-text-neutral-tertiary, #737373); }

/* --- the way back: a row of links above the title, each a full target; and the breadcrumb ---------- */
.mp-back { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.mp-back a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.mp-back i { font-size: 18px; }
.mp-crumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 14px; }
.mp-crumb .ux4g-icon-outlined { font-size: 18px; color: var(--ux4g-text-neutral-secondary, #525252); }
.mp-crumb [aria-current] { color: var(--ux4g-text-neutral-secondary, #525252); }

/* =====================================================================================================
   3. Primitives
   ===================================================================================================== */

/* --- rows and lists --------------------------------------------------------------------------------- */
.mp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mp-task, .mp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 8px;
  background: var(--ux4g-bg-neutral-elevated, #fff);
  border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5);
}
.mp-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 12rem; flex: 1; }
.mp-row__action { min-height: 44px; flex: none; }
.mp-row--live { border-color: var(--ux4g-color-orange-600, #fa8c16); border-left-width: 4px; }
.mp-row--danger { border-color: var(--ux4g-color-red-600, #db372d); border-left-width: 4px; }
.mp-row--unread .ux4g-label-l-strong { font-weight: 700; }
.mp-log .mp-row { border-left: 3px solid var(--ux4g-color-primary-300, #a391ff); }
.mp-actlist .mp-row { align-items: flex-start; }
.mp-actlist__icon { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--ux4g-bg-primary, #f2efff); color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-actlist__icon .ux4g-icon-outlined { font-size: 20px; }
.mp-timeline { counter-reset: ev; }
.mp-checklist { margin-top: 8px; }
[data-theme="dark"] .mp-task,
[data-theme="dark"] .mp-row { background: var(--ux4g-color-neutral-800, #262626); border-color: var(--ux4g-color-neutral-700, #404040); }

/* --- status: icon and word together, never colour alone ---------------------------------------------
   The variant suffix is composed at runtime from the state maps in mp.js: success · warning · neutral ·
   info · error · primary. Every one of them must exist here. */
.mp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; flex: none; }
.mp-status i { font-size: 18px; }
.mp-status--success { color: var(--ux4g-color-green-800, #00522c); }
.mp-status--warning { color: var(--ux4g-color-orange-800, #ad4e00); }
.mp-status--neutral { color: var(--ux4g-color-neutral-600, #737373); }
.mp-status--info    { background: var(--ux4g-bg-info, #e6fffb); color: var(--ux4g-text-status-info, #006d75); }
.mp-status--error   { background: var(--ux4g-bg-error, #fff8f8); color: var(--ux4g-text-status-error, #8a1a16); }
.mp-status--primary { background: var(--ux4g-bg-primary-soft, #dcd4ff); color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
[data-theme="dark"] .mp-status--success { color: var(--ux4g-color-green-300, #80da88); }
[data-theme="dark"] .mp-status--warning { color: var(--ux4g-color-orange-300, #ffd899); }
[data-theme="dark"] .mp-status--neutral { color: var(--ux4g-color-neutral-400, #a1a1a1); }
/* Chips sit on their own line under a row's title, never wrapped into the title. */
.mp-row__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* --- loading states ----------------------------------------------------------------------------------
   A list the API will fill shows rows of the shape it is about to take, as many as last time, so nothing
   below it moves when the answer lands (`skeleton` in assets/mp.js). The placeholder pulses in opacity —
   no gradient, by the colour law — and is hidden from assistive technology: aria-busy on the list says
   what is happening. */
.mp-skel { display: block; border-radius: 4px; background: var(--ux4g-bg-neutral-subtle, #e5e5e5); animation: mp-skel 1.4s ease-in-out infinite; }
.mp-skel--title { width: 52%; height: 16px; }
.mp-skel--line { width: 84%; height: 12px; margin-top: 6px; }
.mp-skel--short { width: 40%; }
.mp-skel--btn { flex: none; width: 76px; height: 44px; border-radius: 8px; }
.mp-skel-row { min-height: 66px; }
.mp-skel-card .ux4g-card-body { display: flex; flex-direction: column; min-height: 150px; }
.mp-skel-tr td { padding: 14px 12px; }
.mp-skel-device { min-height: 92px; }
/* The reservation: each list's last rendered height on this width of screen, set on the root by
   assets/head.js before first paint. Unset on a first visit, so nothing is reserved that was never seen. */
[data-used-list] { min-height: var(--mp-h-used, auto); }
[data-goals-list] { min-height: var(--mp-h-goals, auto); }
[data-schemes-list] { min-height: var(--mp-h-schemes, auto); }
[data-inbox-list] { min-height: var(--mp-h-inbox, auto); }
[data-identities-list] { min-height: var(--mp-h-identities, auto); }
[data-entities-list] { min-height: var(--mp-h-entities, auto); }
[data-consents-list] { min-height: var(--mp-h-consents, auto); }
[data-log-list] { min-height: var(--mp-h-log, auto); }
[data-devices-list] { min-height: var(--mp-h-devices, auto); }
body[data-page="acct-activity"] [data-sessions-list] { min-height: var(--mp-h-sessions, auto); }
body[data-page="acct-activity"] [data-activity-list] { min-height: var(--mp-h-activity, auto); }
@keyframes mp-skel { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .mp-skel { animation: none; } }
[data-theme="dark"] .mp-skel { background: var(--ux4g-color-neutral-700, #404040); }

/* --- the ledger --------------------------------------------------------------------------------------
   Day headings, then rows: the kind as an icon, the words, the time at the right. The digest on the access
   page and the filtered page share it. */
.mp-ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mp-ledger__day { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ux4g-text-neutral-secondary, #525252); padding: 14px 0 4px; }
.mp-ledger__day:first-child { padding-top: 0; }
.mp-ledger__row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 8px; background: var(--ux4g-bg-neutral-elevated, #fff); border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-ledger__icon { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--ux4g-bg-primary-soft, #f2efff); color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-ledger__icon i { font-size: 20px; }
.mp-ledger__row--helper .mp-ledger__icon { background: var(--ux4g-bg-warning, #fff7e6); color: var(--ux4g-text-status-warning, #ad4e00); }
.mp-ledger__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-ledger__body > span { overflow-wrap: anywhere; }
.mp-ledger__time { white-space: nowrap; color: var(--ux4g-text-neutral-tertiary, #737373); font-variant-numeric: tabular-nums; padding-top: 3px; }
.mp-ledger__empty { padding: 12px 0; }
.mp-ledger__count { margin: 0 0 8px; }
.mp-ledger__more { margin-top: 12px; }
.mp-ledger__more button { min-height: 44px; }
[data-theme="dark"] .mp-ledger__row { background: var(--ux4g-color-neutral-800, #262626); border-color: var(--ux4g-color-neutral-700, #404040); }
/* Filters: search wide, three selects, one row on desktop and two on a phone. */
.mp-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: end; margin: 0 0 12px; }
.mp-filters .ux4g-input-container { margin: 0; }
@media (max-width: 800px) { .mp-filters { grid-template-columns: 1fr 1fr; } .mp-filters__search { grid-column: 1 / -1; } }
.mp-row--session .mp-status--primary { padding: 4px 10px; border-radius: 999px; }

/* --- cards ------------------------------------------------------------------------------------------ */
.mp-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .mp-cards { grid-template-columns: 1fr 1fr; } }
/* Identity cards: a real box, the same box every list uses; the footer keeps its actions on one baseline. */
.mp-idcard { background: var(--ux4g-bg-neutral-elevated, #ffffff); border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 12px; }
.mp-idcard > .ux4g-card-body { padding: 16px; }
.mp-idcard__masked { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-idcard [data-foot] { align-items: center; row-gap: 6px; }
.mp-idcard [data-foot] > button:last-child { margin-left: auto; }
[data-theme="dark"] .mp-idcard { background: var(--ux4g-color-neutral-800, #262626); border-color: var(--ux4g-color-neutral-700, #404040); }
.mp-device { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; background: var(--ux4g-bg-neutral-elevated, #fff); border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-device .ux4g-switch { margin-top: 6px; }
/* "Show all N": the button that follows a capped list, and its row inside a capped table. */
.mp-more { margin-top: 12px; min-height: 44px; }
.mp-more__row td { text-align: center; padding: 8px; }
.mp-chart { margin: 8px 0 16px; padding: 16px; border-radius: 12px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); background: var(--ux4g-bg-neutral-elevated, #fff); }

/* --- fields and small controls ---------------------------------------------------------------------- */
.mp-field { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); align-items: center; }
.mp-field__k { grid-column: 1; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ux4g-text-neutral-secondary, #525252); }
.mp-field__v { grid-column: 1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 16px; }
.mp-field__btn { grid-column: 2; grid-row: 1 / span 2; }
.mp-field__edit { max-width: 320px; padding: 8px 10px; border: 1px solid var(--ux4g-border-color-neutral-default, #a1a1a1); border-radius: 8px; font: inherit; }
.mp-select-inline { min-height: 44px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--ux4g-border-color-neutral-default, #d9d9d9); background: var(--ux4g-bg-neutral-elevated, #fff); color: inherit; font: inherit; font-size: 14px; }
.mp-check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.mp-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: #4a2bc2; flex: 0 0 auto; }
.mp-setting .ux4g-switch { flex: 0 0 auto; }
.mp-pwless { align-items: flex-start; }
.mp-pwless .ux4g-switch-content { min-width: 0; flex: 1 1 auto; }
.mp-pwless .ux4g-switch-label { white-space: normal; overflow-wrap: anywhere; }
/* A choice drawn as a boxed radio row ("Who are you?" on the help page). */
.mp-who { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mp-who__opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 12px; min-height: 48px; cursor: pointer; }
.mp-who__opt input { margin-top: 4px; width: 20px; height: 20px; accent-color: #4a2bc2; }
.mp-who__opt > span { display: flex; flex-direction: column; gap: 2px; }
.mp-who__opt:has(input:checked) { border-color: var(--ux4g-border-color-primary-default, #4a2bc2); background: var(--ux4g-bg-primary-soft, #f2efff); }
/* Add-a-member: mobile, role and the button on one grid; one column on a phone. */
.mp-member-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.mp-member-form .ux4g-input-container { margin: 0; }
.mp-member-form button { min-height: 44px; }
@media (max-width: 600px) { .mp-member-form { grid-template-columns: 1fr; } .mp-member-form button { width: 100%; } }
.mp-linkform { display: grid; gap: 12px; max-width: 560px; }

/* --- disclosures drawn as controls -----------------------------------------------------------------
   "Other ways to sign in" and the offline code share one pattern: a bordered row with a chevron, not a
   bare summary. It has to read as something you can open, or a citizen who needs their old route will
   not find it. The layered rule in §1 gives the summary its full width. */
.mp-other-ways, .mp-alt-code { border: 1px solid var(--ux4g-border-color-neutral-subtle, #d9d9d9); border-radius: 8px; }
.mp-other-ways__summary, .mp-alt-code__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 12px 16px; cursor: pointer; list-style: none;
}
.mp-other-ways__summary::-webkit-details-marker,
.mp-alt-code__summary::-webkit-details-marker { display: none; }
.mp-other-ways__summary:hover,
.mp-alt-code__summary:hover { background: var(--ux4g-color-primary-50, #f2efff); }
.mp-other-ways__chev, .mp-alt-code__chev { transition: transform .15s ease; flex: none; color: var(--ux4g-color-primary-600, #4a2bc2); }
.mp-other-ways[open] .mp-other-ways__chev,
.mp-alt-code[open] .mp-alt-code__chev { transform: rotate(180deg); }
.mp-other-ways[open] .mp-other-ways__summary,
.mp-alt-code[open] .mp-alt-code__summary { border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle, #d9d9d9); }
.mp-other-ways__body { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.mp-alt-code__body { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.mp-other-ways__body > p, .mp-alt-code__body > p { margin: 0; }
/* The summary is a control, not a link: its label takes the text colour, not the link colour it inherited. */
.mp-other-ways > summary { color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-other-ways > summary:focus-visible { outline: 2px solid #4a2bc2; outline-offset: 2px; }
.mp-other-ways__summary > span { color: var(--ux4g-text-neutral-primary, #171717); }
@media (prefers-reduced-motion: reduce) { .mp-other-ways__chev, .mp-alt-code__chev { transition: none; } }
[data-theme="dark"] .mp-other-ways, [data-theme="dark"] .mp-alt-code,
[data-theme="dark"] .mp-other-ways[open] .mp-other-ways__summary,
[data-theme="dark"] .mp-alt-code[open] .mp-alt-code__summary { border-color: var(--ux4g-color-neutral-700, #404040); }
[data-theme="dark"] .mp-other-ways__summary:hover,
[data-theme="dark"] .mp-alt-code__summary:hover { background: var(--ux4g-color-neutral-800, #262626); }
[data-theme="dark"] .mp-other-ways__summary > span { color: var(--ux4g-color-neutral-0, #fafafa); }
[data-theme="dark"] .mp-other-ways__chev, [data-theme="dark"] .mp-alt-code__chev { color: var(--ux4g-color-primary-200, #c0b3ff); }
/* A plain "add another" disclosure in the authenticator. */
.mp-add { margin-top: 12px; }
.mp-add__summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; font-weight: 600; list-style: none; }
.mp-add__summary::-webkit-details-marker { display: none; }
.mp-add__body { padding: 8px 0 4px; }

/* --- tables, code, definition lists ----------------------------------------------------------------- */
.mp-tablewrap { overflow-x: auto; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 12px; }
.mp-tablewrap table { width: 100%; min-width: 520px; border-collapse: collapse; }
.mp-tablewrap th, .mp-tablewrap td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-tablewrap thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ux4g-text-neutral-secondary, #525252); background: var(--ux4g-bg-neutral-subtle, #fafafa); }
.mp-tablewrap tbody tr:last-child th, .mp-tablewrap tbody tr:last-child td { border-bottom: 0; }
/* A scrolling table region is focusable (JS sets tabindex) and shows its focus ring. */
.mp-tablewrap:focus-visible { outline: 2px solid var(--ux4g-color-primary-600, #4a2bc2); outline-offset: 2px; }
.mp-no  { font-weight: 700; color: #8a1a16; }
.mp-yes { font-weight: 700; color: #00522c; }
[data-theme="dark"] .mp-no  { color: #ffb3ae; }
[data-theme="dark"] .mp-yes { color: #80da88; }
[data-theme="dark"] .mp-tablewrap thead th { background: #171717; }
.mp-code { position: relative; margin: 16px 0; border-radius: 12px; background: var(--ux4g-bg-neutral-strong, #171717); color: #fafafa; overflow: auto; }
.mp-code pre { margin: 0; padding: 20px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.mp-code__copy { position: absolute; top: 10px; right: 10px; }
.mp-codes { margin: 16px 0 0; padding: 16px; border-radius: 12px; background: var(--ux4g-bg-neutral-soft, #fafafa); border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); font: 15px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
/* What a private relying party received (T20): a definition list, one row per claim. */
.mp-received { display: grid; gap: 8px; margin: 0; }
.mp-received > div { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-received dt { font: 500 14px/20px "Noto Sans", sans-serif; color: var(--ux4g-text-neutral-secondary, #525252); }
.mp-received dd { margin: 0; font: 500 16px/24px "Noto Sans", sans-serif; overflow-wrap: anywhere; }
.mp-received code { font-size: 14px; }

/* =====================================================================================================
   4. Surfaces
   ===================================================================================================== */

/* --- landing ----------------------------------------------------------------------------------------- */
.mp-hero { padding: clamp(40px, 7vw, 88px) 0 clamp(32px, 5vw, 64px); background: var(--ux4g-bg-primary-soft, #f2efff); }
.mp-hero__inner { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
.mp-hero__eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-hero__title {
  margin: 0; font-family: "Noto Sans Display", "Noto Sans", system-ui, sans-serif;
  font-size: clamp(32px, 6.2vw, 60px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
  color: var(--ux4g-text-neutral-primary, #171717);
}
.mp-hero__title .mp-bi { display: block; }
.mp-hero__title [lang="hi"] { line-height: 1.5; }
.mp-hero__lede { margin: 0; max-width: 62ch; font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--ux4g-text-neutral-secondary, #525252); }
.mp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.mp-hero__cta { min-width: 240px; }
.mp-hero__creds { margin: 0; font-size: 14px; color: var(--ux4g-text-neutral-secondary, #525252); }

.mp-section { padding: clamp(36px, 5vw, 64px) 16px; display: flex; flex-direction: column; gap: 16px; }
.mp-section__title { margin: 0; font-family: "Noto Sans Display", "Noto Sans", system-ui, sans-serif; font-size: clamp(22px, 3.4vw, 34px); font-weight: 700; line-height: 1.2; color: var(--ux4g-text-neutral-primary, #171717); }
.mp-section__lede { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--ux4g-text-neutral-secondary, #525252); }

.mp-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 8px; }
.mp-counter { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 12px; background: var(--ux4g-bg-neutral-soft, #fafafa); border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-counter__n { font-family: "Noto Sans Display", "Noto Sans", system-ui, sans-serif; font-size: 44px; line-height: 1; font-weight: 700; color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-counter__l { font-size: 15px; line-height: 1.4; color: var(--ux4g-text-neutral-primary, #171717); }

.mp-steps { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .mp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mp-step {
  display: flex; align-items: flex-start; gap: 14px; min-height: 44px; padding: 18px;
  border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 12px;
  background: var(--ux4g-bg-neutral-elevated, #ffffff); text-decoration: none;
  color: var(--ux4g-text-neutral-primary, #171717);
}
.mp-step:hover { border-color: #4a2bc2; background: var(--ux4g-bg-primary-soft, #f2efff); }
.mp-step:focus-visible { outline: 2px solid #4a2bc2; outline-offset: 2px; }
.mp-step__n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: #4a2bc2; color: #fafafa; font-size: 13px; font-weight: 700; }
.mp-step__body { display: flex; flex-direction: column; gap: 4px; }
.mp-step__title { font-weight: 600; font-size: 16px; }
.mp-step__desc { font-size: 14px; line-height: 1.55; color: var(--ux4g-text-neutral-secondary, #525252); }
.mp-step__go { flex: none; margin-inline-start: auto; color: var(--ux4g-text-brand-primary-default, #4a2bc2); }

.mp-honest { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .mp-honest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.mp-honest__col { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 12px; }
.mp-honest__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mp-honest__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; }
.mp-honest__list .ux4g-icon-outlined { flex: none; font-size: 18px; color: var(--ux4g-text-neutral-tertiary, #737373); }
.mp-honest__list--real .ux4g-icon-outlined { color: #128937; }

.mp-prov { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 8px 0 12px; }
.mp-prov__card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 12px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); background: var(--ux4g-bg-neutral-elevated, #fff); }
.mp-prov__name { font-family: "Noto Sans Display", "Noto Sans", system-ui, sans-serif; font-size: 22px; font-weight: 700; color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-jmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; counter-reset: jm; }
.mp-jmap__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; position: relative; }
.mp-jmap__icon { width: 88px; height: 88px; border-radius: 999px; display: grid; place-items: center; background: var(--ux4g-bg-primary-soft, #f2efff); color: var(--ux4g-text-brand-primary-default, #4a2bc2); border: 1px solid var(--ux4g-border-color-primary-default, #4a2bc2); }
.mp-jmap__icon .ux4g-icon-outlined { font-size: 36px; }
.mp-jmap__title { font-weight: 700; font-size: 16px; display: flex; flex-direction: column; }
.mp-jmap__desc { font-size: 13px; line-height: 1.5; color: var(--ux4g-text-neutral-secondary, #525252); }
@media (min-width: 900px) { .mp-jmap__step + .mp-jmap__step::before { content: "→"; position: absolute; left: -16px; top: 32px; color: var(--ux4g-text-brand-primary-default, #4a2bc2); font-size: 20px; } }
.mp-kit { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .mp-kit { grid-template-columns: 320px 1fr; align-items: start; } }
.mp-kit__demo { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 12px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); background: var(--ux4g-bg-neutral-soft, #fafafa); }

/* --- content pages ----------------------------------------------------------------------------------- */
.mp-page { max-width: 760px; padding: 32px 0 48px; }
.mp-page__title { margin: 0 0 8px; font-family: "Noto Sans Display", "Noto Sans", system-ui, sans-serif; font-size: clamp(28px, 4vw, 36px); line-height: 1.15; font-weight: 700; }
.mp-page .mp-section__title { margin-top: 32px; }
.mp-page__list { margin: 8px 0 16px; padding-left: 22px; line-height: 1.6; }
.mp-page__list li + li { margin-top: 6px; }
/* The developer page's quick-start steps breathe a little more than a plain list. */
.mp-quick li + li { margin-top: 10px; }
/* The developer page's fault-injection list: a content list that drops the list indent, so it must follow
   .mp-page__list in source. */
.mp-faults { padding-left: 0; }
.mp-faults li { display: flex; gap: 12px; align-items: flex-start; list-style: none; padding: 10px 0; border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-fault { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.mp-fault input { width: 22px; height: 22px; accent-color: #4a2bc2; }
.mp-page .ux4g-alert { margin: 16px 0 8px; }
.mp-page a, .mp-page code { overflow-wrap: anywhere; }
/* The wide variant is shared by the statistics page and the design page. */
.mp-page--wide { max-width: 1440px; }
/* Content pages keep a gutter on phones; the container's own padding is gone below 768. */
@media (max-width: 800px) { .mp-page { padding-inline: 16px; } }
.mp-quiet { max-width: 560px; margin: 16px auto 0; line-height: 1.7; }

/* --- before / after ---------------------------------------------------------------------------------- */
.mp-compare__title {
  margin: 0 auto; max-width: 62ch; padding: 8px 16px 0; text-align: center;
  font-family: "Noto Sans Display", "Noto Sans", system-ui, sans-serif;
  font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.25;
  color: var(--ux4g-text-neutral-primary, #171717);
}
.mp-compare { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; width: 100%; max-width: 1140px; margin: 28px auto 0; padding-inline: 16px; }
@media (min-width: 992px) { .mp-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
.mp-compare--one { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
.mp-compare--toggle { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
.mp-compare--toggle .mp-frame[data-frame="before"] { order: 2; }
.mp-compare--toggle .mp-frame[data-frame="after"] .ux4g-form-box { box-shadow: none; }
.mp-frame { display: flex; flex-direction: column; gap: 12px; }
.mp-frame__label { margin: 0; display: flex; align-items: baseline; gap: 10px; min-height: 44px; font-size: 13px; line-height: 1.5; color: var(--ux4g-text-neutral-secondary, #525252); }
.mp-frame__badge { flex: none; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; background: var(--ux4g-bg-neutral-subtle, #e5e5e5); color: var(--ux4g-text-neutral-primary, #171717); }
.mp-frame[data-frame="after"] .mp-frame__badge { background: #4a2bc2; color: #fafafa; }
.mp-frame[data-frame="after"] .ux4g-form-box { box-shadow: 0 0 0 2px #4a2bc2; }
/* The trust micro-line under the national button (Handbook §6.2.9). */
.mp-trust { display: flex; align-items: center; gap: 6px; margin: 0; }
.mp-trust .ux4g-icon-outlined { font-size: 16px; }

/* The reproduced Meri Pehchaan 1.0 sign-in (the portal's "before" frame): the live page's layout and words
   in this prototype's neutrals, so it reads as the old thing beside the new one. No official mark is drawn. */
.mp-legacy { border: 1px solid var(--ux4g-border-color-neutral-default, #a1a1a1); }
.mp-legacy__lockup { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 16px; text-align: center; }
.mp-legacy__brand { font: 700 24px/1.1 "Noto Sans Display", "Noto Sans", sans-serif; letter-spacing: -.01em; color: var(--ux4g-text-neutral-primary, #171717); }
.mp-legacy__strap { font: 600 11px/1.4 "Noto Sans", sans-serif; letter-spacing: .12em; color: var(--ux4g-text-neutral-secondary, #525252); }
.mp-legacy__providers { font: 500 12px/1.4 "Noto Sans", sans-serif; color: var(--ux4g-text-neutral-secondary, #525252); border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 4px; padding: 2px 8px; margin-top: 4px; }
.mp-legacy__via { white-space: nowrap; color: var(--ux4g-text-neutral-secondary, #525252); }
.mp-legacy__via .ux4g-icon-outlined { font-size: 18px; vertical-align: middle; }
.mp-legacy__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 12px; }
.mp-legacy__tab { min-height: 44px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 6px; background: var(--ux4g-bg-neutral-subtle, #f5f5f5); color: var(--ux4g-text-neutral-primary, #171717); font: 500 14px/20px "Noto Sans", sans-serif; cursor: pointer; }
.mp-legacy__tab.is-active { background: var(--ux4g-color-neutral-800, #262626); color: #fafafa; border-color: transparent; }
.mp-legacy__check { display: flex; align-items: center; gap: 8px; min-height: 44px; font: 400 14px/20px "Noto Sans", sans-serif; }
.mp-legacy__check input { width: 20px; height: 20px; }
.mp-legacy__btn { min-height: 48px; border: 0; border-radius: 6px; background: var(--ux4g-color-neutral-800, #262626); color: #fafafa; font: 500 16px/20px "Noto Sans", sans-serif; cursor: pointer; }
.mp-legacy__alts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mp-legacy__alts span { padding: 6px 10px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 6px; font: 500 13px/18px "Noto Sans", sans-serif; }
[data-theme="dark"] .mp-legacy__tab.is-active, [data-theme="dark"] .mp-legacy__btn { background: var(--ux4g-color-neutral-200, #e5e5e5); color: #171717; }

/* The department's prefilled fields: the sign action stacks its label above its condition; side by side
   they collided at 360px. The button is a target, so it keeps a comfortable floor. */
.mp-sign__body { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.ux4g-btn-pehchaan-sign { width: 100%; min-height: 44px; cursor: pointer; align-items: center; }
.ux4g-input-pehchaan .ux4g-chip-pehchaan { flex: none; }
@media (max-width: 420px) {
  /* At the narrowest widths the chip and a long value cannot share a line. */
  .ux4g-input-pehchaan { flex-wrap: wrap; padding-block: 8px; }
  .ux4g-input-pehchaan input { flex: 1 1 100%; order: 2; }
  .ux4g-input-pehchaan .ux4g-chip-pehchaan { order: 3; }
}
/* The acknowledgement: the system's submission-acknowledgement anatomy in the place the button was
   (`acknowledge()` in mp.js). The badge and icon are the shipped classes; the reference card is ours
   from tokens, because the pattern documents its markup and not its CSS. */
.mp-ack { max-width: 640px; margin: 8px auto 0; padding: 24px 20px; border-radius: 12px; border: 1px solid var(--ux4g-border-color-success-strong, #128937); background: var(--ux4g-bg-neutral-elevated, #fff); display: grid; gap: 20px; outline: none; }
.mp-ack:focus-visible { outline: 2px solid #4a2bc2; outline-offset: 2px; }
.mp-ack__hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mp-ack__badge { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; background: var(--ux4g-bg-success-strong, #128937); color: #ffffff; box-shadow: 0 0 0 8px var(--ux4g-bg-success, #f2fcef); margin-bottom: 6px; }
.mp-ack__badge i { font-size: 36px; }
.mp-ack__hero h2, .mp-ack__hero p { margin: 0; }
.mp-ack__hero p { max-width: 42ch; }
.mp-ack__ref { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 8px; background: var(--ux4g-bg-success, #f2fcef); }
.mp-ack__refrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mp-ack__num { font-variant-numeric: tabular-nums; letter-spacing: .02em; overflow-wrap: anywhere; }
.mp-ack__copy { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 8px; cursor: pointer; }
.mp-ack__copy:hover { background: var(--ux4g-bg-primary-soft, #f2efff); }
.mp-ack__next { display: grid; gap: 10px; }
.mp-ack__next h3 { margin: 0; }
.mp-ack__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mp-ack__steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.mp-ack__step-n { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--ux4g-bg-primary-soft, #f2efff); color: var(--ux4g-text-brand-primary-default, #4a2bc2); font-size: 13px; font-weight: 700; }
.mp-ack__step-body { display: flex; flex-direction: column; gap: 2px; }
.mp-ack__note { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; }
.mp-ack__note i { font-size: 18px; flex: none; }
.mp-ack__actions { display: grid; gap: 8px; justify-items: center; }
.mp-ack__actions .ux4g-btn-primary { width: 100%; max-width: 320px; }
[data-theme="dark"] .mp-ack { background: var(--ux4g-color-neutral-800, #262626); }

/* A fictional private or regulated relying party carries a neutral icon, never the State Emblem. */
.mp-rp-icon { font-size: 32px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--ux4g-text-neutral-secondary, #525252); }

/* --- the sign-in sheet -------------------------------------------------------------------------------
   It sits over the department's page rather than replacing it, because the citizen came here to do
   something and should not lose their place to sign in. It is our own surface — it never frames the hub. */
.mp-sheet { position: fixed; inset: 0; z-index: 1065; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 14, 61, .5); }
.mp-sheet__box {
  background: var(--ux4g-bg-neutral-elevated, #fff);
  border-radius: 16px 16px 0 0; padding: 22px;
  width: 100%; max-width: 34rem; max-height: 92dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}
@media (min-width: 560px) { .mp-sheet { align-items: center; } .mp-sheet__box { border-radius: 16px; } }
.mp-sheet__head { display: flex; align-items: center; gap: 10px; }
.mp-sheet__head h2 { margin: 0; flex: 1; }
.mp-sheet__close { min-width: 44px; min-height: 44px; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.mp-sheet__close:hover { background: var(--ux4g-color-neutral-100, #f5f5f5); }
.mp-sheet [data-sheet-step] { display: flex; flex-direction: column; gap: 12px; }
.mp-sheet p { margin: 0; }
.mp-sheet__note { display: flex; gap: 8px; align-items: flex-start; }
.mp-sheet__dots { display: flex; gap: 6px; }
.mp-sheet__dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--ux4g-color-primary-300, #a391ff); animation: mp-dot 1.2s ease-in-out infinite; }
.mp-sheet__dots span:nth-child(2) { animation-delay: .15s }
.mp-sheet__dots span:nth-child(3) { animation-delay: .3s }
@keyframes mp-dot { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .mp-sheet__dots span { animation: none; opacity: .7 } }
/* The sheet's secondary actions are targets too — they were 36px. */
.mp-sheet .ux4g-btn-outline-neutral { min-height: 48px; width: 100%; }
.mp-sheet .ux4g-btn-meripehchaan { max-width: 320px; margin-inline: auto; }
[data-theme="dark"] .mp-sheet__box { background: var(--ux4g-color-neutral-800, #262626); }
/* The QR keeps a white plate in both themes: a camera reads dark-on-light, and an inverted code defeats
   most phone scanners. */
.mp-qr { display: flex; justify-content: center; padding: 14px; background: #ffffff; border-radius: 8px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #d9d9d9); }
.mp-qr canvas { display: block; width: 164px; height: 164px; image-rendering: pixelated; }
.mp-qr__url { word-break: break-all; text-align: center; }

/* --- consent: the relying party, and what it will read --------------------------------------------- */
.mp-wide { width: min(680px, 100%); max-width: 760px; }
.mp-rp { display: flex; align-items: flex-start; gap: 14px; }
.mp-rp__logo {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 8px;
  background: var(--ux4g-bg-neutral-subtle, #f5f5f5); color: var(--ux4g-text-neutral-secondary, #525252);
}
.mp-scopes { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mp-scope { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 8px; }
.mp-scope__label { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
.mp-scope__box { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: #4a2bc2; }
.mp-scope__text { display: flex; flex-direction: column; gap: 2px; }
.mp-scope__name { font-weight: 600; font-size: 15px; }
.mp-scope__why { font-size: 13px; color: var(--ux4g-text-neutral-secondary, #525252); }
.mp-scope__value { font-size: 13px; color: var(--ux4g-text-neutral-tertiary, #737373); font-variant-numeric: tabular-nums; }
.mp-scope__req { flex: none; font-size: 11px; }
.mp-scope__opt { flex: none; font-size: 11px; font-weight: 600; color: var(--ux4g-text-neutral-tertiary, #737373); }
/* The terms: a labelled two-column list, one column on a phone. */
.mp-consent-terms { display: grid; gap: 12px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-consent-terms > div { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: baseline; }
.mp-consent-terms dt { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .01em; color: var(--ux4g-text-neutral-secondary, #525252); white-space: nowrap; }
.mp-consent-terms dd { margin: 0; font-size: 15px; line-height: 22px; min-width: 0; }
.mp-consent-terms dd .mp-select-inline { max-width: 220px; }
.mp-consent-terms__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 15px; line-height: 22px; }
@media (max-width: 575px) { .mp-consent-terms > div { grid-template-columns: 1fr; gap: 2px; } }

/* --- account link: resume, success ------------------------------------------------------------------ */
.mp-resume { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; padding: 14px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 8px; background: var(--ux4g-bg-neutral-subtle, #f5f5f5); }
.mp-resume .ux4g-icon-outlined { color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-done { text-align: center; }
.mp-done__icon { font-size: 48px; color: var(--ux4g-icon-status-success, #128937); }
.mp-carried { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.mp-carried li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.mp-carried .ux4g-icon-outlined { font-size: 18px; color: var(--ux4g-icon-status-success, #128937); }

/* --- the citizen account: the system's dashboard sidebar layout + our rows ------------------------- */
.mp-acct { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--ux4g-bg-neutral-soft, #fafafa); min-height: 60vh; }
.mp-acct__side { flex-direction: column; padding: 24px 16px; border-right: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); background: var(--ux4g-bg-neutral-elevated, #fff); }
/* The sidebar carries the system's d-flex utility (display:flex !important, inside its layer): hiding it
   on a phone has to happen in the same layer, later in source. */
@layer ux4g-tokens { @media (max-width: 899px) { .mp-acct__side { display: none !important; } } }
.mp-acct__side .ux4g-dashboard-sidebar-profile { display: flex; flex-direction: column; align-items: flex-start; }
.mp-acct__side nav a, .mp-acct__side nav button { text-decoration: none; min-height: 44px; }
.mp-acct__side button { min-height: 44px; }
.mp-acct__side .ux4g-btn-primary .mp-bi span,
.mp-acct__side .ux4g-btn-text-neutral .mp-bi span { color: inherit; }
.mp-acct__avatar { width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 20px; background: var(--ux4g-bg-primary-strong, #4a2bc2); color: #fff; }
/* The tab strip on phones sticks beneath the navbar; the desktop sidebar stays put and scrolls on its own. */
.mp-acct-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px; background: var(--ux4g-bg-neutral-elevated, #fff); border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); -webkit-overflow-scrolling: touch; position: sticky; top: var(--mp-nav-h); z-index: 1030; }
.mp-acct-tab { flex: 0 0 auto; padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); color: var(--ux4g-text-neutral-primary, #171717); text-decoration: none; font-size: 14px; font-weight: 500; }
.mp-acct-tab.is-active { background: var(--ux4g-bg-primary-strong, #4a2bc2); color: #fff; border-color: transparent; }
[data-theme="dark"] .mp-acct-tab.is-active { color: #171717; }
.mp-acct__main { padding: 24px 16px 48px; max-width: 1040px; }
@media (min-width: 900px) {
  .mp-acct { grid-template-columns: 264px 1fr; align-items: start; }
  .mp-acct-tabs { display: none; }
  .mp-acct__side { position: sticky; top: var(--mp-nav-h); max-height: calc(100vh - var(--mp-nav-h)); overflow-y: auto; overscroll-behavior: contain; }
  .mp-acct__main { padding: 32px 32px 64px; }
}
/* One padding between the tab strip and the page title, not two. */
@layer ux4g-tokens { .mp-acct__main > .ux4g-container.ux4g-py-xl { padding-top: 8px !important; } }
.mp-acct__main h1 { margin-bottom: 4px; }
.mp-acct__main h1 + p { max-width: 64ch; }
.mp-acct__main > .ux4g-d-flex.ux4g-jc-between > div:first-child { flex: 1 1 32rem; min-width: 0; }
.mp-acct__main > .ux4g-d-flex.ux4g-jc-between > button { flex: none; }
.mp-acct__main .mp-card { max-width: 640px; }
.mp-acct__main .ux4g-dashboard-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mp-acct__main .mp-list { margin-top: 4px; }
.mp-acct__main .ux4g-table th { white-space: nowrap; }
.mp-acct__stat { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; min-height: 44px; }
.mp-acct__staticon { color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-acct__two { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.mp-acct__col { display: grid; gap: 24px; }
@media (min-width: 1100px) { .mp-acct__two { grid-template-columns: 1fr 1fr; } }
.mp-acct__now { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mp-acct__now > div { display: flex; flex-direction: column; gap: 4px; }
.mp-acct__devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
/* Dashboard on a phone: the four counters in two columns, not one long column. */
@media (max-width: 600px) { .ux4g-dashboard-overview-card { min-width: 0; } }
@layer ux4g-tokens { @media (max-width: 600px) { .ux4g-dashboard-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } }

/* --- the citizen dashboard (sheet 06) ---------------------------------------------------------------
   Status is a word first everywhere on this screen: desaturate the page and nothing is lost. The colours
   only reinforce what the words already say. Drawn at 360, it is held to a readable column on desktop. */
.mp-dash { display: flex; flex-direction: column; gap: 28px; max-width: 760px; margin-inline: auto; }
.mp-dash section { display: flex; flex-direction: column; gap: 10px; }
.mp-dash h2, .mp-dash p { margin: 0; }
/* The card: the thing the citizen came for, and the thing they hold up to a clerk. */
.mp-card {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start;
  padding: 20px; border-radius: 12px;
  background: var(--ux4g-color-primary-600, #4a2bc2); color: #fafafa;
}
.mp-card--dash { margin-bottom: 20px; }
/* The card IS a section, and .mp-dash section forces a column: the card gets its row back here. */
.mp-dash .mp-card { flex-direction: row; align-items: flex-start; justify-content: space-between; }
.mp-card__id { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 16rem; }
.mp-card__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; opacity: .9; }
.mp-card h1 { margin: 0; color: #fafafa; }
.mp-card__num { margin: 0; font-variant-numeric: tabular-nums; letter-spacing: .04em; opacity: .9; }
.mp-card .ux4g-chip-pehchaan { background: #fafafa; color: var(--ux4g-color-primary-800, #301c7d); align-self: flex-start; }
.mp-card__qr { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 190px; flex: 0 0 auto; }
.mp-card__qr p { margin: 0; opacity: .9; }
/* The QR block: icon above caption, explicitly. The Material glyph at 76px has a tall ascent, and without
   a fixed box the caption drew straight across it. */
.mp-dash .mp-card__qr { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: 170px; }
.mp-card__qricon { display: block; width: 76px; height: 76px; font-size: 76px; line-height: 76px; overflow: hidden; }
/* The card stacks below 520px: side by side, the tier chip and the QR fought for the same 320px. */
@media (max-width: 520px) {
  .mp-card, .mp-dash .mp-card { flex-direction: column; align-items: stretch; }
  .mp-card__qr { max-width: none; align-self: center; }
}
/* When the card stacks, the id block's row-layout basis must not become its height. */
@media (max-width: 600px) { .mp-card__id, .mp-dash .mp-card__id { flex: 0 0 auto; } }

/* --- delegation: the five lines, and the revoke that tells the truth ------------------------------- */
.mp-grant { background: var(--ux4g-bg-neutral-elevated, #fff); border-radius: 12px; padding: 20px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); display: flex; flex-direction: column; gap: 10px; }
.mp-grant p { margin: 0; }
.mp-five { margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.mp-five__row { display: grid; grid-template-columns: 7rem 1fr; gap: 12px; align-items: start; }
.mp-five dt, .mp-five dd { margin: 0; }
@media (max-width: 480px) { .mp-five__row { grid-template-columns: 1fr; gap: 2px; } }
.mp-grant__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mp-grant__actions > * { flex: 1 1 12rem; min-height: 44px; }
[data-theme="dark"] .mp-grant { background: var(--ux4g-color-neutral-800, #262626); }
.ux4g-banner-acting-for { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mp-acting__body { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 2px; }
.mp-acting__body p { margin: 0; }

/* --- the authenticator: an app on the citizen's phone, not a government web page -------------------
   It gets an app bar instead of a masthead. The disclosure banner stays, because the rule is that it
   stays everywhere. */
.mp-app { min-height: 100dvh; display: flex; flex-direction: column; background: var(--ux4g-color-primary-50, #f2efff); }
.mp-app__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--ux4g-color-primary-600, #4a2bc2); color: #fafafa; padding-top: max(12px, env(safe-area-inset-top)); }
.mp-app__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.mp-app__net { font-size: 12px; opacity: .85; }
.mp-app__net[data-offline] { opacity: 1; font-weight: 600; }
.mp-app__lock { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ux4g-text-neutral-secondary, #525252); margin-right: 8px; }
.mp-app__lock .ux4g-icon-outlined { font-size: 16px; }
.mp-app__bar .mp-app__lock { color: #fff; opacity: .85; }
.mp-app__banner { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; font-size: 12px; line-height: 16px; font-weight: 500; background: var(--ux4g-bg-info, #e6fffb); color: var(--ux4g-text-status-info, #006d75); text-align: center; }
.mp-app__banner .ux4g-icon-outlined { font-size: 16px; color: var(--ux4g-icon-status-info, #13c2c2); }
.mp-app__main { flex: 1; padding: 16px 16px 88px; display: flex; flex-direction: column; gap: 16px; }
.mp-app__screen { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.mp-app__idle, .mp-app__ask { background: var(--ux4g-bg-neutral-elevated, #fff); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mp-app__when { font-size: 12px; color: var(--ux4g-color-neutral-600, #737373); margin: 0; }
.mp-app__ctx, .mp-app__valid, .mp-app__prompt { margin: 0; }
.mp-app__askhead { display: flex; justify-content: space-between; align-items: center; }
/* Refusing must be as reachable as approving. */
.mp-app__ask .ux4g-btn-outline-neutral { min-height: 48px; }
/* What you see is what you sign. Boxed and quiet, because it is the thing the citizen is meant to
   actually read before their thumb moves. */
.mp-app__wysiwys { border: 1.5px solid var(--ux4g-color-primary-300, #a391ff); background: var(--ux4g-color-primary-50, #f2efff); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.mp-app__wysiwys p { margin: 0; }
/* Three numbers, never an Approve button. Big targets — this is a thumb on a phone, often in a hurry. */
.mp-app__numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mp-num {
  min-height: 72px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--ux4g-color-primary-300, #a391ff);
  background: var(--ux4g-bg-neutral-elevated, #fff); color: var(--ux4g-color-primary-800, #301c7d);
  font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.mp-num:hover { background: var(--ux4g-color-primary-50, #f2efff); }
.mp-num:active { background: var(--ux4g-color-primary-300, #a391ff); color: var(--ux4g-color-primary-900, #24145c); }
/* The offline code. Deliberately large and readable across a counter. */
.mp-totp { text-align: center; }
.mp-totp__code { display: block; font-size: 40px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--ux4g-color-primary-800, #301c7d); }
.mp-app__bigcode { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; border-radius: 12px; text-align: center; margin-top: 12px; background: var(--ux4g-bg-neutral-elevated, #fff); border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-app__codefield,
.mp-app__lockscreen .ux4g-input-input { letter-spacing: .4em; font-size: 24px; text-align: center; }
.mp-app__about { display: flex; flex-direction: column; gap: 8px; }
.mp-app__about p { margin: 0; }
.mp-app__steps { padding-left: 18px; margin: 6px 0; }
.mp-app__steps li + li { margin-top: 4px; }
.mp-app__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; border-radius: 12px; text-align: center; border: 1px dashed var(--ux4g-border-color-neutral-default, #d9d9d9); background: var(--ux4g-bg-neutral-elevated, #fff); }
.mp-app__empty .ux4g-icon-outlined { color: var(--ux4g-color-primary-300, #a391ff); }
.mp-app__offline { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; background: var(--ux4g-bg-warning, #fff7e6); color: var(--ux4g-text-status-warning, #ad4e00); }
.mp-app__offline .ux4g-icon-outlined { color: var(--ux4g-icon-status-warning, #fa8c16); font-size: 18px; }
/* The bottom bar. */
.mp-app__nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 1060; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ux4g-bg-neutral-elevated, #fff); border-top: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
.mp-app__tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; background: none; border-radius: 12px; color: var(--ux4g-text-neutral-secondary, #525252); font: 500 12px/16px "Noto Sans", sans-serif; cursor: pointer; }
.mp-app__tab .ux4g-icon-outlined { font-size: 22px; }
.mp-app__tab[aria-current="page"] { color: var(--ux4g-text-brand-primary-default, #4a2bc2); background: var(--ux4g-bg-primary, #f2efff); }
.mp-app__badge { position: absolute; top: 6px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--ux4g-bg-error-strong, #db372d); color: #fff; font-size: 11px; font-weight: 700; }
@media (min-width: 900px) { .mp-app__nav { max-width: 480px; margin: 0 auto; border-inline: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); border-radius: 12px 12px 0 0; } }
/* Linked accounts inside the app. */
.mp-accts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mp-acct-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); background: var(--ux4g-bg-neutral-elevated, #fff); }
.mp-acct-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-acct-row__code { font-size: 28px; letter-spacing: .08em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mp-app__main .mp-ledger__row { padding: 10px 12px; }
.mp-acct-row__side { display: flex; align-items: center; gap: 4px; }
.mp-acct-row__side button { min-height: 44px; min-width: 44px; }
.mp-acct-row__side .mp-copy { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 8px; color: var(--ux4g-text-brand-primary-default, #4a2bc2); cursor: pointer; }
.mp-acct-row__left { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 14px; border: 2px solid var(--ux4g-border-color-primary-default, #4a2bc2); color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-acct-row__left.is-low { border-color: #fa8c16; color: #fa8c16; }
.mp-acct-row__left--lg { width: 56px; height: 56px; font-size: 16px; }
/* Boxed choices and the PIN dots, to the approved sheets (design/canvas/authenticator). */
.mp-choices { display: flex; flex-direction: column; gap: 10px; }
.mp-choice { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; cursor: pointer; min-height: 72px; border: 1.5px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); background: var(--ux4g-bg-neutral-elevated, #fff); color: inherit; font: inherit; }
.mp-choice[aria-checked="true"] { border-color: var(--ux4g-border-color-primary-strong, #4a2bc2); }
.mp-choice:disabled { opacity: .6; cursor: not-allowed; }
.mp-choice__icon { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--ux4g-bg-primary, #f2efff); color: var(--ux4g-text-brand-primary-default, #4a2bc2); }
.mp-choice__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mp-radio { width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--ux4g-border-color-neutral-default, #d9d9d9); display: grid; place-items: center; flex: none; }
.mp-choice[aria-checked="true"] .mp-radio { border-color: var(--ux4g-border-color-primary-strong, #4a2bc2); }
.mp-choice[aria-checked="true"] .mp-radio::after { content: ""; width: 12px; height: 12px; border-radius: 999px; background: var(--ux4g-bg-primary-strong, #4a2bc2); }
.mp-pin { display: flex; justify-content: center; gap: 14px; padding: 8px 0; }
.mp-pin span { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--ux4g-border-color-neutral-strong, #737373); }
.mp-pin span.is-on { background: var(--ux4g-text-neutral-primary, #171717); border-color: var(--ux4g-text-neutral-primary, #171717); }
/* Dark mode for the app shell. The sign box kept a pale purple field while its text inverted — 1.08:1 on
   the one line the citizen must actually read before their thumb moves. */
[data-theme="dark"] .mp-app { background: var(--ux4g-color-neutral-900, #171717); }
[data-theme="dark"] .mp-app__idle,
[data-theme="dark"] .mp-app__ask { background: var(--ux4g-color-neutral-800, #262626); }
[data-theme="dark"] .mp-app__wysiwys { background: var(--ux4g-color-primary-900, #24145c); border-color: var(--ux4g-color-primary-400, #8670ff); }
[data-theme="dark"] .mp-app__wysiwys p { color: var(--ux4g-color-neutral-0, #fafafa); }
[data-theme="dark"] .mp-app__wysiwys .ux4g-text-neutral-secondary { color: var(--ux4g-color-primary-200, #c0b3ff); }
[data-theme="dark"] .mp-app__when { color: var(--ux4g-color-neutral-400, #a1a1a1); }
[data-theme="dark"] .mp-num { background: var(--ux4g-color-neutral-900, #171717); color: var(--ux4g-color-primary-200, #c0b3ff); border-color: var(--ux4g-color-primary-400, #8670ff); }
[data-theme="dark"] .mp-totp__code { color: var(--ux4g-color-primary-200, #c0b3ff); }

/* --- feasibility for officials (the vision page) -------------------------------------------------------
   One bar per layer, three segments. Status hues carry status — built (success), onboarding (information),
   decision pending (warning) — and every segment is also named in text. */
.mp-feas { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
.mp-feas__row { padding: 12px 0; border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-feas__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.mp-feas__bar, .mp-feas__gauge { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--ux4g-bg-neutral-subtle, #f5f5f5); }
.mp-feas__gauge { height: 16px; }
.mp-feas__seg { display: block; height: 100%; }
.mp-feas__seg--built { background: var(--ux4g-border-color-success-strong, #128937); }
.mp-feas__seg--onboard { background: var(--ux4g-border-color-info-strong, #13c2c2); }
.mp-feas__seg--decision { background: var(--ux4g-border-color-warning-strong, #fa8c16); }
.mp-feas__legend { margin: 6px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mp-feas__k { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.mp-feas__k .ux4g-icon-outlined { font-size: 16px; }
.mp-feas__k--built, .mp-feas__n--built { color: var(--ux4g-text-status-success, #00522c); }
.mp-feas__k--onboard, .mp-feas__n--onboard { color: var(--ux4g-text-status-info, #006d75); }
.mp-feas__k--decision, .mp-feas__n--decision { color: var(--ux4g-text-status-warning, #ad4e00); }
.mp-feas__summary { margin: 16px 0 8px; padding: 16px; border-radius: 12px; background: var(--ux4g-bg-neutral-elevated, #ffffff); border: 1px solid var(--ux4g-border-color-neutral-subtle, #e5e5e5); }
.mp-feas__stats { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.mp-feas__stats li { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: baseline; }
@media (min-width: 900px) { .mp-feas__stats { grid-template-columns: repeat(3, 1fr); } .mp-feas__stats li { grid-template-columns: 1fr; gap: 2px; } }

/* --- the design page ---------------------------------------------------------------------------------
   The sheets are artboards: always their light palette, whatever the site theme. */
.mp-sheets, [data-theme="dark"] .mp-sheets { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; background: #ffffff; color: #171717; color-scheme: light; }
.mp-sheets:focus-visible { outline: 2px solid #4a2bc2; outline-offset: 2px; }
.mp-sheets a, .mp-sheets button, .mp-sheets select, .mp-sheets summary { min-height: 44px; }
.mp-sheets a { display: inline-flex; align-items: center; }

/* =====================================================================================================
   5. Theme
   ===================================================================================================== */

/* Dark mode, one step lighter. The shipped dark theme paints the page and every card on neutral-950
   (#0a0a0a), which reads as a void. Remapping the four background semantics one step up the same neutral
   scale keeps every pairing inside the palette and the contrast far above 4.5:1 (#fafafa on #171717 is
   17:1; on #262626, 14:1). Primitives are untouched. */
[data-theme="dark"] {
  --ux4g-bg-neutral-elevated: var(--ux4g-color-neutral-900);
  --ux4g-bg-neutral-strong: var(--ux4g-color-neutral-900);
  --ux4g-bg-neutral: var(--ux4g-color-neutral-800);
  --ux4g-border-color-neutral-elevated: var(--ux4g-color-neutral-800);
}
[data-theme="dark"] .ux4g-card,
[data-theme="dark"] .ux4g-form-box,
[data-theme="dark"] .ux4g-dashboard-overview-card,
[data-theme="dark"] .mp-row,
[data-theme="dark"] .mp-legacy,
[data-theme="dark"] .mp-feas__summary { background: var(--ux4g-color-neutral-800, #262626); }

/* =====================================================================================================
   6. Print
   ===================================================================================================== */
@media print { .mp-debug, .mp-modal { display: none; } }