/* cuandu portal — site shell, per the cuandu design language.
   Themes: Arctic (light) / Nautical (dark), switched via data-theme on <html>. */

/* ---- Webfonts: Hyperreadable (UI), self-hosted. The lockup is pre-rendered
   SVG art from the logo kit (wordmark outlined), so no wordmark face. ---- */

@font-face {
  font-family: 'Hyperreadable';
  src: url('/static/fonts/Hyperreadable-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hyperreadable';
  src: url('/static/fonts/Hyperreadable-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hyperreadable';
  src: url('/static/fonts/Hyperreadable-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hyperreadable';
  src: url('/static/fonts/Hyperreadable-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Tokens: Arctic Light ---- */

:root {
  color-scheme: light;

  --color-primary: #3A7099;
  --color-primary-fill: #3A7099;
  --color-primary-fill-hover: #255A7A;
  --color-bg: #FFFFFF;
  --color-section-bg: #FAF9F5;
  --color-header-bg: #F5F3EC;
  --color-subnav-bg: #dae5ee;
  --color-card-border: #94B0C4;
  --color-surface-accent: #E4EFF5;
  --color-border: #C0CDD6;
  --color-hover: #DEEAF2;
  --color-text: #0F1D28;
  --color-text-secondary: #374853;
  --color-footer-bg: #194461;
  --color-colophon-bg: #3B7099;
  --color-focus-ring: rgba(58, 112, 153, 0.15);

  /* On-dark text roles for the footer bands — dark in both themes,
     so dark never overrides them. */
  --color-footer-text: #F0F6F8;
  --color-footer-link: #FFFFFF;
  --color-footer-link-hover: #D6EDFA;

  --color-success: #268466;
  --color-error: #C94A4A;
  --color-warning-text: #92400E;

  --color-secondary-bg: #DDE4E8;
  --color-secondary-hover: #CDD6DC;
  --color-secondary-border: #889FAB;

  /* Spacing scale, shared by every cuandu app. */
  --spacing-xs: 0.5rem;  --spacing-sm: 0.75rem;  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;  --spacing-xl: 2rem;

  --shadow-header: 0 1px 12px rgba(42, 90, 122, 0.08);
  --shadow-elevated: 0 1px 2px rgba(16, 38, 64, 0.12), 0 8px 20px rgba(16, 38, 64, 0.18), 0 16px 48px rgba(16, 38, 64, 0.24);
  --gradient-login: linear-gradient(135deg, #2A5A7A 0%, #3A7099 40%, #4A8AB0 100%);

  /* Badges: solid fill, white text on top. */
  --badge-success-bg: #3D7A47;  --badge-success-text: #FFFFFF;
  --badge-error-bg: #A83A3A;    --badge-error-text: #FFFFFF;
  --badge-warning-bg: #9A7B1C;  --badge-warning-text: #FFFFFF;
  --badge-info-bg: #3A7099;     --badge-info-text: #FFFFFF;
  --badge-neutral-bg: #546E7A;  --badge-neutral-text: #FFFFFF;

  /* Alerts: the classic tints muted against the cream section ground. */
  --alert-info-bg: #E2EAF0;    --alert-info-text: #2A6085;    --alert-info-border: #C8D9E3;
  --alert-success-bg: #DEEDE8; --alert-success-text: #1A6B54; --alert-success-border: #B8E5D8;
  --alert-error-bg: #F2E2E2;   --alert-error-text: #8B3A3A;   --alert-error-border: #E8C4C4;
  --alert-warning-bg: #F5F0E1; --alert-warning-text: #7A5A1A; --alert-warning-border: #F0DEB0;


}

/* ---- Tokens: Nautical Dark ---- */

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #7AA0C0;
  --color-primary-fill: #3A5570;
  --color-primary-fill-hover: #4A6580;
  --color-bg: #141C24;
  --color-section-bg: #10171E;
  --color-header-bg: #24221E;
  --color-subnav-bg: #091016;
  --color-card-border: #3A5570;
  --color-surface-accent: #1E2A35;
  --color-border: #2A3A48;
  --color-hover: #283848;
  --color-text: #F0F4F8;
  --color-text-secondary: #98AAB8;
  --color-footer-bg: #0a1f30;
  --color-colophon-bg: #0A1018;
  --color-focus-ring: rgba(122, 160, 192, 0.15);

  --color-success: #5BC9A0;
  --color-error: #E07070;
  --color-warning-text: #FCD34D;

  --color-secondary-bg: #0E1418;
  --color-secondary-hover: #1E2A35;
  --color-secondary-border: #495961;

  --shadow-header: 0 1px 12px rgba(0, 0, 0, 0.20);
  --shadow-elevated: 0 1px 1px rgba(0, 0, 0, 0.20), 0 8px 20px rgba(0, 0, 0, 0.28), 0 16px 48px rgba(0, 0, 0, 0.36);
  --gradient-login: linear-gradient(135deg, #0A1018 0%, #141C24 40%, #1E2A35 100%);

  /* Badges go neon in dark: dark tint fill, bright same-hue text. */
  --badge-success-bg: #1A3D32;  --badge-success-text: #5DDBB8;
  --badge-error-bg: #2A1A1A;    --badge-error-text: #E07070;
  --badge-warning-bg: #1A1A1A;  --badge-warning-text: #FCD34D;
  --badge-info-bg: #1F3348;     --badge-info-text: #5DB8E8;
  --badge-neutral-bg: color-mix(in srgb, #999999 15%, transparent);   --badge-neutral-text: #999999;

  /* Alerts re-derived against the receding dark section ground. */
  --alert-info-bg: #1C2C36;    --alert-info-text: #9dd0eb;    --alert-info-border: #273E4C;
  --alert-success-bg: #1C362D; --alert-success-text: #5DDBB8; --alert-success-border: #274C3F;
  --alert-error-bg: #371A1A;   --alert-error-text: #E07070;   --alert-error-border: #4E2525;
  --alert-warning-bg: #393018; --alert-warning-text: #f5e2a4; --alert-warning-border: #504422;


}

/* No-JS fallback: follow the OS when no explicit theme was resolved. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --color-primary: #7AA0C0;
    --color-primary-fill: #3A5570;
    --color-primary-fill-hover: #4A6580;
    --color-bg: #141C24;
    --color-section-bg: #10171E;
    --color-header-bg: #24221E;
    --color-subnav-bg: #091016;
    --color-card-border: #3A5570;
    --color-surface-accent: #1E2A35;
    --color-border: #2A3A48;
    --color-hover: #283848;
    --color-text: #F0F4F8;
    --color-text-secondary: #98AAB8;
    --color-footer-bg: #0a1f30;
    --color-colophon-bg: #0A1018;
    --color-focus-ring: rgba(122, 160, 192, 0.15);

    --color-success: #5BC9A0;
    --color-error: #E07070;
    --color-warning-text: #FCD34D;

    --color-secondary-bg: #0E1418;
    --color-secondary-hover: #1E2A35;
    --color-secondary-border: #495961;

    --shadow-header: 0 1px 12px rgba(0, 0, 0, 0.20);
    --shadow-elevated: 0 1px 1px rgba(0, 0, 0, 0.20), 0 8px 20px rgba(0, 0, 0, 0.28), 0 16px 48px rgba(0, 0, 0, 0.36);
    --gradient-login: linear-gradient(135deg, #0A1018 0%, #141C24 40%, #1E2A35 100%);

    --badge-success-bg: #1A3D32;  --badge-success-text: #5DDBB8;
    --badge-error-bg: #2A1A1A;    --badge-error-text: #E07070;
    --badge-warning-bg: #1A1A1A;  --badge-warning-text: #FCD34D;
    --badge-info-bg: #1F3348;     --badge-info-text: #5DB8E8;
    --badge-neutral-bg: color-mix(in srgb, #999999 15%, transparent);   --badge-neutral-text: #999999;

    /* Alerts re-derived against the receding dark section ground. */
    --alert-info-bg: #1C2C36;    --alert-info-text: #9dd0eb;    --alert-info-border: #273E4C;
    --alert-success-bg: #1C362D; --alert-success-text: #5DDBB8; --alert-success-border: #274C3F;
    --alert-error-bg: #371A1A;   --alert-error-text: #E07070;   --alert-error-border: #4E2525;
    --alert-warning-bg: #393018; --alert-warning-text: #f5e2a4; --alert-warning-border: #504422;
  }
}

/* ---- Base ---- */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: 'Hyperreadable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  color: var(--color-text);
}

/* Short pages: the content area grows, not the blue footer band. */
main {
  flex: 1;
  background: var(--color-section-bg);
}

.container { max-width: 60rem; margin-inline: auto; padding-inline: 1.5rem; }
.container-sm { max-width: 32rem; margin-inline: auto; padding-inline: 1.5rem; }
.container-wide { max-width: 90rem; margin-inline: auto; padding-inline: 1.5rem; }

/* Links are always underlined; navigation menus, the lockup, and buttons
   are the exceptions (per the design language's link rule). */
a { color: var(--color-primary); text-decoration: underline; }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring), 0 0 0 1px var(--color-primary);
}

.muted { color: var(--color-text-secondary); }
.mono { font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace; font-size: 0.9em; }

/* ---- Header — sticky cream chrome with the lockup ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10002;
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-header);
}
.header-inner {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* The lockup ships as pre-rendered SVG art in a light-ink and a dark-ink
   variant; theme rules below swap them. font-size stays the scale basis:
   the img height keeps the seal at 1.55em (the seal is 512 of
   the 640-unit viewBox), and the negative margin strips the 64-unit render
   padding baked into the asset. */
.wordmark {
  display: inline-flex;
  align-items: center;
  font-size: 1.125rem;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .lockup { height: 1.9375em; width: auto; flex: none; display: block; margin: -0.19375em; }
.wordmark .lockup-dark { display: none; }
:root[data-theme="dark"] .wordmark .lockup-light { display: none; }
:root[data-theme="dark"] .wordmark .lockup-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .wordmark .lockup-light { display: none; }
  :root:not([data-theme]) .wordmark .lockup-dark { display: block; }
}

.site-nav { display: flex; align-items: center; gap: 0.25rem; }
.site-nav a, .site-nav .nav-form button {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s;
}
@media (hover: hover) {
  .site-nav a:not(.active):hover, .site-nav .nav-form button:hover {
    background: oklch(from var(--color-primary-fill) l c h / 0.3);
  }
}
.site-nav a.active { background: var(--color-primary-fill); color: #fff; }
.site-nav .nav-form { display: inline-flex; margin: 0; }

/* Hamburger (mobile only) — animates to an X. */
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.625rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}

/* ---- Page structure — paper on water ---- */

.page-section-header { background: var(--color-surface-accent); }
.page-header {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 0.5rem;
}
.page-header h1 { margin: 0; font-size: 1.25rem; font-weight: 500; }

.page-section { background: var(--color-section-bg); padding-block: 2rem 2.5rem; }

section.section-divider {
  border-top: 1px solid var(--color-border);
  margin-top: 2rem;
  padding-top: 1.5rem;
}
h2 { font-size: 1.5rem; font-weight: 500; margin: 0 0 1rem; }

/* ---- Paper panels — white surfaces lifting off the cream ground ---- */

.panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
}
.panel-flush { padding: 0; overflow: hidden; }
/* Figcaption-style qualifier below a panel (time window, filters) */
.panel-caption {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  color: var(--color-text-secondary);
}


.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--badge-neutral-bg);   /* neutral default; variants override */
  color: var(--badge-neutral-text);
}
.badge-success { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-error   { background: var(--badge-error-bg);   color: var(--badge-error-text); }
.badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-info    { background: var(--badge-info-bg);    color: var(--badge-info-text); }

/* ---- Alerts — tinted banners (the shared estate block, as in tero) ---- */

.alert {
  padding: 0.75rem 1rem;
  border: 1px solid;
  border-radius: 0.5rem;
  margin: 0 0 1.25rem;
}
.alert-info    { background: var(--alert-info-bg);    color: var(--alert-info-text);    border-color: var(--alert-info-border); }
.alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); border-color: var(--alert-success-border); }
.alert-error   { background: var(--alert-error-bg);   color: var(--alert-error-text);   border-color: var(--alert-error-border); }
.alert-warning { background: var(--alert-warning-bg); color: var(--alert-warning-text); border-color: var(--alert-warning-border); }

