/* ============================================================
   PERS EMPLOYEE PORTAL  ·  shared theme
   One file controls the whole look. Change a color here and it
   updates everywhere. Matches the EVENT DOOR CHECK-IN screen.
   ============================================================ */

:root {
  /* ---- Core color (PERS 4.0 master handoff §2.1) ---- */
  --black:        #000000;   /* page background */
  --panel:        #0a0c0d;   /* cards / field backgrounds */
  --panel-2:      #060a0a;   /* inset / locked-field background */
  --panel-edge:   #1c2224;   /* borders on dark cards */
  --cyan:         #25e5e5;   /* primary accent: borders, focus, labels, actions, active nav */
  --cyan-rgb:     37,229,229; /* same cyan as an rgb triple, for rgba(var(--cyan-rgb),a)
                                  glows/tints — 574 of those app-wide, so without this
                                  token most of the cyan would stay hardcoded. */
  --cyan-dim:     #0f6e6e;   /* low-emphasis: back links, sign-out, captions */
  --white:        #ffffff;   /* primary text / headers */
  --green:        #00ff00;   /* typed input text + auto-filled employee data */
  --muted:        #8a9698;   /* field descriptions, secondary labels */
  --faint:        #6f7b7d;   /* help / notes */
  --faint-2:      #5f6b6d;   /* inactive nav, fine print */
  --attention:    #ffff00;   /* AUTO-DETECTED / "do not reuse" only */
  --err:          #ff5252;   /* error border */
  --err-text:     #ff8a8a;   /* error text */
  --doc-bg:       #ffffff;   /* white-paper forms (FM-5949) — never themed */
  --doc-ink:      #111111;

  /* ---- Status palette (§2.2) ---- */
  --st-submitted: #00ffff;   /* submitted */
  --st-review:    #ffd23f;   /* in review / on hold / warning (also amber APPR accent) */
  --st-approved:  #00ff9c;   /* approved / completed / active / secure */
  --st-completed: #00ff9c;
  --st-denied:    #ff5d5d;   /* denied / cancelled / urgent / restricted (also red/REDHAT) */
  --st-cancelled: #ff5d5d;

  /* ---- Dashboard badge fills (§2.2) ---- */
  --badge-done:   #1f8a32;
  --badge-wait:   #8a6d1f;
  --badge-deny:   #8a261f;

  /* ---- Category colors — Essential Personnel (§2.3) ---- */
  --cat-admin:    #25e5e5;
  --cat-plant:    #ffd23f;
  --cat-security: #ff5d5d;
  --cat-health:   #00ff9c;
  --cat-tech:     #00ffff;
  --cat-food:     #ffd23f;

  /* ---- Radius (§2.4) ---- */
  --r-field: 12px;
  --r-card:  16px;
  --r-lg:    22px;
  --r-pill:  999px;

  /* ---- Spacing scale (§2.4) ---- */
  --s-1: 6px;  --s-2: 12px;  --s-3: 18px;  --s-4: 24px;  --s-5: 30px;

  /* ---- Effects (§2.4) ---- */
  --focus-ring:  0 0 0 2px rgba(37,229,229,.25);
  --glow:        0 0 16px rgba(37,229,229,.22);
  --glow-strong: 0 0 26px rgba(37,229,229,.45);
  --title-glow:  0 0 18px rgba(37,229,229,.45);

  /* ---- Type (§2.4) ---- */
  --font: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Terminal grid overlay (§2.4) ---- */
  --grid-line: rgba(37,229,229,0.05);  /* terminal grid overlay. ONE dial for all ~50 screens
                                          (44 declarations point here). Tried 0.20 on 07/21 —
                                          William: 'looks terrible' — reverted to the original 0.05. */
  --grid-size: 46px;

  /* ---- Legacy aliases — keep existing component CSS working ---- */
  --text-muted: var(--muted);
  --text-faint: var(--faint);
  --grid:       var(--grid-line);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: var(--black);
  -webkit-text-size-adjust: 100%;   /* stop iOS Safari from inflating text on mobile */
  text-size-adjust: 100%;
  /* faint terminal grid behind everything */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  color: var(--white);
  font-family: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  overflow: hidden;              /* the PAGE itself never scrolls -> no iOS scroll indicator */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbars everywhere (still scrolls) — WebKit/iOS Safari/Chrome.
   The page scrolls normally; only the visible bars are suppressed. */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* center the content column, comfortable on a phone.
   The shell is ALSO the scroll region (the page/body does not scroll), so the
   scroll indicator is this container's bar — which we can hide. (JotForm-style
   fixed shell + inner scroll.) */
.shell {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 34px 22px 60px;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;                     /* iOS-safe full viewport height */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
  scrollbar-width: none;              /* Firefox */
}
.shell::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* iOS/Safari/Chrome */

/* ---- headers ---- */
.title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  /* the white-with-cyan-glow look from your screenshot */
  text-shadow: 0 0 18px rgba(37, 229, 229, 0.45);
  line-height: 1.1;
}

.subtitle {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cyan);
}

/* ---- the dark rounded card that holds the form ---- */
.card {
  margin-top: 26px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 22px;
  padding: 26px 20px 24px;
}

/* ---- form fields ---- */
.label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 4px 8px;
}

.field {
  width: 100%;
  background: var(--black);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  color: var(--green);
  font-family: inherit;
  font-size: 18px;
  letter-spacing: 0.04em;
  padding: 18px 16px;
  margin-bottom: 18px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(37, 229, 229, 0.25);
}
.field::placeholder { color: #3a4244; }

/* ---- the cyan-outlined glowing SIGN IN button ---- */
.btn {
  display: block;
  width: 100%;
  background: var(--black);
  border: 2px solid var(--cyan);
  border-radius: 14px;
  color: var(--cyan);
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 18px 16px;
  margin-top: 6px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(37, 229, 229, 0.25);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover, .btn:active {
  background: rgba(37, 229, 229, 0.08);
  box-shadow: 0 0 26px rgba(37, 229, 229, 0.45);
}

/* ---- error banner (kept in the interface's own voice) ---- */
.error {
  border: 1px solid #ff5252;
  border-radius: 12px;
  color: #ff8a8a;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 12px 14px;
  margin-bottom: 18px;
  text-align: center;
}

/* ============================================================
   PORTAL (post-login) pieces
   ============================================================ */

.record {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 18px;
  padding: 20px;
  margin-top: 22px;
}
.record .row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--panel-edge);
  font-size: 15px;
}
.record .row:last-child { border-bottom: none; }
.record .row .k { color: var(--cyan); letter-spacing: 0.10em; text-transform: uppercase; font-size: 12px; }
.record .row .v { text-align: right; color: var(--green); }

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 4px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--panel-edge);
}

/* a single service row: icon · text · status · chevron */
.svc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  text-decoration: none;
  color: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.svc-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(37, 229, 229, 0.20);
}

