/* ============================================================
   COI design tokens
   ------------------------------------------------------------
   The single source of truth for every visual value in the app.
   Brand hues are the approved Exxaro palette and may not grow.
   Semantic tokens map those hues to meaning; components consume
   tokens, never raw values. DesignTokenContractTests verifies
   the contrast of every status pair and that font sizes, radii,
   and shadows only ever reference this vocabulary.
   ============================================================ */

/* ===========================================================================
   Display typeface (feature 093)

   Self-hosted, three weights, latin subset, about 24 KB. Served from this
   application's own origin rather than a font CDN: nothing else here reaches
   outside at runtime, and the page that would carry the request is the one every
   employee meets before they have authenticated.

   `swap` rather than `optional`, because the masthead is the reason the face is
   here and it should arrive even on a slow first paint. The weights are preloaded
   in App.razor so that swap happens within the first frames rather than visibly.

   Licence and provenance sit beside the files in wwwroot/fonts.
   =========================================================================== */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Brand palette — the only permitted hue sources */
  --exxaro-lime: #aacf4e;
  --exxaro-lime-soft: #eef6da;
  --exxaro-green: #5e7320;
  --exxaro-blue: #418ab3;
  --exxaro-orange: #f69200;
  --exxaro-gold: #fec306;
  --exxaro-red: #df5327;
  --exxaro-brown: #3a2b26;
  --exxaro-muted: #5e5e5e;
  --exxaro-border: #dddddd;
  --exxaro-surface: #f1f0eb;
  /* Warm accent — a deepened tone of --exxaro-orange so accent text meets
     WCAG AA (≥4.5:1) on the page and card surfaces. */
  --exxaro-accent: #b04b00;

  /* Declaration surface: darker approved-green tones; the bounded texture
     remains AA-safe even if its brightest pixel is white. */
  --declaration-green-shade: color-mix(in srgb, var(--exxaro-green) 85%, var(--exxaro-brown));
  --declaration-green-deep: color-mix(in srgb, var(--exxaro-green) 62%, var(--ink));
  --declaration-texture-opacity: 0.12;
  --declaration-texture-size: 34rem;

  /* Reveal order for Home's area tiles. Each tile overrides it inline with
     its own index; the base value keeps the scoped sheet free of a literal
     fallback, which the token contract forbids. */
  --home-area-index: 0;

  /* Full supplied Studio identity: pixel width preserves size at enlarged type. */
  --studio-brand-width: 240px;
  --studio-credit-width: 120px;
  --white: #ffffff;
  --ink: #24211f;

  /* Neutral family — one warm ramp derived from the brand brown/ink */
  --neutral-50: #faf9f5;
  --neutral-100: #f0eee7;
  --neutral-200: #e7e3da;
  --neutral-400: #a39b91;
  --neutral-600: #5e5e5e;
  --neutral-800: #4a3c36;

  /* Semantic surfaces and text */
  --surface-page: var(--exxaro-surface);
  --surface-card: var(--white);
  --surface-subtle: var(--neutral-50);
  --surface-panel: var(--white);
  --surface-raised: #ffffff;
  --surface-inset: var(--neutral-50);
  --surface-card-hover: #fbfcf5;
  --border-subtle: var(--neutral-200);
  --border-strong: #b9afa5;
  --text-primary: var(--ink);
  --text-secondary: var(--neutral-800);
  --text-tertiary: var(--neutral-600);
  --text-placeholder: var(--neutral-400);

  /* Shared shell tones keep navigation authoritative without flattening the page. */
  --shell-sidebar: var(--exxaro-brown);
  --shell-sidebar-hover: #4a3931;
  --shell-sidebar-active: #55443a;
  --shell-sidebar-text: #f7f4ee;
  --shell-sidebar-muted: #d4cec7;
  --shell-sidebar-line: #6d625b;

  /* Dark appearance sources — warm tonal derivatives of the approved palette */
  --dark-surface-page: #171412;
  --dark-surface-card: #211d1b;
  --dark-surface-subtle: #1b1816;
  --dark-border-subtle: #6d625b;
  --dark-surface-panel: #27221f;
  --dark-surface-raised: #2e2824;
  --dark-surface-inset: #1d1917;
  --dark-surface-card-hover: #362e29;
  --dark-link-on-surface: #6bb0d6;
  --dark-border-strong: #8a7b70;
  --dark-shell-sidebar: #14110f;
  --dark-shell-sidebar-hover: #251f1b;
  --dark-shell-sidebar-active: #302821;
  --dark-shell-sidebar-text: #f7f4ee;
  --dark-shell-sidebar-muted: #cfc8c0;
  --dark-shell-sidebar-line: #4f443d;
  --dark-text-primary: #f7f4ee;
  --dark-text-secondary: #d4cec7;
  --dark-text-tertiary: #afa69e;
  --dark-text-placeholder: #8f867f;
  --dark-focus-ring: #79b8dc;
  --dark-status-success-fg: #cce681;
  --dark-status-success-bg: #29321f;
  --dark-status-success-border: #aacf4e;
  --dark-status-info-fg: #a9d8f2;
  --dark-status-info-bg: #1e303a;
  --dark-status-info-border: #62a8cf;
  --dark-status-warning-fg: #ffd27a;
  --dark-status-warning-bg: #392b17;
  --dark-status-warning-border: #f6a42f;
  --dark-status-danger-fg: #ffb29f;
  --dark-status-danger-bg: #3a211c;
  --dark-status-danger-border: #ed7656;
  --dark-status-neutral-fg: #ded8d1;
  --dark-status-neutral-bg: #302b28;
  --dark-status-neutral-border: #746860;

  /* Status pairs — every fg/bg pair is WCAG-AA verified in CI */
  --status-success-fg: var(--exxaro-green);
  --status-success-bg: var(--exxaro-lime-soft);
  --status-success-border: var(--exxaro-green);
  --status-info-fg: #245d7d;
  --status-info-bg: #f3f8fb;
  --status-info-border: var(--exxaro-blue);
  --status-warning-fg: #7b4800;
  --status-warning-bg: #fff4df;
  --status-warning-border: #d07800;
  --status-danger-fg: #9f341c;
  --status-danger-bg: #fff2ee;
  --status-danger-border: var(--exxaro-red);
  /* Prose link on a card/panel surface. --exxaro-blue is a brand fill,
     not a text colour: as text it measures 3.81:1 on the light card and
     4.13:1 on the dark one, under the 4.5:1 required for body text. */
  --link-on-surface: #2f6a8f;
  --status-neutral-fg: var(--neutral-800);
  --status-neutral-bg: var(--neutral-100);
  --status-neutral-border: var(--neutral-400);

  /* Type scale — the only permitted font sizes */
  --text-11: 0.6875rem;
  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;
  --text-15: 0.9375rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-28: clamp(var(--text-20), 3vw, 1.75rem);
  --text-32: 2rem;
  --text-36: 2.25rem;
  --text-display: clamp(2rem, 4.5vw, 3.5rem);
  --text-display-lg: clamp(2rem, 5vw, 3.8rem);

  /* Content measure — one comfortable reading column for every workspace page */
  --content-max: 1200px;
  --measure-lede: 46rem;

  /* Spacing rhythm — 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --questionnaire-tree-indent: var(--space-5);
  --questionnaire-tree-compact-indent: var(--space-3);

  /* Radius scale */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Elevation — layered, warm-tinted; depth means hierarchy, not decoration */
  --elevation-1: 0 1px 2px rgba(36, 33, 31, 0.05), 0 1px 3px rgba(36, 33, 31, 0.07);
  --elevation-2: 0 2px 4px rgba(36, 33, 31, 0.04), 0 8px 20px rgba(36, 33, 31, 0.08);
  --elevation-3: 0 6px 12px rgba(36, 33, 31, 0.07), 0 16px 36px rgba(36, 33, 31, 0.11);
  --elevation-4: 0 12px 24px rgba(36, 33, 31, 0.1), 0 32px 70px rgba(36, 33, 31, 0.18);
  --shadow: var(--elevation-2);

  /* Motion — one standard of pace and easing */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-smooth: 240ms;
  --duration-interactive: 150ms;
  --duration-motion: 280ms;
  --duration-ambient: 18s;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus — visible, consistent, ≥3:1 against surfaces */
  --focus-ring: var(--exxaro-blue);
  --focus-halo: 0 0 0 4px rgba(65, 138, 179, 0.2);

  /* Installed system faces keep the portal crisp without a remote font dependency. */
  --font-body: "Segoe UI Variable Text", "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Poppins", "Segoe UI Variable Display", "Aptos Display", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-page);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --exxaro-accent: var(--exxaro-orange);
  --surface-page: var(--dark-surface-page);
  --surface-card: var(--dark-surface-card);
  --surface-subtle: var(--dark-surface-subtle);
  --surface-panel: var(--dark-surface-panel);
  --surface-raised: var(--dark-surface-raised);
  --surface-inset: var(--dark-surface-inset);
  --surface-card-hover: var(--dark-surface-card-hover);
  --border-subtle: var(--dark-border-subtle);
  --border-strong: var(--dark-border-strong);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-tertiary: var(--dark-text-tertiary);
  --text-placeholder: var(--dark-text-placeholder);
  --link-on-surface: var(--dark-link-on-surface);
  --shell-sidebar: var(--dark-shell-sidebar);
  --shell-sidebar-hover: var(--dark-shell-sidebar-hover);
  --shell-sidebar-active: var(--dark-shell-sidebar-active);
  --shell-sidebar-text: var(--dark-shell-sidebar-text);
  --shell-sidebar-muted: var(--dark-shell-sidebar-muted);
  --shell-sidebar-line: var(--dark-shell-sidebar-line);
  --status-success-fg: var(--dark-status-success-fg);
  --status-success-bg: var(--dark-status-success-bg);
  --status-success-border: var(--dark-status-success-border);
  --status-info-fg: var(--dark-status-info-fg);
  --status-info-bg: var(--dark-status-info-bg);
  --status-info-border: var(--dark-status-info-border);
  --status-warning-fg: var(--dark-status-warning-fg);
  --status-warning-bg: var(--dark-status-warning-bg);
  --status-warning-border: var(--dark-status-warning-border);
  --status-danger-fg: var(--dark-status-danger-fg);
  --status-danger-bg: var(--dark-status-danger-bg);
  --status-danger-border: var(--dark-status-danger-border);
  --status-neutral-fg: var(--dark-status-neutral-fg);
  --status-neutral-bg: var(--dark-status-neutral-bg);
  --status-neutral-border: var(--dark-status-neutral-border);
  --focus-ring: var(--dark-focus-ring);
  --focus-halo: 0 0 0 4px rgba(121, 184, 220, 0.24);
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.3);
  --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.32);
  --elevation-3: 0 6px 12px rgba(0, 0, 0, 0.26), 0 16px 36px rgba(0, 0, 0, 0.38);
  --elevation-4: 0 12px 24px rgba(0, 0, 0, 0.32), 0 32px 70px rgba(0, 0, 0, 0.46);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--surface-page);
}

body {
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

a {
  color: inherit;
}

/* Release experience (spec 058) — static, readable support and change context. */
.release-experience-page {
  width: min(100% - (2 * var(--space-4)), 900px);
  margin: var(--space-8) auto;
  display: grid;
  gap: var(--space-6);
}

.release-return-link,
.release-history-nav a,
.build-identity-actions a {
  color: var(--status-info-fg);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.release-return-link:focus-visible,
.release-history-nav a:focus-visible,
.build-identity-actions a:focus-visible,
.support-card a:focus-visible,
.support-copy-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: var(--focus-halo);
}

.release-experience-heading,
.release-summary,
.support-card,
.release-help-prompt {
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.release-experience-heading h1,
.release-summary h2,
.support-card h2,
.release-help-prompt h2 {
  margin: 0;
}

.release-experience-heading p:last-child,
.release-summary header > p,
.support-card > p,
.release-help-prompt p {
  color: var(--text-secondary);
}

.release-eyebrow,
.release-version,
.support-reference-panel > p {
  margin: 0 0 var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.release-history-nav {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
}

.release-history-label {
  font-weight: 700;
}

.release-history-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.release-history-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-primary) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.release-history-link.selected {
  border-color: var(--status-info-border);
  background: var(--status-info-bg);
  color: var(--status-info-fg) !important;
}

.release-summary.current-release {
  border-color: var(--status-info-border);
  border-left: 4px solid var(--status-info-border);
  box-shadow: var(--elevation-1);
}

.release-uat-story {
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) var(--space-6);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--exxaro-lime) 38%, var(--border-subtle));
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--exxaro-lime) 22%, transparent) 0 54px, transparent 55px),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--status-info-bg) 74%, transparent) 0 72px, transparent 73px),
    var(--surface-subtle);
}

.release-uat-story-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

.release-uat-story-intro h2 {
  margin: 0;
  font-size: var(--text-28);
}

.release-uat-story-intro p:last-child {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
}

.release-uat-sunburst {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 8px solid color-mix(in srgb, var(--exxaro-lime) 32%, var(--surface-card));
  border-radius: var(--radius-round);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
  box-shadow: var(--elevation-1);
}

.release-uat-sunburst .semantic-icon::before {
  width: 28px;
  height: 28px;
}

.release-uat-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.release-uat-stop {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 88px;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.release-uat-stop:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: calc(-1 * var(--space-3));
  width: var(--space-3);
  height: 2px;
  background: var(--border-subtle);
  content: "";
}

.release-uat-stop-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.release-uat-stop-icon::before {
  width: 21px;
  height: 21px;
}

.release-uat-stop.improved .release-uat-stop-icon {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.release-uat-stop.fixed .release-uat-stop-icon {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.release-uat-stop-copy {
  display: grid;
  gap: 2px;
}

.release-uat-stop-copy strong {
  color: var(--text-primary);
  font-size: var(--text-14);
}

.release-uat-stop-copy span {
  color: var(--text-tertiary);
  font-size: var(--text-13);
}

.release-version {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.release-version strong {
  padding: 2px var(--space-2);
  border: 1px solid var(--status-info-border);
  border-radius: var(--radius-pill);
  color: var(--status-info-fg);
  background: var(--status-info-bg);
  font-size: var(--text-12);
}

.release-summary-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.release-story-icon,
.release-change-icon,
.release-callout > span {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
  font-size: var(--text-20);
  font-weight: 800;
}

.release-story-icon .semantic-icon::before,
.release-story-icon::before {
  width: 26px;
  height: 26px;
}

.release-story-icon {
  width: 52px;
  height: 52px;
  font-size: var(--text-24);
}

.release-change-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.release-change-group,
.release-callout {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.release-change-group > header,
.release-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.release-change-group.improved .release-change-icon {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.release-change-group.fixed .release-change-icon {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.release-change-icon::before {
  width: 22px;
  height: 22px;
}

.release-change-group h3,
.release-callout h3 {
  margin: 0;
  font-size: var(--text-16);
}

.release-change-group p {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-14);
}

.release-change-group ul,
.release-callout ul {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-4);
}

.release-callout.limitation {
  margin-top: var(--space-4);
  border-color: var(--status-warning-border);
  color: var(--status-warning-fg);
}

.release-callout.limitation > span {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.release-callout.action {
  margin-top: var(--space-4);
  border-color: var(--status-info-border);
  color: var(--status-info-fg);
}

.release-help-prompt {
  background: var(--surface-subtle);
}

.support-page {
  max-width: 760px;
}

.support-reference-panel {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: 1px solid var(--status-info-border);
  border-radius: var(--radius-md);
  background: var(--status-info-bg);
}

.support-reference-panel code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: var(--text-14);
}

.support-copy-button,
.support-email-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--status-info-border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--status-info-fg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.support-email-action {
  background: var(--status-info-fg);
  color: var(--surface-card);
}

.support-copy-status,
.support-address,
.support-safety-note {
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.security-support-card {
  border-color: var(--status-warning-border);
}

/* Support's first screen.
   ----------------------
   The page's own heading and the contact card's introduction said the same
   thing in sequence, which cost roughly 250 pixels before the first useful
   control. The header is now one line of context, the card leads with the
   reference, and the vertical rhythm inside the contact card is tightened so
   the reference, the email action and the safety instruction fit a 320 by 568
   viewport together. Type size and the 44-pixel controls are untouched: the
   space came out of repetition, not out of legibility. */
.support-heading-compact {
  padding: var(--space-3) var(--space-5);
}

.support-heading-compact h1 {
  font-size: var(--text-24);
}

.support-contact-card {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.support-contact-card .support-reference-panel {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
}

.support-contact-card .support-safety-note,
.support-contact-card .support-email-action {
  margin-top: var(--space-2);
}

.support-reference-row #support-reference-label {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: var(--text-13);
}

.support-reference-row .support-copy-status {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--text-13);
}

/* The reference and its copy control share a row and wrap together, instead of
   stacking a label, a value, a button and a status line into four bands before
   the reader reaches the action they came for. */
.support-reference-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.support-reference-row code {
  min-width: 0;
  flex: 1 1 12rem;
}

.support-contact-card .support-reference-row .support-copy-button {
  margin-top: 0;
}

.support-contact-card .support-copy-button,
.support-contact-card .support-email-action {
  margin-top: var(--space-3);
}

.support-contact-card > .support-safety-note {
  margin: var(--space-3) 0 0;
}

.support-route-card {
  padding: var(--space-4) var(--space-5);
}

.support-route-card h2 {
  font-size: var(--text-16);
}

.support-detail {
  margin-top: var(--space-3);
}

/* The template is a shape to fill in, so it stays selectable text and wraps
   rather than scrolling sideways on a phone. */
.support-template {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  overflow-wrap: anywhere;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-13);
  white-space: pre-wrap;
}

.support-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.support-address code {
  overflow-wrap: anywhere;
  color: var(--text-primary);
}

.support-safety-boundary {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-13);
}

.build-identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--text-12);
  font-size: var(--text-14);
}

@media (max-width: 640px) {
  .release-experience-page {
    width: min(100% - (2 * var(--space-3)), 900px);
    margin: var(--space-4) auto;
    gap: var(--space-4);
  }

  .release-experience-heading,
  .release-summary,
  .support-card,
  .release-help-prompt {
    padding: var(--space-4);
  }

  .release-summary-heading {
    align-items: flex-start;
  }

  .release-uat-story {
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
  }

  .release-uat-story-intro {
    align-items: flex-start;
  }

  .release-uat-sunburst {
    width: 56px;
    height: 56px;
    border-width: 6px;
  }

  .release-uat-sunburst .semantic-icon::before {
    width: 22px;
    height: 22px;
  }

  .release-uat-path {
    grid-template-columns: 1fr;
  }

  .release-uat-stop:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: calc(-1 * var(--space-3));
    left: 32px;
    width: 2px;
    height: var(--space-3);
  }

  .release-history-links {
    display: grid;
    grid-template-columns: 1fr;
  }

  .release-history-link {
    justify-content: center;
  }

  .release-change-list {
    grid-template-columns: 1fr;
  }

  .support-copy-button,
  .support-email-action {
    width: 100%;
    justify-content: center;
  }
}

/* Typographic voice: balanced headings with gentle optical tightening */
h1,
h2,
h3 {
  text-wrap: balance;
}

h1 {
  letter-spacing: -0.02em;
}

h2 {
  letter-spacing: -0.012em;
}

h3,
h4 {
  letter-spacing: -0.008em;
}

::selection {
  background: rgba(170, 207, 78, 0.35);
}

/* Metric values align digit-for-digit between sibling cards */
.metric-card strong,
.figma-metric strong,
.progress-summary strong {
  font-variant-numeric: tabular-nums;
}

/* Focus: one visible ring, everywhere the keyboard can land */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

[tabindex="-1"]:focus {
  outline: none;
}

/* Blazor's FocusOnNavigate adds tabindex="-1" to each route's h1 before
   focusing it. Keep that semantic focus move for assistive technology without
   letting page-scoped focus rules flash a ring around a non-interactive title. */
h1[tabindex="-1"]:focus {
  outline: none !important;
}

/* Motion: every interactive surface answers at one standard pace.
   :where() keeps specificity at zero so component rules always win. */
:where(a, button, summary, [role="button"], input, select, textarea) {
  transition:
    color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    outline-color var(--duration-fast) var(--ease-standard);
}

:where(button, .primary-action, .secondary-action, .sso-button, .login-submit, .action-tile, .figma-action-card):not([disabled], [data-future], .future-quiet):active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  button[data-future]:not(.future-quiet)::after,
  .future-group-chip,
  .capability-status,
  .theme-toggle-visual {
    border: 1px solid ButtonText;
  }

  .theme-toggle-visual {
    background: Canvas;
    box-shadow: none;
  }

  .theme-toggle-thumb {
    background: Highlight;
  }

  .theme-toggle-icon {
    color: ButtonText;
  }

  /* The selected icon sits on the Highlight thumb, so it needs the paired
     system foreground rather than the resting ButtonText. */
  .theme-toggle-option[aria-pressed="true"] .theme-toggle-icon {
    color: HighlightText;
  }
}

/* Exhaustive declaration-status tones and optional capture guidance (spec 047). */
.badge.draft {
  border-color: var(--status-neutral-border);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
}

.badge.submitted,
.badge.in-review {
  border-color: var(--status-info-border);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.badge.attention,
.badge.mitigation {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.badge.not-approved {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.declaration-optional-help {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--status-neutral-border);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

.declaration-question-guidance {
  margin-block: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.declaration-question-guidance > summary {
  display: list-item;
  min-height: calc(var(--space-10) + var(--space-1));
  padding-block: var(--space-3);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-14);
  font-weight: 600;
}

.declaration-question-guidance > summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: var(--focus-halo);
}

.declaration-question-guidance[open] > .declaration-optional-help {
  margin-block-end: var(--space-3);
}

.declaration-capture .related-parties-guide {
  margin-block-start: var(--space-4);
}

.employee-decision-support > summary {
  display: grid;
  min-height: calc(var(--space-10) + var(--space-10));
  align-items: center;
  gap: var(--space-4);
  grid-template-columns: var(--space-10) minmax(0, 1fr) var(--space-4);
  padding: var(--space-3) var(--space-2);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.employee-decision-support > summary::-webkit-details-marker {
  display: none;
}

.employee-decision-support > summary > span:nth-child(2),
.employee-decision-support-content {
  display: grid;
  gap: var(--space-2);
}

.employee-decision-support > summary strong,
.employee-decision-support > summary small {
  display: block;
}

.employee-decision-support > summary strong {
  color: var(--text-primary);
  font-size: var(--text-14);
}

.employee-decision-support > summary small {
  color: var(--text-tertiary);
  font-size: var(--text-12);
}

.employee-decision-support[open] .employee-guidance-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.employee-decision-support-content {
  gap: var(--space-6);
  padding: 0 var(--space-2) var(--space-6);
}

/* Mobile account-action parity (spec 047). */
.mobile-account-actions {
  display: none;
}

.mobile-account-actions form {
  margin: 0;
}

.mobile-profile-link,
.mobile-signout-button {
  display: inline-flex;
  min-height: calc(var(--space-10) + var(--space-1));
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-13);
  font-weight: 600;
  text-decoration: none;
}

.mobile-signout-button {
  cursor: pointer;
}

.mobile-profile-link:focus-visible,
.mobile-signout-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: var(--focus-halo);
}

@media (max-width: 640px) {
  .mobile-profile-link > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (forced-colors: active) {
  .mobile-profile-link,
  .mobile-signout-button {
    border-color: ButtonText;
  }
}

.sr-only,
.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Appearance control — shared by anonymous and authenticated layouts.
   It stays hidden if the progressive-enhancement initializer cannot run. */
html:not([data-theme-ready]) .theme-toggle {
  display: none;
}

.theme-toggle {
  position: relative;
  display: inline-grid;
  min-width: 132px;
  min-height: 44px;
  flex: 0 0 auto;
  place-items: center;
  grid-template-columns: repeat(3, 44px);
}

.theme-toggle-visual {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 32px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
  transform: translateY(-50%);
}

/* Exactly one third of the track, so the three resting places are whole
   multiples of the thumb's own width and stay aligned at any track size. */
.theme-toggle-thumb {
  position: absolute;
  z-index: 0;
  top: 2px;
  left: 2px;
  width: calc((100% - 4px) / 3);
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--text-primary);
  transform: translateX(0);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

:root[data-theme-choice="system"] .theme-toggle-thumb {
  transform: translateX(100%);
}

:root[data-theme-choice="dark"] .theme-toggle-thumb {
  transform: translateX(200%);
}

/* Each choice is a standalone control, so it carries the feature's 44 x 44
   target in both dimensions rather than only in height. The track and thumb are
   sized in percentages, so widening the option widens them with it. */
.theme-toggle-option {
  position: relative;
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  place-items: center;
}

/* The selected option sits on the thumb, so it reads against that fill
   rather than the track. */
.theme-toggle-option[aria-pressed="true"] {
  color: var(--surface-card);
}

.theme-toggle-icon {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.theme-toggle:hover .theme-toggle-visual {
  border-color: var(--exxaro-lime);
  box-shadow: var(--elevation-2);
}

.empty-layout-theme-control {
  position: fixed;
  z-index: 50;
  top: var(--space-5);
  right: var(--space-5);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-frame {
  position: relative;
  display: grid;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  grid-template-columns: 256px minmax(0, 1fr);
  background: var(--surface-subtle);
}

.app-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--neutral-800);
  color: var(--white);
}

/* Mobile-only compact app bar. Hidden by default (desktop/tablet keep the rail
   and .app-header); shown in its own rule below the 760px mobile shell block. */
.app-topbar {
  display: none;
}

.brand-panel {
  display: flex;
  align-items: center;
  height: 96px;
  min-height: 96px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--neutral-800);
}

.brand-panel img {
  display: block;
  width: 150px;
  max-height: 64px;
  height: auto;
  object-fit: contain;
}

.workspace-label {
  padding: 18px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.workspace-label span {
  display: block;
  color: var(--exxaro-lime);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-label strong {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--text-15);
}

.workspace-label small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--text-12);
  line-height: 1.35;
}

.side-nav {
  display: grid;
  gap: 4px;
  padding: 18px 16px 16px;
}

.mobile-navigation-toggle {
  display: none;
}

.nav-section-title {
  display: none;
  margin: 14px 8px 4px;
  color: var(--exxaro-lime);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.side-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 41px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--text-15);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.side-nav-link:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.side-nav-link.active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

.side-nav-link.active::before {
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--exxaro-lime);
  content: "";
}

.side-nav-link.active .nav-icon {
  color: var(--exxaro-lime);
}

.nav-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.icon-dashboard {
  --icon-url: url("images/icons/layout-dashboard.svg");
}

.icon-file {
  --icon-url: url("images/icons/file-text.svg");
}

.icon-scroll {
  --icon-url: url("images/icons/scroll-text.svg");
}

.icon-gift {
  --icon-url: url("images/icons/gift.svg");
}

.icon-warning {
  --icon-url: url("images/icons/message-square-warning.svg");
}

.icon-inbox {
  --icon-url: url("images/icons/inbox.svg");
}

.icon-rocket {
  --icon-url: url("images/icons/rocket.svg");
}

.icon-book {
  --icon-url: url("images/icons/book-open.svg");
}

.icon-user {
  --icon-url: url("images/icons/user.svg");
}

.icon-building {
  --icon-url: url("images/icons/building-2.svg");
}

.icon-bell {
  --icon-url: url("images/icons/bell.svg");
}

.icon-menu {
  --icon-url: url("images/icons/menu.svg");
}

.icon-log-out {
  --icon-url: url("images/icons/log-out.svg");
}

.icon-shield {
  --icon-url: url("images/icons/shield-check.svg");
}

.icon-pencil {
  --icon-url: url("images/icons/pencil.svg");
}

/* The two figures from the Exxaro wordmark: a circle and a crossed stroke each,
   traced from the supplied artwork rather than cropped from it, so the shape
   takes currentColor and stays sharp at any size. It is the brand's own symbol
   for people, which is what this product is about. */
.icon-exxaro-mark {
  --icon-url: url("images/icons/exxaro-mark.svg");
}

.sidebar-footer {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.86);
}

.profile-row {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.sidebar-footer strong {
  display: block;
  color: var(--white);
  font-size: var(--text-15);
  line-height: 1.2;
}

.sidebar-footer a,
.org-pill {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--text-13);
  text-decoration: none;
}

.sidebar-footer a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-summary-link {
  display: grid;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.64);
  text-decoration: none;
}

.profile-summary-link:hover {
  color: var(--white);
  text-decoration: none;
}

.profile-summary-link:focus-visible {
  outline: 2px solid var(--exxaro-lime);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.profile-copy {
  min-width: 0;
}

.profile-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signout-link {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.signout-link:hover,
.signout-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.signout-link:focus-visible {
  outline: 2px solid var(--exxaro-lime);
  outline-offset: 3px;
}

.org-pill {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
}

.org-pill span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-summary-link .nav-icon {
  width: 18px;
  height: 18px;
}

.avatar-mark,
.person-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
  font-size: var(--text-13);
  font-weight: 600;
}

.app-workspace {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 0;
  overflow: hidden;
  background: var(--surface-subtle);
}

.prototype-experience-banner {
  display: flex;
  z-index: 11;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  flex: 0 0 auto;
  padding: 6px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-tertiary);
}

.prototype-experience-banner .nav-icon {
  width: 15px;
  height: 15px;
  color: var(--status-warning-fg);
}

.prototype-experience-banner > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex: 1 1 auto;
  gap: 8px;
}

.prototype-experience-banner strong {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: var(--text-12);
  font-weight: 600;
}

.prototype-experience-banner span {
  font-size: var(--text-12);
  line-height: 1.35;
}

.prototype-experience-banner a {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: var(--text-12);
  font-weight: 600;
  text-underline-offset: 3px;
}

.emergency-access-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  padding: 0.75rem 1.5rem;
  border-block: 2px solid #8a2d00;
  color: #2b1207;
  background: #ffd8bf;
}

.emergency-access-banner strong {
  font-weight: 800;
}

@media (forced-colors: active) {
  .emergency-access-banner {
    border-color: Highlight;
  }
}

.app-header {
  display: flex;
  z-index: 10;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  flex: 0 0 auto;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.app-header p,
.app-header h2 {
  margin: 0;
}

.app-header p {
  color: var(--text-tertiary);
  font-size: var(--text-13);
  font-weight: 400;
  line-height: 1.2;
}

.app-header h2 {
  margin-top: 2px;
  color: var(--text-primary);
  font-size: var(--text-16);
  font-weight: 600;
  line-height: 1.3;
}

.header-title {
  min-width: 0;
  flex: 1 1 auto;
}

.header-workspace-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-13);
  font-weight: 600;
  padding: 7px 12px;
  text-decoration: none;
}

.header-workspace-link:hover {
  border-color: var(--text-placeholder);
  background: var(--surface-subtle);
  color: var(--text-primary);
}

.header-workspace-link .nav-icon {
  width: 16px;
  height: 16px;
}

.header-session-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  min-height: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--text-12);
  font-weight: 600;
  padding: 5px 10px;
}

.header-session-badge > span {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-round);
  background: var(--exxaro-green);
}

.header-icon-button {
  display: inline-grid;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  text-decoration: none;
}

.header-icon-button:hover {
  background: var(--status-neutral-bg);
  color: var(--text-secondary);
}

.notification-button {
  margin-left: auto;
}

.notification-button .status-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  border: 2px solid var(--white);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--exxaro-lime);
}

.login-page {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: start center;
  padding: clamp(24px, 6vh, 48px) 20px 34px;
  background:
    linear-gradient(180deg, rgba(18, 22, 18, 0.52) 0%, rgba(22, 25, 19, 0.66) 52%, rgba(14, 18, 12, 0.84) 100%),
    url("images/login-mine-backdrop.jpg") center / cover no-repeat fixed,
    linear-gradient(45deg, var(--exxaro-brown) 0%, var(--exxaro-green) 100%);
}

.login-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 560px);
  gap: 18px;
  justify-items: center;
}

.login-panel.conditional {
  width: min(100%, 640px);
}

.login-brand {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 1px;
}

.login-brand img {
  width: min(100%, 246px);
  height: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.24));
}

.login-copy {
  display: grid;
  gap: 10px;
  margin-top: -14px;
  max-width: 456px;
  text-align: center;
}

.login-copy h1,
.login-copy p {
  margin: 0;
}

/* The portal's name is now the whole heading, so it is set as a masthead rather
   than as a run of body copy that happens to be large.

   Display face, because that is what it is drawn for. Weight 700, because at this
   size 600 reads as merely large. Tracking pulled to -0.02em: type set for text
   carries spacing that is correct at 16px and looks slack at 32, and closing it
   is what makes a heading look drawn rather than typed. Leading tightened to 1.05
   for the same reason, since the default 1.2 leaves two lines of a single name
   floating apart. Balanced so "Conflict of / Interest Portal" stops reading as
   two fragments. */
.login-copy h1 {
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--text-36);
  font-weight: 700;
  line-height: 1.08;
  /* The same -0.025em the brand headline opposite uses. Matching it is what
     makes the two sides read as one masthead rather than two headings that
     happen to share a page. */
  letter-spacing: -0.025em;
  max-width: 12em;
  text-wrap: balance;
}

/* A short lime keyline above the name, the same device the entry card wears on
   its top edge and the brand panel on its foot. It costs one rule and ties the
   heading to the surface beneath it instead of leaving it floating. */
/* The eyebrow does the work the keyline was standing in for, so the keyline
   goes. Two devices announcing one heading is one device too many. */

/* The whole name takes the brand accent, not one word of it.

   It is one colour in the sense that matters, and it cannot be one hex. Measured
   on the light page surface, --exxaro-lime lands at 1.56:1, which is not dim, it
   is unreadable. The deep green is 4.64:1 there; on the dark surface the green
   drops to 3.51:1 while the lime reaches 10.45:1. So the accent resolves per
   theme, which is the same thing --status-success-fg does elsewhere in this file
   and for the same reason: one brand colour, two surfaces, and neither of them
   allowed to swallow it. */

.login-copy p {
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--text-16);
  line-height: 1.54;
}

.login-copy .login-eyebrow {
  color: var(--exxaro-lime);
  font-size: var(--text-12);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.login-card {
  display: grid;
  width: 100%;
  gap: 15px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--elevation-3);
}

.sso-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  gap: 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(20, 22, 21, 0.97);
  color: var(--white);
  cursor: pointer;
  font: inherit;
  padding: 12px 18px 12px 20px;
  text-align: left;
  text-decoration: none;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  box-shadow: var(--elevation-2);
}

.sso-button:hover {
  box-shadow: var(--elevation-3);
  transform: translateY(-1px);
}

.sso-button:focus-visible,
.login-submit:focus-visible {
  outline: 3px solid var(--exxaro-lime);
  outline-offset: 4px;
}

/* One row: the provider mark says whose sign-in this is, so the label only
   has to say what pressing it does. */
.sso-label {
  min-width: 0;
  font-size: var(--text-16);
  font-weight: 600;
}

.sso-arrow {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-20);
}

.login-register-copy {
  margin: -4px 0 3px;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--text-15);
  text-align: center;
}

.authenticated-landing {
  display: grid;
  width: min(100%, 54rem);
  gap: 18px;
}

.authenticated-landing h1,
.authenticated-landing p {
  margin: 0;
}

.authenticated-boundary {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--exxaro-lime);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  padding: 20px;
}

.authenticated-boundary strong {
  color: var(--status-success-fg);
}

.authenticated-route-status {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--exxaro-blue);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  padding: 16px 18px;
}

.authenticated-route-status strong {
  color: var(--status-info-fg);
}

.authenticated-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.interim-auth-banner {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 8px 14px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius-lg);
  background: rgba(18, 25, 18, 0.72);
  color: var(--white);
  padding: 12px 16px;
  text-align: center;
}

.interim-auth-banner strong {
  color: var(--exxaro-lime);
}

.auth-method-switcher {
  display: grid;
  width: 100%;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-lg);
  background: rgba(12, 18, 15, 0.55);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 6px;
  box-shadow: var(--elevation-3);
  backdrop-filter: blur(18px);
}

.auth-method-option {
  display: grid;
  min-width: 0;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.82);
  padding: 12px 14px;
  text-decoration: none;
  transition:
    background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.auth-method-option:hover {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  transform: translateY(-1px);
}

.auth-method-option.active {
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.97);
  color: var(--text-primary);
  box-shadow: var(--elevation-2);
}

.auth-method-option:focus-visible,
.auth-transition-details summary:focus-visible,
.synthetic-account-creator summary:focus-visible,
.login-method-action:focus-visible {
  outline: 3px solid var(--exxaro-lime);
  outline-offset: 3px;
}

.auth-method-option > span:first-child {
  display: grid;
  gap: 2px;
}

.auth-method-option strong,
.auth-method-option small {
  overflow-wrap: anywhere;
}

.auth-method-option strong {
  font-size: var(--text-15);
}

.auth-method-option small {
  color: inherit;
  font-size: var(--text-12);
  opacity: 0.76;
}

.auth-method-option .auth-lifecycle-badge {
  justify-self: start;
}

.auth-method-panel {
  display: grid;
  width: 100%;
  gap: 17px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.97);
  color: var(--text-secondary);
  padding: 28px;
  box-shadow: var(--elevation-3);
}

.auth-method-panel > p,
.auth-route-heading h2,
.auth-route-heading p {
  margin: 0;
}

.auth-method-panel > p {
  font-size: var(--text-15);
  line-height: 1.55;
}

.auth-route-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: space-between;
}

.auth-route-heading h2 {
  color: var(--text-primary);
  font-size: var(--text-20);
  line-height: 1.2;
}

.auth-method-panel .login-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  box-shadow: none;
  padding: 19px;
}

.auth-method-panel .sso-button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 22, 21, 0.98);
  box-shadow: var(--elevation-2);
}

.auth-inline-status {
  display: grid;
  gap: 4px;
  border-left: 3px solid var(--exxaro-lime);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--status-success-bg);
  color: var(--text-secondary);
  padding: 12px 14px;
}

.auth-inline-status strong {
  color: var(--status-success-fg);
}

.auth-inline-status span {
  font-size: var(--text-13);
  line-height: 1.45;
}

.login-method-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--exxaro-green);
  border-radius: var(--radius-md);
  color: var(--status-success-fg);
  font-size: var(--text-14);
  font-weight: 600;
  padding: 10px 18px;
  text-decoration: none;
}

.login-method-action:hover {
  background: var(--status-success-bg);
}

.auth-transition-details {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-lg);
  background: rgba(13, 20, 16, 0.55);
  color: rgba(255, 255, 255, 0.86);
  padding: 0 16px;
  backdrop-filter: blur(18px);
}

.auth-transition-details summary {
  cursor: pointer;
  color: var(--white);
  font-size: var(--text-14);
  font-weight: 600;
  padding: 13px 0;
}

.auth-transition-details > div {
  display: grid;
  gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 13px 0 15px;
}

.auth-transition-details p {
  margin: 0;
  font-size: var(--text-13);
  line-height: 1.5;
}

.auth-transition-details strong {
  color: var(--exxaro-lime);
}

.auth-choice-list {
  display: grid;
  width: 100%;
  align-items: start;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-choice-card {
  display: grid;
  min-width: 0;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--elevation-4);
  padding: 24px;
}

.auth-choice-card.auth-choice-primary {
  border-color: var(--exxaro-lime);
  box-shadow: var(--elevation-4);
}

.auth-choice-card > p,
.auth-choice-heading h2,
.auth-choice-heading p {
  margin: 0;
}

.auth-choice-card > p {
  min-height: 4.7em;
  color: var(--text-secondary);
  font-size: var(--text-15);
  line-height: 1.55;
}

.auth-choice-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
}

.auth-choice-heading h2 {
  color: var(--text-primary);
  font-size: var(--text-20);
  line-height: 1.25;
}

.auth-lifecycle-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-size: var(--text-11);
  font-weight: 600;
  padding: 4px 10px;
  white-space: nowrap;
}

.auth-lifecycle-badge.development {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.auth-lifecycle-badge.current {
  border-color: var(--status-info-border);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.auth-lifecycle-badge.setup {
  border-color: var(--status-neutral-border);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
}

.auth-choice-card .login-card {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  box-shadow: none;
  padding: 18px;
}

.auth-choice-card .sso-button {
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  box-shadow: none;
}

.auth-unavailable {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  padding: 17px 18px;
}

.auth-unavailable strong {
  color: var(--text-primary);
}

.auth-unavailable span {
  font-size: var(--text-14);
  line-height: 1.45;
}

.login-transition-note {
  margin: 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-14);
  line-height: 1.5;
  text-align: center;
}

.authentication-reference {
  margin-top: 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--exxaro-lime);
  background: rgba(196, 214, 0, 0.1);
  overflow-wrap: anywhere;
}

.demo-account-panel {
  display: grid;
  gap: 6px;
  margin-top: 3px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 15px;
}

.demo-heading {
  margin: 0 0 8px;
  color: var(--text-tertiary);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-account-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--text-primary);
  font-size: var(--text-13);
  line-height: 1.35;
  text-decoration: none;
}

.demo-account-row strong {
  color: var(--text-primary);
  font-weight: 600;
}

.demo-account-row strong::after {
  color: var(--text-primary);
  content: " \2014";
  font-weight: 500;
}

.demo-account-row span {
  color: var(--text-secondary);
}

.demo-account-row:hover {
  color: var(--status-success-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.microsoft-mark {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

/* Sized from the text it sits beside, so it stays correct at any zoom or user
   font size rather than at one fixed pixel value. */
/* The notice band sizes its icon slot; the mark takes the same footprint so the
   band's rhythm is unchanged whichever mark it carries. */
/* The base mark already centres its child in the chip; only the mark's own size
   needs to match the icons in the sibling cards. */
.help-boundary-mark--microsoft .microsoft-mark {
  width: var(--space-5);
  height: var(--space-5);
}

.notice-icon--microsoft {
  display: inline-grid;
  place-items: center;
}

/* Centred by the container, which is deterministic and font-independent. */
.credential-custodian {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
}

/* Sized in em so it tracks the text at any zoom or user font size.

   No vertical-align: the mark is a grid of four empty cells, so it has no baseline
   of its own and the browser synthesizes one at its bottom edge. Aligning to that
   put it below the text, and tuning the offset only moved the error around. Every
   place it sits beside text, the container centres it instead. */
/* The mark is four empty grid cells, so it has no text baseline of its own and the
   browser synthesises one from its bottom edge. Left alone it hangs about half its
   own height below the baseline of the sentence it sits in. `middle` is defined
   against the parent's x-height rather than a fixed offset, so the mark centres on
   the lowercase text at any font or zoom. It is inert where a flex container already
   centres the mark, which is how the icon-slot usages align. */
.microsoft-mark--inline {
  display: inline-grid;
  width: 0.875em;
  height: 0.875em;
  gap: 0.0625em;
  vertical-align: middle;
}

.microsoft-mark span:nth-child(1) {
  background: #f25022;
}

.microsoft-mark span:nth-child(2) {
  background: #7fba00;
}

.microsoft-mark span:nth-child(3) {
  background: #00a4ef;
}

.microsoft-mark span:nth-child(4) {
  background: #ffb900;
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label {
  color: var(--text-primary);
  font-size: var(--text-14);
  font-weight: 600;
}

.form-field input {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--text-primary);
  font: inherit;
  padding: 0 14px;
}

.form-field select {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--text-primary);
  font: inherit;
  padding: 0 14px;
}

.form-field input::placeholder {
  color: var(--text-placeholder);
}

.form-field input:hover,
.form-field input:focus {
  border-color: var(--text-placeholder);
  background: var(--surface-card);
}

.form-field input:focus-visible {
  outline: 3px solid rgba(170, 207, 78, 0.48);
  outline-offset: 2px;
}

.form-field select:focus-visible {
  outline: 3px solid rgba(170, 207, 78, 0.48);
  outline-offset: 2px;
}

.synthetic-account-creator {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  padding: 0 14px;
}

.synthetic-account-creator summary {
  display: grid;
  gap: 2px;
  color: var(--status-success-fg);
  cursor: pointer;
  font-size: var(--text-14);
  font-weight: 600;
  padding: 12px 0;
}

.synthetic-account-creator summary:focus-visible {
  outline: 3px solid rgba(170, 207, 78, 0.48);
  outline-offset: 3px;
}

.synthetic-account-creator > div {
  display: grid;
  gap: 13px;
  border-top: 1px solid var(--border-subtle);
  padding: 14px 0;
}

.synthetic-account-creator summary small {
  color: var(--text-tertiary);
  font-size: var(--text-12);
  font-weight: 500;
}

.synthetic-account-creator h3,
.synthetic-account-creator > div > p {
  margin: 0;
}

.synthetic-account-creator h3 {
  color: var(--text-primary);
  font-size: var(--text-16);
}

.synthetic-account-creator > div > p {
  color: var(--text-tertiary);
  font-size: var(--text-14);
  line-height: 1.5;
}

.synthetic-account-creator form {
  display: grid;
  gap: 13px;
}

.prototype-workspace-page,
.board-home-page {
  display: grid;
  width: min(100%, var(--content-max));
  gap: 24px;
  margin: 0 auto;
}

.prototype-choice-grid {
  display: grid;
  align-items: stretch;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prototype-choice-card {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
  padding: 22px;
}

.prototype-choice-card h2,
.prototype-choice-card p {
  margin: 0;
}

.prototype-choice-card > p:not(.eyebrow) {
  flex: 1 1 auto;
  color: var(--text-tertiary);
  line-height: 1.55;
}

.prototype-choice-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius-sm);
  background-color: var(--status-success-bg);
  color: var(--status-success-fg);
}

.prototype-choice-icon::before {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
  content: "";
}

.prototype-persistence-link {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--exxaro-blue);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  padding: 22px;
}

.prototype-persistence-link h2,
.prototype-persistence-link p {
  margin: 0;
}

.prototype-persistence-link h2 {
  margin-bottom: 6px;
}

.board-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.persistence-playground {
  display: grid;
  width: min(100%, var(--content-max));
  gap: var(--space-8);
  margin: 0 auto;
}

.playground-safety-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--exxaro-blue);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  padding: 18px 20px;
}

.playground-safety-note h2,
.playground-safety-note p {
  margin: 0;
}

.playground-safety-note h2 {
  margin-bottom: 5px;
  color: var(--status-info-fg);
  font-size: var(--text-16);
}

.field-help {
  margin: var(--space-2) 0 0;
  color: var(--text-tertiary);
  font-size: var(--text-12);
  line-height: 1.45;
}

/* ============================================================
   Operation feedback — one voice for outcomes (FlashNotice)
   ------------------------------------------------------------
   Rendered by Components/Feedback/FlashNotice.razor after every
   POST-redirect-GET operation. Same callout language as the rest
   of the app: quiet card, hairline border, semantic left rail.
   ============================================================ */

.feedback-next-action {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 36px;
  margin-top: calc(0px - var(--space-6));
  color: var(--status-info-fg);
  font-size: var(--text-13);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--neutral-800);
  color: var(--white);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.login-submit:hover {
  background: var(--ink);
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

.login-links {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 12px;
  align-items: center;
  margin-top: 2px;
}

.login-links span,
.login-links a {
  font-size: var(--text-13);
}

.login-links span {
  color: var(--text-secondary);
}

.login-links a {
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
}

.login-links a:hover {
  color: var(--status-success-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-policy {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-13);
  text-align: center;
}

.local-auth-banner {
  display: grid;
  width: 100%;
  gap: 2px;
  border: 1px solid rgba(170, 207, 78, 0.8);
  border-radius: var(--radius-lg);
  background: rgba(22, 30, 22, 0.86);
  color: var(--white);
  padding: 12px 16px;
  text-align: center;
}

.local-auth-banner strong {
  color: var(--exxaro-lime);
  font-size: var(--text-14);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.local-auth-banner span {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-13);
}

.local-auth-error {
  margin: 0;
  border-left: 3px solid var(--exxaro-red);
  border-radius: var(--radius-sm);
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  padding: 10px 12px;
  font-size: var(--text-14);
}

.persona-id {
  font-family: "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.04em;
}

.app-shell {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: clamp(24px, 2.6vw, 40px);
  background: var(--surface-subtle);
}

.employee-home-page {
  display: grid;
  width: 100%;
  max-width: var(--content-max);
  gap: 32px;
  margin: 0 auto;
}

.employee-home-heading {
  display: grid;
  gap: 8px;
}

.employee-home-heading h1,
.employee-home-heading p,
.employee-kicker {
  margin: 0;
}

.employee-kicker {
  color: var(--text-tertiary);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.employee-home-heading h1 {
  color: var(--text-primary);
  font-size: var(--text-24);
  font-weight: 600;
  line-height: 1.33;
}

.employee-home-heading p {
  max-width: min(100%, var(--measure-lede));
  color: var(--text-tertiary);
  font-size: var(--text-16);
  line-height: 1.5;
}

.employee-intro-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.intro-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--exxaro-lime);
}

.intro-card-body {
  padding: 32px;
}

.intro-card-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.intro-card-heading h2 {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-20);
  font-weight: 500;
  line-height: 1.4;
}

.intro-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  font-weight: 600;
}

.intro-copy {
  display: grid;
  max-width: 56rem;
  gap: 16px;
  color: var(--text-secondary);
  font-size: var(--text-15);
  line-height: 1.55;
}

.intro-copy p,
.intro-copy ul {
  margin: 0;
}

.intro-copy ul {
  display: grid;
  gap: 8px;
  padding-left: 20px;
}

.intro-copy strong {
  color: var(--text-secondary);
}

.intro-image-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.intro-image-wrap img {
  width: min(100%, 24rem);
  height: auto;
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-1);
}

.employee-status-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius-lg);
  color: var(--white);
  background: var(--neutral-800);
}

.employee-status-card p,
.employee-status-card h2,
.employee-status-card span {
  margin: 0;
}

.employee-status-card p {
  color: var(--exxaro-lime);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.employee-status-card h2 {
  margin-top: 4px;
  font-size: var(--text-18);
  font-weight: 400;
}

.employee-status-card span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-15);
}

.employee-status-icon {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
}

.employee-status-icon::before,
.employee-action-icon::before,
.employee-pencil::before {
  display: block;
  background: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
  content: "";
}

.employee-status-icon::before {
  width: 20px;
  height: 20px;
}

.employee-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 16px;
}

.employee-action-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.employee-action-card:hover {
  border-color: rgba(165, 207, 76, 0.65);
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

.employee-action-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.employee-action-icon::before,
.employee-pencil::before {
  width: 16px;
  height: 16px;
}

.employee-action-card strong {
  color: var(--text-secondary);
  font-weight: 500;
}

.employee-action-card p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-15);
}

.employee-action-link {
  color: rgba(74, 60, 54, 0.72);
  font-size: var(--text-13);
  transition: color var(--duration-base) var(--ease-standard);
}

.employee-action-card:hover .employee-action-link {
  color: var(--text-secondary);
}

.employee-recent {
  display: grid;
  gap: 12px;
}

.employee-recent h2 {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-20);
  font-weight: 500;
}

.employee-declaration-list {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.employee-declaration-row {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  padding: 20px;
}

.employee-declaration-row + .employee-declaration-row {
  border-top: 1px solid var(--neutral-100);
}

.employee-declaration-row h3,
.employee-declaration-row p {
  margin: 0;
}

.employee-declaration-row h3 {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-15);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-declaration-row p {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--text-12);
}

.employee-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-12);
  white-space: nowrap;
}

.employee-status-pill.in-review {
  background: var(--status-success-bg);
  color: var(--text-secondary);
}

.employee-status-pill.approved {
  background: rgba(165, 207, 76, 0.3);
  color: var(--text-secondary);
}

.employee-amend-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(165, 207, 76, 0.4);
  border-radius: var(--radius-pill);
  background: rgba(165, 207, 76, 0.15);
  color: var(--text-secondary);
  font-size: var(--text-12);
  font-weight: 600;
  text-decoration: none;
}

.employee-amend-link:hover {
  background: rgba(165, 207, 76, 0.3);
}

.employee-pencil {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  --icon-url: url("images/icons/pencil.svg");
}

.employee-declare-page {
  display: grid;
  width: 100%;
  max-width: var(--content-max);
  gap: 32px;
  margin: 0 auto;
}

.employee-declare-heading {
  display: grid;
  gap: 4px;
}

.employee-declare-heading h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-24);
  font-weight: 600;
  line-height: 1.33;
}

.employee-declare-guidance,
.employee-amend-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
}

.employee-declare-guidance {
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--exxaro-lime);
  background: var(--surface-card);
  color: var(--text-secondary);
}

.employee-amend-notice {
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--status-warning-border);
  background: var(--surface-card);
  color: var(--text-secondary);
}

.employee-declare-guidance p,
.employee-amend-notice p,
.employee-amend-notice span {
  margin: 0;
}

.employee-declare-guidance p,
.employee-amend-notice span {
  font-size: var(--text-15);
  line-height: 1.5;
}

.employee-amend-notice p {
  color: var(--status-warning-fg);
  font-size: var(--text-15);
  font-weight: 600;
}

.declare-info-icon,
.employee-amend-icon {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  margin-top: 2px;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--text-11);
  font-weight: 600;
  line-height: 1;
}

.declare-section-stack {
  display: grid;
  gap: 16px;
}

.declare-accordion {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.declare-accordion.is-locked {
  border-color: var(--neutral-100);
  opacity: 0.7;
}

.declare-accordion-summary {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 16px;
  padding: 20px 24px;
  border: 0;
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-16);
  font-weight: 500;
  text-align: left;
  transition: background var(--duration-base) var(--ease-standard);
}

.declare-accordion.is-open .declare-accordion-summary {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
}

.declare-accordion-summary:disabled {
  color: var(--text-placeholder);
  cursor: not-allowed;
}

.declare-step {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-pill);
  font-size: var(--text-12);
  font-weight: 600;
}

.declare-step.is-active {
  background: var(--neutral-800);
  color: var(--white);
}

.declare-step.is-locked {
  background: var(--status-neutral-bg);
  color: var(--text-placeholder);
}

.declare-chevron,
.declare-lock {
  flex: 0 0 auto;
  margin-left: auto;
}

.declare-chevron {
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--text-placeholder);
  border-left: 2px solid var(--text-placeholder);
  transform: rotate(45deg);
}

.declare-lock {
  position: relative;
  width: 16px;
  height: 16px;
  color: var(--text-placeholder);
}

.declare-lock::before,
.declare-lock::after {
  position: absolute;
  content: "";
}

.declare-lock::before {
  inset: 7px 2px 2px;
  border: 2px solid currentColor;
  border-radius: var(--radius-xs);
}

.declare-lock::after {
  left: 5px;
  top: 1px;
  width: 6px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
}

.declare-section-body {
  display: grid;
  gap: 24px;
  padding: 24px;
  background: var(--surface-subtle);
}

.declare-question-card {
  display: grid;
  gap: 22px;
  padding: 24px 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: var(--text-16);
  line-height: 1.5;
}

.declare-question-card p {
  margin: 0;
}

.declare-required {
  color: var(--exxaro-red);
}

.declare-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.declare-choice,
.declare-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-15);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.declare-choice {
  min-width: 64px;
  min-height: 38px;
  padding: 0 20px;
  color: var(--text-secondary);
}

.declare-choice:hover {
  border-color: var(--text-secondary);
}

.declare-section-actions {
  display: flex;
  justify-content: flex-end;
}

.declare-next {
  min-height: 40px;
  padding: 0 28px;
  border-color: var(--text-secondary);
  background: var(--neutral-800);
  color: var(--white);
  font-weight: 600;
}

.declare-next:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

.employee-history-page {
  display: grid;
  width: 100%;
  max-width: var(--content-max);
  gap: 16px;
  margin: 0 auto;
}

.employee-history-heading {
  display: grid;
  gap: 8px;
}

.employee-history-heading h1,
.employee-history-heading p {
  margin: 0;
}

.employee-history-heading h1 {
  color: var(--text-primary);
  font-size: var(--text-24);
  font-weight: 600;
  line-height: 1.33;
}

.employee-history-heading p {
  max-width: min(100%, var(--measure-lede));
  color: var(--text-tertiary);
  font-size: var(--text-16);
  line-height: 1.5;
}

.history-workspace {
  display: grid;
  gap: 16px;
}

.history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.history-search {
  position: relative;
  display: block;
  width: 100%;
  max-width: 32rem;
  flex: 1 1 18rem;
}

.history-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 16px 0 36px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-15);
}

.history-search input::placeholder {
  color: var(--text-placeholder);
}

.history-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 1.8px solid var(--text-placeholder);
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
}

.history-search-icon::after {
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 6px;
  height: 1.8px;
  background: var(--text-placeholder);
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
}

.history-filter-pills {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.history-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-12);
  font-weight: 500;
  transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}

.history-filter:hover {
  border-color: rgba(165, 207, 76, 0.55);
}

.history-filter.is-active {
  border-color: var(--exxaro-lime);
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
}

.history-list {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.history-row {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 24px;
  min-height: 88px;
  padding: 20px;
}

.history-row + .history-row {
  border-top: 1px solid var(--neutral-100);
}

.history-row-copy {
  min-width: 0;
}

.history-row-copy h2,
.history-row-copy p,
.history-row-copy span {
  margin: 0;
}

.history-row-copy h2 {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-15);
  font-weight: 400;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-row-copy p,
.history-row-copy span {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--text-12);
  line-height: 1.45;
}

.history-row-copy span {
  color: var(--text-placeholder);
}

.history-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-12);
  font-weight: 500;
  white-space: nowrap;
}

.history-status.in-review {
  background: var(--status-success-bg);
}

.history-status.approved {
  background: rgba(165, 207, 76, 0.3);
}

.history-status.draft {
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
}

.history-status.submitted {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.history-status.escalated {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.history-status.conflict {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.history-empty {
  margin: 0;
  padding: var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--text-14);
}

.history-amend-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(165, 207, 76, 0.4);
  border-radius: var(--radius-pill);
  background: rgba(165, 207, 76, 0.15);
  color: var(--text-secondary);
  font-size: var(--text-12);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.history-amend-link:hover {
  background: rgba(165, 207, 76, 0.3);
}

.employee-gifts-page {
  display: grid;
  width: 100%;
  max-width: var(--content-max);
  gap: 24px;
  margin: 0 auto;
}

.employee-gifts-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.employee-gifts-heading > div {
  display: grid;
  max-width: min(100%, var(--measure-lede));
  gap: 8px;
}

.employee-gifts-heading h1,
.employee-gifts-heading p {
  margin: 0;
}

.employee-gifts-heading h1 {
  color: var(--text-primary);
  font-size: var(--text-24);
  font-weight: 600;
  line-height: 1.33;
}

.employee-gifts-heading p {
  color: var(--text-tertiary);
  font-size: var(--text-14);
  line-height: 1.45;
}

.gift-log-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 10px;
  min-height: 40px;
  padding: 0 20px;
  border-color: var(--exxaro-lime);
  border-radius: var(--radius-md);
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-14);
  font-weight: 600;
  transition: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.gift-log-button:hover {
  background: color-mix(in srgb, var(--exxaro-lime) 88%, var(--ink));
  box-shadow: var(--elevation-1);
}

.gift-plus {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
}

.gift-plus::before,
.gift-plus::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.7px;
  border-radius: var(--radius-pill);
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.gift-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.gift-register-list {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.gift-row {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 36px minmax(0, 1fr) minmax(5rem, auto) 32px;
  gap: 16px;
  min-height: 82px;
  padding: 20px;
}

.gift-row + .gift-row {
  border-top: 1px solid var(--neutral-100);
}

.gift-row.is-expanded {
  align-items: flex-start;
  min-height: 128px;
}

.gift-row-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  font-size: var(--text-16);
  line-height: 1;
}

.gift-row-icon::before {
  content: "\2199";
}

.gift-row-icon.given {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.gift-row-icon.given::before {
  content: "\2197";
}

.gift-row-main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.gift-row-main h2,
.gift-row-main p {
  margin: 0;
}

.gift-row-main h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-secondary);
  font-size: var(--text-14);
  font-weight: 400;
  line-height: 1.45;
}

.gift-row-main p {
  color: var(--text-secondary);
  font-size: var(--text-12);
  line-height: 1.35;
}

.gift-row-main .gift-note {
  color: var(--text-tertiary);
  font-style: italic;
}

.gift-kind-pill,
.gift-decision-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 0 9px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--text-11);
  font-weight: 500;
  line-height: 1;
}

.gift-decision-pill.accepted {
  border-color: rgba(94, 115, 32, 0.35);
  background: rgba(165, 207, 76, 0.25);
  color: var(--text-secondary);
}

.gift-decision-pill.rejected {
  border-color: rgba(223, 83, 39, 0.3);
  background: rgba(223, 83, 39, 0.1);
  color: var(--status-danger-fg);
}

.gift-row-value {
  display: grid;
  min-width: 4.5rem;
  justify-items: end;
  gap: 2px;
  color: var(--text-secondary);
  text-align: right;
}

.gift-row-value strong {
  font-size: var(--text-14);
  font-weight: 400;
  line-height: 1.4;
}

.gift-row-value span {
  color: var(--text-secondary);
  font-size: var(--text-12);
  line-height: 1.35;
}

.gift-row-action {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.gift-row-action::before {
  width: 9px;
  height: 9px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  content: "";
  transform: rotate(-45deg);
}

.gift-row-action:hover {
  border-color: var(--border-subtle);
  background: var(--surface-subtle);
}

.figma-clone-page {
  display: grid;
  width: 100%;
  max-width: var(--content-max);
  gap: 24px;
  margin: 0 auto;
}

.figma-clone-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.figma-clone-heading > div {
  display: grid;
  max-width: min(100%, var(--measure-lede));
  gap: 8px;
}

.figma-clone-heading h1,
.figma-clone-heading p {
  margin: 0;
}

.figma-clone-heading h1 {
  color: var(--text-primary);
  font-size: var(--text-24);
  font-weight: 600;
  line-height: 1.33;
}

.figma-clone-heading p {
  color: var(--text-tertiary);
  font-size: var(--text-15);
  line-height: 1.5;
}

.figma-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid var(--exxaro-lime);
  border-radius: var(--radius-md);
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-14);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.figma-primary-action:hover {
  background: color-mix(in srgb, var(--exxaro-lime) 88%, var(--ink));
  box-shadow: var(--elevation-1);
}

.figma-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--exxaro-blue);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-secondary);
}

.figma-notice.success {
  border-left-color: var(--exxaro-lime);
}

.figma-notice.dark {
  border-color: var(--text-secondary);
  background: var(--neutral-800);
  color: var(--white);
}

.figma-notice h2,
.figma-notice p {
  margin: 0;
}

.figma-notice h2 {
  font-size: var(--text-15);
  font-weight: 500;
}

.figma-notice p {
  margin-top: 4px;
  color: inherit;
  font-size: var(--text-14);
  line-height: 1.5;
  opacity: 0.84;
}

.figma-notice-icon {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  font-size: var(--text-13);
  font-weight: 600;
}

.figma-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 14px;
}

.admin-dashboard-clone .figma-metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.figma-metric {
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.figma-metric-icon,
.figma-action-icon,
.figma-row-mark {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  font-size: var(--text-12);
  font-weight: 600;
}

.figma-metric.brown .figma-metric-icon,
.figma-action-icon.brown {
  background: rgba(74, 60, 54, 0.1);
}

.figma-metric.gold .figma-metric-icon,
.figma-action-icon.gold {
  background: rgba(254, 195, 6, 0.18);
  color: var(--status-warning-fg);
}

.figma-metric.urgent .figma-metric-icon,
.figma-action-icon.urgent {
  background: rgba(223, 83, 39, 0.12);
  color: var(--status-danger-fg);
}

.figma-metric.info .figma-metric-icon,
.figma-action-icon.info {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.figma-metric p,
.figma-metric strong,
.figma-metric small {
  margin: 0;
}

.figma-metric p {
  color: var(--text-tertiary);
  font-size: var(--text-13);
}

.figma-metric strong {
  color: var(--text-primary);
  font-size: var(--text-24);
  font-weight: 600;
  line-height: 1;
}

.figma-metric small {
  color: var(--text-placeholder);
  font-size: var(--text-12);
}

.figma-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.figma-search-pill {
  position: relative;
  display: block;
  width: 100%;
  max-width: 32rem;
  flex: 1 1 18rem;
}

.figma-search-pill input {
  width: 100%;
  min-height: 38px;
  padding: 0 16px 0 36px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-14);
}

.figma-filter-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.figma-filter-pill {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-12);
}

.figma-filter-pill.is-active {
  border-color: var(--exxaro-lime);
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
}

.figma-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 16px;
}

.manager-declare-clone .figma-action-grid,
.admin-campaign-clone .figma-action-grid {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.figma-action-card {
  display: grid;
  gap: 12px;
  min-height: 154px;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.figma-action-card:hover {
  border-color: rgba(165, 207, 76, 0.65);
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

.figma-action-card strong,
.figma-action-card p,
.figma-action-card span:last-child {
  margin: 0;
}

.figma-action-card strong {
  color: var(--text-secondary);
  font-size: var(--text-16);
  font-weight: 500;
}

.figma-action-card p {
  color: var(--text-tertiary);
  font-size: var(--text-14);
  line-height: 1.45;
}

.figma-action-card span:last-child {
  color: var(--text-secondary);
  font-size: var(--text-13);
  font-weight: 600;
}

.figma-form-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.figma-field {
  display: grid;
  gap: 8px;
}

.figma-field.is-wide {
  grid-column: 1 / -1;
}

.figma-field span {
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.figma-field input,
.figma-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-14);
  resize: vertical;
}

.figma-field input {
  min-height: 42px;
  border-radius: var(--radius-pill);
}

.figma-list-section,
.figma-table-card {
  display: grid;
  gap: 14px;
}

.figma-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.figma-section-heading h2,
.figma-section-heading p {
  margin: 0;
}

.figma-section-heading h2 {
  color: var(--text-secondary);
  font-size: var(--text-18);
  font-weight: 500;
}

.figma-section-heading > span {
  color: var(--text-tertiary);
  font-size: var(--text-13);
}

.figma-row-list {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.figma-row {
  display: grid;
  align-items: center;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 76px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
}

.figma-row + .figma-row {
  border-top: 1px solid var(--neutral-100);
}

.figma-row:hover {
  background: var(--surface-subtle);
}

.figma-row strong,
.figma-row p {
  margin: 0;
}

.figma-row strong {
  display: block;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-15);
  font-weight: 400;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-row p {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--text-12);
  line-height: 1.4;
}

.figma-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--status-neutral-bg);
  color: var(--text-secondary);
  font-size: var(--text-12);
  font-weight: 600;
  white-space: nowrap;
}

.figma-badge.approved {
  background: rgba(165, 207, 76, 0.3);
  color: var(--text-secondary);
}

.figma-badge.pending {
  background: var(--status-success-bg);
  color: var(--text-secondary);
}

.figma-badge.urgent {
  background: rgba(223, 83, 39, 0.12);
  color: var(--status-danger-fg);
}

.figma-badge.info {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.figma-table-card {
  padding: 0;
}

.figma-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.figma-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.figma-table-wrap th,
.figma-table-wrap td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--neutral-100);
  text-align: left;
  white-space: nowrap;
}

.figma-table-wrap th {
  color: var(--text-tertiary);
  font-size: var(--text-12);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.figma-table-wrap tbody tr:hover {
  background: var(--surface-subtle);
}

.figma-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.identity-profile-page {
  display: grid;
  width: 100%;
  max-width: var(--content-max);
  gap: 24px;
  margin: 0 auto;
}

.identity-profile-heading,
.identity-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.identity-profile-heading h1,
.identity-profile-heading p,
.identity-section-heading h2,
.identity-section-heading p {
  margin: 0;
}

.identity-profile-heading h1 {
  margin-top: 5px;
  color: var(--text-primary);
  font-size: var(--text-32);
  font-weight: 600;
  line-height: 1.15;
}

.identity-profile-heading > div > p:last-child {
  max-width: 48rem;
  margin-top: 12px;
  color: var(--text-tertiary);
}

.identity-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(94, 115, 32, 0.22);
  border-radius: var(--radius-pill);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  font-size: var(--text-13);
  font-weight: 600;
  white-space: nowrap;
}

.identity-status-pill > span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--exxaro-green);
}

.identity-summary-card,
.identity-claims-card {
  display: grid;
  gap: 22px;
  padding: clamp(20px, 2.5vw, 30px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.identity-section-heading {
  align-items: flex-start;
}

.identity-section-heading h2 {
  margin-top: 3px;
  color: var(--text-primary);
  font-size: var(--text-20);
  font-weight: 600;
}

.identity-section-heading > div > p:last-child {
  max-width: 50rem;
  margin-top: 7px;
  color: var(--text-tertiary);
  font-size: var(--text-15);
}

.identity-section-heading > span {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--status-neutral-bg);
  color: var(--text-secondary);
  font-size: var(--text-13);
  font-weight: 700;
  white-space: nowrap;
}

.identity-attribute-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 14px;
  margin: 0;
}

.identity-attribute-grid > div {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.identity-attribute-grid dt {
  color: var(--text-tertiary);
  font-size: var(--text-12);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.identity-attribute-grid dd {
  margin: 6px 0 0;
  color: var(--text-primary);
  font-size: var(--text-15);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.identity-code-value {
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: var(--text-14) !important;
}

.identity-boundary-note {
  display: grid;
  align-items: start;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--exxaro-blue);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.identity-boundary-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
  font-weight: 600;
}

.identity-boundary-note h2,
.identity-boundary-note p {
  margin: 0;
}

.identity-boundary-note h2 {
  color: var(--text-primary);
  font-size: var(--text-16);
}

.identity-boundary-note p {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: var(--text-15);
}

.identity-technical-details {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.identity-technical-details > summary {
  display: grid;
  gap: 3px;
  cursor: pointer;
  color: var(--text-primary);
  font-weight: 600;
  padding: 18px 22px;
}

.identity-technical-details > summary:hover {
  background: var(--surface-subtle);
}

.identity-technical-details > summary:focus-visible {
  outline: 3px solid rgba(170, 207, 78, 0.58);
  outline-offset: -4px;
}

.identity-technical-details > summary small {
  color: var(--text-tertiary);
  font-size: var(--text-13);
  font-weight: 500;
}

.identity-technical-details .identity-claims-card {
  border: 0;
  border-top: 1px solid var(--neutral-100);
  border-radius: 0;
  box-shadow: none;
}

.identity-empty-state {
  margin: 0;
  padding: 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-tertiary);
  text-align: center;
}

.identity-claims-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.identity-claims-table {
  width: 100%;
  min-width: 76rem;
  border-collapse: collapse;
  color: var(--text-primary);
  font-size: var(--text-14);
}

.identity-claims-table th,
.identity-claims-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-100);
  text-align: left;
  vertical-align: top;
}

.identity-claims-table th {
  background: var(--surface-subtle);
  color: var(--text-tertiary);
  font-size: var(--text-12);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.identity-claims-table td code {
  display: block;
  max-width: 26rem;
  color: var(--text-secondary);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: var(--text-12);
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.identity-claims-table tbody tr:nth-child(even) {
  background: var(--surface-subtle);
}

.identity-claims-table tbody tr:hover {
  background: var(--status-success-bg);
}

.identity-claims-table tbody tr:last-child td {
  border-bottom: 0;
}

.dashboard-page {
  display: grid;
  width: 100%;
  max-width: var(--content-max);
  gap: 24px;
  margin: 0 auto;
}

.page-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.page-heading h1,
.page-heading p {
  margin: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--exxaro-accent);
  background: color-mix(in srgb, var(--exxaro-accent) 10%, transparent);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--exxaro-accent) 22%, transparent);
  line-height: 1.2;
}

.page-heading h1 {
  margin-top: 2px;
  color: var(--text-primary);
  font-size: var(--text-32);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.lede {
  max-width: min(100%, 65ch);
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: var(--text-15);
  line-height: 1.55;
}

.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 20px;
  border-radius: var(--radius-md);
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--elevation-1);
}

.primary-action:hover {
  background: color-mix(in srgb, var(--exxaro-lime) 88%, var(--ink));
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--text-tertiary);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  flex: 0 0 auto;
  padding: 0 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: var(--text-14);
  font-weight: 600;
  text-decoration: none;
}

.secondary-action:hover {
  border-color: var(--text-placeholder);
  background: var(--surface-subtle);
  color: var(--text-primary);
}

.notice-band {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--exxaro-lime);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
}

.notice-band h2,
.notice-band p {
  margin: 0;
}

.notice-band h2 {
  font-size: var(--text-16);
}

.notice-band p {
  margin-top: 4px;
  color: var(--text-secondary);
}

.notice-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  font-weight: 600;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 14px;
}

.metric-card,
.panel,
.review-panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.metric-card {
  padding: 18px;
}

.metric-card.urgent .metric-label::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: var(--radius-round);
  background: var(--exxaro-red);
  content: "";
}

.metric-label {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--text-12);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-top: 8px;
  color: var(--text-primary);
  font-size: var(--text-32);
  font-weight: 600;
  line-height: 1;
}

.metric-card p {
  margin: 8px 0 0;
  color: var(--text-tertiary);
  font-size: var(--text-14);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(min(100%, 22rem), 0.82fr);
  gap: 20px;
}

.panel {
  padding: 22px;
}

.panel h2,
.panel p {
  margin: 0;
}

.panel h2 {
  color: var(--text-primary);
  font-size: var(--text-20);
}

.action-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.action-tile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.action-tile:hover {
  border-color: rgba(170, 207, 78, 0.8);
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

.action-tile span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  font-size: var(--text-12);
  font-weight: 600;
}

.action-tile .action-icon {
  position: relative;
}

.action-tile .action-icon::before {
  display: block;
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
  content: "";
}

.action-tile strong {
  color: var(--text-primary);
}

.action-tile p {
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: var(--text-15);
}

.guidance-panel {
  color: var(--white);
  border-color: var(--text-primary);
  background: var(--exxaro-brown);
}

.guidance-panel .eyebrow,
.guidance-panel h2 {
  color: var(--exxaro-lime);
}

.guidance-panel p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.84);
}

.guidance-panel ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.guidance-panel li {
  position: relative;
  padding-left: 22px;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-15);
}

.guidance-panel li::before {
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--exxaro-lime);
  content: "";
}

.review-panel {
  display: grid;
  gap: 20px;
  padding: 22px;
}

.review-panel h2 {
  margin: 0;
  color: var(--text-primary);
}

.progress-summary {
  display: grid;
  gap: 10px;
}

.progress-summary strong {
  color: var(--text-primary);
  font-size: var(--text-32);
}

.progress-summary span {
  color: var(--text-tertiary);
}

.progress-track {
  overflow: hidden;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--border-subtle);
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--exxaro-lime);
}

.review-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--border-subtle);
}

.review-list > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  background: var(--surface-card);
}

.review-list p {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
}

.badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-12);
  font-weight: 600;
}

.badge.in-review {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.badge.approved {
  background: rgba(170, 207, 78, 0.28);
  color: var(--text-primary);
}

.badge.pending {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.screen-page {
  display: grid;
  gap: 24px;
}

.screen-heading h1 {
  max-width: 820px;
}

.screen-content-grid {
  align-items: stretch;
}

.detail-panel p {
  margin-top: 12px;
  color: var(--text-tertiary);
}

.screen-checklist {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.screen-checklist li {
  position: relative;
  padding-left: 24px;
  color: var(--text-primary);
  font-size: var(--text-15);
}

.screen-checklist li::before {
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-round);
  background: var(--exxaro-lime);
  content: "";
}

.screen-list {
  gap: 16px;
}

.screen-row-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--border-subtle);
}

.screen-row {
  display: grid;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 14px;
  background: var(--surface-card);
}

.screen-row strong,
.screen-row p {
  margin: 0;
}

.screen-row strong {
  color: var(--text-primary);
}

.screen-row p {
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: var(--text-15);
}

.row-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(170, 207, 78, 0.5);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: var(--text-13);
  font-weight: 600;
  text-decoration: none;
}

.row-link:hover {
  background: var(--status-success-bg);
}

@media (max-width: 760px) {
  .auth-choice-list,
  .playground-grid,
  .prototype-choice-grid,
  .auth-choice-card > p {
    min-height: 0;
  }

  .auth-choice-heading,
  .interim-auth-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .interim-auth-banner {
    text-align: left;
  }

  .prototype-persistence-link {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-frame {
    height: auto;
    overflow: visible;
    grid-template-columns: 1fr;
  }

  .side-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
  }

  .nav-section-title {
    grid-column: 1 / -1;
    margin-top: 10px;
  }

  .side-nav-link {
    align-items: flex-start;
    gap: 9px;
  }

  .side-nav-link span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .prototype-experience-banner {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 10px 18px;
  }

  .prototype-experience-banner > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .prototype-experience-banner a {
    margin-left: 30px;
  }

  .app-workspace {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .app-shell {
    overflow: visible;
    padding: 24px 18px 36px;
  }

  .employee-home-page {
    gap: 24px;
  }

  .intro-card-body {
    padding: 24px;
  }

  .intro-card-heading {
    align-items: flex-start;
  }

  .employee-action-grid {
    grid-template-columns: 1fr;
  }

  .employee-declare-page {
    gap: 24px;
  }

  .employee-history-page {
    gap: 24px;
  }

  .employee-gifts-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .gift-log-button {
    align-self: flex-start;
  }

  .gift-row {
    align-items: flex-start;
    grid-template-columns: 36px minmax(0, 1fr);
    padding-right: 64px;
  }

  .gift-row-value {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  .gift-row-action {
    position: absolute;
    right: 20px;
    top: 20px;
  }

  .figma-clone-heading,
  .figma-filter-bar,
  .figma-section-heading,
  .identity-profile-heading,
  .identity-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .identity-status-pill,
  .identity-section-heading > span {
    align-self: flex-start;
  }

  .identity-attribute-grid {
    grid-template-columns: 1fr;
  }

  .figma-primary-action {
    align-self: flex-start;
  }

  .figma-metric-grid,
  .admin-dashboard-clone .figma-metric-grid,
  .figma-action-grid,
  .manager-declare-clone .figma-action-grid,
  .admin-campaign-clone .figma-action-grid,
  .figma-form-card {
    grid-template-columns: 1fr;
  }

  .figma-search-pill {
    width: 100%;
  }

  .figma-filter-pills {
    justify-content: flex-start;
  }

  .figma-row {
    align-items: flex-start;
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .figma-row .figma-badge {
    grid-column: 2;
    justify-self: flex-start;
  }

  .figma-row strong {
    white-space: normal;
  }

  .history-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .history-search {
    width: 100%;
  }

  .history-filter-pills {
    justify-content: flex-start;
  }

  .declare-accordion-summary {
    align-items: flex-start;
    padding: 18px;
  }

  .declare-section-body {
    padding: 18px;
  }

  .declare-question-card {
    padding: 20px;
  }

  .declare-section-actions {
    justify-content: flex-start;
  }

  .page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .primary-action {
    align-self: flex-start;
  }

  .metric-grid,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .review-list > div {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .screen-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .employee-declaration-row {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr);
  }

  .history-row {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .screen-row .badge,
  .screen-row .row-link {
    justify-self: start;
  }
}

@media (max-width: 600px) {
  .auth-method-switcher {
    grid-template-columns: 1fr;
  }

  .auth-route-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .auth-method-panel {
    border-radius: var(--radius-xl);
    padding: 20px;
  }

  .auth-method-panel .login-card {
    padding: 16px;
  }
}

@media (max-width: 520px) {
  .login-page {
    align-items: start;
    padding: 30px 16px;
  }

  .login-brand img {
    width: min(100%, 250px);
  }

  .login-card {
    padding: 18px;
  }

  .login-links {
    align-items: flex-start;
    flex-direction: column;
  }

  .side-nav {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 761px) and (max-width: 1060px) {
  .app-frame {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Future-feature preview affordances
   ------------------------------------------------------------
   Any control carrying data-future="<planned feature>" is an
   intentional design preview: it is visibly tagged "Coming soon",
   explains itself when clicked (js/future-preview.js), and never
   pretends to work. Working controls must NOT carry data-future.
   The test suite enforces this contract on every page.
   ============================================================ */

button[data-future] {
  position: relative;
  cursor: not-allowed;
}

button[data-future]:not(.future-quiet)::after {
  content: "Coming soon";
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: 10px;
  border: 1px solid var(--status-warning-border);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

/* Card-shaped previews carry the chip in the corner instead of inline. */
.figma-action-card[data-future]:not(.future-quiet)::after {
  position: absolute;
  top: 12px;
  right: 12px;
  margin-left: 0;
}

button.future-quiet[data-future] {
  border-style: dashed;
}

input[data-future],
textarea[data-future] {
  cursor: not-allowed;
  border-style: dashed;
}

.future-group-chip {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  border: 1px solid var(--status-warning-border);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

/* Click feedback shown by js/future-preview.js. */
.future-popover {
  position: fixed;
  z-index: 60;
  max-width: 320px;
  padding: 12px 16px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--exxaro-orange);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--elevation-3);
  font-size: var(--text-14);
  line-height: 1.45;
}

.future-popover strong {
  display: block;
  margin-bottom: 2px;
  color: var(--status-warning-fg);
}

/* ============================================================
   "What works today" preview guide
   ============================================================ */

.preview-guide {
  display: grid;
  width: 100%;
  max-width: var(--content-max);
  gap: 24px;
  margin: 0 auto;
}

.capability-columns {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}

.capability-card {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.capability-card.works {
  border-top: 3px solid var(--exxaro-lime);
}

.capability-card.planned {
  border-top: 3px solid var(--exxaro-orange);
}

.capability-row {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.capability-row strong {
  font-size: var(--text-15);
}

.capability-row p {
  margin: 0;
  font-size: var(--text-14);
  color: var(--text-tertiary);
}

.capability-row a {
  font-size: var(--text-14);
  font-weight: 700;
  color: var(--status-success-fg);
}

.capability-status {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  border: 1px solid;
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-size: var(--text-11);
  font-weight: 600;
}

.capability-status.works {
  border-color: var(--status-success-fg);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.capability-status.planned {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.preview-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--status-warning-border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.preview-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   Role-scoped sign-in and workspace access (spec 008)
   ------------------------------------------------------------
   "Continue as" persona cards bind the role to the identity —
   never to a choice made after sign-in. The access-denied page
   rehearses production authorization honestly.
   ============================================================ */

.persona-signin-list {
  display: grid;
  gap: var(--space-2);
}

.persona-signin-list form {
  display: contents;
}

.persona-signin-hint {
  margin: 0 0 var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--text-13);
}

.persona-signin-card {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "role id"
    "name id";
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.persona-signin-card:hover {
  border-color: var(--status-success-fg);
  box-shadow: var(--elevation-2);
}

.persona-signin-card strong {
  grid-area: role;
  color: var(--text-primary);
  font-size: var(--text-15);
}

.persona-signin-card > span:not(.persona-id) {
  grid-area: name;
  color: var(--text-tertiary);
  font-size: var(--text-12);
}

.persona-signin-card .persona-id {
  grid-area: id;
  align-self: center;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--text-11);
  font-weight: 600;
}

.manual-id-entry {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}

.manual-id-entry summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-13);
  font-weight: 700;
}

.manual-id-entry form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.access-denied-page {
  display: grid;
  width: 100%;
  max-width: var(--content-max);
  gap: var(--space-6);
  margin: 0 auto;
}

/* ============================================================
   Last-resort error surfaces
   ------------------------------------------------------------
   Expected failures never reach these: endpoints translate them
   into named result slugs rendered by FlashNotice on their own
   pages. These surfaces exist for genuine faults — branded,
   honest about saved state, and pointing at the way back.
   ============================================================ */

.error-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: var(--space-6);
  background: var(--surface-page);
}

.error-panel {
  display: grid;
  width: min(100%, 34rem);
  gap: var(--space-4);
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--status-danger-border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-2);
}

.error-panel h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-24);
  font-weight: 600;
}

.error-panel p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-15);
  line-height: 1.55;
}

.error-panel .eyebrow {
  margin: 0;
}

.error-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.error-panel .error-reference {
  color: var(--text-tertiary);
  font-size: var(--text-13);
}

.error-reference code {
  font-family: "Cascadia Code", Consolas, monospace;
}

/* Circuit-failure banner — hidden until blazor.web.js reveals it (display:block) */
#blazor-error-ui {
  display: none;
  position: fixed;
  z-index: 100;
  bottom: var(--space-6);
  left: 50%;
  width: min(calc(100% - 32px), 44rem);
  padding: 14px 18px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--status-danger-border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: var(--text-14);
  line-height: 1.5;
  box-shadow: var(--elevation-4);
  transform: translateX(-50%);
}

#blazor-error-ui strong {
  margin-right: 6px;
  color: var(--status-danger-fg);
}

#blazor-error-ui .reload {
  margin-left: 6px;
  color: var(--text-primary);
  font-weight: 600;
  text-underline-offset: 3px;
}

.screen-page,
.dashboard-page.screen-page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ============================================================
   Visual composition refinement (spec 009)
   ------------------------------------------------------------
   The token system remains the source of visual values. This
   layer governs how those values compose: editorial sign-in,
   quiet shell, joined summaries, divided rows, and selective
   elevation. Exxaro identity comes through warmth and lime
   accents; hierarchy comes from type, space, and alignment.
   ============================================================ */

/* Editorial sign-in: brand story and authentication no longer
   compete on top of the same photograph. */
.login-page {
  display: grid;
  min-height: 100vh;
  place-items: stretch;
  grid-template-columns: minmax(320px, 0.82fr) minmax(560px, 1.18fr);
  padding: 0;
  background: var(--surface-card);
}

.login-brand-story {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(36px, 5vw, 72px);
  /* The scrim used to be lightest exactly where the wordmark sits. A 180deg
     gradient starting at 0.18 put its thinnest point in the top-left corner, so
     the white logo was laid over the brightest part of the sky. The radial layer
     darkens that corner specifically, which keeps the photograph readable
     everywhere else rather than flattening the whole panel to win one corner.
     Raised from 0.18 to 0.30 at the top for the same reason.

     The brand rule this serves: a logo placed over an image is always the white
     one, and the image behind it is darkened enough to keep it visible, because
     the photograph is not a controlled background. */
  background:
    radial-gradient(
      95% 60% at 16% 8%,
      rgba(20, 18, 16, 0.86) 0%,
      rgba(20, 18, 16, 0.62) 30%,
      rgba(20, 18, 16, 0.26) 58%,
      rgba(20, 18, 16, 0) 82%),
    linear-gradient(180deg, rgba(36, 33, 31, 0.30), rgba(36, 33, 31, 0.86)),
    url("images/login-mine-backdrop.jpg") 46% center / cover no-repeat,
    var(--exxaro-brown);
  color: var(--white);
}

.login-brand-story::after {
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--exxaro-lime);
  content: "";
}

.login-brand-story-inner {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: calc(100vh - 2 * clamp(36px, 5vw, 72px));
  flex-direction: column;
}

.login-brand-story img {
  width: min(100%, 190px);
  height: auto;
  align-self: flex-start;
  mix-blend-mode: screen;
}

.login-brand-message {
  display: grid;
  max-width: 34rem;
  gap: var(--space-4);
  margin-top: auto;
  margin-bottom: clamp(48px, 9vh, 104px);
}

.login-brand-message p,
.login-brand-message h2,
.login-brand-message span,
.login-brand-footnote {
  margin: 0;
}

.login-brand-message > p {
  color: var(--exxaro-lime);
  font-size: var(--text-12);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.login-brand-message h2 {
  max-width: 11em;
  color: var(--white);
  font-size: var(--text-36);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.login-brand-message > span {
  max-width: 31rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-16);
  line-height: 1.6;
}

.login-brand-footnote {
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--text-12);
  letter-spacing: 0.04em;
}

.login-panel,
.login-panel.conditional {
  display: grid;
  width: 100%;
  min-height: 100vh;
  justify-items: stretch;
  place-items: center;
  padding: clamp(40px, 6vw, 88px);
  background: var(--surface-subtle);
}

.login-auth-inner {
  display: grid;
  width: min(100%, 650px);
  gap: var(--space-6);
}

.login-copy {
  max-width: 34rem;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  text-align: left;
}

.login-copy h1 {
  color: var(--text-primary);
  font-size: var(--text-32);
  font-weight: 600;
  line-height: 1.18;
}

.login-copy p {
  color: var(--text-tertiary);
  font-size: var(--text-15);
  line-height: 1.55;
}

.login-copy .login-eyebrow {
  color: var(--status-success-fg);
  font-size: var(--text-11);
  letter-spacing: 0.1em;
}

.auth-method-switcher {
  display: grid;
  gap: 0;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.auth-method-option {
  gap: var(--space-2);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: var(--space-3) 0 var(--space-4);
  color: var(--text-tertiary);
}

.auth-method-option + .auth-method-option {
  padding-left: var(--space-5);
}

.auth-method-option:hover {
  border-color: var(--border-subtle);
  background: transparent;
  color: var(--text-primary);
  transform: none;
}

.auth-method-option.active {
  border-color: var(--exxaro-lime);
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
}

.auth-method-option .auth-lifecycle-badge {
  align-self: end;
  justify-self: start;
}

.auth-method-panel {
  gap: var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.auth-route-heading {
  align-items: center;
}

.auth-route-heading h2 {
  color: var(--text-primary);
  font-size: var(--text-24);
  font-weight: 600;
}

.auth-method-panel > p {
  max-width: 36rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.auth-method-panel .sso-button {
  min-height: 64px;
  border: 0;
  background: var(--ink);
  box-shadow: var(--elevation-1);
}

.auth-method-panel .sso-button:hover {
  box-shadow: var(--elevation-2);
}

.auth-method-panel .login-card,
.login-card {
  gap: var(--space-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.demo-heading {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-13);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.persona-signin-list {
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

.persona-signin-list > .demo-heading,
.persona-signin-list > .persona-signin-hint {
  border-right: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
  padding-right: var(--space-4);
  padding-left: var(--space-4);
}

.persona-signin-list > .demo-heading {
  padding-top: var(--space-4);
}

.persona-signin-list > .persona-signin-hint {
  margin: 0;
  padding-top: var(--space-1);
  padding-bottom: var(--space-4);
}

.persona-signin-card {
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-top: 0;
  border-radius: 0;
  background: var(--surface-card);
  box-shadow: none;
}

.persona-signin-card:hover {
  border-color: var(--border-subtle);
  background: var(--status-success-bg);
  box-shadow: none;
}

.persona-signin-card::after {
  grid-area: id;
  margin-left: auto;
  color: var(--status-success-fg);
  content: "→";
  font-size: var(--text-18);
}

.persona-signin-card .persona-id {
  display: none;
}

.auth-transition-details {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 0;
  backdrop-filter: none;
}

.auth-transition-details summary {
  color: var(--text-secondary);
  padding: var(--space-4) 0;
}

.auth-transition-details > div {
  border-color: var(--border-subtle);
}

.auth-transition-details strong {
  color: var(--text-primary);
}

.login-policy {
  max-width: 34rem;
  color: var(--text-tertiary);
  font-size: var(--text-12);
  text-align: left;
}

.synthetic-account-creator,
.manual-id-entry {
  border-color: var(--border-subtle);
}

.synthetic-account-creator {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.synthetic-account-creator summary {
  color: var(--text-secondary);
  padding: var(--space-4) 0;
}

/* Quiet shell: stable location context, progressive preview help,
   and task content that starts higher in the viewport. */
.app-frame {
  grid-template-columns: 236px minmax(0, 1fr);
  background: var(--surface-subtle);
}

.app-sidebar {
  background: var(--exxaro-brown);
}

.brand-panel {
  height: 82px;
  min-height: 82px;
  padding: var(--space-5);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: transparent;
}

.brand-panel img {
  width: 126px;
}

.workspace-label {
  padding: var(--space-5) var(--space-5) var(--space-3);
  border-bottom: 0;
}

.workspace-label strong {
  margin-top: var(--space-2);
  color: var(--white);
  font-size: var(--text-14);
  font-weight: 600;
}

.workspace-label small {
  margin-top: var(--space-1);
}

.side-nav {
  gap: var(--space-1);
  padding: var(--space-3);
}

.desktop-side-nav {
  flex: 1 1 auto;
  min-height: min(30vh, 8rem);
  min-height: min(30dvh, 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Secondary rail links yield space to destinations when type grows. */
.app-sidebar > .sidebar-utilities {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(25vh, 12rem);
  max-height: min(25dvh, 12rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: var(--space-2);
}

.nav-destination-group {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.side-nav-link {
  min-height: 42px;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--text-14);
}

.side-nav-link.active {
  background: rgba(255, 255, 255, 0.09);
}

.sidebar-footer {
  gap: var(--space-3);
  padding: var(--space-4);
  border-top-color: rgba(255, 255, 255, 0.08);
}

.avatar-mark {
  width: 34px;
  height: 34px;
  background: var(--exxaro-lime);
}

.sidebar-footer strong {
  font-size: var(--text-13);
}

.sidebar-footer a,
.org-pill {
  font-size: var(--text-12);
}

.org-pill {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.app-workspace,
.app-shell {
  background: var(--surface-subtle);
}

.app-header {
  min-height: 68px;
  gap: var(--space-4);
  padding: 0 var(--space-8);
  box-shadow: none;
}

.header-workspace-link {
  min-height: 36px;
  border-color: transparent;
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.header-workspace-link:hover {
  border-color: var(--border-subtle);
  background: var(--surface-card);
}

.app-header h2 {
  font-size: var(--text-15);
}

.app-header-tools {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-3);
}

.header-session-badge {
  min-height: 32px;
  border: 0;
  background: transparent;
  padding: var(--space-1) 0 var(--space-1) var(--space-2);
  color: var(--text-tertiary);
}

.prototype-experience-banner {
  position: relative;
  z-index: 20;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
}

.prototype-experience-banner summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-12);
  font-weight: 600;
  list-style: none;
}

.prototype-experience-banner summary::-webkit-details-marker {
  display: none;
}

.prototype-experience-banner[open] summary {
  border-color: var(--exxaro-lime);
  color: var(--text-primary);
}

.prototype-experience-banner .nav-icon {
  width: 14px;
  height: 14px;
}

.prototype-experience-popover,
.prototype-experience-banner > .prototype-experience-popover {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  display: grid;
  width: min(360px, calc(100vw - 32px));
  align-items: initial;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--status-warning-border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--elevation-3);
}

.prototype-experience-popover strong {
  color: var(--text-primary);
  font-size: var(--text-14);
}

.prototype-experience-popover p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-13);
  line-height: 1.5;
}

.prototype-experience-popover a,
.prototype-experience-banner .prototype-experience-popover a {
  margin: var(--space-1) 0 0;
  color: var(--status-success-fg);
  font-size: var(--text-13);
  text-decoration: none;
}

.app-shell {
  padding: clamp(32px, 3.2vw, 52px) clamp(28px, 4vw, 64px) 64px;
}

/* Page rhythm: a clear lead, restrained supporting regions, and
   fewer rounded rectangles competing for attention. */
.employee-home-page,
.employee-declare-page,
.employee-history-page,
.employee-gifts-page,
.figma-clone-page,
.screen-page,
.dashboard-page,
.identity-profile-page,
.prototype-workspace-page,
.board-home-page,
.persistence-playground,
.preview-guide,
.access-denied-page {
  gap: var(--space-8);
}

.employee-home-heading,
.employee-declare-heading,
.employee-history-heading,
.employee-gifts-heading,
.figma-clone-heading,
.page-heading,
.identity-profile-heading {
  gap: var(--space-2);
}

.employee-home-heading h1,
.employee-declare-heading h1,
.employee-history-heading h1,
.employee-gifts-heading h1,
.figma-clone-heading h1,
.page-heading h1,
.identity-profile-heading h1 {
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--text-32);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.16;
}

.employee-home-heading > p:last-child,
.employee-history-heading > p:last-child,
.employee-gifts-heading > div > p:last-child,
.figma-clone-heading > div > p:last-child,
.page-heading .lede,
.identity-profile-heading > div > p:last-child {
  max-width: 44rem;
  color: var(--text-tertiary);
  font-size: var(--text-15);
  line-height: 1.6;
}

.employee-kicker,
.eyebrow,
.metric-label {
  color: var(--text-tertiary);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.figma-notice,
.figma-notice.dark,
.notice-band,
.employee-declare-guidance,
.employee-amend-notice,
.playground-safety-note,
.identity-boundary-note,
.figma-notice,
.figma-notice.dark,
.notice-band {
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  color: var(--text-secondary);
}

.figma-notice.dark {
  border-left-color: var(--status-info-border);
}

.figma-notice.dark h2,
.figma-notice.dark p {
  color: var(--text-secondary);
}

.figma-notice-icon,
.notice-icon {
  width: 28px;
  height: 28px;
  background: transparent;
}

.figma-metric-grid,
.metric-grid {
  gap: 0;
  overflow: hidden;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
}

.figma-metric,
.metric-card {
  min-height: 0;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 0;
  border-right: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.figma-metric:last-child,
.metric-card:last-child {
  border-right: 0;
}

.figma-metric-icon {
  display: none;
}

.figma-metric strong,
.metric-card strong {
  margin-top: 0;
  font-size: var(--text-24);
  line-height: 1.1;
}

.figma-metric p,
.metric-label {
  order: -1;
  text-transform: none;
}

.figma-metric small,
.metric-card p {
  margin-top: 0;
  color: var(--text-tertiary);
}

.panel,
.review-panel,
.identity-summary-card,
.identity-claims-card,
.capability-card {
  border-color: var(--border-subtle);
  box-shadow: none;
}

.content-grid {
  gap: var(--space-8);
}

.panel,
.review-panel {
  padding: var(--space-6);
}

.guidance-panel {
  border: 0;
  background: var(--exxaro-brown);
}

.action-list {
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

.action-tile {
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
}

.action-tile:hover {
  border-color: var(--border-subtle);
  background: var(--surface-subtle);
  box-shadow: none;
  transform: none;
}

.employee-action-grid,
.figma-action-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.employee-action-card,
.figma-action-card {
  min-height: 0;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 0;
  border-right: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.employee-action-card:last-child,
.figma-action-card:last-child {
  border-right: 0;
}

.employee-action-card:hover,
.figma-action-card:hover {
  border-color: var(--border-subtle);
  background: var(--surface-subtle);
  box-shadow: none;
  transform: none;
}

.prototype-choice-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.prototype-choice-card {
  gap: var(--space-3);
  padding: var(--space-6);
  border: 0;
  border-right: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.prototype-choice-card:last-child {
  border-right: 0;
}

.prototype-choice-card:hover {
  background: var(--surface-subtle);
}

.prototype-persistence-link {
  border-top: 1px solid var(--border-subtle);
  border-right: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-left: 0;
  border-radius: 0;
  background: transparent;
}

.employee-action-icon,
.figma-action-icon {
  width: 32px;
  height: 32px;
}

.employee-intro-card {
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.intro-accent {
  display: none;
}

.intro-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  column-gap: clamp(32px, 5vw, 64px);
  padding: var(--space-8) 0;
}

.intro-card-heading,
.intro-copy {
  grid-column: 1;
}

.intro-card-heading {
  margin-bottom: var(--space-5);
}

.intro-card-heading h2 {
  color: var(--text-primary);
  font-size: var(--text-18);
  font-weight: 600;
}

.intro-copy {
  max-width: 48rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.intro-more {
  margin-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.intro-more summary {
  padding: var(--space-4) 0;
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--text-14);
  font-weight: 600;
}

.intro-more > div {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

.intro-image-wrap {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 0;
}

.intro-image-wrap img {
  border: 0;
  box-shadow: none;
}

.employee-status-card {
  padding: var(--space-5);
  border-radius: var(--radius-md);
}

.employee-declaration-list,
.history-list,
.gift-register-list,
.figma-row-list,
.screen-row-list,
.review-list {
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
}

.employee-declaration-row,
.history-row,
.gift-row,
.figma-row,
.screen-row,
.review-list > div {
  padding: var(--space-4) 0;
  background: transparent;
}

.employee-declaration-row + .employee-declaration-row,
.history-row + .history-row,
.gift-row + .gift-row,
.figma-row + .figma-row,
.screen-row + .screen-row,
.review-list > div + div {
  border-top: 1px solid var(--border-subtle);
}

.figma-row:hover,
.employee-declaration-row:hover,
.history-row:hover,
.gift-row:hover {
  background: var(--surface-subtle);
}

.figma-row-mark {
  width: 32px;
  height: 32px;
  background: var(--status-success-bg);
}

.figma-badge,
.employee-status-pill,
.badge {
  min-height: 24px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-11);
}

.figma-filter-bar,
.history-toolbar {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.figma-search-pill input,
.history-search input {
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.figma-filter-pill,
.history-filter-pill {
  border-radius: var(--radius-sm);
  background: transparent;
}

.figma-filter-pill.is-active,
.history-filter-pill.is-active {
  border-color: var(--status-success-fg);
  background: transparent;
  color: var(--status-success-fg);
}

.figma-form-card {
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.figma-table-wrap,
.identity-technical-details,
.identity-claims-table-wrap {
  border-radius: var(--radius-md);
}

.declare-accordion {
  box-shadow: none;
}

@media (max-width: 1120px) {
  .header-session-badge {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .intro-card-body {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  }
}

@media (max-width: 960px) {
  .login-page {
    grid-template-columns: 1fr;
  }

  .login-brand-story {
    position: relative;
    min-height: 270px;
    padding: var(--space-8);
    background-position: center 45%;
  }

  .login-brand-story-inner {
    min-height: 206px;
  }

  .login-brand-story img {
    width: 150px;
  }

  .login-brand-message {
    gap: var(--space-2);
    margin: auto 0 0;
  }

  .login-brand-message h2 {
    font-size: var(--text-32);
  }

  .login-brand-message > span,
  .login-brand-footnote {
    display: none;
  }

  .login-panel,
  .login-panel.conditional {
    min-height: 0;
    padding: clamp(32px, 7vw, 64px);
  }

  .intro-card-body {
    grid-template-columns: 1fr;
  }

  .intro-image-wrap {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    margin-top: var(--space-8);
  }
}

@media (max-width: 760px) {
  .app-frame {
    height: auto;
    overflow: visible;
    grid-template-columns: 1fr;
  }

  /* The rail and its desktop header are replaced outright by the compact
     app-topbar below, not reflowed -- see plan.md, "Mobile shell (2026-09-05)"
     for why the two prior reflow attempts were dropped instead of patched. */
  .app-sidebar {
    display: none;
  }

  .app-header {
    display: none;
  }

  .app-workspace {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .app-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    background: var(--shell-sidebar);
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--shell-sidebar-line);
  }

  .app-topbar-menu {
    order: 1;
  }

  .topbar-brand {
    order: 2;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: var(--space-1);
  }

  .topbar-brand img {
    height: 28px;
    width: auto;
  }

  .topbar-help-link {
    order: 3;
    text-decoration: none;
  }

  .topbar-help-link:hover,
  .topbar-help-link:focus-visible {
    color: var(--exxaro-lime);
  }

  .app-topbar-account {
    order: 4;
  }

  .mobile-navigation-toggle,
  .topbar-help-link,
  .mobile-account-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-1);
    color: var(--shell-sidebar-text);
    cursor: pointer;
    font-size: var(--text-11);
    font-weight: 600;
    line-height: 1.1;
    list-style: none;
  }

  .mobile-navigation-toggle::-webkit-details-marker,
  .mobile-account-toggle::-webkit-details-marker {
    display: none;
  }

  .mobile-navigation-toggle:focus-visible,
  .mobile-account-toggle:focus-visible {
    outline: 3px solid var(--exxaro-lime);
    outline-offset: -3px;
  }

  /* Mirrors the .environment-detail[open] technique already used below: the
     summary is a normal flex item (sized to itself) while closed, and only
     claims the full row -- wrapping the app bar's other controls onto the line
     below it -- once open. display:contents plus order on the promoted
     summary/panel was tried first and rejected: current Chrome reports the
     declared order/flex-basis correctly in computed style but does not apply
     them in layout for children promoted through a contents ancestor. */
  .app-topbar-menu[open],
  .app-topbar-account[open] {
    flex-basis: 100%;
    width: 100%;
  }

  /* The browser's native closed-details hiding only wins on specificity
     against the default display value; an explicit display below (flex, for
     the app bar's own layout needs) outranks it and would keep rendering
     while closed without this, exactly as details.workspace-navigation
     needed the same guard for its .side-nav previously. */
  details.app-topbar-menu:not([open]) > .side-nav,
  details.app-topbar-menu:not([open]) > .sidebar-utilities,
  details.app-topbar-account:not([open]) > .topbar-account-panel {
    display: none;
  }

  .app-topbar-menu .side-nav {
    display: flex;
    flex-direction: column;
    /* Keep the current destination visible without scrolling its Menu control. */
    max-height: min(25vh, 12rem);
    max-height: min(25dvh, 12rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .app-topbar-menu .side-nav-link {
    min-height: 44px;
  }

  .topbar-account-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  /* The generic toggle uses page-level --text-tertiary/--surface-card, tuned
     for a light card on the page, not a light-on-dark rail: the two
     unselected icons rendered near-black-on-black here (measured contrast
     confirmed the defect, not just a screenshot impression) even though the
     selected one stayed visible by coincidence. Same class of fix as the
     build-identity popover above. */
  .topbar-account-panel .theme-toggle-visual {
    border-color: var(--shell-sidebar-line);
    background: color-mix(in srgb, var(--shell-sidebar-text) 8%, transparent);
    box-shadow: none;
  }

  .topbar-account-panel .theme-toggle-thumb {
    background: var(--shell-sidebar-text);
  }

  .topbar-account-panel .theme-toggle-option {
    color: var(--shell-sidebar-muted);
  }

  .topbar-account-panel .theme-toggle-option[aria-pressed="true"] {
    color: var(--shell-sidebar);
  }

  /* Safety stays visible outside collapsed navigation, but its own spacing can
     still shrink -- the environment identity, not its meaning, is what a
     numeric chrome budget is allowed to compact. */
  .app-workspace > .environment-indicator {
    padding: var(--space-2) var(--space-3);
  }

  .app-workspace > .environment-indicator .environment-detail-content {
    padding-block: var(--space-2) var(--space-1);
  }

  .prototype-experience-banner summary > span:last-child {
    display: none;
  }

  .prototype-experience-banner summary {
    width: 34px;
    justify-content: center;
    padding: var(--space-1);
  }

  .prototype-experience-popover,
  .prototype-experience-banner > .prototype-experience-popover {
    position: fixed;
    top: 62px;
    right: var(--space-4);
  }

  .app-shell {
    overflow: visible;
    /* Was --space-8 (32px): the compact app bar already establishes the
       shell's top edge, so the page heading no longer needs as much of its
       own clearance to read as separated from browser chrome. */
    padding: var(--space-4) var(--space-4) 48px;
  }

  .employee-home-page,
  .employee-declare-page,
  .employee-history-page,
  .employee-gifts-page,
  .figma-clone-page,
  .screen-page,
  .dashboard-page,
  .identity-profile-page,
  .prototype-workspace-page,
  .board-home-page {
    gap: var(--space-6);
  }

  .employee-home-heading h1,
  .employee-declare-heading h1,
  .employee-history-heading h1,
  .employee-gifts-heading h1,
  .figma-clone-heading h1,
  .page-heading h1,
  .identity-profile-heading h1 {
    font-size: var(--text-24);
  }

  .figma-metric-grid,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .figma-metric,
  .metric-card {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .figma-metric:nth-child(odd),
  .metric-card:nth-child(odd) {
    border-right: 1px solid var(--border-subtle);
  }

  .figma-metric:nth-last-child(-n + 2),
  .metric-card:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .employee-action-grid,
  .figma-action-grid,
  .prototype-choice-grid {
    grid-template-columns: 1fr;
  }

  .employee-action-card,
  .figma-action-card,
  .prototype-choice-card {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .employee-action-card:last-child,
  .figma-action-card:last-child,
  .prototype-choice-card:last-child {
    border-bottom: 0;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (forced-colors: active) {
  .mobile-navigation-toggle {
    border-color: ButtonText;
  }
}

@media (max-width: 640px) {
  .login-brand-story {
    min-height: 220px;
    padding: var(--space-6);
  }

  .login-brand-story-inner {
    min-height: 168px;
  }

  .login-brand-story img {
    width: 132px;
  }

  .login-brand-message h2 {
    font-size: var(--text-24);
  }

  .login-panel,
  .login-panel.conditional {
    padding: var(--space-8) var(--space-5) 48px;
  }

  .auth-method-switcher {
    grid-template-columns: 1fr;
    border-bottom: 0;
  }

  .auth-method-option,
  .auth-method-option + .auth-method-option {
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-3) 0;
  }

  .auth-method-option.active {
    border-bottom-color: var(--exxaro-lime);
  }

  .auth-route-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .persona-signin-card {
    grid-template-columns: 1fr auto;
  }

  .figma-metric-grid,
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .figma-metric,
  .metric-card,
  .figma-metric:nth-child(odd),
  .metric-card:nth-child(odd) {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .figma-metric:last-child,
  .metric-card:last-child {
    border-bottom: 0;
  }
}

/* ============================================================
   Elegant dark appearance (spec 010)
   ------------------------------------------------------------
   Semantic tokens carry most surfaces. This final compatibility
   layer covers the few intentionally fixed brand treatments and
   legacy translucent authentication surfaces without inverting
   imagery or changing Exxaro's palette vocabulary.
   ============================================================ */

:root[data-theme="dark"] .auth-choice-card,
:root[data-theme="dark"] .auth-method-option.active {
  border-color: var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-primary);
}

:root[data-theme="dark"] .auth-method-panel .sso-button {
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
}

:root[data-theme="dark"] .auth-method-panel .sso-button small,
:root[data-theme="dark"] .auth-method-panel .sso-button .sso-arrow {
  color: var(--exxaro-brown);
}

:root[data-theme="dark"] .login-submit:hover {
  background: var(--neutral-800);
}

:root[data-theme="dark"] .badge.approved {
  background: var(--status-success-bg);
}

:root[data-theme="dark"] .guidance-panel {
  border-color: var(--border-subtle);
}

:root[data-theme="dark"] .login-brand-story {
  background:
    linear-gradient(180deg, rgba(23, 20, 18, 0.22), rgba(23, 20, 18, 0.9)),
    url("images/login-mine-backdrop.jpg") 46% center / cover no-repeat,
    var(--exxaro-brown);
}

@media (max-width: 640px) {
  .empty-layout-theme-control {
    top: var(--space-3);
    right: var(--space-3);
  }
}

@media (max-width: 480px) {
  .header-session-badge {
    display: none;
  }
}

/* ============================================================
   Build identity (spec 011)
   ------------------------------------------------------------
   One quiet native disclosure presents the compiled image
   identity in both shells. It stays out of task hierarchy while
   remaining keyboard, touch, zoom, and support friendly.
   ============================================================ */


.empty-layout-version-control {
  position: fixed;
  z-index: 40;
  right: var(--space-5);
  bottom: var(--space-5);
}

.build-identity {
  position: relative;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.build-identity-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
}

.build-identity summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  max-width: min(100%, 24rem);
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-card) 88%, transparent);
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--text-11);
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
  box-shadow: var(--elevation-1);
  backdrop-filter: blur(8px);
}

.build-identity summary::-webkit-details-marker {
  display: none;
}

.build-identity summary:hover {
  border-color: var(--text-placeholder);
  color: var(--text-secondary);
}

.build-identity summary:focus-visible {
  outline: 2px solid var(--exxaro-lime);
  outline-offset: 3px;
}

.build-identity[open] summary {
  border-color: var(--exxaro-lime);
  color: var(--text-primary);
}

.build-identity-chevron {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.build-identity[open] .build-identity-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.build-identity-popover {
  position: absolute;
  z-index: 60;
  right: 0;
  bottom: calc(100% + var(--space-2));
  display: grid;
  width: min(320px, calc(100vw - 32px));
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--exxaro-lime);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-secondary);
  box-shadow: var(--elevation-3);
  overflow-wrap: anywhere;
}

.build-identity-popover > strong,
.build-identity-popover > p,
.build-identity-popover > small,
.build-identity-popover dl,
.build-identity-popover dd {
  margin: 0;
}

.build-identity-popover > strong {
  color: var(--text-primary);
  font-size: var(--text-14);
}

.build-identity-popover > p,
.build-identity-popover > small {
  color: var(--text-tertiary);
  font-size: var(--text-11);
  line-height: 1.45;
}

.build-identity-popover dl {
  display: grid;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  grid-template-columns: auto minmax(0, 1fr);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-11);
}

.build-identity-popover dt {
  color: var(--text-tertiary);
}

.build-identity-popover dd {
  min-width: 0;
  color: var(--text-primary);
  text-align: right;
}

.build-identity-popover code {
  color: inherit;
  font: inherit;
}

@media (max-width: 640px) {

  .empty-layout-version-control {
    right: var(--space-3);
    bottom: var(--space-3);
  }

  .build-identity-control {
    justify-content: flex-start;
  }

  .build-identity-popover {
    position: fixed;
    right: var(--space-3);
    bottom: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .build-identity-chevron {
    transition: none;
  }
}

/* ============================================================
   Employee home engagement amendment (spec 009)
   ------------------------------------------------------------
   Status and action lead. Decision support responds in place.
   Policy detail remains available without becoming the page.
   ============================================================ */

.employee-home-page {
  gap: clamp(var(--space-6), 2.4vw, var(--space-8));
}

.employee-home-heading {
  max-width: 46rem;
}

.employee-campaign-workspace,
.employee-campaign-list {
  display: grid;
  gap: var(--space-5);
}

.employee-campaign-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}

.employee-campaign-heading h2 {
  margin: var(--space-1) 0 0;
}

.employee-campaign-heading a {
  color: var(--exxaro-brown);
  font-weight: 650;
  text-underline-offset: 4px;
}

.employee-campaign-message {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.employee-campaign-card .employee-lead-main h3 {
  max-width: 40rem;
  margin: var(--space-2) 0 0;
  color: var(--white);
  font-size: var(--text-28);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.employee-campaign-facts {
  display: grid;
  margin: var(--space-6) 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.employee-campaign-facts div {
  min-width: 0;
}

.employee-campaign-facts dt,
.employee-campaign-facts dd,
.employee-campaign-timezone {
  margin: 0;
}

.employee-campaign-facts dt {
  color: color-mix(in srgb, var(--white) 62%, transparent);
  font-size: var(--text-11);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.employee-campaign-facts dd {
  margin-top: var(--space-1);
  color: var(--white);
  font-size: var(--text-13);
  line-height: 1.5;
}

.employee-campaign-timezone {
  margin-top: var(--space-4);
  color: color-mix(in srgb, var(--white) 68%, transparent);
  font-size: var(--text-12);
}

.employee-campaign-disabled {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 var(--space-4);
  border: 1px solid color-mix(in srgb, var(--white) 24%, transparent);
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--white) 72%, transparent);
  font-size: var(--text-13);
  font-weight: 650;
}

.employee-home-lead {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.65fr) minmax(240px, 0.7fr);
  border: 1px solid color-mix(in srgb, var(--exxaro-brown) 82%, var(--exxaro-lime));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(
      circle at 88% 16%,
      color-mix(in srgb, var(--exxaro-lime) 18%, transparent) 0,
      transparent 34%
    ),
    var(--exxaro-brown);
  color: var(--white);
  box-shadow: var(--elevation-2);
}

.employee-lead-main {
  min-width: 0;
  padding: clamp(var(--space-6), 3vw, var(--space-10));
}

.employee-lead-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 26px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--exxaro-lime) 54%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--exxaro-lime) 12%, transparent);
  color: var(--exxaro-lime);
  font-size: var(--text-12);
  font-weight: 600;
}

.employee-lead-status > span {
  width: 7px;
  height: 7px;
  outline: 4px solid color-mix(in srgb, var(--exxaro-lime) 14%, transparent);
  border-radius: var(--radius-round);
  background: currentColor;
}

.employee-lead-eyebrow,
.employee-lead-meta,
.employee-cycle-note p,
.employee-cycle-note strong,
.employee-cycle-note span {
  margin: 0;
}

.employee-lead-eyebrow {
  margin-top: var(--space-6);
  color: color-mix(in srgb, var(--white) 70%, transparent);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.employee-lead-main h2 {
  max-width: 40rem;
  margin: var(--space-2) 0 0;
  color: var(--white);
  font-size: var(--text-32);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.14;
}

.employee-lead-meta {
  margin-top: var(--space-2);
  color: color-mix(in srgb, var(--white) 68%, transparent);
  font-size: var(--text-13);
}

/* This shared hero detail is reused by the reporting page, whose heading sits
   on a normal page surface rather than the employee hero artwork. */
.declaration-reporting-view .employee-lead-meta {
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

.employee-review-progress {
  display: grid;
  margin: var(--space-8) 0 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.employee-review-progress li {
  position: relative;
  display: grid;
  min-width: 0;
  gap: var(--space-2);
  grid-template-columns: 12px minmax(0, 1fr);
  color: color-mix(in srgb, var(--white) 48%, transparent);
}

.employee-review-progress li::after {
  position: absolute;
  z-index: 0;
  top: 5px;
  right: calc(100% - 6px);
  left: 6px;
  height: 1px;
  background: color-mix(in srgb, var(--white) 18%, transparent);
  content: "";
  transform: translateX(12px);
}

.employee-review-progress li:first-child::after {
  display: none;
}

.employee-review-progress li > span {
  z-index: 1;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: var(--radius-round);
  background: var(--exxaro-brown);
}

.employee-review-progress li.is-complete,
.employee-review-progress li.is-current {
  color: var(--exxaro-lime);
}

.employee-review-progress li.is-complete > span {
  border-color: var(--exxaro-lime);
  background: var(--exxaro-lime);
}

.employee-review-progress li.is-current > span {
  outline: 4px solid color-mix(in srgb, var(--exxaro-lime) 16%, transparent);
}

.employee-review-progress li > div {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.employee-review-progress strong,
.employee-review-progress small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-review-progress strong {
  color: var(--white);
  font-size: var(--text-12);
  font-weight: 600;
}

.employee-review-progress small {
  color: color-mix(in srgb, var(--white) 52%, transparent);
  font-size: var(--text-11);
}

.employee-lead-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-8);
}

.employee-primary-action,
.employee-text-action {
  text-decoration: none;
}

.employee-primary-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  border: 1px solid var(--exxaro-lime);
  border-radius: var(--radius-md);
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
  font-size: var(--text-14);
  font-weight: 700;
  box-shadow: var(--elevation-1);
  transition:
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.employee-primary-action:hover {
  background: color-mix(in srgb, var(--exxaro-lime) 88%, var(--white));
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

.employee-primary-action:active {
  box-shadow: var(--elevation-1);
  transform: translateY(0);
}

.employee-primary-action .employee-action-icon {
  width: 18px;
  height: 18px;
  background: transparent;
  color: var(--exxaro-brown);
}

.employee-primary-action .employee-action-icon::before {
  width: 18px;
  height: 18px;
}

.employee-action-arrow {
  margin-left: var(--space-2);
  font-size: var(--text-18);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.employee-primary-action:hover .employee-action-arrow {
  transform: translateX(3px);
}

.employee-text-action {
  padding: var(--space-2) 0;
  color: color-mix(in srgb, var(--white) 82%, transparent);
  font-size: var(--text-13);
  font-weight: 600;
}

.employee-text-action:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.employee-cycle-note {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-6);
  justify-content: space-between;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-left: 1px solid color-mix(in srgb, var(--white) 13%, transparent);
  background: color-mix(in srgb, var(--white) 4%, transparent);
}

.employee-cycle-mark {
  display: inline-grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--exxaro-lime) 58%, transparent);
  border-radius: var(--radius-round);
  color: var(--exxaro-lime);
  font-size: var(--text-14);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.employee-cycle-note > div {
  display: grid;
  gap: var(--space-2);
}

.employee-cycle-note p {
  color: color-mix(in srgb, var(--white) 60%, transparent);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.employee-cycle-note strong {
  color: var(--white);
  font-size: var(--text-18);
}

.employee-cycle-note div > span {
  color: color-mix(in srgb, var(--white) 68%, transparent);
  font-size: var(--text-13);
  line-height: 1.55;
}

.employee-cycle-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--exxaro-lime);
  font-size: var(--text-12);
  font-weight: 600;
}

.employee-cycle-state > span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
}

.employee-quick-actions {
  display: grid;
  overflow: hidden;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.employee-quick-actions > a {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: var(--space-4) var(--space-5);
  color: var(--text-secondary);
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.employee-quick-actions > a + a {
  border-left: 1px solid var(--border-subtle);
}

.employee-quick-actions > a:hover {
  background: var(--surface-card);
  color: var(--text-primary);
}

.employee-quick-actions > a > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.employee-quick-actions strong,
.employee-quick-actions small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-quick-actions strong {
  font-size: var(--text-13);
  font-weight: 600;
}

.employee-quick-actions small {
  color: var(--text-tertiary);
  font-size: var(--text-11);
}

.employee-quick-actions > a > span:last-child {
  color: var(--text-placeholder);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.employee-quick-actions > a:hover > span:last-child {
  color: var(--status-success-fg);
  transform: translateX(2px);
}

.employee-quick-icon,
.employee-guidance-summary-icon,
.employee-scenario-reassurance .icon-shield {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: currentColor;
  color: var(--status-success-fg);
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.employee-quick-icon {
  width: 34px;
  height: 34px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--status-success-bg);
  color: var(--status-success-fg);
  -webkit-mask: none;
  mask: none;
}

.employee-quick-icon::before {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
  content: "";
}

.employee-decision-support {
  display: grid;
  gap: var(--space-6);
  padding: clamp(var(--space-6), 3vw, var(--space-8)) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.employee-decision-heading {
  display: grid;
  max-width: 42rem;
  gap: var(--space-2);
}

.employee-decision-heading h2,
.employee-decision-heading p {
  margin: 0;
}

.employee-decision-heading h2 {
  color: var(--text-primary);
  font-size: var(--text-24);
  font-weight: 600;
  line-height: 1.2;
}

.employee-decision-heading > p:last-child {
  color: var(--text-tertiary);
  font-size: var(--text-14);
}

.employee-decision-layout {
  display: grid;
  align-items: stretch;
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
}

.employee-scenario-picker {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.employee-scenario-option {
  display: grid;
  min-height: 48px;
  align-items: center;
  gap: var(--space-3);
  grid-template-columns: 30px minmax(0, 1fr) 22px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-14);
  font-weight: 600;
  text-align: left;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.employee-scenario-option:hover {
  background: var(--surface-card);
  color: var(--text-primary);
  transform: translateX(2px);
}

.employee-scenario-option[aria-pressed="true"] {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.employee-scenario-mark {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-round);
  font-size: var(--text-11);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.employee-scenario-check {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-round);
  opacity: 0;
  font-size: var(--text-11);
  transform: scale(0.8);
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.employee-scenario-option[aria-pressed="true"] .employee-scenario-check {
  opacity: 1;
  transform: scale(1);
}

.employee-scenario-guidance {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--exxaro-lime);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.employee-scenario-guidance > p,
.employee-scenario-guidance h3 {
  margin: 0;
}

.employee-scenario-guidance > p:first-child {
  color: var(--status-success-fg);
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.employee-scenario-guidance h3 {
  max-width: 34rem;
  margin-top: var(--space-3);
  color: var(--text-primary);
  font-size: var(--text-20);
  font-weight: 600;
  line-height: 1.3;
}

.employee-scenario-guidance > p:nth-of-type(2) {
  max-width: 38rem;
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-15);
  line-height: 1.65;
}

.employee-scenario-reassurance {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--text-13);
  line-height: 1.5;
}

.employee-scenario-reassurance .icon-shield {
  margin-top: 2px;
}

.employee-scenario-guidance > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-6);
  color: var(--status-success-fg);
  font-size: var(--text-14);
  font-weight: 700;
  text-decoration: none;
}

.employee-scenario-guidance > a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.employee-full-guidance {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.employee-full-guidance > summary {
  display: grid;
  min-height: 76px;
  align-items: center;
  gap: var(--space-4);
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  padding: var(--space-3) var(--space-2);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.employee-full-guidance > summary::-webkit-details-marker,
.employee-guidance-topic > summary::-webkit-details-marker {
  display: none;
}

.employee-full-guidance > summary:hover {
  color: var(--text-primary);
}

.employee-guidance-summary-icon {
  width: 20px;
  height: 20px;
  margin-left: var(--space-2);
}

.employee-full-guidance > summary > span:nth-child(2) {
  display: grid;
  gap: var(--space-1);
}

.employee-full-guidance > summary strong {
  color: var(--text-primary);
  font-size: var(--text-14);
}

.employee-full-guidance > summary small {
  color: var(--text-tertiary);
  font-size: var(--text-12);
}

.employee-guidance-chevron {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.employee-full-guidance[open] .employee-guidance-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.employee-guidance-content {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  padding: var(--space-5) var(--space-2) var(--space-8);
}

.employee-guidance-intro {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.employee-guidance-intro h2,
.employee-guidance-intro p {
  margin: 0;
}

.employee-guidance-intro h2 {
  color: var(--text-primary);
  font-size: var(--text-20);
  font-weight: 600;
}

.employee-guidance-intro > p:last-child {
  color: var(--text-tertiary);
  font-size: var(--text-14);
  line-height: 1.6;
}

.employee-guidance-topics {
  border-top: 1px solid var(--border-subtle);
}

.employee-guidance-topic {
  border-bottom: 1px solid var(--border-subtle);
}

.employee-guidance-topic > summary {
  position: relative;
  padding: var(--space-4) var(--space-8) var(--space-4) 0;
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--text-14);
  font-weight: 600;
  list-style: none;
}

.employee-guidance-topic > summary::after {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  color: var(--text-tertiary);
  content: "+";
  font-size: var(--text-18);
  font-weight: 400;
  transform: translateY(-50%);
}

.employee-guidance-topic[open] > summary::after {
  content: "\2212";
}

.employee-guidance-topic > div {
  display: grid;
  max-width: 44rem;
  gap: var(--space-3);
  padding: 0 var(--space-8) var(--space-5) 0;
}

.employee-guidance-topic p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
  line-height: 1.65;
}

.employee-recent-heading {
  display: flex;
  align-items: end;
  gap: var(--space-4);
  justify-content: space-between;
}

.employee-recent-heading > div {
  display: grid;
  gap: var(--space-1);
}

.employee-recent-heading h2 {
  margin: 0;
}

.employee-recent-heading > a {
  color: var(--status-success-fg);
  font-size: var(--text-13);
  font-weight: 600;
  text-decoration: none;
}

.employee-recent-heading > a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 900px) {
  .employee-home-lead {
    grid-template-columns: 1fr;
  }

  .employee-cycle-note {
    display: grid;
    align-items: center;
    gap: var(--space-4);
    grid-template-columns: 64px minmax(0, 1fr) auto;
    border-top: 1px solid color-mix(in srgb, var(--white) 13%, transparent);
    border-left: 0;
  }

  .employee-decision-layout {
    grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.3fr);
  }
}

@media (max-width: 760px) {
  .side-nav {
    scrollbar-width: none;
  }

  .side-nav::-webkit-scrollbar {
    display: none;
  }

  .employee-quick-actions {
    grid-template-columns: 1fr;
  }

  .employee-quick-actions > a {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .employee-quick-actions > a + a {
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
  }

  .employee-decision-layout,
  .employee-guidance-content {
    grid-template-columns: 1fr;
  }

  .employee-scenario-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-scenario-option {
    grid-template-columns: 30px minmax(0, 1fr) 20px;
  }

  .employee-scenario-option:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .employee-campaign-heading {
    align-items: start;
    flex-direction: column;
  }

  .employee-campaign-facts {
    grid-template-columns: 1fr;
  }

  .employee-campaign-card .employee-lead-main h3 {
    font-size: var(--text-24);
  }

  .employee-lead-main h2 {
    font-size: var(--text-24);
  }

  .employee-lead-main,
  .employee-cycle-note {
    padding: var(--space-5);
  }

  .employee-review-progress {
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-review-progress li:nth-child(3)::after {
    display: none;
  }

  .employee-cycle-note {
    align-items: start;
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .employee-cycle-mark {
    width: 52px;
    height: 52px;
    font-size: var(--text-12);
  }

  .employee-cycle-state {
    grid-column: 2;
  }

  .employee-lead-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .employee-primary-action {
    justify-content: center;
  }

  .employee-text-action {
    align-self: center;
  }

  .employee-scenario-picker {
    grid-template-columns: 1fr;
  }

  .employee-scenario-option:last-child {
    grid-column: auto;
  }

  .employee-scenario-guidance {
    padding: var(--space-5);
  }

  .employee-full-guidance > summary {
    grid-template-columns: 32px minmax(0, 1fr) 14px;
    padding-right: 0;
    padding-left: 0;
  }

  .employee-guidance-content {
    padding-right: 0;
    padding-left: 0;
  }

  .employee-declaration-row {
    gap: var(--space-3);
  }
}

@media (forced-colors: active) {
  .employee-home-lead,
  .employee-primary-action,
  .employee-scenario-option[aria-pressed="true"],
  .employee-scenario-guidance,
  .employee-cycle-mark {
    border: 2px solid ButtonText;
  }

  .employee-scenario-option[aria-pressed="true"] {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  .employee-scenario-check,
  .employee-lead-status > span,
  .employee-review-progress li > span {
    forced-color-adjust: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .employee-primary-action,
  .employee-action-arrow,
  .employee-quick-actions > a,
  .employee-quick-actions > a > span:last-child,
  .employee-scenario-option,
  .employee-scenario-check,
  .employee-guidance-chevron {
    transition: none;
  }
}

/* ==========================================================================
   Visual language enhancement (spec 012)
   Meaningful symbols supplement labels; purposeful summaries visualize only
   comparisons already present in the synthetic dashboard previews.
   ========================================================================== */

.icon-archive {
  --icon-url: url("images/icons/archive.svg");
}

.icon-briefcase {
  --icon-url: url("images/icons/briefcase-business.svg");
}

.icon-calendar {
  --icon-url: url("images/icons/calendar-days.svg");
}

.icon-chart {
  --icon-url: url("images/icons/chart-column.svg");
}

.icon-arrow-right {
  --icon-url: url("images/icons/arrow-right.svg");
}

/* Friendly aliases keep older journey markup on the same local SVG contract. */
.icon-circle-check {
  --icon-url: url("images/icons/circle-check.svg");
}

.icon-circle-info {
  --icon-url: url("images/icons/circle-info.svg");
}

.icon-circle-help {
  --icon-url: url("images/icons/circle-help.svg");
}

.icon-check {
  --icon-url: url("images/icons/circle-check.svg");
}

.icon-help {
  --icon-url: url("images/icons/circle-help.svg");
}

.icon-info {
  --icon-url: url("images/icons/circle-info.svg");
}

.icon-clock {
  --icon-url: url("images/icons/clock-3.svg");
}

/* Registration journey icon set: each one names the thing it sits beside rather
   than gesturing at security in general. */
.icon-ruler {
  --icon-url: url("images/icons/ruler.svg");
}

.icon-equal {
  --icon-url: url("images/icons/equal.svg");
}

.icon-key-round {
  --icon-url: url("images/icons/key-round.svg");
}

.icon-user-plus {
  --icon-url: url("images/icons/user-plus.svg");
}

.icon-log-in {
  --icon-url: url("images/icons/log-in.svg");
}

.icon-lock-keyhole {
  --icon-url: url("images/icons/lock-keyhole.svg");
}

.icon-badge-check {
  --icon-url: url("images/icons/badge-check.svg");
}

.icon-id-card {
  --icon-url: url("images/icons/id-card.svg");
}

.icon-shield-check {
  --icon-url: url("images/icons/shield-check.svg");
}

.icon-radio-tower {
  --icon-url: url("images/icons/radio-tower.svg");
}

.icon-smartphone {
  --icon-url: url("images/icons/smartphone.svg");
}

.icon-circle-dashed {
  --icon-url: url("images/icons/circle-dashed.svg");
}

.icon-scale {
  --icon-url: url("images/icons/scale.svg");
}

.icon-trend {
  --icon-url: url("images/icons/trending-up.svg");
}

.icon-users {
  --icon-url: url("images/icons/users.svg");
}

.semantic-icon::before {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  content: "";
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.figma-notice-icon.semantic-icon,
.notice-icon.semantic-icon,
.identity-boundary-icon.semantic-icon,
.declare-info-icon.semantic-icon,
.employee-amend-icon.semantic-icon {
  display: inline-grid;
  place-items: center;
  color: var(--status-info-fg);
}

.employee-amend-icon.semantic-icon {
  color: var(--status-warning-fg);
}

.figma-metric {
  grid-template-columns: 24px minmax(0, 1fr);
}

.figma-metric-icon.semantic-icon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  align-self: center;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.figma-metric-icon.semantic-icon::before {
  width: 16px;
  height: 16px;
}

.figma-metric > p {
  align-self: center;
  grid-column: 2;
  grid-row: 1;
}

.figma-metric > strong,
.figma-metric > small {
  grid-column: 1 / -1;
}

.figma-action-icon.semantic-icon,
.figma-row-mark.semantic-icon,
.person-mark.semantic-icon,
.metric-label-icon.semantic-icon,
.employee-scenario-mark.semantic-icon {
  display: inline-grid;
  place-items: center;
}

.figma-action-icon.semantic-icon::before,
.figma-row-mark.semantic-icon::before,
.person-mark.semantic-icon::before {
  width: 18px;
  height: 18px;
}

.figma-row-mark.is-text {
  font-variant-numeric: tabular-nums;
}

.metric-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.metric-label-icon.semantic-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--status-success-fg);
}

.metric-label-icon.semantic-icon::before {
  width: 14px;
  height: 14px;
}

.employee-scenario-mark.semantic-icon {
  border-radius: var(--radius-sm);
  font-variant-numeric: normal;
}

.employee-scenario-mark.semantic-icon::before {
  width: 16px;
  height: 16px;
}

.dashboard-visual-grid {
  display: grid;
  gap: var(--space-5);
}

.admin-insight-visuals {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-visual {
  display: grid;
  min-width: 0;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.dashboard-visual figcaption {
  display: grid;
  gap: var(--space-1);
}

.dashboard-visual figcaption strong {
  color: var(--text-primary);
  font-size: var(--text-18);
  font-weight: 600;
}

.dashboard-visual figcaption small {
  color: var(--text-tertiary);
  font-size: var(--text-11);
}

.completion-segments {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(8, minmax(18px, 1fr));
}

.completion-segment {
  position: relative;
  min-height: 38px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.completion-segment.is-complete {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.completion-segment.is-complete::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: "\2713";
  font-size: var(--text-14);
  font-weight: 700;
}

.completion-segment.is-outstanding {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 6px,
    var(--border-subtle) 6px,
    var(--border-subtle) 7px
  );
}

.visual-legend {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.visual-legend > div {
  display: grid;
  gap: var(--space-1);
}

.visual-legend dt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-12);
}

.visual-legend dd {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-15);
  font-weight: 600;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--surface-subtle);
}

.legend-swatch.complete {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
}

.legend-swatch.outstanding {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 3px,
    var(--border-subtle) 3px,
    var(--border-subtle) 4px
  );
}

.visual-text-equivalent {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-13);
  line-height: 1.55;
}

.risk-bar-list {
  display: grid;
  gap: var(--space-4);
}

.risk-bar-row {
  display: grid;
  gap: var(--space-2);
}

.risk-bar-row > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: var(--text-13);
}

.risk-bar-row strong,
.trend-value {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.risk-bar-track {
  display: block;
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
}

.risk-bar-fill {
  display: block;
  height: 100%;
  border-right: 2px solid var(--status-success-fg);
  border-radius: inherit;
  background: var(--status-success-bg);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 5px,
    var(--border-subtle) 5px,
    var(--border-subtle) 6px
  );
}

.risk-bar-fill.size-100 {
  width: 100%;
}

.risk-bar-fill.size-67 {
  width: 67%;
}

.risk-bar-fill.size-50 {
  width: 50%;
}

.trend-bars {
  display: grid;
  min-height: 190px;
  align-items: end;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trend-period {
  display: grid;
  height: 100%;
  align-items: end;
  gap: var(--space-2);
  grid-template-rows: auto minmax(110px, 1fr) auto;
  color: var(--text-tertiary);
  font-size: var(--text-12);
  text-align: center;
}

.trend-bar-track {
  position: relative;
  display: block;
  width: min(48px, 70%);
  height: 100%;
  overflow: hidden;
  justify-self: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--surface-subtle);
}

.trend-bar-fill {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 2px solid var(--status-info-fg);
  background: var(--status-info-bg);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 5px,
    var(--border-subtle) 5px,
    var(--border-subtle) 6px
  );
}

.trend-bar-fill.size-40 {
  height: 40%;
}

.trend-bar-fill.size-100 {
  height: 100%;
}

.trend-bar-fill.size-30 {
  height: 30%;
}

:root[data-theme="dark"] .figma-metric-icon.semantic-icon,
:root[data-theme="dark"] .metric-label-icon.semantic-icon {
  background: var(--surface-subtle);
}

@media (max-width: 720px) {
  .admin-insight-visuals {
    grid-template-columns: 1fr;
  }

  .dashboard-visual {
    padding: var(--space-5);
  }

  .completion-segments {
    gap: var(--space-1);
  }

  .completion-segment {
    min-height: 32px;
  }
}

@media (forced-colors: active) {
  .semantic-icon,
  .completion-segment,
  .legend-swatch,
  .risk-bar-track,
  .trend-bar-track {
    border: 1px solid CanvasText;
    forced-color-adjust: auto;
  }

  .completion-segment.is-complete,
  .risk-bar-fill,
  .trend-bar-fill {
    background: Highlight;
    color: HighlightText;
  }
}

@media print {
  .semantic-icon {
    color: currentColor;
  }

  .dashboard-visual {
    break-inside: avoid;
    box-shadow: none;
  }

  .completion-segment,
  .legend-swatch,
  .risk-bar-track,
  .trend-bar-track {
    border: 1px solid currentColor;
  }
}

/* Employee-ID registration is intentionally a compact Static SSR surface. */
.registration-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background:
    radial-gradient(circle at top left, rgb(248 213 72 / 18%), transparent 35rem),
    var(--surface-subtle);
}

.registration-card {
  width: min(100%, 34rem);
  min-width: 0;
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-3);
}

.registration-brand img {
  width: 9rem;
  height: auto;
}

.registration-brand-logo--dark {
  display: none;
}

[data-theme="dark"] .registration-brand-logo--light {
  display: none;
}

[data-theme="dark"] .registration-brand-logo--dark {
  display: block;
}

.password-input-shell {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

/* The mark sits inside the field's own box, matching the number and code fields,
   so all three credential inputs read as one family. */
.password-input-shell > .credential-mark {
  grid-column: 1;
}

.password-input-shell input {
  min-width: 0;
}

.password-visibility-toggle {
  min-width: 4.5rem;
  min-height: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-13);
  font-weight: 700;
}

.password-visibility-toggle:hover {
  border-color: var(--exxaro-green);
  color: var(--text-primary);
}

.password-visibility-toggle:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: var(--focus-halo);
}

.registration-card h1,
.registration-card p {
  margin: 0;
}

.registration-intro,
.registration-privacy {
  color: var(--text-secondary);
  line-height: 1.55;
}

.registration-destination {
  padding: var(--space-3) var(--space-4);
  border-left: 0.25rem solid var(--exxaro-lime);
  background: var(--surface-subtle);
  color: var(--text-primary);
}

.registration-status,
.registration-privacy {
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.registration-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  /* The region keeps its footprint as states change, so the card does not jump
     under the pointer or the reading cursor. */
  min-height: 4.5rem;
  border-color: var(--status-info-border);
  border-left-width: 0.25rem;
  color: var(--status-info-fg);
}

.registration-status:focus-visible {
  outline: 0.1875rem solid var(--focus-ring, var(--status-info-border));
  outline-offset: 0.125rem;
}

.registration-status-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
}

.registration-status-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* Severity is spelled out, not only coloured, so it survives greyscale, forced
   colours and every form of colour vision. */
.registration-status-label {
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.registration-status-message {
  margin: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.registration-status-reference {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.registration-status--information {
  border-color: var(--status-info-border);
  color: var(--status-info-fg);
}

.registration-status--caution {
  border-color: var(--status-warning-border);
  color: var(--status-warning-fg);
}

.registration-status--blocked {
  border-color: var(--status-danger-border);
  color: var(--status-danger-fg);
}

/* Registration wait panel.
   Motion here is justified by frequency: registration is a once-ever surface, so
   it carries the delight budget. Everything animated is transform/opacity only,
   under 300ms, and every state it expresses is also present as text. */
/* The new-user route. Given real weight and its own surface, because the failure
   mode was people never seeing it: as an inline link beside a filled button it read
   as fine print, and first-time users kept trying to sign in to an account they had
   not created yet. */
.auth-entry-new {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

/* The brand sits on the card; the action keeps the accessible link colour. */
.auth-entry-new::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0.1875rem;
  background: var(--status-success-border);
  transform-origin: top;
}

.auth-entry-new h2 {
  margin: 0;
  font-size: var(--text-16);
  line-height: 1.3;
}

.auth-entry-new p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
}

/* What it costs, what you need, what happens. Carried by icons as well as words,
   because most of this workforce does not read English first. */
.auth-entry-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-entry-facts li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-secondary);
  font-size: var(--text-13);
}

.auth-entry-facts .semantic-icon {
  /* Not --exxaro-lime: as a foreground it measures about 1.8:1 on the light
     surface, which is invisible rather than subtle. This token is the same brand
     green resolved per theme. */
  color: var(--status-success-fg);
}

.auth-entry-facts .semantic-icon::before {
  width: 0.9375rem;
  height: 0.9375rem;
}

/* Secondary by construction: a filled surface and a real target height, so it
   reads as a control rather than a thin outline, while the label keeps the
   accessible link colour the entry-surface contract requires. */
.auth-entry-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--link-on-surface);
  font-weight: 600;
  text-decoration: none;
}

.auth-entry-action .semantic-icon::before {
  width: 1rem;
  height: 1rem;
}

@media (hover: hover) and (pointer: fine) {
  .auth-entry-action:hover {
    border-color: var(--link-on-surface);
  }

  .auth-entry-action:hover .semantic-icon {
    transform: translateX(0.1875rem);
  }

  .auth-entry-new:hover {
    border-color: var(--border-strong, var(--border-subtle));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .auth-entry-action,
  .auth-entry-new {
    transition:
      border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .auth-entry-action .semantic-icon {
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* The card assembles rather than appearing whole: the brand edge draws down,
     then the three facts arrive in order. Registration happens once per employee,
     which is where the budget for this lives. */
  .auth-entry-new::before {
    animation: registration-accent-draw 320ms cubic-bezier(0.23, 1, 0.32, 1) 120ms both;
  }

  .auth-entry-facts li {
    animation: registration-fact-enter 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  .auth-entry-facts li:nth-child(1) {
    animation-delay: 220ms;
  }

  .auth-entry-facts li:nth-child(2) {
    animation-delay: 260ms;
  }

  .auth-entry-facts li:nth-child(3) {
    animation-delay: 300ms;
  }

  .auth-entry-new .auth-entry-icon {
    animation: registration-mark-settle 220ms cubic-bezier(0.23, 1, 0.32, 1) 160ms both;
  }
}

@keyframes registration-accent-draw {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes registration-fact-enter {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.registration-progress-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.registration-progress-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.registration-progress-headline {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.registration-progress-head .registration-destination {
  margin: 0;
  padding: 0;
  border-left: 0;
  background: transparent;
}

.registration-expiry-caption {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-13);
}

/* Determinate circular indicator: the code's lifetime is known exactly, so the
   arc depletes evenly rather than guessing. */
.registration-expiry-dial {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
}

.registration-expiry-dial svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.registration-expiry-track,
.registration-expiry-sweep {
  fill: none;
  stroke-width: 4;
}

.registration-expiry-track {
  stroke: var(--border-subtle);
}

.registration-expiry-sweep {
  /* Not --exxaro-lime: as a stroke on the light surface it measures well under the
     3:1 a non-text graphic needs. This is the same brand green, resolved per theme. */
  stroke: var(--status-success-border);
  stroke-linecap: round;
  stroke-dasharray: 201.06;
  transition: stroke-dashoffset 1s linear;
}

.registration-expiry-dial.is-urgent .registration-expiry-sweep {
  stroke: var(--status-warning-border);
}

.registration-expiry-face {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 0.0625rem;
  line-height: 1;
}

.registration-expiry-face .semantic-icon::before {
  width: 0.875rem;
  height: 0.875rem;
}

.registration-expiry-face .semantic-icon {
  color: var(--text-tertiary);
}

.registration-expiry-clock {
  font-size: var(--text-16);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.registration-expiry-dial.is-urgent .registration-expiry-clock,
.registration-expiry-dial.is-urgent .semantic-icon {
  color: var(--status-warning-fg);
}

.registration-delivery-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.registration-delivery-step {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: var(--space-3);
  border-top: 0.1875rem solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-13);
}

.registration-delivery-step.is-complete {
  border-top-color: var(--status-success-border);
  color: var(--text-primary);
}

.registration-delivery-step.is-failed {
  border-top-color: var(--status-danger-border);
  color: var(--status-danger-fg);
}

.registration-delivery-label {
  font-weight: 600;
}

.registration-delivery-hint {
  font-size: var(--text-12);
  color: var(--text-secondary);
}

.registration-delivery-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
}

.registration-delivery-mark .semantic-icon::before {
  width: 1.0625rem;
  height: 1.0625rem;
}

.registration-delivery-step.is-complete .registration-delivery-mark .semantic-icon {
  color: var(--status-success-fg);
  /* Purpose: state indication. transform+opacity, 200ms ease-out. */
  animation: registration-mark-settle 200ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.registration-delivery-step:nth-child(2) .registration-delivery-mark .semantic-icon {
  animation-delay: 60ms;
}

.registration-delivery-step.is-waiting .registration-delivery-mark .semantic-icon {
  color: var(--text-tertiary);
}

.registration-delivery-step.is-failed .registration-delivery-mark .semantic-icon {
  color: var(--status-danger-fg);
}

/* Indeterminate activity indicator. Delivery has no knowable duration, so this
   shows that something is still happening without pretending to measure it, and
   it keeps moving so the wait never reads as stalled. */
/* Rings the glyph rather than crossing it, so the activity reads as something
   happening around the stage instead of a stray mark over it. */
.registration-delivery-spinner {
  position: absolute;
  inset: -0.125rem;
  border: 0.09375rem solid transparent;
  border-top-color: var(--status-info-border);
  border-right-color: var(--status-info-border);
  border-radius: var(--radius-pill);
  opacity: 0;
}

.registration-delivery-step.is-waiting .registration-delivery-spinner {
  opacity: 1;
  animation: registration-spin 900ms linear infinite;
}

@keyframes registration-mark-settle {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes registration-spin {
  to {
    transform: rotate(360deg);
  }
}

.registration-wait-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.registration-wait-note .semantic-icon::before {
  width: 1rem;
  height: 1rem;
}

/* flex-start is right for a note that wraps, but it pins the icon to the top of the
   box rather than to the first line's centre; this puts it back on that line. */
.registration-wait-note .semantic-icon {
  margin-top: 0.125em;
}

.registration-resend-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.registration-cooldown-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
}

.registration-cooldown-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.registration-cooldown-track,
.registration-cooldown-sweep {
  fill: none;
  stroke-width: 2.5;
}

.registration-cooldown-track {
  stroke: var(--border-subtle);
}

.registration-cooldown-sweep {
  stroke: var(--status-info-border);
  stroke-linecap: round;
  stroke-dasharray: 87.96;
  /* Continuous progress, so linear; it ticks once a second from the script. */
  transition: stroke-dashoffset 1s linear;
}

.registration-cooldown-seconds {
  position: absolute;
  font-size: var(--text-11);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* Entry for the status region. Purpose: preventing a jarring change when a state
   replaces another after a post. */
@media (prefers-reduced-motion: no-preference) {
  .registration-status {
    animation: registration-status-enter 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }
}

@keyframes registration-status-enter {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .registration-status,
  .registration-delivery-step.is-complete .registration-delivery-mark .semantic-icon,
  .registration-delivery-step.is-waiting .registration-delivery-spinner {
    animation: none;
  }

  /* The spinner carried "still working". Without motion the dotted ring has to
     carry it instead, so the stage never reads as finished. */
  .registration-delivery-step.is-waiting .registration-delivery-spinner {
    opacity: 1;
    border-color: var(--status-info-border);
    border-style: dotted;
  }

  .registration-cooldown-sweep,
  .registration-expiry-sweep {
    transition: none;
  }
}

@media (max-width: 30rem) {
  .registration-progress-head {
    align-items: flex-start;
  }

  .registration-expiry-dial {
    width: 3.75rem;
    height: 3.75rem;
  }

  .registration-delivery-progress {
    grid-template-columns: 1fr;
  }

  .registration-delivery-step {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top-width: 0.125rem;
  }

  .registration-delivery-hint {
    flex-basis: 100%;
  }
}

.registration-resend-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.registration-link-button[disabled] {
  color: var(--text-secondary);
  text-decoration: none;
  cursor: not-allowed;
}

.registration-success {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--status-success-border);
  border-left: 0.25rem solid var(--status-success-border);
  border-radius: var(--radius-md);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.registration-success-icon {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--exxaro-green) 15%, transparent);
  color: var(--exxaro-green);
  flex-shrink: 0;
}

.registration-success-icon .semantic-icon {
  width: 24px;
  height: 24px;
}

.registration-success-action {
  width: fit-content;
  padding: var(--space-3) var(--space-5);
}

.registration-development-banner {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--status-warning-border);
  border-left: 0.25rem solid var(--exxaro-orange);
  border-radius: var(--radius-md);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.registration-development-code-value {
  width: fit-content;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--status-warning-border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-primary);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: var(--text-20);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.registration-card form {
  display: grid;
  gap: var(--space-4);
}

.registration-link-button {
  width: fit-content;
  border: 0;
  padding: 0;
  color: var(--link-on-surface);
  background: transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.declaration-capture,
.declaration-review {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: clamp(24px, 2.6vw, 40px);
}

.declaration-progress,
.declaration-question-form,
.declaration-review-list article,
.declaration-attestation,
.declaration-readonly,
.declaration-confirmation,
.declaration-incomplete-summary,
.declaration-unavailable {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: var(--elevation-1);
}

.declaration-progress {
    display: grid;
    gap: 12px;
    margin-block: 24px;
    padding: 18px 20px;
}

.declaration-progress > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
}

.declaration-progress progress {
    width: 100%;
    height: 10px;
    accent-color: var(--exxaro-green);
}

.declaration-error-summary {
    margin-block: 20px;
    padding: 18px 20px;
    border: 2px solid var(--status-danger-border);
    border-radius: var(--radius-md);
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.declaration-error-summary:focus {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.declaration-error-summary h2 {
    margin: 0 0 6px;
    font-size: var(--text-18);
}

.declaration-inline-error {
    margin-block: var(--space-4) 0;
    padding: var(--space-3);
    border-left: 4px solid var(--status-danger-border);
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
    font-weight: 700;
}

.declaration-question-form {
    padding: clamp(20px, 3vw, 36px);
}

.declaration-question-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.declaration-question-form legend {
    display: grid;
    gap: 8px;
    max-width: 52rem;
    padding: 0;
    font-size: var(--text-24);
    font-weight: 700;
    line-height: 1.35;
}

.declaration-question-form legend span {
    color: var(--exxaro-green);
    font-size: var(--text-13);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.declaration-section {
    display: grid;
    gap: var(--space-4);
    margin-block: 24px;
}

.declaration-section-heading {
    display: grid;
    gap: var(--space-2);
    padding-inline: var(--space-2);
}

.declaration-section-heading h2 {
    margin: 0;
    font-size: var(--text-28);
}

.declaration-section-heading .employee-kicker {
    margin: 0;
}

.declaration-question-form {
    display: grid;
    gap: var(--space-5);
}

.declaration-question-form .declaration-question {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: clamp(18px, 2.4vw, 28px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.declaration-question-form .declaration-question.is-follow-up {
    margin-inline-start: clamp(12px, 3vw, 40px);
    border-inline-start: 4px solid var(--status-info-border);
}

.declaration-question-form .declaration-question legend {
    max-width: 68ch;
}

.declaration-choice-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 12rem));
    gap: var(--space-3);
    margin-block: var(--space-2);
}

.declaration-choice-pill {
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.declaration-choice-pill:hover,
.declaration-choice-pill:focus-visible {
    border-color: var(--exxaro-green);
}

.declaration-choice-pill:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.declaration-choice-pill.is-selected {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.declaration-details-panel {
    display: grid;
    gap: var(--space-2);
    max-width: 68ch;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.declaration-details-panel label,
.declaration-question-form > .declaration-question > label,
.declaration-details-field > label {
    font-weight: 700;
}

.declaration-details-panel textarea,
.declaration-short-answer,
.declaration-long-answer,
.declaration-number-answer,
.declaration-date-answer {
    min-height: 48px;
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
}

.declaration-details-panel textarea,
.declaration-long-answer {
    width: 100%;
    max-width: 68ch;
    min-height: 132px;
    resize: vertical;
}

.declaration-short-answer,
.declaration-date-answer {
    width: 100%;
    max-width: 46ch;
}

.declaration-number-answer {
    width: 100%;
    max-width: 22ch;
}

.declaration-option-list {
    display: grid;
    gap: var(--space-2);
    max-width: 68ch;
    margin-block: var(--space-2);
}

.declaration-option-choice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    cursor: pointer;
}

.declaration-option-choice:has(input:checked) {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
}

.declaration-option-choice input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: var(--exxaro-green);
}

.declaration-entry-gate {
    display: grid;
    gap: var(--space-5);
}

.declaration-entry-cards {
    display: grid;
    gap: var(--space-5);
    scroll-behavior: smooth;
}

.declaration-entry-instance {
    display: grid;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    scroll-margin-block-start: var(--space-6);
}

.declaration-entry-instance.is-new {
    animation: declaration-entry-card-in var(--duration-motion) var(--ease-standard) both;
}

.declaration-entry-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-card);
}

.declaration-entry-card-header > div {
    min-width: 0;
}

.declaration-entry-card-label {
    margin: 0 0 var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-13);
    font-weight: 700;
    letter-spacing: .08em;
}

.declaration-entry-card-header h3 {
    overflow: hidden;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--text-18);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.declaration-entry-card-header h3.is-placeholder {
    color: var(--text-tertiary);
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
}

.declaration-entry-card-body {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-2) var(--space-5) var(--space-5);
}

.declaration-entry-card-body .declaration-question {
    margin: 0;
}

.declaration-entry-remove {
    flex: 0 0 auto;
}

.declaration-entry-add-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.declaration-entry-add {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    gap: var(--space-2);
    border-style: dashed;
}

.declaration-entry-add-icon {
    font-size: var(--text-18);
    line-height: 1;
}

@keyframes declaration-entry-card-in {
    from {
        opacity: 0;
        transform: translateY(var(--space-3));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.declaration-character-count {
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--text-14);
}

.declaration-warning {
    color: var(--status-warning-fg);
}

.declaration-details-panel textarea:focus-visible,
.declaration-short-answer:focus-visible,
.declaration-long-answer:focus-visible,
.declaration-number-answer:focus-visible,
.declaration-date-answer:focus-visible,
.declaration-option-choice input:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.declaration-radio-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-block: 24px;
}

.declaration-radio-group label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    cursor: pointer;
    font-weight: 500;
    transition: border-color var(--duration-base) var(--ease-standard),
                background-color var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}

.declaration-radio-group label:hover {
    border-color: color-mix(in srgb, var(--border-subtle) 50%, var(--exxaro-green));
    background: var(--surface-subtle);
}

.declaration-radio-group label:active {
    transform: scale(0.99);
}

.declaration-radio-group label:has(input:checked) {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    font-weight: 600;
    box-shadow: var(--elevation-1);
}

.declaration-radio-group input {
    width: 20px;
    height: 20px;
    accent-color: var(--exxaro-green);
}

.declaration-details-field {
    display: grid;
    gap: 8px;
    margin-block: 20px;
}

.declaration-details-field label {
    font-weight: 700;
}

.declaration-details-field textarea {
    width: 100%;
    min-height: 160px;
    resize: vertical;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font: inherit;
}

.declaration-details-field textarea:focus,
.declaration-radio-group input:focus-visible,
.declaration-form-actions a:focus-visible,
.declaration-form-actions button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.declaration-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}

.declaration-live-status {
    min-height: 1.5em;
    margin-top: 14px;
    color: var(--text-tertiary);
}

.declaration-review-list {
    display: grid;
    gap: 16px;
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

.declaration-review-list article {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr) auto;
    gap: 20px;
    align-items: start;
    padding: 20px;
}

.declaration-review-list h2 {
    margin: 4px 0 8px;
    font-size: var(--text-18);
}

.declaration-review-answer {
    overflow-wrap: anywhere;
}

.declaration-review-answer > :first-child {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--exxaro-green);
}

/* --exxaro-green is legible on the light card but misses AA on the reporting
   page's dark card. The semantic success foreground adapts in dark/system. */
.declaration-reporting-view .declaration-review-answer > :first-child {
    color: var(--status-success-fg);
}

.declaration-attestation,
.declaration-readonly,
.declaration-confirmation,
.declaration-incomplete-summary,
.declaration-unavailable {
    display: grid;
    gap: 16px;
    margin-block: 24px;
    padding: clamp(20px, 3vw, 28px);
}

.declaration-attestation label {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-weight: 650;
}

.declaration-attestation input {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    accent-color: var(--exxaro-green);
}

@media (max-width: 640px) {
    .declaration-capture,
    .declaration-review {
        padding: 18px 12px;
    }

    .declaration-radio-group,
    .declaration-choice-pills,
    .declaration-review-list article {
        grid-template-columns: 1fr;
    }

    .declaration-question-form .declaration-question.is-follow-up {
        margin-inline-start: 0;
    }

    .declaration-entry-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .declaration-entry-remove,
    .declaration-entry-add {
        width: 100%;
        justify-content: center;
    }

    .declaration-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .declaration-form-actions > *,
    .declaration-attestation .primary-action {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Ethics governance surfaces (specs 041, 023, 043)
   The questionnaire catalogue, campaign setup, and campaign operations share
   one quiet composition: a content-max column, panels that carry meaning by
   grouping rather than by weight, and state expressed with a labelled pill so
   it never depends on colour alone.
   ========================================================================== */

.ethics-page {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: clamp(24px, 2.6vw, 40px);
}

.ethics-page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-block-end: var(--space-6);
}

.ethics-page-heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.ethics-page-heading h1 {
    margin-block: var(--space-2);
}

.ethics-page-heading > div > p:last-child {
    max-width: 62ch;
    color: var(--text-secondary);
}

.ethics-panel,
.ethics-unavailable,
.ethics-summary-card,
.ethics-state-banner {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: var(--elevation-1);
}

.ethics-panel,
.ethics-unavailable {
    margin-block-end: var(--space-6);
    padding: var(--space-5) var(--space-6);
}

.ethics-panel > h2,
.ethics-unavailable > h2 {
    margin-block: 0 var(--space-3);
    font-size: var(--text-18);
}

.ethics-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-block-end: var(--space-6);
}

.ethics-summary-card {
    padding: var(--space-4) var(--space-5);
}

.ethics-summary-card p {
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--text-12);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ethics-summary-card strong {
    display: block;
    margin-block: var(--space-1);
    font-size: var(--text-32);
    line-height: 1.1;
}

.ethics-summary-card small {
    color: var(--text-tertiary);
    font-size: var(--text-12);
}

.ethics-state-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-block-end: var(--space-6);
    padding: var(--space-4) var(--space-5);
}

.ethics-state-banner p {
    margin: 0;
    color: var(--text-secondary);
}

/* State never relies on colour alone: the dot is decorative and the word is
   the fact. */
.ethics-state-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--status-neutral-border);
    border-radius: var(--radius-pill);
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-size: var(--text-12);
    font-weight: 600;
    white-space: nowrap;
}

.ethics-state-pill > span[aria-hidden="true"] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
    background: currentColor;
}

.ethics-state-pill.is-published,
.ethics-state-pill.is-live {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.ethics-state-pill.is-review,
.ethics-state-pill.is-scheduled {
    border-color: var(--status-info-border);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.ethics-state-pill.is-draft,
.ethics-state-pill.is-paused {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.ethics-state-pill.is-retired,
.ethics-state-pill.is-cancelled {
    border-color: var(--status-danger-border);
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.ethics-error-summary {
    margin-block-end: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--status-danger-border);
    border-radius: var(--radius-md);
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

.ethics-error-summary h2 {
    margin-block: 0 var(--space-2);
    font-size: var(--text-16);
}

.ethics-error-summary:focus {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.ethics-live-status {
    margin-block: var(--space-4) 0;
    color: var(--text-tertiary);
    font-size: var(--text-14);
}

.ethics-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.ethics-field {
    display: grid;
    gap: var(--space-2);
}

.ethics-field.is-wide,
.ethics-form-actions {
    grid-column: 1 / -1;
}

.ethics-field label {
    font-size: var(--text-14);
    font-weight: 600;
}

.ethics-field input,
.ethics-field select,
.ethics-field textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
}

.ethics-field textarea {
    resize: vertical;
}

.ethics-field.ethics-checkbox {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
}

.ethics-field.ethics-checkbox input {
    width: 21px;
    height: 21px;
    accent-color: var(--exxaro-green);
}

.ethics-form-actions,
.ethics-lifecycle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.ethics-lifecycle-actions form {
    margin: 0;
}

.secondary-action.is-destructive {
    border-color: var(--status-danger-border);
    color: var(--status-danger-fg);
}

.ethics-issue-list,
.ethics-change-list,
.questionnaire-version-list,
.questionnaire-question-list,
.questionnaire-preview-list,
.campaign-list,
.campaign-participant-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ethics-issue-list li {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-block-start: 1px solid var(--border-subtle);
}

.ethics-issue-list li:first-child {
    border-block-start: 0;
}

.ethics-issue-list strong {
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: var(--text-13);
}

.ethics-check-clear {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--status-success-fg);
}

.ethics-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-block: var(--space-4);
}

.ethics-comparison-grid dt {
    color: var(--text-tertiary);
    font-size: var(--text-12);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ethics-comparison-grid dd {
    margin: var(--space-1) 0 0;
    font-size: var(--text-14);
}

.ethics-change-list li {
    padding-block: var(--space-1);
    font-size: var(--text-13);
}

.questionnaire-version-row,
.campaign-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4) 0;
    border-block-start: 1px solid var(--border-subtle);
}

.questionnaire-version-row:first-child,
.campaign-row:first-child {
    border-block-start: 0;
}

.questionnaire-version-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    font-size: var(--text-13);
    font-weight: 600;
}

.questionnaire-version-copy h3,
.campaign-row h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-16);
}

.questionnaire-version-copy p,
.campaign-row p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-14);
}

.questionnaire-version-meta,
.questionnaire-question-meta,
.campaign-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-block-start: var(--space-2);
    color: var(--text-tertiary);
    font-size: var(--text-12);
}

.questionnaire-question-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4) 0;
    border-block-start: 1px solid var(--border-subtle);
}

.questionnaire-question-row:first-child {
    border-block-start: 0;
}

.questionnaire-question-code {
    margin: 0;
    color: var(--text-tertiary);
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: var(--text-12);
}

.questionnaire-question-copy h3 {
    margin: var(--space-1) 0;
    font-size: var(--text-16);
}

.questionnaire-question-copy p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-14);
}

.questionnaire-question-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
}

.questionnaire-question-actions form {
    margin: 0;
}

/* Adaptive questionnaire authoring */
.questionnaire-section-list,
.questionnaire-tree ol,
.questionnaire-child-list,
.questionnaire-preview-child-list,
.questionnaire-option-summary {
    margin: 0;
    padding: 0;
    list-style: none;
}

.questionnaire-section-list {
    margin-block-end: var(--space-5);
    border-block: 1px solid var(--border-subtle);
}

.questionnaire-section-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    padding-block: var(--space-3);
    border-block-start: 1px solid var(--border-subtle);
}

.questionnaire-section-list > li:first-child {
    border-block-start: 0;
}

.questionnaire-section-list small {
    display: block;
    margin-block-start: var(--space-1);
    color: var(--text-tertiary);
    font-size: var(--text-12);
}

.questionnaire-section-description {
    display: block;
    margin-block-start: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-14);
}

.questionnaire-inline-actions,
.questionnaire-editor-heading,
.questionnaire-question-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
}

.questionnaire-editor-heading {
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-block-end: var(--space-5);
}

.questionnaire-editor-heading h2,
.questionnaire-editor-heading p {
    margin-block: 0 var(--space-2);
}

.questionnaire-type-picker,
.questionnaire-option-editor {
    margin: 0;
    padding: 0;
    border: 0;
}

.questionnaire-type-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3);
    margin-block-end: var(--space-6);
}

.questionnaire-type-picker legend,
.questionnaire-option-editor legend {
    width: 100%;
    margin-block-end: var(--space-3);
    color: var(--text-primary);
    font-size: var(--text-14);
    font-weight: 600;
}

.questionnaire-type-picker label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    align-content: start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
}

.questionnaire-type-picker label.is-selected {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.questionnaire-type-picker input {
    margin-block-start: var(--space-1);
    accent-color: var(--exxaro-green);
}

.questionnaire-type-picker label strong,
.questionnaire-type-picker label span {
    grid-column: 2;
}

.questionnaire-type-picker label span {
    color: var(--text-secondary);
    font-size: var(--text-12);
}

.questionnaire-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.questionnaire-adaptive-form {
    min-width: 0;
}

.questionnaire-option-editor {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.questionnaire-option-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(200px, 2fr) auto;
    gap: var(--space-3);
    align-items: end;
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border-subtle);
}

.questionnaire-condition-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--status-warning-border);
    border-radius: var(--radius-sm);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.questionnaire-live-preview {
    position: sticky;
    inset-block-start: var(--space-4);
    min-width: 0;
    padding: var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.questionnaire-live-preview h3 {
    margin-block: var(--space-2);
    font-size: var(--text-18);
}

.questionnaire-answer-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block: var(--space-3);
}

.questionnaire-preview-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-placeholder);
    font-size: var(--text-14);
}

.questionnaire-tree {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-5);
}

.questionnaire-tree-section,
.questionnaire-preview-section-group {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    overflow: hidden;
}

.questionnaire-tree-section > h3,
.questionnaire-preview-section-heading {
    margin: 0;
    padding: var(--space-3) var(--space-5);
    border-block-end: 1px solid var(--border-subtle);
    background: var(--surface-card);
}

.questionnaire-tree-section-description {
    margin: 0;
    padding: var(--space-3) var(--space-5);
    border-block-end: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.questionnaire-tree-section > h3,
.questionnaire-preview-section-heading h2 {
    font-size: var(--text-16);
}

.questionnaire-preview-section-heading h2,
.questionnaire-preview-section-heading p {
    margin: 0;
}

.questionnaire-tree-section > ol,
.questionnaire-preview-section-group > ol {
    padding: var(--space-4);
}

.questionnaire-tree-node + .questionnaire-tree-node,
.questionnaire-preview-list > li + li {
    margin-block-start: var(--space-4);
}

.questionnaire-question-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
}

.questionnaire-question-card h4 {
    margin-block: var(--space-1) var(--space-2);
    font-size: var(--text-16);
}

.questionnaire-child-list,
.questionnaire-preview-child-list {
    display: grid;
    gap: var(--space-3);
    max-width: 100%;
    margin: var(--space-3) 0 0 var(--questionnaire-tree-indent);
    padding-inline-start: var(--questionnaire-tree-indent);
    border-inline-start: var(--space-1) solid var(--status-success-border);
}

.questionnaire-tree-node,
.questionnaire-preview-tree-item,
.questionnaire-question-copy,
.questionnaire-preview-card {
    min-width: 0;
    overflow-wrap: anywhere;
}

.questionnaire-reveal-condition {
    margin: 0 0 var(--space-2);
    color: var(--status-success-fg);
    font-size: var(--text-13);
}

.questionnaire-option-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
}

.questionnaire-option-summary li {
    display: inline-flex;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--text-12);
}

.questionnaire-preview-sections {
    display: grid;
    gap: var(--space-5);
}

.questionnaire-preview-banner {
    align-items: flex-start;
}

.questionnaire-preview-banner-heading {
    flex: 1 1 24rem;
}

.questionnaire-preview-banner-heading h1 {
    margin-block: var(--space-2);
    font-size: var(--text-28);
}

.questionnaire-preview-banner-heading p:last-child {
    margin: 0;
}

.questionnaire-preview-banner-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    gap: var(--space-3) var(--space-5);
    margin: 0;
}

.questionnaire-preview-banner-details dt {
    color: var(--text-tertiary);
    font-size: var(--text-12);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.questionnaire-preview-banner-details dd {
    margin: var(--space-1) 0 0;
    font-weight: 700;
}

.questionnaire-preview-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-4);
}

.questionnaire-preview-controls > .ethics-field {
    min-width: min(100%, 16rem);
}

.questionnaire-preview-card :is(h2, h3, h4, h5, h6) {
    margin-block: var(--space-2) var(--space-3);
    font-size: var(--text-18);
}

@media (max-width: 840px) {
    .questionnaire-editor-layout,
    .questionnaire-condition-editor {
        grid-template-columns: 1fr;
    }

    .questionnaire-live-preview {
        position: static;
    }
}

@media (max-width: 520px) {
    .questionnaire-type-picker,
    .questionnaire-option-row,
    .questionnaire-question-card {
        grid-template-columns: 1fr;
    }

    .questionnaire-child-list,
    .questionnaire-preview-child-list {
        margin-inline-start: 0;
        padding-inline-start: var(--questionnaire-tree-compact-indent);
    }

    .questionnaire-inline-actions,
    .questionnaire-question-actions {
        width: 100%;
    }
}

/* End adaptive questionnaire authoring */

.questionnaire-preview-card {
    margin-block-end: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: var(--elevation-1);
}

.questionnaire-preview-section {
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--text-12);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.questionnaire-preview-card :is(h2, h3, h4, h5, h6) {
    margin-block: var(--space-2) var(--space-3);
    font-size: var(--text-18);
}

.questionnaire-preview-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block: var(--space-3);
}

.questionnaire-preview-choice {
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--text-14);
}

.questionnaire-preview-followup {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-14);
}

@media (max-width: 720px) {
    .ethics-page {
        padding: var(--space-5) var(--space-3);
    }

    .questionnaire-version-row,
    .questionnaire-question-row,
    .campaign-row {
        grid-template-columns: 1fr;
    }

    .ethics-form {
        grid-template-columns: 1fr;
    }

    .ethics-form-actions > *,
    .ethics-lifecycle-actions > * {
        width: 100%;
    }

    .ethics-form-actions button,
    .ethics-lifecycle-actions button {
        width: 100%;
        justify-content: center;
    }

    .campaign-review .ethics-panel form .primary-action {
        width: 100%;
    }
}

@media (forced-colors: active) {
    .ethics-state-pill,
    .ethics-panel,
    .ethics-summary-card,
    .questionnaire-preview-choice {
        border: 1px solid CanvasText;
    }
}

.campaign-schedule-readout,
.campaign-audience-stale {
    margin-block-start: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    font-size: var(--text-14);
}

/* Staleness is a blocker, not a hint: it reads as a warning and says why. */
.campaign-audience-stale {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.campaign-fingerprint {
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: var(--text-13);
    letter-spacing: 0.02em;
}

.campaign-participant-list {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.campaign-reconciliation {
    margin-block-end: var(--space-6);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--text-13);
}

.campaign-operations .ethics-summary-row {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Declaration review journey (spec 044)
   Routed approval, Ethics Office outcome, and the Annexure A related-parties
   figure. Everything here uses the shared token vocabulary so light, dark,
   forced colours, reduced motion, and 320px reflow all keep working. */

.review-queue-page,
.review-case-page {
    display: grid;
    gap: var(--space-6);
    max-width: var(--content-max);
}

/* Review summaries are factual orientation, not filters. Rounded, quiet
   surfaces separate the durable counts without making them look like
   buttons or reusing the square dashboard metric strip. */
.review-queue-summary {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.review-queue-stat {
    position: relative;
    display: grid;
    min-width: 0;
    align-items: center;
    gap: var(--space-4);
    grid-template-columns: auto minmax(0, 1fr);
    padding: clamp(var(--space-4), 2.2vw, var(--space-5));
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--elevation-1);
    animation: review-queue-stat-in var(--duration-base) var(--ease-standard) both;
}

.review-queue-stat::after {
    position: absolute;
    top: -2.75rem;
    right: -2.25rem;
    width: 7rem;
    height: 7rem;
    border-radius: var(--radius-round);
    background: color-mix(in srgb, var(--text-tertiary) 6%, transparent);
    content: "";
    pointer-events: none;
}

.review-queue-stat.is-awaiting {
    border-color: color-mix(in srgb, var(--exxaro-green) 42%, var(--border-subtle));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--exxaro-lime-soft) 58%, var(--surface-card)), var(--surface-card) 68%);
    box-shadow: var(--elevation-2);
}

.review-queue-stat-icon {
    position: relative;
    z-index: 1;
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-secondary);
}

.review-queue-stat.is-awaiting .review-queue-stat-icon {
    background: var(--exxaro-lime-soft);
    color: var(--exxaro-green);
}

.review-queue-stat.is-completed .review-queue-stat-icon {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.review-queue-stat.is-no-action .review-queue-stat-icon {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.review-queue-stat.is-total .review-queue-stat-icon {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.review-queue-stat-content {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.review-queue-stat-label {
    color: var(--text-secondary);
    font-size: var(--text-12);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.review-queue-stat-value {
    color: var(--text-primary);
    font-size: var(--text-36);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    line-height: 1;
}

.review-queue-stat.is-awaiting .review-queue-stat-label {
    color: var(--exxaro-green);
}

.review-queue-stat:nth-child(2) {
    animation-delay: 40ms;
}

.review-queue-stat:nth-child(3) {
    animation-delay: 80ms;
}

.review-queue-stat:nth-child(4) {
    animation-delay: 120ms;
}

@keyframes review-queue-stat-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 720px) {
    .review-queue-summary {
        grid-template-columns: 1fr;
    }

    .review-queue-stat {
        padding: var(--space-4);
    }
}

@media (forced-colors: active) {
    .review-queue-stat,
    .review-queue-stat.is-awaiting,
    .review-queue-stat-icon {
        border: 2px solid CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }

    .review-queue-stat::after {
        display: none;
    }

    .review-queue-stat.is-awaiting .review-queue-stat-label {
        color: CanvasText;
    }
}

/* Shared static-workflow summaries use the same calm, factual grammar as the
   durable review queue without coupling either page model to the other. */
.screen-summary {
    gap: var(--space-4);
    overflow: visible;
    border: 0;
    background: transparent;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.screen-summary > .screen-summary-stat {
    display: grid;
    min-width: 0;
    min-height: 0;
    align-items: center;
    gap: var(--space-4);
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
    padding: clamp(var(--space-4), 2.2vw, var(--space-5));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--elevation-1);
}

.screen-summary > .screen-summary-stat:last-child {
    border-right: 1px solid var(--border-subtle);
}

.screen-summary-stat.is-primary {
    border-color: color-mix(in srgb, var(--exxaro-green) 42%, var(--border-subtle));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--exxaro-lime-soft) 58%, var(--surface-card)), var(--surface-card) 68%);
    box-shadow: var(--elevation-2);
}

.screen-summary-stat.is-warning,
.screen-summary-stat.urgent {
    border-color: var(--status-warning-border);
}

.screen-summary-stat-icon {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-secondary);
}

.screen-summary-stat.is-primary .screen-summary-stat-icon {
    background: var(--exxaro-lime-soft);
    color: var(--exxaro-green);
}

.screen-summary-stat.is-completed .screen-summary-stat-icon {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.screen-summary-stat.is-active .screen-summary-stat-icon,
.screen-summary-stat.is-total .screen-summary-stat-icon {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.screen-summary-stat.is-warning .screen-summary-stat-icon,
.screen-summary-stat.urgent .screen-summary-stat-icon {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.screen-summary-stat-content {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.screen-summary-stat .screen-summary-stat-label {
    order: initial;
    color: var(--text-secondary);
    font-size: var(--text-12);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}

.screen-summary-stat .screen-summary-stat-value {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-32);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    line-height: 1;
}

.screen-summary-stat-caption {
    color: var(--text-tertiary);
    font-size: var(--text-13);
    line-height: 1.4;
}

@media (max-width: 720px) {
    .screen-summary {
        grid-template-columns: 1fr;
    }

    .screen-summary > .screen-summary-stat {
        padding: var(--space-4);
    }
}

@media (forced-colors: active) {
    .screen-summary,
    .screen-summary > .screen-summary-stat,
    .screen-summary-stat-icon {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }
}

.review-queue-section,
.review-case-section {
    display: grid;
    gap: var(--space-3);
}

.review-queue-section h2,
.review-case-section h2,
.declaration-outcome-trail h2 {
    margin: 0;
    font-size: var(--text-20);
}

.review-queue-empty {
    margin: 0;
    padding: var(--space-4);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-14);
}

.review-row-list {
    display: grid;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    list-style: none;
}

.review-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4);
    border-left: 3px solid transparent;
    transition: background var(--duration-fast) var(--ease-standard),
        border-left-color var(--duration-fast) var(--ease-standard);
}

/* The row under the pointer, or holding focus, is the one about to be opened. */
.review-row:hover,
.review-row:focus-within {
    border-left-color: var(--exxaro-lime);
    background: var(--surface-subtle);
}

.review-row + .review-row {
    border-top: 1px solid var(--border-subtle);
}

.review-row > a {
    display: grid;
    flex: 1 1 16rem;
    gap: var(--space-1);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.review-row-primary {
    color: var(--text-primary);
    font-size: var(--text-16);
    font-weight: 600;
}

.review-row > a:hover .review-row-primary {
    text-decoration: underline;
}

.review-row-secondary,
.review-row-meta {
    color: var(--text-tertiary);
    font-size: var(--text-13);
}

.review-row-meta {
    flex: 0 0 auto;
}

.review-route-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--exxaro-lime);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--text-14);
}

.review-disclosure-list,
.review-history-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.review-disclosure {
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--exxaro-orange);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.review-disclosure h3 {
    margin: 0;
    font-size: var(--text-16);
}

.review-disclosure-prompt {
    margin: var(--space-1) 0 var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-14);
}

.review-disclosure-details {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-15);
    overflow-wrap: anywhere;
}

.review-case-answers {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.review-case-answers summary {
    cursor: pointer;
    font-size: var(--text-14);
    font-weight: 600;
}

.review-answer-list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.review-answer-list > li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-3);
    padding-block-end: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.review-answer-section {
    color: var(--text-primary);
    font-size: var(--text-14);
    font-weight: 600;
}

.review-answer-prompt {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--text-13);
}

.review-history-entry {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--exxaro-blue);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.review-history-head {
    margin: 0 0 var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-13);
}

.review-history-note {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-14);
    overflow-wrap: anywhere;
}

.review-decision-panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--elevation-1);
}

.review-decision-panel h2 {
    margin: 0;
    font-size: var(--text-20);
}

.review-decision-form {
    display: grid;
    gap: var(--space-5);
}

.review-decision-form fieldset {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.review-decision-form legend {
    padding: 0;
    color: var(--text-primary);
    font-size: var(--text-16);
    font-weight: 600;
}

.review-decision-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-page);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.review-decision-option:hover {
    border-color: var(--status-success-border);
    transform: translateX(2px);
}

.review-decision-option:has(input:checked) {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
}

.review-decision-option:has(input:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.review-decision-option strong {
    display: block;
    color: var(--text-primary);
    font-size: var(--text-15);
}

.review-decision-option .field-help {
    margin: var(--space-1) 0 0;
}

.review-decision-note {
    display: grid;
    gap: var(--space-2);
}

.review-decision-note label {
    color: var(--text-primary);
    font-size: var(--text-15);
    font-weight: 600;
}

.review-decision-note textarea {
    min-height: 8rem;
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-15);
    resize: vertical;
}

.declaration-request-band {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--status-warning-border);
    border-left: 3px solid var(--exxaro-orange);
    border-radius: var(--radius-md);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.explanation-disclosure,
.explanation-question {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.explanation-question {
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-page);
    overflow-wrap: anywhere;
}

.explanation-disclosure textarea {
    width: 100%;
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text-primary);
    font: inherit;
    resize: vertical;
}

.explanation-disclosure textarea:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.declaration-request-band h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-18);
}

.declaration-request-note {
    margin: 0 0 var(--space-2);
    font-size: var(--text-15);
    overflow-wrap: anywhere;
}

.declaration-outcome-trail {
    display: grid;
    gap: var(--space-3);
}

.board-route-note {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--exxaro-lime);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.board-route-note h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-18);
}

.board-route-note p {
    margin: 0;
    max-width: var(--measure-lede);
    color: var(--text-secondary);
    font-size: var(--text-15);
}

@media (max-width: 720px) {
    .review-row {
        align-items: flex-start;
    }

    .review-answer-list > li {
        grid-template-columns: 1fr;
    }
}

@media (forced-colors: active) {
    .review-decision-option:has(input:checked) {
        outline: 2px solid CanvasText;
    }
}

/* Annexure A: related parties.
   Rebuilt as text so the degree labels stay readable, translatable and
   reflowable. The policy's dashed box around the first two degrees is a real
   grouping element here, so the rule it carries survives without the drawing.
   Motion only ever reveals or emphasises structure, and the global
   reduced-motion rule neutralises all of it. */

.related-parties-guide {
    position: relative;
    min-width: 0;
    scroll-margin-block-start: 7rem;
    margin-block-end: var(--space-6);
    border: 1px dashed color-mix(in srgb, var(--exxaro-green) 48%, var(--border-subtle));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-subtle) 96%, var(--exxaro-lime));
    transition: border-color var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard);
}

.related-parties-guide[open] {
    border-style: solid;
    border-color: var(--exxaro-lime);
    background: var(--surface-card);
}

.related-parties-guide > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    cursor: pointer;
    list-style: none;
}

.related-parties-guide > summary::-webkit-details-marker {
    display: none;
}

.related-parties-guide > summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.related-parties-summary-icon {
    display: inline-grid;
    width: var(--space-10);
    height: var(--space-10);
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--exxaro-lime-soft);
    color: var(--exxaro-green);
}

.related-parties-summary-text {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.related-parties-summary-text strong {
    color: var(--text-primary);
    font-size: var(--text-16);
}

.related-parties-summary-text .related-parties-policy-label {
    width: fit-content;
    color: var(--exxaro-green);
    font-size: var(--text-11);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.related-parties-summary-text span {
    color: var(--text-tertiary);
    font-size: var(--text-13);
}

/* A chevron rather than the native marker, so the open state reads the same in
   every browser and can share the one motion standard. */
.related-parties-summary-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--text-tertiary);
    border-bottom: 2px solid var(--text-tertiary);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--duration-base) var(--ease-standard);
}

.related-parties-guide[open] .related-parties-summary-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}

.related-parties-body {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding: 0 var(--space-5) var(--space-5);
}

.related-parties-body > *,
.related-parties-full-reference,
.related-parties-full-reference-body,
.related-parties-full-reference-body > *,
.related-parties-figure,
.related-parties-scroll {
    min-width: 0;
}

.related-parties-body > p {
    max-width: var(--measure-lede);
    margin: 0;
}

.related-parties-reference-note {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--exxaro-lime);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--text-13);
}

.related-parties-reference-note strong {
    color: var(--text-primary);
}

.related-parties-decision-path {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-parties-decision-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.related-parties-decision-step.is-safest-choice {
    border-color: var(--exxaro-green);
    background: var(--exxaro-lime-soft);
}

.related-parties-decision-step.is-safest-choice strong,
.related-parties-decision-step.is-safest-choice > div > span {
    color: var(--exxaro-brown);
}

.related-parties-step-number {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--exxaro-green);
    color: var(--surface-card);
    font-size: var(--text-13);
    font-weight: 800;
}

.related-parties-decision-step > div {
    display: grid;
    gap: var(--space-2);
}

.related-parties-decision-step strong {
    color: var(--text-primary);
    font-size: var(--text-14);
}

.related-parties-decision-step > div > span {
    color: var(--text-secondary);
    font-size: var(--text-13);
    line-height: 1.5;
}

.related-parties-full-reference {
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.related-parties-full-reference > summary {
    min-height: 44px;
    padding-block: var(--space-3);
    color: var(--exxaro-green);
    cursor: pointer;
    font-size: var(--text-14);
    font-weight: 700;
}

.related-parties-full-reference > summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.related-parties-full-reference-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-2) var(--space-5);
}

.related-parties-full-reference-body > p {
    max-width: var(--measure-lede);
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.related-parties-figure {
    margin: 0;
}

.related-parties-figure > figcaption {
    display: grid;
    max-width: var(--measure-lede);
    gap: var(--space-1);
    margin-block-end: var(--space-4);
}

.relationship-map-kicker {
    color: var(--exxaro-green);
    font-size: var(--text-11);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.related-parties-figure > figcaption strong {
    color: var(--text-primary);
    font-size: var(--text-20);
    line-height: 1.25;
}

.related-parties-figure > figcaption > span:last-child {
    color: var(--text-secondary);
    font-size: var(--text-13);
}

.related-parties-scroll {
    max-width: 100%;
    overflow: visible;
}

.relationship-map {
    position: relative;
    display: grid;
    min-width: 0;
    gap: var(--space-5);
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top center, color-mix(in srgb, var(--exxaro-lime-soft) 46%, transparent), transparent 18rem),
        var(--surface-subtle);
}

.relationship-map-anchor {
    position: relative;
    z-index: 1;
    display: inline-grid;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    justify-self: center;
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--exxaro-green);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    box-shadow: var(--elevation-1);
}

.relationship-map-anchor::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: var(--space-5);
    background: var(--border-strong);
    content: "";
}

.relationship-map-anchor-icon {
    display: inline-grid;
    width: var(--space-10);
    height: var(--space-10);
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--exxaro-lime-soft);
    color: var(--exxaro-green);
}

.relationship-map-anchor > span:last-child {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.relationship-map-anchor small,
.relationship-map-anchor > span:last-child > span {
    color: var(--text-tertiary);
    font-size: var(--text-11);
}

.relationship-map-anchor small {
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.relationship-map-anchor strong {
    color: var(--text-primary);
    font-size: var(--text-14);
}

.relationship-map-always {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 40rem);
    align-items: center;
    justify-self: center;
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--status-success-border);
    border-radius: var(--radius-md);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.relationship-map-always > .semantic-icon {
    display: inline-grid;
    width: var(--space-8);
    height: var(--space-8);
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface-card);
}

.relationship-map-always > span:last-child {
    display: grid;
    gap: 2px;
}

.relationship-map-always strong {
    font-size: var(--text-14);
}

.relationship-map-always > span:last-child > span {
    font-size: var(--text-12);
    line-height: 1.45;
}

.relationship-map-lanes {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.relationship-lane {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--exxaro-blue);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--elevation-1);
}

.relationship-lane.is-partnership {
    border-top-color: var(--exxaro-gold);
}

.relationship-lane-heading {
    display: grid;
    align-items: center;
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
}

.relationship-lane-heading > .semantic-icon {
    display: inline-grid;
    width: var(--space-9);
    height: var(--space-9);
    place-items: center;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--exxaro-blue) 12%, var(--surface-card));
    color: var(--exxaro-blue);
}

.relationship-lane.is-partnership .relationship-lane-heading > .semantic-icon {
    background: color-mix(in srgb, var(--exxaro-gold) 18%, var(--surface-card));
    color: color-mix(in srgb, var(--exxaro-gold) 72%, var(--text-primary));
}

.relationship-lane-heading h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-15);
    line-height: 1.3;
}

.relationship-lane-heading small {
    color: var(--text-tertiary);
    font-size: var(--text-11);
}

.relationship-degree-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.relationship-degree {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: var(--space-3);
    grid-template-columns: 4rem minmax(0, 1fr);
    padding: var(--space-4);
}

.relationship-degree + .relationship-degree {
    border-top: 1px solid var(--border-subtle);
}

.relationship-degree.is-always {
    background: color-mix(in srgb, var(--exxaro-lime-soft) 48%, var(--surface-card));
}

.relationship-degree-marker {
    display: inline-grid;
    min-height: var(--space-9);
    place-items: center;
    padding-inline: var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--text-11);
    font-weight: 800;
    text-align: center;
}

.relationship-degree.is-always .relationship-degree-marker {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.relationship-degree-content {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
}

.relationship-degree-rule {
    color: var(--text-tertiary);
    font-size: var(--text-11);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.relationship-degree.is-always .relationship-degree-rule {
    color: var(--status-success-fg);
}

.relationship-people {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.relationship-person {
    padding: 3px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--text-12);
    line-height: 1.45;
}

.relationship-degree.is-always .relationship-person {
    background: var(--surface-card);
    color: var(--text-primary);
}

.relationship-map-conditional-rule {
    display: grid;
    align-items: start;
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--exxaro-blue);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--text-13);
    line-height: 1.5;
}

.relationship-map-conditional-rule strong {
    color: var(--text-primary);
}

/* The explicit open action reveals the map in its reading order. Static SSR
   already contains every word, and the global reduced-motion rule collapses
   the duration without hiding content. */
.related-parties-guide[open] .related-parties-decision-step,
.related-parties-full-reference[open] .relationship-map-anchor,
.related-parties-full-reference[open] .relationship-map-always,
.related-parties-full-reference[open] .relationship-lane,
.related-parties-full-reference[open] .relationship-map-conditional-rule {
    animation: relationship-map-in var(--duration-base) var(--ease-standard) both;
}

.related-parties-guide[open] .related-parties-decision-step:nth-child(2),
.related-parties-full-reference[open] .relationship-map-always {
    animation-delay: 40ms;
}

.related-parties-guide[open] .related-parties-decision-step:nth-child(3),
.related-parties-full-reference[open] .relationship-lane:nth-child(1) {
    animation-delay: 80ms;
}

.related-parties-full-reference[open] .relationship-lane:nth-child(2) {
    animation-delay: 120ms;
}

.related-parties-full-reference[open] .relationship-map-conditional-rule {
    animation-delay: 160ms;
}

@keyframes relationship-map-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.related-parties-fallback {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--exxaro-lime);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    font-size: var(--text-14);
}

@media (max-width: 720px) {
    .related-parties-guide > summary {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .related-parties-summary-chevron {
        display: none;
    }

    .related-parties-decision-path {
        grid-template-columns: 1fr;
    }

    .relationship-map-lanes {
        grid-template-columns: 1fr;
    }

    .relationship-map {
        padding: var(--space-4);
    }
}

@media (max-width: 440px) {
    .relationship-map-anchor {
        width: 100%;
        border-radius: var(--radius-md);
    }

    .relationship-degree {
        grid-template-columns: 1fr;
    }

    .relationship-degree-marker {
        width: fit-content;
        min-height: var(--space-8);
    }
}

@media (forced-colors: active) {
    .related-parties-guide,
    .related-parties-decision-step,
    .related-parties-reference-note,
    .relationship-map,
    .relationship-map-anchor,
    .relationship-map-always,
    .relationship-lane,
    .relationship-degree-marker,
    .relationship-person,
    .relationship-map-conditional-rule {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .relationship-lane {
        border-top-width: 3px;
    }

    .relationship-degree.is-always {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }

    .related-parties-decision-step.is-safest-choice strong,
    .related-parties-decision-step.is-safest-choice > div > span,
    .relationship-degree.is-always .relationship-degree-rule,
    .relationship-degree.is-always .relationship-person {
        color: CanvasText;
    }
}

@media print {
    .related-parties-guide > :not(summary),
    .related-parties-full-reference > :not(summary) {
        display: block !important;
    }

    .related-parties-guide,
    .relationship-map,
    .relationship-lane,
    .relationship-degree {
        break-inside: avoid;
    }

    .relationship-map {
        border: 1px solid currentColor;
        background: transparent;
    }
}

/* Synthetic account creation (spec 044)
   The creation form names the part an account plays in a review rather than a
   declarant cohort, so each option carries a one-line explanation of where it
   lands and who reviews it. */

.synthetic-role-note {
    display: block;
    margin-block-start: var(--space-1);
}

.synthetic-role-note strong {
    color: var(--text-secondary);
}

/* Review chain panel (spec 044)
   Routing is decided from persisted relationships, so the panel that shows them
   reuses the identity attribute grid rather than inventing a second vocabulary. */

.review-chain-panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--elevation-1);
}

.review-chain-empty {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-14);
}

.review-chain-reason {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--exxaro-lime);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--text-14);
}

/* A fallback route means somebody's manager data needs fixing, so it reads as a
   caution rather than as an ordinary explanation. */
.review-chain-reason.is-fallback {
    border-color: var(--status-warning-border);
    border-left-color: var(--exxaro-orange);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

/* Declaration progress (spec 044)
   The bar is the one place a declarant sees how far through they are, so it
   moves to its new value rather than jumping, and answers a question about
   momentum that a number alone does not. */

.declaration-progress progress {
    transition: none;
}

.declaration-progress progress::-moz-progress-bar {
    transition: width var(--duration-base) var(--ease-standard);
}

.declaration-progress progress::-webkit-progress-value {
    transition: width var(--duration-base) var(--ease-standard);
}

/* User-tested anonymous entry and registration hierarchy (spec 047). */
.auth-journey-choice,
.returning-sign-in,
.development-signin-content {
  display: grid;
  gap: var(--space-5);
}

.auth-journey-choice > h2,
.returning-sign-in h2,
.auth-journey-card h3,
.development-signin-content h3 {
  margin: 0;
}

.auth-journey-choice > h2 {
  font-size: var(--text-20);
}

.auth-journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.auth-journey-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.auth-journey-card.registration-first {
  border-color: var(--status-success-border);
  box-shadow: var(--elevation-2);
}

.auth-journey-card.registration-first .login-submit,
.registration-card .login-submit {
  min-height: calc(var(--space-10) + var(--space-2));
  padding: var(--space-3) var(--space-5);
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
}

.auth-journey-card.registration-first .login-submit:hover,
.registration-card .login-submit:hover {
  background: color-mix(in srgb, var(--exxaro-lime) 88%, var(--ink));
  color: var(--exxaro-brown);
}

.auth-journey-card.registration-first .login-submit:focus-visible,
.registration-card .login-submit:focus-visible {
  outline-color: var(--focus-ring);
  box-shadow: var(--focus-halo);
}

.auth-journey-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.auth-journey-card .login-submit,
.auth-journey-card .login-method-action {
  width: fit-content;
  min-height: calc(var(--space-10) + var(--space-1));
  margin-block-start: auto;
}

.returning-sign-in {
  scroll-margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.development-signin-disclosure {
  border: 1px solid var(--status-warning-border);
  border-radius: var(--radius-md);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.development-signin-disclosure > summary {
  min-height: calc(var(--space-10) + var(--space-1));
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-14);
  font-weight: 700;
  cursor: pointer;
}

.development-signin-disclosure[open] > summary {
  border-bottom: 1px solid var(--status-warning-border);
}

.development-signin-content {
  padding: var(--space-5);
  color: var(--text-primary);
}

.development-signin-content > p,
.development-signin-content .auth-transition-note p,
.synthetic-account-creator > p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.synthetic-account-creator,
.auth-transition-note {
  display: grid;
  gap: var(--space-4);
  padding-block-start: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.registration-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.registration-progress-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

.registration-progress-step > span:last-child {
  display: grid;
  gap: var(--space-1);
}

.registration-progress-step strong,
.registration-progress-step small {
  display: block;
}

.registration-progress-step strong {
  font-size: var(--text-13);
}

.registration-progress-step small {
  font-size: var(--text-11);
}

.registration-progress-step.current {
  border-color: var(--status-info-border);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.registration-progress-step.complete {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.registration-progress-number {
  display: inline-grid;
  width: var(--space-6);
  height: var(--space-6);
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-round);
  font-size: var(--text-12);
  font-weight: 700;
}

.registration-verified,
.registration-next-step {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--status-success-border);
  border-radius: var(--radius-md);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.registration-verified {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
}

.registration-verified .semantic-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--exxaro-green);
}

.registration-cellphone-guidance {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.registration-cellphone-guidance .semantic-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--exxaro-accent);
}

.registration-next-step {
  font-size: var(--text-14);
}

/* The restart control posts, so it needs a form around it. The wrapper is taken
   out of the layout entirely: the button then sits exactly where the link it
   replaced sat, inside whichever flex or grid parent it lands in. */
.registration-restart-form {
  display: contents;
}

.registration-recovery-action,
.board-registration-help > summary {
  color: var(--link-on-surface);
  font-weight: 600;
}

.board-registration-help {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.board-registration-help > summary {
  min-height: calc(var(--space-10) + var(--space-1));
  cursor: pointer;
}

@media (max-width: 640px) {
  .auth-journey-grid {
    grid-template-columns: 1fr;
  }

  .registration-progress {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-1);
  }

  .registration-progress-step {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-1);
    text-align: center;
  }

  .registration-progress-step strong {
    font-size: var(--text-11);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .registration-progress-purpose {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .registration-progress-number {
    width: var(--space-5);
    height: var(--space-5);
  }

  .auth-journey-card,
  .development-signin-content {
    padding: var(--space-4);
  }
}

@media (forced-colors: active) {
  .auth-journey-card.registration-first,
  .registration-progress-step.current,
  .registration-progress-step.complete,
  .registration-verified,
  .registration-next-step {
    border-width: 2px;
  }
}

/* Historical sign-in-first simplification (spec 048).
   Feature 106's later image-first contract supersedes the narrow composition.
   The final scoped rules below keep visual and reading order aligned. */
.login-page {
  grid-template-areas: "brand auth";
}

.login-panel {
  grid-area: auth;
}

.login-brand-story {
  grid-area: brand;
}

.login-auth-inner {
  width: min(100%, 560px);
  gap: var(--space-5);
}

.login-copy {
  margin: 0;
}

.auth-entry-primary,
.auth-entry-copy,
.auth-entry-support,
.sign-in-help-disclosure > div {
  display: grid;
}

.auth-entry-primary {
  gap: var(--space-5);
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--elevation-2);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

.auth-entry-copy {
  gap: var(--space-1);
}

.auth-entry-copy h2,
.auth-entry-copy p {
  margin: 0;
}

.auth-entry-copy h2 {
  color: var(--text-primary);
  font-size: var(--text-20);
}

.auth-entry-copy > p:last-child {
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.auth-entry-primary .credential-field {
  margin-bottom: var(--space-4);
}

.auth-entry-primary .sign-in-primary-action {
  width: 100%;
  min-height: 52px;
  border: 1px solid transparent;
  background: var(--ink);
  box-shadow: var(--elevation-1);
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.auth-entry-primary .sign-in-primary-action:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

.auth-entry-primary .sign-in-primary-action:active {
  transform: scale(0.98);
}

:root[data-theme="dark"] .auth-entry-primary .sign-in-primary-action {
  background: #2e2824;
  border: 1px solid var(--dark-border-subtle);
}

:root[data-theme="dark"] .auth-entry-primary .sign-in-primary-action:hover {
  background: #3c342f;
  border-color: var(--exxaro-lime);
}

.registration-entry-invite {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.registration-entry-invite a {
  color: var(--link-on-surface);
  font-weight: 600;
  text-underline-offset: 3px;
}

.sign-in-handoff-note {
  display: block;
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-13);
  text-align: center;
}

.auth-entry-support {
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-13);
}

.auth-entry-support > a {
  width: fit-content;
  color: var(--link-on-surface);
  font-weight: 600;
  text-underline-offset: 3px;
}

.sign-in-help-disclosure {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-standard);
}

.sign-in-help-disclosure:hover {
  border-color: var(--neutral-400);
}

.sign-in-help-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.sign-in-help-disclosure > summary::-webkit-details-marker {
  display: none;
}

.sign-in-help-disclosure > summary::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--ease-standard);
  margin-left: var(--space-2);
  flex-shrink: 0;
}

.sign-in-help-disclosure[open] > summary::after {
  transform: rotate(-135deg);
}

.sign-in-help-disclosure[open] > summary {
  border-bottom: 1px solid var(--border-subtle);
}

.sign-in-help-disclosure > div {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.sign-in-help-disclosure p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-12);
}

/* Historical mobile truck hero (AUTH-DEF-005 / spec 054).
   Feature 106 now uses the single gallery first and retires this duplicate bar. */
.login-mobile-hero {
  display: none;
}

@media (max-width: 960px) {
  .login-page {
    grid-template-areas: "auth";
  }

  .login-panel,
  .login-panel.conditional {
    display: block;
    min-height: auto;
    padding: 0;
  }

  .login-brand-story {
    display: none;
  }

  .login-mobile-hero {
    display: grid;
    position: relative;
    width: 100%;
    /* Follow width, not browser chrome or the software keyboard. Keep enough
       of the lower photograph to show both vehicles on small Androids too. */
    height: clamp(128px, 40vw, 240px);
    align-items: start;
    overflow: hidden;
    padding: clamp(var(--space-3), 4vw, var(--space-6));
    /* Own this composition here for both themes. A later background shorthand
       previously reset the focal point to sky and cropped out the machinery. */
    background:
      linear-gradient(90deg, rgba(20, 18, 16, 0.58), rgba(20, 18, 16, 0) 62%),
      url("images/login-mine-backdrop.jpg") center bottom / cover no-repeat,
      var(--exxaro-brown);
  }

  .login-mobile-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--exxaro-lime);
    content: "";
  }

  .login-mobile-hero > img {
    position: relative;
    z-index: 1;
    width: clamp(112px, 30vw, 150px);
    height: auto;
    mix-blend-mode: screen;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.24));
  }

  .login-auth-inner {
    min-width: 0;
    margin-inline: auto;
    padding: clamp(32px, 7vw, 64px);
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-entry-primary,
  .auth-entry-support {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .login-auth-inner {
    padding: var(--space-4) var(--space-4) var(--space-6);
    gap: var(--space-4);
  }

  .auth-entry-primary {
    padding: var(--space-4);
    gap: var(--space-4);
  }

  .auth-entry-primary .sign-in-primary-action {
    gap: var(--space-3);
    padding-inline: var(--space-4);
    min-height: 48px;
  }

  .auth-entry-primary .sign-in-primary-action .sso-label {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  /* Keep task spacing compact without sacrificing the photograph's subject
     or shrinking the wordmark. Short screens retain native vertical scrolling. */
  .auth-entry-primary .credential-field {
    margin-bottom: var(--space-2);
  }

  .login-copy h1 {
    font-size: var(--text-24);
  }

  .login-auth-inner {
    padding: var(--space-2) var(--space-3) var(--space-5);
    gap: var(--space-2);
  }

  .auth-entry-primary {
    padding: var(--space-2) var(--space-3) var(--space-3);
    gap: var(--space-2);
  }

  .registration-entry-invite {
    font-size: var(--text-13);
  }

  .sign-in-handoff-note {
    margin-top: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-entry-primary .sign-in-primary-action {
    transition: none;
  }

  .auth-entry-primary .sign-in-primary-action:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .login-mobile-hero {
    height: auto;
    min-height: 0;
    padding: 0;
    border-bottom: 2px solid CanvasText;
    background: Canvas;
  }

  .login-mobile-hero > img {
    display: none;
  }

  .auth-entry-primary {
    border: 2px solid ButtonText;
  }
}

/* Compact registration journey (spec 048). */
.registration-card {
  width: min(34rem, calc(100vw - 2rem));
  gap: var(--space-4);
}

.registration-progress,
.registration-progress-step {
  min-width: 0;
}

.registration-step-position {
  color: var(--text-secondary);
  font-size: var(--text-13);
  font-weight: 700;
}

.registration-progress-step {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: var(--space-2);
}

.registration-progress-step > span:last-child {
  display: block;
}

.registration-progress-step strong {
  font-size: var(--text-12);
  line-height: 1.25;
}

.support-help-disclosure {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.support-help-disclosure > summary {
  display: list-item;
  box-sizing: border-box;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  color: var(--link-on-surface);
  cursor: pointer;
  font-size: var(--text-14);
  font-weight: 700;
  line-height: 1.4;
}

.support-help-disclosure > summary::marker {
  color: var(--link-on-surface);
}

.support-help-disclosure > summary:hover {
  background: color-mix(in srgb, var(--surface-subtle) 86%, var(--exxaro-blue));
}

.support-help-disclosure > summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
  box-shadow: var(--focus-halo);
}

.support-help-disclosure[open] > summary {
  border-bottom: 1px solid var(--border-subtle);
}

.support-help-content {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.support-help-content p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
  line-height: 1.5;
}

.support-help-content strong {
  color: var(--text-primary);
}

.support-help-action {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border-left: 3px solid var(--exxaro-lime);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--status-success-bg);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.support-help-action span,
.support-help-boundary {
  font-size: var(--text-13);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .registration-card {
    gap: var(--space-4);
  }

  .registration-progress-step {
    grid-template-columns: 1fr;
  }

  .registration-progress-step strong {
    font-size: var(--text-11);
  }

}

@media (forced-colors: active) {
  .support-help-disclosure,
  .registration-progress-step.current,
  .registration-progress-step.complete {
    border-width: 2px;
  }

  .support-help-action {
    border-left-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* Shared logical environment and data-use indicator (spec 048). */
.empty-layout-utilities {
  position: relative;
  z-index: 45;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-card);
}

.empty-layout-theme-control {
  position: static;
}

.environment-indicator {
  --environment-accent: var(--exxaro-green);
  position: static;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-secondary);
  box-shadow: var(--elevation-1);
  overflow-wrap: anywhere;
}

.environment-indicator:not(.tone-unknown) {
  background: color-mix(in srgb, var(--surface-card) 94%, var(--environment-accent));
}

.app-workspace > .environment-indicator {
  flex: 0 0 auto;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

.environment-indicator.tone-synthetic {
  --environment-accent: var(--exxaro-lime);
}

.environment-indicator.tone-pre-production {
  --environment-accent: var(--exxaro-blue);
}

.environment-indicator.tone-live {
  --environment-accent: var(--exxaro-green);
}

.environment-indicator.tone-unknown {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.environment-indicator-summary {
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-13);
  font-weight: 700;
}

.environment-code {
  flex: 0 0 auto;
}

.environment-stage-chip {
  min-width: 3.5rem;
  padding: 4px var(--space-2);
  border: 1px solid color-mix(in srgb, var(--environment-accent) 52%, var(--border-subtle));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-card) 78%, var(--environment-accent));
  color: var(--text-primary);
  letter-spacing: 0.08em;
  text-align: center;
}

.environment-detail {
  min-width: min(100%, 17rem);
}

.environment-detail > summary {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  color: currentColor;
  cursor: pointer;
  font-size: var(--text-12);
  font-weight: 700;
  text-underline-offset: 3px;
}

.environment-detail > summary:focus-visible {
  border-radius: var(--radius-sm);
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.environment-detail-content {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-3) var(--space-2);
  font-size: var(--text-13);
  line-height: 1.5;
}

.environment-detail-content p {
  margin: 0;
}

.environment-detail-content a {
  width: fit-content;
  color: currentColor;
  font-weight: 700;
  text-underline-offset: 3px;
}

[data-theme="dark"] .environment-indicator {
  border-color: color-mix(in srgb, var(--border-subtle) 82%, var(--environment-accent));
  background: color-mix(in srgb, var(--surface-card) 92%, var(--environment-accent));
}

@media (max-width: 640px) {
  .empty-layout-utilities {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .environment-indicator {
    flex-flow: row wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) var(--space-3);
  }

  .environment-indicator-summary {
    flex-wrap: wrap;
  }

  .password-input-shell {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .environment-detail {
    width: auto;
    min-width: 0;
  }

  .environment-detail[open] {
    width: 100%;
    flex-basis: 100%;
  }
}

@media (forced-colors: active) {
  .environment-indicator,
  .environment-indicator.tone-synthetic,
  .environment-indicator.tone-pre-production,
  .environment-indicator.tone-live,
  .environment-indicator.tone-unknown {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .environment-code {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .password-visibility-toggle {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}

/* Low-copy critical-surface rhythm (spec 048). */
.employee-home-heading,
.page-heading,
.employee-declare-heading {
  max-width: 44rem;
}

.employee-home-heading > p:last-child,
.page-heading > .lede,
.employee-declare-heading > p:last-child {
  max-width: 60ch;
  color: var(--text-secondary);
  line-height: 1.5;
}

.declaration-live-status:empty {
  display: none;
}

/* Anonymous-page build identity remains available without covering a task. */
.empty-layout-version-control {
  position: static;
  display: flex;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-subtle);
}

@media (max-width: 640px) {
  .empty-layout-version-control {
    right: auto;
    bottom: auto;
    padding: var(--space-3);
  }
}

/* ==========================================================================
   Elevated Design Engineering Surfaces (Emil Kowalski & Apple Design Systems)
   ========================================================================== */

/* Elevated Queue Unavailable & Restricted State */
.declaration-unavailable {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: flex-start;
  margin-block: var(--space-6);
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px solid color-mix(in srgb, var(--status-warning-border, #d97706) 35%, var(--border-subtle));
  border-left: 5px solid var(--status-warning-border, #d97706);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.declaration-unavailable-icon {
  display: inline-grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--status-warning-border, #d97706) 12%, transparent);
  color: var(--status-warning-border, #d97706);
}

.declaration-unavailable-icon .semantic-icon {
  width: 26px;
  height: 26px;
}

.declaration-unavailable-body {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.declaration-unavailable-body h2 {
  margin: 0;
  font-size: var(--text-20);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.declaration-unavailable-body p {
  margin: 0;
  font-size: var(--text-15);
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 62ch;
}

.declaration-unavailable-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

@media (max-width: 640px) {
  .declaration-unavailable {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Elevated Review Queue Empty State */
.review-queue-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(var(--space-8), 6vw, var(--space-12)) var(--space-6);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-subtle) 40%, var(--surface-card));
  margin-block: var(--space-4);
}

.empty-card-icon {
  display: inline-grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--exxaro-green) 12%, transparent);
  color: var(--exxaro-green);
  margin-bottom: var(--space-3);
}

.empty-card-icon .semantic-icon {
  width: 28px;
  height: 28px;
}

.empty-card-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-18);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
}

.review-queue-empty-card .review-queue-empty {
  margin: 0;
  font-size: var(--text-14);
  color: var(--text-secondary);
  max-width: 52ch;
  line-height: 1.5;
}

/* Elevated Access Management Hub */
.access-loading-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--text-secondary);
  font-size: var(--text-15);
}

.access-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border-subtle);
  border-top-color: var(--exxaro-accent);
  border-radius: var(--radius-round);
  animation: spin 600ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.access-hub-grid {
  display: grid;
  /* min() lets the track shrink below its preferred floor rather than forcing
     the grid wider than its container. Without it a 310px floor overflows a
     320px viewport, whose content box is narrower still once page padding is
     taken out. */
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: var(--space-6);
}

.access-hub-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
  position: relative;
  overflow: hidden;
}

.access-hub-card:hover {
  transform: translateY(-3px);
  border-color: var(--exxaro-accent);
  box-shadow: var(--elevation-2);
}

.access-hub-card:active {
  transform: scale(0.98);
}

.access-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.access-card-icon-badge {
  display: inline-grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border-radius: var(--radius-md);
}

.is-roles .access-card-icon-badge {
  background: color-mix(in srgb, var(--exxaro-green) 12%, transparent);
  color: var(--exxaro-green);
}

.is-users .access-card-icon-badge {
  background: color-mix(in srgb, var(--exxaro-accent) 12%, transparent);
  color: var(--exxaro-accent);
}

.is-designations .access-card-icon-badge {
  background: color-mix(in srgb, var(--exxaro-blue) 12%, transparent);
  color: var(--exxaro-blue);
}

.access-card-icon-badge .semantic-icon {
  width: 24px;
  height: 24px;
}

.access-card-scope-badge {
  font-size: var(--text-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.access-card-body {
  flex: 1 1 auto;
  margin-bottom: var(--space-5);
}

.access-card-body h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-20);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.access-card-body p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-14);
  color: var(--text-secondary);
  line-height: 1.5;
}

.access-card-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.access-meta-pill {
  font-size: var(--text-12);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.access-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: var(--text-14);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

.access-hub-card:hover .access-card-action {
  background: var(--exxaro-lime);
  border-color: var(--exxaro-lime);
  color: var(--exxaro-brown);
}

.action-arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-standard);
  font-size: var(--text-16);
  line-height: 1;
}

.access-hub-card:hover .action-arrow {
  transform: translateX(4px);
}

.access-governance-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  margin-top: var(--space-2);
}

.access-governance-icon {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--exxaro-green) 12%, transparent);
  color: var(--exxaro-green);
}

.access-governance-icon .semantic-icon {
  width: 18px;
  height: 18px;
}

.access-governance-content strong {
  display: block;
  font-size: var(--text-14);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.access-governance-content p {
  margin: 0;
  font-size: var(--text-13);
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
  margin-bottom: var(--space-3);
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-13);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.back-link:hover {
  color: var(--exxaro-accent);
  transform: translateX(-2px);
}

.back-link:active {
  transform: scale(0.97);
}

/* ==========================================================================
   Elevated Sign-Out and Authentication Status Surfaces
   ========================================================================== */

.auth-status-panel,
.auth-status-card {
  text-align: center;
  align-items: center;
  justify-items: center;
}

.auth-status-icon-wrapper {
  margin-block: var(--space-4);
  display: flex;
  justify-content: center;
}

.auth-status-symbol {
  display: inline-block;
  width: var(--space-8);
  height: var(--space-8);
  flex: 0 0 auto;
  color: var(--status-success-fg);
}

.auth-status-symbol::before {
  width: 100%;
  height: 100%;
}

.auth-status-symbol.is-error {
  color: var(--status-warning-fg);
}

.auth-status-description {
  margin-inline: auto;
  max-width: 48ch;
  color: var(--text-secondary);
  font-size: var(--text-15);
  line-height: 1.55;
}

.auth-security-notice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--text-13);
  line-height: 1.45;
  max-width: 46ch;
}

.auth-security-notice-icon {
  display: inline-block;
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
  color: var(--text-secondary);
}

.auth-security-notice-icon::before {
  width: 100%;
  height: 100%;
}

.auth-reference-card {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
}

.auth-reference-label {
  font-size: var(--text-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: 700;
}

.auth-reference-code {
  font-size: var(--text-15);
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
  font-weight: 700;
}

.auth-status-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.auth-status-actions .login-submit {
  min-width: 14rem;
}

/* ========================================================================
   COI visual elevation — 078-gemini-coi-ux
   --------------------------------------------------------------------------
   A final composition layer keeps the approved palette, local icon contract,
   and calm motion vocabulary consistent across every journey. The dark
   surface is deliberately tonal rather than black, with a restrained brand
   glow to give the page the same sense of place as the light appearance.
   ========================================================================== */

html,
body {
  background: var(--surface-page);
}

body {
  background-image:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--exxaro-lime) 10%, transparent), transparent 28rem),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--exxaro-blue) 6%, transparent), transparent 32rem);
  background-attachment: fixed;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
}

code,
kbd,
pre,
.persona-id,
.registration-development-code-value {
  font-family: var(--font-mono);
}

.app-frame,
.app-workspace {
  background: var(--surface-page);
}

.app-sidebar {
  background: var(--shell-sidebar);
  border-right: 1px solid var(--shell-sidebar-line);
}

.brand-panel {
  border-bottom-color: var(--shell-sidebar-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--exxaro-lime) 9%, transparent), transparent 62%),
    var(--shell-sidebar);
}

.workspace-label {
  border-bottom: 1px solid color-mix(in srgb, var(--shell-sidebar-line) 72%, transparent);
}

.workspace-label strong,
.sidebar-footer strong {
  color: var(--shell-sidebar-text);
}

.workspace-label small,
.sidebar-footer a,
.org-pill,
.profile-summary-link,
.side-nav-link {
  color: var(--shell-sidebar-muted);
}

.side-nav-link {
  min-height: 44px;
}

.side-nav-link:hover {
  color: var(--shell-sidebar-text);
  background: color-mix(in srgb, var(--shell-sidebar-text) 8%, transparent);
}

.side-nav-link.active {
  color: var(--shell-sidebar-text);
  background: var(--shell-sidebar-active);
}

.sidebar-footer {
  border-top-color: var(--shell-sidebar-line);
}

.org-pill,
.signout-link:hover,
.signout-link:focus-visible {
  background: color-mix(in srgb, var(--shell-sidebar-text) 8%, transparent);
}

.signout-link {
  width: 44px;
  height: 44px;
  color: var(--shell-sidebar-muted);
}

.signout-link:hover,
.signout-link:focus-visible {
  color: var(--shell-sidebar-text);
}

.app-header {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--surface-card) 90%, transparent);
  box-shadow: var(--elevation-1);
  backdrop-filter: blur(18px) saturate(1.08);
}

.app-shell {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-page) 94%, var(--exxaro-lime)), var(--surface-page) 44%, var(--surface-inset));
}

:root[data-theme="dark"] .app-shell {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-page) 94%, var(--exxaro-blue)), var(--surface-page) 48%, var(--surface-inset));
}

.header-icon-button,
.theme-toggle {
  min-width: 44px;
  min-height: 44px;
}

.empty-layout-utilities {
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.08);
}

.empty-layout-version-control {
  background: transparent;
}

/* Shared page surfaces: a quiet highlight gives cards a sense of depth in
   both appearances without turning every region into a floating rectangle. */
:is(
  .role-workspace-secondary article,
  .prototype-choice-card,
  .employee-action-card,
  .figma-action-card,
  .panel,
  .review-panel,
  .identity-summary-card,
  .identity-claims-card,
  .capability-card,
  .access-hub-card,
  .home-work-banner,
  .home-action-tile,
  .review-queue-empty-card
) {
  border-color: var(--border-subtle);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--exxaro-lime) 5%, transparent), transparent 46%),
    var(--surface-panel);
  box-shadow: var(--elevation-1);
}

:is(
  .prototype-choice-card,
  .employee-action-card,
  .figma-action-card,
  .access-hub-card,
  .home-action-tile
):hover {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--exxaro-lime) 10%, transparent), transparent 52%),
    var(--surface-card-hover);
}

.home-heading {
  position: relative;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.home-heading::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--space-10);
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--exxaro-lime);
  content: "";
}

.home-state-mark {
  display: inline-grid;
  width: var(--space-8);
  height: var(--space-8);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-round);
}

.home-state-mark::before {
  width: 20px;
  height: 20px;
}

.home-tile-cta {
  gap: var(--space-2);
}

.home-tile-cta .semantic-icon {
  width: var(--space-4);
  height: var(--space-4);
}

.home-tile-cta .semantic-icon::before {
  width: var(--space-4);
  height: var(--space-4);
}

/* Anonymous entry: the sign-in route remains the visual anchor, while the
   registration route and optional help are clearly present but subordinate. */
.login-page {
  background: var(--surface-page);
}

/* The two-column entry layout is a desktop arrangement, so it is stated as one.
   Declared unconditionally it sat later in the sheet than the 960px collapse
   above and silently beat it, which left phones on a two-column grid whose
   first track could not shrink below 360px -- a 320px device overflowed by
   exactly the difference. */
@media (min-width: 961px) {
  .login-page {
    grid-template-columns: minmax(360px, 0.9fr) minmax(560px, 1.1fr);
  }
}

.login-brand-story {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--shell-sidebar) 14%, transparent), color-mix(in srgb, var(--shell-sidebar) 88%, transparent)),
    url("images/login-mine-backdrop.jpg") 46% center / cover no-repeat,
    var(--shell-sidebar);
}

.login-brand-story::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--exxaro-lime) 17%, transparent), transparent 18rem),
    radial-gradient(circle at 10% 78%, color-mix(in srgb, var(--exxaro-blue) 13%, transparent), transparent 22rem);
  content: "";
  pointer-events: none;
  animation: portal-glow var(--duration-ambient) var(--ease-in-out) infinite alternate;
}

.login-brand-message h2 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
}

.login-brand-message > span {
  color: var(--shell-sidebar-muted);
}

.login-brand-footnote {
  color: color-mix(in srgb, var(--shell-sidebar-muted) 72%, transparent);
}

.login-brand-signals {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
  margin-bottom: var(--space-6);
}

.login-brand-signals > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--shell-sidebar-line) 82%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--shell-sidebar-text) 7%, transparent);
  color: var(--shell-sidebar-muted);
  font-size: var(--text-12);
}

.login-brand-signals .semantic-icon {
  width: var(--space-4);
  height: var(--space-4);
  color: var(--exxaro-lime);
}

.login-brand-signals .semantic-icon::before {
  width: var(--space-4);
  height: var(--space-4);
}

.login-panel,
.login-panel.conditional {
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--exxaro-lime) 8%, transparent), transparent 20rem),
    var(--surface-page);
}

.login-copy h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
}

.login-lede {
  max-width: 38rem;
  color: var(--text-secondary);
  font-size: var(--text-16);
  line-height: 1.55;
}

.auth-entry-primary {
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--exxaro-lime);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--exxaro-lime) 7%, transparent), transparent 42%),
    var(--surface-panel);
  box-shadow: var(--elevation-3);
}

.auth-entry-copy {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.auth-entry-copy-body {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.auth-entry-copy-body h2,
.auth-entry-copy-body p {
  margin: 0;
}

.auth-entry-copy-body h2 {
  font-family: var(--font-display);
  font-size: var(--text-20);
  font-weight: 700;
}

.auth-entry-copy-body > p:last-child {
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.auth-entry-icon {
  display: inline-grid;
  width: var(--space-10);
  height: var(--space-10);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--status-success-border) 62%, transparent);
  border-radius: var(--radius-md);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.auth-entry-icon::before {
  width: 20px;
  height: 20px;
}

.auth-entry-primary .sign-in-primary-action,
.auth-method-panel .sso-button {
  border: 1px solid var(--shell-sidebar-line);
  background: var(--shell-sidebar);
  color: var(--shell-sidebar-text);
}

.auth-entry-primary .sign-in-primary-action:hover,
.auth-method-panel .sso-button:hover {
  border-color: var(--exxaro-lime);
  background: var(--shell-sidebar-hover);
}

.sso-arrow {
  color: var(--shell-sidebar-muted);
}

.sso-arrow {
  display: inline-grid;
  width: var(--space-6);
  height: var(--space-6);
  margin-left: auto;
  place-items: center;
  font-size: var(--text-16);
}

.sso-arrow::before {
  width: var(--space-5);
  height: var(--space-5);
}

/* The help page tells one story, so it is drawn as one: a path with a stop for
   each step, and a medallion at each stop that says what the step is about
   before the words are read. The line down the left is the path itself; it is
   drawn from the marks rather than added as an element, so it cannot fall out
   of step with them. */
.help-journey-card {
  display: grid;
  gap: var(--space-5);
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--elevation-2);
}

.help-journey-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* Start-aligned: the heading wraps to two lines on a narrow phone, and a
     centred mark then sits beside the second line rather than the first. */
  align-items: start;
  gap: var(--space-3);
}

.help-journey-intro h2 {
  margin: 0;
  font-size: var(--text-20);
}

.help-journey-intro p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.help-journey-mark {
  display: inline-grid;
  width: var(--space-10);
  height: var(--space-10);
  place-items: center;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--exxaro-lime) 22%, transparent);
  color: var(--status-success-fg);
}

.help-journey-mark .semantic-icon,
.help-journey-mark .semantic-icon::before {
  width: var(--space-5);
  height: var(--space-5);
}

.help-journey {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-stop {
  display: grid;
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

/* The connecting line belongs to the stop above it, so the last stop has none
   and the path ends where the story does. */
.help-stop:not(:last-child)::before {
  position: absolute;
  top: var(--space-8);
  bottom: calc(var(--space-5) * -1);
  left: calc(var(--space-4) - 1px);
  border-left: 2px dotted var(--border-subtle);
  content: "";
}

.help-stop-mark {
  display: inline-grid;
  width: var(--space-8);
  height: var(--space-8);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-round);
  background: var(--surface-inset);
  color: var(--text-secondary);
}

.help-stop-mark .semantic-icon,
.help-stop-mark .semantic-icon::before {
  width: var(--space-5);
  height: var(--space-5);
}

.help-stop-copy {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.help-stop-copy strong {
  color: var(--text-primary);
  font-size: var(--text-16);
}

.help-stop-copy p {
  margin: 0;
  color: var(--text-secondary);
}

/* Who checks yours: three rows a person can find themselves in at a glance,
   rather than a sentence they have to parse for their own case. */
.help-route {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-route > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  font-size: var(--text-14);
}

.help-route span:first-child {
  color: var(--text-secondary);
}

.help-route strong {
  color: var(--text-primary);
}

.help-route .semantic-icon,
.help-route .semantic-icon::before {
  width: var(--space-4);
  height: var(--space-4);
  color: var(--text-tertiary);
}

.help-boundaries {
  display: grid;
  gap: var(--space-4);
}

.help-boundaries h2 {
  margin: 0;
  font-size: var(--text-20);
}

.help-boundary-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.help-boundary {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.help-boundary h3 {
  margin: 0;
  font-size: var(--text-16);
}

.help-boundary p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
}

.help-boundary-mark {
  display: inline-grid;
  width: var(--space-8);
  height: var(--space-8);
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.help-boundary-mark .semantic-icon,
.help-boundary-mark .semantic-icon::before {
  width: var(--space-5);
  height: var(--space-5);
}

@media (max-width: 480px) {
  /* The route rows stack rather than squeeze three columns into 320px, and the
     arrow turns to point down the way the reading does. */
  .help-route > li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-1);
  }

  .help-route .semantic-icon {
    transform: rotate(90deg);
  }
}

@media (forced-colors: active) {
  .help-stop:not(:last-child)::before {
    border-left-color: CanvasText;
  }

  .help-journey-mark,
  .help-stop-mark,
  .help-boundary-mark {
    border: 1px solid CanvasText;
    background: Canvas;
  }
}

.sign-in-help-disclosure,
.support-help-disclosure {
  background: var(--surface-inset);
}

.form-field input,
.form-field select,
.form-field textarea {
  border-color: var(--border-strong);
  background: var(--surface-raised);
  color: var(--text-primary);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-placeholder);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--focus-ring);
  box-shadow: var(--focus-halo);
}

.primary-action,
.employee-primary-action,
.login-submit {
  border-color: transparent;
  background: var(--exxaro-lime);
  color: var(--exxaro-brown);
}

.primary-action:hover,
.employee-primary-action:hover,
.login-submit:hover {
  background: color-mix(in srgb, var(--exxaro-lime) 86%, var(--ink));
  color: var(--exxaro-brown);
}

.secondary-action {
  border-color: var(--border-subtle);
  background: var(--surface-inset);
  color: var(--text-primary);
}

.secondary-action:hover {
  border-color: var(--exxaro-lime);
  background: var(--surface-card-hover);
}

.registration-page {
  align-items: start;
  padding-block: clamp(var(--space-6), 7vh, var(--space-10));
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--exxaro-lime) 13%, transparent), transparent 28rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-page) 92%, var(--exxaro-blue)), var(--surface-page) 52%, var(--surface-inset));
}

.registration-card {
  border-color: var(--border-subtle);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--exxaro-lime) 6%, transparent), transparent 48%),
    var(--surface-panel);
  box-shadow: var(--elevation-3);
}

.registration-brand {
  display: inline-flex;
  width: fit-content;
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.registration-brand:hover {
  background: var(--surface-inset);
}

.registration-progress-step {
  background: var(--surface-inset);
}

.registration-progress-step.current {
  box-shadow: var(--elevation-1);
}

.registration-progress-number {
  background: var(--surface-raised);
}

.password-visibility-toggle {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

.employee-scenario-check {
  place-items: center;
}

.employee-scenario-check::before {
  width: var(--space-3);
  height: var(--space-3);
}

.employee-scenario-reassurance .semantic-icon {
  display: inline-grid;
  width: var(--space-5);
  height: var(--space-5);
  flex: 0 0 auto;
  place-items: center;
  background: transparent;
  color: var(--status-success-fg);
  -webkit-mask: none;
  mask: none;
}

.employee-scenario-reassurance .semantic-icon::before {
  width: var(--space-5);
  height: var(--space-5);
}

@keyframes portal-glow {
  from {
    opacity: 0.58;
    transform: scale(1);
  }

  to {
    opacity: 0.82;
    transform: scale(1.06);
  }
}

@media (max-width: 760px) {
  .mobile-navigation-toggle {
    min-height: 44px;
    background: color-mix(in srgb, var(--shell-sidebar-text) 5%, transparent);
    color: var(--shell-sidebar-text);
  }

  .side-nav-link {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .registration-page {
    padding: var(--space-4) var(--space-3);
  }

  .registration-card {
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .registration-brand {
    padding: 0;
  }

  .registration-brand img {
    width: 6rem;
  }

  .registration-card h1 {
    font-size: var(--text-24);
    line-height: 1.2;
  }

  .registration-progress-step {
    padding: var(--space-1) 0;
  }

  .empty-layout-utilities .environment-indicator {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
  }

  .empty-layout-utilities .environment-indicator-summary {
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .empty-layout-utilities .environment-detail {
    min-width: 0;
  }

  .empty-layout-utilities .environment-detail[open] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 380px) {
  .login-copy h1 {
    font-size: var(--text-28);
  }

  .login-lede {
    font-size: var(--text-14);
  }

  /* An earlier max-width: 640px rule also sets .empty-layout-utilities
     padding at equal specificity; this needs to be the later declaration
     in source order to win the cascade at 320px. */
  .empty-layout-utilities {
    padding-block: var(--space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-brand-story::before {
    animation: none;
  }
}

@media (forced-colors: active) {
  body {
    background-image: none;
  }

  .app-header,
  .empty-layout-utilities {
    backdrop-filter: none;
  }

  .login-brand-story::before {
    display: none;
  }

  :is(
    .role-workspace-secondary article,
    .prototype-choice-card,
    .employee-action-card,
    .figma-action-card,
    .panel,
    .review-panel,
    .identity-summary-card,
    .identity-claims-card,
    .capability-card,
    .access-hub-card,
    .home-work-banner,
    .home-action-tile,
    .review-queue-empty-card,
    .registration-context
  ) {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}

/* Access-management and workflow-heading consistency (spec 073).
   Heading copy stays one readable unit; optional actions remain a sibling of
   that unit instead of competing with each line of copy for column width. */
.page-heading-copy {
  display: grid;
  min-width: 0;
  max-width: 44rem;
  gap: var(--space-2);
}

/* The eyebrow is a pill; as a grid child it must hug its text instead of
   stretching to the copy column. */
.page-heading-copy > .eyebrow {
  justify-self: start;
}

.page-heading-copy > * {
  min-width: 0;
  margin: 0;
}

.page-heading-copy > h1,
.page-heading-copy > .lede {
  overflow-wrap: break-word;
}

.access-management-page {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: var(--content-max);
  gap: var(--space-6);
  margin-inline: auto;
  text-align: left;
}

.access-management-page > * {
  min-width: 0;
}

.access-management-page > .page-heading {
  max-width: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.access-management-page > .page-heading .page-heading-copy {
  flex: 1 1 32rem;
}

.access-management-page > .page-heading .page-heading-copy {
  max-width: 62ch;
}

.access-management-page .ethics-panel,
.access-management-page .ethics-unavailable {
  margin: 0;
}

.access-management-page button.primary-action,
.access-management-page button.secondary-action {
  cursor: pointer;
  font: inherit;
}

.access-management-page button.primary-action {
  border: 0;
}

.access-management-panel {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.access-management-panel > h2,
.access-management-panel > p {
  margin: 0;
}

.access-management-panel > h3 {
  margin: var(--space-2) 0 0;
  font-size: var(--text-16);
}

.access-detail-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-3);
  margin: 0;
}

.access-detail-summary > div {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-primary);
}

.access-detail-summary dt {
  color: var(--text-secondary);
  font-size: var(--text-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.access-detail-summary dd {
  margin: var(--space-1) 0 0;
  overflow-wrap: break-word;
  font-weight: 600;
}

.attribute-checkbox-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.attribute-checkbox-list legend {
  padding: 0;
  font-size: var(--text-16);
  font-weight: 700;
}

.attribute-checkbox-list .ethics-checkbox {
  margin: 0;
}

.access-role-form {
  grid-template-columns: minmax(0, 1fr);
}

.access-role-template {
  display: grid;
  min-width: 0;
  flex: 1 1 24rem;
  justify-content: stretch;
  gap: var(--space-1);
  padding-block: var(--space-3);
  text-align: left;
}

.access-role-template > span {
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.45;
}

.access-role-form .ethics-checkbox .field-help {
  grid-column: 2;
  margin-block-start: 0;
}

.access-assignment-form,
.access-designation-form {
  grid-template-columns: minmax(0, 44rem);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text-primary);
}

.access-assignment-form legend {
  padding-inline: var(--space-2);
  font-weight: 700;
}

.access-assignment-form > p,
.access-designation-form > p {
  margin: 0;
}

.access-detail-disclosure {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-primary);
}

.access-detail-disclosure[open] > .access-management-history {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
}

.access-detail-disclosure > p,
.access-detail-disclosure > .access-table-region {
  margin: var(--space-4);
}

.access-permission-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: var(--space-5);
}

.access-designation-reason {
  max-width: 44rem;
}

.access-search-form {
  max-width: 44rem;
}

.access-search-form .ethics-form-actions {
  margin-block-start: 0;
}

.designation-decision-field {
  max-width: 44rem;
}

.access-table-region {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
}

.access-table-region:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: var(--focus-halo);
}

.access-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  color: var(--text-primary);
}

.access-table caption:not(.visually-hidden):not(.sr-only) {
  padding: var(--space-4) var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-14);
  font-weight: 600;
  text-align: left;
}

.access-table th,
.access-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.access-table thead th {
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--text-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.access-table tbody tr:last-child > * {
  border-bottom: 0;
}

.access-table tbody tr:hover {
  background: var(--surface-subtle);
}

.access-table th[scope="row"] {
  font-weight: 400;
}

.access-table th[scope="row"] span,
.access-table .access-table-secondary {
  color: var(--text-secondary);
  font-size: var(--text-13);
}

.access-table-identifier,
.access-table-long-text {
  overflow-wrap: anywhere;
  word-break: normal;
}

.access-table-long-text {
  min-width: 14rem;
  max-width: 32rem;
}

.access-table-actions {
  white-space: normal;
}

.access-table-actions > * {
  margin: 0 var(--space-2) var(--space-2) 0;
}

.designation-approvals > details {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}

.access-management-history {
  min-height: 48px;
  padding: var(--space-4) var(--space-5);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 700;
}

.designation-approvals > details[open] > .access-management-history {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
}

.designation-approvals > details > p,
.designation-approvals > details > .access-table-region {
  margin: var(--space-4) var(--space-5);
}

/* An inline confirmation, named for what it is. It is not a dialog: nothing
   here contains focus or makes the page behind it inert, so the markup no
   longer claims either. The focus ring matters more than usual because focus is
   moved here programmatically when the panel appears. */
.access-decision-panel {
  display: grid;
  width: min(100%, 44rem);
  gap: var(--space-3);
  margin: 0;
  border-color: var(--status-warning-border);
}

.access-decision-panel > * {
  margin: 0;
}

.access-decision-panel .access-decision-impact > * {
  margin: 0;
}

.access-decision-panel:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.access-decision-panel .ethics-form-actions {
  margin-block-start: var(--space-2);
}

@media (max-width: 640px) {
  .page-heading {
    align-items: flex-start;
  }

  .page-heading-copy {
    width: 100%;
    flex: 0 1 auto;
  }

  .access-management-page > .page-heading {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .access-management-page > .page-heading .page-heading-copy {
    flex: 0 1 auto;
  }

  .access-management-page > .page-heading > .primary-action {
    width: 100%;
  }

  .access-management-page .ethics-panel,
  .access-management-page .ethics-unavailable {
    padding: var(--space-4);
  }

  .access-search-form .ethics-form-actions > *,
  .access-table-actions > button,
  .access-assignment-form .ethics-form-actions > *,
  .access-designation-form .ethics-form-actions > * {
    width: 100%;
    margin-inline-end: 0;
  }

  .access-assignment-form,
  .access-designation-form {
    padding: var(--space-4);
  }

  .access-detail-disclosure > p,
  .access-detail-disclosure > .access-table-region {
    margin-inline: var(--space-3);
  }

  .designation-approvals > details > p,
  .designation-approvals > details > .access-table-region {
    margin-inline: var(--space-4);
  }
}

@media (forced-colors: active) {
  /* Decorative only: the rail's brand mark is dropped in high contrast. */
  .app-sidebar::after {
    display: none;
  }
}

@media (forced-colors: active) {
  .access-table-region,
  .designation-approvals > details,
  .access-decision-panel {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .access-table-region:focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
}

/* Sparse navigation — a permission-aware rail is often short.
   ------------------------------------------------------------
   The nav column and each destination group are grids that fill the sidebar's
   remaining height. With enough destinations the rows fill it naturally, but a
   person with one or two areas had their single link stretched to the full
   column height, rendering as one oversized button with a full-height active
   indicator. Rows keep their own height; the leftover space stays empty. */
.desktop-side-nav,
.mobile-side-nav,
.nav-destination-group {
  align-content: start;
}

/* Turns the leftover space into an answer rather than a void: it states why the
   rail is short, in the same terms as the access-denied page. */
.nav-access-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--shell-sidebar-line) 70%, transparent);
  color: var(--shell-sidebar-muted);
  font-size: var(--text-12);
  line-height: 1.5;
}

.nav-access-note .nav-icon {
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 auto;
  margin-top: 2px;
}

.nav-access-note .nav-icon::before {
  width: var(--space-4);
  height: var(--space-4);
}

/* Primary sign-in action — Exxaro green in both themes.
   ------------------------------------------------------
   "Sign in with Exxaro number" is Exxaro's own primary action; the Microsoft
   mark on it marks where the password is entered, and is not the button's
   identity. The registration journey already renders this exact action in
   brand colour (.login-submit), so the login page now matches it rather than
   presenting one action two different ways.
   Deep green is used rather than the lime primary fill because lime swallows
   two of the four Microsoft mark squares (1.32:1 green, 1.04:1 yellow) and
   separates from a white card by only 1.79:1. Deep green keeps every mark
   square legible, carries white at 5.32:1, and holds 5.32:1 on the light card.
   Hover darkens rather than lightens — lightening drops the label below AA. */
.auth-entry-primary .sign-in-primary-action,
.auth-method-panel .sso-button,
.registration-success-action {
  border-color: transparent;
  /* Darkening downward, never lightening: the label sits on the lightest stop,
     so the gradient can add dimension without taking the text below AA
     (5.32:1 at the top, 6.09:1 at the foot). */
  background: linear-gradient(
    180deg,
    var(--exxaro-green),
    color-mix(in srgb, var(--exxaro-green) 88%, var(--ink)));
  color: var(--white);
}

/* The provider mark sits on its own white tile. It keeps Microsoft's colours
   correct on any face we choose, and breaks the button's mass so it reads as a
   composed control rather than one flat block. */
.sign-in-primary-action .microsoft-mark,
.sso-button .microsoft-mark {
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: var(--radius-xs);
  background: var(--white);
}

.auth-entry-primary .sign-in-primary-action:hover,
.auth-method-panel .sso-button:hover,
.registration-success-action:hover {
  border-color: var(--exxaro-lime);
  background: color-mix(in srgb, var(--exxaro-green) 88%, var(--ink));
}

.auth-entry-primary .sign-in-primary-action .sso-arrow,
.auth-method-panel .sso-button .sso-arrow {
  color: var(--exxaro-lime-soft);
}

/* Dark mode keeps the same green so the brand reads identically in both
   appearances. Sweeping the green's lightness shows the constraints genuinely
   conflict here: any green light enough to clear 3:1 against the dark card is
   light enough to swallow the Microsoft mark's own green square, because that
   square sits in the middle of the same hue range. The fill therefore stays put
   and a lime edge does the delineating — which also reads as deliberately
   Exxaro rather than as a button that merely failed to separate. */
:root[data-theme="dark"] .auth-entry-primary .sign-in-primary-action,
:root[data-theme="dark"] .auth-method-panel .sso-button,
:root[data-theme="dark"] .registration-success-action {
  border: 1px solid var(--exxaro-lime);
}

/* .action-icon never carried a glyph rule of its own — only `.action-tile`
   scoped one — so every other use of the class painted an empty box. That
   included the Home current-work banners, whose icons have never appeared.
   The class now draws its own glyph wherever it is used; the .action-tile rule
   still wins where it sets a different size. */
.action-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.action-icon::before {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
  content: "";
}

/* Rail foot — global utilities, and a quiet brand mark in the open space.
   ----------------------------------------------------------------------
   Version, release notes, and support are app-wide utilities, so they belong in
   the shell's rail the way a workspace application keeps them, rather than
   floating over the bottom corner of whatever page is open. Anchoring them here
   also gives the rail's open space a purpose: the gap now sits *between* two
   anchored groups instead of trailing off below the last destination, which is
   what made it read as unfinished at every role count. */
.sidebar-utilities {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--shell-sidebar-line) 70%, transparent);
}

.sidebar-utilities .build-identity-control {
  justify-content: flex-start;
  gap: var(--space-2);
}

.sidebar-utilities .build-identity summary {
  max-width: 100%;
  border-color: color-mix(in srgb, var(--shell-sidebar-line) 85%, transparent);
  background: color-mix(in srgb, var(--shell-sidebar-text) 6%, transparent);
  color: var(--shell-sidebar-muted);
  box-shadow: none;
  backdrop-filter: none;
}

/* The generic hover/open states use page-level --text-secondary/--text-primary,
   which is the pairing the rail's own surface was designed to sit behind, not
   in front of; keep this disclosure on the rail's own text tokens instead. */
.sidebar-utilities .build-identity summary:hover {
  border-color: var(--shell-sidebar-line);
  color: var(--shell-sidebar-text);
}

.sidebar-utilities .build-identity[open] summary {
  color: var(--shell-sidebar-text);
}

.sidebar-utilities .build-identity-actions {
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-12);
}

.sidebar-utilities .build-identity-actions a {
  color: var(--shell-sidebar-muted);
  text-decoration: none;
}

.sidebar-utilities .build-identity-actions a:hover,
.sidebar-utilities .build-identity-actions a:focus-visible {
  color: var(--shell-sidebar-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The rail clips its own overflow, so a floating popover would be cut off
   inside it. In a column this narrow the disclosure reads better expanded in
   place, pushing the block taller, which also works at every width. */
.sidebar-utilities .build-identity-popover {
  position: static;
  width: auto;
  max-width: 100%;
  margin-top: var(--space-2);
  border-color: var(--shell-sidebar-line);
  border-top-color: var(--exxaro-lime);
  background: color-mix(in srgb, var(--shell-sidebar-text) 6%, transparent);
  color: var(--shell-sidebar-muted);
  box-shadow: none;
}

/* The card's own heading/label/value colors are page-surface tokens, so without
   this the disclosure keeps rendering as a white page-card floating inside the
   brown rail (in both desktop and mobile menu contexts, in both themes) even
   though the card that contains it just took the rail's own surface above. */
.sidebar-utilities .build-identity-popover > strong {
  color: var(--shell-sidebar-text);
}

.sidebar-utilities .build-identity-popover > p,
.sidebar-utilities .build-identity-popover > small {
  color: var(--shell-sidebar-muted);
}

.sidebar-utilities .build-identity-popover dl {
  border-top-color: var(--shell-sidebar-line);
  border-bottom-color: var(--shell-sidebar-line);
}

.sidebar-utilities .build-identity-popover dt {
  color: var(--shell-sidebar-muted);
}

.sidebar-utilities .build-identity-popover dd {
  color: var(--shell-sidebar-text);
}

/* The supplied corporate pattern is a quiet texture behind the rail. */
.app-sidebar::after {
  position: absolute;
  inset: 0;
  background: url("images/exxaro-pattern-brown.webp") center / 36rem auto repeat;
  content: "";
  opacity: 0.045;
  pointer-events: none;
}

/* The rail's own children stay above the mark. */
.brand-panel,
.workspace-label,
.side-nav,
.sidebar-footer {
  position: relative;
  z-index: 1;
}


/* The Exxaro number is the credential this whole product turns on, so the field
   is dressed as one rather than as another text box: an identity mark inside
   the field, and the digits set in the monospaced face at a larger size with
   the spacing of a printed reference number. */
.credential-input {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.credential-input:focus-within {
  border-color: var(--exxaro-green);
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.credential-mark {
  display: inline-grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  margin-left: var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--exxaro-lime) 20%, transparent);
  color: var(--status-success-fg);
}

.credential-mark .semantic-icon,
.credential-mark .semantic-icon::before {
  width: 17px;
  height: 17px;
}

.credential-field .credential-input input {
  min-height: 48px;
  padding: 0 14px 0 10px;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-18);
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

.credential-field .credential-input input:focus,
.credential-field .credential-input input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* The example is a teaching aid, not a value. It keeps the numeric face so the
   field still reads as a number, but sits at the muted text token and at
   ordinary tracking, so it reads as prose beside the reference-number spacing
   of a real entry and can never be mistaken for something already filled in.
   --text-placeholder is 2.6:1 on this surface, which is decoration rather than
   guidance, so the accessible tertiary token carries it in both appearances
   (6.15:1 light, 7.38:1 dark). It leaves on focus; the persistent helper below
   the field does not, so nothing that explains the value goes with it. */
.credential-field .credential-input input::placeholder {
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  opacity: 1;
}

.credential-field .credential-input input:focus::placeholder {
  color: transparent;
}

/* Guiding the two steps, without ever disabling the action.
   ---------------------------------------------------------
   Before a number is entered the field is what should draw the eye, so it
   invites attention a few times and then stops rather than nagging. Once the
   number is valid the emphasis moves to the action: the button lifts and its
   arrow leans forward, which is the whole cue a returning person needs. The
   fill never changes, so the label's contrast is identical in both states, and
   the global reduced-motion rule collapses all of it. */
@keyframes credential-invite {
  0%, 100% { border-color: var(--border-subtle); }
  50% { border-color: color-mix(in srgb, var(--exxaro-lime) 85%, transparent); }
}

.auth-entry-primary form:has(input:invalid) .credential-input,
.registration-page form:has(input:invalid) .credential-input {
  animation: credential-invite 2.4s var(--ease-in-out) 3;
}

.auth-entry-primary form:has(input:invalid) .credential-input:focus-within,
.registration-page form:has(input:invalid) .credential-input:focus-within {
  animation: none;
}

.auth-entry-primary .sign-in-primary-action,
.registration-page .login-submit {
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}

/* Readiness is "nothing is still invalid" rather than "something is valid", so
   a step with more than one field only settles once every field is answered. */
.auth-entry-primary form:not(:has(input:invalid)) .sign-in-primary-action,
.registration-page form:not(:has(input:invalid)) .login-submit {
  transform: translateY(-1px);
  box-shadow: var(--elevation-2);
}

.auth-entry-primary .sign-in-primary-action .sso-arrow {
  transition: transform var(--duration-base) var(--ease-out-quint);
}

.auth-entry-primary form:not(:has(input:invalid)) .sign-in-primary-action .sso-arrow {
  transform: translateX(4px);
}

/* Standalone entry and utility controls use the feature's 44px target even
   when a small viewport reports a fine pointer, as on a resized browser. */
.build-identity-actions a,
.registration-link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.build-identity summary,
.environment-detail summary,
.sign-in-help-disclosure summary,
.support-help-disclosure summary {
  min-width: 44px;
  min-height: 44px;
  padding-block: var(--space-2);
}

/* The end marker belongs to a printed declaration, not the interactive view. */
.declaration-print-end-marker {
  display: none;
}

@media print {
  :root,
  :root[data-theme="dark"] {
    color-scheme: light;
  }

  body:has(.declaration-reporting-view) {
    /* Reassert the canonical light accent and semantic palette so printing is
       independent of the currently selected screen theme. */
    --exxaro-accent: #b04b00;
    --surface-page: var(--exxaro-surface);
    --surface-card: var(--white);
    --surface-subtle: var(--neutral-50);
    --surface-panel: var(--white);
    --surface-raised: var(--white);
    --surface-inset: var(--neutral-50);
    --border-subtle: var(--neutral-200);
    --border-strong: var(--neutral-400);
    --text-primary: var(--ink);
    --text-secondary: var(--neutral-800);
    --text-tertiary: var(--neutral-600);
    background: var(--white) !important;
    color: var(--ink) !important;
    color-scheme: light;
    page: declaration-report;
    font-size: var(--text-12) !important;
    line-height: 1.35 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body:has(.declaration-reporting-view) .app-sidebar,
  body:has(.declaration-reporting-view) .app-topbar,
  body:has(.declaration-reporting-view) .app-header,
  body:has(.declaration-reporting-view) .environment-indicator,
  body:has(.declaration-reporting-view) .skip-link,
  body:has(.declaration-reporting-view) .breadcrumb-nav,
  body:has(.declaration-reporting-view) nav,
  body:has(.declaration-reporting-view) button,
  body:has(.declaration-reporting-view) .reporting-print-actions,
  body:has(.declaration-reporting-view) .access-table-actions,
  body:has(.declaration-reporting-view) .declaration-form-actions {
    display: none !important;
  }

  body:has(.declaration-reporting-view) .app-frame,
  body:has(.declaration-reporting-view) .app-workspace,
  body:has(.declaration-reporting-view) .app-shell,
  body:has(.declaration-reporting-view) .declaration-reporting-view {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: var(--white) !important;
    box-shadow: none;
    page: declaration-report;
  }

  body:has(.declaration-reporting-view) .declaration-reporting-view,
  body:has(.declaration-reporting-view) .declaration-reporting-view * {
    color: var(--ink) !important;
    background: transparent !important;
    box-shadow: none;
    overflow: visible !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: var(--text-12) !important;
    line-height: inherit !important;
  }

  body:has(.declaration-reporting-view) .declaration-reporting-view h1 {
    margin: 0 0 2mm !important;
    font-family: var(--font-display) !important;
    font-size: var(--text-20) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  body:has(.declaration-reporting-view) .declaration-reporting-view h2 {
    margin: 0 !important;
    font-family: var(--font-display) !important;
    font-size: var(--text-15) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  body:has(.declaration-reporting-view) .declaration-reporting-view .declaration-section-heading h2 {
    font-size: var(--text-14) !important;
  }

  body:has(.declaration-reporting-view) .declaration-reporting-view h3,
  body:has(.declaration-reporting-view) .declaration-reporting-view .declaration-question-form legend {
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--text-13) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }

  body:has(.declaration-reporting-view) .declaration-reporting-view h1,
  body:has(.declaration-reporting-view) .declaration-reporting-view h2,
  body:has(.declaration-reporting-view) .declaration-reporting-view h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  body:has(.declaration-reporting-view) .employee-declare-heading,
  body:has(.declaration-reporting-view) .ethics-panel,
  body:has(.declaration-reporting-view) .declaration-readonly,
  body:has(.declaration-reporting-view) .declaration-question-form,
  body:has(.declaration-reporting-view) .declaration-entry-instance,
  body:has(.declaration-reporting-view) .declaration-entry-card-header,
  body:has(.declaration-reporting-view) .declaration-entry-card-body,
  body:has(.declaration-reporting-view) .declaration-question-form .declaration-question,
  body:has(.declaration-reporting-view) .declaration-review-answer,
  body:has(.declaration-reporting-view) .review-history-entry,
  body:has(.declaration-reporting-view) .access-detail-summary > div {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--radius-xs);
    box-shadow: none;
  }

  body:has(.declaration-reporting-view) .employee-declare-heading,
  body:has(.declaration-reporting-view) .ethics-panel,
  body:has(.declaration-reporting-view) .declaration-section {
    margin-block: 0 2mm !important;
    padding: 0 !important;
  }

  /* Sections may flow between pages. Only a heading and its first question,
     individual question rows, and entry boxes stay together. */
  body:has(.declaration-reporting-view) .declaration-section {
    display: block !important;
  }

  body:has(.declaration-reporting-view) .declaration-section-heading,
  body:has(.declaration-reporting-view) .page-heading-copy {
    display: block !important;
    margin-block: 2mm 1mm !important;
    padding: 0 !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-after: avoid-page !important;
    page-break-after: avoid !important;
  }

  body:has(.declaration-reporting-view) .declaration-question-form,
  body:has(.declaration-reporting-view) .declaration-entry-cards,
  body:has(.declaration-reporting-view) .declaration-entry-card-body {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(.declaration-reporting-view) .declaration-question-form .declaration-question,
  body:has(.declaration-reporting-view) .declaration-entry-instance .declaration-question {
    display: block !important;
    position: relative !important;
    padding: 1.5mm 51mm 1.5mm 0 !important;
    border-block-end: 0.25pt solid var(--border-strong) !important;
  }

  body:has(.declaration-reporting-view) .declaration-question > legend {
    display: block !important;
    inline-size: 100% !important;
  }

  body:has(.declaration-reporting-view) .declaration-review-answer {
    display: contents !important;
  }

  body:has(.declaration-reporting-view) .declaration-review-answer > p:not(.declaration-review-answer-detail) {
    position: absolute !important;
    inset-block-start: 1.5mm !important;
    inset-inline-end: 0 !important;
    inline-size: 48mm !important;
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: var(--text-12) !important;
    font-weight: 400 !important;
    justify-self: start !important;
    text-align: start !important;
  }

  body:has(.declaration-reporting-view) .declaration-review-answer > .declaration-review-answer-value.is-affirmative {
    color: var(--exxaro-accent) !important;
    font-weight: 700 !important;
  }

  body:has(.declaration-reporting-view) .declaration-review-answer-detail {
    display: block !important;
    margin: 1mm 0 0 !important;
    padding: 1mm 0 1mm 3mm !important;
    border-inline-start: 0.75pt solid var(--border-strong) !important;
    font-size: var(--text-11) !important;
    line-height: 1.3 !important;
  }

  body:has(.declaration-reporting-view) .declaration-review-answer-detail::before {
    content: "Details";
    display: block !important;
    margin-block-end: 0.5mm !important;
    font-size: var(--text-11) !important;
    font-weight: 700 !important;
  }

  body:has(.declaration-reporting-view) .declaration-question-form .declaration-question.is-follow-up {
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
    border-inline-start: 0 !important;
  }

  body:has(.declaration-reporting-view) .declaration-optional-help,
  body:has(.declaration-reporting-view) .review-history-head,
  body:has(.declaration-reporting-view) .review-history-note {
    margin-block: 0.75mm 0 !important;
  }

  body:has(.declaration-reporting-view) .declaration-optional-help.is-empty {
    display: none !important;
  }

  body:has(.declaration-reporting-view) .declaration-optional-help {
    font-size: var(--text-11) !important;
    line-height: 1.3 !important;
  }

  body:has(.declaration-reporting-view) .declaration-entry-instance {
    margin-block: 2mm !important;
    padding: 1.5mm !important;
    border: 0.75pt solid var(--border-strong) !important;
  }

  body:has(.declaration-reporting-view) .declaration-entry-instance .declaration-question {
    padding-block: 1.25mm !important;
  }

  body:has(.declaration-reporting-view) .declaration-entry-instance .declaration-review-answer:not(:has(.declaration-review-answer-detail)) {
    display: block !important;
    position: absolute !important;
    /* A fieldset's legend occupies the top of its print content box, so its
       positioned answer needs the legend offset removed to share the row. */
    inset-block-start: -3.75mm !important;
    inset-inline-end: 0 !important;
    inline-size: 48mm !important;
    margin: 0 !important;
  }

  body:has(.declaration-reporting-view) .declaration-entry-instance .declaration-review-answer:not(:has(.declaration-review-answer-detail)) > p {
    position: static !important;
    inline-size: auto !important;
    margin: 0 !important;
  }

  body:has(.declaration-reporting-view) .declaration-entry-card-header {
    display: block !important;
    padding-block-end: 1mm !important;
    border-block-end: 0.25pt solid var(--border-strong) !important;
  }

  body:has(.declaration-reporting-view) .declaration-entry-card-header h3 {
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body:has(.declaration-reporting-view) .access-detail-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2mm !important;
  }

  body:has(.declaration-reporting-view) .access-detail-summary dt {
    font-size: var(--text-11) !important;
    line-height: 1.2 !important;
  }

  body:has(.declaration-reporting-view) .access-detail-summary dd {
    margin-top: 0.75mm !important;
  }

  /* These print-only surfaces retain the declaration's hierarchy in a
     browser PDF without changing the interactive reporting screen. */
  body:has(.declaration-reporting-view) .employee-declare-heading {
    margin-block: 0 2mm !important;
    padding: 2mm 2.5mm !important;
    border: 0 !important;
    border-block-end: 1mm solid var(--exxaro-lime) !important;
    background: var(--exxaro-brown) !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body:has(.declaration-reporting-view) .employee-declare-heading,
  body:has(.declaration-reporting-view) .employee-declare-heading * {
    color: var(--white) !important;
  }

  body:has(.declaration-reporting-view) .employee-declare-heading .employee-kicker {
    margin: 0 0 0.5mm !important;
    font-size: var(--text-11) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body:has(.declaration-reporting-view) .employee-declare-heading h1 {
    margin: 0 0 0.75mm !important;
    font-size: var(--text-16) !important;
  }

  body:has(.declaration-reporting-view) .employee-declare-heading p {
    margin: 0 !important;
    font-size: var(--text-12) !important;
  }

  body:has(.declaration-reporting-view) .employee-declare-heading .employee-lead-meta {
    margin-block-start: 0.75mm !important;
    font-size: var(--text-11) !important;
  }

  body:has(.declaration-reporting-view) .declaration-summary {
    margin-block: 0 2mm !important;
    padding: 2mm !important;
    border: 0.75pt solid var(--exxaro-lime) !important;
    background: var(--exxaro-lime-soft) !important;
  }

  body:has(.declaration-reporting-view) .declaration-section-heading,
  body:has(.declaration-reporting-view) .page-heading-copy {
    margin-block: 2mm 1mm !important;
    padding: 1mm 1.5mm !important;
    border: 0.75pt solid var(--exxaro-lime) !important;
    background: var(--exxaro-lime-soft) !important;
  }

  body:has(.declaration-reporting-view) .declaration-section-heading,
  body:has(.declaration-reporting-view) .declaration-section-heading *,
  body:has(.declaration-reporting-view) .page-heading-copy,
  body:has(.declaration-reporting-view) .page-heading-copy * {
    color: var(--exxaro-brown) !important;
  }

  body:has(.declaration-reporting-view) .declaration-reporting-view .declaration-question,
  body:has(.declaration-reporting-view) .declaration-reporting-view .declaration-entry-instance,
  body:has(.declaration-reporting-view) .declaration-reporting-view .review-history-entry {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* The section banner is screen-only; the declaration header remains the
     first printed block and provides print provenance. */
  body:has(.declaration-reporting-view) .page-heading-copy {
    display: none !important;
  }

  body:has(.declaration-reporting-view) .declaration-print-end-marker {
    display: block !important;
    margin: 5mm 0 0 !important;
    padding: 2mm 0 !important;
    border-block: 0.75pt solid var(--exxaro-lime) !important;
    color: var(--exxaro-brown) !important;
    font-size: var(--text-11) !important;
    font-weight: 700 !important;
    text-align: center !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  @page declaration-report {
    size: A4;
    margin: 18mm 15mm 18mm;

    @top-left {
      content: "EXXARO";
      padding-inline-start: 3mm;
      border-block-end: 1mm solid var(--exxaro-lime);
      background: var(--exxaro-brown);
      color: var(--white);
      font-family: var(--font-display);
      font-size: var(--text-12);
      font-weight: 700;
      letter-spacing: 0.08em;
      vertical-align: middle;
    }

    @top-center {
      content: "";
      border-block-end: 1mm solid var(--exxaro-lime);
      background: var(--exxaro-brown);
    }

    @top-right {
      content: "CONFIDENTIAL";
      padding-inline-end: 3mm;
      border-block-end: 1mm solid var(--exxaro-lime);
      background: var(--exxaro-brown);
      color: var(--white);
      font-family: var(--font-display);
      font-size: var(--text-12);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-align: end;
      vertical-align: middle;
    }

    @bottom-center {
      content: "";
      border-block-start: 1mm solid var(--exxaro-lime);
      background: var(--exxaro-brown);
    }

    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      padding-inline-end: 3mm;
      border-block-start: 1mm solid var(--exxaro-lime);
      background: var(--exxaro-brown);
      color: var(--white);
      font-family: var(--font-body);
      font-size: var(--text-11);
      font-weight: 700;
      text-align: end;
      vertical-align: middle;
    }
  }
}

/* The rail (including its decorative ::after brand mark) is hidden outright at
   this width rather than reflowed -- see the mobile app-topbar rules -- so no
   separate rule is needed here to stop the mark bleeding past a static rail. */

/* On a short laptop viewport the sign-in card alone filled the screen and the
   new-user route fell below the fold, which is precisely how a first-time user
   ends up trying to sign in to an account they have not created. Both choices
   have to be visible together, so the roomier spacing is kept for tall screens
   only. */
@media (max-height: 50rem) {
  .auth-entry-primary {
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .auth-entry-new {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .auth-entry-support {
    margin-top: var(--space-3);
  }
}

/* Registration journey, iteration two: the code boxes, the progress rail's
   completed state, press feedback and the step-card entry. All motion is
   transform/opacity, under 300ms, and removed under reduced motion. */
/* A display declaration beats the hidden attribute, so the enhanced-away field
   needs saying explicitly or it lingers as an empty bar above the boxes. */
.credential-input[hidden] {
  display: none;
}

.registration-code-boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
}

.registration-code-box {
  width: 100%;
  min-height: 3.25rem;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card, var(--surface-subtle));
  color: var(--text-primary);
  font-size: var(--text-24);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.registration-code-box:focus-visible {
  border-color: var(--status-success-border);
  outline: 0.1875rem solid var(--focus-ring, var(--exxaro-lime));
  outline-offset: 0.125rem;
}

/* A filled box reads as progress through the code without any extra text.

   Driven by a class, not :placeholder-shown: an input with no placeholder never
   matches that pseudo-class, so :not() was true for every box and all six read as
   filled from the moment they appeared. The value attribute does not reflect typed
   input either. */
.registration-code-box.is-filled {
  border-color: var(--status-success-border);
}

.registration-progress-step .registration-progress-number .semantic-icon::before {
  width: 0.875rem;
  height: 0.875rem;
}

.registration-progress-step.complete .registration-progress-number {
  border-color: var(--status-success-border);
  color: var(--status-success-fg);
}

/* Press feedback on pointer-down, not on release: waiting for the click to land
   is what makes a control feel a beat behind the finger. */
@media (prefers-reduced-motion: no-preference) {
  .login-submit,
  .auth-entry-action,
  .registration-link-button {
    transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .login-submit:active,
  .auth-entry-action:active,
  .registration-link-button:not([disabled]):active {
    transform: scale(0.97);
  }

  /* Each step is a fresh document, so the card settles in rather than appearing
     abruptly. Purpose: preventing a jarring change between steps. */
  .registration-card,
  .auth-entry-primary,
  .auth-entry-new {
    animation: registration-card-enter 200ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  .auth-entry-new {
    animation-delay: 60ms;
  }
}

@keyframes registration-card-enter {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 26rem) {
  .registration-code-box {
    min-height: 2.875rem;
    font-size: var(--text-20);
  }
}

.registration-password-rules {
  display: grid;
  gap: 0.375rem;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.registration-password-rules li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-13);
}

.registration-password-rules .semantic-icon::before {
  width: 0.875rem;
  height: 0.875rem;
}

.registration-password-rules .semantic-icon {
  margin-top: 0.125em;
}

/* The mark takes the icon slot, so it matches the ruler and equals beside it. */
.registration-password-rules .microsoft-mark {
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.125em;
  gap: 0.0625rem;
}

/* Met is stated by the icon changing shape, not by colour alone. */
.registration-password-rules li.is-met {
  color: var(--status-success-fg);
}

.registration-password-rule-note {
  color: var(--text-tertiary);
}

.registration-success-icon svg {
  width: 100%;
  height: 100%;
}

.registration-success-ring,
.registration-success-tick {
  fill: none;
  stroke: var(--status-success-border);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  /* Drawn rather than simply appearing: this is the one moment in the journey
     worth marking, and it happens once per employee, ever. */
  .registration-success-ring {
    stroke-dasharray: 132;
    animation: registration-success-draw 420ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  .registration-success-tick {
    stroke-dasharray: 30;
    animation: registration-success-draw 260ms cubic-bezier(0.23, 1, 0.32, 1) 300ms both;
  }
}

@keyframes registration-success-draw {
  from {
    stroke-dashoffset: 132;
  }

  to {
    stroke-dashoffset: 0;
  }
}


/* ---------------------------------------------------------------------------
   Unified entry (feature 093)

   One field and one action replace the two cards that asked the employee to say
   whether they already had a COI account. The facts row sits below the action
   rather than in a separate card, because it now qualifies one path out of the
   button rather than advertising a second route.
   --------------------------------------------------------------------------- */

.auth-entry-unified {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Inline variant: a qualifying aside under the action, not a card of its own.
   Smaller and quieter than the standalone row it replaces. */
.auth-entry-facts--inline {
  gap: var(--space-2) var(--space-3);
  padding-block-start: var(--space-1);
}

.auth-entry-facts--inline li {
  font-size: var(--text-12);
}

/* The icon sits beside the message, so this row is flex. The base component is a
   grid that stacks its strong and span; that stacking has to be restored on the
   inner block, or the heading and the sentence run together on one line. */
.auth-inline-status--informative {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.auth-inline-status--informative > div {
  display: grid;
  gap: 4px;
}

.auth-inline-status--informative .semantic-icon {
  flex: none;
  margin-block-start: 0.125rem;
  color: var(--status-success-fg);
}

/* ---------------------------------------------------------------------------
   Confirmation step (feature 093)

   Reached when an entered number has no account. Nothing has been sent at this
   point, so the panel is informative rather than alarming: the success token
   family, not the warning one.
   --------------------------------------------------------------------------- */

.registration-confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--status-success-bg);
}

.registration-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--status-success-fg);
}

.registration-confirm-icon .semantic-icon::before {
  width: 1.125rem;
  height: 1.125rem;
}

.registration-confirm-copy strong {
  display: block;
  font-size: var(--text-16);
  line-height: 1.3;
}

.registration-confirm-copy p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-14);
  line-height: 1.5;
}

/* The number is echoed so a typo is caught before anything is sent. Tabular
   figures so digits line up and a transposition is visible. */
.registration-confirm-number {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  white-space: nowrap;
}

.registration-confirm-facts {
  margin-block-start: var(--space-4);
}

.registration-confirm-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-block-start: var(--space-4);
}

.registration-confirm-note {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-13);
  line-height: 1.5;
}

.registration-confirm-back {
  margin-block-start: var(--space-3);
}

@media (prefers-reduced-motion: no-preference) {
  .registration-confirm {
    animation: registration-confirm-enter 240ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }
}

@keyframes registration-confirm-enter {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================================================================
   Unified entry, visual pass (feature 093)

   The first build of this surface had one weight for everything: the field, the
   action and four disclosures all carried the same 12px radius, the same 1px
   border and the same raised fill, so nothing told the eye where to go. The
   disclosures still wore the browser's own triangle and link colour. And in dark
   the primary action painted nothing at all. This pass fixes the defect and then
   gives the surface a hierarchy: one filled action, a recessed field, and help
   that reads as help.
   =========================================================================== */

/* --- The defect -----------------------------------------------------------

   `background: linear-gradient(..., color-mix(in srgb, var(--exxaro-green) 88%,
   var(--ink)))` resolved in light and dropped to nothing in dark. A background
   that is invalid at computed-value time does not fall back to the previous
   declaration, it resets to `transparent none`, so the button lost its fill
   entirely rather than inheriting the earlier one. Measured on 18 September
   2026: light `linear-gradient(rgb(94,115,32), ...)`, dark `none`.

   The fix is to separate the two properties. `background-color` carries a plain
   solid that cannot fail, and `background-image` carries the gradient on top. If
   the gradient ever drops again the button stays a filled brand green instead of
   disappearing, which is the failure this rule exists to make impossible. */
.auth-entry-primary .sign-in-primary-action,
.registration-success-action {
  background-color: var(--exxaro-green);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12),
    rgba(0, 0, 0, 0.08));
  color: var(--white);
}

/* Dark keeps the same green, for the reason the original rule recorded: any
   green light enough to clear 3:1 on the dark card also swallows the Microsoft
   mark's own green square. The lime edge does the separating instead. */
:root[data-theme="dark"] .auth-entry-primary .sign-in-primary-action,
:root[data-theme="dark"] .registration-success-action {
  background-color: var(--exxaro-green);
  border: 1px solid var(--exxaro-lime);
}

/* Press feedback belongs on pointer-down. Waiting for the click to land reads as
   lag even when nothing is slow. */
.auth-entry-primary .sign-in-primary-action:active {
  transform: translateY(0) scale(0.99);
}

/* The label leads; the arrow is a direction, not a second label. */
.auth-entry-primary .sign-in-primary-action .sso-label {
  flex: 1 1 auto;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* --- The field ------------------------------------------------------------

   A recessed field against a filled action is the whole hierarchy in two
   elements: one surface you type into, one surface you press. */
.auth-entry-unified .credential-input {
  background: var(--surface-subtle);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.auth-entry-unified .credential-input:focus-within {
  border-color: var(--exxaro-green);
}

:root[data-theme="dark"] .auth-entry-unified .credential-input:focus-within {
  border-color: var(--exxaro-lime);
}

/* The field is monospace so eight digits stay countable, but the example is
   prose and was inheriting the digit tracking, which stretched "e.g. 1234" into
   something that looked broken rather than helpful. */
.auth-entry-unified #sign-in-employee-number::placeholder {
  letter-spacing: normal;
  font-family: inherit;
  opacity: 0.55;
}

/* --- The note -------------------------------------------------------------

   Three centred lines of small text is a paragraph pretending to be a caption.
   Ranged left it is read rather than decoded. */
.auth-entry-unified .sign-in-handoff-note {
  display: block;
  text-align: start;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- Help, as one quiet group --------------------------------------------

   Four separately bordered boxes competed with the action above them. They are
   one stack now, divided by hairlines rather than boxed individually, so the
   group reads as somewhere to look when stuck and never as a second action. */
.auth-entry-unified > details,
.auth-entry-support > details,
.registration-card > details {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}

.auth-entry-unified > details:first-of-type {
  margin-block-start: var(--space-2);
}

.auth-entry-unified > details > summary,
.auth-entry-support > details > summary,
.registration-card > details > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding-block: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-13);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

/* The browser's triangle and its link colour were the loudest tell that this
   surface had not been designed. Both go. */
.auth-entry-unified > details > summary::-webkit-details-marker,
.auth-entry-support > details > summary::-webkit-details-marker,
.registration-card > details > summary::-webkit-details-marker {
  display: none;
}

.auth-entry-unified > details > summary::after,
.auth-entry-support > details > summary::after,
.registration-card > details > summary::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  margin-inline-start: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.7;
  transform: rotate(-45deg);
  transform-origin: 60% 60%;
  transition: transform var(--duration-base) var(--ease-out-quint);
}

.auth-entry-unified > details[open] > summary::after,
.auth-entry-support > details[open] > summary::after,
.registration-card > details[open] > summary::after {
  transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .auth-entry-unified > details > summary:hover,
  .auth-entry-support > details > summary:hover,
  .registration-card > details > summary:hover {
    color: var(--text-primary);
  }
}

/* Height alone snaps the content in at the end; the pair reads as the panel
   actually opening. */
.auth-entry-unified > details > summary + *,
.auth-entry-support > details > summary + *,
.registration-card > details > summary + * {
  padding-block-end: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-13);
  line-height: 1.55;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-entry-unified > details[open] > summary + *,
  .auth-entry-support > details[open] > summary + *,
  .registration-card > details[open] > summary + * {
    animation: auth-disclosure-open var(--duration-smooth) var(--ease-out-quint) both;
  }
}

@keyframes auth-disclosure-open {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- The meta row ---------------------------------------------------------

   What it costs and what it needs, for the employee who turns out not to have an
   account. Quiet enough to skip, present enough to answer the question before it
   is asked. */
.auth-entry-facts--inline {
  padding-block: var(--space-1);
  color: var(--text-tertiary);
}

.auth-entry-facts--inline li {
  gap: 0.3125rem;
}

/* --- Alignment and finish (feature 093) -----------------------------------

   The two help rows inside the card started at different left edges, because
   each disclosure carried padding from its own older rule. Rows in one stack
   have to share one edge or the stack reads as two stacks. */
.auth-entry-unified > details > summary,
.auth-entry-unified > details > summary + *,
.auth-entry-support > details > summary,
.auth-entry-support > details > summary + *,
.registration-card > details > summary,
.registration-card > details > summary + * {
  padding-inline: 0;
}

.auth-entry-unified > details {
  padding: 0;
  overflow: visible;
}

:root[data-theme="dark"] .auth-entry-primary .sign-in-primary-action {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.10),
    rgba(0, 0, 0, 0.10));
}

/* The arrow leads the eye out of the control in the direction the journey goes.
   It moves only once the field is answered, so it reads as readiness rather than
   as decoration. */
.auth-entry-primary .sign-in-primary-action .sso-arrow {
  color: var(--exxaro-lime-soft);
  opacity: 0.85;
}

.auth-entry-primary form:not(:has(input:invalid)) .sign-in-primary-action .sso-arrow {
  opacity: 1;
}

/* The identity chip states what the field is for without repeating the label.
   Quiet enough that the filled action stays the only thing asking to be pressed. */
.auth-entry-unified .auth-entry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--exxaro-lime) 16%, transparent);
  color: var(--status-success-fg);
}

/* The field is monospace with wide tracking so eight digits stay countable when
   an employee checks their own number. The example is prose and was inheriting
   both, which pushed "e.g." away from "1234" and made the hint look like a
   rendering fault rather than an example. Scoped to the placeholder only, so the
   value the employee types keeps the spacing that earns its place. */
.auth-entry-unified .credential-input input#sign-in-employee-number::placeholder,
.registration-card .credential-input input#employee-id::placeholder {
  font-family: var(--font-body);
  font-size: var(--text-14);
  letter-spacing: normal;
  opacity: 0.5;
}

/* ===========================================================================
   Exxaro mark on the entry action (feature 093)

   The action lost the Microsoft mark when it stopped always leading to
   Microsoft, and with it the one piece of colour that made the control feel
   like something rather than a coloured bar. The Exxaro mark is the honest
   replacement: whichever branch the button takes, it is an Exxaro sign-in.
   =========================================================================== */

.exxaro-mark {
  display: inline-block;
  /* The wordmark's figures are wider than they are tall; forcing a square would
     squash them. */
  width: 1.55em;
  height: 1.375em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("images/icons/exxaro-mark.svg") center / contain no-repeat;
  mask: url("images/icons/exxaro-mark.svg") center / contain no-repeat;
}

/* On the filled action the mark sits on its own tile, as the Microsoft mark did
   before it: it keeps the figures legible on the green and breaks the button's
   mass so it reads as a composed control rather than one flat block. */
.sign-in-primary-action .exxaro-mark-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--white) 92%, transparent);
  color: var(--exxaro-green);
}

.sign-in-primary-action .exxaro-mark {
  width: 1.125rem;
  height: 1rem;
}

/* The tile lifts very slightly with the action, so the two read as one object
   rather than a badge sitting on a bar. */
@media (hover: hover) and (pointer: fine) {
  .auth-entry-primary .sign-in-primary-action:hover .exxaro-mark-tile {
    background: var(--white);
  }
}

/* Beside the heading the mark replaces a generic person glyph. Same symbol, and
   it says whose number is being asked for before the label does. */
.auth-entry-unified .auth-entry-icon .exxaro-mark {
  width: 1.25rem;
  height: 1.1rem;
  color: var(--status-success-fg);
}

/* ===========================================================================
   Working state on a slow action (feature 093)

   Creating an account calls the identity provider and takes seconds. The button
   gave no sign of having been pressed, so in UAT people pressed it repeatedly.
   The label changes, a ring turns, and the control stops accepting presses.
   =========================================================================== */

.registration-create-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
}

.registration-create-working,
.registration-create-spinner {
  display: none;
}

.registration-create-action.is-working .registration-create-label {
  display: none;
}

.registration-create-action.is-working .registration-create-working,
.registration-create-action.is-working .registration-create-spinner {
  display: inline-block;
}

/* Turning, not filling: the wait has no known duration, so an indicator that
   advanced toward a finish would be claiming progress nobody can see. */
.registration-create-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: var(--radius-pill);
}

@media (prefers-reduced-motion: no-preference) {
  .registration-create-action.is-working .registration-create-spinner {
    animation: registration-spin 800ms linear infinite;
  }
}

.registration-create-action[aria-disabled="true"],
.registration-create-action:disabled {
  cursor: default;
  opacity: 0.92;
}

/* The button already says it is working. This says how long is normal, and after
   a while that pressing again will not help, which is the thing that actually
   stops the second press. */
.registration-submit-status {
  margin: var(--space-2) 0 0;
  min-height: 1.25rem;
  color: var(--text-secondary);
  font-size: var(--text-13);
  line-height: 1.5;
  text-align: center;
}

/* ===========================================================================
   Entry masthead and card arrival (feature 093)
   =========================================================================== */

/* Near-black is what a browser does when nothing decides, and it read as plain
   next to a panel that is warm brown and lime. The brand's own ink carries the
   same weight without going cold. */
/* Ink, not lime. Lime measures 1.56:1 on the light surface, and even where it
   passes in dark it asks the eye to work at the exact moment the page wants to
   be effortless. The brand colour stays on the eyebrow, where it is a label
   rather than something anyone has to read at length. Interest is bought with
   type and composition instead. */
.login-copy h1 {
  position: relative;
  z-index: 1;
  color: var(--exxaro-brown);
}

:root[data-theme="dark"] .login-copy h1 {
  color: var(--white);
}

/* Weight, not colour, carries the hierarchy: the subject is set heavy, the
   vehicle light, and the two lines stack tight enough to read as one object.
   Poppins holds a 700/500 contrast far better than a UI grotesque does, which is
   the whole reason the face is worth its 24 KB.

   One treatment, two surfaces. Home said the same name in a different voice --
   24px at 600 with body leading, which is the "merely large" the rule above this
   one already warns about -- so the portal was named twice, in two registers, by
   two stylesheets, and nothing stopped either from moving. The invariants are now
   here, once, with both consumers in one selector list: the face, the 700/500
   split, the tracking and the leading. What each surface keeps is its size and its
   ink, because a full-page masthead and a line inside a card are not the same size
   and do not sit on the same ground. */
.login-copy h1.portal-name,
.home-welcome .portal-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  /* The same -0.025em the brand headline opposite uses, and the value Home was
     already carrying. Tracking is size-specific in principle, but 24 and 36 are
     close enough that one value is honest at both, and matching the headline
     opposite is what makes the sign-in side read as one masthead. */
  letter-spacing: -0.025em;
  /* 1.06: tighter than the 1.08 this heading declares and close to the 1.05 its
     own comment asks for. Neither was reaching the page anyway -- a later
     `.login-copy h1` rule sets 1.18 at the same specificity and wins on source
     order, so the two lines of a single name have been floating apart on the
     surface that documented tightening them. This selector is specific enough to
     deliver the stated intent. */
  line-height: 1.06;
}

.portal-name-tail {
  display: block;
  /* 500, because that is a face the app actually ships: the only @font-face weights
     are 500, 600 and 700. Asking for 400 made the browser reach for the nearest
     declared weight anyway, which works by accident rather than by intent. */
  font-weight: 500;
  /* Looser than the subject on purpose. The lighter weight has thinner stems, so
     the subject's tracking would start closing its counters. */
  letter-spacing: -0.015em;
}

/* The 8% dim this line used to carry is gone, and its absence is the point: the
   hierarchy here is weight, and opacity is colour. One alpha was being asked to do
   the same job over a near-black panel and a light card; it is the one thing in the
   lockup that forced-colors mode does not reset, so it was the only way the lockup
   could lose contrast in high-contrast mode; and at 36px nobody could see the
   difference between 92% and 100% anyway. */

/* The wordmark's own figures, oversized and nearly invisible, sitting behind the
   name. It is a watermark, not a graphic: at this opacity it reads as texture in
   the corner of the eye and gives the masthead somewhere to sit, which a bare
   heading on a flat surface never has. */
.login-copy {
  position: relative;
  isolation: isolate;
}

.login-copy::before {
  position: absolute;
  z-index: 0;
  top: -0.35em;
  right: 0;
  width: 13rem;
  height: 11.5rem;
  /* Lime in both themes: the mark is the brand's, and tinting it neutral brown in
     light while dark got the real colour was an asymmetry with no reason behind
     it.

     The opacities differ because the colours sit differently against each
     surface. Lime is luminance 0.537; the dark surface is 0.008 and the light one
     0.866, so the same alpha would make the mark nearly invisible in light. These
     two values are chosen to land within 0.001 of the same luminance shift, 0.036
     against dark and 0.036 against light, which is what makes the watermark carry
     equal weight in both rather than merely share a hex. */
  background: var(--exxaro-lime);
  opacity: 0.11;
  content: "";
  pointer-events: none;
  -webkit-mask: url("images/icons/exxaro-mark.svg") right top / contain no-repeat;
  mask: url("images/icons/exxaro-mark.svg") right top / contain no-repeat;
}

:root[data-theme="dark"] .login-copy::before {
  opacity: 0.07;
}

@media (max-width: 960px) {
  .login-copy::before {
    width: 8rem;
    height: 7rem;
    opacity: 0.09;
  }
}

/* Arrival, once, on a surface a person sees at the start of a session: the
   keyline draws, the name rises under it, the card follows. Transform and
   opacity only, and nothing moves for anyone who has asked it not to. */
@media (prefers-reduced-motion: no-preference) {
  .login-copy .login-eyebrow {
    animation: login-rise 420ms var(--ease-out-quint) both;
  }

  .login-copy h1 {
    animation: login-rise 520ms var(--ease-out-quint) 60ms both;
  }

  .login-copy .portal-name-tail {
    animation: login-rise 520ms var(--ease-out-quint) 170ms both;
  }

  .login-copy::before {
    animation: login-watermark-settle 900ms var(--ease-out-quint) 220ms both;
  }

  .auth-entry-unified {
    animation: login-rise 560ms var(--ease-out-quint) 140ms both;
  }

  .auth-entry-unified .auth-entry-icon {
    animation: login-mark-settle 480ms var(--ease-out-quint) 320ms both;
  }
}

@keyframes login-watermark-settle {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.97);
  }
}

@keyframes login-rise {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes login-mark-settle {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* The section heading sits beside the mark and was plain body weight at body
   tracking. It is the card's own title, so it gets the display face and the
   same closing of space the masthead gets, one step down. */
.auth-entry-unified .auth-entry-copy-body h2 {
  font-family: var(--font-display);
  font-size: var(--text-18);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ===========================================================================
   The delivery detail, behind a click (feature 093)

   The three stages describe how a text message travels. That is the provider's
   business, not the employee's, and this workforce largely reads English as a
   second language. The plain status line above carries the same truth; this
   holds the mechanism for whoever wants it, including support staff working out
   why a code never came.
   =========================================================================== */

.registration-delivery-detail {
  margin-block-start: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.registration-delivery-detail > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--text-tertiary);
  font-size: var(--text-13);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.registration-delivery-detail > summary::-webkit-details-marker {
  display: none;
}

.registration-delivery-detail > summary::after {
  width: 0.4375rem;
  height: 0.4375rem;
  margin-inline-start: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.7;
  transform: rotate(-45deg);
  transform-origin: 60% 60%;
  transition: transform var(--duration-base) var(--ease-out-quint);
  content: "";
}

.registration-delivery-detail[open] > summary::after {
  transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .registration-delivery-detail > summary:hover {
    color: var(--text-secondary);
  }
}

.registration-delivery-detail .registration-delivery-progress {
  padding-block-end: var(--space-3);
}

@media (prefers-reduced-motion: no-preference) {
  .registration-delivery-detail[open] .registration-delivery-progress {
    animation: auth-disclosure-open var(--duration-smooth) var(--ease-out-quint) both;
  }
}

/* The status line is the one thing on this panel that must be read, so it is
   given the weight the stages used to take. */
.registration-wait-note {
  font-size: var(--text-14);
}

/* Public per-interest answers and conversation, shared by both participants. */
.interest-declared-answers,
.interest-conversation {
  min-width: 0;
  overflow-wrap: anywhere;
}

.interest-declared-answers h4,
.interest-conversation h4 {
  margin: 0 0 var(--space-3);
}

.interest-declared-answers dl,
.interest-message-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.interest-answer,
.interest-message {
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.interest-answer dt { font-weight: 600; }
.interest-answer dd { margin: var(--space-2) 0 0; }
.interest-answer dd p,
.interest-message p { margin: var(--space-2) 0 0; }

.interest-answer-asked {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
}

.interest-message-heading {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-13);
}

.interest-message-heading time { color: var(--text-secondary); }

.nav-count-badge {
  margin-inline-start: auto;
  min-width: 1.5rem;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--status-warning-border);
  border-radius: var(--radius-md);
  background: var(--status-warning-bg);
  color: var(--text-primary);
  text-align: center;
  font-size: var(--text-12);
  font-weight: 700;
}

/* One Exxaro presentation (spec 105). Existing design tokens remain authoritative. */
:root {
  --duration-photo-cycle: 9s;
  --duration-photo-crossfade: 900ms;
}

.governance-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-5);
}

.governance-action {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard);
}

.governance-action:hover { border-color: var(--exxaro-green); }
.governance-action > .semantic-icon { flex: 0 0 24px; width: 24px; height: 24px; }
.governance-action > span:last-child { display: grid; gap: var(--space-2); }
.governance-action strong { font-size: var(--text-18); line-height: 1.35; }
.governance-action > span > span { color: var(--text-secondary); font-size: var(--text-14); line-height: 1.5; }

.business-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.business-pillars li {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
}
.business-pillars img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.business-pillars li > span { padding: var(--space-2) var(--space-3); font-size: var(--text-14); font-weight: 600; line-height: 1.4; }
.business-pillar-coal img { object-position: center 60%; }
.business-pillar-energy img { object-position: center 50%; }
.business-pillar-metals img { object-position: center 65%; }

/* The original equal strip remains available when enhancement is unavailable. */
.business-carousel { min-width: 0; }
.business-carousel-toolbar { flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; margin-bottom: var(--space-2); }
.business-carousel-toolbar > span { color: var(--text-secondary); font-size: var(--text-12); font-weight: 600; }
.business-carousel-controls { display: flex; align-items: center; gap: var(--space-1); }
.business-carousel-controls button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 32px;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-12);
  cursor: pointer;
}
/* Quiet icon controls retain full touch targets without a visible start prompt. */
.business-carousel-controls button { width: 44px; height: 44px; padding: 0; border-color: transparent; }
.business-rotation-icon { position: relative; display: block; width: 16px; height: 16px; }
.business-rotation-icon::before, .business-rotation-icon::after { position: absolute; top: 3px; bottom: 3px; width: 2px; border-radius: var(--radius-sm); background: currentColor; content: ""; }
.business-rotation-icon::before { left: 5px; }
.business-rotation-icon::after { right: 5px; }
[data-carousel-rotation][data-paused="true"] .business-rotation-icon::before { top: 3px; bottom: auto; width: 0; height: 0; border-radius: 0; border-block: 5px solid transparent; border-left: 7px solid currentColor; background: transparent; }
[data-carousel-rotation][data-paused="true"] .business-rotation-icon::after { opacity: 0; }
.business-carousel-controls .semantic-icon { width: 16px; height: 16px; }
.business-carousel-controls [data-carousel-previous] .semantic-icon { transform: rotate(180deg); }
.business-carousel-controls button:hover { background: var(--surface-subtle); color: var(--text-primary); }
.business-carousel button[hidden] { display: none; }
.business-carousel-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: var(--exxaro-brown); }
.business-carousel-slide { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity var(--duration-photo-crossfade) var(--ease-in-out); }
.business-carousel-slide[data-active="true"] { opacity: 1; }
.business-carousel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.business-carousel-slide::after {
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, color-mix(in srgb, var(--exxaro-brown) 94%, transparent));
  content: "";
}
.business-carousel-slide figcaption { position: absolute; z-index: 1; inset: auto var(--space-5) var(--space-5); display: grid; gap: var(--space-1); color: var(--white); }
.business-carousel-slide figcaption span { font-size: var(--text-12); letter-spacing: 0.12em; }
.business-carousel-slide figcaption strong { font-family: var(--font-display); font-size: var(--text-24); line-height: 1.3; }
.business-carousel > .business-pillars { margin-top: var(--space-3); }
.business-pillar-select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 2px solid transparent; border-radius: var(--radius-md); background: transparent; cursor: pointer; }
.business-pillar-select[aria-pressed="true"] { border-color: var(--exxaro-green); }
.business-pillar-select[aria-pressed="true"]::after { position: absolute; inset: auto var(--space-3) 0; height: 3px; background: var(--exxaro-green); content: ""; }
.business-pillar-select:focus-visible { outline-offset: -5px; }

/* Values read as one quiet composition, with the Exxaro mnemonic in the margin. */
.one-exxaro-values { container-type: inline-size; overflow-wrap: anywhere; }
.one-exxaro-values-heading .eyebrow, .one-exxaro-values-heading h2 { margin: 0 0 var(--space-2); }
.one-exxaro-value-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); padding: 0; margin: var(--space-5) 0 0; list-style: none; }
.one-exxaro-value-list li { display: grid; grid-template-columns: calc(var(--space-6) * 2) minmax(0, 1fr); align-items: start; min-width: 0; gap: var(--space-4); padding: var(--space-2) 0; color: var(--text-primary); }
.one-exxaro-value-list li > div { min-width: 0; }
.one-exxaro-value-letter { display: block; padding-block-start: var(--space-1); color: var(--status-success-fg); font-family: var(--font-display); font-size: var(--text-32); font-weight: 600; line-height: 1; text-align: center; }
.one-exxaro-value-list h3, .one-exxaro-value-list p { margin: 0; }
.one-exxaro-value-list h3 { font-size: var(--text-16); font-weight: 600; line-height: 1.4; }
.one-exxaro-value-list p { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--text-14); line-height: 1.5; }
.one-exxaro-emblem { width: 100%; height: auto; max-width: 180px; border-radius: var(--radius-round); }
.one-exxaro-values-disclosure { padding-inline: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background-color: var(--surface-card); background-image: linear-gradient(135deg, var(--surface-card), var(--surface-subtle)); }
.one-exxaro-values-disclosure > summary { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); min-height: 44px; cursor: pointer; list-style: none; }
.one-exxaro-values-disclosure > summary::-webkit-details-marker { display: none; }
.one-exxaro-values-disclosure > summary .one-exxaro-emblem { flex: 0 0 48px; width: 48px; height: 48px; }
.one-exxaro-values-summary { display: grid; flex: 1; gap: var(--space-1); min-width: 0; }
.one-exxaro-values-summary strong { font-size: var(--text-16); font-weight: 600; }
.one-exxaro-values-summary > span { font-size: var(--text-14); color: var(--text-secondary); }
.one-exxaro-disclosure-icon { position: relative; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid var(--border-subtle); border-radius: var(--radius-round); }
.one-exxaro-disclosure-icon::before, .one-exxaro-disclosure-icon::after { position: absolute; inset: 50% auto auto 50%; width: 10px; height: 1px; background: currentColor; content: ""; transform: translate(-50%, -50%); }
.one-exxaro-disclosure-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--duration-smooth) var(--ease-standard); }
.one-exxaro-values-disclosure[open] .one-exxaro-disclosure-icon::after { transform: translate(-50%, -50%); }
.one-exxaro-values-disclosure .one-exxaro-value-list { margin-block: var(--space-2) var(--space-5); }
/* A font-relative container adapts the composition when enlarged text needs
   more room. Older browsers retain intrinsic wrapping through the base rules. */
@container (max-width: 16rem) {
  .one-exxaro-values-disclosure > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .one-exxaro-values-disclosure > summary .one-exxaro-emblem { grid-column: 1; grid-row: 1; }
  .one-exxaro-values-summary { grid-column: 1 / -1; grid-row: 2; }
  .one-exxaro-disclosure-icon { grid-column: 2; grid-row: 1; }
  .one-exxaro-value-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .one-exxaro-value-letter { padding-block-start: 0; text-align: start; }
}


.one-exxaro-login .login-brand-story, :root[data-theme="dark"] .one-exxaro-login .login-brand-story { position: relative; display: grid; align-items: start; min-height: 0; overflow: hidden; padding: clamp(24px, 3.5vw, 56px); background: transparent; }
.one-exxaro-login .login-brand-story::before, .one-exxaro-login .login-brand-story::after { content: none; }
.one-exxaro-login .login-brand-story { color: var(--text-primary); }
.one-exxaro-login .login-brand-story-inner { min-height: 0; width: 100%; max-width: 36rem; gap: var(--space-5); margin-inline: auto; }
.one-exxaro-login .login-brand-story img { mix-blend-mode: normal; }
.one-exxaro-login .login-brand-story-inner > img { width: 160px; }
.one-exxaro-login .login-panel { min-height: 0; padding: clamp(24px, 3.5vw, 56px); }
.one-exxaro-login .login-auth-inner { gap: var(--space-4); }
.one-exxaro-login .login-copy h1 { font-size: var(--text-36); }
.one-exxaro-login-message { margin-block: var(--space-2) 0; }
.one-exxaro-login-message .eyebrow { margin: 0 0 var(--space-2); color: var(--exxaro-lime); font-size: var(--text-12); }
.one-exxaro-login-message h2 { margin: 0; color: var(--white); font-size: var(--text-32); line-height: 1.25; letter-spacing: -0.025em; }
.one-exxaro-login-message h2 > span { font-weight: 500; }
.one-exxaro-login .business-carousel-toolbar > span, .one-exxaro-login .business-carousel-controls button { color: var(--text-secondary); }
.one-exxaro-login .business-carousel-controls button { border-color: transparent; }
.one-exxaro-login .business-carousel-controls button:hover { border-color: var(--border-subtle); background: var(--surface-card); color: var(--text-primary); }
.one-exxaro-login .business-carousel img { width: 100%; }
.one-exxaro-login .business-carousel-slide img { height: 100%; }
.one-exxaro-login .business-pillars li { border-color: var(--border-subtle); background: var(--surface-card); color: var(--text-primary); }
.one-exxaro-login .business-pillars li > span { font-size: var(--text-12); }
.one-exxaro-login .business-pillar-select[aria-pressed="true"] { border-color: var(--exxaro-lime); }
.one-exxaro-login .business-pillar-select[aria-pressed="true"]::after { background: var(--exxaro-lime); }
.one-exxaro-login .one-exxaro-values-disclosure { border-color: var(--border-subtle); }
.one-exxaro-login .one-exxaro-values-disclosure > summary .one-exxaro-emblem { width: 48px; }
.one-exxaro-login .one-exxaro-values-summary strong, .one-exxaro-login .one-exxaro-value-list li { color: var(--text-primary); }
.one-exxaro-login .one-exxaro-values-summary > span, .one-exxaro-login .one-exxaro-value-list p { color: var(--text-secondary); }
.one-exxaro-login .one-exxaro-disclosure-icon, .one-exxaro-login .one-exxaro-value-list li { border-color: var(--border-subtle); }
.one-exxaro-login .one-exxaro-value-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.one-exxaro-mobile-brand { display: none; }

.one-exxaro-values-disclosure > summary:focus-visible, .business-carousel button:focus-visible, .governance-action:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.business-carousel .business-pillar-select:focus-visible { outline-offset: -5px; }

/* A shared canvas ties the photographic story and the sign-in task together. */
.one-exxaro-login { isolation: isolate; background: var(--surface-page); }
.one-exxaro-login::before { position: absolute; z-index: -1; inset: 0; background: url("images/exxaro-pattern-brown.webp") center top / 56rem auto repeat; opacity: 0.025; content: ""; pointer-events: none; }
.one-exxaro-login .login-panel { background: transparent; }
.one-exxaro-login .login-copy::before { content: none; }
.one-exxaro-login .auth-entry-unified { box-shadow: var(--elevation-1); }
.one-exxaro-login .sign-in-primary-action { justify-content: space-between; }
.one-exxaro-login .sign-in-primary-action .sso-label { margin-right: auto; }
.photo-wordmark, .brand-panel img, .topbar-brand img { filter: brightness(0) invert(1); }
.business-carousel-context { margin: auto 0 var(--space-2); color: var(--white); font-size: var(--text-12); font-weight: 500; letter-spacing: 0.04em; }
.business-carousel-story:has(.business-carousel-context) h2 { margin: 0; }
.business-carousel-slide.business-pillar-coal img, .business-pillar-coal > img { object-position: center 78%; }

/* Declaration current work: green identifies the task; details have room to breathe. */
.declaration-hub-current .employee-home-lead.employee-campaign-card {
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  box-shadow: var(--elevation-1);
}
.declaration-hub-current .employee-campaign-card .employee-lead-main {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  overflow: hidden;
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  background-color: var(--exxaro-green);
  background-image: linear-gradient(112deg, var(--declaration-green-deep), var(--declaration-green-shade) 74%);
  color: var(--white);
}
.declaration-hub-current .employee-campaign-card .employee-lead-main::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("images/exxaro-pattern-brown.webp") right center / var(--declaration-texture-size) auto repeat;
  mask-image: linear-gradient(90deg, transparent 24%, var(--ink));
  opacity: var(--declaration-texture-opacity);
  mix-blend-mode: screen;
  content: none;
  pointer-events: none;
}
.declaration-hub-current .employee-campaign-card .employee-lead-status {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  max-width: 100%;
  color: var(--white);
  background: transparent;
  border-color: color-mix(in srgb, var(--white) 45%, transparent);
}
.declaration-hub-current .employee-campaign-card .employee-lead-status > span {
  flex-shrink: 0;
  outline: none;
}
.declaration-hub-current .employee-campaign-card .employee-lead-eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--white);
}
.declaration-hub-current .employee-campaign-card .employee-lead-main h3 {
  grid-column: 1 / -1;
  margin: 0;
  max-width: none;
  color: var(--white);
  font-size: var(--text-32);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.declaration-card-details {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  background: var(--surface-card);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.declaration-card-details > p,
.declaration-card-details .employee-lead-meta,
.declaration-card-details .employee-campaign-facts,
.declaration-card-details .employee-lead-actions { margin: 0; }
.declaration-card-details > p { max-width: var(--measure-lede); line-height: 1.6; }
.declaration-card-details .employee-lead-meta { color: var(--text-tertiary); line-height: 1.6; }
.declaration-card-details .employee-campaign-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.declaration-card-details .employee-campaign-facts dt { color: var(--text-tertiary); }
.declaration-card-details .employee-campaign-facts dd { color: var(--text-primary); font-size: var(--text-14); }
.declaration-card-details .employee-campaign-facts div:nth-child(2) dd { font-weight: 700; }
.declaration-card-details .employee-lead-actions { padding-top: var(--space-2); }
.declaration-card-details .employee-primary-action {
  max-width: 100%;
  padding-block: var(--space-3);
  border-color: var(--exxaro-green);
  background-color: var(--exxaro-green);
  background-image: linear-gradient(120deg, var(--exxaro-green), var(--declaration-green-shade));
  color: var(--white);
  white-space: normal;
  text-align: center;
}
.declaration-card-details .employee-primary-action:hover { background: color-mix(in srgb, var(--exxaro-green) 85%, var(--ink)); color: var(--white); }
.declaration-card-details .employee-primary-action:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.declaration-card-details .employee-campaign-disabled { color: var(--text-secondary); border-color: var(--border-subtle); }

/* Reveal texture only when the darker tonal surface can render. The
   plain brand-green fallback remains texture-free and readable. */
@supports (background-color: color-mix(in srgb, var(--exxaro-green), var(--ink))) {
  .declaration-hub-current .employee-campaign-card .employee-lead-main::before { content: ""; }
}
@media (max-width: 560px) {
  .declaration-hub-current .employee-campaign-card .employee-lead-main { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .declaration-hub-current .employee-campaign-card .employee-lead-status { grid-column: 1; grid-row: 1; justify-self: start; }
  .declaration-hub-current .employee-campaign-card .employee-lead-eyebrow { grid-column: 1; grid-row: 2; }
  .declaration-card-details .employee-primary-action { width: 100%; }
}
@media (forced-colors: active) {
  .declaration-hub-current .employee-campaign-card .employee-lead-main { background-image: none; }
  .declaration-hub-current .employee-campaign-card .employee-lead-main::before { display: none; }
  .declaration-card-details .employee-primary-action { background-image: none; }
}

/* Queue summaries keep their existing labels, icons and factual meaning. */
.review-queue-page.is-approvals .review-queue-stat.is-awaiting { background: var(--status-success-bg); border-color: var(--status-success-border); box-shadow: var(--elevation-1); }
.review-queue-page.is-approvals .review-queue-stat.is-no-action { background: var(--status-info-bg); }
.review-queue-page.is-approvals .review-queue-stat.is-completed { background: var(--status-success-bg); }
.review-queue-page.is-approvals .review-queue-stat.is-total { background: color-mix(in srgb, var(--exxaro-gold) 10%, var(--surface-card)); }
.review-queue-page.is-approvals .review-queue-stat.is-completed .review-queue-stat-icon { background: var(--status-success-bg); color: var(--status-success-fg); }
.review-queue-page.is-approvals .review-queue-stat.is-awaiting .review-queue-stat-label { color: var(--status-success-fg); }

/* A single photographic feature holds the brand story instead of stacking it above. */
.business-carousel-story { position: relative; z-index: 2; inset: auto; display: flex; flex-direction: column; padding: var(--space-5); pointer-events: none; }
.one-exxaro-login .business-carousel-story > img { align-self: flex-start; width: 130px; height: auto; }
.business-carousel-story h2 { margin: auto 0 0; color: var(--white); font-family: var(--font-display); font-size: var(--text-32); line-height: 1.3; letter-spacing: -0.025em; }
.business-carousel-story h2 > span { font-size: var(--text-24); font-weight: 500; }
.business-carousel.has-story .business-carousel-slide::after { inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--exxaro-brown) 72%, transparent), transparent 35%, color-mix(in srgb, var(--exxaro-brown) 96%, transparent)); }
.business-carousel.has-story .business-carousel-slide figcaption { inset: var(--space-5) var(--space-5) auto auto; display: flex; align-items: center; gap: var(--space-2); text-align: right; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--exxaro-brown) 88%, transparent); }
.business-carousel.has-story .business-carousel-slide figcaption strong { font-size: var(--text-12); }
.business-carousel.has-story .business-carousel-slide figcaption span { opacity: 0.8; letter-spacing: 0.05em; }
.business-carousel.has-story .business-carousel-stage { aspect-ratio: auto; }
.business-carousel.has-story .business-carousel-story { min-height: calc(var(--space-10) * 8); }
.business-carousel.has-story .business-pillars img { aspect-ratio: 5 / 2; }
.one-exxaro-login .login-brand-story-inner { gap: var(--space-4); }

/* One shared gutter aligns the queue with its top-nav title. The Home
   control has room for its existing icon and label; the same width drives both. */
@media (min-width: 761px) {
  .app-workspace:has(.review-queue-page.is-approvals) { --approvals-home-width: calc(var(--space-10) * 2 + var(--space-2)); }
  .app-workspace:has(.review-queue-page.is-approvals) .header-workspace-link { flex: 0 0 var(--approvals-home-width); justify-content: center; }
  .app-workspace:has(.review-queue-page.is-approvals) .app-shell { padding-inline-start: calc(var(--space-8) + var(--approvals-home-width) + var(--space-4)); padding-inline-end: var(--space-8); }
}

.one-exxaro-mobile-brand a { display: inline-flex; align-items: center; min-height: 44px; }
.one-exxaro-mobile-brand a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.one-exxaro-login .auth-entry-copy { grid-template-columns: minmax(0, 1fr); }

/* Tablet tools occupy one row; title and content share the next gutter. */
@media (min-width: 761px) and (max-width: 1000px) {
  .app-workspace:has(.review-queue-page.is-approvals) .app-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-5) var(--space-6); }
  .app-workspace:has(.review-queue-page.is-approvals) .header-workspace-link { grid-column: 1; grid-row: 1; justify-self: start; }
  .app-workspace:has(.review-queue-page.is-approvals) .app-header-tools { grid-column: 2; grid-row: 1; flex-wrap: wrap; }
  .app-workspace:has(.review-queue-page.is-approvals) .header-title { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .app-workspace:has(.review-queue-page.is-approvals) .app-shell { padding-inline: var(--space-6); }
}

@media (min-width: 1001px) {
  .one-exxaro-login, :root[data-theme="dark"] .one-exxaro-login { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

@media (max-width: 1000px) {
  .one-exxaro-login, :root[data-theme="dark"] .one-exxaro-login { grid-template-columns: minmax(0, 1fr); grid-template-areas: "auth" "brand"; }
  .one-exxaro-login .login-panel { display: block; padding: 0; }
  .one-exxaro-login .login-auth-inner { margin-inline: auto; padding: var(--space-8); }
  .one-exxaro-login .login-brand-story { display: block; }
  .one-exxaro-login .login-brand-story-inner > img { display: none; }
  .one-exxaro-login .login-mobile-hero { display: flex; height: auto; min-height: 0; padding: var(--space-4) var(--space-5); background: var(--exxaro-brown); }
  .one-exxaro-mobile-brand { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
  .one-exxaro-mobile-brand img { display: block; width: 130px; height: auto; mix-blend-mode: normal; filter: none; }
  .one-exxaro-mobile-brand > div { flex: 0 1 auto; }
  .one-exxaro-mobile-brand p { display: none; }
  .one-exxaro-mobile-brand a { color: var(--white); font-size: var(--text-12); text-underline-offset: 3px; }
}

@media (max-width: 640px) {
  .governance-actions, .one-exxaro-value-list { grid-template-columns: minmax(0, 1fr); }
  .business-pillars { gap: var(--space-2); }
  .business-pillars li > span { padding: var(--space-2); font-size: var(--text-12); }
  .business-carousel-stage { aspect-ratio: 16 / 10; }
  .business-carousel-slide figcaption { inset: auto var(--space-4) var(--space-4); }
  .business-carousel-controls button { min-height: 44px; min-width: 44px; }
  .one-exxaro-login-message h2 { font-size: var(--text-24); }
  .business-carousel.has-story .business-carousel-story { min-height: calc(var(--space-10) * 7); }
  .business-carousel.has-story .business-carousel-slide figcaption { display: grid; gap: var(--space-1); inset: var(--space-4) var(--space-4) auto auto; border-radius: var(--radius-md); }
  .business-carousel-story { padding: var(--space-4); }
  .business-carousel-story h2 { font-size: var(--text-24); }
  .business-carousel-story h2 > span { font-size: var(--text-18); }
  .one-exxaro-login .business-carousel-story > img { width: 100px; }
  .business-carousel.has-story .business-carousel-story { padding-block-start: calc(var(--text-12) * 3 + var(--space-6) * 2); gap: var(--space-2); }
  .one-exxaro-login .login-auth-inner { padding: var(--space-5); }
  .one-exxaro-login .login-brand-story { padding: var(--space-5); }
  .one-exxaro-login .login-brand-story-inner { gap: var(--space-4); }
  .one-exxaro-values-disclosure > summary { gap: var(--space-3); }
  .one-exxaro-login .login-copy h1 { font-size: var(--text-32); }
}

@media (max-width: 20rem) {
  .one-exxaro-login .login-auth-inner { padding-inline: var(--space-4); }
  .one-exxaro-login .login-brand-story { padding-inline: var(--space-4); }
  .one-exxaro-mobile-brand > div { flex-basis: 100%; }
}

@media (pointer: coarse) {
  .business-carousel-controls button, .one-exxaro-mobile-brand a { min-height: calc(var(--space-6) * 2); }
  .business-carousel-controls button { min-width: calc(var(--space-6) * 2); }
}

@media (prefers-reduced-motion: no-preference) {
  .business-carousel-slide img { animation: one-exxaro-photo-drift var(--duration-photo-cycle) linear both; animation-play-state: paused; }
  .business-carousel[data-running="true"] .business-carousel-slide[data-active="true"] img { animation-play-state: running; }
  .business-carousel-slide.business-pillar-energy img { animation-name: one-exxaro-photo-reveal; }
  .business-carousel-slide.business-pillar-metals img { animation-name: one-exxaro-photo-pan; }
  .business-carousel[data-carousel-ready="true"] .business-pillar-select[aria-pressed="true"]::after { transform-origin: left center; animation: one-exxaro-photo-progress var(--duration-photo-cycle) linear both; animation-play-state: paused; }
  .business-carousel[data-running="true"] .business-pillar-select[aria-pressed="true"]::after { animation-play-state: running; }
  .one-exxaro-values-disclosure[open] .one-exxaro-value-list { animation: auth-disclosure-open var(--duration-smooth) var(--ease-out-quint) both; }
}
@keyframes one-exxaro-photo-drift { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes one-exxaro-photo-reveal { from { transform: scale(1.035); } to { transform: scale(1); } }
@keyframes one-exxaro-photo-pan { from { transform: scale(1.025) translateX(-0.5%); } to { transform: scale(1.025) translateX(0.5%); } }
@keyframes one-exxaro-photo-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .business-carousel-slide, .one-exxaro-disclosure-icon::after { transition: none; }
  .business-carousel-slide img, .business-pillar-select::after, .one-exxaro-value-list { animation: none; }
}

@media (forced-colors: active) {
  .one-exxaro-values-disclosure { background-image: none; }
  .governance-action, .business-pillars li, .business-pillar-select, .one-exxaro-values-disclosure, .business-carousel-controls button { border: 1px solid CanvasText; }
  .business-pillar-select[aria-pressed="true"] { border: 3px solid Highlight; }
  .business-carousel-slide::after { display: none; }
  .business-carousel-story h2, .business-carousel-context { background: Canvas; color: CanvasText; }
  .photo-wordmark { filter: none; forced-color-adjust: none; background: var(--exxaro-brown); padding: var(--space-2); }
  .business-carousel-slide figcaption { background: Canvas; color: CanvasText; padding: var(--space-2); }
  .one-exxaro-login .login-brand-story, .one-exxaro-login-message h2, .one-exxaro-login .one-exxaro-values-summary strong, .one-exxaro-login .one-exxaro-values-summary > span, .one-exxaro-login .one-exxaro-value-list li, .one-exxaro-login .one-exxaro-value-list p, .one-exxaro-login .business-pillars li, .one-exxaro-login .business-carousel-toolbar > span, .one-exxaro-login .business-carousel-controls button { background: Canvas; color: CanvasText; }
}

/* Studio attribution: reserved outside the page scroller, never an overlay. */
.studio-credit {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  min-width: 0;
  padding-block: var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom));
  padding-inline: max(var(--space-2), env(safe-area-inset-left)) max(var(--space-2), env(safe-area-inset-right));
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-page);
  color: var(--text-tertiary);
}
.studio-credit .studio-brand { width: var(--studio-credit-width); }
.studio-credit-copy {
  min-width: 0;
  font-size: var(--text-12);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
@media (min-width: 761px) {
  .studio-credit {
    justify-content: flex-end;
    padding-inline: max(var(--space-6), env(safe-area-inset-left)) max(var(--space-6), env(safe-area-inset-right));
  }
}
.studio-brand {
  display: inline-grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr);
  width: var(--studio-brand-width);
  max-width: 100%;
  vertical-align: middle;
}
.studio-brand-image { display: block; width: 100%; height: auto; }
.studio-brand-image-dark { display: none; }
:root[data-theme="dark"] .studio-brand-image-light { display: none; }
:root[data-theme="dark"] .studio-brand-image-dark { display: block; }
/* Recover first-screen support space without reducing useful text or controls. */
.support-page { gap: var(--space-2); padding-block: 0; margin-block: var(--space-4); }
.support-page .support-heading-compact {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.release-help-prompt:has(.studio-support-signature) { padding-inline: var(--space-3); }
.studio-support-signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--text-13);
}
/* Short enlarged-text screens keep both utilities and page actions reachable. */
@media (max-height: 480px) {
  .app-workspace > .environment-indicator,
  .empty-layout-frame > .empty-layout-utilities {
    flex: 0 0 auto;
    min-height: 0;
    max-height: calc(var(--space-10) + var(--space-8) + var(--space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: var(--space-2);
  }
}
@media (forced-colors: active) {
  .studio-brand { forced-color-adjust: none; background: var(--white); }
  :root .studio-brand .studio-brand-image-light { display: block; }
  :root .studio-brand .studio-brand-image-dark { display: none; }
}
.app-frame, .app-workspace, .app-sidebar { height: 100dvh; min-height: 0; }
.app-workspace > .app-shell { min-height: 0; }
.empty-layout-frame { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.empty-layout-frame > .empty-layout-utilities { flex: 0 0 auto; }
.empty-layout-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; scroll-padding-block: var(--space-4); }
.empty-layout-content .empty-layout-version-control { position: static; }
@media (max-width: 760px) {
  .app-frame { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .app-workspace { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .app-workspace > .app-shell { min-height: 0; overflow-y: auto; padding-bottom: var(--space-6); scroll-padding-block: var(--space-4); }
  .app-topbar {
    flex: 0 0 auto;
    min-height: calc(var(--space-10) + var(--space-6));
    max-height: 45vh;
    max-height: 45dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app-topbar:has(details[open]) { min-height: calc(var(--space-10) + var(--space-8)); }
}
@media print {
  .studio-credit { display: none; }
  .app-frame, .app-workspace, .app-sidebar, .empty-layout-frame { height: auto; overflow: visible; }
  .app-workspace > .app-shell, .empty-layout-content { overflow: visible; }
}

@media (max-width: 760px) {
  .declaration-hub-current .employee-campaign-card .employee-lead-main h3 { font-size: var(--text-24); }
}

/* Keep the environment warning in view while long explanations can scroll. */
.environment-indicator .environment-detail-content {
  max-height: min(25vh, 12rem);
  max-height: min(25dvh, 12rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Focus scrolls the page/menu, not a hidden ancestor containing the footer. */
.app-frame { grid-template-rows: minmax(0, 1fr); overflow: clip; }
.app-workspace, .empty-layout-frame { overflow: clip; }
@media print {
  .app-frame { grid-template-rows: auto; overflow: visible; }
  .app-workspace, .empty-layout-frame { overflow: visible; }
}

/* Grid tracks must yield to narrow viewports when people enlarge the type. */
.employee-history-page, .employee-history-heading, .history-workspace, .release-experience-page {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow-wrap: anywhere;
}
.release-history-link { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 760px) and (max-height: 30rem) {
  .app-topbar:has(details[open]) { min-height: calc(var(--space-10) + var(--space-8)); }
  .environment-indicator .environment-detail-content { max-height: 15vh; max-height: 15dvh; }
}

.environment-detail-content:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* Image-first mobile entry (spec 106): one gallery, form and resource region. */
.one-exxaro-login, :root[data-theme="dark"] .one-exxaro-login {
  grid-template-areas: "brand auth" "resources auth";
  grid-template-rows: auto 1fr;
  align-items: start;
  min-height: 0;
}
.one-exxaro-login .login-brand-story, :root[data-theme="dark"] .one-exxaro-login .login-brand-story { padding-bottom: var(--space-4); overflow: visible; }
.login-brand-resources { grid-area: resources; min-width: 0; padding: 0 clamp(24px, 3.5vw, 56px) clamp(24px, 3.5vw, 56px); }
.login-brand-resources-inner { display: grid; width: 100%; max-width: 36rem; gap: var(--space-4); margin-inline: auto; }
.login-entry-link { display: none; }
.login-entry-link:focus-visible, #unified-entry:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
#unified-entry { scroll-margin-block: var(--space-4); }
.auth-reference-card, .auth-reference-code, .error-panel, .error-reference, .registration-status-reference { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.registration-card { width: min(100%, 34rem); }
.auth-status-actions { min-width: 0; }
.auth-status-actions .login-submit { min-width: min(14rem, 100%); max-width: 100%; }

@media (max-width: 1000px) {
  .one-exxaro-login, :root[data-theme="dark"] .one-exxaro-login {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "auth" "resources";
    grid-template-rows: auto auto auto;
  }
  .one-exxaro-login .login-brand-story, :root[data-theme="dark"] .one-exxaro-login .login-brand-story { padding: var(--space-4) var(--space-8) 0; }
  .one-exxaro-login .login-brand-story-inner { gap: var(--space-2); }
  .one-exxaro-login .login-auth-inner { padding-block: var(--space-5); }
  .login-brand-resources { padding: var(--space-2) var(--space-8) var(--space-8); }
  .login-entry-link { display: inline-flex; align-items: center; justify-content: flex-end; align-self: flex-end; gap: var(--space-2); min-height: 48px; padding-inline: var(--space-2); color: var(--text-primary); font-size: var(--text-14); text-underline-offset: 4px; }
  .login-entry-link .semantic-icon { flex: 0 0 var(--space-4); width: var(--space-4); height: var(--space-4); transform: rotate(90deg); }
  .one-exxaro-login .business-carousel.has-story .business-carousel-story { min-height: clamp(11rem, 45vw, 16rem); padding: var(--space-4); gap: var(--space-2); }
  .one-exxaro-login .business-carousel-story > img { width: 100px; }
  .one-exxaro-login .business-carousel-story h2 { font-size: var(--text-24); }
  .one-exxaro-login .business-carousel-story h2 > span { font-size: var(--text-18); }
  .one-exxaro-login .business-carousel-context { margin-top: auto; font-size: var(--text-12); }
  .one-exxaro-login .business-carousel.has-story .business-carousel-slide figcaption { inset: var(--space-4) var(--space-4) auto auto; max-width: calc(100% - 100px - var(--space-4) * 3); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); border-radius: var(--radius-md); overflow-wrap: anywhere; }
  .one-exxaro-login .business-carousel.has-story .business-pillars img { aspect-ratio: 3 / 1; }
  .one-exxaro-login .business-pillars li > span { display: flex; align-items: center; padding: var(--space-2); }
}
@media (max-width: 640px) {
  .one-exxaro-login .login-brand-story, :root[data-theme="dark"] .one-exxaro-login .login-brand-story, .login-brand-resources { padding-inline: var(--space-5); }
  .one-exxaro-login .login-copy h1 { font-size: var(--text-28); }
  .one-exxaro-login .business-carousel-story h2 { font-size: var(--text-20); }
  .one-exxaro-login .business-carousel-story h2 > span { font-size: var(--text-16); }
}
@media (max-width: 20rem) {
  .one-exxaro-login .login-brand-story, :root[data-theme="dark"] .one-exxaro-login .login-brand-story, .login-brand-resources { padding-inline: var(--space-4); }
}

/* The photo identity row grows with its caption, including enlarged text. */
.business-carousel.has-brand .business-carousel-slide figcaption,
.one-exxaro-login .business-carousel.has-story.has-brand .business-carousel-slide figcaption { display: none; }
.business-photo-header { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.one-exxaro-login .business-photo-header > img { display: block; width: 100%; height: auto; }
.business-photo-caption { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; justify-self: end; }
.business-photo-label { grid-column: 1; grid-row: 1; justify-self: end; max-width: 100%; display: inline-flex; visibility: hidden; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--exxaro-brown) 88%, transparent); color: var(--white); text-align: right; font-size: var(--text-12); line-height: 1.4; overflow-wrap: anywhere; }
.business-photo-label > span { opacity: 0.8; letter-spacing: 0.05em; }
.business-carousel-slide.business-pillar-coal[data-active="true"] ~ .business-carousel-story .business-photo-label-coal,
.business-carousel-slide.business-pillar-energy[data-active="true"] ~ .business-carousel-story .business-photo-label-energy,
.business-carousel-slide.business-pillar-metals[data-active="true"] ~ .business-carousel-story .business-photo-label-metals { visibility: visible; }
@media (max-width: 1000px) {
  .business-photo-header { grid-template-columns: 100px minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .business-photo-label { background: Canvas; color: CanvasText; }
}

/* Intrinsic wrapping keeps the full environment label readable at larger type. */
/* Employee reporting shares the existing page/table and declaration print grammar. */
.employee-record-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.employee-record-summary > div {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}

.employee-record-summary dt { color: var(--text-secondary); }
.employee-record-page .access-table-region { position: relative; }
.employee-record-summary dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.employee-record-facts dd,
.record-long-text,
.record-print-provenance p { overflow-wrap: anywhere; }
.record-long-text { white-space: pre-wrap; }
.record-print-provenance {
  padding-block: var(--space-3);
  border-block: 1px solid var(--border-subtle);
}
.employee-record-declaration,
.employee-record-gift { margin-block: var(--space-6); }

@media (max-width: 640px) {
  .employee-record-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-record-page .page-heading { flex-wrap: wrap; }
}

@media (pointer: coarse) {
  .employee-record-page .access-table-actions a { min-height: 44px; }
}

@media print {
  body:has(.declaration-reporting-view) .declaration-reporting-view .page-heading-copy {
    display: block !important;
  }
  .declaration-reporting-view .access-table-region {
    overflow: visible !important;
    max-height: none !important;
  }
  .declaration-reporting-view .access-table { min-width: 0 !important; width: 100% !important; }
  .declaration-reporting-view .record-long-text,
  .declaration-reporting-view .review-history-note {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    break-inside: auto !important;
  }
  .employee-record-print .employee-record-declaration,
  .employee-record-print .employee-record-gift { break-before: page; }
  .declaration-reporting-view .employee-record-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .empty-layout-utilities { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .empty-layout-utilities > .environment-indicator { flex: 1 1 9rem; max-width: 100%; }
  .empty-layout-utilities > .environment-indicator:has(.environment-detail[open]) { flex-basis: 100%; }
  .empty-layout-theme-control { flex: 0 0 auto; margin-inline-start: auto; }
}