/* ---- Buttons ---- */

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; }
.btn-primary { background: var(--color-primary-fill); color: #fff; }
.btn-secondary {
  background: var(--color-secondary-bg);
  color: var(--color-text);
  border-color: var(--color-secondary-border);
}
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
@media (hover: hover) {
  .btn-primary:hover { background: var(--color-primary-fill-hover); }
  .btn-secondary:hover { background: var(--color-secondary-hover); }
}

/* ---- Auth — a plain card on the system's only gradient ---- */
/*
 * The card carries no border: the elevated shadow does the lifting against
 * the gradient. Matches tero, which the design language names as the
 * exemplar of this treatment.
 */

body.auth {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-login);
  padding: 1.5rem;
}
.card {
  background: var(--color-bg);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-elevated);
  padding: 2rem;
  width: 100%;
  max-width: 26rem;
}
.card .wordmark { display: flex; margin-bottom: 1.25rem; }
/* 700 is rare in the system; the auth-card heading is where it lives. */
.card h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
.card .btn-block { display: block; text-align: center; }

/* ---- Footer — on the blue ---- */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  text-align: center;
  padding: 1rem 1rem 1.25rem;
}
.site-footer p { margin: 0.375rem 0; }

#theme-toggle {
  font: inherit;
  color: var(--color-footer-link);
  background: none;
  border: 0;
  padding: 0.25rem;
  cursor: pointer;
}
@media (hover: hover) {
  #theme-toggle:hover { color: var(--color-footer-link-hover); text-decoration: underline; }
}