.icon-tile {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--black);
  border: 1px solid var(--panel-edge);
  color: var(--cyan);            /* the inline SVG inherits this via currentColor */
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-tile svg { width: 22px; height: 22px; }

.svc-text { flex: 1; min-width: 0; }
.svc-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.svc-desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #8a9698;
}

.badge-done {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1f8a32;
  color: #d6ffd9;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-wait {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #8a6d1f; color: #fff3d6; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding-bottom: 4px;
}
.badge-deny {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #8a261f; color: #ffd9d6; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- form engine pieces ---- */
.title--form { font-size: 22px; }

.backlink {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--cyan-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration: none;
}
.backlink:hover { color: var(--cyan); }

.form-heading {
  margin: 24px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--panel-edge);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}

.req { color: var(--cyan); }

.field--area { min-height: 96px; resize: vertical; }
/* file input — dashed upload box (Service Forms look) */
.field--file {
  padding: 16px; font-size: 13px; color: var(--text-faint);
  border-style: dashed; cursor: pointer; text-align: center;
}
.field--file::file-selector-button {
  font-family: inherit; font-size: 12px; letter-spacing: 0.06em;
  color: var(--cyan); background: none; border: 1px solid var(--cyan-dim);
  border-radius: 8px; padding: 7px 12px; margin-right: 12px; cursor: pointer;
}
.field--file::file-selector-button:hover { border-color: var(--cyan); }
.field--locked {
  color: var(--green);
  background: #060a0a;
  border-style: dashed;
  border-color: var(--cyan-dim);
  cursor: not-allowed;
}
select.field { appearance: none; }

.error-list { margin: 8px 0 0; padding-left: 20px; text-align: left; }
.error-list li { margin: 3px 0; }

