/* ==========================================================================
   PERIMETRR — APPLE DESIGN SYSTEM & UNIVERSAL UI SPECIFICATION
   Governed by .agents/skills/apple-design/SKILL.md
   Enforces deterministic rules for typography, line spacing, line height,
   letter spacing, unified 44px input height, button sizes, links, materials,
   instant pointer-down feedback, and accessibility across every route.
   ========================================================================== */

/* ─── 1. DESIGN SYSTEM TOKENS ─── */
:root {
  /* Typography Sizes (Optical Hierarchy) */
  --ui-fs-display: clamp(2.125rem, 4.5vw, 3.5rem); /* 34px–56px: Hero display */
  --ui-fs-title:   clamp(1.5rem, 2.5vw, 2rem);     /* 24px–32px: Page h1 */
  --ui-fs-h2:      clamp(1.2rem, 1.8vw, 1.4375rem);/* 19.2px–23px: Section h2 */
  --ui-fs-h3:      1.0625rem;                      /* 17px: Card & group h3 */
  --ui-fs-body:    0.9375rem;                      /* 15px: Dense UI body copy */
  --ui-fs-prose:   1rem;                           /* 16px: Prose & form inputs */
  --ui-fs-button:  0.9375rem;                      /* 15px: Standard buttons */
  --ui-fs-caption: 0.8125rem;                      /* 13px: Helper text, captions, feedback */
  --ui-fs-micro:   0.75rem;                        /* 12px: Eyebrows, badges, table headers */

  /* Line Heights / Leading (Inverse to Font Size — Apple Design §15) */
  --ui-lh-display:       1.1;
  --ui-lh-title:         1.18;
  --ui-lh-h2:            1.28;
  --ui-lh-h3:            1.35;
  --ui-reading-leading:  1.6;
  --ui-lh-caption:       1.5;
  --ui-lh-micro:         1.35;
  --ui-control-leading:  1.25;

  /* Letter Spacing / Tracking (Size-Specific — Apple Design §15) */
  --ui-track-display: -0.032em;
  --ui-track-title:   -0.025em;
  --ui-track-h2:      -0.018em;
  --ui-track-h3:      -0.012em;
  --ui-track-body:    -0.005em;
  --ui-track-button:  -0.005em;
  --ui-track-caption:  0.008em;
  --ui-track-micro:    0.065em;

  /* Line Spacing & Vertical Rhythm */
  --ui-paragraph-gap: 0.75em;
  --ui-field-gap:     0.875rem;
  --ui-section-gap:   clamp(1.25rem, 3vw, 2rem);

  /* Unified Control & Button Heights */
  --ui-control-height:           2.75rem;  /* 44px: Universal input, select, & primary button height */
  --ui-control-compact-height:   2.25rem;  /* 36px: Compact secondary & inline action buttons */
  --ui-control-adornment-height: 2rem;     /* 32px: Inner input buttons (e.g. Show/Hide password) */
  --ui-icon-btn-size:            2.5rem;   /* 40px desktop / 44px mobile icon-only buttons */

  /* Radii & Material Specular Highlights */
  --ui-control-radius: 0.625rem; /* 10px */
  --ui-card-radius:    1rem;     /* 16px */
  --ui-material-edge:  inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --ui-card-elevation: 0 12px 32px -8px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --ui-focus-halo:     0 0 0 3px rgba(15, 27, 45, 0.12);

  /* Layered Primary Button Lighting Tokens (Apple Design Study - Light) */
  --ui-button-lighting:           inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(15, 23, 42, 0.16), 0 4px 12px var(--ui-btn-primary-glow);
  --ui-btn-primary-fg:            #ffffff;
  --ui-btn-primary-glow:          rgba(29, 78, 216, 0.20);
  --ui-btn-primary-bg:            linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(0, 0, 0, 0.06) 100%), var(--primary, #1d4ed8);
  --ui-btn-primary-bg-active:     linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%), var(--primary, #1d4ed8);
  --ui-btn-primary-shadow:        var(--ui-button-lighting);
  --ui-btn-primary-hover-shadow:  inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 2px 4px rgba(15, 23, 42, 0.18), 0 6px 16px var(--ui-btn-primary-glow);
  --ui-btn-primary-active-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(15, 23, 42, 0.12);

  /* Hybrid & Matrix Status Tokens */
  --office-bg:     #dcfce7;
  --office-text:   #166534;
  --office-border: #bbf7d0;
  --home-bg:       #f1f5f9;
  --home-text:     #475569;
  --home-border:   #cbd5e1;
  --leave-bg:      #f3e8ff;
  --leave-text:    #6b21a8;
  --leave-border:  #e9d5ff;
}

:root[data-theme="dark"],.homepage-wrapper {
  --text-muted: #b0bfd0;
}

:root[data-theme="dark"],
[data-theme="dark"],
:root:not([data-theme="light"]):has(body > .workspace),
.homepage-wrapper {
  --ui-material-edge:  inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ui-card-elevation: 0 16px 40px -10px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
  --ui-focus-halo:     0 0 0 3px rgba(57, 255, 136, 0.16);

  /* Layered Primary Button Lighting Tokens (Apple Design Study - Dark) */
  --ui-button-lighting:           inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.50), 0 4px 14px var(--ui-btn-primary-glow, rgba(39, 251, 138, 0.25));
  --ui-btn-primary-fg:            #071b12;
  --ui-btn-primary-glow:          rgba(39, 251, 138, 0.28);
  --ui-btn-primary-bg:            linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(0, 0, 0, 0.10) 100%), var(--primary, #27fb8a);
  --ui-btn-primary-bg-active:     linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%), var(--primary, #27fb8a);
  --ui-btn-primary-shadow:        var(--ui-button-lighting);
  --ui-btn-primary-hover-shadow:  inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.60), 0 6px 18px var(--ui-btn-primary-glow, rgba(39, 251, 138, 0.35));
  --ui-btn-primary-active-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.35);

  --office-bg:     rgba(22, 163, 74, 0.2);
  --office-text:   #4ade80;
  --office-border: rgba(22, 163, 74, 0.4);
  --home-bg:       rgba(71, 85, 105, 0.3);
  --home-text:     #cbd5e1;
  --home-border:   #475569;
  --leave-bg:      rgba(168, 85, 247, 0.2);
  --leave-text:    #c084fc;
  --leave-border:  rgba(168, 85, 247, 0.4);
}

/* ─── 2. TYPOGRAPHY: OPTICAL SIZING, LEADING, TRACKING & LINE SPACING ─── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--ui-track-body);
}

:where(h1,h2,h3) {
  text-wrap: balance;
  font-optical-sizing: auto;
}

:where(h1,h2) {
  letter-spacing: var(--ui-track-title);
}

.hp-hero-title,
.pricing-intro h1 {
  line-height: var(--ui-lh-display);
  letter-spacing: var(--ui-track-display);
}

.workspace h1,
.onboard-header h1,
.admin-card h1,
.hybrid-gate-card h1,
.page h1 {
  line-height: var(--ui-lh-title);
  letter-spacing: var(--ui-track-title);
}

:where(h2),
.hp-section-header h2,
.product-journey h2,
.workspace h2,
.onboard-wrapper h2,
.signal-game h2 {
  line-height: var(--ui-lh-h2);
  letter-spacing: var(--ui-track-h2);
}

:where(h3),
.hp-card h3,
.workspace h3,
.section-header h3,
.dialog-box h3 {
  line-height: var(--ui-lh-h3);
  letter-spacing: var(--ui-track-h3);
}

:where(p,li,label,small) {
  overflow-wrap: break-word;
}

:where(p,li) {
  text-wrap: pretty;
}

/* Paragraph line spacing & readable body leading (60ch–75ch measure) */
:where(p + p) {
  margin-top: var(--ui-paragraph-gap);
}