/* ---- Colophon — the last band ---- */

.site-colophon {
  background: var(--color-colophon-bg);
  color: var(--color-footer-text);
  text-align: center;
  padding: 1rem;
}
@media (display-mode: standalone) {
  .site-colophon { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}
.site-colophon p { margin: 0; }

/* ---- Mobile ---- */

@media (max-width: 768px) {
  .container, .container-wide { padding-inline: 1rem; }
  .menu-btn { display: flex; }

  .site-nav {
    display: none;
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    background: var(--color-bg);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  body.menu-open .site-nav { display: flex; }
  body.menu-open { overflow: hidden; }
  body.menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .menu-btn span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  body.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav a, .site-nav .nav-form { width: 100%; }
  .site-nav a, .site-nav .nav-form button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 0.25rem;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: none;
  }
  .site-nav a.active { background: none; color: var(--color-primary); }

  .hide-mobile { display: none; }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.panel p:first-child { margin-top: 0; }
.panel p:last-child { margin-bottom: 0; }
.page-copy { max-width: 42rem; }
.account-details { display: grid; grid-template-columns: 9rem 1fr; gap: 0.5rem 1rem; margin: 0 0 1.5rem; }
.account-details dt { font-weight: 500; }
.account-details dd { margin: 0; overflow-wrap: anywhere; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 10003; padding: 0.5rem 1rem; background: var(--color-bg); }
.skip-link:focus { top: 0.5rem; }
.auth-return { margin-bottom: 0; }
body.auth main { background: none; flex: none; width: 100%; }
body.auth .card { margin-inline: auto; }
@media (max-width: 448px) { .account-details { grid-template-columns: 1fr; } }

/* Without scripting, keep the mobile navigation in document flow. */
@media (max-width: 768px) {
  :root:not([data-theme]) .menu-btn { display: none; }
  :root:not([data-theme]) .header-inner { height: auto; min-height: 4rem; flex-wrap: wrap; padding-block: 1rem; }
  :root:not([data-theme]) .site-nav { display: flex; position: static; padding: 0; width: 100%; }
}

/* Account request forms and review. */
.request-container { max-width: 48rem; }
.contact-form { margin-block: 1.5rem; }
.form-fields { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.contact-form > .form-group + .btn, .contact-form > .form-fields + .btn { margin-top: 1rem; }
.contact-form > altcha-widget { display: block; margin-top: 1.25rem; }
.form-group label { font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
 width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 1rem; line-height: 1.25;
 color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border);
 border-radius: 0.5rem; padding: 0.5rem 0.75rem;
}
.form-group textarea { resize: vertical; line-height: 1.6; }
.form-group select {
 appearance: none; -webkit-appearance: none;
 min-height: calc(1.25em + 1rem + 2px);
 padding-right: 2.5rem;
 background-image: url("/static/select-chevron-light.svg");
 background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem;
}
:root[data-theme="dark"] .form-group select {
 background-image: url("/static/select-chevron-dark.svg");
}
@media (prefers-color-scheme: dark) {
 :root:not([data-theme]) .form-group select {
  background-image: url("/static/select-chevron-dark.svg");
 }
}

.form-group :is(input,select,textarea):focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field-help { color: var(--color-text-secondary); margin-block: 0.5rem; }
.field-error { color: var(--alert-error-text); margin: 0; }
.field-error:empty { display: none; }
.form-actions { display: flex; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--color-border); padding-top: 1.25rem; margin-top: 1.5rem; }
.preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.request-item { margin-block: 1rem; overflow-wrap: anywhere; }
.request-item h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.request-timeline { list-style: none; padding: 0; margin: 0; }
.request-timeline > li { position: relative; padding: 0 0 1.75rem 1.75rem; overflow-wrap: anywhere; }
.request-timeline > li:last-child { padding-bottom: 0; }
.request-timeline > li:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 0.3125rem; top: 0.75rem; bottom: -0.75rem; width: 2px; background: var(--color-border); }
.request-timeline > li::after { content: ''; position: absolute; inset-inline-start: 0; top: 0.375rem; width: 0.75rem; height: 0.75rem; box-sizing: border-box; border: 2px solid var(--color-primary); border-radius: 50%; background: var(--color-section-bg); }
.timeline-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 1rem; }
.timeline-heading h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.timeline-date, .timeline-actor { color: var(--color-text-secondary); }
.timeline-actor { margin: 0.25rem 0 0; }
.timeline-note { margin: 0.75rem 0 0; }
.address-autocomplete { position: relative; }
#address-results { list-style: none; padding: 0; margin: 0; border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-bg); }
#address-results li { padding: 0.75rem; cursor: pointer; }
#address-results li:hover, #address-results li[aria-selected=true] { background: var(--color-surface-accent); }
[hidden] { display: none !important; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* Staff navigation follows the active branch at each depth. */
.site-subnav { background: var(--color-subnav-bg); }
.subnav-inner { display: flex; align-items: stretch; gap: 1.5rem; min-height: 2.75rem; }
.subnav-inner a { display: inline-flex; align-items: center; font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.subnav-inner a.active { color: var(--color-text); border-bottom-color: var(--color-primary); }
.subnav-back { gap: 0.4rem; }
.menu-root { display: contents; }
.mobile-menu-level, .mobile-staff-trigger { display: none; }
.breadcrumbs { margin-bottom: 1.5rem; font-size: 1rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.breadcrumbs li + li::before { content: '/'; color: var(--color-text-secondary); }
.breadcrumbs [aria-current] { color: var(--color-text-secondary); }
.staff-content > .panel + .panel { margin-top: 1.5rem; }
.staff-content > .section-divider:first-child, .staff-content > .breadcrumbs + .section-divider { border-top: 0; padding-top: 0; margin-top: 0; }
@media (hover: hover) { .subnav-inner a:not(.active):hover { color: var(--color-text); } }
@media (max-width: 768px) {
  .subnav-inner { overflow-x: auto; gap: 1.25rem; }
  .subnav-inner a { flex-shrink: 0; }
  body.menu-open .site-subnav { display: none; }
  .menu-enhanced .staff-menu-link { display: none; }
  .site-nav .mobile-staff-trigger, .mobile-menu-level { display: block; }
  .site-nav .mobile-staff-trigger, .mobile-menu-level button, .mobile-menu-level a {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 1rem 0.25rem; color: var(--color-text); background: none;
    font: inherit; font-weight: 500; text-align: left; text-decoration: none;
    border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; cursor: pointer;
  }
  .mobile-menu-level [data-menu-back] { justify-content: flex-start; gap: 0.5rem; position: sticky; top: 0; background: var(--color-bg); }
  .mobile-menu-level .active { color: var(--color-primary); }
}
.service-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.service-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; text-decoration: none; color: var(--color-text); background: var(--color-surface-accent); border: 1px solid var(--color-card-border); border-radius: 0.5rem; transition: border-color 0.15s, box-shadow 0.15s; }
.service-card-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; color: var(--color-primary); }
.service-card-title { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.service-card-description { display: block; color: var(--color-text-secondary); }
@media (hover: hover) { .service-card:hover { color: var(--color-text); border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.25); } }
@media (max-width: 768px) { .service-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .service-card { transition: none; } }

/* Sign-up queue. */
.queue-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
.queue-filters .form-group:first-child { flex: 1 1 16rem; }
.queue-filters .form-group:nth-child(2) { flex: 0 1 12rem; }
.queue-filter-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.queue-list { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--color-bg); font-size: 1rem; }
.queue-status-column { width: 11rem; }
.queue-date-column { width: 10rem; }
.queue-list th { background: var(--color-surface-accent); border-bottom: 2px solid var(--color-border); text-align: left; font-weight: 600; padding: 0.625rem 0.875rem; white-space: nowrap; }
.queue-list td { border-top: 1px solid var(--color-border); padding: 0.5rem 0.875rem; vertical-align: baseline; }
.queue-list tbody tr:first-child td { border-top: 0; }
@media (hover: hover) { .queue-list tbody tr:hover td { background: var(--color-hover); } }
.queue-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-date { font-variant-numeric: tabular-nums; }
.queue-date span { display: inline-block; }
@media (max-width: 600px) {
 .queue-status-column { width: 6.5rem; }
 .queue-date-column { width: 5rem; }
 .queue-list th, .queue-list td { padding: 0.5rem 0.375rem; }
 .queue-list th { white-space: normal; }
 .queue-date span { display: block; }
}

.queue-feedback { min-height: 1.6em; margin-block: 0.5rem; color: var(--color-text-secondary); }
#queue-results[aria-busy="true"] { opacity: 0.65; }

.workspace-name { min-width: 0; overflow-wrap: anywhere; }

.user-list { table-layout: fixed; width: 100%; }
.user-list th:first-child { width: 50%; }
.user-list th:nth-child(2) { width: 30%; }
.user-list td { overflow-wrap: anywhere; }
.user-uid { overflow-wrap: anywhere; font-family: monospace; }

.mail-list td { overflow-wrap: anywhere; }