/* auto-detected pay period panel (Leave Card) — border + value colored by state */
.payperiod {
  border: 1px solid #9aa6a8;
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 4px;
  background: #060a0a;
  color: #9aa6a8;
}
.payperiod.good { border-color: var(--cyan); color: var(--cyan); }
.payperiod.bad  { border-color: #ff8a8a; color: #ff8a8a; }
.payperiod-k { font-size: 10px; letter-spacing: 0.15em; color: #FFFF00; text-transform: uppercase; }
.payperiod-v { margin-top: 7px; font-size: 13.5px; color: currentColor; }

/* signature pad */
.sigpad {
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  background: var(--black);
  overflow: hidden;
}
.sigcanvas { display: block; width: 100%; height: 170px; touch-action: none; cursor: crosshair; background: var(--black); }
.sig-clear {
  margin: 8px 0 4px;
  background: none; border: none;
  color: var(--cyan-dim);
  font-family: inherit; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; text-decoration: underline;
}
.sig-clear:hover { color: var(--cyan); }

/* preview modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 16px; overflow-y: auto; z-index: 50;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 100%; max-width: 720px;
  background: var(--panel);
  border: 1px solid var(--cyan-dim);
  border-radius: 18px;
  box-shadow: 0 0 40px rgba(37,229,229,0.18);
  padding: 22px;
}
.modal-title {
  text-align: center; color: var(--cyan);
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 14px; font-weight: 700;
  padding-bottom: 14px; border-bottom: 1px solid var(--panel-edge); margin-bottom: 6px;
}
.modal-body { max-height: 72vh; overflow-y: auto; }
.doc-frame { width: 100%; height: 66vh; border: none; border-radius: 8px; background: #fff; }
.doc-loading, .doc-error { padding: 28px 8px; text-align: center; color: var(--cyan); font-size: 14px; letter-spacing: 0.04em; }
.doc-error { color: #ff6b6b; }
.pv-row { padding: 11px 2px; border-bottom: 1px solid var(--panel-edge); }
.pv-k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.pv-v { margin-top: 3px; font-size: 15px; color: var(--white); word-break: break-word; }
.pv-empty { color: #5f6b6d; }
.pv-sig { margin-top: 6px; max-width: 100%; border: 1px solid var(--panel-edge); border-radius: 8px; background: #000; }
.modal-actions { display: flex; gap: 12px; margin-top: 18px; }
.modal-actions .btn { margin-top: 0; }
.btn--ghost { border-color: var(--panel-edge); color: #9aa6a8; box-shadow: none; }
.btn--ghost:hover { border-color: var(--cyan-dim); color: var(--cyan); background: none; box-shadow: none; }

/* document-style preview — black on white, like the printed Leave Card / PDF */
.docsheet {
  background: #fff; color: #111;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 8px; padding: 22px 20px; line-height: 1.5;
}
.docsheet .doc-title {
  text-align: center; font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.03em; color: #111;
  border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 4px;
}
.doc-h {
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #111;
  border-bottom: 1px solid #999; padding-bottom: 4px; margin: 16px 0 8px;
}
.doc-row { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px dotted #ccc; }
.doc-rowcol { padding: 6px 0; border-bottom: 1px dotted #ccc; }
.doc-k { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: #333; flex: 0 0 auto; }
.doc-v { font-size: 13px; text-align: right; color: #111; word-break: break-word; }
.doc-empty { color: #aaa; }
.doc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; margin-top: 6px; }
.doc-opt { font-size: 12px; color: #111; }
.doc-sig { padding: 8px 0; }
.doc-sigimg { display: block; margin-top: 6px; max-width: 100%; border: 1px solid #ccc; background: #fff; }
.doc-cert { margin-top: 16px; font-style: italic; font-size: 11px; color: #333; border-top: 1px solid #999; padding-top: 10px; }

.field-note {
  display: block;
  margin: -10px 4px 16px;
  font-size: 11.5px;
  color: #6f7b7d;
  letter-spacing: 0.02em;
}

/* radio/checkbox tap-rows — cyan circle (radio) / square (checkbox) indicator
   (Service Forms look). Markup stays <label><input><span> so the preview JS,
   which reads the input's checked state + the span text, is unchanged. */
.choices { margin-bottom: 18px; }
.choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 13px;
  margin-bottom: 8px;
  background: var(--black);
  border: 1px solid var(--panel-edge);
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.45;
  cursor: pointer;
}
.choice:hover { border-color: var(--cyan-dim); }
.choice:has(input:checked) { border-color: var(--cyan); background: rgba(37, 229, 229, 0.06); }
.choice span { color: var(--white); }
/* custom indicator drawn on the native input (kept for the preview JS) */
.choice input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px;
  border: 2px solid #3a4244; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.choice input[type="radio"] { border-radius: 50%; }
.choice input[type="checkbox"] { border-radius: 5px; }
.choice input:checked { border-color: var(--cyan); }
.choice input:checked::after {
  content: ""; width: 8px; height: 8px; background: var(--cyan);
}
.choice input[type="radio"]:checked::after { border-radius: 50%; }
.choice input[type="checkbox"]:checked::after { border-radius: 2px; }
.choice input:focus-visible { box-shadow: 0 0 0 2px rgba(37, 229, 229, 0.35); }

/* ---- confirmation ---- */
.confirm { text-align: center; padding-top: 40px; }
.confirm-greet {
  margin: 4px auto 2px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(37, 229, 229, 0.40);
}
.confirm-check {
  width: 76px; height: 76px; margin: 0 auto 18px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  font-size: 38px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(37,229,229,0.35);
}
.confirm-form { margin-top: 6px; color: var(--cyan); letter-spacing: 0.1em; font-size: 14px; }
.confirm-msg { margin: 16px auto; max-width: 380px; line-height: 1.5; color: #c7d0d1; }
.confirm-ref { margin-bottom: 26px; color: var(--cyan-dim); letter-spacing: 0.16em; font-size: 13px; }
.confirm .btn { max-width: 320px; margin: 0 auto; }
.svc-go { flex: 0 0 auto; color: var(--cyan); font-size: 22px; line-height: 1; }

.admin-divider {
  margin: 38px 0 4px;
  padding-top: 18px;
  border-top: 1px dashed var(--cyan-dim);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.signout {
  display: block;
  text-align: center;
  margin-top: 28px;
  color: var(--cyan-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  text-decoration: none;
}
.signout:hover { color: var(--cyan); }

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   SPLASH  ·  boot screen shown once per session on first load
   Full-bleed image on black, centered & letter-boxed (the image's
   own background is black, so the bars are seamless). Auto-advances
   to the Sign In screen; a tap/click anywhere skips it.
   ============================================================ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--black);
  background-image: url('/static/splash.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;   /* never crop the boot text / progress bar */
  opacity: 1;
  cursor: pointer;
  transition: opacity 0.55s ease;
  -webkit-tap-highlight-color: transparent;
}
.splash.is-hiding { opacity: 0; }
.splash.is-gone   { display: none; }

/* on big screens, keep it phone-shaped and centered like the rest of the app;
   contain already does this, but cap it so it never balloons absurdly tall */
@media (min-width: 900px) {
  .splash { background-size: auto 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .splash { transition: opacity 0.2s linear; }
}

/* ============================================================
   APP SHELL  ·  one column, centered on every screen size
   On a desktop this is simply the phone layout, centered in the
   middle of the screen — no sidebar, no multi-column grid.
   ============================================================ */
.shell--app { max-width: 560px; }

/* ============================================================
   SPLASH ANIMATION  ·  recreated from Splash + Sign In.dc.html
   The original splash.png is shown as an <img> on full-bleed
   black; overlays animate a CRT power-on, the INITIALIZING bar
   filling 0->100% (over the baked bar at x21-74.3% / y78.3%),
   the orb flare pulsing (~49% x, 41% y), and a faint flicker.
   Coordinates/timing copied from the prototype. The art is
   never redrawn — these are overlay layers only.
   ============================================================ */
.splash { display: flex; align-items: flex-start; justify-content: center; }
.splash { background-image: none; }   /* override the old background-image splash */

/* Full-bleed cropped boot art (splash_fullbleed.png), top-aligned ~48px below
   the device top so it sits right under the status bar — no letterbox. */
.splash-stage { width: 100%; max-width: 440px; }
.splash-art {
  position: relative; width: 100%; transform-origin: top center;
  margin-top: 48px;
  animation: pers-crton 0.95s cubic-bezier(.2,.7,.2,1) both;
}
.splash-art > img { display: block; width: 100%; height: auto; }

.splash-orb {
  position: absolute; left: 49%; top: 40.2%; width: 36.2%; height: 19.8%;
  border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(220,252,255,0.9) 0%, rgba(37,229,229,0.45) 38%, transparent 68%);
  mix-blend-mode: screen; pointer-events: none;
  animation: pers-orbpulse 2.8s ease-in-out infinite;
}
.splash-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.16) 2px 3px);
  mix-blend-mode: multiply;
}
.splash-bar-fill {
  position: absolute; left: 19.3%; top: 79.0%; width: 56.7%; height: 1.66%;
  background: #02080d; pointer-events: none;
  animation: pers-fill 2s cubic-bezier(.25,.7,.35,1) 0.5s both;
}
.splash-bar-edge {
  position: absolute; left: 19.3%; top: 79.0%; width: 56.7%; height: 1.66%;
  border: 1px solid rgba(37,229,229,0.3); border-radius: 1px; pointer-events: none;
}
.splash-bar-head {
  position: absolute; top: 78.6%; width: 3px; height: 2.6%;
  background: #cffcfc; box-shadow: 0 0 9px 2px rgba(37,229,229,0.95);
  mix-blend-mode: screen; pointer-events: none;
  animation: pers-fillhead 2s cubic-bezier(.25,.7,.35,1) 0.5s both;
}
.splash-pct-mask {
  position: absolute; left: 78.3%; top: 78.7%; width: 10.6%; height: 2.4%;
  background: #000; pointer-events: none;
  animation: pers-pct 2.5s steps(1,end) both;
}
.splash-flicker {
  position: absolute; inset: 0; background: rgba(37,229,229,0.5);
  mix-blend-mode: screen; pointer-events: none;
  animation: pers-flicker 4.5s steps(1,end) infinite;
}

/* ============================================================
   DESKTOP BOOT SPLASH (>=1024px) — "landscape split" (Option C).
   The phone splash is untouched: .splash-panel is display:none below this
   breakpoint, and every rule here is scoped inside the media query. The art
   is anchored left at full viewport height; the boot readout sits beside it.
   The orb / scan / progress overlays are positioned in % OF THE ART, so they
   scale with it automatically and stay locked to the same pixels of artwork.
   ============================================================ */
.splash-panel { display: none; }

/* 1280px (not the 1024px used by the app's sidebar layout): an iPad in landscape
   reports 1024 CSS px, and the boot splash should stay phone-shaped on tablets. */
@media (min-width: 1280px) {
  .splash { align-items: center; }
  .splash-stage {
    max-width: none; width: 100%; height: 100vh;
    display: flex; align-items: center; justify-content: center;
    gap: clamp(28px, 5vw, 92px); padding: 0 clamp(24px, 5vw, 90px);
  }
  /* height-driven: the art fills the screen top to bottom, width follows the
     885:1607 aspect of splash_fullbleed.png so nothing is stretched or cropped. */
  .splash-art {
    margin-top: 0; flex: 0 0 auto;
    height: 100vh; width: auto; aspect-ratio: 885 / 1607;
    transform-origin: center center;
  }
  .splash-art > img { width: 100%; height: 100%; }

  .splash-panel {
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(12px, 1.6vh, 22px);
    flex: 0 1 460px; min-width: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    animation: sp-panel-in 0.7s ease-out 0.5s both;
  }
  .sp-wordmark {
    font-size: clamp(26px, 3vw, 42px); font-weight: 800; letter-spacing: 9px;
    color: #fff; text-shadow: 0 0 22px rgba(37, 229, 229, 0.45);
  }
  .sp-sub { font-size: 10px; letter-spacing: 2.6px; color: #0f6e6e; }
  .sp-hr  { height: 1px; background: rgba(37, 229, 229, 0.22); }
  .sp-lines { display: flex; flex-direction: column; gap: 7px; }
  .sp-l { font-size: 10.5px; letter-spacing: 1.5px; color: #8a9698; }
  .sp-l b { color: #25e5e5; font-weight: 700; }
  .sp-cursor {
    display: inline-block; width: 8px; height: 13px; background: #25e5e5;
    margin-left: 5px; vertical-align: -2px;
    animation: pers-blink 1s step-end infinite;
  }
  .sp-track {
    position: relative; height: 8px; border-radius: 2px;
    border: 1px solid rgba(37, 229, 229, 0.3);
  }
  .sp-track-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 4%;
    background: linear-gradient(90deg, rgba(37, 229, 229, 0.25), #25e5e5);
    box-shadow: 0 0 10px rgba(37, 229, 229, 0.6);
    animation: pers-track 2s cubic-bezier(.25, .7, .35, 1) 0.5s both;
  }
}

@keyframes pers-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pers-track { from { width: 4%; } to { width: 100%; } }
@keyframes sp-panel-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sp-cursor, .sp-track-fill, .splash-panel { animation: none; }
  .sp-track-fill { width: 100%; }
}

@keyframes pers-crton {
  0%   { opacity: 0; transform: scaleY(0.004); filter: brightness(4) saturate(1.4); }
  16%  { opacity: 1; transform: scaleY(0.03);  filter: brightness(3) saturate(1.3); }
  34%  { opacity: 1; transform: scaleY(1.04);  filter: brightness(1.9); }
  52%  { transform: scaleY(0.99); filter: brightness(0.7); }
  62%  { filter: brightness(1.5); }
  72%  { filter: brightness(0.92); }
  100% { opacity: 1; transform: scaleY(1); filter: brightness(1); }
}
@keyframes pers-orbpulse {
  0%, 100% { opacity: 0.28; transform: translate(-50%,-50%) scale(0.9); }
  50%      { opacity: 0.8;  transform: translate(-50%,-50%) scale(1.15); }
}
@keyframes pers-fill { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes pers-fillhead { 0% { left: 19.3%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 76.0%; opacity: 0; } }
@keyframes pers-pct { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pers-flicker {
  0%, 100% { opacity: 0; } 48% { opacity: 0; } 50% { opacity: 0.05; }
  52% { opacity: 0; } 86% { opacity: 0; } 88% { opacity: 0.07; } 90% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .splash-art { animation: none; }
  .splash-orb, .splash-bar-fill, .splash-bar-head, .splash-pct-mask, .splash-flicker { animation: none; }
  .splash-bar-fill, .splash-pct-mask { display: none; }   /* show the baked bar/% statically */
}

/* ============================================================
   DASHBOARD  ·  recreated from Welcome Screen A.dc.html
   Left greeting + ACTIVE pill, My Submissions accent card,
   roster sections, and a floating Home/Forms/Status/Me nav
   (tab views + auto-hide on scroll).
   ============================================================ */
.shell--app.has-fnav { padding-bottom: 120px; }

.dash-greet {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 22px;
}
.dash-kicker { font-size: 9px; letter-spacing: 0.2em; color: var(--cyan-dim); text-transform: uppercase; }
.dash-name {
  margin-top: 5px; font-size: 17px; font-weight: 800; letter-spacing: 0.03em;
  line-height: 1.15; color: var(--white); text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 0 14px rgba(37, 229, 229, 0.35);
}
.dash-loc { margin-top: 6px; font-size: 10px; letter-spacing: 0.02em; color: var(--text-muted); text-transform: uppercase; }
.dash-active {
  flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--st-submitted); border: 1px solid var(--st-submitted);
  border-radius: 999px; padding: 5px 10px; white-space: nowrap; text-transform: uppercase;
}

/* My Submissions — accented svc-card with an amber count badge */
.svc-card { min-height: 64px; }
.svc-card--accent { border-color: rgba(37, 229, 229, 0.4); box-shadow: 0 0 14px rgba(37, 229, 229, 0.10); }
.subs-count {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--st-review); color: #1a1400; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* Status tab — compact submissions list */
.mini-list { display: flex; flex-direction: column; gap: 10px; }
.mini-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px;
  padding: 13px 15px; text-decoration: none; color: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mini-row:hover { border-color: var(--cyan); box-shadow: 0 0 14px rgba(37,229,229,0.16); }
.mini-main { min-width: 0; }
.mini-title { font-size: 13.5px; font-weight: 600; color: var(--white); }
.mini-meta { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.mini-empty { color: var(--text-muted); padding: 18px 0; text-align: center; }
.open-sc {
  display: block; text-align: center; text-decoration: none; margin-top: 16px;
  border: 2px solid var(--cyan-dim); border-radius: 13px; color: var(--cyan);
  padding: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.open-sc:hover { border-color: var(--cyan); background: rgba(37, 229, 229, 0.06); }

/* outlined status pill with leading dot, colored by status */
.dot-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid currentColor; border-radius: 999px; padding: 3px 9px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
}
.dot-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dot-pill.new                  { color: var(--st-submitted); }
.dot-pill.in_review            { color: var(--st-review); }
.dot-pill.approved,
.dot-pill.completed            { color: var(--st-approved); }
.dot-pill.denied,
.dot-pill.cancelled            { color: var(--st-denied); }

/* floating bottom nav — glass pill, tab views, auto-hides on scroll */
.fnav {
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 60;
  display: flex; justify-content: center; pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.fnav.is-hidden { opacity: 0; transform: translateY(26px); }
.fnav-inner {
  display: flex; gap: 3px; pointer-events: auto;
  background: rgba(10, 12, 13, 0.92); border: 1px solid var(--panel-edge);
  border-radius: 18px; padding: 7px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 0 18px rgba(37,229,229,0.10);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fnav-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 60px; padding: 7px 15px; border-radius: 12px;
  background: none; border: none; cursor: pointer; color: #5f6b6d;
  font-family: inherit; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.fnav-item svg { width: 20px; height: 20px; }
.fnav-item.active { color: var(--cyan); background: rgba(37, 229, 229, 0.12); }
.fnav-item:hover { color: var(--cyan); }

/* Me-tab record values use the prototype's text color (#e8f0f2), not green */
#tab-me .record .v { color: #e8f0f2; }

/* ---- Me-tab NOTIFICATIONS (recreated from Welcome Screen A v3 / Notifications A)
   Visuals + states only this phase: the toggle mirrors Notification.permission
   (off/on/blocked) and is otherwise inert until the separate push runbook. ---- */
.notif-card { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 16px; overflow: hidden; }
.notif-row { display: flex; align-items: center; gap: 12px; padding: 16px; }
.notif-main { flex: 1; }
.notif-title { font-size: 14px; font-weight: 700; color: var(--white); }
.notif-sub { font-size: 10.5px; margin-top: 4px; letter-spacing: 0.04em; color: var(--text-muted); }
.notif-sub.asking  { color: #FFFF00; }
.notif-sub.on      { color: var(--st-approved); }
.notif-sub.blocked { color: var(--st-denied); }
.notif-note { font-size: 10.5px; color: var(--text-faint); line-height: 1.5; margin: 11px 2px 0; }
.notif-hint { font-size: 10.5px; color: var(--text-faint); line-height: 1.5; margin: 10px 2px 0; }
.notif-blocked { border-top: 1px solid var(--panel-edge); padding: 13px 16px; background: rgba(255, 93, 93, 0.04); }
.notif-blocked-main { font-size: 11.5px; color: #ff8a8a; line-height: 1.55; }
.notif-blocked-main b { color: var(--white); font-weight: 700; }
.notif-blocked-sub { font-size: 10.5px; color: var(--text-muted); line-height: 1.55; margin-top: 8px; }

/* iOS-style switch (inert this phase) */
.switch {
  flex: 0 0 auto; position: relative; width: 46px; height: 26px; border-radius: 999px;
  background: var(--panel-edge); border: none; padding: 0; cursor: pointer;
  transition: background 0.2s ease;
}
.switch-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-muted); transition: transform 0.2s ease, background 0.2s ease;
}
.switch.on { background: var(--st-approved); }
.switch.on .switch-knob { transform: translateX(20px); background: #000; }
.switch.asking { background: rgba(255, 255, 0, 0.22); }
.switch.asking .switch-knob { transform: translateX(10px); background: #FFFF00; }
.switch.blocked .switch-knob { background: var(--st-denied); }
.switch.admin.on { background: var(--cyan); }
.switch.admin.on .switch-knob { transform: translateX(20px); background: #000; }
.switch:focus-visible { box-shadow: 0 0 0 2px rgba(37, 229, 229, 0.35); }

/* lower-emphasis sub-section label (e.g. ADMINISTRATOR) — cyan-dim with rule */
.subsection-label {
  display: flex; align-items: center; gap: 12px; margin: 24px 2px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan-dim);
}
.subsection-label::after { content: ""; flex: 1; height: 1px; background: var(--panel-edge); }

/* ============================================================
   STATUS CENTER  ·  recreated from Status Center A.dc.html
   List -> detail. Centered header, panel cards with outlined
   status pills + phase + VIEW TIMELINE; tap opens a vertical
   Submitted -> Reviewer -> Principal timeline + result banner
   + VIEW FM-5949 (PDF). Empty state. (No request-detail field
   list — the prototype intentionally omits it.)
   ============================================================ */
.sc-head { text-align: center; }
.sc-title {
  font-size: 21px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); text-shadow: 0 0 18px rgba(37, 229, 229, 0.45); line-height: 1.15;
}
.sc-sub { margin-top: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; color: var(--cyan); text-transform: uppercase; }
.sc-links { display: flex; gap: 18px; justify-content: center; margin-top: 12px; }
.sc-links a { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--cyan-dim); text-decoration: none; text-transform: uppercase; }
.sc-links a:hover { color: var(--cyan); }
.sc-count { margin-top: 14px; font-size: 10px; letter-spacing: 0.18em; color: #5f6b6d; text-transform: uppercase; }

/* list cards */
.sc-cards { display: flex; flex-direction: column; gap: 13px; margin-top: 24px; }
.sc-item {
  display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px; padding: 15px 16px;
  color: var(--white); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sc-item:hover, .sc-item:focus-visible { border-color: var(--cyan); box-shadow: 0 0 16px rgba(37,229,229,0.18); outline: none; }
.sc-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sc-item-title { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--white); }
.sc-item-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; letter-spacing: 0.04em; }
.sc-item-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.05);
}
.sc-phase { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--cyan-dim); text-transform: uppercase; }
.sc-view { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--cyan); text-transform: uppercase; }

/* detail view */
.sc-back {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: none; border: none; padding: 0; font-family: inherit;
  color: var(--cyan-dim); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.sc-back:hover { color: var(--cyan); }
.sc-dtitle { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; color: var(--white); margin-top: 16px; }
.sc-dmeta { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.sc-dmeta-text { font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.04em; }
.sc-formcode { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--cyan-dim); border: 1px solid var(--panel-edge); border-radius: 4px; padding: 2px 7px; text-transform: uppercase; }
.sc-tl-head { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--cyan); margin: 24px 0 16px; padding-bottom: 9px; border-bottom: 1px solid var(--panel-edge); text-transform: uppercase; }

/* vertical timeline */
.tl-step { display: flex; gap: 14px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; width: 14px; color: #8a9698; }
.tl-dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; }
.tl-dot.filled::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tl-line { width: 1.5px; flex: 1; min-height: 26px; background: var(--panel-edge); margin: 2px 0; }
.tl-body { flex: 1; padding-bottom: 22px; }
.tl-top { display: flex; align-items: center; justify-content: space-between; }
.tl-role { font-size: 9.5px; letter-spacing: 0.12em; color: var(--text-muted); text-transform: uppercase; }
.tl-time { font-size: 9.5px; color: #5f6b6d; }
.tl-mid { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.tl-actor { font-size: 13px; color: var(--white); }
.tl-dec { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; }
.tl-comment { margin-top: 9px; border-left: 2px solid currentColor; padding: 8px 11px; background: rgba(255,255,255,0.03); font-size: 11.5px; font-style: italic; color: #c7d0d1; line-height: 1.5; }
.dec-FILED                    { color: var(--st-submitted); }
.dec-APPROVED, .dec-COMPLETED { color: var(--st-approved); }
.dec-DENIED, .dec-CANCELLED   { color: var(--st-denied); }
.dec-PENDING                  { color: var(--st-review); }

/* result banner */
.sc-result { margin-top: 6px; }
.sc-result.approved, .sc-result.completed { color: var(--st-approved); }
.sc-result.denied, .sc-result.cancelled   { color: var(--st-denied); }
.sc-result-box { border: 1px solid currentColor; border-radius: 12px; padding: 15px 16px; background: rgba(255,255,255,0.03); }
.sc-result-row { display: flex; align-items: center; gap: 10px; }
.sc-result-glyph { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.sc-result-label { font-size: 14px; font-weight: 800; letter-spacing: 0.1em; }
.sc-result-note { font-size: 11.5px; color: #c7d0d1; margin-top: 10px; line-height: 1.55; }

/* FM-5949 PDF button */
.btn--pdf {
  display: block; text-align: center; text-decoration: none; margin-top: 16px;
  border: 2px solid var(--cyan-dim); border-radius: 13px; color: var(--cyan);
  padding: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.btn--pdf:hover { border-color: var(--cyan); background: rgba(37, 229, 229, 0.06); }

/* empty state */
.sc-empty { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 40px; }
.sc-empty-icon { width: 56px; height: 56px; border: 1.5px solid rgba(37,229,229,0.5); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--cyan); font-size: 26px; }
.sc-empty-title { font-size: 14px; font-weight: 800; letter-spacing: 0.14em; margin-top: 22px; color: var(--white); text-shadow: 0 0 14px rgba(37,229,229,0.35); }
.sc-empty-msg { font-size: 12px; color: var(--text-muted); margin-top: 11px; line-height: 1.6; }
.sc-empty-back {
  display: inline-block; margin-top: 24px; text-decoration: none;
  border: 2px solid var(--cyan); border-radius: 13px; color: var(--cyan);
  padding: 13px 22px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 0 16px rgba(37,229,229,0.22);
}
.sc-empty-back:hover { background: rgba(37, 229, 229, 0.08); }

/* ============================================================
   LEAVE CARD (ABSREQ)  ·  recreated from Leave Card Form A.dc.html
   Multi-day absence entry (date rows + shared FULL/AM/PM + live
   total) and the tap-row leave-type list. Maps to the existing
   dateOf*/fullDay/halfDay/typeA22 DB fields — no new fields.
   ============================================================ */
input[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(60%) saturate(2000%) hue-rotate(130deg); cursor: pointer;
}

/* multi-day absence rows */
.day-rows { display: flex; flex-direction: column; gap: 10px; }
.day-row { background: var(--black); border: 1px solid var(--panel-edge); border-radius: 13px; padding: 12px; }
.day-row-top { display: flex; align-items: center; gap: 10px; }
.day-num { flex: 0 0 auto; width: 20px; font-size: 10px; font-weight: 700; color: var(--cyan-dim); }
.day-date {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--green); font-family: inherit; font-size: 15px; padding: 4px 0;
}
.day-remove { flex: 0 0 auto; cursor: pointer; color: var(--text-faint); font-size: 20px; line-height: 1; padding: 0 4px; background: none; border: none; }
.day-remove:hover { color: #ff8a8a; }

.add-day {
  width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; background: none; border: 1px dashed var(--cyan-dim); border-radius: 12px;
  color: var(--cyan); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; padding: 13px; text-transform: uppercase;
}
.add-day:hover { border-color: var(--cyan); background: rgba(37, 229, 229, 0.05); }
.lc-maxed { margin-top: 10px; text-align: center; font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.04em; }

.total-chip { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--panel-edge); border-radius: 999px; padding: 6px 13px; }
.total-chip .tk { font-size: 9px; letter-spacing: 0.15em; color: var(--text-muted); }
.total-chip .tv { font-size: 13px; font-weight: 700; color: var(--cyan); }

/* shared half-day segmented control */
.halfday-seg { display: flex; gap: 5px; margin-top: 14px; }
.seg {
  flex: 1; text-align: center; cursor: pointer; padding: 12px 4px; border-radius: 10px;
  font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  border: 1px solid var(--panel-edge); color: var(--text-muted); background: none;
}
.seg.active { border-color: var(--cyan); color: var(--cyan); background: rgba(37, 229, 229, 0.10); }

/* type-of-leave tap rows */
.leave-row {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 11px;
  background: var(--black); border: 1px solid var(--panel-edge); cursor: pointer; margin-bottom: 8px;
}
.leave-row:has(.leave-radio:checked) { background: rgba(37, 229, 229, 0.06); border-color: var(--cyan); }
.leave-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.leave-dot {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; border: 2px solid #3a4244;
  display: flex; align-items: center; justify-content: center;
}
.leave-radio:checked ~ .leave-dot { border-color: var(--cyan); }
.leave-radio:checked ~ .leave-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.leave-label { font-size: 13px; color: var(--white); }
.leave-other { font-size: 9px; font-weight: 700; letter-spacing: 0.15em; color: var(--text-muted); margin: 10px 2px 9px; padding-top: 9px; border-top: 1px solid var(--panel-edge); text-transform: uppercase; }
.leave-radio:focus-visible ~ .leave-dot { box-shadow: 0 0 0 2px rgba(37, 229, 229, 0.35); }

/* ============================================================
   WELCOME GREETING  ·  once-per-session interstitial after sign-in
   (recreated from Welcome Greeting.dc.html). Full-screen overlay
   ABOVE .shell; emblem with two pulsing rings, time-of-day greeting,
   first name, sweep underline, live date + ticking clock; holds
   ~3.4s then fades/scales out to reveal Home. Tap anywhere to skip.
   ============================================================ */
.greet-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background-color: var(--black);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: 1; transform: scale(1);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.greet-overlay.is-fading { opacity: 0; transform: scale(1.04); }
.greet-overlay.is-gone   { display: none; }
.greet-inner {
  height: 100%; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 34px; text-align: center;
}
.greet-emblem {
  position: relative; width: 128px; height: 128px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 34px;
}
.greet-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(37, 229, 229, 0.6);
  animation: pers-ring 2.4s ease-out infinite;
}
.greet-ring.greet-ring--2 { border-color: rgba(37, 229, 229, 0.45); animation-delay: 1.2s; }
.greet-icon { position: relative; width: 118px; height: auto; filter: drop-shadow(0 0 14px rgba(37, 229, 229, 0.5)); }
.greet-hello { font-size: 12px; font-weight: 700; letter-spacing: 3px; color: var(--cyan); white-space: nowrap; }
.greet-name {
  font-size: 44px; font-weight: 800; letter-spacing: 6px; color: var(--white);
  margin-top: 14px; text-shadow: 0 0 24px rgba(37, 229, 229, 0.55);
}
.greet-rule {
  position: relative; width: 180px; height: 1px; margin-top: 22px;
  background: rgba(37, 229, 229, 0.18); overflow: hidden;
}
.greet-rule-sweep {
  position: absolute; inset: 0; width: 60%;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: pers-sweepline 1.8s ease-in-out 0.7s infinite;
}
.greet-date { font-size: 13px; letter-spacing: 2px; color: #c7d0d1; margin-top: 24px; }
.greet-time { font-size: 30px; font-weight: 700; letter-spacing: 3px; color: var(--cyan); margin-top: 8px; white-space: nowrap; }
.greet-cursor {
  display: inline-block; width: 11px; height: 24px; background: var(--cyan);
  margin-left: 6px; vertical-align: -3px; animation: pers-blink 1s step-end infinite;
}
.greet-enter { display: flex; align-items: center; gap: 8px; margin-top: 48px; }
.greet-enter-label { font-size: 10px; letter-spacing: 2px; color: var(--cyan-dim); }
.greet-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: pers-dot 1.2s ease-in-out infinite; }
.greet-dot.greet-dot--2 { animation-delay: 0.2s; }
.greet-dot.greet-dot--3 { animation-delay: 0.4s; }

@keyframes pers-ring { 0% { transform: scale(0.6); opacity: 0; } 60% { opacity: 0.5; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes pers-sweepline { 0% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
@keyframes pers-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes pers-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ============================================================
   FIRST-LOGIN GATE  ·  recreated from First Login.dc.html
   3 steps (non-disclosure -> change password -> done) with a
   live requirements checklist. Server re-validates every rule.
   ============================================================ */
.fl-head { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 1px; color: var(--cyan-dim); }
.fl-org { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--cyan); text-align: center; margin-top: 16px; text-transform: uppercase; }
.fl-card { border: 1px solid var(--panel-edge); border-radius: 14px; background: var(--panel); margin-top: 16px; overflow: hidden; }
.fl-card-band { text-align: center; padding: 12px; border-bottom: 1px solid var(--panel-edge); background: rgba(37, 229, 229, 0.04); }
.fl-stars { font-size: 8px; letter-spacing: 3px; color: var(--cyan-dim); }
.fl-band-title { font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px; color: var(--cyan); margin: 7px 0; text-transform: uppercase; }
.fl-card-body { padding: 16px; }
.fl-intro { font-size: 12px; color: #c7d0d1; line-height: 1.6; }
.fl-terms { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.fl-term { display: flex; gap: 11px; }
.fl-term-n { flex: 0 0 auto; color: var(--cyan); font-weight: 700; font-size: 12px; }
.fl-term-t { font-size: 12px; color: #e8f0f2; line-height: 1.55; }
.fl-agree-line { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--white); margin: 20px 2px 14px; text-align: center; }

/* step 2 banner (centered card) */
.fl-banner { border: 1px solid var(--panel-edge); border-radius: 14px; background: var(--panel); margin-top: 16px; text-align: center; padding: 13px; }
.fl-banner .fl-band-title { margin: 7px 0 4px; }
.fl-band-warn { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: #FFFF00; }

/* inputs / labels */
.fl-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cyan); margin: 0 2px 8px; }
.fl-input {
  width: 100%; background: var(--black); border: 1px solid var(--panel-edge); border-radius: 12px;
  color: var(--green); font-family: inherit; font-size: 18px; letter-spacing: 2px; padding: 14px; outline: none;
}
.fl-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(37, 229, 229, 0.25); }

/* requirements checklist */
.fl-reqs { margin-top: 18px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 12px; padding: 14px 16px; }
.fl-reqs-title { font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 11px; }
.fl-rules { display: flex; flex-direction: column; gap: 9px; }
.fl-rule { display: flex; align-items: flex-start; gap: 9px; color: #5f6b6d; }
.fl-rule.ok { color: var(--st-approved); }
.fl-rule.fail { color: var(--st-denied); }
.fl-rule-g { flex: 0 0 auto; font-size: 12px; font-weight: 700; width: 14px; }
.fl-rule-t { font-size: 11.5px; line-height: 1.4; }

/* buttons / links */
.fl-btn {
  display: block; width: 100%; text-align: center; cursor: pointer; background: var(--black);
  border: 2px solid var(--cyan); border-radius: 13px; color: var(--cyan); font-family: inherit;
  font-size: 16px; font-weight: 700; letter-spacing: 2px; padding: 15px; text-transform: uppercase;
  box-shadow: 0 0 16px rgba(37, 229, 229, 0.22);
}
.fl-btn:hover { background: rgba(37, 229, 229, 0.08); }
.fl-btn.is-disabled, .fl-btn:disabled {
  border-color: var(--panel-edge); color: #3a4244; box-shadow: none; cursor: not-allowed; background: var(--black);
}
.fl-link {
  display: block; width: 100%; text-align: center; cursor: pointer; margin-top: 12px;
  background: none; border: none; font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--cyan-dim); padding: 8px; text-transform: uppercase;
}
.fl-link:hover { color: var(--cyan); }
.fl-err { text-align: center; font-size: 11px; color: #ff8a8a; margin-top: 8px; }
.fl-errors {
  border: 1px solid #ff5252; border-radius: 11px; color: #ff8a8a; font-size: 12px;
  padding: 11px 13px; line-height: 1.5; margin-top: 16px;
}

/* step 3 done */
.fl-done { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 36px; }
.fl-done-check {
  width: 78px; height: 78px; border-radius: 50%; border: 2px solid var(--st-approved); color: var(--st-approved);
  font-size: 38px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 28px rgba(0, 255, 156, 0.35);
}
.fl-done-title { font-size: 18px; font-weight: 800; letter-spacing: 2px; color: var(--white); margin-top: 22px; text-shadow: 0 0 16px rgba(37, 229, 229, 0.4); }
.fl-done-msg { font-size: 12.5px; color: #c7d0d1; line-height: 1.6; margin-top: 14px; max-width: 280px; }
.fl-done-btn {
  display: inline-block; text-decoration: none; margin-top: 28px; border: 2px solid var(--cyan); border-radius: 13px;
  color: var(--cyan); font-size: 13px; font-weight: 700; letter-spacing: 2px; padding: 14px 30px; text-transform: uppercase;
  box-shadow: 0 0 16px rgba(37, 229, 229, 0.22);
}
.fl-done-btn:hover { background: rgba(37, 229, 229, 0.08); }

/* ============================================================
   DESKTOP LAYOUT (>=1024px)  ·  recreated from PERS Desktop.dc.html
   Below 1024px the mobile layout is untouched. The desktop chrome
   (sidebar / topbar / right rail / master-detail) is additive and
   hidden on mobile; reflow is CSS-driven. Same tokens, no new colors.
   ============================================================ */
.dsk-side, .dsk-top, .dsk-rail, .dsk-ph, .dsk-greet-sub { display: none; }   /* mobile: hidden */
.dsk-main-col { display: contents; }                          /* mobile: transparent wrapper */
.sc-detail-panel { display: contents; }                       /* mobile: transparent wrapper */

@media (min-width: 1024px) {
  /* the mobile floating nav is replaced by the sidebar */
  .fnav { display: none !important; }

  /* ---- sidebar (fixed left, 256px) ---- */
  .dsk-side {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; bottom: 0; width: 256px; z-index: 40;
    border-right: 1px solid var(--panel-edge); background: rgba(0,0,0,0.4); padding: 24px 0;
  }
  .dsk-brand { padding: 0 22px; }
  .dsk-brand-row { display: flex; align-items: center; gap: 10px; }
  .dsk-brand-dot { width: 18px; height: 18px; background: var(--cyan); box-shadow: 0 0 12px rgba(37,229,229,0.8); }
  .dsk-brand-name { font-size: 18px; font-weight: 800; letter-spacing: 3px; color: var(--white); }
  .dsk-brand-sub { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: var(--cyan-dim); margin-top: 6px; padding-left: 28px; }
  .dsk-empcard { margin: 22px 18px 0; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 12px; padding: 13px 14px; }
  .dsk-empcard-name { font-size: 13px; font-weight: 700; color: var(--white); }
  .dsk-empcard-meta { font-size: 10px; color: var(--text-muted); margin-top: 5px; line-height: 1.5; }
  .dsk-nav { margin-top: 22px; display: flex; flex-direction: column; }
  .dsk-nav-item {
    display: flex; align-items: center; gap: 13px; padding: 12px 22px 12px 19px; cursor: pointer;
    border-left: 3px solid transparent; color: var(--text-muted); background: none; border-top: none; border-right: none; border-bottom: none;
    font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; text-align: left;
  }
  .dsk-nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .dsk-nav-item:hover { color: var(--cyan); }
  .dsk-nav-item.active { border-left-color: var(--cyan); color: var(--cyan); background: rgba(37,229,229,0.08); }
  .dsk-nav-count { margin-left: auto; font-size: 10px; font-weight: 800; color: #0a0e14; background: var(--st-review); border-radius: 999px; padding: 1px 7px; }
  .dsk-signout { margin: auto 22px 0; padding-top: 16px; border-top: 1px solid var(--panel-edge); color: var(--cyan-dim); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; }
  .dsk-signout:hover { color: var(--cyan); }

  /* ---- main column: the shell shifts right of the sidebar, becomes scroll region.
     Only pages that HAVE the sidebar carry .dsk-page (portal + status). ---- */
  .dsk-page { max-width: none; width: auto; margin: 0 0 0 256px; padding: 0; }
  .dsk-page > .tabview,
  .dsk-page > .dash-greet,
  .dsk-page > .status-grid,
  .dsk-page > .sc-empty { padding: 0 30px 30px; }

  /* topbar (sticky, 68px) */
  .dsk-top {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 20; height: 68px; padding: 0 30px;
    border-bottom: 1px solid var(--panel-edge);
    background: rgba(0,0,0,0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .dsk-top-title { font-size: 18px; font-weight: 800; letter-spacing: 0.08em; color: var(--white); text-transform: uppercase; text-shadow: 0 0 14px rgba(37,229,229,0.35); }
  .dsk-top-right { display: flex; align-items: center; gap: 16px; }
  .dsk-chip { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--panel-edge); background: var(--panel); color: var(--cyan); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }

  /* the mobile greeting header -> dashboard in-content greeting; only on Dashboard */
  .dash-greet { display: block; margin-top: 26px; margin-bottom: 8px; }
  .dash-greet .dash-kicker, .dash-greet .dash-loc, .dash-greet .dash-active { display: none; }
  .dash-greet .dash-name { font-size: 22px; white-space: normal; }
  .dsk-greet-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
  .dsk-page[data-dview="forms"] .dash-greet,
  .dsk-page[data-dview="settings"] .dash-greet { display: none; }

  /* ---- DASHBOARD: catalog (2-col) + right rail ---- */
  #tab-home { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 26px; align-items: start; }
  #tab-home .svc-card--accent { display: none; }            /* My Submissions card -> sidebar/rail */
  #tab-home .signout { display: none; }                     /* sign-out lives in the sidebar */
  .dsk-main-col { display: block; min-width: 0; }
  #tab-home .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  #tab-home .svc-card { margin-bottom: 0; }
  .dsk-rail { display: block; }
  .dsk-rail .record { margin-top: 0; }
  .dsk-rail .mini-list { margin-top: 0; }

  /* FORMS view: 3-col catalog, no rail */
  .dsk-page[data-dview="forms"] #tab-home { grid-template-columns: 1fr; }
  .dsk-page[data-dview="forms"] .dsk-rail { display: none; }
  .dsk-page[data-dview="forms"] #tab-home .svc-grid { grid-template-columns: 1fr 1fr 1fr; }

  /* SETTINGS (#tab-me): a comfortable max width */
  #tab-me { max-width: 640px; }

  /* ===== STATUS (My Submissions) master-detail ===== */
  .dsk-page .sc-head { text-align: left; }
  .status-grid { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 24px; align-items: start; }
  .sc-detail-panel {
    display: block; position: sticky; top: 30px;
    background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 16px; padding: 22px; min-height: 420px;
  }
  /* keep the list visible on desktop even when the mobile JS hides it */
  #sc-list[hidden] { display: block !important; }
  /* detail rows: remove the mobile back link + card chrome inside the panel */
  .sc-detail-panel .sc-back { display: none; }
  .sc-detail-view { background: none; border: none; padding: 0; }
  .dsk-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 380px; text-align: center; color: #5f6b6d; }
  .dsk-ph-mark { font-size: 30px; color: var(--panel-edge); }
  .dsk-ph-text { font-size: 12px; letter-spacing: 0.06em; margin-top: 14px; }
  /* when a detail is open, hide the placeholder */
  .sc-detail-panel.has-open .dsk-ph { display: none; }
}

/* ============================================================================
   PERS 4.0 MASTER HANDOFF — shared utility classes (§2.5 / §2.6)
   Additive: these were absent from this stylesheet; ported verbatim from the
   handoff source-of-truth theme.css so recreated screens share one vocabulary.
   Existing component classes are intentionally NOT overridden here.
   ============================================================================ */
.page-title   { font-size: 30px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--white); text-shadow: var(--title-glow); }
.field-label  { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); display:block; margin:0 2px 8px; }
.caption      { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.help         { font-size: 10.5px; line-height: 1.5; color: var(--faint); }

/* section label with a trailing hairline rule */
.section-head { display:flex; align-items:center; gap:12px; margin: var(--s-4) 2px var(--s-2); }
.section-head .rule { flex:1; height:1px; background: var(--panel-edge); }

/* card size/emphasis modifiers (base .card already defined above) */
.card--lg { border-radius: var(--r-lg); }
.card--hl { border-color: rgba(37,229,229,.4); box-shadow: 0 0 14px rgba(37,229,229,.10); }

@keyframes pers-fadeup { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* ===== PREMIUM FORMS LAYER — crafted fields + confident submit, matching the
   in-app leave forms. Additive; covers every theme.css consumer (login,
   first_login, greeting, submitted). Recessed "carved-well" inputs with an
   animated glowing cyan focus ring; the primary button reads as the action. ===== */
.field:not(.field--locked) {
  background: linear-gradient(180deg, #070a0b, #000);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.55);
}
.field:focus {
  border-color: var(--cyan);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 3px rgba(37,229,229,.16), 0 0 24px -6px rgba(37,229,229,.45);
  background: linear-gradient(180deg, #081113, #01080a);
}
.btn:not(.btn--ghost) {
  background: linear-gradient(180deg, rgba(37,229,229,.07), rgba(0,0,0,.35));
  box-shadow: 0 0 22px -4px rgba(37,229,229,.35), inset 0 1px 0 rgba(37,229,229,.16);
}
.btn:not(.btn--ghost):hover, .btn:not(.btn--ghost):active {
  background: linear-gradient(180deg, rgba(37,229,229,.13), rgba(0,0,0,.3));
  box-shadow: 0 0 32px -4px rgba(37,229,229,.55), inset 0 1px 0 rgba(37,229,229,.2);
}

/* no-double-tap-zoom: kill accidental double-tap-to-zoom, keep pinch-zoom */
html, body { touch-action: manipulation; }