.workspace > :is(p,.page-heading),.auth-card p,.branch p,
.onboard-header .subtitle,.step-description,.description,
.hp-hero-sub,.hp-card p,.hp-section-header p,.preview-note {
  line-height: var(--ui-reading-leading);
}

.workspace > p { max-width: 75ch; }

/* Captions, helper text & inline feedback (13px, +0.008em tracking, 1.5 leading) */
:where(small,.helper-text,.password-feedback,.email-status,.gps-status-msg) {
  font-size: var(--ui-fs-caption);
  line-height: var(--ui-lh-caption);
  letter-spacing: var(--ui-track-caption);
}

.auth-card :is(label,input,button) { line-height: 1.4; }
.auth-card .password-feedback { font-size: .8125rem; line-height: 1.55; }

/* Micro labels, eyebrows & table headers (12px, +0.065em tracking, 1.35 leading) */
:where(.eyebrow,.brand-pill,.link-tag,.counter-label,.dept-label,th) {
  line-height: var(--ui-lh-micro);
  letter-spacing: var(--ui-track-micro);
}

/* Tabular numerals across all live numbers, metrics, timers, tables, and codes */
th,
td,
.counter-cell,
.counter-header,
.stat-number,
.stat-period,
.stat-label,
.matrix-date,
.display-date-range,
.time-display,
.clock,
.timer,
:where(.metric strong,.live-clock,.code,#share-modal-code,#display-workspace-code,.plan-price,.counter-val,table,time) {
  font-variant-numeric: tabular-nums;
}

/* Attendance terminal: company identity leads; the clock is a quiet single line. */
#main-content .tenant-info-wrap {
  flex: 0 1 auto;
  width: max-content;
  min-width: 0;
}
#main-content .tenant-name-row {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: .5rem;
}
#main-content #tenant-brand-name {
  text-transform: uppercase;
  font-size: 1rem;
  max-width: none;
}
#main-content .switch-badge-btn {
  margin-inline-start: auto;
  min-height: 2.25rem;
  padding: .375rem .625rem;
  font-size: .8125rem;
  line-height: 1.25;
}
#main-content .live-clock {
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  white-space: nowrap;
  overflow-wrap: normal;
}
@media (max-width: 600px) {
  #main-content .topbar { align-items: center; }
  #main-content .tenant-logo-img { width: 24px; height: 24px; }
  #main-content .live-clock { font-size: .75rem; }
}

/* ─── 3. UNIFIED INPUT & SELECT FIELD HEIGHT (2.75rem / 44px EVERYWHERE) ─── */
:where(input,select,textarea) {
  max-width: 100%;
}

::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Every single-line input and select across the entire project has an identical
   44px (2.75rem) height so text, email, password, number, search, and select
   controls are 100% uniform in every form and viewport. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
select,
.staff-search-input,
.faq-search-input,
.hybrid-code-input {
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-inline: 0.875rem;
  font-size: var(--ui-fs-prose) !important;
  line-height: var(--ui-control-leading) !important;
  border-radius: var(--ui-control-radius);
  box-sizing: border-box;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):focus,
select:focus {
  box-shadow: var(--ui-focus-halo);
}

/* Preserve icon clearance inside search inputs */
.staff-search-input {
  padding-left: 2.625rem !important;
  padding-right: 2.75rem !important;
}

.faq-search-input {
  padding-left: 2.375rem !important;
  padding-right: 0.875rem !important;
}

/* Password fields & inline Show/Hide toggle button:
   The password input stays at 2.75rem (44px) — identical to email/text inputs —
   while the toggle button is 2rem (32px) tall and vertically centered inside. */
.password-field,
.password-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-card .password-field {
  margin-bottom: .75rem;
}

.password-field input,
.password-field-wrap input,
.auth-card .password-field input,
#admin-pass {
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height);
  padding-right: 4.5rem !important;
  margin: 0 !important;
}

.password-field .password-toggle,
.password-field-wrap .password-toggle,
.auth-card .password-toggle,
#toggle-pass-btn {
  position: absolute !important;
  top: 50% !important;
  right: 0.375rem !important;
  transform: translateY(-50%) !important;
  height: var(--ui-control-adornment-height) !important;
  min-height: var(--ui-control-adornment-height) !important;
  max-height: var(--ui-control-adornment-height) !important;
  width: auto !important;
  padding: 0 0.625rem !important;
  margin: 0 !important;
  font-size: var(--ui-fs-caption) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 0.4375rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

.password-field .password-toggle:active:not(:disabled),
.password-field-wrap .password-toggle:active:not(:disabled),
.auth-card .password-toggle:active:not(:disabled),
#toggle-pass-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.96) !important;
}

/* Onboard URL slug prefix + input group alignment */
.input-with-prefix {
  display: flex;
  align-items: stretch;
  min-height: var(--ui-control-height);
  border-radius: var(--ui-control-radius);
  overflow: hidden;
}

.input-with-prefix .prefix {
  display: inline-flex;
  align-items: center;
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  padding: 0 0.75rem;
  font-size: var(--ui-fs-caption);
  line-height: 1;
}

.input-with-prefix input {
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ─── 4. BUTTON SIZES & INSTANT POINTER-DOWN FEEDBACK (Apple Design §1) ─── */
:where(button,a.button,.admin-btn,.btn-primary,.btn-secondary,.page-cta,.btn-hp-primary,.btn-hp-secondary,.btn-gps,.btn-primary-gate) {
  touch-action: manipulation;
  font-size: var(--ui-fs-button);
  letter-spacing: var(--ui-track-button);
  line-height: var(--ui-control-leading);
  border-radius: var(--ui-control-radius);
  box-shadow: var(--ui-material-edge);
  transition: transform 100ms ease-out, filter 100ms ease-out, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

/* No fixed-height controls: labels remain single-line at normal text size, while
   user text enlargement can grow the target instead of clipping its contents. */
:is(.actions,.admin-actions,.dialog-actions,.step-actions,.closing-actions) > :is(button,a),
.auth-card > form > button,.plan .button,.hp-hero-ctas > :is(a,button),
.btn-primary,.btn-secondary,.btn-in,.btn-out,.btn-gps,.btn-primary-gate,
.admin-btn:not(.small),.page-cta {
  height: auto;
  min-height: 2.75rem;
  padding: 0.625rem 1.125rem;
  line-height: var(--ui-control-leading);
}

/* Compact / secondary inline utility buttons (36px / 2.25rem) */
.admin-btn.small,
.btn-copy,
.btn-open,
.header-right button:not(.icon-btn) {
  min-height: var(--ui-control-compact-height);
  padding: 0.375rem 0.75rem;
  font-size: var(--ui-fs-caption);
  line-height: var(--ui-control-leading);
}

/* Icon-only buttons (40px desktop, 44px mobile) */
.topbar-icon-btn,
.theme-toggle,
.icon-btn {
  width: var(--ui-icon-btn-size);
  height: var(--ui-icon-btn-size);
  min-width: var(--ui-icon-btn-size);
  min-height: var(--ui-icon-btn-size);
}

/* Instant physical response on pointer-down (Apple Design §1: scale 0.97, 100ms ease-out) */
:where(button,.button,.admin-btn,.page-cta,.btn-primary,.btn-secondary,.btn-hp-primary,.btn-hp-secondary,.btn-gps,.btn-primary-gate):active:not(:disabled) {
  transform: scale(0.97);
  filter: brightness(.94);
  transition: transform 100ms ease-out, filter 100ms ease-out;
}

/* Restrained Primary Button Layered Lighting Treatment (§1 Apple Design) */
:is(
  .btn-primary-lighting,
  .admin-btn.primary,
  .btn-primary,
  .btn-hp-primary,
  .hp-btn-primary,
  .hp-hero-cta,
  .hero-cta-btn,
  .page-cta,
  .demo-action-btn,
  #admin-login-btn,
  .btn-in,
  #in-btn,
  .btn-in-hero,
  .btn-gps,
  #shift-save-btn,
  #office-save-btn,
  #hybrid-save-week,
  .onboard-btn-primary,
  .onboard-submit-btn,
  #submit-onboard-btn,
  #create-workspace-btn,
  #detect-gps-btn,
  #btn-primary-launch-admin,
  #btn-confirm-otp,
  .btn-primary-gate,
  .roster-btn-primary,
  .enterprise-btn-primary,
  #enterprise-signin,
  #enterprise-verify-form button[type="submit"]:not(.secondary),
  #enterprise-recovery-form button[type="submit"]:not(.secondary),
  #enterprise-setup-form button[type="submit"]:not(.secondary),
  #wt-login-form button[type="submit"]:not(.secondary),
  #wt-add-branch,
  #wt-create-modal button[type="submit"]:not(.secondary),
  #wt-attach-modal button[type="submit"]:not(.secondary),
  #wt-branch-form button[type="submit"]:not(.secondary),
  #wt-attach-form button[type="submit"]:not(.secondary),
  #wt-member-form button[type="submit"]:not(.secondary),
  .citadel-btn-primary,
  #host-login button[type="submit"]:not(.secondary),
  #host-mfa button[type="submit"]:not(.secondary),
  #citadel-action-form button[type="submit"].primary,
  #create-coupon.primary,
  button.primary
):not(.secondary):not(.danger) {
  background: var(--ui-btn-primary-bg) !important;
  color: var(--ui-btn-primary-fg, #ffffff) !important;
  box-shadow: var(--ui-button-lighting, var(--ui-btn-primary-shadow)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  touch-action: manipulation;
  transition: transform 100ms ease-out, filter 100ms ease-out, box-shadow 160ms ease, background 160ms ease;
}

:is(
  .btn-primary-lighting,
  .admin-btn.primary,
  .btn-primary,
  .btn-hp-primary,
  .hp-btn-primary,
  .hp-hero-cta,
  .hero-cta-btn,
  .page-cta,
  .demo-action-btn,
  #admin-login-btn,
  .btn-in,
  #in-btn,
  .btn-in-hero,
  .btn-gps,
  #shift-save-btn,
  #office-save-btn,
  #hybrid-save-week,
  .onboard-btn-primary,
  .onboard-submit-btn,
  #submit-onboard-btn,
  #create-workspace-btn,
  #detect-gps-btn,
  #btn-primary-launch-admin,
  #btn-confirm-otp,
  .btn-primary-gate,
  .roster-btn-primary,
  .enterprise-btn-primary,
  #enterprise-signin,
  #enterprise-verify-form button[type="submit"]:not(.secondary),
  #enterprise-recovery-form button[type="submit"]:not(.secondary),
  #enterprise-setup-form button[type="submit"]:not(.secondary),
  #wt-login-form button[type="submit"]:not(.secondary),
  #wt-add-branch,
  #wt-create-modal button[type="submit"]:not(.secondary),
  #wt-attach-modal button[type="submit"]:not(.secondary),
  #wt-branch-form button[type="submit"]:not(.secondary),
  #wt-attach-form button[type="submit"]:not(.secondary),
  #wt-member-form button[type="submit"]:not(.secondary),
  .citadel-btn-primary,
  #host-login button[type="submit"]:not(.secondary),
  #host-mfa button[type="submit"]:not(.secondary),
  #citadel-action-form button[type="submit"].primary,
  #create-coupon.primary,
  button.primary
):not(.secondary):not(.danger):hover:not(:disabled) {
  box-shadow: var(--ui-btn-primary-hover-shadow) !important;
}

:is(
  .btn-primary-lighting,
  .admin-btn.primary,
  .btn-primary,
  .btn-hp-primary,
  .hp-btn-primary,
  .hp-hero-cta,
  .hero-cta-btn,
  .page-cta,
  .demo-action-btn,
  #admin-login-btn,
  .btn-in,
  #in-btn,
  .btn-in-hero,
  .btn-gps,
  #shift-save-btn,
  #office-save-btn,
  #hybrid-save-week,
  .onboard-btn-primary,
  .onboard-submit-btn,
  #submit-onboard-btn,
  #create-workspace-btn,
  #detect-gps-btn,
  #btn-primary-launch-admin,
  #btn-confirm-otp,
  .btn-primary-gate,
  .roster-btn-primary,
  .enterprise-btn-primary,
  #enterprise-signin,
  #enterprise-verify-form button[type="submit"]:not(.secondary),
  #enterprise-recovery-form button[type="submit"]:not(.secondary),
  #enterprise-setup-form button[type="submit"]:not(.secondary),
  #wt-login-form button[type="submit"]:not(.secondary),
  #wt-add-branch,
  #wt-create-modal button[type="submit"]:not(.secondary),
  #wt-attach-modal button[type="submit"]:not(.secondary),
  #wt-branch-form button[type="submit"]:not(.secondary),
  #wt-attach-form button[type="submit"]:not(.secondary),
  #wt-member-form button[type="submit"]:not(.secondary),
  .citadel-btn-primary,
  #host-login button[type="submit"]:not(.secondary),
  #host-mfa button[type="submit"]:not(.secondary),
  #citadel-action-form button[type="submit"].primary,
  #create-coupon.primary,
  button.primary
):not(.secondary):not(.danger):active:not(:disabled) {
  transform: scale(0.97);
  background: var(--ui-btn-primary-bg-active) !important;
  box-shadow: var(--ui-btn-primary-active-shadow) !important;
  filter: brightness(0.96) !important;
}

:is(
  .btn-primary-lighting,
  .admin-btn.primary,
  .btn-primary,
  .btn-hp-primary,
  .hp-btn-primary,
  .hp-hero-cta,
  .hero-cta-btn,
  .page-cta,
  .demo-action-btn,
  #admin-login-btn,
  .btn-in,
  #in-btn,
  .btn-in-hero,
  .btn-gps,
  #shift-save-btn,
  #office-save-btn,
  #hybrid-save-week,
  .onboard-btn-primary,
  .onboard-submit-btn,
  #submit-onboard-btn,
  #create-workspace-btn,
  #detect-gps-btn,
  #btn-primary-launch-admin,
  #btn-confirm-otp,
  .btn-primary-gate,
  .roster-btn-primary,
  .enterprise-btn-primary,
  #enterprise-signin,
  #enterprise-verify-form button[type="submit"]:not(.secondary),
  #enterprise-recovery-form button[type="submit"]:not(.secondary),
  #enterprise-setup-form button[type="submit"]:not(.secondary),
  #wt-login-form button[type="submit"]:not(.secondary),
  #wt-add-branch,
  #wt-create-modal button[type="submit"]:not(.secondary),
  #wt-attach-modal button[type="submit"]:not(.secondary),
  #wt-branch-form button[type="submit"]:not(.secondary),
  #wt-attach-form button[type="submit"]:not(.secondary),
  #wt-member-form button[type="submit"]:not(.secondary),
  .citadel-btn-primary,
  #host-login button[type="submit"]:not(.secondary),
  #host-mfa button[type="submit"]:not(.secondary),
  #citadel-action-form button[type="submit"].primary,
  #create-coupon.primary,
  button.primary
):not(.secondary):not(.danger):disabled {
  opacity: 0.38 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  cursor: not-allowed !important;
}

/* Micro-Interaction Badge Pop & Tactile Feedback (Apple Design §1) */
@keyframes badgePop {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.day-slot,
.badge {
  transition: transform 100ms ease, filter 100ms ease;
}

:where(.day-slot, .badge):active:not(:disabled) {
  transform: scale(0.96);
  filter: brightness(0.94);
}

:is(.day-slot, .badge).pop,
:is(.day-slot, .badge)[data-pop="true"] {
  animation: badgePop 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── 5. LINKS, WAYFINDING & FOCUS RINGS ─── */
:where(a:not(.button):not(.admin-btn):not(.btn-hp-primary):not(.btn-hp-secondary):not(.page-cta):not(.btn-open)) {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 140ms ease, opacity 140ms ease;
}

:where(.topbar nav a,.hp-nav-link,#hybrid-gate-back-link,#hybrid-header-back-link,.onboard-top-nav a) {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--ui-control-height);
}

.forgot-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-control-compact-height);
  font-size: var(--ui-fs-caption);
}

:is(button,a,input,select,textarea,summary):focus-visible {
  outline: 3px solid #b16b00;
  outline-offset: 3px;
}

:root[data-theme="dark"] :focus-visible,
.homepage-wrapper :focus-visible {
  outline-color: #ffcf80;
}

/* ─── 6. MATERIALS, DEPTH & SURFACE REFINEMENTS (Apple Design §12) ─── */
.workspace > .card,
.admin-card,
.onboard-card,
.hybrid-gate-card,
.plan,
.dialog-box,
dialog,
.modal-card,
.modal-content {
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-material-edge), var(--ui-card-elevation);
}

.workspace .branch,
.account-card,
.config-card,
.link-card {
  border-radius: 0.75rem;
  box-shadow: var(--ui-material-edge);
}

body > header.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Navigation must not force the content sideways at narrow laptop/mobile sizes. */
.hp-navbar { column-gap: 1rem; row-gap: .75rem; }
.hp-nav-actions { min-width: 0; flex-wrap: wrap; }
.hp-nav-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
.hp-hero-sub { max-width: 62ch; margin-inline: auto; }
.hp-section-header h2,.product-journey h2 { letter-spacing: -.025em; }
.hp-card h3 { line-height: 1.3; letter-spacing: -.015em; }
.hp-footer-links { row-gap: .25rem; }

/* Command Center: matching configuration/account structure and safe reflow. */
.admin-card > .topbar .topbar-brand { gap: .75rem; }
.admin-card > .topbar .topbar-brand > :first-child { min-width: 0; }
#topbar-tenant-display { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#admin-workspace-title { flex: 0 0 auto; }
#admin-switch-workspace { min-height: 2.75rem; padding: .375rem .25rem; background: transparent; border: 0; color: var(--text-muted,var(--muted)); font-size: .8125rem; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 600px) {
  .admin-card > .topbar { display: grid; grid-template-columns: minmax(0,1fr); gap: .375rem; }
  .admin-card > .topbar .topbar-brand { width: 100%; max-width: none; justify-content: space-between; overflow: visible; }
  .admin-card > .topbar .topbar-brand > :first-child { flex: 1 1 auto; }
  .admin-card > .topbar .topbar-actions { justify-content: flex-end; width: 100%; }
}
.admin-card:has(> #admin-panel-host:empty) {
  width: min(100%, 36rem);
}
.config-cards { grid-template-columns: repeat(auto-fit,minmax(min(100%,17.5rem),1fr)); }
.config-info,.account-card > div { min-width: 0; }
.config-info strong { font-size: .875rem; line-height: 1.45; }
.config-value { display: inline-block; margin-top: .25rem; line-height: 1.45; overflow-wrap: anywhere; }
.config-section-group h4 { line-height: 1.45; }
.account-card { padding: 1rem; gap: .875rem; align-items: flex-start; }
.account-icon,.config-icon { flex: 0 0 auto; }
.account-card :is(strong,p,small) { line-height: 1.5; }
.account-card p { margin-block: .35rem 0; }
.account-card > .admin-btn { margin-inline-start: auto; }
.admin-intro { max-width: 70ch; line-height: 1.55; }
/* Pair the primary task with recovery; keep navigation outside the task row. */
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .625rem .875rem;
  margin-top: .875rem;
}
.auth-actions > :is(button,a) {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  margin: 0;
}
.auth-actions .forgot-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: 0;
  padding-inline: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-muted, var(--muted));
  font-weight: 500;
  text-align: left;
}
.auth-actions .forgot-link:hover { color: var(--primary); }
#enterprise-auth-form .auth-actions:has(> #enterprise-signin[hidden]) { display: none; }
.auth-alternatives { margin-top: .75rem; }
.back-link,
.back-link:visited,
#admin-back-to-attendance,
#admin-back-to-attendance:visited {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-bottom: .75rem;
  color: var(--text-muted, var(--muted));
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: .2em;
}
.back-link:hover,
#admin-back-to-attendance:hover {
  color: var(--primary);
  text-decoration: underline;
}
.account-section-group { margin-bottom: var(--ui-section-gap); }
.account-section-group .account-actions { grid-template-columns: minmax(0,1fr); }
.account-section-group .account-card { height: 100%; box-sizing: border-box; flex-wrap: wrap; }
.account-section-group .account-card > div { flex: 1 1 12rem; }
#admin-user-management-section.account-card > div { flex: 0 1 auto; }
.account-section-group .account-card > .admin-btn { align-self: center; }
/* Compact, explicit groups: security controls share a row; rich tasks retain room. */
@media (min-width: 700px) {
  .account-security-group .account-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-security-group .account-card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .account-fleet-group .account-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1100px) {
  .account-security-group .account-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .account-security-group .account-card:last-child { grid-column: auto; }
  .account-security-group .account-card {
    display: grid;
    grid-template-columns: 1.125rem minmax(0,1fr);
    grid-template-rows: 1fr auto;
    gap: .625rem .75rem;
  }
  .account-security-group .account-card > .admin-btn {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
  }
}

.account-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-top: .75rem; }
.account-pairing-details { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .875rem; }
.account-pairing-details dl { flex: 1 1 14rem; margin: 0; min-width: 0; }
.account-pairing-details dt { margin-top: .5rem; font-size: .8125rem; color: var(--text-muted,var(--muted)); }
.account-pairing-details dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
.account-pairing-details img { width: 7rem; height: 7rem; border-radius: .5rem; background: white; padding: .375rem; }
.matrix-missed-out { display: inline; margin-inline-start: .25rem; font-size: .75rem; line-height: 1; white-space: nowrap; color: var(--warning,#b16b00); }
.logs-filters > .logs-filter-select { flex: 1 1 10rem; min-width: min(100%,10rem); max-width: 100%; }
#logs-filter-status-select { width: auto; }
.admin-message:empty { display: none; }
.admin-tabs { scroll-padding-inline: .5rem; }
.admin-tabs .tab-btn { min-height: 2.75rem; }
.tab-label { font-size: .875rem; }
.dialog-box,.modal,.modal-content { overscroll-behavior: contain; }
.dialog-box :is(p,label),.modal :is(p,label) { line-height: 1.5; }
.dialog-actions,.step-actions { row-gap: .75rem; }

/* Onboarding labels and hybrid quota captions are content, not decoration. */
.onboard-wrapper .section-title p,.helper-text { font-size: .875rem; line-height: 1.55; }
.onboard-wrapper .form-group > label { font-size: .875rem; line-height: 1.45; }
.onboard-wrapper .step-text { line-height: 1.35; }
.onboard-wrapper .link-card { flex-wrap: wrap; }
.onboard-wrapper .link-info { flex-basis: 12rem; }
.onboard-wrapper .link-buttons { flex-wrap: wrap; gap: .5rem; }
.container .dept-filter-select { min-height: 2.75rem; }
.container .icon-btn { min-width: 2.75rem; min-height: 2.75rem; }
.container .counter-label { font-size: .75rem; line-height: 1.4; }
.container .dept-label { font-size: .75rem; line-height: 1.4; }
.container .history-info { line-height: 1.5; }
.container .table-container { overscroll-behavior-inline: contain; }

/* Watch Tower / Enterprise / demo: calm headings, consistent data density. */
.workspace .page-heading { margin-bottom: var(--ui-section-gap); }
.workspace .card { margin-bottom: var(--ui-section-gap); }
.workspace .metric strong { font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.workspace .branch-stats { line-height: 1.5; }
.workspace .notice { line-height: 1.6; }
.workspace .toolbar { gap: .75rem 1rem; }
.demo-table-wrap { overscroll-behavior-inline: contain; }

/* Pricing: preserve side-by-side comparison while fitting the intro closely. */
.pricing-intro > p { max-width: 65ch; margin-inline: auto; }
.pricing-intro h1 { letter-spacing: -.035em; }
.plan-label,.plan-unit,.plan-equivalent,.plan-savings,.plan small {
  font-size: .8125rem;
  line-height: 1.55;
}
.plan-label { letter-spacing: .01em; }
.plan .button { max-width: 100%; }
.pricing-faq summary { line-height: 1.5; padding-block: .5rem; }
.pricing-faq details p { max-width: 70ch; }

/* Prose and standalone outcomes: generous reading measure, restrained spacing. */
body:has(> main.about-story) main,
body:has(> main#main) > main:not(.workspace) {
  scroll-margin-top: 1rem;
}
body:has(> main.about-story) main p { max-width: 70ch; }
body:has(> main.about-story) h2 { margin-top: 2rem; }
.page { width: 100%; }
.page h1 { line-height: 1.2; letter-spacing: -.025em; }
.page p { line-height: 1.65; }
.subscription-actions { gap: .75rem; }
.signal-game h2 { line-height: 1.3; }
.signal-game p { max-width: 65ch; }
.signal-game .game-controls button { height: auto; min-height: 2.75rem; }

/* ─── UNIFIED APPLE TOAST NOTIFICATIONS (Apple Design §§1, 12) ─── */
:is(.toast, #app-toast, .onboard-toast) {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface-2, rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  color: var(--text);
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: var(--ui-reading-leading);
  letter-spacing: var(--ui-track-body);
  opacity: 0;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10000;
  max-width: min(92vw, 440px);
  width: max-content;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  white-space: normal;
  word-break: break-word;
}

:is(.toast, #app-toast, .onboard-toast).visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

:root[data-theme="dark"] :is(.toast, #app-toast, .onboard-toast),
.homepage-wrapper :is(.toast, #app-toast, .onboard-toast) {
  background: color-mix(in srgb, var(--surface-2, #16243b) 85%, transparent);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25);
}

:is(.toast, #app-toast, .onboard-toast) .toast-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 4px;
  border-radius: 50%;
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:is(.toast, #app-toast, .onboard-toast).toast-success,
:is(.toast, #app-toast, .onboard-toast).success {
  border-color: rgba(16, 185, 129, 0.35);
}
:is(.toast, #app-toast, .onboard-toast).toast-success .toast-icon,
:is(.toast, #app-toast, .onboard-toast).success .toast-icon {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

:is(.toast, #app-toast, .onboard-toast).toast-error,
:is(.toast, #app-toast, .onboard-toast).error {
  border-color: rgba(239, 68, 68, 0.35);
}
:is(.toast, #app-toast, .onboard-toast).toast-error .toast-icon,
:is(.toast, #app-toast, .onboard-toast).error .toast-icon {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

:is(.toast, #app-toast, .onboard-toast).toast-info,
:is(.toast, #app-toast, .onboard-toast).info {
  border-color: rgba(59, 130, 246, 0.35);
}
:is(.toast, #app-toast, .onboard-toast).toast-info .toast-icon,
:is(.toast, #app-toast, .onboard-toast).info .toast-icon {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

/* ─── 7. RESPONSIVE & ACCESSIBILITY MEDIA QUERIES (Apple Design §14) ─── */
/* Mobile Sheet Action Drawers (≤ 768px) */
@keyframes sheetSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.sheet-grabber {
  display: none;
}

@media(max-width: 768px) {
  .hybrid-gate-overlay,
  .dialog-overlay,
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .hybrid-gate-overlay > .hybrid-gate-card,
  .dialog-overlay > .dialog-box,
  .modal-overlay > :is(.modal-card, .modal-content, .modal, .card),
  .sheet-card {
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
    animation: sheetSlideUp 340ms cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 0;
  }

  .sheet-grabber {
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: var(--border, rgba(120, 120, 128, 0.3));
    margin: 0 auto 16px auto;
    display: block;
  }
}

@media(max-width: 600px) {
  .hp-navbar { flex-wrap: wrap; padding: .75rem 1rem; }
  .hp-nav-actions { gap: .5rem; }
  .hp-nav-actions > :is(a,button) { min-height: 2.75rem; }
  .hp-hero { padding-inline: 1rem; }
  .hp-hero-sub { font-size: 1rem; }
  .topbar-icon-btn, .theme-toggle, .icon-btn {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  .account-card { display: grid; grid-template-columns: 1.5rem minmax(0,1fr); }
  .account-card > .admin-btn { grid-column: 2; justify-self: start; margin-left: 0; }
  .config-card { flex-wrap: wrap; }
  .config-info { flex: 1 1 10rem; }
  .config-tools { gap: .75rem; }
  .config-tools > .admin-btn { max-width: 100%; white-space: normal; height: auto; }
  .account-card .admin-btn { height: auto; min-height: 2.75rem; }
  .workspace .toolbar > button { margin-left: 0; }
  .workspace .toolbar > select { min-width: min(100%,10rem); }
  .workspace .topbar nav,.topbar nav { row-gap: .5rem; }
  .journey-scene { padding: 1.25rem; }
  #manager-preview.journey-manager { padding: 1.25rem; }
  .signal-game { width: calc(100% - 2rem); }
}

@media(max-width: 380px) {
  .hp-nav-actions { width: 100%; justify-content: flex-start; }
  .page { margin-block: 1rem; padding: 1.25rem; }
  body:has(> .page) { padding-inline: 1rem; }
  .game-controls { gap: .5rem; }
}

@media(prefers-reduced-transparency: reduce) {
  .hp-navbar,
  body > header.topbar { background: var(--surface-2, #0f1b2d); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .modal-overlay { backdrop-filter: none; }
  :is(.toast, #app-toast, .onboard-toast) {
    background: var(--surface-2, #0f1b2d);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media(prefers-contrast: more) {
  .hp-nav-link,.hp-hero-sub,.hp-section-header p,.preview-note,
  .demo-note,.phone-last { color: #edf3f9; }
  .hp-card,.demo-ledger-card,.demo-phone-frame { border-color: #a8b5c5; }
  :where(input,select,textarea,.admin-btn.secondary,.account-card,.config-card) { border-width: 2px; }
  :is(.toast, #app-toast, .onboard-toast) { border-width: 2px; }
  .sheet-grabber { background: currentColor; }
}

@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  :where(button,.button,.admin-btn,.page-cta,.btn-primary,.btn-secondary,.btn-hp-primary,.btn-hp-secondary,.btn-gps,.btn-primary-gate,.day-slot,.badge):active { transform: none !important; }
  .btn-primary-lighting:active,
  .admin-btn.primary.with-lighting:active,
  .btn-primary.with-lighting:active { transform: none !important; }
  .password-field .password-toggle:active:not(:disabled),
  .password-field-wrap .password-toggle:active:not(:disabled),
  .auth-card .password-toggle:active:not(:disabled),
  #toggle-pass-btn:active:not(:disabled) {
    transform: translateY(-50%) !important;
  }
  .billing-plan-choice:active,
  .billing-interval-pill:active {
    transform: none !important;
  }
  .billing-plan-choice,
  .billing-interval-pill {
    transition: none !important;
  }
  :is(.toast, #app-toast, .onboard-toast) {
    transition: opacity 150ms ease !important;
    transform: translateX(-50%) translateY(0) !important;
  }
  :is(.toast, #app-toast, .onboard-toast):not(.visible) {
    transform: translateX(-50%) translateY(0) !important;
  }
  :is(.hybrid-gate-overlay, .dialog-overlay, .modal-overlay) > :is(.hybrid-gate-card, .dialog-box, .modal-card, .modal-content, .modal, .card, .sheet-card),
  .sheet-card {
    animation: none !important;
    transform: none !important;
  }
}
/* Staff selection is a separate compact column; name and actions keep priority. */
#attendance-matrix { min-width: 0; max-width: 100%; }
#attendance-matrix .matrix-wrapper { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
#attendance-matrix .attendance-matrix { width: 100%; }
#attendance-matrix .matrix-cell { overflow-wrap: anywhere; }
.demo-workspace-controls { padding: 1rem; margin-block: 1rem; border: 1px solid var(--border); border-radius: .5rem; }
.demo-workspace-controls p { margin-block: .5rem; }
.demo-workspace-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.demo-workspace-actions button { width: auto; flex: 0 1 auto; }
.staff-roster-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 15rem); gap: .875rem; }
#staff-list .staff-header-row,
#staff-list .staff-row { grid-template-columns: 2.75rem minmax(180px, 1.6fr) minmax(110px, .8fr) minmax(115px, .8fr) 124px; align-items: center; column-gap: .75rem; }
#staff-list .staff-batch-choice { padding: 0; justify-content: center; }
#staff-list .staff-batch-actions { padding: .75rem 1rem; margin: 0; background: var(--surface-2); border-bottom: 1px solid var(--border); }
#staff-list .staff-batch-actions > .staff-batch-choice { justify-content: flex-start; }
#staff-list .staff-batch-actions button { min-height: 2.25rem; padding: .375rem .75rem; font-size: .8125rem; line-height: 1.25; }
#staff-list .staff-batch-count { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .staff-roster-filters { grid-template-columns: 1fr; }
    #staff-list .staff-row { grid-template-columns: 2.75rem minmax(0, 1fr) auto; grid-template-areas: "selection name actions" "selection policy device"; column-gap: .5rem; }
    #staff-list .staff-row > .staff-select-cell { grid-area: selection; align-self: stretch; }
}

/* Staff controls share compact hit areas and keep row selection independent of content. */
.staff-department-field { min-width: 0; }
.staff-department-field > input { width: 100%; }
.staff-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .625rem; padding: .875rem 1rem; font-size: .8125rem; }
.staff-pagination select { width: auto; min-width: 4.5rem; }
#staff-page-status { font-variant-numeric: tabular-nums; margin-inline-end: auto; }
.config-shift-settings-card { grid-column: 1 / -1; }
.config-shift-settings-card .config-info > span { font-size: .875rem; line-height: 1.5; }
.account-billing-group .account-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem; }
.account-billing-group .account-card { display:block;min-width:0; }
.account-billing-group .admin-btn { display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;max-width:100%;height:auto;box-sizing:border-box; }
.account-billing-group .account-card > div { width:100%;min-width:0; }
.account-plan-badges { display:flex;flex-wrap:wrap;gap:.5rem;margin-block:.75rem; }
.account-plan-badge,.account-plan-status { display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:.25rem .625rem;font-size:.8125rem;font-weight:600; }
.account-plan-badge { background:#1d4ed8;color:#fff;border-color:#1d4ed8; }
#account-staff-seats,#account-branch-seats { font-variant-numeric:tabular-nums; }
#account-seat-meter { display:block;width:100%;height:.75rem;margin-block:.5rem;accent-color:var(--primary); }
.account-coupon-form { display:flex;flex-wrap:wrap;gap:.5rem;margin-block:.875rem; }
#account-coupon-input { flex:1 1 14rem;min-width:0;width:100%;text-transform:uppercase; }
.account-coupon-form button { flex:0 0 auto; }
.account-redemptions { padding-inline-start:1.25rem;font-size:.8125rem;line-height:1.5;overflow-wrap:anywhere; }
#account-billing-message,#account-coupon-message { font-size:.8125rem;line-height:1.5;overflow-wrap:anywhere; }
.account-billing-group [role="alert"] { color:var(--error,#b91c1c); }
@media(max-width:760px) { .account-billing-group .account-actions { grid-template-columns:minmax(0,1fr); } }
@media (max-width: 640px) {
    .staff-pagination { justify-content: flex-start; }
    #staff-page-status { flex-basis: 100%; }
}
/* Shared asynchronous workspace regions; navigation remains stable and usable. */
.workspace-loading { position:relative; min-height:19.5rem; }
.workspace-loading > :not(.workspace-skeleton),.workspace-loading > :not(.workspace-skeleton) * { visibility:hidden!important; }
.workspace-skeleton { position:absolute; inset:0; z-index:1; display:grid; align-content:start; gap:.75rem; padding:.75rem; box-sizing:border-box; max-width:100%; overflow:hidden; background:#fff; border-radius:.75rem; }
:root[data-theme="dark"] .workspace-skeleton { background:#0b1528; }
.workspace-skeleton-row { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:.75rem; padding:.625rem; min-height:2.75rem; box-sizing:border-box; border:1px solid var(--border,#dbe2ea); border-radius:.5rem; }
.workspace-skeleton-bar { display:block; align-self:center; height:.875rem; border-radius:.375rem; background:var(--surface-2,#e2e8f0); animation:workspace-skeleton-pulse 1.4s ease-in-out infinite alternate; }
.workspace-skeleton-cards { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); }
.workspace-skeleton-cards .workspace-skeleton-row { grid-template-columns:1fr; min-height:0; }
.workspace-skeleton-row:nth-child(2n) .workspace-skeleton-bar:last-child { width:70%; }
@keyframes workspace-skeleton-pulse { from { opacity:.45; } to { opacity:1; } }
@media(max-width:600px) { .workspace-skeleton-cards { grid-template-columns:1fr; } .workspace-skeleton-cards .workspace-skeleton-row:nth-of-type(n+4) { display:none; } .workspace-skeleton-row { gap:.375rem; padding:.5rem; } }
@media(prefers-reduced-motion:reduce) { .workspace-skeleton-bar { animation:none; opacity:.75; } }
@media(prefers-contrast:more) { .workspace-skeleton-bar { border:1px solid currentColor; } }
/* Hidden header tooltips must not enlarge a narrow terminal's scroll area. */
#main-content .topbar [data-tooltip]::after { display:none; left:auto; right:0; max-width:min(220px,calc(100vw - 2rem)); transform:translateY(4px); }
#main-content .topbar [data-tooltip]:is(:hover,:focus-visible)::after { display:block; transform:translateY(0); }
#main-content #terminal-home-btn::after { left:0; right:auto; }
/* Round 19: compact selection flow, distinct checkbox surfaces. */
#staff-list .staff-batch-actions { width:fit-content; max-width:100%; box-sizing:border-box; padding:.5rem; gap:.5rem; border:1px solid var(--border); border-radius:.5rem; margin-block:.75rem; }
#staff-list .staff-batch-actions button,#staff-list .staff-batch-actions select { min-height:2.75rem; height:2.75rem; width:auto; max-width:100%; font-size:.9375rem; }
#staff-list .staff-batch-actions select { flex:0 1 auto; }
#staff-list .staff-batch-actions [hidden] { display:none!important; }
#tab-staff .staff-batch-count { font-variant-numeric:tabular-nums; }
body:has(#admin-panel-host) input[type="checkbox"],body:has(.shift-scheduler) input[type="checkbox"] { appearance:none; flex-shrink:0; width:1.125rem; height:1.125rem; min-height:1.125rem; border:1.5px solid var(--border-strong,#64748b); border-radius:.3rem; background:var(--surface); cursor:pointer; accent-color:var(--primary); display:inline-grid; place-content:center; padding:0; vertical-align:middle; }
body:has(#admin-panel-host) input[type="checkbox"]:checked,body:has(.shift-scheduler) input[type="checkbox"]:checked { background:var(--primary); border-color:var(--primary); }
body:has(#admin-panel-host) input[type="checkbox"]:checked::after,body:has(.shift-scheduler) input[type="checkbox"]:checked::after { content:""; width:.5rem; height:.25rem; border-left:2px solid white; border-bottom:2px solid white; transform:translateY(-1px) rotate(-45deg); }
body:has(#admin-panel-host) input[type="checkbox"]:indeterminate::after { content:""; width:.5rem; height:2px; background:var(--text); }
body:has(#admin-panel-host) input[type="checkbox"]:disabled,body:has(.shift-scheduler) input[type="checkbox"]:disabled { opacity:.5; cursor:not-allowed; }
@media(forced-colors:active) { body:has(#admin-panel-host) input[type="checkbox"],body:has(.shift-scheduler) input[type="checkbox"] { appearance:auto; } }
@media(prefers-reduced-motion:reduce) { .department-combobox * { transition:none!important; } }
/* Contextual admin notes use their card's available width, not a prose column. */
.admin-card :is(.notice,.admin-intro,.helper-text,.account-policy-summary),.admin-card .config-section-group > p { max-width:none;width:100%;box-sizing:border-box; }

/* Unpaired application entry stays focused on attendance and administrator access. */
.app-entry {
  width: min(100%, 30rem);
  margin: clamp(1.5rem, 6vh, 4rem) auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  text-align: start;
}
.app-entry[hidden] { display: none; }
.app-entry > .brand-pill { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; font-weight: 700; text-decoration: none; }
.app-entry h1 { margin-block: 1rem .75rem; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 700; }
.app-entry > p { margin-bottom: 1.25rem; }
.app-entry > button { width: 100%; }
.app-entry-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem; }
.app-entry-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; }
/* Account billing is one surface, with current access above the purchase flow. */
.account-billing-surface {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
}
.account-billing-group .account-card {
  height: auto !important;
  box-sizing: border-box;
}
.account-billing-surface .account-plan-summary-card {
  display: block;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 0;
  border-radius: 1rem 1rem 0 0;
  background: transparent;
  box-shadow: none;
}
.account-summary-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.account-summary-primary {
  flex: 1 1 20rem;
  min-width: 0;
}
.account-summary-meta {
  flex: 0 1 20rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.account-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.account-summary-header > strong {
  font-size: 1rem;
  color: var(--text);
}
.account-capacity-meter-wrap {
  margin-block: .5rem .75rem;
}
.account-capacity-meter-wrap p {
  margin: 0 0 .25rem 0;
  font-size: .875rem;
}
.billing-compare-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  text-underline-offset: .2em;
}
.billing-compare-link:hover {
  text-decoration: underline;
}
.billing-upgrade-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}
.account-billing-surface :is(.billing-choices-card,.billing-promo-card,.billing-summary-card) {
  display: block;
  min-width: 0;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.account-billing-surface .billing-summary-card {
  border-radius: 0 0 1rem 1rem;
  background: var(--surface-2);
}
.account-billing-surface .account-card > div {
  flex: initial;
}
.billing-choice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.billing-choice-toolbar .billing-card-header {
  margin: 0;
}
.billing-choice-toolbar .billing-interval-selector {
  flex-shrink: 0;
  margin: 0;
}
.billing-summary-card .account-plan-disclosure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem 1.5rem;
}
.billing-checkout-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 1rem;
}
.billing-checkout-footer .billing-consent-label {
  margin: 0;
}
.billing-checkout-footer .account-card-actions {
  margin: 0;
}
.billing-checkout-footer #account-checkout-message {
  grid-column: 1 / -1;
  margin: 0;
}
.account-billing-surface :is(#account-coupon-message,#account-checkout-message,#account-billing-message):empty {
  display: none;
}
.billing-promo-nested .account-redemptions {
  grid-column: 1;
  margin: 0;
}
.billing-promo-nested .account-coupon-form {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
}
.billing-promo-nested #account-coupon-message {
  grid-column: 2;
  margin: 0;
}
.account-billing-surface .account-card:hover {
  transform: none;
  box-shadow: none;
}
.account-billing-surface #account-billing-message:not(:empty) {
  padding: 0 1.5rem 1rem;
}
.billing-card-header,
.billing-summary-header {
  margin-bottom: .75rem;
}
.billing-card-header strong,
.billing-summary-header strong {
  font-size: 1rem;
  color: var(--text);
}
.billing-interval-selector {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9999px;
  margin-block: .5rem 1rem;
  gap: 4px;
  box-sizing: border-box;
}
.billing-interval-pill {
  min-height: 2.75rem;
  height: 2.75rem;
  box-sizing: border-box;
  padding: 0 1rem;
  border: none;
  background: transparent;
  border-radius: 9999px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: background .15s ease, color .15s ease, transform .1s ease;
  touch-action: manipulation;
}
.billing-interval-pill:active:not(:disabled) {
  transform: scale(.97);
}
.billing-interval-pill.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
:root[data-theme="dark"] .billing-interval-pill.active {
  background: var(--surface-3);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.billing-interval-pill:focus-visible,
.billing-interval-pill:has(input:focus-visible),
.billing-plan-choice:focus-visible,
.billing-plan-choice:has(input:focus-visible) {
  outline: 3px solid #b16b00;
  outline-offset: 3px;
}
:root[data-theme="dark"] .billing-interval-pill:focus-visible,
:root[data-theme="dark"] .billing-interval-pill:has(input:focus-visible),
:root[data-theme="dark"] .billing-plan-choice:focus-visible,
:root[data-theme="dark"] .billing-plan-choice:has(input:focus-visible) {
  outline-color: #ffcf80;
}
.billing-interval-pill.disabled,
.billing-interval-pill:has(input:disabled),
.billing-plan-choice.disabled,
.billing-plan-choice:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
.billing-savings-badge {
  background: rgba(39, 251, 138, .15);
  color: var(--primary-dark, #059669);
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
}
:root[data-theme="dark"] .billing-savings-badge {
  color: #27fb8a;
  background: rgba(39, 251, 138, .2);
}
.billing-plan-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.billing-plan-choice {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem;
  border: 1.5px solid var(--border);
  border-radius: .75rem;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
  touch-action: manipulation;
}
.billing-plan-choice:hover {
  border-color: var(--border-strong);
}

.billing-plan-choice:active:not(:disabled) {
  transform: scale(.97);
}
.billing-plan-choice.active {
  border-color: var(--primary);
  background: rgba(39, 251, 138, .04);
}
:root[data-theme="dark"] .billing-plan-choice.active {
  background: rgba(39, 251, 138, .08);
  border-color: var(--primary);
}
.billing-plan-radio-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}
.billing-plan-radio-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.billing-plan-radio-price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .875rem;
  color: var(--text);
}
.billing-plan-radio-desc {
  font-size: .8125rem;
  color: var(--text-muted);
}
.billing-payable-amount {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-bottom: .35rem;
}
.billing-consent-label {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .8125rem;
  line-height: 1.5;
  cursor: pointer;
  margin-block: .875rem;
}
.billing-consent-label input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .15rem;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.billing-summary-card .admin-btn.primary {
  width: 100%;
  min-height: 2.75rem;
  font-size: .9375rem;
  font-weight: 600;
  border-radius: .5rem;
}
.billing-promo-nested {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 1.5rem;
}
.billing-promo-nested .coupon-header {
  grid-column: 1;
}
.billing-promo-nested .coupon-header strong {
  font-size: .9375rem;
  color: var(--text);
}
.billing-summary-selected-plan {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .25rem;
}
.billing-promo-effect {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--primary-dark, #059669);
  background: rgba(39, 251, 138, .1);
  border: 1px solid rgba(39, 251, 138, .25);
  border-radius: .375rem;
  padding: .5rem .75rem;
  margin-block: .5rem;
}
:root[data-theme="dark"] .billing-promo-effect {
  color: #27fb8a;
  background: rgba(39, 251, 138, .15);
  border-color: rgba(39, 251, 138, .3);
}
.billing-auth-disclosure {
  margin-block: .5rem;
}
.billing-auth-disclosure summary {
  cursor: pointer;
  font-size: .8125rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: .2em;
  outline: none;
  touch-action: manipulation;
}
.billing-auth-disclosure summary:focus-visible {
  outline: 3px solid #b16b00;
  outline-offset: 3px;
}
:root[data-theme="dark"] .billing-auth-disclosure summary:focus-visible {
  outline-color: #ffcf80;
}
.billing-auth-disclosure p {
  margin-top: .35rem;
}
.account-lifecycle-group .account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.account-lifecycle-group .account-card {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: .875rem 1rem;
  align-items: start;
  height: auto;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--border);
  border-radius: .875rem;
  background: var(--surface);
  box-shadow: none;
  box-sizing: border-box;
}
.account-lifecycle-group .account-danger-zone {
  height: auto;
  margin: 0;
}
.account-lifecycle-group .account-card .account-card-actions {
  grid-column: 2;
  margin: 0;
}
.account-lifecycle-group .account-card > div {
  flex: initial;
}
.account-lifecycle-group .account-card .admin-btn {
  width: 100%;
  white-space: normal;
  text-align: center;
  min-height: 2.75rem;
}
.account-lifecycle-group .account-data-content {
  min-width: 0;
}
.account-lifecycle-group .account-card h3 {
  margin: 0;
  font-size: 1rem;
}
.account-lifecycle-group #workspace-deletion-message:empty {
  display: none;
}
@media (max-width: 768px) {
  .account-lifecycle-group .account-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-summary-meta {
    flex: 1 1 100%;
  }
}
@media (max-width: 600px) {
  .billing-choice-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .billing-plan-cards,
  .billing-summary-card .account-plan-disclosure,
  .billing-promo-nested,
  .billing-checkout-footer {
    grid-template-columns: minmax(0, 1fr);
  }
  .billing-promo-nested :is(.account-coupon-form,#account-coupon-message) {
    grid-column: 1;
    grid-row: auto;
  }
}