/*
  Hiloh design tokens — Paper and Plum / Night Steward.
  Components use the project's existing aliases, mapped here to the semantic
  brand tokens from branding.md so every surface shares one palette.
*/

/* See fonts/README.md for the source and bundled icon list. */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./fonts/material-symbols-rounded.f8a858633241.woff2") format("woff2");
}

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

  --brand-plum: #231c3e;
  --brand-amber: #ffad35;
  --brand-ember: #e1491a;

  --color-bg-canvas: #f4f3f1;
  --color-bg-surface: #ffffff;
  --color-bg-muted: #efedf1;
  --color-bg-raised: #ffffff;
  --color-bg-hover: #f7f5f9;
  --color-text-primary: #251f2f;
  --color-text-secondary: #3d3745;
  --color-text-muted: #5d5665;
  --color-border-subtle: #d6d2da;
  --color-border-control: #807985;
  --color-link: #5b3c92;
  --color-link-hover: #3e2868;
  --color-link-visited: #744879;
  --color-control-primary: #43305f;
  --color-text-on-primary: #ffffff;
  --color-brand-accent: #c44f2f;
  --color-accent-text: #a53b20;
  --color-focus-outer: #8f321d;
  --color-focus-inner: #ffffff;
  --color-code-bg: #ebe9ed;
  --color-code-text: #3c2d50;
  --color-selection: #f5e7e2;
  --color-nav-current: #ede9f1;
  --color-success-text: #17663a;
  --color-success-bg: #e9f8ee;
  --color-warning-text: #744600;
  --color-warning-bg: #fff4d6;
  --color-danger-text: #9b2930;
  --color-danger-bg: #fdebed;
  --color-info-text: #195b86;
  --color-info-bg: #eaf5fc;

  /* current family — signature amber-to-ember moments */
  --current: var(--color-brand-accent);
  --current-bright: #d98a2b;
  --current-deep: var(--color-accent-text);
  --current-deeper: #7c2918;
  --current-ink: #ffffff;
  --current-wash: var(--color-selection);
  --current-wash-strong: rgba(196, 79, 47, 0.16);
  --current-border: rgba(196, 79, 47, 0.38);

  /* neutrals — paper under plum structure */
  --bg: var(--color-bg-canvas);
  --surface: var(--color-bg-surface);
  --surface-strong: var(--color-bg-raised);
  --surface-soft: var(--color-bg-muted);
  --well: var(--color-code-bg);
  --ink: var(--color-text-primary);
  --ink-secondary: var(--color-text-secondary);
  --muted: var(--color-text-muted);
  --faint: #766f7c;
  --line: var(--color-border-subtle);
  --line-soft: #e7e4e9;
  --line-strong: #aaa4ae;

  /* structural dark fills */
  --chrome: var(--brand-plum);
  --chrome-raised: #30283e;
  --chrome-text: #f7f3fa;
  --chrome-muted: #c8c1d1;
  --chrome-line: rgba(255, 255, 255, 0.14);

  /* actions */
  --primary: var(--color-control-primary);
  --primary-dark: #322246;
  --primary-ink: var(--color-text-on-primary);
  --accent: var(--color-accent-text);
  --calendar-blue: var(--color-link);

  /* semantic */
  --danger: var(--color-danger-text);
  --danger-strong: #852126;
  --danger-soft: var(--color-danger-bg);
  --warning: var(--color-warning-text);
  --warning-strong: #633b00;
  --warning-soft: var(--color-warning-bg);
  --success: var(--color-success-text);
  --success-strong: #0f4f2b;
  --success-soft: var(--color-success-bg);
  --info: var(--color-info-text);
  --info-soft: var(--color-info-bg);

  /* database option tags */
  --database-option-gray-bg: #e7e4e9;
  --database-option-gray-ink: #4f4956;
  --database-option-brown-bg: #f1e8df;
  --database-option-brown-ink: #6b4633;
  --database-option-orange-bg: #fae7da;
  --database-option-orange-ink: #83411e;
  --database-option-yellow-bg: #fff2c9;
  --database-option-yellow-ink: #6b4500;
  --database-option-green-bg: var(--success-soft);
  --database-option-green-ink: var(--success);
  --database-option-blue-bg: var(--info-soft);
  --database-option-blue-ink: var(--info);
  --database-option-purple-bg: #efe9f8;
  --database-option-purple-ink: #5b3c82;
  --database-option-pink-bg: #f8e7ef;
  --database-option-pink-ink: #813653;
  --database-option-red-bg: var(--danger-soft);
  --database-option-red-ink: var(--danger);

  /* controls */
  --control-bg: #faf9fb;
  --control-border: var(--color-border-control);
  --focus-ring: var(--color-focus-outer);
  --focus-ring-inner: var(--color-focus-inner);
  --select-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23716A7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* depth */
  --shadow: none;
  --shadow-raised: 0 12px 32px rgba(37, 31, 47, 0.1);

  /* kanban */
  --kanban-panel: transparent;
  --kanban-column-pending: var(--color-bg-muted);
  --kanban-column-progress: var(--color-bg-muted);
  --kanban-column-completed: var(--color-bg-muted);
  --kanban-card-bg: var(--color-bg-surface);
  --kanban-card-border: rgba(35, 28, 62, 0.12);

  /* shape + misc */
  --scrollbar-thumb: rgba(79, 73, 86, 0.3);
  --scrollbar-overlap: 0.7rem;
  --app-gutter: clamp(0.85rem, 1.6vw, 2rem);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --body-background: var(--color-bg-canvas);
  --z-layer: 1;
  --z-sticky: 10;
  --z-topbar: 12;
  --z-popover: 30;
  --z-toast: 40;
  --z-modal: 50;
  --z-drag-preview: 60;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
}

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

  --color-bg-canvas: #15111f;
  --color-bg-surface: #1d1828;
  --color-bg-muted: #261f33;
  --color-bg-raised: #30283e;
  --color-bg-hover: #262034;
  --color-text-primary: #f7f3fa;
  --color-text-secondary: #d3ccdc;
  --color-text-muted: #aaa2b4;
  --color-border-subtle: #443a50;
  --color-border-control: #80748f;
  --color-link: #c3a7ff;
  --color-link-hover: #e0d3ff;
  --color-link-visited: #d8a0d3;
  --color-control-primary: #c4abff;
  --color-text-on-primary: #231c3e;
  --color-brand-accent: #ffad35;
  --color-accent-text: #ffb84d;
  --color-focus-outer: #ffb84d;
  --color-focus-inner: #15111f;
  --color-code-bg: #211b2d;
  --color-code-text: #f3dceb;
  --color-selection: #4a2f2a;
  --color-nav-current: #332640;
  --color-success-text: #75d99a;
  --color-success-bg: #173523;
  --color-warning-text: #f7c86b;
  --color-warning-bg: #3a2a13;
  --color-danger-text: #ff9a9f;
  --color-danger-bg: #3a1f25;
  --color-info-text: #8ccbff;
  --color-info-bg: #172f43;

  --current: var(--color-brand-accent);
  --current-bright: #ffd18a;
  --current-deep: var(--color-accent-text);
  --current-deeper: #ffe2ad;
  --current-ink: #231c3e;
  --current-wash: rgba(255, 173, 53, 0.14);
  --current-wash-strong: rgba(255, 173, 53, 0.24);
  --current-border: rgba(255, 173, 53, 0.42);

  --bg: var(--color-bg-canvas);
  --surface: var(--color-bg-surface);
  --surface-strong: var(--color-bg-raised);
  --surface-soft: var(--color-bg-muted);
  --well: var(--color-code-bg);
  --ink: var(--color-text-primary);
  --ink-secondary: var(--color-text-secondary);
  --muted: var(--color-text-muted);
  --faint: #8d8598;
  --line: var(--color-border-subtle);
  --line-soft: #352d42;
  --line-strong: #80748f;

  --chrome: var(--color-bg-raised);
  --chrome-raised: #3a314b;
  --chrome-text: var(--color-text-primary);
  --chrome-muted: var(--color-text-secondary);
  --chrome-line: rgba(255, 255, 255, 0.12);

  --primary: var(--color-control-primary);
  --primary-dark: var(--color-link-hover);
  --primary-ink: var(--color-text-on-primary);
  --accent: var(--color-accent-text);
  --calendar-blue: var(--color-link);

  --danger: var(--color-danger-text);
  --danger-strong: #ffb7ba;
  --danger-soft: var(--color-danger-bg);
  --warning: var(--color-warning-text);
  --warning-strong: #ffe09b;
  --warning-soft: var(--color-warning-bg);
  --success: var(--color-success-text);
  --success-strong: #9de8b8;
  --success-soft: var(--color-success-bg);
  --info: var(--color-info-text);
  --info-soft: var(--color-info-bg);

  --database-option-gray-bg: #352f3c;
  --database-option-gray-ink: #ded6e3;
  --database-option-brown-bg: #3a2d28;
  --database-option-brown-ink: #e3b9a2;
  --database-option-orange-bg: #41291f;
  --database-option-orange-ink: #f1b187;
  --database-option-yellow-bg: var(--warning-soft);
  --database-option-yellow-ink: var(--warning);
  --database-option-green-bg: var(--success-soft);
  --database-option-green-ink: var(--success);
  --database-option-blue-bg: var(--info-soft);
  --database-option-blue-ink: var(--info);
  --database-option-purple-bg: #322748;
  --database-option-purple-ink: #ccb2ff;
  --database-option-pink-bg: #3c2432;
  --database-option-pink-ink: #f2a8cf;
  --database-option-red-bg: var(--danger-soft);
  --database-option-red-ink: var(--danger);

  --control-bg: var(--color-bg-surface);
  --control-border: var(--color-border-control);
  --focus-ring: var(--color-focus-outer);
  --focus-ring-inner: var(--color-focus-inner);
  --select-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23958D9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --shadow: none;
  --shadow-raised: 0 18px 42px rgba(10, 8, 16, 0.34);

  --kanban-panel: transparent;
  --kanban-column-pending: var(--color-bg-muted);
  --kanban-column-progress: var(--color-bg-muted);
  --kanban-column-completed: var(--color-bg-muted);
  --kanban-card-bg: var(--color-bg-surface);
  --kanban-card-border: rgba(255, 255, 255, 0.1);

  --scrollbar-thumb: rgba(200, 193, 209, 0.25);
  --body-background: var(--color-bg-canvas);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  -webkit-text-size-adjust: 100%;
}

html.app-document {
  height: 100%;
  overflow: hidden;
  scrollbar-gutter: auto;
}

body {
  margin: 0;
  width: 100%;
  color: var(--ink);
  background: var(--body-background);
  min-height: 100dvh;
  overflow-x: clip;
}

::selection {
  color: var(--color-text-primary);
  background: var(--color-selection);
}

body.app-shell,
body.admin-shell,
body.control-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  overflow: hidden;
}

html::-webkit-scrollbar {
  width: var(--scrollbar-overlap);
  height: var(--scrollbar-overlap);
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  border: 0.18rem solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

body.is-card-dragging,
body.is-card-dragging * {
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
}

:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--current-wash-strong);
}

:where([id]) {
  scroll-margin-top: calc(env(safe-area-inset-top) + 5.5rem);
}

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

.skip-link {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0.75rem);
  left: calc(env(safe-area-inset-left) + 0.75rem);
  z-index: calc(var(--z-modal) + 2);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: var(--shadow-raised);
  font-size: 0.88rem;
  font-weight: 700;
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

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

button,
input,
textarea,
select {
  font: inherit;
}

button,
.ghost-button {
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.58rem 1.1rem;
  cursor: pointer;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 0.89rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

button:focus-visible,
.ghost-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--focus-ring-inner);
}

/* Dark-theme ink for generic (primary-styled) buttons is opt-in: buttons
   carry .btn-dark-base in markup. Components with their own dark styling
   simply never opt in, so this rule cannot reach them. The class is chained
   three times to keep the precedence the old :not() exclusion chain had over
   component state rules (e.g. .time-clock-button.is-running,
   .goal-row.is-completed .goal-complete-toggle). */
[data-theme="dark"] .btn-dark-base.btn-dark-base.btn-dark-base {
  color: var(--primary-ink);
}

[data-theme="dark"] .approval-actions .approve-button {
  color: var(--primary-ink);
}

.danger-button {
  background: var(--danger);
  color: #fff;
}

.ghost-button.danger-button {
  border-color: color-mix(in srgb, var(--danger) 44%, var(--line));
  background: transparent;
  color: var(--danger);
}

[data-theme="dark"] .danger-button {
  color: var(--primary-ink);
}

[data-theme="dark"] .ghost-button.danger-button {
  color: #ffd6ce;
}

.danger-button:hover {
  background: var(--danger);
  filter: brightness(0.92);
}

.ghost-button.danger-button:hover {
  background: var(--danger-soft);
  filter: none;
}

button:hover,
.ghost-button:hover {
  background: var(--primary-dark);
}

button:active:not(:disabled):not(:where(.navigation-search-trigger, .notification-bell-button, .mobile-menu-button)),
.ghost-button:active:not(:where(.navigation-search-trigger)) {
  transform: translateY(1px) scale(0.98);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.button-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
}

.button-with-icon .material-symbols-outlined {
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.ghost-button {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--control-border);
}

.ghost-button:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--ink);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--surface-strong);
  color: var(--ink);
  border: 1px solid var(--line);
}

.notification-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.notification-button span {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.info-button {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 700;
}

.info-button:hover {
  background: var(--surface-soft);
  color: var(--primary);
}

.theme-toggle:hover {
  background: var(--surface-soft);
}

.material-symbols-outlined {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.theme-toggle__icon {
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Material Symbols Rounded";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.theme-toggle__icon::before {
  content: "brightness_auto";
}

[data-theme-preference="light"] .theme-toggle__icon::before {
  content: "light_mode";
}

[data-theme-preference="dark"] .theme-toggle__icon::before {
  content: "dark_mode";
}

[data-theme="dark"] .theme-toggle__icon {
  border: none;
  background: transparent;
  color: var(--muted);
}

.theme-toggle:hover .theme-toggle__icon {
  color: var(--ink);
}

.theme-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.theme-menu-button .theme-toggle__icon {
  flex: 0 0 auto;
  color: currentColor;
}

.login-shell {
  display: grid;
  place-items: center;
  padding: 2rem;
}

.login-theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: var(--z-sticky);
}

.login-card,
.card {
  background: var(--surface);
  border: none;
  box-shadow: none;
  border-radius: var(--radius);
}

.login-card {
  width: min(880px, 100%);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.75rem;
  padding: 2.75rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.brand-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.login-language-choice {
  align-self: center;
  width: min(240px, 100%);
  margin-top: 0;
  text-align: left;
}

.login-language-choice select {
  min-height: 38px;
}

.brand-logo {
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-logo {
  width: 240px;
  max-width: 42vw;
}

[data-theme="dark"] .brand-logo {
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: #ffffff;
}

.brand-copy {
  max-width: 34rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 700;
}

.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 1.1rem;
  height: 3px;
  border-radius: 2px;
  background: var(--current);
}

.muted {
  color: var(--muted);
}

.error-banner {
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger);
  padding: 0.85rem 1rem;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 500;
}

.success-banner {
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--success) 48%, transparent);
  padding: 0.85rem 1rem;
  background: var(--success-soft);
  color: var(--success);
  font-weight: 600;
}

.login-copy-block {
  display: grid;
  gap: 0.35rem;
}

.login-copy-block h1 {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.15;
}

.login-copy-block p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.login-secondary-link {
  width: fit-content;
  color: var(--current-deep);
  font-size: 0.84rem;
  font-weight: 800;
}

.login-two-factor-panel {
  align-self: stretch;
}

.login-code-form,
.login-inline-form {
  display: grid;
  gap: 0.75rem;
}

.passkey-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
}

.passkey-button .material-symbols-outlined {
  font-size: 1.18rem;
}

.open-app-shell {
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--current-wash) 76%, transparent), transparent 32rem),
    linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--bg) 82%, var(--current-wash) 18%));
}

.open-app-back {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.55rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

.open-app-back:hover {
  border-color: var(--current-border);
  background: var(--current-wash);
  color: var(--current-deep);
}

.open-app-card {
  width: min(760px, 100%);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.open-app-copy {
  display: grid;
  gap: 0.55rem;
}

.open-app-copy h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.02;
  text-wrap: balance;
}

.open-app-copy p:last-child {
  margin: 0;
  line-height: 1.55;
}

.open-app-form {
  align-content: center;
}

.open-app-url-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.open-app-url-field:focus-within {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent);
}

.open-app-url-field input {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.open-app-url-field input:focus {
  box-shadow: none;
}

.open-app-url-field > span {
  display: inline-flex;
  align-items: center;
  padding: 0 0.72rem;
  border-left: 1px solid var(--control-border);
  color: var(--ink-secondary);
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.open-app-hint {
  margin: -0.3rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.login-form,
.task-form {
  display: grid;
  gap: 1rem;
}

label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

input,
textarea,
select {
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  padding: 0.62rem 0.72rem;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 0.9rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 3.1rem;
  background-image: var(--select-chevron-image);
  background-position: right 1.35rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

select::-ms-expand {
  display: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--current);
  box-shadow: 0 0 0 3px var(--current-wash-strong);
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

@media (max-width: 900px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

@media (pointer: coarse) {
  button,
  .ghost-button,
  .small-button,
  .theme-toggle,
  .user-pill,
  .work-menu-button,
  .work-menu-item,
  .mobile-menu-button,
  .mobile-menu-item,
  .seg-tab,
  .small-icon-button,
  .kanban-drag-handle,
    .release-footer__codename,
    .release-footer__version-link,
    .release-footer__license-trigger,
  .release-footer__theme-trigger,
  .release-footer__theme-option,
  .control-nav-link,
  .marketing-nav__links a,
  .marketing-footer__link {
    min-width: 44px;
    min-height: 44px;
  }
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  min-height: 76px;
  padding: 0 var(--app-gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
  min-width: 0;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 30px;
  height: 30px;
}

.brand-logo-chip {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 194px;
  height: 82px;
  padding: 0.32rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 0 var(--line-soft);
}

.brand-lockup {
  display: block;
  width: auto;
  max-width: 100%;
  height: 72px;
  max-height: 100%;
  object-fit: contain;
}

.brand-name {
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}

.brand-sub {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
}

.topbar .theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
}

.topbar .theme-toggle:hover {
  background: var(--surface-soft);
}


.topbar .user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  padding: 0.28rem 0.58rem 0.28rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: none;
}

.topbar .user-pill:hover,
.topbar .user-pill[aria-expanded="true"] {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.topbar .user-pill strong {
  font-size: 0.9rem;
  font-weight: 700;
}

.user-pill-copy {
  display: grid;
  gap: 0.03rem;
  min-width: 0;
}

.topbar .user-pill .user-pill-copy > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1;
}

.user-pill__chevron {
  color: var(--muted);
  font-size: 1rem;
  transition: transform 160ms ease;
}

.user-pill[aria-expanded="true"] .user-pill__chevron {
  transform: rotate(180deg);
}

.topbar .user-pill--with-organization-logo {
  gap: 0.42rem;
  min-height: 44px;
  padding: 0.28rem 0.6rem 0.28rem 0.3rem;
  border-radius: 999px;
}

.user-pill__organization-logo {
  display: inline-grid;
  place-items: center;
  width: 86px;
  height: 30px;
  padding: 0.2rem 0.38rem;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.user-pill__organization-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.release-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  row-gap: 0.32rem;
  width: calc(100% - (var(--app-gutter) * 2));
  max-width: none;
  margin: 0 auto;
  padding: 0.56rem 0 0.8rem;
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.release-footer__copyright {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 1.35rem;
  padding: 0.18rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.release-footer__meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.48rem;
  min-width: 0;
}

.release-footer__license {
  --license-edge: color-mix(in srgb, var(--line-strong) 76%, transparent);
  --license-soft: color-mix(in srgb, var(--surface-soft) 82%, transparent);
  --license-ink: var(--muted);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--license-ink);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.release-footer__license--valid,
.release-footer__license--neutral {
  --license-edge: color-mix(in srgb, var(--line-strong) 76%, transparent);
  --license-soft: color-mix(in srgb, var(--surface-soft) 82%, transparent);
  --license-ink: var(--muted);
}

.release-footer__license--warning {
  --license-edge: color-mix(in srgb, var(--warning) 58%, var(--line));
  --license-soft: color-mix(in srgb, var(--warning-soft) 72%, var(--surface));
  --license-ink: var(--warning);
}

.release-footer__license--danger {
  --license-edge: color-mix(in srgb, var(--danger) 58%, var(--line));
  --license-soft: color-mix(in srgb, var(--danger-soft) 72%, var(--surface));
  --license-ink: var(--danger);
}

.release-footer__license-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  min-height: 1.35rem;
  max-width: 18rem;
  padding: 0.18rem 0.48rem 0.18rem 0.36rem;
  border: 1px solid var(--license-edge);
  border-radius: 999px;
  background: var(--license-soft);
  color: var(--license-ink);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
}

button.release-footer__license-trigger {
  cursor: pointer;
}

button.release-footer__license-trigger:hover,
button.release-footer__license-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--license-soft) 72%, var(--surface-strong));
  border-color: var(--license-ink);
  color: var(--ink);
}

button.release-footer__license-trigger:active {
  transform: scale(0.98);
}

.release-footer__license-trigger--static {
  opacity: 0.72;
}

.release-footer__license-trigger .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--license-ink);
  font-size: 0.92rem;
  line-height: 1;
}

.release-footer__license-trigger strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-weight: 800;
  text-overflow: ellipsis;
}

.release-footer__license-popover {
  position: absolute;
  bottom: calc(100% + 0.54rem);
  left: 0;
  z-index: var(--z-popover);
  display: grid;
  gap: 0.16rem;
  min-width: 222px;
  max-width: min(82vw, 320px);
  padding: 0.7rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow-raised);
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.25;
  text-align: left;
  text-transform: none;
}

.release-footer__license-popover[hidden] {
  display: none;
}

.release-footer__license-kicker {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.release-footer__license-popover strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.release-footer__license-expiration {
  color: var(--ink-secondary);
  font-size: 0.74rem;
  font-weight: 700;
}

.release-footer__license .release-footer__license-warning {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  width: fit-content;
  margin-top: 0.28rem;
  padding: 0.14rem 0.42rem;
  border: 1px solid var(--license-edge);
  border-radius: 999px;
  background: var(--license-soft);
  color: var(--license-ink);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.release-footer__license .release-footer__license-warning[hidden] {
  display: none;
}

.release-footer__release {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.release-footer__codename {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.18rem 0.48rem;
  border: 1px solid var(--current-border);
  border-radius: 999px;
  background: var(--current-wash);
  box-shadow: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
  white-space: nowrap;
}

.release-footer__codename:hover,
.release-footer__codename[aria-expanded="true"] {
  border-color: var(--current-deep);
  background: color-mix(in srgb, var(--current-wash) 78%, var(--surface-strong));
  color: var(--current-deep);
}

.release-footer__codename:active {
  transform: scale(0.98);
}

.release-footer__release-popover {
  position: absolute;
  bottom: calc(100% + 0.54rem);
  left: 0;
  z-index: var(--z-popover);
  display: grid;
  gap: 0.16rem;
  min-width: 222px;
  max-width: min(82vw, 320px);
  padding: 0.7rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow-raised);
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.25;
  text-align: left;
  text-transform: none;
}

.release-footer__release-popover[hidden] {
  display: none;
}

.release-footer__release-kicker {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.release-footer__release-popover strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.release-footer__version-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-link);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.25;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-transform: none;
  transition: color 150ms ease;
  white-space: nowrap;
}

.release-footer__version-link:hover,
.release-footer__version-link:active {
  background: transparent;
  color: var(--color-link-hover);
  transform: none;
}

.release-footer__theme,
.marketing-footer__theme {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  gap: 0.26rem;
  padding: 0.18rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--color-link) 30%, var(--line));
  border-radius: 999px;
  background: var(--color-nav-current);
  color: var(--color-link);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.release-footer__theme {
  justify-self: center;
  position: relative;
  overflow: visible;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  white-space: nowrap;
}

.release-footer__theme-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-height: 2rem;
  padding: 0.34rem 0.46rem 0.34rem 0.78rem;
  border: 1px solid var(--current-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 74%, var(--current-wash) 26%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong) 72%, transparent);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.release-footer__theme-trigger:hover,
.release-footer__theme-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--surface-strong) 58%, var(--current-wash) 42%);
  border-color: var(--current-border);
  color: var(--ink);
}

.release-footer__theme-trigger:active {
  transform: scale(0.98);
}

/* "Theme" and the current choice share one label, so a hover underline runs unbroken under both. */
.release-footer__theme-label {
  white-space: nowrap;
}

.release-footer__theme-label > span {
  color: var(--muted);
  font-weight: 800;
}

.release-footer__theme-trigger .material-symbols-outlined {
  color: var(--current-deep);
  font-size: 1rem;
  line-height: 1;
  transition: transform 150ms ease;
}

.release-footer__theme-trigger[aria-expanded="true"] .material-symbols-outlined {
  transform: rotate(180deg);
}

.release-footer__theme strong,
.marketing-footer__theme strong {
  color: var(--ink);
  font-weight: 800;
}

.release-footer__theme-menu {
  position: absolute;
  bottom: calc(100% + 0.58rem);
  left: 50%;
  z-index: var(--z-popover);
  display: grid;
  gap: 0.24rem;
  min-width: 232px;
  padding: 0.48rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow-raised);
  color: var(--ink);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  transform: translateX(-50%);
}

.release-footer__theme-menu[hidden] {
  display: none;
}

.release-footer__theme-menu button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.55rem;
  width: 100%;
  min-height: 46px;
  padding: 0.58rem 1.9rem 0.58rem 0.62rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.12;
  text-align: left;
  text-transform: none;
}

.release-footer__theme-menu button:hover,
.release-footer__theme-menu button.is-selected {
  color: var(--ink);
}

.release-footer__theme-menu button:hover {
  background: color-mix(in srgb, var(--surface-soft) 86%, var(--current-wash) 14%);
}

.release-footer__theme-menu button.is-selected {
  background: color-mix(in srgb, var(--current-wash) 58%, var(--surface-soft) 42%);
}

.release-footer__theme-menu button.is-selected::after {
  content: "check";
  position: absolute;
  top: 50%;
  right: 0.55rem;
  color: var(--current-deep);
  font-family: "Material Symbols Rounded";
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
  line-height: 1;
  transform: translateY(-50%);
}

.release-footer__theme-menu button span,
.release-footer__theme-menu button small {
  min-width: 0;
}

.release-footer__theme-menu button small {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.18;
}

.control-footer {
  padding-bottom: 1.1rem;
}

@media (max-width: 760px) {
  .release-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .release-footer__copyright {
    justify-self: center;
  }

  .release-footer__meta,
  .release-footer__release,
  .release-footer__license,
  .release-footer__theme {
    justify-content: center;
  }

  .release-footer__license {
    flex-wrap: wrap;
    white-space: normal;
  }

  .release-footer__theme-menu {
    left: 50%;
    transform: translateX(-50%);
  }

  .release-footer__license-popover,
  .release-footer__release-popover {
    left: 50%;
    transform: translateX(-50%);
  }
}

.user-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--chrome);
  color: var(--chrome-text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  flex: 0 0 auto;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
  transform: scale(var(--profile-photo-scale, 1));
  transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.user-avatar--large {
  width: 42px;
  height: 42px;
  font-size: 1rem;
  line-height: 42px;
}

.account-popover-heading,
.team-card-person,
.profile-identity {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 0;
}

.account-popover-heading div,
.team-card-person div,
.profile-identity div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.account-popover-heading h3,
.account-popover-heading span,
.team-card-person strong,
.team-card-person div > span {
  overflow-wrap: anywhere;
}

.account-popover-heading span,
.team-card-person div > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.profile-shell .topbar {
  position: relative;
}

.profile-main {
  min-height: 0;
  overflow-y: auto;
  padding: 1.2rem var(--app-gutter) 1.6rem;
  background: var(--bg);
  scrollbar-gutter: stable both-edges;
}

.profile-page {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.profile-header-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.profile-identity--page {
  gap: 0.85rem;
}

.profile-hero-avatar {
  width: 60px;
  height: 60px;
  font-size: 1.35rem;
  box-shadow: none;
}

.profile-hero-avatar-button {
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.profile-hero-avatar-button:focus-visible {
  outline: 2px solid var(--current);
  outline-offset: 3px;
}

.profile-hero-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--current);
  color: var(--current-ink);
  transition: transform 120ms ease;
}

.profile-hero-avatar-edit .material-symbols-outlined {
  font-size: 14px;
}

.profile-hero-avatar-button:hover .profile-hero-avatar-edit,
.profile-hero-avatar-button:focus-visible .profile-hero-avatar-edit {
  transform: scale(1.08);
}

.profile-heading-copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.profile-kicker {
  margin: 0;
  color: var(--current-deep);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.profile-heading-copy h1 {
  margin: 0;
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.profile-heading-copy p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.86rem;
  font-weight: 650;
}

.profile-heading-copy .profile-email {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.profile-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.24rem;
}

.profile-identity .profile-role-list {
  display: flex;
}

.profile-role-badge {
  padding: 0.18rem 0.5rem;
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink-secondary);
  font-size: 0.68rem;
}

.profile-header-meta {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}

.profile-header-meta span {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.62rem 0.72rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.profile-header-meta small {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.profile-header-meta strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.profile-side,
.profile-detail-stack {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.profile-card {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.profile-card .section-heading {
  margin-bottom: 0;
}

.profile-actions-card {
  align-self: start;
}

.profile-photo-form,
.profile-settings-form,
.profile-notification-form,
.profile-action-list {
  display: grid;
  gap: 0.75rem;
}

.profile-photo-figure {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 0;
}

.profile-photo-figure > div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.profile-photo-figure strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.profile-photo-figure span:not(.user-avatar) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.profile-photo-preview {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  font-size: 1.5rem;
  box-shadow: none;
}

.profile-photo-editor-preview {
  justify-content: center;
  padding: 0.4rem 0;
}

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

.profile-file-control {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  padding: 0.35rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.profile-file-control:hover {
  border-color: var(--current-border);
  background: var(--surface-strong);
}

.profile-file-control:focus-within {
  border-color: var(--current);
  box-shadow: 0 0 0 3px var(--current-wash-strong);
}

.profile-file-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.profile-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
  min-height: 32px;
  padding: 0 0.62rem;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.profile-file-button .material-symbols-outlined {
  font-size: 1rem;
}

.profile-file-name {
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-crop-panel {
  display: grid;
  gap: 0.7rem;
  padding: 0.78rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.profile-crop-controls {
  display: grid;
  gap: 0.58rem;
}

.profile-crop-controls label {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr) 3.4em;
  align-items: center;
  gap: 0.62rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.profile-crop-controls label.is-disabled {
  opacity: 0.45;
}

.profile-crop-controls output {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--muted);
}

.profile-crop-controls input[type="range"] {
  width: 100%;
  accent-color: var(--current);
}

.profile-crop-controls input[type="range"]:disabled {
  cursor: not-allowed;
}

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

.profile-notification-list {
  display: grid;
  gap: 0.5rem;
}

.profile-notification-form .notification-choice {
  gap: 0.6rem;
  padding: 0.62rem 0.7rem;
  border-color: var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.profile-notification-form .notification-choice strong {
  font-size: 0.82rem;
  line-height: 1.18;
}

.profile-notification-form .notification-choice small {
  font-size: 0.72rem;
  line-height: 1.3;
}

.profile-notification-modal-panel {
  display: grid;
  width: min(980px, 100%);
  gap: 1rem;
}

.profile-notification-modal-panel > .section-heading {
  margin-bottom: 0;
}

.profile-notification-form {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.notification-route-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.notification-route-header,
.notification-route-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 120px 92px 92px;
  align-items: center;
}

.notification-route-table--with-slack .notification-route-header,
.notification-route-table--with-slack .notification-route-row {
  grid-template-columns: minmax(220px, 1fr) 112px 84px 84px 84px;
}

.notification-route-header {
  min-height: 2.5rem;
  padding: 0 0.75rem;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.notification-route-header span:not(:first-child) {
  text-align: center;
}

.notification-route-row {
  min-height: 4.35rem;
  padding: 0.62rem 0.75rem;
  border-top: 1px solid var(--line-soft);
}

.notification-route-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding-right: 0.85rem;
}

.notification-route-copy strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.2;
}

.notification-route-copy small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.notification-route-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  color: var(--muted);
  cursor: pointer;
}

.notification-route-toggle input {
  width: 1.08rem;
  height: 1.08rem;
  margin: 0;
  accent-color: var(--current);
}

.notification-route-toggle input:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.notification-route-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.notification-route-required,
.notification-route-unavailable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
}

.notification-route-required .material-symbols-outlined {
  color: var(--success);
  font-size: 1rem;
}

.sms-enrollment-panel {
  display: grid;
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.sms-enrollment-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.sms-enrollment-heading > div {
  display: grid;
  gap: 0.12rem;
}

.profile-section-kicker {
  color: var(--current-deep);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sms-enrollment-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
}

.sms-enrollment-heading p,
.sms-enrollment-panel p {
  margin: 0;
}

.sms-enrollment-heading p {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.sms-enrollment-heading .badge-success {
  border-color: color-mix(in srgb, var(--success) 36%, var(--line));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
}

.sms-enrollment-heading .badge-warning {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--line));
  background: var(--warning-soft);
  color: var(--ink);
}

.sms-connected-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.72rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.sms-connected-card.hidden {
  display: none;
}

.sms-enrollment-status-message:empty {
  display: none;
}

.sms-connected-card > .material-symbols-outlined {
  color: var(--success);
}

.sms-connected-card > div {
  display: grid;
  gap: 0.1rem;
}

.sms-connected-card strong {
  color: var(--ink);
  font-size: 0.85rem;
}

.sms-connected-card small,
.sms-opt-in-form small,
.sms-verification-form small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
}

.sms-opt-in-form,
.sms-verification-form {
  display: grid;
  gap: 0.72rem;
}

.sms-opt-in-form.hidden,
.sms-verification-form.hidden {
  display: none;
}

.sms-phone-field,
.sms-verification-form label {
  display: grid;
  gap: 0.28rem;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 750;
}

.sms-phone-field input,
.sms-verification-form input {
  min-height: 42px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--ink);
  font: inherit;
}

.sms-verification-form input {
  max-width: 12rem;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.22em;
  text-align: center;
}

.sms-consent-choice {
  align-items: start;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--current-border);
  border-radius: var(--radius-sm);
  background: var(--current-wash);
}

.sms-consent-choice input {
  margin-top: 0.16rem;
}

.sms-consent-choice span {
  display: grid;
  gap: 0.2rem;
}

.sms-consent-choice strong {
  color: var(--ink);
  font-size: 0.8rem;
}

.sms-legal-copy {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
}

.sms-legal-copy a {
  color: var(--current-deep);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.sms-enrollment-panel .inline-alert--warning {
  padding: 0.62rem 0.7rem;
  border-left: 3px solid var(--warning);
  background: var(--warning-soft);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 650;
}

.sms-enrollment-panel .inline-alert--info {
  padding: 0.62rem 0.7rem;
  border-left: 3px solid var(--current);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 650;
}

@media (max-width: 760px) {
  .notification-route-header {
    display: none;
  }

  .notification-route-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.75rem;
  }

  .notification-route-table--with-slack .notification-route-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notification-route-copy {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .notification-route-toggle,
  .notification-route-required,
  .notification-route-unavailable {
    position: relative;
    min-height: 38px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--surface-soft);
  }

  .notification-route-toggle {
    gap: 0.42rem;
  }

  .notification-route-toggle span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .sms-connected-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sms-connected-card > button {
    grid-column: 2;
    justify-self: start;
  }
}

.profile-coverage-card {
  gap: 0.8rem;
}

.approval-coverage-boundary {
  margin: 0;
  padding: 0.62rem 0.72rem;
  border-left: 3px solid var(--current);
  background: var(--current-wash);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.4;
}

.approval-coverage-list {
  display: grid;
  gap: 0.5rem;
}

.approval-coverage-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.72rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.approval-coverage-icon {
  color: var(--current);
  font-size: 1.3rem;
}

.approval-coverage-copy,
.approval-coverage-empty > div {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.approval-coverage-title-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.approval-coverage-title-line strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.approval-coverage-title-line .badge {
  color: var(--muted);
  font-size: 0.65rem;
}

.approval-coverage-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.approval-coverage-scopes span {
  padding: 0.16rem 0.38rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
}

.approval-coverage-empty {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
}

.approval-coverage-empty > .material-symbols-outlined {
  color: var(--current);
}

.approval-coverage-empty strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.approval-coverage-empty span:not(.material-symbols-outlined) {
  font-size: 0.74rem;
}

.approval-coverage-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.approval-coverage-scope-field {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  border: 0;
}

.approval-coverage-scope-field legend {
  margin-bottom: 0.42rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.approval-coverage-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.approval-coverage-scope-grid .checkbox-label {
  padding: 0.58rem 0.65rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.profile-security-card {
  gap: 1rem;
}

.security-status-badge {
  background: var(--surface-soft);
  color: var(--muted);
}

.security-status-badge--on {
  background: var(--success-soft);
  color: var(--success);
}

.security-method-list {
  display: grid;
  gap: 0.65rem;
}

.security-method-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.72rem;
  padding: 0.78rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.security-method-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--current-deep);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.security-method-icon .material-symbols-outlined {
  font-size: 1.24rem;
}

.security-method-copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.security-method-copy > strong {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.15;
}

.security-method-copy > span,
.security-passkey-row small,
.security-setup-grid small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.security-method-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.security-passkey-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.security-passkey-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem;
  border-radius: 10px;
  background: var(--surface);
}

.security-passkey-row > div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.security-passkey-row strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.security-remove-button {
  min-height: 34px;
  padding: 0 0.7rem;
  font-size: 0.78rem;
}

.security-setup-panel {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.65rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.security-setup-panel[hidden] {
  display: none;
}

.security-session-panel {
  display: grid;
  gap: 0.65rem;
  padding-top: 0.2rem;
}

.security-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}

.security-session-heading-copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.security-session-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.security-session-title-line h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.security-session-heading-copy p,
.security-session-consequence,
.security-session-state,
.security-session-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.security-session-count,
.security-session-current {
  background: var(--current-wash);
  color: var(--current-deep);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.security-session-consequence {
  color: var(--ink-secondary);
}

.security-session-list {
  display: grid;
  gap: 0.45rem;
}

.security-session-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.72rem;
  padding: 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.security-session-row--current {
  background: color-mix(in srgb, var(--current-wash) 68%, var(--surface-soft));
  box-shadow: inset 3px 0 0 var(--current);
}

.security-session-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--current-deep);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.security-session-icon .material-symbols-outlined {
  font-size: 1.2rem;
}

.security-session-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.security-session-name-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.security-session-name-line > strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
}

.security-session-copy > span {
  color: var(--ink-secondary);
  font-size: 0.76rem;
  line-height: 1.3;
}

.security-session-copy > small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.security-session-action {
  align-self: center;
  min-height: 44px;
}

.security-session-state[hidden] {
  display: none;
}

.security-session-state--error {
  color: var(--danger);
}

.security-session-note {
  font-size: 0.7rem;
}

.security-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
}

.security-setup-grid > span {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.security-setup-grid code {
  display: block;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: var(--well);
  color: var(--ink);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.security-setup-link {
  min-height: 34px;
  padding: 0 0.68rem;
  white-space: nowrap;
}

.profile-action-list .theme-menu-button,
.profile-action-list .popover-action-form,
.profile-action-list .popover-action-form button {
  width: 100%;
}

.profile-action-list .theme-menu-button,
.profile-action-list .popover-action-form button {
  justify-content: flex-start;
  min-height: 44px;
}

.profile-action-list .popover-action-form {
  flex: none;
}

.profile-form-actions,
.time-off-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.profile-form-actions .muted {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 650;
}

.time-off-shell {
  display: grid;
  grid-template-columns: minmax(26rem, 31rem) minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
  align-items: start;
  width: 100%;
}

.time-off-activity {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  min-width: 0;
}

@media (max-width: 1100px) {
  .time-off-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

.org-chart-card {
  display: grid;
  gap: 0.75rem;
}

/* Sharper lists — Time Off balances */
.time-off-shell { margin-top: 12px; }
.time-off-bank-summary-list .sh-box__head { justify-content: space-between; }
.time-off-employment-line,
.time-off-employment-type {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: var(--ink-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
}
.time-off-employment-line > .material-symbols-outlined { color: var(--muted); font-size: 1rem; }
.time-off-employment-type { display: flex; flex-wrap: wrap; margin-top: 0.1rem; font-weight: 400; color: var(--muted); }
.time-off-pto-summary { font-variant-numeric: tabular-nums; }
.time-off-bank-label { min-width: 0; }
.time-off-bank-days { font-variant-numeric: tabular-nums; }
.time-off-manager-line > span:last-child { max-width: 60%; font-weight: 600; font-size: 0.8125rem; }
.time-off-volunteer-state .sh-box__empty { color: var(--ink-secondary); }

.leave-balance-value {
  cursor: help;
  font-variant-numeric: tabular-nums;
  text-decoration: underline dotted color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: 0.2em;
}

.leave-balance-value:focus-visible {
  border-radius: var(--radius-xs);
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.app-tooltip {
  position: fixed;
  z-index: var(--z-drag-preview);
  width: max-content;
  max-width: min(16rem, calc(100vw - 16px));
  padding: 0.42rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  box-shadow: var(--shadow-raised);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%) translateY(4px) scale(0.98);
  transform-origin: center bottom;
  transition:
    opacity 160ms ease,
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.app-tooltip[data-placement="bottom"] {
  transform: translateX(-50%) translateY(-4px) scale(0.98);
  transform-origin: center top;
}

.app-tooltip.is-visible,
.app-tooltip[data-placement="bottom"].is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.app-tooltip[hidden] {
  display: none;
}

.pto-bank-list {
  display: grid;
  gap: 0.58rem;
}

.pto-bank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.72rem;
  align-items: center;
  padding: 0.7rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.pto-bank-person,
.pto-bank-metric {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.pto-bank-person strong,
.pto-bank-metric strong {
  color: var(--ink);
}

.pto-bank-person span,
.pto-bank-person small,
.pto-bank-metric span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.22;
}

.pto-bank-metric {
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.time-off-hours-hint {
  margin: 0;
}

.modal-panel.time-off-request-modal-panel {
  width: min(700px, 100%);
}

.time-off-request-modal-panel > .section-heading {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.time-off-hours-hint {
  margin-top: -0.36rem;
  text-wrap: pretty;
}

.time-off-delegate-field {
  align-content: start;
}

.time-off-approval-options {
  overflow: visible;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.time-off-approval-options > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: 0.75rem;
  padding: 0.62rem 0.72rem;
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 750;
  list-style: none;
}

.time-off-approval-options > summary::-webkit-details-marker {
  display: none;
}

.time-off-approval-options > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
}

.time-off-approval-options[open] > summary::after {
  content: "−";
}

.time-off-approval-options > summary .optional-tag {
  margin-left: auto;
}

.time-off-approval-options-body {
  padding: 0 0.72rem 0.72rem;
}

.time-off-form-actions {
  justify-content: flex-end;
  padding-top: 0.08rem;
}

.time-off-form-message {
  min-height: 1rem;
  margin: -0.38rem 0 0;
  font-size: 0.78rem;
  font-weight: 650;
}

.optional-tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0.1rem 0.34rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface-soft);
  color: var(--ink-secondary);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.time-off-list {
  display: grid;
  gap: 0.7rem;
}

.time-off-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.72fr) minmax(190px, 1fr);
  gap: 0.72rem;
  align-items: start;
  padding: 0.78rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.time-off-row textarea,
.time-off-actions,
.time-off-status-stack {
  grid-column: 1 / -1;
}

.time-off-row--history {
  grid-template-columns: minmax(180px, 0.74fr) minmax(190px, 1fr) auto;
  align-items: center;
}

.time-off-row--history .time-off-status-stack {
  grid-column: auto;
  justify-items: end;
}

.time-off-person {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  min-width: 0;
}

.time-off-person div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.time-off-person strong,
.time-off-window strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.time-off-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.time-off-status {
  justify-self: start;
}

.time-off-status--pending {
  background: var(--warning-soft);
  color: var(--warning);
}

.time-off-status--approved {
  background: var(--success-soft);
  color: var(--success);
}

.time-off-status--denied,
.time-off-status--canceled {
  background: var(--danger-soft);
  color: var(--danger);
}

.org-chart-card {
  --org-card-width: 176px;
  --org-line-length: 1.25rem;
  --org-line-width: 2px;
  --org-line-color: color-mix(in srgb, var(--current-bright) 76%, transparent);
  overflow-x: auto;
}

.org-chart-stage {
  position: relative;
  display: inline-block;
  min-width: max-content;
  padding: 0.2rem;
}

.org-chart-connectors {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.org-chart-connector-path {
  fill: var(--org-line-color);
  stroke: none;
  shape-rendering: crispEdges;
}

.org-chart-tree,
.org-chart-tree ol {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 0;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-chart-tree {
  padding: 0;
}

.org-chart-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 0.425rem;
}

.org-chart-node > ol {
  position: relative;
  margin-top: var(--org-line-length);
  padding-top: var(--org-line-length);
}

.org-person-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  width: var(--org-card-width);
  min-height: 56px;
  padding: 0.56rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  text-align: left;
}

.org-person-card.is-workforce {
  border-color: var(--current-border);
  box-shadow: inset 3px 0 0 var(--current);
}

.org-chart-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  background: var(--current-wash);
  color: var(--current-deep);
  font-size: 0.86rem;
  line-height: 36px;
}

.org-workforce-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid var(--surface-strong);
  border-radius: 6px;
  color: var(--primary-ink);
  background: var(--current);
  font-size: 11px;
  line-height: 1;
}

.org-person-card div {
  display: grid;
  justify-items: start;
  gap: 0.08rem;
  min-width: 0;
}

.org-person-card strong,
.org-person-card span {
  overflow-wrap: anywhere;
}

.org-person-card strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.12;
}

.org-person-card span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.18;
}

.org-chart-empty {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 2.2rem 1rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .profile-header-card {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-header-meta {
    width: 100%;
  }

  .profile-layout,
  .time-off-shell {
    grid-template-columns: 1fr;
  }

  .profile-settings-form,
  .approval-coverage-form,
  .approval-coverage-scope-grid,
  .security-method-card,
  .security-setup-grid,
  .time-off-form,
  .time-off-row,
  .time-off-row--history,
  .pto-bank-row {
    grid-template-columns: 1fr;
  }

  .security-method-actions {
    justify-content: flex-start;
  }

  .security-session-head {
    align-items: stretch;
    flex-direction: column;
  }

  .security-session-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .security-session-action {
    grid-column: 2;
    justify-self: start;
  }

  .time-off-row--history .time-off-status-stack,
  .pto-bank-metric {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .profile-identity {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .profile-main {
    padding: 0.9rem 0.75rem 1.2rem;
  }

  .time-off-bank-summary-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-header-card,
  .profile-card {
    padding: 0.85rem;
  }

  .security-session-head > .danger-button {
    justify-content: center;
    width: 100%;
  }

  .profile-header-meta,
  .profile-preferences-list,
  .profile-file-control {
    grid-template-columns: 1fr;
  }

  .profile-preferences-list .settings-summary-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .profile-preferences-list .settings-summary-row .ghost-button {
    justify-self: end;
  }

  .profile-file-button {
    justify-content: flex-start;
  }

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

  .approval-coverage-row > .danger-button {
    grid-column: 2;
    justify-self: start;
  }

  .profile-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-form-actions button {
    justify-content: center;
    width: 100%;
  }
}

.app-shell .topbar {
  position: relative;
  top: auto;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.logo-box {
  display: grid;
  place-items: center;
  width: 148px;
  height: 48px;
  padding: 0.24rem 0.42rem;
  border: none;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
  flex: 0 0 auto;
}

.logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateY(-7px);
}

.topbar h1,
.section-heading h3,
.login-card h1,
.card h4 {
  margin: 0;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 1.45rem;
  line-height: 1;
}

.topbar-brand-title {
  color: var(--chrome-text);
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-left: auto;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.user-pill {
  display: inline-grid;
  gap: 0.05rem;
  min-height: 42px;
  align-content: center;
  padding: 0.48rem 0.85rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: none;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}

.user-pill:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong);
}

.user-pill strong {
  font-size: 0.86rem;
  line-height: 1.05;
}

.user-pill span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.05;
  text-transform: capitalize;
}

[data-theme="dark"] .user-pill {
  color: var(--ink);
}

[data-theme="dark"] .user-pill span {
  color: var(--muted);
}

.dashboard-grid {
  width: calc(100% - (var(--app-gutter) * 2));
  max-width: none;
  margin: 0 auto;
  padding: 1.15rem 0 1.5rem;
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.app-shell .dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "panel";
  --shell-pad: var(--app-gutter);
  row-gap: 0;
  column-gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-content: start;
  align-items: stretch;
  justify-items: stretch;
  overflow-x: clip;
  overflow-y: hidden;
  overscroll-behavior: contain;
}

@supports (overflow: overlay) {
  .app-shell .dashboard-grid {
    overflow-y: hidden;
  }
}

.approval-popover {
  position: fixed;
  top: 6.2rem;
  right: 2rem;
  z-index: var(--z-popover);
  width: min(420px, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.approval-popover.hidden {
  display: none;
}

.compact-heading {
  margin-bottom: 0.75rem;
}

.approval-list {
  display: grid;
  gap: 0.55rem;
}

.approval-overview-card {
  padding-bottom: 0.75rem;
}

.approval-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  grid-template-areas: "main next";
  gap: 0.7rem;
  align-items: stretch;
  padding: 0.86rem;
}

.approval-command-main {
  grid-area: main;
  display: grid;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.approval-command-main h3 {
  margin: 0;
}

.approval-command-main .command-subcopy {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.approval-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.58rem;
  align-items: center;
  min-width: 0;
  padding: 0.64rem 0.68rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 10px;
  background: var(--current-wash);
}

.approval-next-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 11px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 1.18rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.approval-next-panel div:not(.approval-open-total) {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.approval-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.approval-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
}

.approval-open-total {
  display: grid;
  gap: 0.1rem;
  place-items: center;
  justify-self: end;
  min-width: 4.65rem;
  padding: 0.48rem 0.64rem;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-ink);
  text-align: center;
}

.approval-next-panel .approval-open-total span,
.approval-open-total span {
  margin: 0;
  color: var(--primary-ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-open-total strong {
  color: var(--primary-ink);
  font-size: 1.12rem;
  line-height: 1;
}

.approval-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.42rem;
}

.approval-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-flow-step.is-active {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.approval-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.approval-flow-step.is-active > .material-symbols-outlined {
  background: var(--current-wash-strong);
  color: var(--accent);
}

.approval-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.approval-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.approval-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.approval-workspace--with-side {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: 0.85rem;
}

.approval-side-stack {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.approval-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.approval-primary-card,
.approval-secondary-card {
  padding: 0.76rem;
}

.approval-primary-card .section-heading,
.approval-secondary-card .section-heading {
  align-items: center;
  margin-bottom: 0.58rem;
}

.approval-record {
  display: grid;
  gap: 0.5rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--current) 4%, transparent), transparent 64%),
    var(--surface-strong);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.04);
}

.approval-record--facility {
  background: var(--surface-strong);
}

.approval-record--emergency {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background:
    linear-gradient(180deg, var(--warning-soft), transparent 68%),
    var(--surface-strong);
}

.approval-record-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
  gap: 0.64rem;
  align-items: start;
}

.approval-record-top--compact {
  grid-template-columns: minmax(0, 1fr);
}

.approval-request-summary {
  display: grid;
  gap: 0.34rem;
  min-width: 0;
}

.approval-request-summary h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.08rem;
  letter-spacing: 0;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.approval-kind-chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.34rem;
  min-height: 1.58rem;
  padding: 0.24rem 0.5rem;
  border: 1px solid var(--current-border);
  border-radius: 999px;
  background: var(--current-wash);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.approval-kind-chip .material-symbols-outlined {
  font-size: 0.95rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.approval-kind-chip--facility {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: var(--success-soft);
  color: var(--success);
}

.approval-kind-chip--emergency {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
}

.approval-request-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem 0.78rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}

.approval-request-subline span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.approval-decision-panel {
  display: grid;
  grid-template-columns: minmax(120px, auto) auto;
  gap: 0.46rem;
  align-items: stretch;
  justify-self: end;
  min-width: 0;
}

.approval-decision-panel--compact {
  grid-template-columns: minmax(0, 0.85fr) auto;
  align-items: center;
  justify-self: stretch;
}

.approval-cost-box {
  display: grid;
  align-content: center;
  gap: 0.12rem;
  min-width: 7.6rem;
  padding: 0.46rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  text-align: right;
}

.approval-decision-panel--compact .approval-cost-box {
  min-width: 0;
  text-align: left;
}

.approval-cost-box small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-cost-box strong {
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1;
  white-space: nowrap;
}

.approval-route-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.approval-route-grid--decision {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.approval-route-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.approval-route-grid span {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
  padding: 0.5rem 0.56rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-route-grid small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-route-grid strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.approval-decision-context {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
}

.approval-record--purchase .approval-decision-context {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.approval-reason-preview {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.08rem 0.04rem 0.02rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.approval-reason-preview small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-reason-preview p {
  display: -webkit-box;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.28;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.approval-detail-row--panels {
  grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
  padding-top: 0.02rem;
}

.approval-detail-row--compact-actions {
  align-items: start;
  gap: 0.34rem;
}

.approval-detail-row--compact-actions > details[open] {
  grid-column: 1 / -1;
}

.approval-review-details {
  display: grid;
  gap: 0.48rem;
  min-width: 0;
  padding-top: 0.15rem;
}

.approval-note-field span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
}

[data-theme="dark"] .approval-kind-chip--facility {
  color: var(--success);
}

.approval-item,
.budget-tier-card,
.department-chain-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
}

.approval-item {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.approval-item--decision {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.48rem 0.65rem;
  padding: 0.62rem;
}

.approval-item--decision .approval-budget-strip {
  grid-column: 1 / -1;
}

.approval-item--decision .approval-note-field {
  grid-column: 1;
}

.approval-item--decision .approval-note-details {
  grid-column: 1;
}

.approval-item--decision .approval-context-details {
  grid-column: 1 / -1;
}

.approval-item--decision .approval-actions {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.approval-item--compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  padding: 0.58rem;
}

.approval-item--compact .approval-actions {
  justify-content: flex-end;
}

.approval-item--compact .approval-detail-row {
  grid-template-columns: 1fr;
}

.approval-main {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.approval-meta-line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  align-items: stretch;
  gap: 0.4rem;
  min-width: 0;
}

.approval-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
}

.approval-title-row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.approval-amount {
  justify-self: end;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: right;
}

.approval-meta-line span {
  display: grid;
  align-items: start;
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.2;
}

.approval-meta-pill {
  min-height: 1.45rem;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start;
  padding: 0.36rem 0.56rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink) !important;
  font-weight: 700;
}

.approval-meta-card {
  gap: 0.12rem;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-meta-card small,
.approval-detail-copy small,
.purchase-request-justification small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-meta-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.empty-state {
  margin: 0;
  padding: 0.65rem 0.72rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.approval-decision-panel .approval-actions {
  align-content: center;
  align-items: center;
}

.approval-decision-panel--compact .approval-actions {
  justify-content: flex-end;
}

.approval-actions .small-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.95rem;
  padding: 0.4rem 0.62rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.approval-actions .material-symbols-outlined {
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.emergency-approval-menu {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.card.emergency-approval-menu {
  margin-top: 0;
  padding-top: 1rem;
}

.emergency-approval-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-inline: 0.85rem;
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
  list-style: none;
}

.emergency-approval-menu summary::-webkit-details-marker {
  display: none;
}

.emergency-approval-menu summary strong {
  display: inline-grid;
  min-width: 1.65rem;
  min-height: 1.65rem;
  place-items: center;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.82rem;
}

.emergency-approval-menu .approval-list {
  margin-top: 0.75rem;
}

.emergency-approval-menu > .data-table-wrap {
  margin-top: 0.5rem;
}

details.emergency-approval-menu:not([open]) > :not(summary) {
  display: none;
}

.approval-item--emergency {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background:
    linear-gradient(0deg, var(--warning-soft), var(--warning-soft)),
    var(--surface-strong);
}

.approval-detail-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: start;
}

.approval-note-field {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.approval-note-field textarea {
  min-height: 64px;
  resize: vertical;
  text-transform: none;
}

.approval-note-field--inline {
  padding: 0.5rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-note-field--inline textarea {
  min-height: 54px;
  border-radius: 9px;
}

.approval-note-details {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.approval-context-details {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.48rem;
  min-width: 0;
}

.approval-detail-row .approval-context-details,
.approval-detail-row .approval-note-details {
  grid-column: auto;
}

.approval-note-details summary,
.approval-context-details summary,
.budget-breakdown summary {
  list-style: none;
}

.approval-note-details summary::-webkit-details-marker,
.approval-context-details summary::-webkit-details-marker,
.budget-breakdown summary::-webkit-details-marker {
  display: none;
}

.approval-note-details summary,
.approval-context-details summary {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  justify-self: start;
  min-height: 1.82rem;
  padding: 0.3rem 0.52rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
}

.approval-note-details summary .material-symbols-outlined,
.approval-context-details summary .material-symbols-outlined {
  font-size: 0.95rem;
  color: var(--accent);
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.approval-note-details[open] summary,
.approval-context-details[open] summary {
  color: var(--ink);
}

.approval-context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.approval-context-grid span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.8rem;
}

.approval-context-grid strong {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
}

.approval-context-details p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
}

.approval-detail-copy {
  display: grid;
  gap: 0.32rem;
  padding: 0.58rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-detail-copy p {
  color: var(--ink);
}

.approval-context-details .ghost-button {
  justify-self: start;
}

.approval-note-field ~ .approval-actions {
  grid-column: 1 / -1;
  justify-self: end;
}

.approval-item--decision .approval-note-field ~ .approval-actions {
  grid-column: 2;
  align-self: end;
  justify-self: end;
}

.approval-item--decision .approval-note-details ~ .approval-actions {
  grid-column: 2;
  align-self: end;
  justify-self: end;
}

.deny-button {
  background: var(--surface-soft);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}

.deny-button:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.approve-button {
  background: var(--success);
  color: #ffffff;
}

.approve-button:hover {
  background: var(--success);
  filter: brightness(0.92);
  color: #ffffff;
}

[data-theme="dark"] .approve-button {
  color: var(--primary-ink);
}

.approval-actions .approve-button,
.approval-actions .deny-button {
  justify-content: center;
  width: 6.75rem;
  min-width: 6.75rem;
  height: 2.32rem;
  min-height: 2.32rem;
  padding: 0 0.68rem;
  flex: 0 0 auto;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}

.approval-actions .approve-button {
  color: #ffffff;
}

.approval-actions .deny-button {
  color: var(--danger);
}

.approval-decision-panel--compact .approve-button,
.approval-decision-panel--compact .deny-button {
  width: 5.65rem;
  min-width: 5.65rem;
  padding: 0 0.48rem;
}

.approval-record--facility .approval-budget-strip--decision,
.approval-record--emergency .approval-budget-strip--decision {
  gap: 0.28rem;
  padding: 0.5rem;
}

.approval-record--emergency .approval-budget-strip--decision {
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
}

.approval-record--emergency .approval-budget-strip--decision span {
  padding: 0.42rem 0.4rem;
}

.approval-record--emergency .approval-budget-strip--decision small {
  font-size: 0.54rem;
}

.approval-record--emergency .approval-budget-strip--decision span strong {
  font-size: 0.78rem;
}

.department-chain-grid {
  display: grid;
  gap: 0.75rem;
}

.purchase-request-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto) minmax(96px, auto) 1.45rem;
  gap: 0.55rem;
  align-items: center;
  margin: 0.35rem 0 0.38rem;
  padding: 0 0.72rem;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.purchase-request-list-head span:nth-child(2),
.purchase-request-list-head span:nth-child(3) {
  justify-self: end;
}

.purchase-center {
  display: grid;
  gap: 0.85rem;
}

.purchase-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.56fr);
  grid-template-areas:
    "main next"
    "stats stats";
  gap: 0.64rem;
  align-items: stretch;
  padding: 0.78rem;
}

.purchase-command-card--empty {
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.6fr);
  grid-template-areas: "main next";
}

.purchase-command-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.purchase-command-card--empty .purchase-command-main {
  grid-template-columns: minmax(0, 1fr);
}

.purchase-command-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.48rem;
  min-width: 0;
}

.purchase-command-main h3 {
  margin: 0;
}

.purchase-command-main .command-subcopy {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.purchase-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.58rem;
  align-items: center;
  min-width: 0;
  padding: 0.68rem 0.72rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 12px;
  background: var(--current-wash);
}

.purchase-next-icon {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 11px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 1.16rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.purchase-next-panel div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.purchase-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.purchase-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.purchase-next-panel .ghost-button {
  justify-self: end;
  white-space: nowrap;
}

.purchase-command-strip {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.purchase-command-strip > span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.5rem 0.58rem;
}

.purchase-command-strip > span + span {
  border-left: 1px solid var(--line);
}

.purchase-command-strip small {
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.purchase-command-strip strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.purchase-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.purchase-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.purchase-flow-step.is-active {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.purchase-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.purchase-flow-step.is-active > .material-symbols-outlined {
  background: var(--current-wash-strong);
  color: var(--accent);
}

.purchase-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.purchase-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.purchase-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.purchase-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  width: 100%;
}

.purchase-workspace--empty {
  gap: 0.62rem;
}

.church-card-workspace {
  display: grid;
  gap: 0.85rem;
  width: 100%;
}

.ledger-filter-bar {
  display: grid;
  grid-template-columns: minmax(16rem, 1.5fr) repeat(3, minmax(9.5rem, 0.72fr)) auto;
  gap: 0.65rem;
  align-items: end;
  padding: 0.72rem;
  border-radius: 8px;
  background: var(--surface-soft);
}

.ledger-filter-bar > label {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1.1;
  text-transform: uppercase;
}

.ledger-filter-bar input,
.ledger-filter-bar select {
  width: 100%;
  min-height: 40px;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.ledger-filter-search-control {
  position: relative;
  display: block;
}

.ledger-filter-search-control > .material-symbols-outlined {
  position: absolute;
  top: 50%;
  left: 0.7rem;
  z-index: 1;
  color: var(--muted);
  font-size: 1rem;
  pointer-events: none;
  transform: translateY(-50%);
}

.ledger-filter-search-control > input {
  padding-left: 2.15rem;
}

.ledger-filter-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  min-height: 40px;
  white-space: nowrap;
}

.ledger-filter-bar[data-ledger-filters="card"] {
  grid-template-columns: minmax(12rem, 1.5fr) repeat(3, minmax(0, 1fr));
}

.ledger-filter-sort {
  grid-column: span 2;
}

.ledger-filter-bar[data-ledger-filters="card"] .ledger-filter-meta {
  grid-column: span 2;
}

.ledger-filter-meta > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ledger-filter-empty {
  width: 100%;
}

[data-ledger-item][hidden],
[data-ledger-filter-group][hidden],
[data-ledger-filter-empty][hidden] {
  display: none;
}

@media (max-width: 1100px) {
  .ledger-filter-bar {
    grid-template-columns: minmax(14rem, 1fr) repeat(3, minmax(0, 1fr));
  }

  .ledger-filter-meta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .ledger-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ledger-filter-bar[data-ledger-filters="card"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ledger-filter-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .ledger-filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .ledger-filter-bar[data-ledger-filters="card"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .ledger-filter-search,
  .ledger-filter-meta,
  .ledger-filter-sort,
  .ledger-filter-bar[data-ledger-filters="card"] .ledger-filter-meta {
    grid-column: 1;
  }

  .ledger-filter-meta {
    justify-content: space-between;
  }
}

.modal-panel.card-receipt-modal-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1080px, 100%);
  height: min(820px, calc(100dvh - 3rem));
  max-height: calc(100dvh - 3rem);
  padding: 0;
  overflow: hidden;
}

.card-receipt-preview {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--well);
}

.card-receipt-frame,
.card-receipt-image {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 1;
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.card-receipt-frame {
  background: var(--surface);
}

.card-receipt-image {
  padding: 1rem;
  object-fit: contain;
  object-position: center;
}

.card-receipt-frame[hidden],
.card-receipt-image[hidden] {
  display: none;
}

.card-receipt-preview.is-loading .card-receipt-frame,
.card-receipt-preview.is-loading .card-receipt-image {
  opacity: 0;
}

.card-receipt-loading {
  position: absolute;
  inset: 0;
  z-index: var(--z-layer);
  display: none;
  place-items: center;
  align-content: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.card-receipt-preview.is-loading .card-receipt-loading {
  display: grid;
}

.card-receipt-loading .material-symbols-outlined {
  color: var(--current-deep);
  font-size: 1.35rem;
}

@media (max-width: 560px) {
  .modal-panel.card-receipt-modal-panel {
    height: calc(100dvh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }
}

.purchase-side-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.85rem;
  min-width: 0;
  align-items: start;
}

.purchase-tools-drawer {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.purchase-tools-drawer > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.76rem 0.86rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  list-style: none;
}

.purchase-tools-drawer > summary::-webkit-details-marker {
  display: none;
}

.purchase-tools-drawer > summary h3 {
  margin: 0;
}

.purchase-tools-drawer > summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.purchase-tools-drawer[open] > summary > .material-symbols-outlined {
  transform: rotate(180deg);
  background: var(--current-wash-strong);
  color: var(--accent);
}

.purchase-tools-drawer[open] > .purchase-side-rail {
  margin-top: 0.85rem;
}

.purchase-tools-drawer:not([open]) > .purchase-side-rail {
  display: none;
}

.purchase-form-card {
  padding: 0;
  overflow: hidden;
}

.purchase-form-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.58rem;
  align-items: center;
  padding: 0.84rem;
  cursor: pointer;
  list-style: none;
}

.purchase-form-summary::-webkit-details-marker {
  display: none;
}

.purchase-form-summary h3 {
  margin: 0;
}

.purchase-form-summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.72rem;
  height: 1.72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1.08rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.purchase-form-card[open] .purchase-form-summary {
  border-bottom: 1px solid var(--line);
}

.purchase-form-card[open] .purchase-form-summary > .material-symbols-outlined {
  transform: rotate(180deg);
  background: var(--current-wash-strong);
  color: var(--accent);
}

.purchase-form-card:not([open]) > .purchase-request-form {
  display: none;
}

.section-subcopy {
  display: block;
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.28;
}

.label-hint {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: none;
}

.purchase-form-card .admin-form {
  gap: 0.62rem;
  padding: 0.84rem;
}

.purchase-form-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.66rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.purchase-step-number {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.purchase-step-body {
  display: grid;
  gap: 0.58rem;
  min-width: 0;
}

.purchase-step-heading {
  display: grid;
  gap: 0.08rem;
}

.purchase-step-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.1;
}

.purchase-step-heading span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.purchase-empty-action-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.68rem;
  align-items: center;
  min-width: 0;
  padding: 0.78rem;
  border: 1px solid var(--current-border);
  border-left: 3px solid var(--calendar-blue);
  border-radius: 12px;
  background: var(--current-wash);
}

.purchase-empty-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 11px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 1.16rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.purchase-empty-action-card div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.purchase-empty-action-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.12;
}

.purchase-empty-action-card span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.28;
}

.purchase-empty-action-card button {
  justify-self: end;
  white-space: nowrap;
}

.ledger-group-count {
  flex: 0 0 auto;
}

.ledger-group-count {
  min-width: 1.75rem;
  white-space: nowrap;
  line-height: 1;
}

.purchase-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.purchase-summary-grid.purchase-summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0;
}

.purchase-summary-grid article,
.department-budget-list article {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.purchase-summary-grid.purchase-summary-strip article {
  padding: 0.58rem 0.65rem;
}

.purchase-summary-grid span,
.department-budget-list span {
  color: var(--muted);
  font-size: 0.78rem;
}

.purchase-summary-grid strong {
  font-size: 0.98rem;
}

.department-budget-list {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.department-budget-list article {
  grid-template-columns: minmax(0, 1.1fr) repeat(5, minmax(110px, 1fr));
  align-items: center;
  column-gap: 0.5rem;
}

.purchase-side-rail .department-budget-list article {
  grid-template-columns: 1fr;
}

.budget-negative {
  color: var(--danger);
}

.department-budget-list article > span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.44rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.department-budget-list small,
.purchase-request-meta small {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.department-budget-list article > span strong,
.purchase-request-meta strong {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.12;
}

.purchase-budget-impact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-column: 1 / -1;
  gap: 0.35rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-budget-strip {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 0.28rem;
  padding: 0.42rem 0.52rem;
  border-radius: 9px;
}

.approval-budget-strip--decision {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0.28rem;
  padding: 0.5rem;
  border-radius: 11px;
}

.purchase-budget-impact span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.42rem 0.48rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
}

.purchase-budget-impact small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.purchase-budget-impact span strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.05;
}

.approval-budget-strip span {
  gap: 0.06rem;
}

.approval-budget-strip small {
  font-size: 0.58rem;
}

.approval-budget-strip span {
  font-size: 0.72rem;
  line-height: 1.2;
}

.approval-budget-strip span strong {
  font-size: 0.74rem;
  line-height: 1.05;
}

.approval-budget-strip--decision span {
  padding: 0.42rem 0.46rem;
}

.approval-budget-strip--decision small {
  font-size: 0.54rem;
}

.approval-budget-strip--decision span strong {
  font-size: 0.82rem;
  line-height: 1.05;
}

.purchase-budget-impact .budget-impact-alert small {
  color: var(--danger);
}

.purchase-budget-impact .budget-impact-alert strong,
.purchase-budget-impact > strong {
  color: var(--danger);
}

.purchase-budget-impact--over {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
}

.purchase-budget-impact--compact {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  padding: 0.45rem 0.55rem;
}

.department-chain-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.department-chain-card span {
  color: var(--muted);
  font-size: 0.86rem;
}

.purchase-request-progress {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  width: fit-content;
  padding: 0.26rem 0.46rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
}

.purchase-request-next-step {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.48rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.purchase-request-next-step.status-approved,
.purchase-request-next-step.status-purchased {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: var(--success-soft);
}

.purchase-request-next-step.status-pending {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
}

.purchase-request-next-step.status-denied {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
}

.purchase-request-next-step small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.purchase-request-next-step strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.purchase-request-next-step.status-approved strong,
.purchase-request-next-step.status-purchased strong {
  color: var(--success);
}

[data-theme="dark"] .purchase-request-next-step.status-approved strong,
[data-theme="dark"] .purchase-request-next-step.status-purchased strong {
  color: var(--success);
}

.purchase-request-next-step.status-denied strong {
  color: var(--danger);
}

.purchase-request-pending-indicator {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  justify-self: end;
  grid-column: 3;
  align-self: center;
  min-width: 10rem;
  min-height: 2.75rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  border-radius: 8px;
  background: var(--warning-soft);
  color: var(--warning);
  cursor: help;
}

.purchase-request-pending-indicator .material-symbols-outlined {
  font-size: 1.15rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.purchase-request-pending-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.purchase-request-pending-copy small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.purchase-request-pending-copy strong {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.purchase-request-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 2rem;
  min-width: 0;
  width: fit-content;
  justify-self: end;
  grid-column: 3;
  align-self: center;
  padding: 0.34rem 0.56rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.purchase-request-status-chip .material-symbols-outlined {
  font-size: 0.96rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.purchase-request-status-chip.status-approved,
.purchase-request-status-chip.status-purchased {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: var(--success-soft);
  color: var(--success);
}

.purchase-request-status-chip.status-pending {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
}

.purchase-request-status-chip.status-denied {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}

.purchase-request-review-body {
  display: grid;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(32rem, 1.28fr);
  gap: 0.9rem;
  align-items: start;
}

.purchase-request-review-body--single {
  grid-template-columns: minmax(0, 42rem);
}

.purchase-request-support-panel {
  display: grid;
  gap: 0.45rem;
}

.approval-note-details .approval-note-field {
  text-transform: none;
}

.purchase-request-detail-url {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  color: var(--color-link);
  text-decoration: none;
}

.purchase-request-detail-url:hover,
.purchase-request-detail-url:focus-visible {
  color: var(--color-link-hover);
}

.purchase-request-detail-url__text {
  min-width: 0;
  overflow: hidden;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-overflow: ellipsis;
  text-underline-offset: 0.16em;
  white-space: nowrap;
}

.purchase-request-detail-url > .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
}

.purchase-request-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.42rem;
}

.purchase-request-meta > span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.purchase-request-justification {
  display: grid;
  gap: 0.42rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.purchase-request-justification small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.purchase-request-justification p {
  margin: 0;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.5;
  text-wrap: pretty;
}

@media (max-width: 1100px) {
  .purchase-request-review-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.budget-breakdown {
  margin-bottom: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-strong);
  overflow: hidden;
}

.budget-breakdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.62rem 0.72rem;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.budget-breakdown summary strong {
  display: inline-grid;
  min-width: 1.55rem;
  min-height: 1.55rem;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.78rem;
}

.budget-breakdown .department-budget-list {
  margin: 0;
  padding: 0 0.62rem 0.62rem;
}

.department-chain-card label {
  display: grid;
  gap: 0.35rem;
}

.department-chain-card summary {
  list-style: none;
}

.department-chain-card summary::-webkit-details-marker {
  display: none;
}

.department-chain-form {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.58rem;
}

.admin-shell .department-chain-grid {
  gap: 0.55rem;
}

.admin-shell .department-chain-card {
  gap: 0.55rem;
  padding: 0.72rem;
  border-radius: 11px;
}

.department-card-head {
  cursor: pointer;
}

.admin-shell .department-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) 1.6rem;
  gap: 0.55rem;
  align-items: center;
  min-height: 2.5rem;
}

.admin-shell .department-card-head::after {
  content: "expand_more";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: "Material Symbols Rounded";
  font-size: 1.15rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
  justify-self: end;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.admin-shell .department-chain-card[open] .department-card-head {
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}

.admin-shell .department-chain-card[open] .department-card-head::after {
  transform: rotate(180deg);
  background: var(--warning-soft);
  color: var(--warning);
}

.department-card-title {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.department-card-title strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.department-card-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.department-card-meta [data-approver-count] {
  white-space: nowrap;
}

.department-chain-card .department-status-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.department-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: space-between;
}

.department-card-actions button {
  white-space: nowrap;
}

.approval-step-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.55fr) minmax(150px, 1fr) minmax(130px, 0.68fr) minmax(200px, 1.15fr) auto;
  gap: 0.75rem;
  align-items: start;
}

.admin-shell .approval-step-row {
  grid-template-columns: minmax(110px, 0.55fr) minmax(150px, 1fr) minmax(130px, 0.68fr) minmax(200px, 1.15fr) auto;
  gap: 0.55rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-route-builder [data-approval-route-list] {
  display: grid;
  gap: 0.55rem;
}

.approval-step-remove {
  min-height: 38px;
  align-self: end;
}

.approval-step-row label {
  min-width: 0;
}

.approval-tier-range-note {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  min-height: 38px;
  padding: 0.52rem 0.64rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
}

.approval-tier-range-note span,
.approval-tier-range-note small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.18;
}

.approval-tier-range-note strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.approval-tier-summary {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 0.2rem;
}

.admin-shell .approval-tier-summary strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.admin-shell .approval-tier-summary span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.status-approved {
  background: var(--success-soft);
  color: var(--success);
}

.status-purchased {
  background: var(--current-wash-strong);
  color: var(--accent);
}

.status-denied {
  background: var(--danger-soft);
  color: var(--danger);
}

.budget-status-popover,
.purchase-status-popover {
  position: fixed;
  z-index: var(--z-toast);
  width: min(320px, calc(100vw - 1.5rem));
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.budget-status-popover.hidden,
.purchase-status-popover.hidden {
  display: none;
}

.budget-status-popover strong,
.purchase-status-popover strong {
  font-size: 0.9rem;
}

.budget-status-popover span,
.purchase-status-popover span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.tab-nav {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.app-shell .dashboard-grid > .tab-panel {
  grid-area: panel;
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: grid;
  gap: 1rem;
  align-content: start;
  align-items: start;
  justify-items: stretch;
  align-self: stretch;
  grid-auto-rows: max-content;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  margin-top: 0;
  padding: 1.4rem var(--shell-pad) 1.6rem;
  margin-right: 0;
  overflow-x: clip;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: none;
  scroll-padding-top: 0;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
}

.app-shell .dashboard-grid > .tab-panel > * {
  align-self: start;
  justify-self: stretch;
  margin-top: 0;
}

@supports (overflow: overlay) {
  .app-shell .dashboard-grid > .tab-panel {
    overflow-y: overlay;
  }
}

.app-shell .dashboard-grid > .tab-panel[hidden] {
  display: none;
}

.tab-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 0.9rem;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tab-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 0;
  background: transparent;
  transition: background 160ms ease;
}

.tab-button:hover {
  background: transparent;
  color: var(--ink);
}

.tab-button.is-active {
  background: transparent;
  color: var(--ink);
  font-weight: 600;
}

.tab-button.is-active::after {
  background: var(--current);
}

.work-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 36px;
  padding: 0.32rem 0.56rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 720;
  white-space: nowrap;
}

.work-menu-button:hover,
.work-menu-button.is-active {
  border-color: var(--current-border);
  background: color-mix(in srgb, var(--current-wash) 72%, transparent);
  color: var(--current-deep);
}

.work-menu-button .material-symbols-outlined {
  font-size: 1.08rem;
}

.work-menu-button__chevron {
  color: var(--faint);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.work-menu-button[aria-expanded="true"] .work-menu-button__chevron {
  transform: rotate(180deg);
}

.work-menu-popover {
  width: min(300px, calc(100vw - 2rem));
  padding: 0.72rem;
}

.work-menu-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.28rem 0.34rem 0.72rem;
  border-bottom: 1px solid var(--line);
}

.work-menu-head > .material-symbols-outlined {
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 12px;
  background: var(--current-wash);
  color: var(--current-deep);
  font-size: 1.12rem;
}

.work-menu-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.15;
}

.work-menu-head span:not(.material-symbols-outlined) {
  display: block;
  margin-top: 0.08rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.work-menu-list {
  display: grid;
  gap: 0.28rem;
  padding-top: 0.55rem;
}

.work-menu-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.58rem;
  align-items: center;
  justify-content: flex-start;
  min-height: 42px;
  padding: 0.5rem 0.58rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-secondary);
  box-shadow: none;
  text-align: left;
}

.work-menu-item .material-symbols-outlined {
  color: var(--muted);
  font-size: 1.08rem;
}

.work-menu-item:hover,
.work-menu-item.is-active {
  border-color: var(--current-border);
  background: var(--current-wash);
  color: var(--current-deep);
}

.work-menu-item:hover .material-symbols-outlined,
.work-menu-item.is-active .material-symbols-outlined {
  color: var(--current-deep);
}

[data-theme="dark"] .work-menu-button {
  border-color: transparent;
  background: transparent;
  color: var(--ink-secondary);
}

[data-theme="dark"] .work-menu-button:hover,
[data-theme="dark"] .work-menu-button.is-active,
[data-theme="dark"] .work-menu-button[aria-expanded="true"] {
  border-color: var(--current-border);
  background: color-mix(in srgb, var(--surface-strong) 78%, var(--current-wash) 22%);
  color: var(--ink);
}

[data-theme="dark"] .work-menu-button:hover .material-symbols-outlined,
[data-theme="dark"] .work-menu-button.is-active .material-symbols-outlined,
[data-theme="dark"] .work-menu-button[aria-expanded="true"] .material-symbols-outlined {
  color: var(--current-bright);
}

[data-theme="dark"] .work-menu-button .work-menu-button__chevron,
[data-theme="dark"] .work-menu-button:hover .work-menu-button__chevron,
[data-theme="dark"] .work-menu-button.is-active .work-menu-button__chevron,
[data-theme="dark"] .work-menu-button[aria-expanded="true"] .work-menu-button__chevron {
  color: var(--ink-secondary);
}

[data-theme="dark"] .work-menu-popover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-strong) 88%, #33241f 12%);
}

[data-theme="dark"] .work-menu-head {
  border-bottom-color: var(--line-strong);
}

[data-theme="dark"] .work-menu-head > .material-symbols-outlined {
  background: color-mix(in srgb, var(--current-wash) 58%, var(--surface-strong) 42%);
  color: var(--current-bright);
}

[data-theme="dark"] .work-menu-head h3 {
  color: var(--ink);
}

[data-theme="dark"] .work-menu-head span:not(.material-symbols-outlined) {
  color: var(--ink-secondary);
}

[data-theme="dark"] .work-menu-item {
  color: var(--ink-secondary);
}

[data-theme="dark"] .work-menu-item .material-symbols-outlined {
  color: var(--muted);
}

[data-theme="dark"] .work-menu-item:hover,
[data-theme="dark"] .work-menu-item.is-active {
  border-color: var(--current-border);
  background: color-mix(in srgb, var(--surface-strong) 72%, var(--current-wash) 28%);
  color: var(--ink);
}

[data-theme="dark"] .work-menu-item:hover .material-symbols-outlined,
[data-theme="dark"] .work-menu-item.is-active .material-symbols-outlined {
  color: var(--current-bright);
}

.tab-panel {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.tab-panel[hidden] {
  display: none;
}

.operations-action-card {
  display: grid;
  gap: 0.8rem;
  padding: 1.15rem 1.25rem;
}

.operations-action-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  align-items: flex-start;
  min-width: 0;
}

.operations-action-heading h3 {
  margin: 0;
  font-size: 1.42rem;
}

.operations-action-heading span:not(.badge) {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
}

.operations-action-heading > .badge {
  align-self: flex-start;
}

.operations-overview-card {
  padding: 0.86rem;
}

.operations-hero {
  display: grid;
  grid-template-columns: minmax(190px, 0.45fr) minmax(0, 1.55fr);
  gap: 0.72rem;
  align-items: stretch;
}

.operations-title-block {
  display: grid;
  align-content: center;
  gap: 0.08rem;
  min-width: 0;
}

.operations-hero h3 {
  margin: 0;
  font-size: 1.42rem;
}

.operations-title-block > span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.operations-next-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  min-width: 0;
  padding: 0.68rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--current-wash);
}

.operations-next-action > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 1.12rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.operations-next-action div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.operations-next-action small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.operations-next-action strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.operations-next-action span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.operations-queue-card {
  display: grid;
  gap: 0.62rem;
  padding: 0.86rem;
}

.operations-workflow-card {
  display: grid;
  gap: 0.66rem;
  padding: 0.86rem;
}

.operations-queue-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.operations-queue-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.68rem;
  align-items: center;
  min-width: 0;
  padding: 0.62rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.operations-queue-row:hover {
  border-color: var(--current-border);
  background: var(--current-wash);
  transform: translateY(-1px);
}

.operations-queue-row--role {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.operations-queue-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--accent);
  font-size: 1.08rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.operations-queue-main {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.operations-queue-main h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.operations-queue-main > span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.operations-queue-row .ghost-button {
  justify-self: end;
  white-space: nowrap;
}

.operations-empty-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.66rem;
  align-items: center;
  min-width: 0;
  padding: 0.72rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  border-left: 3px solid var(--success);
  border-radius: 12px;
  background:
    linear-gradient(90deg, var(--success-soft), transparent 78%),
    var(--surface-soft);
}

.operations-empty-action > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 1.08rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.operations-empty-action h3,
.operations-empty-action p {
  margin: 0;
}

.operations-empty-action h3 {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.12;
}

.operations-empty-action p {
  margin-top: 0.08rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.28;
}

.operations-workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0.72rem;
}

.workflow-entry-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(96px, max-content) auto;
  gap: 0.72rem;
  align-items: center;
  min-height: 5.35rem;
  padding: 0.78rem 0.82rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-strong);
  box-shadow: none;
}

.workflow-entry-card--role {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.workflow-entry-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 1.16rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.workflow-entry-main {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.workflow-entry-main h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.workflow-entry-main > span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.workflow-entry-status {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.workflow-entry-status small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.workflow-entry-status strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.05;
}

.workflow-entry-card .ghost-button {
  align-self: center;
  white-space: nowrap;
}

.operations-recent-card {
  display: grid;
  gap: 0.72rem;
  padding: 0.35rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.operations-recent-card[open] {
  padding-bottom: 1.15rem;
}

.operations-recent-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0;
  cursor: pointer;
  list-style: none;
}

.operations-recent-card > summary::-webkit-details-marker {
  display: none;
}

.operations-recent-card > summary h3 {
  margin: 0;
}

.operations-recent-card > summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  transition: transform 180ms ease, background 160ms ease, color 160ms ease;
}

.operations-recent-card[open] > summary > .material-symbols-outlined {
  transform: rotate(180deg);
  background: var(--current-wash-strong);
  color: var(--accent);
}

.operations-recent-card:not([open]) > .operations-support-grid {
  display: none;
}

.operations-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
  align-items: start;
}

.operations-workspace {
  display: grid;
  grid-template-columns: minmax(340px, 1.1fr) repeat(2, minmax(260px, 0.8fr));
  gap: 0.72rem;
  align-items: start;
}

.operations-queue-list,
.operations-mini-list {
  display: grid;
  gap: 0.42rem;
}

.operations-mini-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
  min-height: 3rem;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
}

.operations-mini-list div {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

.operations-mini-list strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.operations-mini-list span:not(.badge),
.operations-mini-list time {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.operations-mini-list article {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  min-height: 0;
}

.operations-mini-list time {
  min-width: 6.2rem;
  padding-top: 0.06rem;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.objectives-center {
  display: grid;
  gap: 0.85rem;
}

.objectives-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  grid-template-areas: "main next";
  gap: 0.7rem;
  align-items: stretch;
  padding: 0.86rem;
}

.objectives-command-card--setup {
  grid-template-areas:
    "main next"
    "sequence sequence";
}

.objectives-command-main {
  grid-area: main;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.objectives-command-main h3 {
  margin: 0;
}

.objectives-command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.42rem;
}

.objectives-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.56rem;
  align-items: center;
  min-width: 0;
  padding: 0.6rem 0.68rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 10px;
  background: var(--current-wash);
}

.objectives-next-icon {
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 10px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 1.12rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.objectives-next-panel div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.objectives-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.objectives-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.objectives-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.objectives-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.objectives-flow-step.is-active {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.objectives-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.objectives-flow-step.is-active > .material-symbols-outlined {
  background: var(--current-wash-strong);
  color: var(--accent);
}

.objectives-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.objectives-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.objectives-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.objectives-start-card {
  display: grid;
  gap: 0.72rem;
  padding: 0.9rem;
  border-color: var(--current-border);
  background: var(--current-wash);
}

.objectives-start-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.72rem;
  align-items: center;
  min-width: 0;
}

.objectives-start-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 12px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.objectives-start-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.objectives-start-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1.12;
}

.objectives-start-copy p:not(.eyebrow) {
  max-width: 58rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.36;
}

.objectives-start-sequence {
  grid-area: sequence;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.objectives-start-sequence span {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  padding: 0.48rem 0.56rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.18;
}

.objectives-start-sequence strong {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
  flex: 0 0 auto;
}

.objectives-start-sequence .is-active {
  border-color: var(--current-border);
  background: var(--current-wash);
  color: var(--ink);
}

.objectives-start-sequence .is-active strong {
  background: var(--current-wash-strong);
  color: var(--accent);
}

.objectives-plan-grid,
.objectives-results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
  align-items: start;
}

.objectives-plan-section,
.objective-results-section {
  display: grid;
  gap: 0.6rem;
  padding: 0.78rem;
}

.objective-results-section--current {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.objective-card-list,
.key-result-list {
  display: grid;
  gap: 0.48rem;
}

.objective-card {
  display: grid;
  gap: 0.48rem;
  min-width: 0;
  padding: 0.68rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--surface-strong);
}

.objective-card.status-at_risk,
.key-result-row.status-at_risk {
  border-left-color: var(--danger);
}

.objective-card.status-completed,
.key-result-row.status-completed {
  border-left-color: var(--success);
}

.objective-card.status-paused,
.key-result-row.status-paused {
  border-left-color: var(--muted);
}

.objective-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.52rem;
  align-items: center;
  min-width: 0;
}

.objective-card-head > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 1.05rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.objective-card-head div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.objective-card-head strong,
.key-result-main strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.objective-card-head span:not(.material-symbols-outlined):not(.badge),
.key-result-main span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.objective-card p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.objective-parent-pill {
  width: fit-content;
  max-width: 100%;
  padding: 0.26rem 0.48rem;
  border: 1px solid var(--current-border);
  border-radius: 999px;
  background: var(--current-wash);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
}

.objective-progress,
.key-result-progress span {
  position: relative;
  height: 0.42rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}

.objective-progress span,
.key-result-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--success));
}

.objective-card-actions,
.key-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.34rem;
}

.key-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.28fr) auto auto;
  gap: 0.54rem;
  align-items: center;
  min-width: 0;
  padding: 0.56rem 0.6rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--surface-strong);
}

.key-result-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.key-result-main > .material-symbols-outlined {
  color: var(--accent);
  font-size: 1.15rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.key-result-main div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.key-result-progress {
  display: grid;
  gap: 0.16rem;
}

.key-result-progress strong {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1;
  text-align: right;
}

.objective-history-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.objective-history-card summary::-webkit-details-marker {
  display: none;
}

.objective-history-card summary h3 {
  margin: 0;
}

.objective-history-card summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  transition: transform 180ms ease, background 160ms ease, color 160ms ease;
}

.objective-history-card[open] summary {
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--line);
}

.objective-history-card[open] summary > .material-symbols-outlined {
  transform: rotate(180deg);
  background: var(--current-wash-strong);
  color: var(--accent);
}

.objective-history-card:not([open]) > .key-result-list {
  display: none;
}

.admin-shell {
  --admin-rail: var(--surface);
  --admin-rail-soft: var(--surface-soft);
  --admin-accent: var(--calendar-blue);
  --admin-panel-bg: var(--surface);
  --admin-hero: var(--surface-strong);
  background: var(--body-background);
}

.admin-shell .topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.admin-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.admin-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 1.72rem;
  padding: 0.28rem 0.58rem;
  border: none;
  border-radius: 999px;
  background: var(--current);
  color: var(--current-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-mode-chip .material-symbols-outlined {
  font-size: 0.98rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.admin-shell .admin-mode-note {
  display: block;
  margin-top: 0.28rem;
  color: var(--chrome-muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.admin-shell .topbar .ghost-button {
  border-color: var(--control-border);
  color: var(--ink);
}

.admin-context-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: calc(100% - (var(--app-gutter) * 2));
  max-width: none;
  margin: 0.75rem auto 0;
  padding: 0.58rem 0.7rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--admin-accent);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.admin-context-primary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.admin-context-primary > .material-symbols-outlined {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--current-wash-strong);
  color: var(--admin-accent);
  font-size: 1.18rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.admin-context-primary div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.admin-context-primary strong {
  font-size: 0.9rem;
  line-height: 1.15;
}

.admin-context-primary span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
}

.admin-context-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.38rem;
  flex: 0 0 auto;
}

.admin-context-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.26rem 0.54rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-console-grid {
  width: calc(100% - (var(--app-gutter) * 2));
  max-width: none;
  grid-template-columns: minmax(250px, 0.28fr) minmax(0, 1fr);
  align-items: start;
  gap: 0.78rem;
  padding-top: 0.92rem;
}

.admin-console-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1fr);
  gap: 0.72rem;
  align-items: center;
  padding: 0.78rem 0.86rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(135deg, var(--current-wash), transparent 38%),
    var(--admin-hero);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.admin-console-intro {
  min-width: 0;
}

.admin-console-hero h2 {
  margin: 0;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.45rem;
  letter-spacing: 0;
  line-height: 1.05;
}

.admin-console-intro > span {
  display: block;
  margin-top: 0.22rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-console-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-self: end;
  gap: 0.72rem;
  align-items: center;
  width: min(720px, 100%);
  min-width: 0;
  padding: 0.68rem 0.78rem 0.68rem 1rem;
  border: 1px solid var(--current-border);
  border-radius: 10px;
  background: var(--current-wash);
  text-align: left;
}

.admin-console-status > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 9px;
  background: var(--current-wash-strong);
  color: var(--admin-accent);
  font-size: 1.05rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.admin-console-status div {
  display: grid;
  gap: 0.1rem;
  justify-items: start;
  min-width: 0;
}

.admin-console-status strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.1;
}

.admin-console-status span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.28;
}

.admin-nav-shell {
  position: sticky;
  top: 5.5rem;
  z-index: var(--z-sticky);
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: 0.48rem;
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--admin-rail);
  box-shadow: var(--shadow);
}

.admin-shell .tab-panel {
  grid-column: 2;
  grid-row: 2;
}

.admin-shell .card {
  box-shadow: none;
}

.admin-panel {
  gap: 0.72rem;
  padding: 0.64rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--admin-panel-bg);
}

[data-theme="dark"] .admin-shell {
  --admin-rail: var(--surface);
  --admin-rail-soft: rgba(248, 236, 222, 0.07);
  --admin-accent: var(--current-deep);
  --admin-panel-bg: var(--surface-soft);
  --admin-hero: var(--surface-strong);
  background: var(--body-background);
}

[data-theme="dark"] .admin-shell .topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

[data-theme="dark"] .admin-context-strip {
  border-color: var(--current-border);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] .admin-context-primary > .material-symbols-outlined {
  background: var(--current-wash);
}

[data-theme="dark"] .admin-context-primary span:not(.material-symbols-outlined) {
  color: var(--muted);
}

[data-theme="dark"] .admin-context-pills span {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink-secondary);
}

[data-theme="dark"] .admin-nav-shell {
  border-color: var(--line);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
}

[data-theme="dark"] .admin-console-hero {
  border-color: var(--line);
  background:
    linear-gradient(135deg, var(--current-wash), transparent 38%),
    var(--admin-hero);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .admin-console-intro > span {
  color: var(--muted);
}

[data-theme="dark"] .admin-console-status {
  border-color: var(--current-border);
  background: var(--current-wash);
}

[data-theme="dark"] .admin-console-status > .material-symbols-outlined {
  background: var(--current-wash-strong);
}

[data-theme="dark"] .admin-console-status strong {
  color: var(--ink);
}

[data-theme="dark"] .admin-console-status span:not(.material-symbols-outlined) {
  color: var(--muted);
}

.admin-card {
  padding: 0.84rem;
  border-radius: 12px;
  background: var(--surface);
}

.admin-shell .admin-two-panel {
  grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1.52fr);
  gap: 0.75rem;
}

.admin-shell .admin-form {
  gap: 0.65rem;
}

.admin-shell .admin-list-card > .section-heading {
  align-items: flex-start;
}

.admin-create-modal-panel {
  display: grid;
  gap: 0.8rem;
}

.admin-create-modal-panel .section-heading {
  margin-bottom: 0;
}

.admin-create-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.admin-create-form textarea {
  min-height: 5.8rem;
}

.department-create-form {
  grid-template-columns: 1fr;
}

.department-modal-panel {
  width: min(1120px, 100%);
}

.department-basics {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(520px, 1.2fr);
  gap: 0.8rem;
  align-items: start;
}

.department-name-field,
.department-toggle-group,
.department-toggle-list {
  min-width: 0;
}

.department-name-field {
  display: grid;
  align-content: start;
  gap: 0.35rem;
}

.department-toggle-group {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.department-toggle-group legend {
  padding: 0;
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.department-toggle-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: start;
}

.admin-shell .department-status-toggle {
  min-height: 48px;
  align-items: flex-start;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.admin-shell .department-status-toggle input {
  margin-top: 0.12rem;
  flex: 0 0 auto;
}

.admin-shell .department-status-toggle span,
.group-setting-toggle span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.admin-shell .department-status-toggle strong,
.group-setting-toggle strong {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.25;
}

.admin-shell .department-status-toggle small,
.group-setting-toggle small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.approval-route-heading {
  align-items: end;
  margin-bottom: 0.55rem;
}

.approval-route-heading > div {
  display: grid;
  gap: 0.2rem;
}

.approval-route-heading h4,
.approval-route-heading p {
  margin: 0;
}

.approval-group-modal-panel {
  width: min(1100px, 100%);
}

.approval-group-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.approval-group-form > label:not(.checkbox-label) {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.35rem;
}

.approval-group-form > .role-fieldset {
  grid-column: auto;
}

.approval-group-form > .group-setting-toggle,
.approval-group-form > .modal-actions,
.approval-group-form > [data-approval-group-message] {
  grid-column: 1 / -1;
}

.approval-group-form textarea {
  min-height: 5.5rem;
}

.group-member-picker {
  min-width: 0;
  margin: 0;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.group-member-picker legend {
  padding: 0 0.28rem;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
}

.group-member-picker__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
  margin-bottom: 0.55rem;
}

.group-member-picker__toolbar label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.group-member-picker__toolbar .badge {
  margin-bottom: 0.45rem;
}

.group-member-picker__options {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  scrollbar-gutter: stable;
}

.group-member-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 0.62rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.group-member-option:last-child {
  border-bottom: 0;
}

.group-member-option:hover,
.group-member-option:has(input:checked) {
  background: var(--current-wash);
}

.group-member-option[hidden] {
  display: none;
}

.group-member-option input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
}

.group-member-option span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.group-member-option strong,
.group-member-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-member-option strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.group-member-option small {
  color: var(--muted);
  font-size: 0.74rem;
}

.group-member-picker > .field-hint {
  display: block;
  margin-top: 0.45rem;
}

.group-setting-toggle {
  align-items: flex-start;
  min-height: 48px;
  padding: 0.58rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.group-setting-toggle input {
  margin-top: 0.12rem;
  flex: 0 0 auto;
}

.admin-shell .admin-form label,
.admin-shell .department-chain-card label {
  font-size: 0.78rem;
}

.admin-shell .admin-form input:not([type="checkbox"]):not([type="file"]):not([type="range"]),
.admin-shell .admin-form textarea,
.admin-shell .admin-form select,
.admin-shell .department-chain-card input:not([type="checkbox"]):not([type="file"]):not([type="range"]),
.admin-shell .department-chain-card select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0.55rem 0.65rem;
  border-radius: 9px;
}

.admin-shell .admin-form select,
.admin-shell .department-chain-card select {
  padding-right: 2.5rem;
}

.admin-shell .app-settings-form {
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}

.settings-section {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.45rem);
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.app-settings-form > [data-app-settings-section][hidden] {
  display: none;
}

.settings-section:first-child {
  padding-top: 0.35rem;
  border-top: 0;
}

.settings-section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.58rem;
  align-content: start;
  min-width: 0;
  color: var(--muted);
}

.settings-section-head .material-symbols-outlined {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 1.12rem;
}

.settings-section-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.1;
}

.settings-section-head p {
  margin: 0.28rem 0 0;
  max-width: 24ch;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.3;
}

.settings-section-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: end;
  min-width: 0;
}

.settings-section-fields--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pto-policy-settings {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
}

.pto-policy-settings--readonly {
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-strong) 86%, var(--surface-soft) 14%);
}

.pto-policy-assignment-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.pto-policy-assignment-head h5,
.pto-policy-assignment-head p {
  margin: 0;
}

.pto-policy-assignment-head h5 {
  margin-top: 0.46rem;
  color: var(--ink);
  font-size: 1rem;
}

.pto-policy-assignment-head p {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.pto-policy-managed-badge,
.status-pill {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.pto-policy-managed-badge {
  padding: 0.3rem 0.48rem;
  background: var(--current-wash);
  color: var(--current-deep);
}

.pto-policy-managed-badge .material-symbols-outlined {
  font-size: 0.88rem;
}

.status-pill {
  padding: 0.32rem 0.52rem;
  background: var(--success-soft);
  color: var(--success);
}

.status-pill.is-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.settings-inline-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.58rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.settings-inline-alert strong,
.settings-inline-alert p {
  margin: 0;
}

.settings-inline-alert p {
  margin-top: 0.16rem;
  font-size: 0.76rem;
  line-height: 1.4;
}

.settings-inline-alert.is-warning {
  border-color: color-mix(in srgb, var(--warning) 36%, var(--line));
  background: var(--warning-soft);
  color: var(--warning-strong);
}

.settings-policy-picker {
  grid-column: 1 / -1;
}

.pto-policy-preview {
  display: grid;
  gap: 0.52rem;
  padding: 0.72rem;
  border-radius: 8px;
  background: var(--surface-soft);
}

.pto-policy-preview[hidden],
[data-pto-custom-settings][hidden] {
  display: none;
}

.pto-policy-preview > div {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.56rem;
  align-items: start;
}

.pto-policy-preview .material-symbols-outlined {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 6px;
  background: var(--current-wash);
  color: var(--current-deep);
  font-size: 1rem;
}

.pto-policy-preview p {
  display: grid;
  gap: 0.12rem;
  margin: 0;
}

.pto-policy-preview p span,
.pto-policy-preview > small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.38;
}

.pto-policy-preview > .pto-policy-source-note {
  padding: 0.56rem 0.62rem;
  border-radius: 6px;
  background: var(--warning-soft);
  color: var(--warning-strong);
}

.pto-policy-confirmation {
  padding: 0.62rem;
  border-radius: 6px;
  background: var(--warning-soft);
  color: var(--warning-strong);
}

.pto-policy-confirmation[hidden] {
  display: none;
}

.settings-feature-toggle {
  grid-column: 1 / -1;
}

.goal-reminder-schedule-settings,
.goal-reminder-route-settings {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0.68rem;
  border: 0;
  border-radius: 8px;
  background: var(--surface-soft);
}

.goal-reminder-schedule-settings legend,
.goal-reminder-route-settings legend {
  padding: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.goal-reminder-schedule-settings > p,
.goal-reminder-route-settings > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.4;
}

.goal-reminder-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.48rem;
}

.goal-reminder-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem;
}

.holiday-policy-settings {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.72rem;
  min-width: 0;
}

.holiday-policy-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.admin-shell .app-settings-form .holiday-policy-option {
  align-items: start;
  min-height: 100%;
  padding: 0.5rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.holiday-policy-option span {
  display: grid;
  gap: 0.12rem;
}

.holiday-policy-option small,
.holiday-policy-guidance,
.holiday-battle-dates small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.35;
}

.holiday-policy-guidance {
  display: flex;
  gap: 0.42rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.58rem 0.64rem;
  border-radius: 7px;
  background: var(--current-wash);
  color: var(--current-deep);
}

.holiday-policy-guidance .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 1rem;
}

.holiday-battle-dates {
  display: grid;
  gap: 0.46rem;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.holiday-battle-dates-head,
.holiday-battle-date-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.42fr) minmax(10rem, 1fr);
  gap: 0.52rem;
  align-items: end;
}

.holiday-battle-dates-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.holiday-battle-dates-head strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.settings-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.admin-shell .app-settings-form .checkbox-label,
.settings-section-actions button[type="submit"],
.settings-section-actions .muted {
  justify-self: start;
}

.admin-shell .app-settings-form .checkbox-label {
  align-self: stretch;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.admin-shell .app-settings-form .checkbox-label span {
  display: grid;
  gap: 0.1rem;
}

.settings-summary-list {
  display: grid;
  gap: 0.62rem;
  min-width: 0;
}

.mobile-update-row {
  font-variant-numeric: tabular-nums;
}

.settings-summary-copy .mobile-update-schedule {
  color: var(--current-deep);
}

.mobile-update-row .settings-summary-copy strong > span,
.settings-summary-copy .mobile-update-schedule > span,
.settings-summary-copy .mobile-update-schedule > time {
  color: inherit;
  font: inherit;
}

.mobile-update-clear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.mobile-update-modal-panel .settings-section:first-of-type {
  border-top: 0;
}

.mobile-update-modal-panel .settings-section-fields {
  align-items: start;
}

.mobile-update-error {
  padding: 0.75rem;
  border-left: 3px solid var(--danger);
  background: var(--surface-soft);
  color: var(--danger);
}

.settings-summary-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.72rem;
  align-items: center;
  min-width: 0;
  padding: 0.78rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
}

.settings-summary-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 1.12rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.settings-summary-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.settings-summary-copy strong {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.2;
}

.settings-summary-copy span,
.settings-summary-copy small {
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.settings-summary-copy small {
  color: var(--faint);
  font-weight: 800;
}

.settings-summary-copy .settings-summary-notice.is-success {
  color: var(--success);
}

.settings-summary-copy .settings-summary-notice.is-danger {
  color: var(--danger);
}

.settings-summary-row .ghost-button,
.settings-summary-row .small-button {
  justify-self: end;
  white-space: nowrap;
}

.settings-summary-logo {
  display: inline-grid;
  place-items: center;
  width: 5.5rem;
  height: 2.5rem;
  padding: 0.26rem 0.45rem;
  overflow: hidden;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.settings-summary-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.settings-summary-logo.is-empty {
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}

.settings-summary-logo .material-symbols-outlined {
  font-size: 1.2rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* Default preset picker: one compact strip that matches the ecobee summary
   row above it, instead of a full-width floating select. */
.default-preset-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.72rem;
  margin: 0 0 0.9rem;
  padding: 0.78rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.admin-shell #admin-panel-thermostats {
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
}

.admin-shell #admin-panel-thermostats .settings-summary-row,
.admin-shell #admin-panel-thermostats .section-heading {
  align-items: start;
}

.preset-apply-form > p,
.preset-apply-preview p {
  margin: 0;
}

#temperature-preset-apply-modal .section-heading {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: start;
}

.preset-apply-preview {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.preset-apply-preview[hidden] {
  display: none;
}

.preset-apply-events {
  display: grid;
  gap: 0.5rem;
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preset-apply-events li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.preset-apply-events li span {
  overflow-wrap: anywhere;
}

.preset-apply-events time {
  color: var(--muted);
  font-size: 0.85rem;
}

.default-preset-form label {
  flex: 1 1 16rem;
  max-width: 24rem;
  margin: 0;
}

.default-preset-form select {
  width: 100%;
}

.default-preset-form .small-button {
  margin: 0;
  white-space: nowrap;
}

.default-preset-form [data-default-preset-message]:not(:empty) {
  flex-basis: 100%;
  font-size: 0.76rem;
}

.temperature-presets-table .cell-primary + .badge {
  margin-left: 0.5rem;
}

.organization-logo-modal-panel {
  width: min(680px, calc(100% - 2rem));
}

.organization-logo-form {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 0;
}

.organization-logo-editor {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-width: 0;
  padding: 0.9rem;
  border-radius: 8px;
  background: var(--surface-soft);
}

.organization-logo-preview {
  display: grid;
  place-items: center;
  width: 176px;
  height: 72px;
  padding: 0.5rem 0.7rem;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.organization-logo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.organization-logo-preview img[hidden] {
  display: none;
}

.organization-logo-preview.is-empty {
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}

.organization-logo-preview .material-symbols-outlined {
  font-size: 1.75rem;
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 32;
}

.organization-logo-editor-copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.organization-logo-editor-copy strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.organization-logo-editor-copy span,
.organization-logo-editor-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.45;
  text-wrap: pretty;
}

.organization-logo-editor-copy small {
  color: var(--faint);
  font-size: 0.72rem;
}

.organization-logo-file-control {
  display: grid;
  gap: 0.42rem;
}

.settings-modal-panel .admin-form {
  margin-top: 0;
}

.license-setup-card {
  width: min(780px, 100%);
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

.license-setup-form {
  width: min(560px, 100%);
  margin-top: 0;
  text-align: left;
}

.license-setup-card .brand-block {
  align-items: center;
  gap: 0.95rem;
  width: 100%;
}

.license-setup-card .login-language-choice {
  align-self: center;
  width: min(240px, 100%);
  margin-top: 0;
  text-align: left;
}

.license-manage-shell {
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--current-wash) 76%, transparent), transparent 32rem),
    linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--bg) 82%, var(--current-wash) 18%));
}

.license-manage-card {
  width: min(720px, 100%);
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

.license-manage-card .brand-block {
  align-items: center;
  gap: 0.95rem;
  width: 100%;
}

.license-manage-card .brand-block p {
  max-width: 36rem;
  margin: 0;
}

.license-manage-form {
  width: min(520px, 100%);
  text-align: left;
}

.billing-checkout-shell {
  background: linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--bg) 88%, var(--current-wash) 12%));
}

.billing-checkout-card {
  width: min(780px, 100%);
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

.billing-checkout-card .brand-block {
  align-items: center;
  gap: 0.95rem;
  width: 100%;
}

.billing-checkout-card .brand-block p {
  max-width: 40rem;
  margin: 0;
}

.billing-checkout-form {
  width: min(620px, 100%);
  text-align: left;
}

.billing-slug-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.billing-slug-field input {
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.billing-slug-field__suffix {
  display: inline-flex;
  align-items: center;
  max-width: min(42vw, 18rem);
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 9px 9px 0;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billing-slug-status {
  min-height: 1rem;
  margin-top: 0.32rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.billing-slug-status[data-state="available"] {
  color: var(--success);
}

.billing-slug-status[data-state="blocked"] {
  color: var(--danger);
}

.billing-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.7fr);
  gap: 0.8rem;
  align-items: end;
}

.billing-interval-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.billing-interval-choice legend {
  grid-column: 1 / -1;
  margin-bottom: 0.1rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.billing-interval-choice label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.38rem;
  min-height: 2.65rem;
  padding: 0 0.62rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.83rem;
  font-weight: 800;
}

.billing-interval-choice input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.license-manage-message {
  width: min(520px, 100%);
  text-align: left;
}

.license-status-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  width: 100%;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--ink);
}

.license-status-card > .material-symbols-outlined {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  background: var(--current-wash);
  color: var(--current);
  font-size: 1.25rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.license-status-card div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.license-status-card strong {
  font-size: 0.88rem;
  line-height: 1.2;
}

.license-status-card span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.license-status-card--valid {
  border-color: rgba(44, 174, 89, 0.28);
  background: rgba(44, 174, 89, 0.08);
}

.license-status-card--valid > .material-symbols-outlined {
  background: var(--success-soft);
  color: var(--success);
}

.license-status-card--warning {
  border-color: rgba(223, 148, 44, 0.3);
  background: rgba(223, 148, 44, 0.1);
}

.license-status-card--warning > .material-symbols-outlined {
  background: var(--warning-soft);
  color: var(--warning);
}

.license-status-card--danger {
  border-color: rgba(213, 83, 83, 0.3);
  background: rgba(213, 83, 83, 0.09);
}

.license-status-card--danger > .material-symbols-outlined {
  background: var(--danger-soft);
  color: var(--danger);
}

.admin-shell .admin-two-panel.license-admin-panel {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.license-admin-panel .admin-card {
  min-width: 0;
}

.license-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.68rem;
  align-items: start;
}

.license-summary-card .section-heading {
  grid-column: 1 / -1;
}

.license-overview-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1.58fr);
  gap: 0.68rem;
  align-items: stretch;
}

.license-summary-card .license-status-card {
  align-self: stretch;
}

.license-summary-card .license-status-card--valid {
  border-color: var(--line);
  background: var(--surface-strong);
}

.license-settings-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.license-detail-list {
  display: grid;
  gap: 0.46rem;
  margin: 0;
}

.license-detail-list div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.52rem 0;
  border-top: 1px solid var(--line);
}

.license-detail-list dt {
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.license-detail-list dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.license-admin-panel .license-detail-list div {
  min-width: 0;
  grid-template-columns: 1fr;
  gap: 0.16rem;
  padding: 0.62rem 0.68rem;
  border-top: 0;
  background: var(--surface-strong);
}

.license-admin-panel .license-detail-list {
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

.license-admin-panel .license-detail-list dd {
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.22;
}

.license-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-self: center;
  margin: 0;
  padding: 0;
  border-top: 0;
}

.license-card-actions .ghost-button {
  min-width: min(100%, 12rem);
  justify-content: center;
}

.license-warning-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.72rem;
  padding: 0.72rem;
  border: 1px solid rgba(223, 148, 44, 0.3);
  border-radius: 10px;
  background: rgba(223, 148, 44, 0.1);
}

.license-warning-panel.hidden {
  display: none;
}

.license-warning-panel > .material-symbols-outlined {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 1.15rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.license-warning-panel div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.license-warning-panel strong {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.2;
}

.license-warning-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.license-warning-panel--danger {
  border-color: rgba(213, 83, 83, 0.3);
  background: rgba(213, 83, 83, 0.09);
}

.license-warning-panel--danger > .material-symbols-outlined {
  background: var(--danger-soft);
  color: var(--danger);
}

.license-email-status {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(11rem, auto);
  align-items: start;
  gap: 0.8rem;
  padding: 0.78rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
}

.license-email-status > .material-symbols-outlined {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--current-wash);
  color: var(--current);
  font-size: 1.15rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.license-email-status-copy {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
}

.license-email-status-copy > div {
  display: grid;
  gap: 0.06rem;
}

.license-email-status-copy small,
.license-email-actions small {
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}

.license-email-status-copy strong {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.2;
}

.license-email-status-copy > span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.license-email-reasons {
  display: grid;
  gap: 0.18rem;
  margin: 0.18rem 0 0;
  padding-left: 1rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.license-email-actions {
  display: grid;
  gap: 0.4rem;
  justify-items: end;
  min-width: 0;
}

.license-email-actions .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  min-width: min(100%, 9.2rem);
  white-space: nowrap;
}

.license-email-actions .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}

.license-email-actions small {
  max-width: 18rem;
  text-align: right;
  text-transform: none;
}

.license-email-test-message {
  grid-column: 1 / -1;
  min-height: 1.1rem;
  margin: -0.28rem 0 0;
}

.license-email-status--valid {
  border-color: rgba(44, 174, 89, 0.28);
  background: rgba(44, 174, 89, 0.08);
}

.license-email-status--valid > .material-symbols-outlined {
  background: var(--success-soft);
  color: var(--success);
}

.license-email-status--warning {
  border-color: rgba(223, 148, 44, 0.3);
  background: rgba(223, 148, 44, 0.1);
}

.license-email-status--warning > .material-symbols-outlined {
  background: var(--warning-soft);
  color: var(--warning);
}

.license-email-status--danger {
  border-color: rgba(213, 83, 83, 0.3);
  background: rgba(213, 83, 83, 0.09);
}

.license-email-status--danger > .material-symbols-outlined {
  background: var(--danger-soft);
  color: var(--danger);
}

.license-check-modal-panel {
  width: min(640px, 100%);
}

.license-check-result {
  margin-bottom: 0.85rem;
}

.license-check-detail-list {
  margin-top: 0;
}

.license-raw-response {
  margin-top: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--well);
  overflow: hidden;
}

.license-raw-response summary {
  cursor: pointer;
  padding: 0.72rem 0.84rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.license-raw-response pre {
  max-height: min(42vh, 340px);
  margin: 0;
  padding: 0.84rem;
  border-top: 1px solid var(--line);
  overflow: auto;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-shell .license-settings-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  max-width: none;
}

.admin-shell .license-settings-form .checkbox-label,
.admin-shell .license-settings-form button[type="submit"],
.admin-shell .license-settings-form .muted {
  justify-self: start;
}

.admin-shell .license-settings-form .checkbox-label {
  grid-column: 1 / -1;
  align-self: stretch;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.admin-shell .license-settings-form .checkbox-label span {
  display: grid;
  gap: 0.1rem;
}

.admin-shell .license-settings-form button[type="submit"] {
  grid-column: 1 / -1;
  min-width: min(100%, 15rem);
}

.admin-shell .license-settings-form .muted {
  grid-column: 1 / -1;
}

.admin-shell .team-grid,
.admin-shell .admin-entity-grid {
  gap: 0.45rem;
}

.maintenance-area-list {
  gap: 0.42rem;
}

.maintenance-area-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.48rem 0.8rem;
  align-items: center;
  min-width: 0;
  min-height: 3.1rem;
  padding: 0.54rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
}

.maintenance-area-row__main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem 0.52rem;
  align-items: center;
  min-width: 0;
}

.maintenance-area-row__main strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.maintenance-area-row .badge {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  max-width: max-content;
  margin: 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.maintenance-area-row > .small-button {
  justify-self: end;
  min-height: 2.05rem;
  white-space: nowrap;
}

.maintenance-area-row__note {
  justify-self: end;
  max-width: 16rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
}

.maintenance-area-empty {
  margin: 0;
  padding: 0.72rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.admin-shell .team-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.16rem 0.75rem;
  align-items: center;
  padding: 0.56rem 0.62rem;
  border-radius: 10px;
  background: var(--surface-strong);
}

.admin-shell .team-card strong,
.admin-shell .team-card > span:not(.badge),
.admin-shell .team-card .role-badge-list {
  grid-column: 1;
  min-width: 0;
}

.admin-shell .team-card strong {
  font-size: 0.92rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.admin-shell .team-card > span:not(.badge) {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.25;
}

.admin-shell .team-card .role-badge-list {
  margin: 0.25rem 0 0;
}

.admin-shell .team-card > button {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: end;
}

.admin-shell .room-camera-card {
  display: block;
  padding: 0;
  overflow: hidden;
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.admin-shell .room-camera-card > button {
  grid-column: auto;
  grid-row: auto;
}

.room-card-summary {
  display: grid;
  grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1.25fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.room-card-summary::-webkit-details-marker {
  display: none;
}

.room-card-summary:hover,
.room-card-summary:focus-visible,
.room-camera-card[open] > .room-card-summary {
  background: var(--surface-soft);
  box-shadow: inset 3px 0 0 var(--current);
  outline: none;
}

.room-card-main {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.room-card-name-line {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--ink);
}

.room-color-swatch {
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--room-choice-color) 76%, var(--ink));
  border-radius: 4px;
  background: var(--room-choice-color);
}

.room-card-main > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.25;
}

.room-card-main > .room-card-name-line {
  color: var(--ink);
  font-size: inherit;
}

.admin-shell .room-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  align-items: center;
  min-width: 0;
}

.admin-shell .room-card-facts > span {
  display: inline;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.admin-shell .room-card-facts > span + span::before {
  content: "·";
  margin-right: 0.45rem;
  color: var(--faint);
}

.admin-shell .room-card-chevron {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 1.25rem;
  transition: color 150ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.room-card-summary:hover .room-card-chevron,
.room-card-summary:focus-visible .room-card-chevron,
.room-camera-card[open] > .room-card-summary .room-card-chevron {
  color: var(--current-deep);
}

.room-camera-card[open] > .room-card-summary .room-card-chevron {
  transform: rotate(180deg);
}

.admin-shell .room-add-button {
  border-color: var(--current-border);
  background: var(--current-wash-strong);
  color: var(--current-deep);
}

.admin-shell .room-add-button:hover,
.admin-shell .room-add-button:focus-visible {
  border-color: var(--current);
  background: var(--current-wash);
  color: var(--current-deeper);
}

.room-camera-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.72rem;
  border-top: 1px solid var(--line);
}

.room-color-picker {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.room-color-picker legend {
  padding: 0 0.25rem;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
}

.room-color-picker > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.room-color-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.4rem;
}

.room-color-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control-bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 650;
}

.room-color-option:hover,
.room-color-option:focus-within {
  border-color: color-mix(in srgb, var(--room-choice-color) 62%, var(--line));
}

.room-color-option:has(input:checked) {
  border-color: var(--room-choice-color);
  background: color-mix(in srgb, var(--room-choice-color) 10%, var(--control-bg));
}

.admin-shell .admin-form .room-color-picker .room-color-option input[type="radio"] {
  flex: 0 0 auto;
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  min-height: 1rem;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  accent-color: var(--room-choice-color);
}

.room-thermostat-picker {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.room-thermostat-picker legend {
  padding: 0 0.25rem;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
}

.room-thermostat-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.room-thermostat-picker-head p,
.room-thermostat-picker-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.room-thermostat-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.45rem;
}

.room-thermostat-loading {
  grid-column: 1 / -1;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.8rem;
}

.room-thermostat-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  min-height: 3.2rem;
  padding: 0.55rem 0.62rem;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--control-bg);
  color: var(--ink);
  cursor: pointer;
}

.room-thermostat-option:hover,
.room-thermostat-option:focus-within {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.room-thermostat-option.is-stale {
  border-style: dashed;
}

.room-thermostat-option input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--current);
}

.room-thermostat-option > span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.room-thermostat-option strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.2;
}

.room-thermostat-option small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.preset-thermostat-overrides {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.preset-thermostat-overrides legend {
  padding: 0 0.25rem;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
}

.preset-thermostat-overrides-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.preset-thermostat-overrides-head p,
.preset-thermostat-overrides-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.preset-thermostat-override-rows {
  display: grid;
  gap: 0.7rem;
}

.preset-thermostat-override-group {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.preset-thermostat-override-group h4 {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.preset-thermostat-override-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.5rem 0.62rem;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--control-bg);
}

.preset-thermostat-override-row:focus-within {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.preset-thermostat-override-row.is-stale {
  border-style: dashed;
}

.preset-thermostat-override-name {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.preset-thermostat-override-name strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.2;
}

.preset-thermostat-override-name small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.preset-thermostat-override-fields {
  display: flex;
  align-items: end;
  gap: 0.5rem;
}

.preset-thermostat-override-fields label {
  margin: 0;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.preset-thermostat-override-fields [hidden] {
  display: none;
}

.preset-thermostat-override-fields select {
  min-width: 8.5rem;
  min-height: 44px;
}

.preset-thermostat-override-fields input[type="number"] {
  width: 6.5rem;
  min-height: 44px;
}

.preset-thermostat-default {
  align-self: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .preset-thermostat-override-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .preset-thermostat-override-fields select,
  .preset-thermostat-override-fields input[type="number"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .preset-thermostat-override-fields {
    flex-wrap: wrap;
  }

  .preset-thermostat-override-fields label {
    flex: 1 1 5rem;
    min-width: 0;
  }

  .preset-thermostat-override-fields label:first-child {
    flex-basis: 100%;
  }

  .preset-thermostat-override-fields input[type="number"],
  .preset-thermostat-override-fields select {
    width: 100%;
  }
}

.room-thermostat-empty,
.admin-empty-guidance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.65rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-strong);
}

.room-thermostat-empty > .material-symbols-outlined,
.admin-empty-guidance > .material-symbols-outlined {
  color: var(--current-deep);
}

.room-thermostat-empty > div,
.admin-empty-guidance > div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.room-thermostat-empty strong,
.admin-empty-guidance strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.room-thermostat-empty span:not(.material-symbols-outlined),
.admin-empty-guidance p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.admin-empty-guidance {
  min-height: 5.25rem;
}

@media (max-width: 640px) {
  .room-thermostat-picker-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .room-thermostat-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .room-thermostat-empty,
  .admin-empty-guidance {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .room-thermostat-empty > :last-child,
  .admin-empty-guidance > :last-child {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.room-camera-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.room-camera-form [data-room-camera-message] {
  grid-column: 1 / -1;
  margin: 0;
}

.temperature-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.68rem;
}

.temperature-preset-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
  padding: 0.76rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.temperature-preset-card-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.temperature-preset-card-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.temperature-preset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.stats-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stat-card {
  padding: 0.9rem 1rem;
}

.stat-card span {
  display: block;
  color: var(--muted);
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
}

.stat-card strong {
  font-size: 1.45rem;
}

.board-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 0.55rem;
  margin: 0;
}

.board-summary article {
  padding: 0.62rem 0.75rem;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.board-summary span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.board-summary strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.facilities-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  grid-template-areas: "main next";
  gap: 0.7rem;
  align-items: stretch;
  margin-bottom: 0.72rem;
}

.facilities-command-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.facilities-command-main h3 {
  margin: 0;
}

.facilities-command-main .command-subcopy {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.facilities-add-button {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
}

.facilities-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
  margin-bottom: 0.72rem;
}

.facilities-action-card {
  display: grid;
  gap: 0.58rem;
  min-width: 0;
  padding: 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.facilities-action-card--budget {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background:
    linear-gradient(135deg, var(--warning-soft), transparent 66%),
    var(--surface-soft);
}

.facilities-action-card--clear {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background:
    linear-gradient(135deg, var(--success-soft), transparent 66%),
    var(--surface-soft);
}

.facilities-action-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
}

.facilities-action-head > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 1.08rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.facilities-action-card--budget .facilities-action-head > .material-symbols-outlined {
  background: var(--warning-soft);
  color: var(--warning);
}

.facilities-action-card--clear .facilities-action-head > .material-symbols-outlined {
  background: var(--success-soft);
  color: var(--success);
}

.facilities-action-head div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.facilities-action-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.facilities-action-head span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
}

.facilities-action-list {
  display: grid;
  gap: 0.36rem;
}

.facilities-action-list > span {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
  padding: 0.44rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.facilities-action-list strong {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facilities-action-list small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.15;
}

.facilities-action-list .empty-state {
  margin: 0;
  padding: 0.5rem 0.55rem;
}

.facilities-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.58rem;
  align-items: center;
  min-width: 0;
  padding: 0.64rem 0.68rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 10px;
  background: var(--current-wash);
}

.facilities-next-panel > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 11px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 1.18rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.facilities-next-panel div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.facilities-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.facilities-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
}

.facilities-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.facilities-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.facilities-flow-step.is-active {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background:
    linear-gradient(90deg, var(--warning-soft), transparent 78%),
    var(--surface-soft);
}

.facilities-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.facilities-flow-step.is-active > .material-symbols-outlined {
  background: var(--warning-soft);
  color: var(--warning);
}

.facilities-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.facilities-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.facilities-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.board-toolbar {
  display: grid;
  justify-self: end;
  gap: 0.42rem;
  width: fit-content;
  max-width: 100%;
  margin: -0.18rem 0 0.5rem;
}

.board-toolbar summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  width: max-content;
  min-height: 2.1rem;
  max-width: 100%;
  padding: 0.4rem 0.52rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  cursor: pointer;
  list-style: none;
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.04);
}

.board-toolbar summary::-webkit-details-marker {
  display: none;
}

.board-toolbar[open] {
  width: min(470px, 100%);
}

.board-toolbar[open] summary {
  width: 100%;
  justify-content: space-between;
}

.board-toolbar-expand {
  display: grid;
  place-items: center;
  width: 1.38rem;
  height: 1.38rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.94rem;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.board-toolbar[open] .board-toolbar-expand {
  transform: rotate(180deg);
  background: var(--current-wash-strong);
  color: var(--accent);
}

.board-toolbar:not([open]) > :not(summary) {
  display: none;
}

.board-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.board-controls label {
  min-width: 150px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.board-controls select {
  min-height: 38px;
  padding: 0.48rem 2.5rem 0.48rem 0.7rem;
  border-radius: 10px;
  text-transform: none;
}

.board-toolbar-title {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.board-toolbar-title .material-symbols-outlined {
  color: var(--accent);
  font-size: 0.96rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.card {
  padding: 1rem;
  min-width: 0;
}

.workspace-card {
  box-shadow: none;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.table-shell {
  overflow-x: auto;
}

.audit-tool {
  display: grid;
  gap: 0.75rem;
}

.audit-heading {
  margin-bottom: 0;
}

.audit-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.audit-summary-strip article {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-strong);
}

.audit-summary-strip span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.audit-summary-strip strong {
  color: var(--ink);
  font-size: clamp(1.18rem, 2.1vw, 1.6rem);
  line-height: 1;
}

.audit-summary-emergency strong {
  color: var(--warning);
}

.audit-filter-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) repeat(3, minmax(112px, 0.7fr)) minmax(170px, 0.9fr) minmax(130px, 0.45fr);
  gap: 0.5rem;
  align-items: end;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.audit-filter-form label {
  min-width: 0;
  gap: 0.28rem;
  color: var(--ink-secondary);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.audit-filter-form input:not([type="checkbox"]),
.audit-filter-form select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border-radius: 9px;
  background-color: var(--surface);
  font-size: 0.84rem;
  letter-spacing: 0;
}

.audit-search-field {
  grid-column: span 2;
}

.audit-date-field--to {
  grid-column: 1 / 2;
}

.audit-toggle-field {
  display: grid;
  grid-column: 2 / 5;
  gap: 0.28rem;
  min-width: 0;
}

.audit-filter-label {
  color: var(--ink-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.audit-emergency-toggle {
  min-height: 44px;
  padding: 0.42rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  text-transform: none;
  letter-spacing: 0;
}

.audit-filter-form .audit-emergency-toggle {
  color: var(--ink-secondary);
  letter-spacing: 0;
  text-transform: none;
}

.audit-emergency-toggle span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.audit-emergency-toggle strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.audit-emergency-toggle small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}

.audit-filter-actions {
  display: flex;
  align-items: center;
  align-self: end;
  grid-column: 5 / -1;
  justify-content: flex-end;
  min-height: 44px;
  min-width: max-content;
}

.audit-filter-actions button {
  min-height: 42px;
  padding-inline: 0.94rem;
}

.audit-log-list {
  display: grid;
  gap: 0.48rem;
}

.audit-log-entry {
  display: grid;
  gap: 0.56rem;
  min-width: 0;
  padding: 0.7rem 0.78rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-strong);
}

.audit-log-entry--success {
  border-left-color: var(--success);
}

.audit-log-entry--info {
  border-left-color: var(--current-deep);
}

.audit-log-entry--danger {
  border-left-color: var(--danger);
}

.audit-log-entry--emergency {
  border-left-color: var(--warning);
  background:
    linear-gradient(90deg, var(--warning-soft), rgba(255, 255, 255, 0) 48%),
    var(--surface-strong);
}

.audit-log-entry-main {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  min-width: 0;
}

.audit-log-copy {
  min-width: 0;
}

.audit-log-entry time {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.audit-log-entry strong {
  display: block;
  margin-top: 0.16rem;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.audit-action-badge {
  flex: 0 0 auto;
}

.audit-action-badge--success {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--success);
}

.audit-action-badge--info {
  background: var(--current-wash);
  border-color: transparent;
  color: var(--current-deep);
}

.audit-action-badge--danger {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
}

.audit-action-badge--emergency {
  background: var(--warning-soft);
  border-color: transparent;
  color: var(--warning);
}

.audit-log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.audit-log-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.audit-log-meta b {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.audit-log-details {
  display: grid;
  gap: 0.52rem;
  padding-top: 0.1rem;
}

.audit-details-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 40px;
  padding: 0.34rem 0.68rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.32rem;
  list-style: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}

.audit-details-button::-webkit-details-marker {
  display: none;
}

.audit-details-button:hover,
.audit-details-button:focus-visible {
  border-color: var(--current-border);
  background: var(--current-wash);
  color: var(--current-deep);
  outline: none;
}

.audit-details-button:active {
  transform: scale(0.98);
}

.audit-details-button .material-symbols-outlined {
  font-size: 1.05rem;
}

.audit-log-details[open] > .audit-details-button {
  border-color: var(--current-border);
  background: var(--current-wash);
  color: var(--current-deep);
}

.audit-detail-panel {
  display: grid;
  gap: 0.58rem;
  min-width: 0;
  padding: 0.62rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-soft);
}

.audit-detail-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}

.audit-detail-call span,
.audit-raw-call > summary {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.audit-detail-call code {
  min-width: 0;
  padding: 0.24rem 0.42rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.audit-state-table {
  width: 100%;
  table-layout: fixed;
  border: 1px solid var(--line-soft);
  border-collapse: separate;
  border-radius: 10px;
  border-spacing: 0;
  background: var(--surface);
  overflow: hidden;
}

.audit-state-table th,
.audit-state-table td {
  padding: 0.5rem 0.56rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-secondary);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: top;
}

.audit-state-table thead th {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.audit-state-table tbody th {
  color: var(--ink);
  font-weight: 700;
}

.audit-state-table tr:last-child th,
.audit-state-table tr:last-child td {
  border-bottom: 0;
}

.audit-detail-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.audit-raw-call {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
}

.audit-raw-call > summary {
  min-height: 38px;
  padding: 0.52rem 0.58rem;
  cursor: pointer;
  list-style-position: inside;
}

.audit-raw-call pre {
  margin: 0;
  max-height: 260px;
  padding: 0.62rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-secondary);
  font-size: 0.76rem;
  line-height: 1.45;
  overflow: auto;
  white-space: pre-wrap;
}

.audit-empty-state {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  min-height: 180px;
  padding: 1.4rem;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-strong);
  text-align: center;
}

.audit-empty-state .material-symbols-outlined {
  color: var(--muted);
  font-size: 2rem;
}

.audit-empty-state strong {
  color: var(--ink);
}

@media (max-width: 1180px) {
  .audit-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .audit-search-field,
  .audit-toggle-field {
    grid-column: span 2;
  }

  .audit-date-field--to {
    grid-column: auto;
  }

  .audit-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .audit-summary-strip,
  .audit-filter-form {
    grid-template-columns: 1fr;
  }

  .audit-search-field,
  .audit-toggle-field,
  .audit-filter-actions {
    grid-column: auto;
  }

  .audit-filter-actions {
    justify-content: flex-start;
  }

  .audit-log-entry-main {
    flex-direction: column;
    gap: 0.45rem;
  }

  .audit-action-badge {
    align-self: flex-start;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table-subcopy {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.24rem 0.6rem;
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  color: var(--ink-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-pending {
  background: var(--warning-soft);
  border-color: transparent;
  color: var(--warning);
}

.status-in_progress {
  background: var(--current-wash-strong);
  border-color: transparent;
  color: var(--accent);
}

.status-completed {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--success);
}

.priority-high {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
}

.priority-medium {
  background: var(--warning-soft);
  border-color: transparent;
  color: var(--warning);
}

.priority-low {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--success);
}

.event-list,
.team-grid {
  display: grid;
  gap: 1rem;
}

.venue-event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.venue-event-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.68rem;
  align-items: stretch;
  min-height: 4.25rem;
  padding: 0.62rem;
  border-radius: 11px;
}

.venue-event-card h4,
.venue-event-card p,
.venue-event-card span {
  margin: 0;
}

.venue-event-card--next {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.venue-event-date {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 4.2rem;
  min-height: 3.6rem;
  padding: 0.34rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: center;
}

.venue-event-date span,
.venue-event-date small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.venue-event-date strong {
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
}

.venue-event-main {
  display: grid;
  align-content: center;
  gap: 0.22rem;
  min-width: 0;
}

.venue-event-card h4 {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.venue-event-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.65rem;
}

.venue-event-details span {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

.venue-event-details .material-symbols-outlined {
  color: var(--accent);
  font-size: 0.9rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.venue-event-card span,
.venue-event-card p,
.venue-event-meta {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.venue-event-meta {
  display: grid;
  align-content: center;
  gap: 0.28rem;
  justify-items: end;
  text-align: right;
  white-space: nowrap;
}

.venue-next-label {
  border-color: var(--current-border);
  background: var(--current-wash-strong);
  color: var(--accent);
}

.calendar-roster-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(420px, 1fr);
  gap: 1.5rem;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.admin-two-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: 1rem;
  align-items: start;
}

.budget-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.budget-tier-editor {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.admin-shell .budget-tier-grid {
  gap: 0.6rem;
}

.admin-shell .budget-tier-card {
  gap: 0.55rem;
  padding: 0.72rem;
  border-radius: 11px;
}

.admin-shell .budget-tier-card button {
  white-space: nowrap;
}

.admin-shell .budget-tier-card .eyebrow {
  margin-bottom: 0.18rem;
}

.admin-stack {
  display: grid;
  gap: 1rem;
}

.card-panel {
  margin-top: 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  padding: 0.9rem;
}

.event-card,
.team-card {
  padding: 0.85rem;
  border-radius: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

.event-card--selectable {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.event-card--selectable:hover,
.event-card--selectable:focus-visible {
  border-color: var(--current-border);
  background: var(--current-wash);
  outline: none;
  transform: translateY(-1px);
}

.event-card-affordance {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.24rem;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.event-card-affordance .material-symbols-outlined {
  color: currentColor;
  font-size: 0.92rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.event-card h4,
.event-card p {
  margin: 0;
}

/* External events keep one readable blue identity across both themes. */
.calendar-external-tag,
.vc-bar.is-offsite,
.vc-event.is-offsite {
  --venue-event-bg: #285e89;
  --venue-event-ink: #ffffff;
  --venue-event-muted-ink: #e0edf7;
}

.calendar-external-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  width: fit-content;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: var(--venue-event-bg);
  color: var(--venue-event-ink);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}

.calendar-external-tag .material-symbols-outlined {
  font-size: 0.88rem;
}

.calendar-detail-card.is-holiday .calendar-day-icon {
  color: var(--current-deep);
}

.calendar-detail-card.is-leave-vacation,
.venue-cal-legend-key.is-leave-vacation,
.vc-bar.is-leave-vacation {
  --calendar-leave-bg: color-mix(in srgb, var(--current-wash) 78%, var(--surface-strong));
  --calendar-leave-border: var(--current-border);
  --calendar-leave-ink: var(--current-deep);
}

.calendar-detail-card.is-leave-sick,
.venue-cal-legend-key.is-leave-sick,
.vc-bar.is-leave-sick {
  --calendar-leave-bg: color-mix(in srgb, var(--info-soft) 82%, var(--surface-strong));
  --calendar-leave-border: color-mix(in srgb, var(--info) 38%, transparent);
  --calendar-leave-ink: var(--info);
}

.calendar-detail-card.is-leave .calendar-day-icon {
  color: var(--calendar-leave-ink);
}

.calendar-leave-badge {
  display: inline-flex;
  gap: 0.28rem;
  align-items: center;
  width: fit-content;
  padding: 0.18rem 0.42rem;
  border: 1px solid var(--calendar-leave-border);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--calendar-leave-ink);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.calendar-leave-badge .material-symbols-outlined {
  font-size: 0.78rem;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
}

.calendar-detail-card.is-leave .calendar-detail-facts .material-symbols-outlined {
  color: var(--calendar-leave-ink);
}

.calendar-detail-main h4 {
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
}

.calendar-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--ink-secondary);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.calendar-detail-facts > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.calendar-detail-facts > span > .material-symbols-outlined {
  color: var(--muted);
  font-size: 16px;
}

.calendar-detail-note {
  margin: 0;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}

.team-card strong {
  display: block;
}

.event-time {
  color: var(--accent);
  margin: 0 0 0.25rem;
}

.team-card span {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
}

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

.task-workflow-form {
  grid-template-columns: 1fr;
  gap: 0.72rem;
}

.task-form-section {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  min-width: 0;
  padding: 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.task-workflow-form .task-form-section {
  grid-template-columns: minmax(0, 1fr);
}

.task-form-step {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.task-form-section-body {
  display: grid;
  gap: 0.58rem;
  min-width: 0;
}

.task-form-section-heading {
  display: grid;
  gap: 0.1rem;
}

.task-form-section-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.1;
}

.task-form-section-heading span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
}

.task-form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
  gap: 0.52rem;
}

.task-form-fields > label {
  min-width: 0;
}

.task-form-fields--request {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-form-fields input,
.task-form-fields textarea,
.task-form-fields select {
  width: 100%;
  box-sizing: border-box;
}

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

.event-time-fields input[type="datetime-local"] {
  min-width: 0;
  max-width: 100%;
}

.event-series-scope {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.event-series-scope[hidden] {
  display: none;
}

.event-series-scope legend {
  margin-bottom: 0.45rem;
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.event-series-scope-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}

.event-series-scope-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.58rem;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0.62rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--well);
  cursor: pointer;
}

.event-series-scope-option input {
  width: auto;
  margin: 0.18rem 0 0;
  accent-color: var(--current);
}

.event-series-scope-option span {
  display: grid;
  gap: 0.16rem;
}

.event-series-scope-option strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.2;
}

.event-series-scope-option small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
}

.event-series-scope-option input:checked + span strong {
  color: var(--current-deep);
}

.event-room-checklist {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#event-access-form[hidden],
[data-event-access-edit-note][hidden],
[data-event-access-request-section][hidden],
[data-event-access-request-fields][hidden],
[data-event-access-retry][hidden],
[data-event-access-recover][hidden],
[data-event-access-queued][hidden],
[data-building-access-pagination][hidden] {
  display: none;
}

#event-access-form:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

#event-access-request-fields:not([hidden]) {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.event-access-panel {
  max-width: 560px;
}

.event-access-panel > .section-heading {
  flex-direction: row;
  align-items: center;
}

.event-access-panel > .section-heading > button {
  min-height: 44px;
  flex-shrink: 0;
}

.event-access-feedback {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

[data-event-access-status] {
  margin: 0;
  block-size: 4.5em;
  overflow: auto;
  scrollbar-gutter: stable;
  overflow-wrap: anywhere;
  font-size: .875rem;
  line-height: 1.5;
}

.event-access-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-block-size: 44px;
}

.event-access-recovery-actions:not(:has(button:not([hidden]))) {
  display: none;
}

.event-access-recovery-actions button {
  min-height: 44px;
}

[data-copy-event-access] {
  min-inline-size: 8rem;
}

#permanent-access-form:not(.form-sheet-form),
.permanent-access-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

#permanent-access-form:not(.form-sheet-form) {
  gap: 16px;
}

.permanent-access-fields {
  gap: 8px;
}

.permanent-access-scope {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.5;
}

.permanent-access-panel input,
.permanent-access-panel button {
  min-height: 44px;
}

.permanent-access-fields .field-hint,
[data-permanent-access-status] {
  margin: 0;
}

[data-permanent-access-status]:empty {
  display: none;
}

.event-access-results {
  display: grid;
  gap: 16px;
}

.event-access-result {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--surface-soft);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.event-access-result h4,
.event-access-result p {
  margin: 0;
}

.event-access-pin-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.event-access-pin {
  font-family: ui-monospace, monospace;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--ink);
  user-select: all;
}

.event-access-result > button {
  justify-self: start;
  min-height: 44px;
}

.event-access-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 4px 0;
  color: var(--ink);
}

.event-access-details > div {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.event-access-details dd,
.event-access-details .field-hint {
  margin: 0;
}

.event-access-window {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.event-access-window .cell-sub {
  color: var(--muted);
}

.event-access-result-heading,
.event-access-actions,
.building-access-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.event-access-result-heading {
  justify-content: space-between;
}

.event-access-actions button {
  min-height: 44px;
}

.event-access-actions:not(:has(button)) {
  display: none;
}

.event-access-once-note {
  padding-left: 12px;
  border-left: 3px solid var(--current-border);
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.5;
}

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

#event-access-modal [hidden] {
  display: none !important;
}

.access-activity-latest {
  display: grid;
  gap: 4px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.access-activity-latest > strong {
  font-size: 1rem;
  line-height: 1.5;
}

.access-activity-latest > span:not(.field-hint),
.access-activity-latest > small {
  font-size: 0.82rem;
}

.access-record-tabs {
  margin: 16px 0;
  width: fit-content;
  max-width: 100%;
}

.access-record-tabs button,
.access-activity-toolbar select,
.access-activity-toolbar button,
.access-activity-more {
  min-height: 44px;
}

.access-activity-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.access-activity-panel > p {
  margin: 0;
  line-height: 1.5;
}

.access-activity-panel > p:empty {
  display: none;
}

.access-activity-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.access-activity-toolbar label {
  display: grid;
  gap: 8px;
  flex: 1 1 180px;
  margin: 0;
}

.access-activity-notice.is-incomplete {
  padding-left: 12px;
  border-left: 3px solid var(--current-border);
  color: var(--ink);
}

#event-access-modal .access-activity-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 4px 0;
}

#event-access-modal .access-activity-stats .stat-cell {
  min-width: 0;
  padding: 12px;
}

#event-access-modal .access-activity-stats .stat-label {
  white-space: normal;
}

.access-activity-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.access-activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 12px;
  padding: 12px;
  border-radius: 4px;
  background: var(--surface-soft);
  overflow-wrap: anywhere;
}

.access-activity-item > div {
  display: grid;
  gap: 4px;
}

.access-activity-item time {
  color: var(--muted);
  font-size: 0.82rem;
}

.access-activity-item > p {
  grid-column: 1 / -1;
  margin: 0;
}

.access-activity-more {
  justify-self: center;
}

.building-access-workspace > p {
  margin: 0;
}

[data-building-access-message]:empty {
  display: none;
}

.building-access-table .building-access-window {
  max-width: 360px;
  white-space: normal;
}

.building-access-tabs {
  justify-self: start;
  max-width: 100%;
}

.building-access-tabs .seg-tab {
  min-height: 44px;
}

.building-access-row-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.building-access-row-actions button {
  min-height: 44px;
}

.building-access-pagination {
  justify-content: flex-end;
}

.building-access-empty {
  padding: 48px 16px;
  text-align: center;
}

.building-access-empty > .material-symbols-outlined {
  color: var(--muted);
  font-size: 32px;
}

.building-access-empty h3 {
  margin: 12px 0 8px;
}

.building-access-empty p {
  margin: 0;
}

@media (max-width: 700px) {
  .building-access-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .building-access-table,
  .building-access-table tbody {
    display: block;
    min-width: 0;
  }

  .building-access-table.data-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 16px 12px;
    border-bottom: 1px solid var(--line);
  }

  .building-access-table.data-table tbody tr:nth-child(n) td {
    padding: 0;
    border: 0;
    background: transparent;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .building-access-table.data-table td.col-shrink {
    width: auto;
  }

  .building-access-table td:nth-child(-n+3) {
    grid-column: 1 / -1;
  }

  .building-access-table .building-access-window {
    max-width: none;
    font-size: 0.82rem;
  }

  .building-access-table td:last-child {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

.event-climate-summary {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.event-climate-summary-line {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
}

.event-room-checklist legend {
  margin: 0 0 0.42rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.event-room-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.42rem;
}

.event-room-option {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-height: 2.35rem;
  padding: 0.48rem 0.62rem;
  color: var(--ink);
  font-weight: 650;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.event-room-option input {
  width: auto;
  min-width: 1rem;
  accent-color: var(--current);
}

.event-room-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-room-option-copy {
  display: grid;
  gap: 0.1rem;
}

.event-room-option-copy strong {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.2;
}

.event-room-option-copy small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 550;
  line-height: 1.25;
}

.event-room-retired-option {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--warning) 38%, var(--line));
  background: color-mix(in srgb, var(--warning-soft) 58%, var(--surface));
}

.event-temperature-preset-field,
.event-thermostat-prep-field {
  grid-column: 1 / -1;
}

.event-temperature-preset-field .field-hint a {
  color: var(--current-deep);
  font-weight: 700;
}

.event-thermostat-prep-field select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.event-room-setup-prompt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin: 0.85rem 0;
  padding: 0.9rem;
  border: 1px solid var(--current-border);
  border-radius: 8px;
  background: var(--current-wash);
}

.event-room-setup-prompt[hidden],
.event-workflow-form[hidden] {
  display: none;
}

.event-room-setup-prompt > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--current-deep);
}

.event-room-setup-prompt h4,
.event-room-setup-prompt p {
  margin: 0;
}

.event-room-setup-prompt h4 {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
}

.event-room-setup-prompt p {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.event-room-setup-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.event-setup-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  border-radius: 6px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
}

@media (max-width: 640px) {
  .event-time-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-room-setup-prompt {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-room-setup-actions {
    grid-column: 1;
  }

  .venue-readiness-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

.task-description-field {
  grid-column: 1 / -1;
}

.task-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  min-height: 3.5rem;
}

.task-form-actions > button {
  flex: 0 0 auto;
  margin-left: auto;
}

.task-form-actions p {
  order: -1;
  flex: 1 1 16rem;
  margin: 0;
  min-width: 0;
  text-align: left;
}

.task-form-actions p:empty {
  display: none;
}

.modal-panel .task-workflow-form .task-form-actions {
  margin: 0;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

@media (max-width: 640px) {
  .task-form-fields--request {
    grid-template-columns: 1fr;
  }
}

.availability-form {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(280px, 1fr) minmax(230px, 0.8fr);
  gap: 0.68rem;
  align-items: stretch;
}

.availability-form-section {
  min-width: 0;
  padding: 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.availability-form-section--identity,
.availability-form-section--time {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.availability-form-section--identity > div,
.availability-form-section--time > div {
  display: grid;
  gap: 0.56rem;
  min-width: 0;
}

.availability-step-label {
  display: inline-grid;
  place-items: center;
  width: 1.58rem;
  height: 1.58rem;
  border-radius: 999px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.availability-days {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.68rem;
}

.availability-days legend {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.availability-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.34rem;
}

.availability-day-grid .checkbox-label {
  justify-content: center;
  min-height: 34px;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  font-size: 0.72rem;
}

.availability-toggle {
  align-self: end;
  padding: 0.42rem 0.48rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.availability-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.admin-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.78rem;
}

.checkbox-label {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 38px;
}

.checkbox-label input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
}

.admin-entity-grid,
.venue-grid {
  display: grid;
  gap: 0.45rem;
}

.full-span {
  grid-column: 1 / -1;
}

.task-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.venue-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.72rem;
  align-items: start;
}

.venue-workspace--empty {
  grid-template-columns: minmax(0, 1fr);
}

.venue-readiness {
  grid-column: 1 / -1;
  border: 1px solid var(--current-border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.venue-readiness > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.65rem 0.75rem;
  list-style: none;
  cursor: pointer;
}

.venue-readiness > summary::-webkit-details-marker {
  display: none;
}

.venue-readiness-mark {
  color: var(--current-deep);
}

.venue-readiness-summary-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.venue-readiness-summary-copy strong {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.2;
}

.venue-readiness-summary-copy small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.venue-readiness-chevron {
  color: var(--muted);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.venue-readiness[open] .venue-readiness-chevron {
  transform: rotate(180deg);
}

.venue-readiness-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.45rem;
  padding: 0 0.65rem 0.65rem;
}

.venue-readiness-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-height: 3.65rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-strong);
}

.venue-readiness-step.is-current {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.venue-readiness-step > .material-symbols-outlined {
  color: var(--muted);
  font-size: 1.15rem;
}

.venue-readiness-step.is-complete > .material-symbols-outlined {
  color: var(--success);
}

.venue-readiness-step > div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.venue-readiness-step strong {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.2;
}

.venue-readiness-step small,
.venue-readiness-step em {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  line-height: 1.3;
}

.venue-readiness-step > .ghost-button,
.venue-readiness-step > em {
  grid-column: 2;
  justify-self: start;
}

.venue-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  grid-template-areas: "main next";
  gap: 0.72rem;
  align-items: stretch;
  grid-column: 1 / -1;
  padding: 0.86rem;
}

.venue-command-card--empty {
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.6fr);
}

.venue-command-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.venue-command-card--empty .venue-command-main {
  grid-template-columns: minmax(0, 1fr);
}

.venue-command-main h3 {
  margin: 0;
}

.venue-command-main .command-subcopy {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.venue-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.56rem;
  align-items: center;
  min-width: 0;
  padding: 0.58rem 0.66rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 10px;
  background: var(--surface-soft);
}

.venue-next-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 1.12rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.venue-next-panel div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.venue-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.venue-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.venue-next-panel .ghost-button {
  justify-self: end;
  white-space: nowrap;
}

.venue-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.venue-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.venue-flow-step.is-active {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.venue-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.venue-flow-step.is-active > .material-symbols-outlined {
  background: var(--current-wash-strong);
  color: var(--accent);
}

.venue-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.venue-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.venue-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.venue-events-card {
  align-self: start;
}

.venue-later-events {
  margin-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.venue-later-events__summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.1rem 0.2rem;
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  user-select: none;
}

.venue-later-events__summary::-webkit-details-marker {
  display: none;
}

.venue-later-events__summary:hover {
  color: var(--ink);
}

.venue-later-events__chevron {
  font-size: 1.15rem;
  transition: transform 0.15s ease;
}

.venue-later-events[open] .venue-later-events__chevron {
  transform: rotate(90deg);
}

.venue-later-events[open] .venue-later-events__summary {
  color: var(--ink);
}

.venue-layout-card {
  display: grid;
  gap: 0.66rem;
  padding: 1.1rem 1.2rem;
  align-content: start;
}

.venue-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-height: 3rem;
  padding: 0.52rem 0.58rem;
  border-radius: 10px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  text-align: left;
  width: 100%;
  color: var(--ink);
}

.venue-card-icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 1.05rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.venue-card div {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

.venue-card strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.venue-card div > span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.venue-card--interactive {
  cursor: pointer;
}

.venue-card--interactive:hover {
  border-color: var(--current-border);
  background: color-mix(in srgb, var(--current) 5%, transparent);
}

.task-summary-card {
  padding: 0.9rem;
  border-radius: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

.task-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.task-meta span {
  display: inline-flex;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.82rem;
}

.task-meta-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.7rem 0 0;
}

.task-meta-list div {
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.task-meta-list dt {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
}

.task-meta-list dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.task-meta-note {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.role-fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.58rem;
}

.role-fieldset legend {
  padding: 0 0.35rem;
  color: var(--muted);
  font-weight: 700;
}

.role-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

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

.permission-editor {
  display: grid;
  gap: 0.5rem;
}

.permission-admin-block {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft));
}

.permission-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.permission-admin-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  align-self: stretch;
  gap: 0.42rem;
  padding: 0.5rem;
  cursor: pointer;
}

.permission-admin-choice > input {
  margin-top: 0.12rem;
}

.permission-admin-choice > span {
  display: grid;
  gap: 0.08rem;
}

.permission-admin-choice strong,
.permission-admin-choice small {
  line-height: 1.2;
}

.permission-admin-choice strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.permission-admin-choice small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.permission-admin-choice:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.68;
}

.permission-admin-disclosure {
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: 0.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.permission-admin-disclosure:hover,
.permission-admin-disclosure:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink);
}

.permission-admin-disclosure .material-symbols-outlined {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.permission-admin-disclosure[aria-expanded="true"] .material-symbols-outlined {
  transform: rotate(180deg);
}

.permission-admin-children {
  padding: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}

.permission-admin-children[hidden] {
  display: none;
}

.permission-standard-grid:empty {
  display: none;
}

.password-setup-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}

.password-setup-options .role-choice {
  height: 100%;
}

.password-manual-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.62rem;
  margin-top: 0.62rem;
  padding-top: 0.62rem;
  border-top: 1px solid var(--line);
}

.password-manual-fields[hidden],
.password-manual-panel[hidden] {
  display: none;
}

.role-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.42rem;
  min-height: 0;
  padding: 0.42rem 0.48rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.role-choice--admin-child {
  border-left-color: color-mix(in srgb, var(--accent) 58%, var(--line));
}

.role-choice:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.68;
}

.role-fieldset__access-note {
  margin: 0.55rem 0 0.1rem;
}

.role-choice input {
  margin-top: 0.12rem;
}

.role-choice span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.role-choice strong {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.1;
}

.role-choice small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
}

@media (max-width: 720px) {
  .role-checkbox-grid--compact {
    grid-template-columns: 1fr;
  }

}

.user-access-editor {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.user-access-editor > summary {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.58rem 0.72rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.user-access-editor > summary::-webkit-details-marker {
  display: none;
}

.user-access-editor > summary > span:first-child {
  display: grid;
  gap: 0.04rem;
}

.user-access-editor > summary small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
}

.user-access-editor > summary > .material-symbols-outlined {
  color: var(--muted);
  transition: transform 160ms ease;
}

.user-access-editor[open] > summary > .material-symbols-outlined {
  transform: rotate(180deg);
}

.access-ledger {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.access-ledger > span {
  padding: 0.24rem 0.42rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.access-ledger b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.user-access-editor__body {
  display: grid;
  gap: 0.55rem;
  padding: 0 0.72rem 0.72rem;
  border-top: 1px solid var(--line);
}

.access-source-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding-top: 0.58rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
}

.access-source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

@media (max-width: 720px) {
  .user-access-editor > summary {
    grid-template-columns: 1fr auto;
  }

  .access-ledger {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

.role-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0 0.9rem;
}

/* Keep account status aligned for singular, plural, and two-digit counts. */
.role-badge-list [data-user-card-role-count] {
  min-inline-size: 16ch;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.user-role-form,
.user-profile-form,
.user-password-form,
.user-edit-form {
  display: grid;
  gap: 0.62rem;
  margin-top: 0.85rem;
}

.user-edit-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.user-edit-form > label {
  align-content: start;
  gap: .5rem;
  min-width: 0;
}

.user-edit-form > label > input,
.user-edit-form > label > select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
}

.user-profile-form,
.user-password-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.user-profile-form p,
.user-password-form p,
.user-edit-form .full-span {
  grid-column: 1 / -1;
}

.user-edit-identity-panel {
  gap: 0.62rem;
}

.user-phone-field .field-hint {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.status-dot {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--muted);
}

.status-dot--success {
  background: var(--success);
}

.status-dot--warning {
  background: var(--warning);
}

.user-edit-identity-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  align-items: center;
  gap: 0.75rem;
}

.user-account-status-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.52rem 0.62rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.user-account-status-control:hover {
  border-color: var(--current-border);
  background: var(--surface-strong);
}

.user-account-status-control:focus-within {
  border-color: var(--current);
  box-shadow: 0 0 0 3px var(--current-wash-strong);
}

.user-account-status-control > input[type="checkbox"] {
  appearance: auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--primary);
}

.user-account-status-control > span {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

.user-account-status-control strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.15;
}

.user-account-status-control small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.25;
  text-transform: none;
}

@media (max-width: 720px) {
  .user-edit-identity-band {
    grid-template-columns: minmax(0, 1fr);
  }
}

.account-access-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.42rem;
}

.password-manual-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.62rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.password-manual-panel-copy,
.password-manual-panel > .modal-actions,
.password-manual-panel > .muted {
  grid-column: 1 / -1;
}

.password-manual-panel-copy {
  display: grid;
  gap: 0.12rem;
}

.password-manual-panel-copy strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.password-manual-panel-copy span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.4;
}

.role-popover {
  position: fixed;
  top: 5.6rem;
  right: 2rem;
  z-index: var(--z-popover);
  width: min(420px, calc(100vw - 2rem));
  max-height: var(--role-popover-max-height, calc(100vh - 7rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.1rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.role-popover.hidden {
  display: none;
}

.role-popover-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.notification-preferences-form {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.notification-preferences-form > div {
  display: grid;
  gap: 0.08rem;
}

.notification-preferences-form > div span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
}

.preference-select {
  display: grid;
  gap: 0.28rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.preference-select select {
  width: 100%;
  min-height: 36px;
  padding: 0.5rem 2.5rem 0.5rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background-color: var(--surface-strong);
  color: var(--ink);
  font: inherit;
}

.notification-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.38rem;
  padding: 0.38rem 0.44rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.notification-choice input {
  margin-top: 0.08rem;
}

.notification-choice span {
  display: grid;
  gap: 0.04rem;
}

.notification-choice strong {
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.1;
}

.notification-choice small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.22;
  text-transform: none;
}

.notification-preferences-form button {
  justify-self: start;
}

.popover-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.popover-action-form {
  flex: 1 1 10rem;
  min-width: 0;
  margin: 0;
}

.role-popover .theme-menu-button {
  margin-right: 0;
}

.role-popover .popover-actions .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 10rem;
  min-width: 0;
  min-height: 46px;
  width: 100%;
  padding: 0.7rem 0.92rem;
  gap: 0.5rem;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.whats-new-menu-button .material-symbols-outlined {
  font-size: 1.1rem;
}

.whats-new-modal-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(720px, 100%);
  max-height: min(760px, calc(100dvh - 3rem));
  overflow: hidden;
}

.section-heading.whats-new-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
}

.whats-new-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
  color: var(--current-deep);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.whats-new-kicker .material-symbols-outlined {
  font-size: 1rem;
}

.release-notes-stack {
  display: grid;
  gap: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.35rem;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.release-notes-stack:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.release-notes-panel {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.release-notes-panel--current {
  border-color: var(--current-border);
  border-left: 3px solid var(--current);
  background: color-mix(in srgb, var(--current-wash) 48%, var(--surface));
}

.release-notes-panel--history {
  background: var(--surface-soft);
}

.release-notes-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.release-notes-panel-head > div {
  display: grid;
  gap: 0.15rem;
}

.release-notes-panel-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.25;
  text-wrap: balance;
}

.release-notes-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.28rem 0.55rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}

.release-notes-meta code {
  color: var(--ink-secondary);
  font: inherit;
}

.release-notes-label {
  color: var(--current-deep);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.release-notes-panel--history .release-notes-label {
  color: var(--muted);
}

.release-notes-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.15rem;
  color: var(--ink-secondary);
  line-height: 1.45;
}

.release-notes-list li {
  padding-left: 0.2rem;
  text-wrap: pretty;
}

.release-notes-list li::marker {
  color: var(--current-deep);
}

.release-notes-panel--history .release-notes-list li::marker {
  color: var(--muted);
}

.release-name-ledger {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.release-name-ledger li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}

.release-name-ledger li:first-child {
  border-top: 0;
}

.release-name-ledger__identity {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.release-name-ledger__identity strong {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 750;
}

.release-name-ledger__current {
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  background: var(--current-wash);
  color: var(--current-deep);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}

.release-name-ledger time {
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}

.release-name-history__origin {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.release-notes-empty {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  text-wrap: pretty;
}

.release-notes-empty--history {
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

@media (max-width: 640px) {
  .release-notes-panel-head {
    display: grid;
  }

  .release-notes-meta {
    justify-content: flex-start;
    white-space: normal;
  }

  .release-name-ledger li {
    align-items: flex-start;
  }
}

.role-popover .popover-action-form {
  display: flex;
}

.role-popover .theme-menu-button .theme-toggle__icon {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  line-height: 1;
}

.role-modal-panel {
  width: min(720px, 100%);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.calendar-shell {
  display: grid;
  gap: 0.7rem;
}

.calendar-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 0.72rem;
  align-items: start;
}

.calendar-workspace--empty {
  grid-template-columns: minmax(0, 1fr);
}

.calendar-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  grid-template-areas: "main next";
  gap: 0.72rem;
  align-items: stretch;
  grid-column: 1 / -1;
  padding: 0.86rem;
}

.calendar-command-card--empty {
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.6fr);
}

.calendar-command-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.calendar-command-main h3 {
  margin: 0;
}

.calendar-command-main .command-subcopy {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.calendar-command-action {
  display: flex;
  justify-content: flex-end;
}

.calendar-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.56rem;
  align-items: center;
  min-width: 0;
  padding: 0.58rem 0.66rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 10px;
  background: var(--surface-soft);
}

.calendar-next-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--current-wash-strong);
  color: var(--accent);
  font-size: 1.12rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.calendar-next-panel div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.calendar-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.calendar-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.calendar-next-panel .ghost-button {
  align-self: center;
  justify-self: end;
}

.calendar-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.calendar-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.calendar-flow-step.is-active {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.calendar-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.calendar-flow-step.is-active > .material-symbols-outlined {
  background: var(--current-wash-strong);
  color: var(--accent);
}

.calendar-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.calendar-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.calendar-card .calendar-shell {
  max-width: 100%;
}

.calendar-month-card {
  align-self: start;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

.calendar-weekdays span {
  padding: 0 0.42rem;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.calendar-day {
  min-height: 56px;
  padding: 0.42rem 0.5rem;
  border-radius: 9px;
  border: none;
  background: var(--well);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
}

.calendar-day:hover,
.calendar-day--active {
  background: var(--current-wash-strong);
}

.calendar-day--muted {
  opacity: 0.55;
}

.calendar-day-number {
  font-size: 0.98rem;
  font-weight: 700;
}

.calendar-day-marker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.calendar-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--current);
  box-shadow: none;
}

.calendar-count {
  color: var(--muted);
  font-size: 0.72rem;
}

/* Venue room-booking calendar (Outlook-style month view) */
.venue-calendar-card {
  --venue-cal-panel: #fffdf9;
  --venue-cal-surface: #fffaf4;
  --venue-cal-inset: #f7efe6;
  --venue-cal-line: rgba(35, 28, 62, 0.12);
  --venue-cal-line-soft: rgba(35, 28, 62, 0.075);
  --venue-cal-line-strong: rgba(35, 28, 62, 0.2);
  --venue-cal-text: var(--ink);
  --venue-cal-muted: var(--muted);
  --venue-event-bg: #a54230;
  --venue-event-ink: #ffffff;
  --venue-event-muted-ink: #f7dfdb;
  --venue-room-fallback: #82798a;
  --venue-room-divider: rgba(18, 14, 22, 0.82);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 1.15rem 1.15rem;
  background: var(--venue-cal-panel);
  border: 1px solid var(--venue-cal-line);
}

[data-theme="dark"] .venue-calendar-card {
  --venue-cal-panel: #201a2b;
  --venue-cal-surface: #30283e;
  --venue-cal-inset: #16111f;
  --venue-cal-line: rgba(247, 243, 250, 0.18);
  --venue-cal-line-soft: rgba(247, 243, 250, 0.1);
  --venue-cal-line-strong: rgba(247, 243, 250, 0.3);
  --venue-cal-text: #f4f0f7;
  --venue-cal-muted: #c1b7ca;
  --venue-event-bg: #a54230;
  --venue-event-ink: #ffffff;
  --venue-event-muted-ink: #f7dfdb;
  --venue-room-fallback: #c8c1d1;
  --venue-room-divider: rgba(5, 4, 6, 0.88);
}


.venue-calendar-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.venue-calendar-nav .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.5rem;
}

.venue-calendar-nav .ghost-button {
  border: 1px solid var(--venue-cal-line);
  background: var(--venue-cal-surface);
  color: var(--venue-cal-text);
}

.venue-calendar-nav .ghost-button:hover,
.venue-calendar-nav .ghost-button:focus-visible {
  border-color: color-mix(in srgb, var(--current) 45%, var(--venue-cal-line));
  background: color-mix(in srgb, var(--venue-cal-surface) 86%, var(--current-wash));
  color: var(--venue-cal-text);
}

.venue-calendar-nav .icon-button .material-symbols-outlined {
  font-size: 1.2rem;
}

.venue-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.venue-calendar-legend[hidden] {
  display: none;
}

.venue-cal-legend-item {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border: 0;
  border-radius: 999px;
  background: var(--room-color);
  color: var(--room-ink);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--room-ink) 16%, transparent);
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
}

.venue-cal-legend-item:hover,
.venue-cal-legend-item:focus-visible {
  transform: translateY(-1px);
}

.venue-cal-legend-item.is-active {
  box-shadow: inset 0 0 0 2px var(--room-ink), inset 0 -3px 0 color-mix(in srgb, var(--room-ink) 22%, transparent);
}

.venue-cal-legend-key {
  display: inline-flex;
  gap: 0.32rem;
  align-items: center;
  padding: 0.3rem 0.58rem;
  border: 1px solid var(--calendar-leave-border);
  border-radius: 999px;
  background: var(--calendar-leave-bg);
  color: var(--calendar-leave-ink);
  box-shadow: inset 3px 0 0 var(--calendar-leave-ink);
  font-size: 0.72rem;
  font-weight: 750;
}

.venue-cal-legend-key .material-symbols-outlined {
  font-size: 0.88rem;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
}

.venue-calendar-scroll {
  overflow-x: auto;
}

.venue-calendar-weekdays,
.venue-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
  min-width: 680px;
}

.venue-calendar-weekdays {
  margin-bottom: 0.4rem;
}

.venue-calendar-weekdays span {
  padding: 0 0.3rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.venue-cal-day {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem 0.42rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.venue-cal-day.is-muted {
  opacity: 0.5;
}

.venue-cal-day.is-today {
  border-color: var(--current);
  box-shadow: inset 0 0 0 1px var(--current);
}

.venue-cal-day.is-clickable {
  cursor: pointer;
}

.venue-cal-day.is-clickable:hover {
  border-color: color-mix(in srgb, var(--current) 45%, var(--line));
}

.venue-cal-daynum {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}

.venue-cal-day-body {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.venue-cal-chip {
  display: block;
  min-width: 0;
  padding: 0.18rem 0.4rem;
  border-left: 3px solid var(--room-solid, var(--muted));
  border-radius: 4px;
  background: var(--room-soft, var(--well));
  line-height: 1.2;
}

.venue-cal-chip-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.venue-cal-chip-sub {
  display: block;
  font-size: 0.66rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.venue-cal-more {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--current);
}

/* Venue calendar — view switcher */
.venue-calendar-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.venue-calendar-add {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

.venue-calendar-add .material-symbols-outlined {
  font-size: 1rem;
}

.venue-events-card .section-block-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.venue-events-card .section-block-head > div:first-child {
  display: grid;
  gap: 0.1rem;
}

.venue-event-tabs .seg-tab {
  min-height: 44px;
  text-decoration: none;
}

.venue-calendar-viewswitch {
  display: inline-flex;
  padding: 0.15rem;
  gap: 0.15rem;
  border: 1px solid var(--venue-cal-line);
  border-radius: 999px;
  background: var(--venue-cal-inset);
}

.venue-cal-viewbtn {
  border: none;
  background: transparent;
  color: var(--venue-cal-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}

.venue-cal-viewbtn.is-active {
  background: var(--venue-cal-surface);
  color: var(--venue-cal-text);
  box-shadow: 0 0 0 1px var(--venue-cal-line-soft), 0 1px 2px rgba(35, 28, 62, 0.08);
}

.venue-calendar-zoom {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.venue-calendar-zoom[hidden] {
  display: none;
}

.venue-calendar-zoom-label {
  color: var(--venue-cal-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.venue-calendar-zoom-options {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--venue-cal-line);
  border-radius: var(--radius-sm);
  background: var(--venue-cal-inset);
}

.venue-cal-zoombtn {
  min-height: 32px;
  padding: 0.25rem 0.52rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--venue-cal-muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.venue-cal-zoombtn:hover,
.venue-cal-zoombtn:focus-visible,
.venue-cal-zoombtn.is-active {
  background: var(--venue-cal-surface);
  color: var(--venue-cal-text);
}

.venue-cal-zoombtn.is-active {
  box-shadow: 0 0 0 1px var(--venue-cal-line-soft);
}

/* Venue calendar — month view (spanning bars) */
.venue-calendar-body {
  overflow-x: auto;
  background: var(--venue-cal-inset);
  border: 1px solid var(--venue-cal-line);
  border-radius: var(--radius);
  padding: 0.65rem;
}

.vc-month {
  --vc-day-gap: 0.3rem;
  --vc-bar-top: 26px;
  --vc-bar-step: 22px;
  min-width: 680px;
}

.vc-month.is-loading .vc-mday {
  cursor: default;
}

.vc-month.is-loading .vc-mday:hover {
  border-color: var(--venue-cal-line);
}

.vc-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 0.25rem;
}

.vc-month-weekdays span {
  padding: 0 0.4rem;
  color: var(--venue-cal-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vc-mweek {
  position: relative;
}

.vc-mweek-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}

.vc-mday {
  position: relative;
  min-height: 108px;
  padding: 0.32rem 0.4rem;
  border: 1px solid var(--venue-cal-line);
  border-radius: var(--radius-sm);
  background: var(--venue-cal-surface);
  cursor: pointer;
}

.vc-mday.is-muted { opacity: 0.5; }
.vc-mday.is-today { border-color: var(--current); box-shadow: inset 0 0 0 1px var(--current); }
.vc-mday:hover { border-color: color-mix(in srgb, var(--current) 45%, var(--venue-cal-line)); }

.vc-mday-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--venue-cal-text);
}

.vc-mday-more {
  position: absolute;
  left: 0.4rem;
  bottom: 0.3rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--current);
}

.vc-mday-count {
  display: none;
}

.vc-mweek-bars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vc-bar {
  position: absolute;
  height: 20px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.45rem;
  border: 0;
  border-radius: 4px;
  background: var(--venue-event-bg);
  color: var(--venue-event-ink);
  box-shadow: none;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  overflow: hidden;
  white-space: nowrap;
}

.vc-bar.continues-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.vc-bar.continues-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.vc-bar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vc-bar.is-holiday {
  border: 1px solid var(--current-border);
  background: var(--current-wash-strong);
  color: var(--current-deep);
}

.vc-bar.is-holiday::before {
  content: "";
  flex: 0 0 auto;
  width: 0.34rem;
  height: 0.34rem;
  margin-right: 0.3rem;
  border-radius: 999px;
  background: var(--current);
}

.vc-bar.is-holiday.is-actual:not(.is-observed) {
  border-style: dashed;
  background: var(--surface-soft);
  color: var(--muted);
}

.vc-bar.is-leave {
  padding-left: 0.34rem;
  border: 1px solid var(--calendar-leave-border);
  background: var(--calendar-leave-bg);
  color: var(--calendar-leave-ink);
  box-shadow: inset 3px 0 0 var(--calendar-leave-ink);
  font-weight: 700;
}

.vc-bar-kind-icon {
  flex: 0 0 auto;
  margin-right: 0.24rem;
  font-size: 0.78rem;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
}

@media (max-width: 680px) {
  .venue-calendar-card {
    min-width: 0;
    gap: 0.65rem;
    padding: 0.7rem;
  }

  .venue-calendar-head,
  .venue-calendar-controls {
    width: 100%;
    min-width: 0;
  }

  .venue-calendar-head {
    align-items: stretch;
  }

  .venue-calendar-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .venue-calendar-add,
  .venue-calendar-viewswitch,
  .venue-calendar-nav,
  .venue-calendar-zoom {
    width: 100%;
  }

  .venue-calendar-add {
    justify-content: center;
    min-height: 44px;
  }

  .venue-calendar-viewswitch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .venue-calendar-nav {
    justify-content: space-between;
  }

  .venue-calendar-body {
    padding: 0.35rem;
    overflow-x: auto;
  }

  .vc-month {
    min-width: 0;
  }

  .vc-month-weekdays span {
    padding: 0;
    text-align: center;
    font-size: 0.6rem;
  }

  .vc-mweek-days {
    gap: 0.14rem;
    margin-bottom: 0.14rem;
  }

  .vc-mday {
    min-height: 58px;
    padding: 0.24rem;
    text-align: center;
  }

  .vc-mday-num {
    font-size: 0.72rem;
  }

  .vc-mweek-bars,
  .vc-mday-more {
    display: none;
  }

  .vc-mday-count {
    position: absolute;
    left: 50%;
    bottom: 0.35rem;
    display: inline-grid;
    min-width: 1.35rem;
    height: 1.35rem;
    padding-inline: 0.25rem;
    place-items: center;
    border-radius: 999px;
    background: var(--current-wash-strong);
    color: var(--current-deep);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    transform: translateX(-50%);
  }
}

/* Venue calendar — week / day time grid */
.vc-time {
  min-width: 920px;
  background: var(--venue-cal-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.vc-time.is-day { min-width: 360px; }

.vc-time-head {
  display: grid;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--venue-cal-surface);
}

.vc-time-corner { border-bottom: 1px solid var(--venue-cal-line); }

.vc-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.35rem 0;
  border-left: 1px solid var(--venue-cal-line);
  border-bottom: 1px solid var(--venue-cal-line);
  background: var(--venue-cal-surface);
}

.vc-dayhead-dow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--venue-cal-muted);
}

.vc-dayhead-num { font-size: 1rem; font-weight: 700; color: var(--venue-cal-text); }
.vc-dayhead.is-today .vc-dayhead-num {
  color: #fff;
  background: var(--current);
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.vc-allday {
  display: grid;
  border-bottom: 1px solid var(--venue-cal-line);
  min-height: 26px;
  background: var(--venue-cal-surface);
}

.vc-allday-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--venue-cal-muted);
  padding: 0.3rem 0.4rem;
  align-self: center;
}

.vc-allday-lanes { position: relative; }
.vc-allday-lanes .vc-bar { height: 24px; }

.vc-time-scroll {
  max-height: 560px;
  overflow-y: auto;
  background: var(--venue-cal-surface);
}

.vc-time-grid { display: grid; position: relative; }

.vc-time-gutter {
  position: relative;
  background: var(--venue-cal-inset);
  border-right: 1px solid var(--venue-cal-line);
}

.vc-hour-label,
.vc-slot-label {
  position: absolute;
  right: 0.4rem;
  transform: translateY(-45%);
  color: var(--venue-cal-muted);
  font-size: 0.54rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.vc-slot-label.is-hour {
  color: var(--venue-cal-text);
  font-size: 0.66rem;
  font-weight: 600;
}

.vc-time-cols { display: grid; position: relative; }

.vc-daycol {
  position: relative;
  border-left: 1px solid var(--venue-cal-line);
  background: var(--venue-cal-surface);
}

/* Days outside the month the server sent. Rendering them like ordinary empty days
   made real bookings look like free time. */
.vc-daycol--unloaded {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    var(--venue-cal-line) 6px,
    var(--venue-cal-line) 7px
  );
  opacity: 0.55;
}

.vc-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--venue-cal-line);
  opacity: 0.6;
}

.vc-slot-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--venue-cal-line-soft);
}

.vc-slot-line.is-half {
  border-top-color: color-mix(in srgb, var(--venue-cal-line) 70%, transparent);
}

.vc-slot-line.is-hour {
  border-top-color: var(--venue-cal-line-strong);
}

.vc-nowline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px solid var(--current);
  z-index: 3;
}

.vc-nowline::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--current);
}

.vc-event {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  box-sizing: border-box;
  padding: 0.2rem 0.4rem;
  border: 0;
  border-radius: 4px;
  padding-bottom: 0.38rem;
  background: var(--venue-event-bg);
  color: var(--venue-event-ink);
  box-shadow: none;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
}

.vc-bar:hover,
.vc-event:hover {
  background: var(--venue-event-bg);
  outline: 2px solid color-mix(in srgb, var(--venue-event-ink) 90%, transparent);
  outline-offset: -2px;
  box-shadow: none;
  filter: none;
}

.vc-bar:focus-visible,
.vc-event:focus-visible {
  background: var(--venue-event-bg);
  outline: 2px solid var(--venue-event-ink);
  outline-offset: -2px;
  box-shadow: 0 0 0 2px var(--current);
}

.vc-bar.is-leave:hover,
.vc-bar.is-leave:focus-visible {
  background: var(--calendar-leave-bg);
  color: var(--calendar-leave-ink);
  outline-color: var(--calendar-leave-ink);
  box-shadow: inset 3px 0 0 var(--calendar-leave-ink);
}

.vc-event-time { font-size: 0.64rem; color: var(--venue-event-muted-ink); }
.vc-event-title { font-size: 0.72rem; font-weight: 700; color: var(--venue-event-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vc-room-strip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: 4px;
  overflow: hidden;
}

.vc-room-strip-segment {
  flex: 1 1 0;
  min-width: 0;
  background: var(--room-segment);
}

.vc-room-strip-segment + .vc-room-strip-segment {
  border-left: 1px solid var(--venue-room-divider);
}

.vc-time .vc-room-strip {
  height: 8px;
  box-shadow: 0 -1px 0 var(--venue-room-divider);
}

.vc-time .vc-event {
  padding-bottom: 0.7rem;
}

.vc-time .vc-bar {
  padding-bottom: 0.42rem;
}

.vc-time[data-time-zoom="60"] .vc-event {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.28rem;
  padding-top: 0.18rem;
}

/* Add Event — recurrence controls */
.event-recurrence-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.event-recurrence-options[hidden] {
  display: none;
}

.event-recurrence-interval__row > input {
  flex: 0 0 96px;
  width: 96px;
}

.event-recurrence-weekday-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.event-recurrence-weekday-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.74rem;
  cursor: pointer;
}

.event-recurrence-end {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.event-recurrence-end input { width: 8rem; }

/* Guards so the [hidden] attribute wins over the global label/fieldset display rules */
#event-form [data-event-building-control][hidden],
.event-recurrence-weekdays[hidden],
[data-recurrence-month-ordinals][hidden],
[data-recurrence-count-field][hidden],
[data-recurrence-until-field][hidden] {
  display: none;
}

/* Day-detail modal — delete actions */
.calendar-detail-empty {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  padding: 0.75rem 0;
}

.calendar-detail-empty p {
  margin: 0;
}

.calendar-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Room double-booking (overlap) warnings */
.venue-conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.05rem 0.42rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  vertical-align: middle;
  background: color-mix(in srgb, #e0a83a 22%, transparent);
  color: #8a5300;
  cursor: help;
}

.venue-conflict-badge .material-symbols-outlined {
  font-size: 0.85rem;
}

[data-theme="dark"] .venue-conflict-badge {
  color: #ffd18a;
}

.calendar-detail-conflict {
  display: flex;
  gap: 8px;
}

.calendar-detail-conflict > .material-symbols-outlined {
  color: #c07a00;
  flex-shrink: 0;
}

[data-theme="dark"] .calendar-detail-conflict > .material-symbols-outlined {
  color: #ffd18a;
}

.calendar-detail-conflict strong {
  font-size: 0.85rem;
}

.calendar-detail-conflict p {
  margin: 0.2rem 0;
  font-size: 0.78rem;
}

.calendar-detail-conflict small {
  color: var(--muted);
  font-size: 0.72rem;
}

.event-form-warning {
  color: #8a5300;
  font-weight: 600;
}

[data-theme="dark"] .event-form-warning {
  color: #ffd18a;
}

.calendar-agenda-card {
  align-self: start;
}

.calendar-agenda-list {
  display: grid;
  gap: 0.5rem;
}

.calendar-agenda-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.62rem;
  align-items: stretch;
  min-height: 3.7rem;
  padding: 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
}

.calendar-agenda-row .ghost-button,
.calendar-agenda-row .event-card-affordance {
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}

.calendar-agenda-date {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 3.35rem;
  min-height: 3rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  text-align: center;
}

.calendar-agenda-date span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-agenda-date strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
}

.calendar-agenda-main {
  display: grid;
  align-content: center;
  gap: 0.18rem;
  min-width: 0;
}

.calendar-agenda-row strong {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.calendar-agenda-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem 0.58rem;
}

.calendar-agenda-details span {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.calendar-agenda-details .material-symbols-outlined {
  color: var(--accent);
  font-size: 0.86rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.calendar-agenda-row span:not(.badge),
.calendar-agenda-details {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.venue-event-card .event-card-affordance,
.calendar-agenda-row .event-card-affordance {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
}

.venue-event-card .event-card-affordance .material-symbols-outlined,
.calendar-agenda-row .event-card-affordance .material-symbols-outlined {
  color: currentColor;
  font-size: 0.92rem;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 21, 0.45);
  backdrop-filter: blur(8px);
}

.modal-panel {
  position: relative;
  z-index: var(--z-layer);
  width: min(860px, 100%);
  max-height: calc(100vh - 3rem);
  overflow: auto;
  padding: 1rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.modal-panel--wide {
  width: min(1260px, 100%);
}

body.has-app-dialog {
  overflow: hidden;
}

.app-dialog-modal {
  padding: clamp(1rem, 4vw, 2rem);
}

.app-dialog-backdrop {
  background: color-mix(in srgb, var(--ink) 42%, transparent);
}

.app-dialog-panel {
  display: grid;
  width: min(480px, 100%);
  gap: 1.25rem;
  padding: clamp(1.15rem, 3vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  box-shadow: var(--shadow-raised);
  scrollbar-gutter: stable;
}

.app-dialog-heading {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.app-dialog-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: var(--radius);
  background: var(--current-wash);
  color: var(--current-deep);
  font-size: 1.35rem;
  font-variation-settings: "FILL" 0, "wght" 550, "GRAD" 0, "opsz" 24;
}

.app-dialog-modal[data-tone="danger"] .app-dialog-icon {
  background: var(--danger-soft);
  color: var(--danger);
}

.app-dialog-copy {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
}

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

.app-dialog-copy h2 {
  color: var(--ink);
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  line-height: 1.25;
}

.app-dialog-copy p {
  color: var(--ink-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}

.app-dialog-field {
  display: grid;
  gap: 0.45rem;
}

.app-dialog-field[hidden] {
  display: none;
}

.app-dialog-field > span {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 750;
}

.app-dialog-field textarea {
  width: 100%;
  min-height: 7rem;
  resize: vertical;
}

.app-dialog-actions {
  justify-content: flex-end;
}

.app-dialog-actions button {
  min-height: 44px;
}

@media (max-width: 520px) {
  .app-dialog-panel {
    gap: 1rem;
  }

  .app-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-dialog-actions button {
    width: 100%;
  }

  .app-dialog-confirm {
    grid-row: 1;
  }
}

.modal-panel,
.tab-nav,
.table-shell,
.audit-log-table,
.kanban-board-shell {
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

/* Reserve the scrollbar gutter on modal panels so the content width stays constant
   whether or not the vertical scrollbar is present. Without this, the first
   interaction that makes the panel scroll pops in a space-taking scrollbar, the
   content box narrows, and width-sensitive layouts inside (e.g. the event form's
   auto-fit room grid) reflow and shove everything below down once. */
.modal-panel {
  scrollbar-gutter: stable;
}

@supports (overflow: overlay) {
  .modal-panel {
    overflow: overlay;
  }

  .tab-nav,
  .table-shell,
  .audit-log-table,
  .kanban-board-shell {
    overflow-x: overlay;
  }
}

.modal-panel::-webkit-scrollbar,
.app-shell .dashboard-grid > .tab-panel::-webkit-scrollbar,
.tab-nav::-webkit-scrollbar,
.table-shell::-webkit-scrollbar,
.audit-log-table::-webkit-scrollbar,
.kanban-board-shell::-webkit-scrollbar {
  width: var(--scrollbar-overlap);
  height: var(--scrollbar-overlap);
}

.modal-panel::-webkit-scrollbar-track,
.app-shell .dashboard-grid > .tab-panel::-webkit-scrollbar-track,
.tab-nav::-webkit-scrollbar-track,
.table-shell::-webkit-scrollbar-track,
.audit-log-table::-webkit-scrollbar-track,
.kanban-board-shell::-webkit-scrollbar-track {
  background: transparent;
}

.modal-panel::-webkit-scrollbar-thumb,
.app-shell .dashboard-grid > .tab-panel::-webkit-scrollbar-thumb,
.tab-nav::-webkit-scrollbar-thumb,
.table-shell::-webkit-scrollbar-thumb,
.audit-log-table::-webkit-scrollbar-thumb,
.kanban-board-shell::-webkit-scrollbar-thumb {
  border: 0.18rem solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

.tab-nav {
  scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.kanban-board-shell {
  --kanban-scrollbar-overlap: var(--scrollbar-overlap);
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: calc(var(--kanban-scrollbar-overlap) * -1);
  padding-bottom: var(--kanban-scrollbar-overlap);
  overscroll-behavior-inline: contain;
}

.kanban-board-shell::-webkit-scrollbar {
  height: 0.55rem;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  min-width: 720px;
}

/* A column is one bordered list: tinted header with the count, rows split by hairlines. */
.kanban-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 160px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 0;
}

.kanban-column--active {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--current),
    inset 0 0 0 6px var(--current-wash-strong);
}

.kanban-column--blocked {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger-soft);
}

.kanban-column-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.kanban-column-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.kanban-column-head h3::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
}

.kanban-column[data-drop-status="in_progress"] .kanban-column-head h3::before {
  background: var(--current);
}

.kanban-column[data-drop-status="completed"] .kanban-column-head h3::before {
  background: var(--success);
}

.kanban-column-count {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kanban-column-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kanban-column-empty {
  margin: 0;
  padding: 12px;
  color: var(--muted);
  font-size: 0.875rem;
}

.kanban-group {
  display: flex;
  flex-direction: column;
}

.kanban-group + .kanban-group,
.kanban-card + .kanban-group {
  border-top: 1px solid var(--line);
}

.kanban-group-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.kanban-group-heading strong {
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A card is a compact row: status mark, bold title over one meta line, cost, grip;
   an approval meter takes its own line under the text. */
.kanban-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon text grip"
    ". meter meter";
  column-gap: 10px;
  align-items: start;
  min-height: 48px;
  padding: 9px 8px 9px 12px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.45;
  cursor: pointer;
}

.kanban-card + .kanban-card {
  border-top: 1px solid var(--line);
}

.kanban-card:hover {
  background: var(--color-bg-hover);
  box-shadow: none;
}

.kanban-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.kanban-card-icon {
  grid-area: icon;
  margin-top: 1px;
}

.kanban-card-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kanban-card-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.kanban-card-meta {
  color: var(--muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.kanban-card-cost {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kanban-card-photo-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: -2px;
  white-space: nowrap;
}

.kanban-card-photo-count .material-symbols-outlined {
  font-size: 15px;
}

.kanban-card-approval {
  grid-area: meter;
  display: block;
  min-width: 0;
  margin-top: 4px;
}

/* No room for the full 272px meter in a column: bars plus the summary on one line. */
.kanban-card-approval .sh-meter {
  width: auto;
  max-width: 100%;
  gap: 8px;
}

.kanban-card-approval .sh-meter__bars {
  flex: 0 0 auto;
}

.kanban-card-approval .sh-meter__text {
  min-height: 0;
}

.kanban-card-approval .sh-meter__detail {
  display: none;
}

.kanban-card--draggable {
  cursor: pointer;
}

.kanban-card [data-card-content] {
  cursor: text;
}

.kanban-card [data-card-content] {
  user-select: text;
}

.kanban-drag-handle {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  cursor: grab;
  box-shadow: none;
  touch-action: none;
}

.kanban-drag-handle:hover,
.kanban-drag-handle:focus-visible {
  border-color: var(--current-border);
  background: var(--current-wash);
  color: var(--accent);
  transform: none;
}

.kanban-drag-handle:active {
  cursor: grabbing;
}

.kanban-drag-handle .material-symbols-outlined {
  font-size: 1.15rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.kanban-card--dragging {
  opacity: 0.25;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.kanban-drag-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-drag-preview);
  pointer-events: none;
  opacity: 0.98;
  cursor: grabbing;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--current-border);
  transform-origin: center;
  transition: none !important;
  will-change: transform;
}

.kanban-drag-preview [data-card-content] {
  cursor: grabbing;
  user-select: none;
}

.board-message {
  position: fixed;
  right: 2rem;
  bottom: var(--app-feedback-bottom, max(1rem, calc(env(safe-area-inset-bottom) + 1rem)));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: min(420px, calc(100vw - 2rem));
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow);
}

.board-message[hidden] {
  display: none;
}

.board-message[data-tone="error"] {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.board-message[data-tone="info"] {
  border-color: var(--current-border);
}

.board-message button {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.board-message button:hover {
  background: transparent;
  color: var(--ink);
  transform: none;
}

.small-button {
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .login-card,
  .topbar,
  .section-heading {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-row,
  .tab-nav,
  .task-form,
  .operations-workspace,
  .operations-hero,
  .operations-workflow-grid,
  .operations-support-grid,
  .operations-queue-row,
  .task-summary-grid,
  .venue-workspace,
  .venue-command-card,
  .venue-grid,
  .venue-event-grid,
  .venue-flow-steps,
  .calendar-workspace,
  .calendar-command-card,
  .calendar-flow-steps,
  .budget-tier-grid,
  .facilities-command-card,
  .facilities-action-grid,
  .facilities-flow-steps,
  .purchase-command-card,
  .purchase-workspace,
  .purchase-flow-steps,
  .purchase-summary-grid,
  .objectives-command-card,
  .objectives-flow-steps,
  .objectives-plan-grid,
  .objectives-results-grid,
  .department-budget-list article,
  .approval-step-row,
  .approval-command-card,
  .approval-flow-steps,
  .approval-workspace,
  .approval-section-grid,
  .approval-context-grid,
  .approval-detail-row,
  .calendar-roster-grid,
  .admin-grid,
  .admin-two-panel,
  .board-toolbar,
  .kanban-board {
    grid-template-columns: 1fr;
  }

  .board-toolbar .board-controls {
    justify-content: flex-start;
  }

  .kanban-board {
    width: 100%;
    min-width: 0;
  }

  .kanban-column {
    min-height: 8.5rem;
  }

  .board-toolbar-title {
    width: 100%;
  }

  .board-controls label {
    flex: 1 1 150px;
    min-width: 0;
  }

  .thermostat-control-heading,
  .thermostat-actions {
    width: 100%;
  }

  .thermostat-actions {
    justify-content: flex-start;
  }

  .thermostat-summary-strip,
  .thermostat-readouts,
  .thermostat-mode-form,
  .thermostat-hold-form {
    grid-template-columns: 1fr;
  }

  .thermostat-facts div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .operations-next-action {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .operations-next-action .ghost-button {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

  .workflow-entry-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .workflow-entry-status {
    grid-column: 2;
    justify-self: flex-start;
  }

  .workflow-entry-card .ghost-button {
    grid-column: 2;
    justify-self: flex-start;
  }

  .operations-queue-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.48rem;
    padding: 0.54rem 0.58rem;
  }

  .operations-queue-list {
    grid-template-columns: 1fr;
  }

  .operations-queue-main .eyebrow {
    display: none;
  }

  .operations-queue-row .ghost-button {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

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

  .operations-metric-grid article {
    padding: 0.58rem 0.62rem;
  }

  .objectives-command-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .objectives-command-actions {
    justify-content: flex-start;
  }

  .objectives-flow-steps {
    display: none;
  }

  .objectives-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .objectives-command-card--setup {
    grid-template-areas:
      "main"
      "next"
      "sequence";
  }

  .objectives-start-main,
  .objectives-start-sequence {
    grid-template-columns: 1fr;
  }

  .objectives-start-main .small-button {
    justify-self: flex-start;
  }

  .calendar-command-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .calendar-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .calendar-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .calendar-next-panel .ghost-button {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

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

  .calendar-command-action {
    justify-content: flex-start;
  }

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

  .key-result-progress strong {
    text-align: left;
  }

  .staff-command-main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0;
  }

  .staff-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .staff-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .staff-next-panel .ghost-button {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

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

  .staff-flow-steps {
    display: none;
  }

  .staff-open-list {
    max-height: 20rem;
  }

  .staff-open-list--priority,
  .staff-open-list--secondary {
    grid-template-columns: 1fr;
  }

  .staff-open-group {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .staff-open-group-action {
    grid-column: 2;
    justify-self: flex-start;
  }

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

  .venue-command-main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0;
  }

  .venue-command-card--empty .venue-command-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .venue-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .venue-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .venue-next-panel .ghost-button {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

  .venue-card,
  .venue-event-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .venue-card > .badge,
  .venue-event-meta {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .venue-event-meta {
    display: flex;
    flex-wrap: wrap;
    justify-items: start;
  }

  .calendar-command-main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0;
  }

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

  .calendar-agenda-row > .badge {
    grid-column: 2;
    justify-self: start;
  }

  .facilities-command-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0;
  }

  .facilities-command-main .facilities-add-button {
    justify-self: flex-start;
    padding: 0.48rem 0.62rem;
  }

  .facilities-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .facilities-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

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

  .purchase-command-main {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .purchase-command-card {
    grid-template-areas:
      "main"
      "next"
      "stats";
  }

  .purchase-command-card--empty {
    grid-template-areas:
      "main"
      "next";
  }

  .purchase-command-tools {
    justify-content: flex-start;
  }

  .purchase-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .purchase-next-panel .ghost-button {
    grid-column: 2;
    justify-self: flex-start;
  }

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

  .purchase-command-strip > span:nth-child(odd) {
    border-left: 0;
  }

  .purchase-command-strip > span:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

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

  .purchase-empty-action-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .purchase-empty-action-card button {
    grid-column: 2;
    justify-self: flex-start;
  }

  .purchase-flow-steps {
    display: none;
  }

  .purchase-request-list-head {
    display: none;
  }

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

  .purchase-summary-grid.purchase-summary-strip article {
    padding: 0.48rem 0.42rem;
  }

  .purchase-summary-grid.purchase-summary-strip span {
    font-size: 0.62rem;
  }

  .purchase-summary-grid.purchase-summary-strip strong {
    font-size: 0.85rem;
  }

  .purchase-form-summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .purchase-form-summary > .badge {
    display: none;
  }

  .purchase-form-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.48rem;
  }

  .purchase-step-number {
    width: 1.45rem;
    height: 1.45rem;
  }

  .approval-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .approval-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .approval-next-panel .approval-open-total {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

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

  .approval-open-total {
    min-width: 4rem;
    padding: 0.44rem 0.52rem;
  }

  .approval-open-total strong {
    font-size: 1rem;
  }

  .approval-record {
    padding: 0.72rem;
  }

  .approval-record-top,
  .approval-decision-panel,
  .approval-record--purchase .approval-decision-context,
  .approval-route-grid,
  .approval-detail-row--panels {
    grid-template-columns: 1fr;
  }

  .approval-decision-panel {
    justify-self: stretch;
  }

  .approval-cost-box {
    min-width: 0;
    text-align: left;
  }

  .approval-decision-panel .approval-actions {
    justify-content: flex-start;
  }

  .approval-budget-strip {
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 0.28rem;
    padding: 0.45rem 0.5rem;
  }

  .approval-budget-strip--decision {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .approval-budget-strip span,
  .approval-budget-strip strong {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .approval-item--decision .approval-detail-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .approval-item--decision .approval-detail-row .approval-context-details[open],
  .approval-item--decision .approval-detail-row .approval-note-details[open] {
    grid-column: 1 / -1;
  }

  .approval-item--decision .approval-detail-row summary {
    justify-self: stretch;
    justify-content: center;
  }

  .approval-item,
  .approval-item--decision,
  .approval-item--compact {
    grid-template-columns: 1fr;
  }

  .approval-item--decision .approval-context-details,
  .approval-item--decision .approval-note-details,
  .approval-item--decision .approval-actions,
  .approval-item--compact .approval-actions,
  .approval-item--compact .approval-detail-row,
  .approval-item--decision .approval-note-details ~ .approval-actions,
  .approval-item--decision .approval-context-details ~ .approval-actions {
    grid-column: 1;
    align-self: auto;
    justify-self: stretch;
  }

  .approval-actions {
    justify-content: flex-start;
  }

  .brand-logo {
    max-width: 100%;
  }

  .calendar-day {
    min-height: 50px;
    padding: 0.4rem;
  }

  .calendar-weekdays,
  .calendar-grid {
    gap: 0.25rem;
  }

  .calendar-weekdays span,
  .calendar-count {
    font-size: 0.68rem;
  }

  .dashboard-grid,
  .topbar {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .topbar {
    gap: 0.55rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  .brand-logo-chip {
    width: 164px;
    height: 72px;
  }

  .brand-lockup {
    width: auto;
    height: 62px;
  }

  .dashboard-grid {
    width: calc(100% - 2rem);
    padding-top: 1rem;
  }

  .app-shell .dashboard-grid {
    width: 100%;
    padding: 1rem 1rem 1.5rem;
  }

  .app-shell .tab-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.16rem 0.35rem;
    width: 100%;
    flex: 1 1 100%;
    align-self: stretch;
    overflow-x: visible;
    scrollbar-width: none;
  }

  .app-shell .tab-nav::-webkit-scrollbar,
  .topbar-actions::-webkit-scrollbar {
    display: none;
  }

  .app-shell .tab-button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding-inline: 0.42rem;
    font-size: 0.84rem;
  }

  .admin-console-grid {
    grid-template-columns: 1fr;
  }

  .admin-console-hero {
    grid-template-columns: 1fr;
  }

  .admin-console-status {
    width: 100%;
  }

  .admin-context-strip {
    flex-direction: column;
    align-items: stretch;
    width: calc(100% - 2rem);
    margin-top: 0.65rem;
  }

  .admin-context-pills {
    justify-content: flex-start;
    width: 100%;
  }

  .admin-nav-shell {
    position: static;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    padding: 0.52rem;
  }

  .admin-shell .tab-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .license-summary-card {
    grid-template-columns: 1fr;
  }

  .license-overview-grid,
  .license-settings-summary,
  .settings-summary-row {
    grid-template-columns: 1fr;
  }

  .organization-logo-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .organization-logo-preview {
    width: min(176px, 100%);
    justify-self: start;
  }

  .license-admin-panel .license-detail-list {
    grid-template-columns: 1fr;
  }

  .settings-summary-row .ghost-button,
  .settings-summary-row .small-button {
    justify-self: stretch;
  }

  .license-email-status {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .license-email-actions {
    grid-column: 1 / -1;
    justify-items: stretch;
  }

  .license-email-actions small {
    max-width: none;
    text-align: left;
  }

  .license-card-actions {
    align-self: stretch;
    padding-top: 0.84rem;
    border-top: 1px solid var(--line);
  }

  .admin-shell .admin-two-panel,
  .admin-shell .approval-step-row {
    grid-template-columns: 1fr;
  }

  .department-basics,
  .department-toggle-list,
  .group-member-picker__toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .approval-group-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .approval-group-form > .role-fieldset {
    grid-column: 1;
  }

  .approval-step-remove {
    justify-self: start;
  }

  .group-member-picker__toolbar .badge {
    justify-self: start;
    margin-bottom: 0;
  }

  .admin-shell .app-settings-form,
  .admin-shell .license-settings-form,
  .admin-shell .user-edit-form,
  .admin-create-form {
    grid-template-columns: 1fr;
  }

  .settings-section {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .settings-section-head p {
    max-width: none;
  }

  .settings-section-fields {
    grid-template-columns: 1fr;
  }

  .holiday-policy-list,
  .holiday-battle-date-row,
  .goal-reminder-schedule-grid,
  .goal-reminder-route-grid {
    grid-template-columns: 1fr;
  }

  .license-detail-list div {
    grid-template-columns: 1fr;
    gap: 0.16rem;
  }

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

  .maintenance-area-row > .small-button,
  .maintenance-area-row__note {
    justify-self: start;
    text-align: left;
  }

  .admin-shell .team-card {
    grid-template-columns: 1fr;
  }

  .admin-shell .team-card > button {
    grid-column: 1;
    grid-row: auto;
    justify-self: flex-start;
    margin-top: 0.35rem;
  }

  .room-camera-form {
    grid-template-columns: 1fr;
  }

  .room-card-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem 0.65rem;
  }

  .admin-shell .room-card-facts {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .admin-shell .room-card-chevron {
    grid-column: 2;
    grid-row: 1;
  }

  .room-camera-actions {
    align-items: stretch;
  }

  .room-camera-actions > button {
    width: 100%;
  }

  .admin-shell .department-card-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) 1.6rem;
  }

  .purchase-form-card {
    position: static;
  }

  .approval-item--decision {
    grid-template-columns: 1fr;
  }

  .approval-item--decision .approval-note-field,
  .approval-item--decision .approval-note-field ~ .approval-actions {
    grid-column: 1;
  }

  .purchase-request-progress {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .topbar-brand {
    width: 100%;
    gap: 0.65rem;
  }

  .topbar-brand > div {
    min-width: 0;
  }

  .topbar h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .logo-box {
    width: 152px;
    height: 52px;
  }

  .topbar-actions {
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-left: 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
  }

  .admin-shell .topbar-actions {
    flex-wrap: wrap;
    overflow: visible;
    min-width: 0;
  }

  .topbar-actions > * {
    flex: 0 0 auto;
  }

  .admin-shell .topbar-actions > * {
    flex: 1 1 8rem;
    min-width: 0;
  }

  .topbar .ghost-button,
  .topbar .theme-toggle,
  .work-menu-button {
    min-height: 38px;
    padding: 0.48rem 0.72rem;
    font-size: 0.82rem;
  }

  .admin-shell .topbar .ghost-button,
  .admin-shell .topbar .user-pill {
    justify-content: center;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  .user-pill {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0.4rem 0.72rem;
  }

  .user-pill span {
    display: none;
  }

  .admin-shell .admin-mode-note {
    display: none;
  }

  .tab-button {
    width: auto;
  }

  .approval-popover {
    position: static;
    width: auto;
    margin: 0 1rem 1rem;
  }
}

/* ==========================================================
   v2 — operations desk: flat structure, hi-vis current
   Late-cascade layer: contrast replaces hairline borders.
   ========================================================== */

/* next-action strips: one bold pattern everywhere */
.operations-next-action,
.approval-next-panel,
.purchase-next-panel,
.objectives-next-panel,
.facilities-next-panel,
.venue-next-panel,
.calendar-next-panel {
  background: var(--current-wash);
  border: none;
  border-left: 4px solid var(--current);
  border-radius: 10px;
}

/* structural wells: tinted fills, no hairlines */
.operations-queue-row,
.operations-empty-action,
.approval-flow-step,
.objective-card,
.key-result-row,
.venue-event-card,
.calendar-agenda-row,
.venue-card {
  border-color: transparent;
  background: var(--well);
}

.operations-queue-row:hover {
  border-color: transparent;
  background: var(--current-wash);
}

.operations-queue-row--role {
  border-color: transparent;
  background: var(--current-wash);
}

.operations-empty-action {
  border-left: 4px solid var(--success-strong);
}

/* cards float on paper by contrast alone */
.operations-recent-card {
  border: none;
  box-shadow: none;
}

/* status chips: solid ink-stamped */
.badge.status-pending,
.status-pending {
  background: var(--warning-strong);
  color: #ffffff;
}

.badge.status-in_progress,
.status-in_progress {
  background: var(--current);
  color: var(--current-ink);
}

.badge.status-completed,
.status-completed,
.status-approved {
  background: var(--success-strong);
  color: #ffffff;
}

.status-denied,
.priority-high {
  background: var(--danger-strong);
  color: #ffffff;
}

.priority-medium {
  background: var(--warning-strong);
  color: #ffffff;
}

.priority-low {
  background: var(--success-strong);
  color: #ffffff;
}

.status-purchased {
  background: var(--current-deep);
  color: #ffffff;
}

[data-theme="dark"] .badge.status-pending,
[data-theme="dark"] .status-pending,
[data-theme="dark"] .priority-medium,
[data-theme="dark"] .badge.status-completed,
[data-theme="dark"] .status-completed,
[data-theme="dark"] .status-approved,
[data-theme="dark"] .priority-low,
[data-theme="dark"] .status-denied,
[data-theme="dark"] .priority-high,
[data-theme="dark"] .status-purchased {
  color: #10181b;
}

.purchase-request-pending-indicator.status-pending {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
}

[data-theme="dark"] .purchase-request-pending-indicator.status-pending {
  color: var(--warning);
}

/* overlays are the only things that cast shadows */
.role-popover,
.approval-popover,
.budget-status-popover,
.purchase-status-popover,
.modal-panel {
  box-shadow: var(--shadow-raised);
}

/* calendar: month view is the primary surface, agenda is the rail */
.calendar-workspace {
  grid-template-columns: minmax(0, 1fr);
}

.calendar-spread {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr);
  gap: 0.85rem;
  align-items: start;
}

@media (max-width: 1080px) {
  .calendar-spread {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* venue: two setup tickets side by side */
.venue-event-grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0.6rem;
}

/* event date blocks become solid ink stamps */
.venue-event-date,
.calendar-agenda-date {
  background: var(--chrome);
  color: var(--chrome-text);
  border: none;
}

.venue-event-date span,
.venue-event-date small,
.calendar-agenda-date span {
  color: var(--chrome-muted);
}

.venue-event-date strong,
.calendar-agenda-date strong {
  color: var(--chrome-text);
}

.venue-event-card--next .venue-event-date {
  background: var(--current);
}

.venue-event-card--next .venue-event-date span,
.venue-event-card--next .venue-event-date small,
.venue-event-card--next .venue-event-date strong {
  color: var(--current-ink);
}

/* ==========================================================
   v4 — Ember layer
   Open content on warm stone; one orange moment per view; the
   head replaces every command card.
   ========================================================== */

/* page head: title + live state line + primary action, no box */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.35rem 0 0.9rem;
  border-bottom: 1px solid var(--line);
}

.page-head h2 {
  margin: 0;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}

.page-state {
  margin: 0.2rem 0 0;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--muted);
}

.page-state strong {
  color: var(--ink-secondary);
  font-weight: 600;
}

.page-head-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* flat cards: white on mist, no borders, no resting shadows */
.login-card,
.card,
.operations-recent-card {
  border: none;
  box-shadow: none;
  border-radius: var(--radius-lg);
}

.card {
  padding: 1.2rem 1.3rem;
}

/* eyebrows are retired as a device; survivors become quiet labels */
.eyebrow {
  gap: 0;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--faint);
}

.eyebrow::before {
  display: none;
}

/* subcopy that survives reads as quiet prose, never bold */
.command-subcopy,
.section-subcopy {
  font-weight: 400 !important;
  color: var(--muted);
}

/* drop badges: circular count chips in pool colors */
.drop {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--current-wash);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* overlays own the only shadows */
.role-popover,
.approval-popover,
.budget-status-popover,
.purchase-status-popover,
.modal-panel {
  border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: var(--shadow-raised);
}

.popover-subhead {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.login-mark {
  width: 52px;
  height: 52px;
}

.login-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(360px, 100%);
  min-height: 104px;
  padding: 1.1rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(44, 35, 28, 0.12);
}

.login-full-logo {
  display: block;
  width: 100%;
  max-width: 290px;
  height: auto;
  object-fit: contain;
}

.login-card .brand-block {
  align-self: stretch;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.login-card h1 {
  margin: 0;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}

.login-card h1 span {
  color: var(--muted);
  font-weight: 600;
}

/* page heads span workspace grids */
.venue-workspace > .page-head,
.calendar-workspace > .page-head,
.purchase-workspace > .page-head {
  grid-column: 1 / -1;
}

.venue-card .badge {
  width: fit-content;
  justify-self: end;
}

/* critique round: dark definition, alignment, consistency */
[data-theme="dark"] .card,
[data-theme="dark"] .operations-recent-card {
  border: 1px solid var(--line-soft);
}

[data-theme="dark"] .operations-queue-row {
  border: 1px solid var(--line-soft);
}

[data-theme="dark"] .operations-queue-row--role {
  border-color: var(--current-border);
}

[data-theme="dark"] .purchase-budget-impact--over {
  background: rgba(233, 134, 124, 0.12);
  border-color: rgba(233, 134, 124, 0.5);
}

.purchase-budget-details {
  background: var(--surface);
}

.page-head-actions {
  align-items: flex-end;
}

.page-head-actions .board-controls label {
  display: grid;
  gap: 0.3rem;
}

.venue-workspace > .venue-events-card {
  grid-column: 1 / -1;
  align-self: start;
}

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

.purchase-form-card {
  padding: 0.4rem 1.3rem;
}

.purchase-form-card[open] {
  padding-bottom: 1.25rem;
}

.purchase-request-pending-indicator {
  cursor: help;
}

.purchase-form-summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.purchase-budget-details > summary {
  min-height: 52px;
}

.deny-button {
  border-width: 1.5px;
}

.budget-negative {
  color: var(--danger);
}

input[type="checkbox"] {
  accent-color: var(--current);
}

.objectives-empty-state {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding: 0.4rem 0 0.8rem;
}

.objectives-empty-state h3 {
  margin: 0;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.15rem;
}

.objectives-empty-state p {
  margin: 0;
  max-width: 46ch;
}

/* Shiloh brand lockup */
.login-tenant {
  align-self: center;
  width: min(360px, 100%);
  margin: -0.45rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
}

.field-hint {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

/* approvals: segmented queues + fixed 3-across decision cards */
.seg-tabs {
  display: inline-flex;
  gap: 0.25rem;
  width: fit-content;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--well);
}

.seg-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.89rem;
  font-weight: 600;
}

.seg-tab:hover {
  background: transparent;
  color: var(--ink);
}

.seg-tab.is-active {
  background: var(--surface);
  color: var(--ink);
}

[data-theme="dark"] .seg-tab {
  color: var(--ink-secondary);
}

[data-theme="dark"] .seg-tab:hover {
  color: var(--ink);
}

[data-theme="dark"] .seg-tab.is-active {
  background: var(--surface-strong);
  color: var(--ink);
}

.seg-tab .drop {
  min-width: 1.35rem;
  height: 1.35rem;
  font-size: 0.74rem;
}

.approval-pane {
  display: grid;
  gap: 0.9rem;
}

.approval-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: start;
}

.approval-grid > .empty-state {
  grid-column: 1 / -1;
}

.approval-grid .approval-record {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
}

[data-theme="dark"] .approval-grid .approval-record {
  border: 1px solid var(--line-soft);
}

.approval-grid .approval-record-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.approval-record-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding-top: 0.2rem;
}

.approval-grid .approval-cost-box {
  text-align: left;
}

.approval-grid .approval-actions {
  display: flex;
  gap: 0.45rem;
}

.emergency-approval-menu .approval-grid {
  padding-top: 0.6rem;
}

@media (max-width: 1180px) {
  .approval-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .approval-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.approval-pane[hidden] {
  display: none;
}

/* solid status chips always keep their stamped lettering */
span.badge.status-pending,
span.badge.priority-medium,
span.badge.status-completed,
span.badge.status-approved,
span.badge.priority-low,
span.badge.status-denied,
span.badge.priority-high {
  color: #ffffff;
}

span.badge.status-in_progress {
  color: var(--current-ink);
}

span.badge.status-purchased {
  color: #ffffff;
}

[data-theme="dark"] span.badge.status-pending,
[data-theme="dark"] span.badge.priority-medium,
[data-theme="dark"] span.badge.status-completed,
[data-theme="dark"] span.badge.status-approved,
[data-theme="dark"] span.badge.priority-low,
[data-theme="dark"] span.badge.status-denied,
[data-theme="dark"] span.badge.priority-high,
[data-theme="dark"] span.badge.status-purchased {
  color: #10181b;
}

/* ==========================================================
   v4 — operational polish
   Keeps Ember readable while adding depth, better feedback,
   named layers, and less uniform dashboard/admin composition.
   ========================================================== */

body {
  font-variant-numeric: tabular-nums;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--current-wash) 38%, transparent), transparent 17rem),
    var(--body-background);
  background-attachment: fixed;
}

[data-theme="light"] body {
  background: var(--body-background);
}

[data-theme="dark"] body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--current-wash) 28%, transparent), transparent 18rem),
    var(--body-background);
}

h1,
h2,
h3,
h4,
p {
  text-wrap: pretty;
}

.page-head {
  padding: 0.55rem 0 1rem;
}

.page-head h2 {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  text-wrap: balance;
}

.page-state {
  max-width: 68ch;
  line-height: 1.45;
}

.topbar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--current-wash) 8%), var(--surface));
}

.topbar .theme-toggle,
.topbar .user-pill,
.work-menu-button,
.work-menu-item,
.mobile-menu-button,
.mobile-menu-item,
.tab-button,
.seg-tab,
.kanban-card,
.operations-queue-row,
.operations-mini-list article,
.team-card,
.event-card,
.venue-card,
.calendar-agenda-row {
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

button:hover:not(:disabled):not(.tab-button):not(.seg-tab):not(.calendar-day):not(.vc-bar):not(.vc-event):not(.venue-cal-viewbtn):not(.venue-cal-zoombtn):not(.venue-cal-legend-item):not(.budget-status-button):not(.kanban-drag-handle):not(.operations-mini-item):not(.vault-list-item):not(.vault-item-row):not(.vault-item-row-main):not(.vault-item-action):not([data-dismiss-board-message]):not([data-dismiss-admin-message]):not(:where(.navigation-search-trigger, .notification-bell-button, .mobile-menu-button)),
.ghost-button:hover:not(:where(.navigation-search-trigger)) {
  transform: translateY(-1px);
}

.private-vault-access-banner {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent);
  background: var(--danger-soft);
  color: var(--ink);
}

.private-vault-access-banner__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger-strong);
}

.private-vault-access-banner__body strong {
  display: block;
  font-size: 1.05rem;
}

.private-vault-access-banner__body p {
  margin: 0.25rem 0 0;
  color: var(--ink-secondary);
}

.private-vault-access-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.small-icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  padding: 0;
  border-radius: 10px;
}

.small-icon-button .material-symbols-outlined {
  font-size: 1.05rem;
}

.vault-workspace {
  display: grid;
  grid-template-columns: minmax(14rem, 17rem) minmax(28rem, 1.35fr) minmax(18rem, 0.9fr);
  gap: 0.85rem;
  align-items: start;
  min-height: min(42rem, 72dvh);
}

.vault-sidebar,
.vault-main,
.vault-detail,
.private-vault-admin-results {
  min-width: 0;
}

.vault-list,
.vault-item-list,
.private-vault-user-list,
.admin-private-vault-item-list {
  display: grid;
  gap: 0.6rem;
}

.vault-load-more {
  display: grid;
  justify-items: stretch;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.vault-load-more > button {
  justify-content: center;
  min-height: 44px;
  width: 100%;
}

.vault-load-error {
  margin: 0;
  color: var(--danger);
  line-height: 1.35;
  text-wrap: pretty;
}

.vault-list-item,
.vault-item-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.72rem;
  align-items: center;
  width: 100%;
  padding: 0.74rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-strong) 86%, var(--control-bg));
  color: var(--ink);
  text-align: left;
}

.vault-list-item > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  color: var(--current-deep);
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.vault-item-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.vault-item-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.72rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0.74rem;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  text-align: left;
  user-select: none;
}

.vault-item-row-main:hover,
.vault-item-row-main:focus-visible,
.vault-item-row-main:active {
  background: transparent;
  color: inherit;
  transform: none;
}

.vault-item-action:hover,
.vault-item-action:focus-visible {
  transform: none;
}

.vault-item-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.74rem 0.74rem 2.95rem;
  border-top: 1px solid var(--line-soft);
}

.vault-item-action {
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--ink-secondary);
  border-color: var(--control-border);
}

.vault-item-action:hover,
.vault-item-action:focus-visible {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--line-strong);
}

.vault-item-action .material-symbols-outlined {
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.vault-item-action.is-copied {
  border-color: var(--success);
  color: var(--success);
}

.vault-list-item .material-symbols-outlined,
.vault-item-row .material-symbols-outlined {
  color: var(--current-deep);
}

.vault-item-action.is-copied .material-symbols-outlined {
  color: var(--success);
}

.vault-item-favorite-toggle.is-favorite,
.vault-detail-favorite-toggle.is-favorite {
  border-color: color-mix(in srgb, var(--warning-strong) 55%, var(--line));
  color: var(--warning-strong);
}

.vault-item-favorite-toggle.is-favorite .material-symbols-outlined,
.vault-detail-favorite-toggle.is-favorite .material-symbols-outlined {
  color: var(--warning-strong);
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.vault-detail-favorite-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.vault-detail-favorite-toggle .material-symbols-outlined {
  font-size: 1rem;
}

.vault-list-item strong,
.vault-list-item small,
.vault-item-row strong,
.vault-item-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-list-item small,
.vault-item-row small {
  color: var(--muted);
}

.vault-list-item strong,
.vault-item-row strong {
  color: var(--ink);
}

.vault-item-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.vault-item-title-line strong {
  flex: 1 1 11rem;
  min-width: 0;
}

.vault-item-row .vault-favorite-mark {
  flex: 0 0 auto;
  color: var(--warning-strong);
  font-size: 1rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.vault-security-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.12rem 0.38rem;
  border: 1px solid color-mix(in srgb, var(--warning) 58%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning-soft) 72%, var(--surface-strong));
  color: var(--ink-secondary);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.vault-security-pill--reused,
.vault-security-pill--missing,
.vault-security-pill--expired {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  background: var(--danger-soft);
  color: var(--ink);
}

.vault-security-pill--expiring,
.vault-security-pill--missing_mfa {
  border-color: color-mix(in srgb, var(--warning-strong) 58%, var(--line));
  background: var(--warning-soft);
  color: var(--ink);
}

.vault-list-item:hover,
.vault-list-item:focus-visible,
.vault-item-row:hover,
.vault-item-row:focus-visible {
  border-color: var(--current-border);
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--current-wash));
  color: var(--ink);
}

.vault-list-item.is-active,
.vault-item-row.is-active {
  border-color: color-mix(in srgb, var(--current-border) 72%, var(--control-border));
  background: color-mix(in srgb, var(--surface-strong) 82%, var(--current-wash) 18%);
  box-shadow:
    inset 3px 0 0 var(--current),
    inset 0 0 0 1px color-mix(in srgb, var(--current-border) 20%, transparent);
  color: var(--ink);
}

.vault-list-item.is-active > .material-symbols-outlined {
  background: var(--current-wash);
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.vault-list-item.is-active small,
.vault-item-row.is-active small {
  color: var(--ink-secondary);
}

[data-theme="dark"] .vault-list-item,
[data-theme="dark"] .vault-item-row,
[data-theme="dark"] .secret-access-row,
[data-theme="dark"] .secret-custom-field-row,
[data-theme="dark"] .vault-history-row,
[data-theme="dark"] .private-vault-user-row,
[data-theme="dark"] .admin-private-vault-item {
  background: color-mix(in srgb, var(--surface-strong) 88%, var(--control-bg));
  color: var(--ink);
}

[data-theme="dark"] .vault-list-item.is-active,
[data-theme="dark"] .vault-item-row.is-active {
  border-color: color-mix(in srgb, var(--current-border) 64%, var(--control-border));
  background: color-mix(in srgb, var(--surface-strong) 82%, var(--current-wash) 18%);
  box-shadow:
    inset 3px 0 0 var(--current),
    inset 0 0 0 1px color-mix(in srgb, var(--current-border) 22%, transparent);
  color: var(--ink);
}

[data-theme="dark"] .vault-list-item:hover,
[data-theme="dark"] .vault-list-item:focus-visible,
[data-theme="dark"] .vault-item-row:hover,
[data-theme="dark"] .vault-item-row:focus-visible {
  background: color-mix(in srgb, var(--surface-strong) 76%, var(--current-wash) 24%);
  color: var(--ink);
}

[data-theme="dark"] .vault-item-action {
  background: color-mix(in srgb, var(--control-bg) 72%, var(--surface-strong));
  color: var(--ink-secondary);
  border-color: var(--control-border);
}

[data-theme="dark"] .vault-security-pill {
  background: color-mix(in srgb, var(--warning-soft) 72%, var(--surface-strong));
  color: var(--ink);
}

[data-theme="dark"] .vault-list-item small,
[data-theme="dark"] .vault-item-row small,
[data-theme="dark"] .vault-history-row span,
[data-theme="dark"] .vault-history-row small,
[data-theme="dark"] .vault-history-preview,
[data-theme="dark"] .private-vault-user-row span,
[data-theme="dark"] .private-vault-user-row small,
[data-theme="dark"] .private-vault-item-head small {
  color: var(--ink-secondary);
}

.vault-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 0.9rem;
  padding: 0.55rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--control-bg) 66%, var(--surface-strong));
}

.vault-search-field {
  display: block;
  flex: 1 1 18rem;
  min-width: min(100%, 14rem);
}

.vault-toolbar select {
  flex: 1 1 10.5rem;
  min-width: min(100%, 9.5rem);
}

.vault-toolbar input,
.vault-toolbar select {
  width: 100%;
  min-width: 0;
}

.vault-security-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: -0.2rem 0 0.9rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--control-bg) 58%, var(--surface-strong));
  color: var(--ink);
}

.vault-security-summary[hidden] {
  display: none;
}

.vault-security-summary strong {
  margin-right: 0.25rem;
}

.vault-security-summary span {
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.vault-detail-empty {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  min-height: 18rem;
  text-align: center;
}

.vault-detail-empty .material-symbols-outlined {
  color: var(--muted);
  font-size: 2.2rem;
}

.vault-sidebar .badge,
.vault-main .badge,
.vault-detail .badge {
  background: var(--control-bg);
  color: var(--ink-secondary);
  border-color: var(--control-border);
}

.vault-detail-fields {
  display: grid;
  gap: 0.8rem;
}

.vault-detail-section {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--control-bg) 68%, var(--surface-strong));
}

.vault-detail-section h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.15;
}

.vault-secret-field {
  display: grid;
  gap: 0.35rem;
}

.vault-secret-field > span,
.vault-note-block > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.vault-secret-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.45rem;
  align-items: center;
}

.vault-secret-input-row input {
  min-width: 0;
}

.vault-otp-field [data-secret-otp-countdown] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  min-height: 2.35rem;
  padding: 0 0.45rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 800;
}

.secret-item-modal-panel {
  width: min(760px, 100%);
}

.secret-item-modal-panel > .section-heading {
  align-items: flex-start;
  margin-bottom: 0.9rem;
}

.secret-item-modal-close {
  flex: 0 0 auto;
}

.secret-item-modal-panel .table-subcopy {
  max-width: 34rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.secret-item-form {
  gap: 0.75rem;
}

.secret-item-basics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.8rem;
  border-radius: 8px;
  background: var(--surface-soft);
}

.secret-item-basics label {
  min-width: 0;
}

.secret-item-basics label > small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.35;
}

.secret-item-name-field input {
  min-height: 46px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
}

.secret-item-section {
  margin: 0;
  padding: 0.8rem;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface-strong));
}

.secret-item-section > legend {
  padding-inline: 0.2rem;
  color: var(--ink-secondary);
  font-size: 0.78rem;
}

.secret-item-disclosure,
.secret-item-more-options {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-strong);
}

.secret-item-disclosure > summary,
.secret-item-more-options > summary {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.secret-item-disclosure > summary::-webkit-details-marker,
.secret-item-more-options > summary::-webkit-details-marker,
.secret-item-inline-disclosure > summary::-webkit-details-marker {
  display: none;
}

.secret-item-disclosure > summary::after,
.secret-item-more-options > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--ink-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
}

.secret-item-disclosure[open] > summary::after,
.secret-item-more-options[open] > summary::after {
  content: "−";
}

.secret-item-disclosure > summary > span,
.secret-item-more-options > summary strong {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
}

.secret-item-disclosure > summary > small,
.secret-item-more-options > summary small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.secret-item-disclosure > label {
  padding: 0 0.75rem 0.75rem;
}

.secret-item-inline-disclosure {
  color: var(--ink-secondary);
}

.secret-item-inline-disclosure > summary {
  width: fit-content;
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 650;
  list-style: none;
}

.secret-item-inline-disclosure > summary::before {
  content: "+ ";
}

.secret-item-inline-disclosure[open] > summary::before {
  content: "− ";
}

.secret-item-inline-disclosure .secret-password-options {
  padding-top: 0.55rem;
}

.secret-item-more-options {
  overflow: clip;
}

.secret-item-more-options > summary > span {
  display: grid;
  gap: 0.15rem;
}

.secret-item-more-options__content {
  display: grid;
  gap: 0.75rem;
  padding: 0.8rem;
  border-top: 1px solid var(--line-soft);
}

.secret-item-more-options__content > .checkbox-label {
  justify-self: start;
}

.secret-item-form > .modal-actions {
  justify-content: flex-end;
  padding-top: 0.1rem;
}

.secret-item-form > #secret-item-form-message {
  min-height: 1rem;
  margin: -0.35rem 0 0;
  font-size: 0.78rem;
}

.secret-password-field {
  display: grid;
  gap: 0.4rem;
}

.secret-password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.45rem;
  align-items: center;
}

.secret-password-row--single-action {
  grid-template-columns: minmax(0, 1fr) auto;
}

.secret-password-row input {
  min-width: 0;
}

.secret-password-tool {
  display: inline-grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  border-radius: 8px;
}

.secret-password-generate {
  display: inline-flex;
  gap: 0.35rem;
  width: auto;
  min-width: 2.45rem;
  padding-inline: 0.6rem;
}

.secret-password-generate > span:last-child {
  font-size: 0.76rem;
}

.secret-password-tool .material-symbols-outlined {
  color: currentColor;
  font-size: 1.05rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.secret-password-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: center;
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 800;
}

.secret-password-options input[type="range"] {
  width: min(12rem, 100%);
}

.secret-password-options output {
  min-width: 1.8rem;
  color: var(--ink);
}

.secret-password-option {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

.secret-password-strength {
  min-height: 1rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.secret-password-strength[data-tone="strong"] {
  color: var(--success);
}

.secret-password-strength[data-tone="fair"] {
  color: var(--warning);
}

.secret-password-strength[data-tone="weak"] {
  color: var(--danger);
}

.secret-custom-fieldset {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.secret-custom-fieldset > legend {
  margin-bottom: 0.55rem;
  padding: 0;
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.secret-api-fieldset,
.secret-ssh-fieldset,
.secret-database-fieldset,
.secret-wifi-fieldset,
.secret-card-fieldset,
.secret-bank-fieldset,
.secret-identity-fieldset {
  display: grid;
  gap: 0.65rem;
}

[data-secret-login-field][hidden],
.secret-api-fieldset[hidden],
.secret-ssh-fieldset[hidden],
.secret-database-fieldset[hidden],
.secret-wifi-fieldset[hidden],
.secret-card-fieldset[hidden],
.secret-bank-fieldset[hidden],
.secret-identity-fieldset[hidden] {
  display: none;
}

.secret-login-field-grid,
.secret-api-field-grid,
.secret-ssh-field-grid,
.secret-database-field-grid,
.secret-wifi-field-grid,
.secret-card-field-grid,
.secret-bank-field-grid,
.secret-identity-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.secret-custom-field-list {
  display: grid;
  gap: 0.6rem;
}

.secret-custom-field-row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(12rem, 1fr) auto auto;
  gap: 0.6rem;
  align-items: end;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--ink);
}

.secret-custom-field-row label {
  min-width: 0;
}

.secret-custom-conceal {
  align-self: end;
  min-height: 2.55rem;
}

.secret-custom-field-add {
  justify-self: start;
}

.vault-note-block {
  display: grid;
  gap: 0.35rem;
}

.vault-note-block pre {
  margin: 0;
  padding: 0.78rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--ink);
  font: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

.vault-tags {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.vault-open-link {
  justify-self: start;
}

.vault-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.vault-detail-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.vault-favorite-badge {
  gap: 0.25rem;
}

.vault-favorite-badge .material-symbols-outlined {
  color: var(--warning-strong);
  font-size: 0.95rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.secret-access-list {
  display: grid;
  gap: 0.65rem;
}

.shared-vault-admin-card {
  display: grid;
  gap: 0.85rem;
}

.shared-vault-admin-table .cell-sub {
  max-width: 36rem;
}

.admin-vault-access-list {
  max-height: min(32rem, 56dvh);
  overflow-y: auto;
  padding: 0.15rem 0.2rem 0.15rem 0;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

.admin-vault-access-row select {
  width: 100%;
}

.secret-access-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem);
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.secret-access-row strong,
.secret-access-row small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.secret-access-row small {
  color: var(--muted);
}

.vault-history-block {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.vault-history-list {
  display: grid;
  gap: 0.6rem;
}

.vault-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.7fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.vault-history-row strong,
.vault-history-row span,
.vault-history-row small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.vault-history-row span,
.vault-history-row small,
.vault-history-preview {
  color: var(--muted);
}

.private-vault-admin-card {
  min-height: min(44rem, 76dvh);
}

.private-vault-admin-layout {
  display: grid;
  grid-template-columns: minmax(31rem, 1fr) minmax(20rem, 1fr);
  gap: 1rem;
}

.private-vault-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.private-vault-user-row strong,
.private-vault-user-row span,
.private-vault-user-row small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.private-vault-user-row span,
.private-vault-user-row small {
  color: var(--muted);
}

.admin-private-vault-warning,
.admin-private-vault-consequence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: 8px;
  background: var(--danger-soft);
}

.admin-private-vault-warning[hidden] {
  display: none;
}

.admin-private-vault-warning .material-symbols-outlined,
.admin-private-vault-consequence .material-symbols-outlined {
  color: var(--danger-strong);
}

.admin-private-vault-warning p,
.admin-private-vault-consequence p {
  margin: 0.2rem 0 0;
  color: var(--ink-secondary);
}

.admin-private-vault-item {
  display: grid;
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.private-vault-item-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}

.private-vault-item-head strong,
.private-vault-item-head small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.private-vault-item-head small {
  color: var(--muted);
}

@media (min-width: 1281px) {
  .vault-item-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .vault-item-row-actions {
    justify-content: flex-end;
    padding: 0.55rem 0.6rem 0.55rem 0;
    border-top: 0;
  }
}

@media (max-width: 1280px) and (min-width: 1081px) {
  .vault-workspace {
    grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  }

  .vault-detail {
    grid-column: 2;
  }
}

@media (max-width: 1080px) {

  .vault-workspace,
  .private-vault-admin-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {

  .private-vault-access-banner,
  .private-vault-user-row,
  .secret-access-row,
  .vault-history-row,
  .vault-secret-input-row,
  .secret-item-basics,
  .secret-password-row,
  .secret-login-field-grid,
  .secret-api-field-grid,
  .secret-ssh-field-grid,
  .secret-database-field-grid,
  .secret-wifi-field-grid,
  .secret-card-field-grid,
  .secret-bank-field-grid,
  .secret-identity-field-grid,
  .secret-custom-field-row {
    grid-template-columns: 1fr;
  }

  .secret-password-row {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
  }

  .secret-password-row > input {
    grid-column: 1 / -1;
    width: 100%;
  }

  .secret-password-row--single-action {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
  }

  .secret-password-row--single-action > input {
    grid-column: auto;
  }

  .private-vault-access-banner__actions {
    justify-content: flex-start;
  }

  .vault-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .vault-search-field,
  .vault-toolbar select {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .secret-item-modal-panel > .section-heading {
    flex-direction: row;
    align-items: flex-start;
  }

  .secret-item-modal-panel > .section-heading > div {
    min-width: 0;
  }
}

.seg-tabs {
  border-radius: 12px;
  padding: 0.28rem;
}

.seg-tab {
  border-radius: 9px;
}

.drop {
  border-radius: 9px 9px 9px 4px;
}

.badge {
  border-radius: 7px;
  padding: 0.25rem 0.52rem;
  letter-spacing: 0.01em;
}

.card,
.login-card,
.operations-recent-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 82%, var(--current-wash) 18%), var(--surface) 8rem),
    var(--surface);
}

[data-theme="dark"] .card,
[data-theme="dark"] .login-card,
[data-theme="dark"] .operations-recent-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 90%, var(--current-wash) 10%), var(--surface) 9rem),
    var(--surface);
}

.operations-queue-list {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.55rem;
}

.operations-queue-row {
  min-height: 3.82rem;
  padding: 0.62rem 0.68rem;
}

.operations-queue-row--role {
  grid-column: auto;
}

.operations-queue-main h3,
.operations-mini-list strong {
  font-weight: 700;
}

.operations-mini-list article {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--current-wash) 34%, transparent), transparent 54%),
    var(--surface-strong);
}

.operations-queue-row {
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.operations-queue-row--role {
  border-color: color-mix(in srgb, var(--warning) 32%, transparent);
  background: var(--surface-soft);
}

[data-theme="dark"] .operations-queue-row--role {
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  background: var(--surface-soft);
}

.operations-queue-row:hover,
.operations-queue-row:focus-visible {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.operations-queue-row--role:hover,
.operations-queue-row--role:focus-visible {
  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
  background:
    linear-gradient(90deg, var(--warning-soft), transparent 72%),
    var(--surface-soft);
}

.queue-open-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0.34rem 0.62rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.operations-support-grid {
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.operations-list-card {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 0.62rem;
  height: auto;
  min-height: 0;
  padding: 0.9rem;
}

.operations-list-card .section-heading {
  margin-bottom: 0;
}

.operations-list-card .empty-state {
  grid-column: 1 / -1;
  margin: 0;
}

.operations-mini-list {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  align-content: start;
  padding: 0.12rem 0.18rem 0.12rem 0;
  overscroll-behavior: contain;
  scroll-padding-block: 0.12rem;
}

.operations-mini-list .operations-mini-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 3.45rem;
  padding: 0.54rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--current-wash) 24%, transparent), transparent 56%),
    var(--surface-strong);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.operations-mini-list .operations-mini-item:hover,
.operations-mini-list .operations-mini-item:focus-visible {
  border-color: var(--current-border);
  background: var(--current-wash);
  transform: none;
}

.operations-mini-list .badge,
.operations-mini-list time {
  align-self: center;
}

.operations-mini-list .badge {
  justify-self: start;
}

/* The operations home is a single full-width stack: greeting, then the summary
   bar, then the feeds + attention rail (see .operations-home / .overview-layout).
   An older revision split it into a narrow left column via grid-template-areas
   that named `.operations-queue-list` / `.operations-support-grid` — classes the
   current markup no longer has. That stranded the summary bar in the ~20rem left
   track (cramping it and wrapping figures like $1,000) while the feeds sat right,
   giving the page three ragged planes. Keep the stack full width so the summary
   bar reads as one band above the content. */

.admin-console-hero {
  min-height: 6.25rem;
  padding: 0.95rem 1rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--current-wash) 76%, transparent), transparent 40%),
    var(--admin-hero);
}

.admin-console-hero h2 {
  font-size: 1.7rem;
  font-weight: 700;
  text-wrap: balance;
}

.control-shell {
  --bg: var(--color-bg-canvas);
  --surface: var(--color-bg-surface);
  --surface-strong: var(--color-bg-raised);
  --surface-soft: var(--color-bg-muted);
  --well: var(--color-code-bg);
  --line: var(--color-border-subtle);
  --line-soft: #e9e4ec;
  --line-strong: #beb3c5;
  --control-bg: var(--color-bg-surface);
  --control-border: var(--color-border-control);
  --current: var(--color-brand-accent);
  --current-bright: var(--brand-amber);
  --current-deep: var(--color-accent-text);
  --current-wash: var(--color-selection);
  --current-wash-strong: rgba(225, 73, 26, 0.16);
  --current-border: rgba(225, 73, 26, 0.36);
  --control-command: #231c3e;
  --control-command-raised: #30283e;
  --control-command-ink: #f7f3fa;
  --control-command-muted: #c8c1d1;
  --control-danger-rail: rgba(166, 45, 49, 0.12);
  min-height: 100vh;
  overflow-x: clip;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 76%, var(--control-command) 24%) 0, var(--bg) 20rem),
    var(--bg);
}

[data-theme="dark"] .control-shell {
  --bg: var(--color-bg-canvas);
  --surface: var(--color-bg-surface);
  --surface-strong: var(--color-bg-raised);
  --surface-soft: var(--color-bg-muted);
  --well: var(--color-code-bg);
  --line: var(--color-border-subtle);
  --line-soft: #352d42;
  --line-strong: #80748f;
  --control-bg: var(--color-bg-surface);
  --control-border: var(--color-border-control);
  --current: var(--color-brand-accent);
  --current-bright: #ffd18a;
  --current-deep: var(--color-accent-text);
  --current-wash: rgba(255, 173, 53, 0.14);
  --current-wash-strong: rgba(255, 173, 53, 0.24);
  --current-border: rgba(255, 173, 53, 0.42);
  --control-command: #1d1828;
  --control-command-raised: #30283e;
  --control-command-ink: #f7f3fa;
  --control-command-muted: #c8c1d1;
  --control-danger-rail: rgba(255, 154, 159, 0.14);
}

.control-shell .topbar {
  width: auto;
  max-width: none;
  margin-right: var(--scrollbar-overlap);
  overflow-x: clip;
  border-bottom-color: color-mix(in srgb, var(--control-command-ink) 10%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--control-command-raised) 76%, var(--current) 24%), var(--control-command));
  color: var(--control-command-ink);
}

.control-shell .brand {
  color: var(--control-command-ink);
}

.control-shell .admin-mode-chip {
  border: 1px solid color-mix(in srgb, var(--current) 44%, transparent);
  background: color-mix(in srgb, var(--current) 22%, transparent);
  color: var(--control-command-ink);
}

.control-nav {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: 0.18rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.control-nav::-webkit-scrollbar {
  display: none;
}

.control-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 0.82rem;
  color: var(--control-command-muted);
  font-size: 0.86rem;
  font-weight: 650;
  white-space: nowrap;
}

.control-nav-delivery-signal {
  width: 0.46rem;
  height: 0.46rem;
  margin-left: 0.42rem;
  border-radius: 999px;
  background: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 18%, transparent);
}

.control-nav-delivery-signal--danger {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.control-nav-link::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: -1px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: transparent;
}

.control-nav-link:hover,
.control-nav-link.is-active {
  color: var(--control-command-ink);
}

.control-nav-link.is-active::after {
  background: var(--current);
}

.control-nav-link--danger {
  color: color-mix(in srgb, var(--danger) 56%, var(--control-command-muted));
}

.control-nav-link--danger.is-active::after {
  background: var(--danger);
}

.control-shell .topbar .ghost-button {
  border-color: color-mix(in srgb, var(--control-command-ink) 18%, transparent);
  color: var(--control-command-ink);
}

.control-shell .topbar .ghost-button:hover {
  border-color: color-mix(in srgb, var(--control-command-ink) 28%, transparent);
  background: color-mix(in srgb, var(--control-command-ink) 9%, transparent);
  color: var(--control-command-ink);
}

.control-login-shell .login-card {
  max-width: 28rem;
}

.control-login-card .brand-block {
  align-items: center;
}

.control-grid {
  display: grid;
  gap: 1.05rem;
  width: calc(100% - (var(--app-gutter) * 2));
  max-width: none;
  margin: 0 auto;
  padding: 1.05rem 0 2rem;
}

.control-section {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  scroll-margin-top: 6.25rem;
}

.control-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  min-width: 0;
  padding: 0.15rem 0.1rem;
}

.control-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 760;
  letter-spacing: 0;
}

.control-section-head p {
  max-width: 44rem;
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.control-section-kicker {
  display: inline-flex;
  align-items: center;
  color: var(--current-deep);
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.control-section-head .control-health-grid {
  grid-template-columns: repeat(3, minmax(6.5rem, 1fr));
  min-width: min(100%, 25rem);
}

.control-page-head {
  align-items: center;
  min-height: 5.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--current-wash) 62%, transparent), transparent 46%),
    linear-gradient(90deg, color-mix(in srgb, var(--control-command) 8%, transparent), transparent 32%),
    var(--surface-strong);
}

.control-page-head h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  font-weight: 720;
  letter-spacing: 0;
}

.control-operator {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-width: min(100%, 28rem);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.control-operator div {
  display: grid;
  min-width: 0;
}

.control-operator strong,
.control-operator span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-operator span {
  color: var(--muted);
  font-size: 0.82rem;
}

.control-flash {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
}

.control-flash--success {
  border-color: color-mix(in srgb, var(--success) 36%, transparent);
  background:
    linear-gradient(90deg, var(--success-soft), transparent 68%),
    var(--surface-strong);
}

.control-flash--danger {
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  background:
    linear-gradient(90deg, var(--danger-soft), transparent 68%),
    var(--surface-strong);
}

.control-flash--warning {
  border-color: color-mix(in srgb, var(--current-deep) 38%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--current-wash) 72%, transparent), transparent 68%),
    var(--surface-strong);
}

.control-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: 1rem;
  align-items: start;
}

.control-card {
  min-width: 0;
  padding: 1rem;
}

.control-card .section-heading {
  margin-bottom: 0.8rem;
}

.control-card--tenant-health {
  align-self: stretch;
}

.control-health-grid {
  display: grid;
  gap: 0.65rem;
}

.control-health-grid div {
  display: grid;
  gap: 0.1rem;
  min-height: 4.1rem;
  padding: 0.78rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--well);
}

.control-health-grid strong {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 740;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.control-health-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.control-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.control-form label {
  min-width: 0;
}

.control-form input,
.control-form textarea {
  width: 100%;
  min-width: 0;
}

.control-form textarea {
  resize: vertical;
}

.control-form .full-span,
.control-checkbox.full-span {
  grid-column: 1 / -1;
}

.control-checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 3.2rem;
  padding: 0.72rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--well);
}

.control-checkbox input {
  justify-self: center;
}

.control-checkbox span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.control-checkbox small {
  color: var(--muted);
  line-height: 1.25;
  text-wrap: pretty;
}

.control-field-note {
  display: block;
  margin-top: 0.28rem;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
  text-wrap: pretty;
}

.control-settings-disclosure {
  display: grid;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.control-settings-disclosure summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  min-height: 4.25rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
}

.control-settings-disclosure summary::-webkit-details-marker {
  display: none;
}

.control-settings-disclosure:not([open]) > :not(summary) {
  display: none;
}

.control-settings-disclosure summary > span:first-child {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.control-settings-disclosure summary strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 720;
}

.control-settings-disclosure summary small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  text-wrap: pretty;
}

.control-settings-disclosure[open] summary {
  border-bottom: 1px solid var(--line);
}

.control-form--settings {
  padding: 0;
}

.control-settings-list {
  gap: 0.72rem;
}

.control-settings-modal-panel .control-form--settings {
  margin-top: 0;
}

.control-form-section-heading {
  display: grid;
  gap: 0.12rem;
  margin-top: 0.35rem;
  padding-top: 0.82rem;
  border-top: 1px solid var(--line);
}

.control-form-section-heading:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.control-form-section-heading strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.control-form-section-heading span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}

.control-settings-state {
  justify-self: end;
  white-space: nowrap;
}

.control-delivery-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.72rem;
  align-items: center;
  min-width: 0;
  padding: 0.72rem 0.82rem;
  border-left: 4px solid var(--warning);
  border-radius: 2px;
  background: color-mix(in srgb, var(--warning-soft) 52%, var(--surface-soft));
}

.control-delivery-alert--danger {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 48%, var(--surface-soft));
}

.control-delivery-alert > .material-symbols-outlined {
  color: var(--warning-strong);
  font-size: 1.35rem;
}

.control-delivery-alert--danger > .material-symbols-outlined {
  color: var(--danger);
}

.control-delivery-alert div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.control-delivery-alert strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.control-delivery-alert span:not(.material-symbols-outlined) {
  color: var(--ink-secondary);
  font-size: 0.78rem;
  line-height: 1.4;
}

.control-delivery-pulse {
  display: grid;
  gap: 0.78rem;
  padding: 0.92rem 1rem;
  border-left: 4px solid var(--success);
  border-radius: 2px;
  background: var(--surface-soft);
}

.control-delivery-pulse--warning {
  border-left-color: var(--warning);
}

.control-delivery-pulse--danger {
  border-left-color: var(--danger);
}

.control-delivery-pulse__lead {
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr);
  gap: 0.72rem;
  align-items: center;
}

.control-delivery-pulse__lead > .material-symbols-outlined {
  display: inline-grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 4px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 1.35rem;
}

.control-delivery-pulse--warning .control-delivery-pulse__lead > .material-symbols-outlined {
  background: var(--warning-soft);
  color: var(--warning-strong);
}

.control-delivery-pulse--danger .control-delivery-pulse__lead > .material-symbols-outlined {
  background: var(--danger-soft);
  color: var(--danger);
}

.control-delivery-pulse__lead div {
  display: grid;
  gap: 0.12rem;
}

.control-delivery-pulse__lead h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 760;
}

.control-delivery-pulse__lead p {
  max-width: 52rem;
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.control-delivery-pulse__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 2px;
  background: var(--well);
}

.control-delivery-pulse__metrics div {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
  padding: 0.68rem 0.76rem;
  border-left: 1px solid var(--line);
}

.control-delivery-pulse__metrics div:first-child {
  border-left: 0;
}

.control-delivery-pulse__metrics strong {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.control-delivery-pulse__metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 680;
}

.control-delivery-pulse__foot {
  display: grid;
  gap: 0.3rem;
  color: var(--ink-secondary);
  font-size: 0.76rem;
  line-height: 1.4;
}

.control-delivery-pulse__foot strong {
  color: var(--ink);
  font-size: 0.7rem;
  letter-spacing: 0.035em;
}

.control-delivery-pulse__error {
  padding-top: 0.32rem;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.control-mobile-delivery-signal {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  background: var(--warning-soft);
  color: var(--warning-strong);
  font-size: 0.66rem;
}

@media (max-width: 760px) {
  .control-delivery-alert {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .control-delivery-alert > a {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

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

  .control-delivery-pulse__metrics div:nth-child(3) {
    border-left: 0;
  }

  .control-delivery-pulse__metrics div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

.control-legacy-panel {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.control-legacy-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: stretch;
}

.control-legacy-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.control-legacy-copy strong {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 720;
}

.control-legacy-copy span {
  max-width: 48rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.control-legacy-count {
  display: grid;
  place-items: center;
  min-width: 7.2rem;
  padding: 0.72rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--well);
}

.control-legacy-count strong {
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.control-legacy-count span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.control-legacy-badge--attention {
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
  color: var(--danger);
}

.control-legacy-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(4rem, auto);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
}

.control-legacy-table span {
  min-width: 0;
  padding: 0.58rem 0.68rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.control-legacy-table span:nth-child(2n) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.control-legacy-table .control-legacy-table__head {
  border-top: 0;
  background: var(--well);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 740;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.control-legacy-empty {
  margin: 0;
}

.control-legacy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.control-legacy-actions form {
  margin: 0;
}

.control-danger-button {
  border: 1px solid color-mix(in srgb, var(--danger) 46%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
  box-shadow: none;
}

[data-theme="dark"] .control-danger-button {
  border-color: color-mix(in srgb, var(--danger) 54%, transparent);
  background: color-mix(in srgb, var(--danger-soft) 62%, var(--surface-strong) 38%);
  color: var(--danger-strong);
}

.control-danger-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 68%, transparent);
  background: color-mix(in srgb, var(--danger-soft) 70%, var(--danger) 30%);
  color: var(--danger-strong);
}

[data-theme="dark"] .control-danger-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 72%, transparent);
  background: color-mix(in srgb, var(--danger-soft) 50%, var(--danger) 24%);
  color: #ffe2e4;
}

.control-card--tenants {
  display: grid;
  gap: 0.9rem;
}

.control-risk-zone {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line));
  border-radius: 18px;
  background:
    linear-gradient(135deg, var(--control-danger-rail), transparent 36%),
    var(--surface);
}

.control-risk-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: start;
}

.control-card--tenant-delete {
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line));
  background:
    linear-gradient(180deg, var(--danger-soft), transparent 8rem),
    var(--surface-strong);
}

.control-danger-list {
  display: grid;
  gap: 0.65rem;
}

.control-danger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.86fr);
  gap: 0.85rem;
  align-items: end;
  min-width: 0;
  padding: 0.76rem;
  border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line));
  border-radius: 12px;
  background: var(--surface);
}

.control-danger-row > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.control-danger-row strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.control-danger-row span {
  color: var(--muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.control-danger-row code {
  padding: 0.1rem 0.25rem;
  border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line));
  border-radius: 6px;
  background: var(--well);
  color: var(--danger);
  font-size: 0.76rem;
  font-weight: 740;
}

.control-danger-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
}

.control-danger-inline-form label {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 740;
}

.control-danger-inline-form input {
  width: 100%;
  min-width: 0;
}

.control-tenant-list {
  display: grid;
  gap: 0.72rem;
}

.control-tenant-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem);
  gap: 0.8rem;
  align-items: start;
  padding: 0.82rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
}

.control-tenant-main {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.control-tenant-title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.control-tenant-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.control-tenant-main > span,
.control-tenant-main small {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.control-error {
  color: var(--danger) !important;
}

.control-tenant-actions {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
  width: 100%;
  min-width: 0;
}

.control-tenant-actions span {
  max-width: 16rem;
  color: var(--muted);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
  text-align: right;
}

.control-admin-state {
  font-weight: 650;
}

.control-tenant-access,
.control-tenant-delete {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
  width: min(20rem, 100%);
  min-width: 0;
}

.control-tenant-access summary,
.control-tenant-delete summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.44rem 0.72rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1;
  list-style: none;
}

.control-tenant-access summary {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--current-deep);
}

.control-tenant-delete summary {
  border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent);
  background: transparent;
  color: var(--danger);
}

.control-tenant-access summary::-webkit-details-marker,
.control-tenant-delete summary::-webkit-details-marker {
  display: none;
}

.control-tenant-access[open] summary {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.control-tenant-delete[open] summary {
  background: var(--danger-soft);
}

.control-tenant-access:not([open]) > form,
.control-tenant-delete:not([open]) > form {
  display: none;
}

.control-tenant-access form,
.control-tenant-delete form {
  display: grid;
  gap: 0.48rem;
  width: 100%;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--well);
}

.control-tenant-delete form {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
}

.control-tenant-access label,
.control-tenant-delete label {
  display: grid;
  gap: 0.24rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 720;
}

.control-tenant-access input,
.control-tenant-delete input {
  width: 100%;
  min-width: 0;
}

.control-tenant-access small,
.control-tenant-delete small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
  text-align: left;
  text-wrap: pretty;
}

.control-event-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}

.control-event-strip span {
  padding: 0.32rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--well);
  color: var(--muted);
  font-size: 0.76rem;
}

.control-status {
  font-variant-numeric: tabular-nums;
}

.control-status--active,
.control-status--dns-active {
  border-color: color-mix(in srgb, var(--success) 36%, transparent);
  color: var(--success);
}

.control-status--provisioning,
.control-status--dns-pending,
.control-status--dns-skipped {
  border-color: var(--current-border);
  color: var(--current-deep);
}

.control-status--suspended,
.control-status--archived,
.control-status--dns-failed {
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  color: var(--danger);
}

.control-mobile-actions,
.control-mobile-panel {
  display: none;
}

.control-menu-button {
  width: 42px;
  min-width: 42px;
  padding-inline: 0;
}

.control-menu-button .material-symbols-outlined {
  color: currentColor;
  font-size: 1.35rem;
  font-variation-settings: "FILL" 0, "wght" 650, "GRAD" 0, "opsz" 24;
}

.control-mobile-panel {
  position: absolute;
  top: calc(100% - 0.35rem);
  right: 1rem;
  z-index: calc(var(--z-topbar) + 1);
  gap: 0.24rem;
  width: min(15rem, calc(100vw - 1.4rem));
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.control-mobile-panel[hidden] {
  display: none;
}

.control-mobile-panel a,
.control-mobile-panel button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0.64rem 0.72rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
}

.control-mobile-panel form {
  margin: 0;
}

.control-mobile-panel a:hover,
.control-mobile-panel button:hover {
  background: var(--well);
}

.control-mobile-panel button,
[data-theme="dark"] .control-mobile-panel button {
  color: var(--ink);
}

.control-mobile-panel .control-mobile-danger {
  color: var(--danger);
}

.marketing-document {
  min-height: 100%;
  overflow-y: auto;
}

.marketing-shell {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--current-wash) 32%, transparent), transparent 26rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 86%, var(--current-wash) 14%) 0, var(--bg) 34rem),
    var(--bg);
  color: var(--ink);
}

.marketing-shell img {
  max-width: 100%;
}

.marketing-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-modal);
  transform: translateY(-160%);
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(247, 243, 250, 0.38);
  border-radius: var(--radius-sm);
  background: #f7f3fa;
  color: #2a203f;
  font-weight: 800;
  transition: transform 160ms ease;
}

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

.marketing-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 70px;
  padding: 0.35rem max(1rem, calc((100vw - 1240px) / 2));
  color: #f7f3fa;
}

.marketing-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.marketing-brand__chip {
  width: 146px;
  height: 56px;
  border-color: rgba(247, 243, 250, 0.56);
  border-radius: var(--radius-sm);
}

.marketing-brand__chip .brand-lockup {
  height: 48px;
}

.marketing-footer__chip .brand-lockup {
  height: 58px;
}

.marketing-nav__links {
  display: flex;
  align-items: center;
  gap: 0.14rem;
  min-width: 0;
  padding: 0.28rem;
  border: 1px solid rgba(247, 243, 250, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(35, 28, 62, 0.68);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}

.marketing-nav__links a,
.marketing-nav__cta,
.marketing-primary,
.marketing-secondary,
.marketing-footer__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: var(--radius-sm);
  padding: 0.56rem 0.82rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.marketing-nav__links a {
  color: rgba(247, 243, 250, 0.82);
}

.marketing-nav__links a:hover {
  color: #f7f3fa;
  background: rgba(247, 243, 250, 0.1);
}

.marketing-nav__links .marketing-nav__cta,
.marketing-primary {
  background: #f7f3fa;
  color: #2a203f;
  box-shadow: 0 0 0 1px rgba(247, 243, 250, 0.42), 0 10px 24px rgba(15, 12, 26, 0.22);
}

.marketing-nav__links .marketing-nav__cta:hover,
.marketing-primary:hover {
  background: #ffffff;
  color: #1d1730;
}

.marketing-nav__links .marketing-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: #f7f3fa;
}

.marketing-nav__links .marketing-theme-toggle:hover {
  background: rgba(247, 243, 250, 0.1);
}

.marketing-nav__links .theme-toggle__icon {
  color: currentColor;
}

.marketing-nav__mobile {
  display: none;
  align-items: center;
  gap: 0.24rem;
  padding: 0.24rem;
  border: 1px solid rgba(247, 243, 250, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(35, 28, 62, 0.68);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}

.marketing-menu-button,
.marketing-nav__mobile .marketing-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #f7f3fa;
}

.marketing-menu-button:hover,
.marketing-nav__mobile .marketing-theme-toggle:hover {
  background: rgba(247, 243, 250, 0.1);
}

.marketing-menu-button .material-symbols-outlined {
  color: currentColor;
  font-size: 1.35rem;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
}

.marketing-nav__mobile .theme-toggle__icon {
  color: currentColor;
}

.marketing-mobile-panel {
  position: absolute;
  top: calc(100% - 0.24rem);
  right: max(1rem, calc((100vw - 1240px) / 2));
  display: grid;
  gap: 0.18rem;
  width: min(15rem, calc(100vw - 1.4rem));
  padding: 0.42rem;
  border: 1px solid rgba(247, 243, 250, 0.22);
  border-radius: var(--radius);
  background: rgba(35, 28, 62, 0.88);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.marketing-mobile-panel[hidden] {
  display: none;
}

.marketing-mobile-panel a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0.64rem 0.78rem;
  border-radius: var(--radius-sm);
  color: #f7f3fa;
  font-size: 0.92rem;
  font-weight: 700;
}

.marketing-mobile-panel a:hover {
  background: rgba(247, 243, 250, 0.1);
}

.marketing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(22rem, 1.18fr);
  gap: 2.2rem;
  align-items: center;
  min-height: 720px;
  padding: 6.2rem max(1rem, calc((100vw - 1240px) / 2)) 4.2rem;
  overflow: hidden;
  color: #f7f3fa;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 16%, rgba(216, 116, 79, 0.2), transparent 24rem),
    linear-gradient(180deg, #171223 0%, #100d19 100%);
}

.marketing-hero__copy {
  width: min(35rem, 100%);
  min-width: 0;
}

.marketing-hero h1,
.marketing-section h2 {
  margin: 0;
  color: inherit;
  font-weight: 800;
  letter-spacing: 0;
  text-wrap: balance;
}

.marketing-hero h1 {
  max-width: 14ch;
  font-size: 4.25rem;
  line-height: 0.98;
}

.marketing-hero p {
  max-width: 30rem;
  margin: 1.2rem 0 0;
  color: rgba(247, 243, 250, 0.86);
  font-size: 1.08rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.marketing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.72rem;
  margin-top: 1.7rem;
}

.marketing-primary,
.marketing-secondary {
  min-height: 46px;
  padding: 0.78rem 1.12rem;
}

.marketing-hero__visual {
  position: relative;
  margin: 0;
  min-width: 0;
  border: 1px solid rgba(247, 243, 250, 0.22);
  border-radius: var(--radius);
  background: rgba(247, 243, 250, 0.08);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
  overflow: visible;
}

.marketing-hero__desktop {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 950;
  object-fit: cover;
  object-position: top left;
  border-radius: inherit;
}

.marketing-hero__phone {
  position: absolute;
  right: -1.5rem;
  bottom: -3rem;
  display: block;
  width: 26%;
  height: auto;
  aspect-ratio: 1320 / 2868;
  border: 7px solid #171223;
  border-radius: 24px;
  background: #f7f3fa;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
  object-fit: cover;
}

.marketing-secondary {
  border: 1px solid rgba(247, 243, 250, 0.38);
  background: rgba(247, 243, 250, 0.08);
  color: #f7f3fa;
}

.marketing-secondary:hover {
  border-color: rgba(247, 243, 250, 0.62);
  background: rgba(247, 243, 250, 0.16);
}

.marketing-primary:active,
.marketing-secondary:active,
.marketing-nav__links a:active,
.marketing-footer__link:active {
  transform: translateY(1px) scale(0.98);
}

.marketing-section {
  padding: 6rem 1rem;
}

.marketing-section__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.marketing-section h2 {
  font-size: 3.6rem;
  line-height: 1.02;
}

.marketing-section p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.marketing-section-head {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 1.6rem;
}

.marketing-section-head--center {
  max-width: 48rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.marketing-section-head p {
  max-width: 42rem;
  margin: 0 auto;
}

.marketing-proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.marketing-proof-strip article {
  display: grid;
  gap: 0.8rem;
  min-height: 9.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, var(--current-wash) 12%);
  box-shadow: 0 1px 0 var(--line-soft);
}

.marketing-proof-strip .material-symbols-outlined {
  color: var(--current-deep);
  font-size: 1.65rem;
  font-variation-settings: "FILL" 0, "wght" 600;
}

.marketing-proof-strip strong {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.22;
  text-wrap: balance;
}

.marketing-product-grid {
  padding-top: 1rem;
}

.marketing-product-grid__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 1rem;
  align-items: stretch;
}

.marketing-product-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  min-height: 100%;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-soft);
}

.marketing-product-card--large {
  grid-row: span 2;
}

.marketing-product-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 950;
  object-fit: cover;
  object-position: top left;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

.marketing-product-card > div {
  display: grid;
  gap: 0.55rem;
  padding: 0 0.1rem 0.1rem;
}

.marketing-product-card--text {
  justify-content: end;
  min-height: 13rem;
  padding: 1.1rem;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 74%, var(--current-wash) 26%), var(--surface));
}

.marketing-product-card--text .material-symbols-outlined {
  color: var(--current-deep);
  font-size: 1.7rem;
  font-variation-settings: "FILL" 0, "wght" 650;
}

.marketing-product-card h3 {
  margin: 0;
  color: inherit;
  font-size: 1.45rem;
  line-height: 1.12;
  letter-spacing: 0;
}

.marketing-product-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.5;
}

.marketing-product-card--text p {
  max-width: 24rem;
}

.marketing-fieldwork {
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--current-wash) 26%, transparent) 54%, transparent),
    var(--bg);
}

.marketing-fieldwork__grid {
  display: grid;
  grid-template-columns: minmax(14rem, 0.62fr) minmax(0, 1.38fr);
  gap: 4rem;
  align-items: center;
}

.marketing-phone-frame {
  justify-self: center;
  width: min(330px, 100%);
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-raised);
}

.marketing-phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: contain;
  border-radius: 22px;
}

.marketing-fieldwork__copy {
  display: grid;
  gap: 1.25rem;
}

.marketing-fieldwork__copy p {
  max-width: 40rem;
  margin: 0;
}

.marketing-checklist {
  display: grid;
  gap: 0.7rem;
  max-width: 44rem;
}

.marketing-checklist span {
  display: block;
  padding: 0.72rem 0 0.72rem 1rem;
  border-left: 3px solid var(--current);
  color: var(--ink-secondary);
  line-height: 1.5;
}

.marketing-mobile-showcase {
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--current-wash) 24%, transparent) 58%, transparent),
    var(--bg);
}

.marketing-mobile-showcase__head {
  display: grid;
  gap: 0.9rem;
  max-width: 48rem;
  margin: 0 0 2rem;
}

.marketing-mobile-showcase__head p {
  max-width: 42rem;
  margin: 0;
}

.marketing-app-store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 46px;
  margin-top: 0.35rem;
  padding: 0.78rem 1.12rem;
  border: 1px solid rgba(247, 243, 250, 0.32);
  border-radius: var(--radius-sm);
  background: #231c3e;
  color: #f7f3fa;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-plum) 20%, transparent);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms ease, transform 180ms ease;
}

.marketing-app-store-link:hover {
  background: #171223;
  color: #ffffff;
}

.marketing-app-store-link:active {
  transform: translateY(1px) scale(0.98);
}

.marketing-mobile-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(27vw, 320px);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0 0 1rem;
  scroll-padding-inline: 1px;
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--current) color-mix(in srgb, var(--surface-soft) 72%, transparent);
  scrollbar-width: thin;
}

.marketing-mobile-gallery:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

.marketing-mobile-gallery figure {
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}

.marketing-mobile-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1320 / 2868;
  border-radius: 2px;
  background: #231c3e;
  box-shadow: 0 22px 56px color-mix(in srgb, var(--brand-plum) 24%, transparent);
  object-fit: cover;
}

.marketing-pricing {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, transparent), transparent 48%),
    color-mix(in srgb, var(--bg) 90%, var(--current-wash) 10%);
}

.marketing-pricing__head {
  display: grid;
  gap: 0.9rem;
  max-width: 54rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.marketing-pricing__head h2 {
  max-width: 100%;
}

.marketing-pricing__head p {
  max-width: 43rem;
  margin: 0;
  justify-self: center;
}

.marketing-pricing__tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
  margin: 0 0 1.25rem;
}

.marketing-plan-card {
  display: grid;
  grid-template-rows: 8.7rem auto auto 1fr auto auto;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-soft);
}

.marketing-plan-card--featured {
  border-color: var(--current-border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 78%, var(--current-wash) 22%), var(--surface));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--current-wash) 56%, transparent);
}

.marketing-plan-card__top {
  display: grid;
  grid-template-rows: 1.7rem auto 1fr;
  gap: 0.45rem;
  align-content: start;
  min-width: 0;
}

.marketing-plan-card__badge-row {
  display: flex;
  align-items: start;
  min-height: 1.7rem;
}

.marketing-plan-card__top h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.85rem;
  line-height: 1.05;
  letter-spacing: 0;
}

.marketing-plan-card__top p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.marketing-plan-card__badge {
  justify-self: start;
  padding: 0.36rem 0.52rem;
  border: 1px solid var(--current-border);
  border-radius: var(--radius-sm);
  background: var(--current-wash);
  color: var(--current-deep);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
}

.marketing-plan-card__price {
  display: grid;
  gap: 0.16rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.marketing-plan-card__price strong {
  color: var(--ink);
  font-size: 3.45rem;
  line-height: 0.95;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.marketing-plan-card__price span,
.marketing-plan-card__yearly span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.25;
}

.marketing-plan-card__yearly {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.2rem 0.1rem;
}

.marketing-plan-card__yearly strong {
  color: var(--current-deep);
  font-size: 1.15rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.marketing-plan-card ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marketing-plan-card li {
  padding: 0.62rem 0.72rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--current-wash) 22%);
  color: var(--ink-secondary);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
}

.marketing-checkout-form {
  margin: 0;
}

.marketing-plan-card__checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  width: 100%;
  border: 1px solid var(--current-deep);
  border-radius: var(--radius-sm);
  background: var(--current-deep);
  color: var(--surface);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1;
  padding: 0 1rem;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.marketing-plan-card__checkout:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.marketing-plan-card__checkout:active {
  transform: translateY(1px);
}

.marketing-plan-card__checkout--secondary {
  background: transparent;
  color: var(--current-deep);
}

.marketing-plan-card__checkout--secondary:hover {
  background: var(--current-wash);
  border-color: var(--current-border);
  color: var(--current-deep);
}

[data-theme="dark"] .marketing-plan-card__checkout--secondary {
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
  border-color: color-mix(in srgb, var(--current-bright) 72%, transparent);
  color: var(--current-bright);
}

[data-theme="dark"] .marketing-plan-card__checkout--secondary:hover {
  background: var(--current-wash-strong);
  border-color: var(--current-bright);
  color: var(--current-deeper);
}

.marketing-pricing-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-soft);
}

.marketing-pricing-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  color: var(--ink);
  font-size: 0.94rem;
}

.marketing-pricing-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.marketing-pricing-table th,
.marketing-pricing-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}

.marketing-pricing-table thead th {
  background: color-mix(in srgb, var(--surface-strong) 82%, var(--current-wash) 18%);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 850;
}

.marketing-pricing-table tbody th {
  width: 38%;
  color: var(--ink);
  font-weight: 750;
}

.marketing-pricing-table td {
  color: var(--muted);
  font-weight: 750;
}

.marketing-pricing-table td:not(:first-child) {
  min-width: 6.5rem;
}

.marketing-pricing-table td[colspan="4"] {
  padding: 0.72rem 1rem;
}

.marketing-pricing-footnote {
  max-width: 52rem;
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.marketing-pricing-footnote sup,
.marketing-pricing-table sup {
  font-size: 0.72em;
  line-height: 1;
}

.marketing-pricing-table sup a {
  color: var(--current-deep);
  text-decoration: none;
}

.marketing-pricing-table sup a:hover {
  text-decoration: underline;
}

.marketing-pricing-table tbody tr:last-child th,
.marketing-pricing-table tbody tr:last-child td {
  border-bottom: 0;
}

/* "Included in every plan" replaces the old comparison table where every band
   was identically "Always included". */
.marketing-included {
  display: grid;
  gap: 1.35rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-soft);
}

.marketing-included__head {
  display: grid;
  gap: 0.5rem;
}

.marketing-included__head h3 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.1;
  text-wrap: balance;
}

.marketing-included__head p {
  max-width: 56rem;
  margin: 0;
}

.marketing-included__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 0 1.6rem;
}

.marketing-included__grid li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.62rem 0;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-secondary);
  font-weight: 600;
  line-height: 1.35;
}

.marketing-included__grid .material-symbols-outlined {
  flex: none;
  margin-top: 0.05rem;
  color: var(--current-deep);
  font-size: 1.2rem;
  font-variation-settings: "FILL" 1, "wght" 600;
}

.marketing-included__grid sup {
  color: var(--muted);
  font-size: 0.72em;
}

/* Guideline polish: balance headline wrapping and offset in-page anchors. */
.marketing-hero h1,
.marketing-section h2,
.marketing-product-card h3 {
  text-wrap: balance;
}

.marketing-section,
.marketing-product-grid [id] {
  scroll-margin-top: 4.5rem;
}

.marketing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 2.4rem;
  border-top: 1px solid var(--line);
}

.marketing-footer > div {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.marketing-footer__chip {
  width: 150px;
  height: 62px;
  border-radius: var(--radius-sm);
}

.marketing-footer p {
  max-width: 26rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.sai-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  width: fit-content;
  min-height: 44px;
  padding: 0.4rem 0.56rem;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  color: var(--muted);
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.sai-footer-link span {
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.sai-footer-link img {
  display: block;
  width: 108px;
  height: auto;
}

.sai-footer-link:hover {
  border-color: color-mix(in srgb, var(--current-deep) 40%, var(--line));
  background: color-mix(in srgb, var(--current-wash) 34%, var(--surface-strong));
  color: var(--ink);
}

.marketing-footer__link {
  border: 1px solid var(--current-border);
  background: var(--current-wash);
  color: var(--current-deep);
}

.marketing-footer__link:hover {
  background: var(--current-wash-strong);
}

[data-theme="dark"] .marketing-phone-frame {
  background: #ffffff;
}

.admin-nav-shell,
.admin-panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--current-wash) 12%), var(--surface) 10rem),
    var(--surface);
}

.admin-message[data-tone="success"] {
  border-color: color-mix(in srgb, var(--success) 36%, transparent);
  background:
    linear-gradient(90deg, var(--success-soft), transparent 74%),
    var(--surface);
}

.admin-message[data-tone="error"] {
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  background:
    linear-gradient(90deg, var(--danger-soft), transparent 74%),
    var(--surface);
}

.admin-message[data-tone="success"] span {
  color: var(--success);
}

.admin-message[data-tone="error"] span {
  color: var(--danger);
}

.admin-message {
  right: auto;
  bottom: var(--app-feedback-bottom, max(1rem, calc(env(safe-area-inset-bottom) + 1rem)));
  left: var(--app-feedback-center, 50%);
  transform: translateX(-50%);
}

.admin-message [data-dismiss-admin-message] {
  color: var(--ink-secondary);
}

.admin-message [data-dismiss-admin-message]:hover {
  color: var(--ink);
}

.kanban-drag-handle:active,
.kanban-drag-preview {
  cursor: grabbing;
}

.kanban-card--dragging {
  transform: none;
}

.facilities-workspace,
.facilities-pane {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.facilities-pane[hidden] {
  display: none;
}

.thermostat-control-card {
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem;
}

.thermostat-control-heading {
  align-items: flex-start;
  margin-bottom: 0;
}

.thermostat-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.thermostat-actions .small-button,
.thermostat-actions .ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.thermostat-actions .material-symbols-outlined {
  font-size: 1rem;
}

.thermostat-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.thermostat-summary-strip div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.78rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--well);
}

.thermostat-summary-strip strong {
  color: var(--ink);
  font-size: 1.24rem;
  line-height: 1;
}

.thermostat-data-current {
  margin: 0;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.thermostat-summary-strip span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.thermostat-empty-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--muted);
}

.thermostat-empty-state[hidden] {
  display: none;
}

.thermostat-empty-state .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: var(--radius-sm);
  background: var(--current-wash);
  color: var(--accent);
}

.thermostat-empty-state strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink);
}

.thermostat-empty-state p {
  margin: 0;
}

.thermostat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: start;
}

.thermostat-card {
  display: grid;
  gap: 0.68rem;
  min-width: 0;
  padding: 0.82rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.thermostat-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.thermostat-card-title {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.thermostat-card-title strong,
.thermostat-card-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thermostat-card-id {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.thermostat-card-status {
  justify-self: flex-start;
  margin-top: 0.18rem;
}

.thermostat-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.38rem;
  min-width: 7rem;
}

.thermostat-card-actions .small-button {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 2rem;
  padding: 0.36rem 0.55rem;
}

.thermostat-card-actions .material-symbols-outlined {
  font-size: 0.96rem;
}

.thermostat-readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.thermostat-readouts div {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.62rem;
  border-radius: var(--radius-sm);
  background: var(--control-bg);
}

.thermostat-readouts small,
.thermostat-facts dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.thermostat-readouts strong,
.thermostat-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 750;
}

.thermostat-facts {
  display: grid;
  gap: 0.42rem;
  margin: 0;
}

.thermostat-facts div {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: baseline;
}

.thermostat-mode-form,
.thermostat-hold-form {
  display: grid;
  gap: 0.55rem;
  align-items: end;
}

.thermostat-mode-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

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

.thermostat-temperature-control {
  display: grid;
  min-width: 0;
  gap: 0.5rem;
}

.thermostat-temperature-control[hidden] {
  display: none;
}

.thermostat-temperature-control[data-ecobee-temperature="single"] {
  grid-column: 1 / -1;
}

.thermostat-temperature-label {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.thermostat-temperature-stepper {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--well);
}

.thermostat-temperature-stepper button {
  width: 48px;
  min-height: 48px;
  padding: 0;
  font-size: 1.5rem;
}

.thermostat-temperature-value {
  padding: 0.25rem 0;
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-sm);
}

.thermostat-mode-form label,
.thermostat-hold-form label {
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.thermostat-mode-form select,
.thermostat-hold-form select,
.thermostat-hold-form input {
  width: 100%;
  min-height: 2.3rem;
}

.thermostat-resume-button {
  justify-self: flex-start;
}

.thermostat-settings-panel {
  width: min(760px, 100%);
}

.thermostat-settings-heading {
  align-items: flex-start;
  margin-bottom: 0.85rem;
}

.thermostat-settings-status {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.thermostat-settings-readouts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.thermostat-settings-facts {
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--well);
}

.thermostat-settings-workflow {
  display: grid;
  gap: 0.75rem;
}

.thermostat-settings-form {
  padding: 0.78rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.thermostat-settings-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  justify-content: space-between;
}

.thermostat-settings-footer p {
  min-width: min(100%, 16rem);
  margin: 0;
  text-align: right;
}

@media (max-width: 900px) {
  .thermostat-grid {
    grid-template-columns: 1fr;
  }

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

  .thermostat-readouts,
  .thermostat-mode-form,
  .thermostat-hold-form {
    grid-template-columns: 1fr;
  }

  .thermostat-facts div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .thermostat-card-head,
  .thermostat-settings-footer {
    align-items: flex-start;
  }

  .thermostat-card-actions,
  .thermostat-settings-footer p {
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 900px) {
  .marketing-nav {
    min-height: 66px;
    padding: 0.62rem 0.7rem;
  }

  .marketing-brand__chip {
    width: 136px;
    height: 56px;
    padding: 0.22rem 0.44rem;
  }

  .marketing-brand__chip .brand-lockup {
    height: 48px;
  }

  .marketing-nav__links {
    display: none;
  }

  .marketing-nav__mobile {
    display: flex;
  }

  .marketing-menu-button,
  .marketing-nav__mobile .marketing-theme-toggle {
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .marketing-mobile-panel {
    right: 0.7rem;
  }

  .marketing-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.4rem;
    min-height: auto;
    padding: 6rem 1rem 3.4rem;
  }

  .marketing-hero h1 {
    max-width: 12ch;
    font-size: 3.35rem;
    line-height: 1;
  }

  .marketing-hero p {
    max-width: 31rem;
    font-size: 1rem;
  }

  .marketing-actions {
    gap: 0.55rem;
  }

  .marketing-primary,
  .marketing-secondary {
    min-height: 44px;
  }

  .marketing-section {
    padding: 3.6rem 1rem;
  }

  .marketing-section h2 {
    font-size: 2.55rem;
  }

  .marketing-proof-strip,
  .marketing-product-grid__inner,
  .marketing-fieldwork__grid,
  .marketing-footer {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .marketing-fieldwork__grid {
    gap: 2rem;
  }

  .marketing-phone-frame {
    width: min(280px, 86vw);
  }

  .marketing-pricing__head h2 {
    max-width: 100%;
  }

  .marketing-pricing-table-wrap {
    margin-right: -1rem;
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
  }


  .marketing-footer {
    display: grid;
    align-items: start;
  }

  .marketing-footer > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .marketing-product-card--large {
    grid-row: auto;
  }

  .open-app-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.45rem;
  }

  .open-app-url-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .open-app-url-field > span {
    min-height: 2.3rem;
    border-left: 0;
    border-top: 1px solid var(--control-border);
  }

  html.app-document,
  body.app-shell {
    width: 100%;
    max-width: 100vw;
  }

  .app-shell .topbar,
  .app-shell .dashboard-grid,
  .app-shell .dashboard-grid > .tab-panel {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
  }

  .app-shell .topbar {
    overflow-x: clip;
  }

  .control-shell .topbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-right: 0;
    padding-inline: 0.75rem;
    overflow: visible;
  }

  .control-shell .brand {
    flex: 1 1 auto;
    max-width: calc(100% - 6rem);
  }

  .control-shell .brand-logo-chip {
    width: 164px;
    height: 72px;
  }

  .control-shell .brand-lockup {
    height: 62px;
  }

  .control-nav {
    display: none;
  }

  .control-topbar-actions {
    display: none;
  }

  .control-mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .control-mobile-actions .theme-menu-button {
    width: 42px;
    min-width: 42px;
    padding-inline: 0;
  }

  .control-mobile-panel:not([hidden]) {
    display: grid;
  }

  .app-shell .dashboard-grid {
    padding: 0;
  }

  .app-shell .dashboard-grid > .tab-panel {
    padding: 1rem;
  }

  .page-head h2 {
    font-size: 1.65rem;
  }

  .operations-queue-list,
  .operations-support-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .operations-queue-row--role {
    grid-column: auto;
  }

  .operations-support-grid > .card:nth-child(2),
  .operations-support-grid > .card:nth-child(3) {
    margin-top: 0;
  }

  .admin-console-hero {
    min-height: 0;
  }

  .control-grid {
    width: min(100% - 1rem, 86rem);
    padding-top: 0.75rem;
  }

  .control-page-head,
  .control-section-head,
  .control-risk-grid,
  .control-tenant-row,
  .control-danger-row,
  .control-danger-inline-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-page-head,
  .control-section-head {
    align-items: stretch;
  }

  .control-form {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .control-health-grid div {
    min-height: 3.7rem;
    padding: 0.68rem;
  }

  .control-health-grid strong {
    font-size: 1.05rem;
  }

  .control-section-head .control-health-grid {
    min-width: 0;
  }

  .control-settings-disclosure summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-settings-state {
    justify-self: start;
  }

  .control-legacy-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-legacy-count {
    justify-items: start;
    place-items: start;
    min-width: 0;
  }

  .control-legacy-actions {
    justify-content: stretch;
  }

  .control-legacy-actions form,
  .control-legacy-actions button {
    width: 100%;
  }

  .control-tenant-actions {
    justify-items: start;
    min-width: 0;
  }

  .control-tenant-access,
  .control-tenant-delete,
  .control-tenant-access form,
  .control-tenant-delete form {
    justify-items: stretch;
    width: 100%;
  }

  .control-tenant-access summary,
  .control-tenant-delete summary {
    width: 100%;
  }

  .control-tenant-actions span {
    max-width: 100%;
    text-align: left;
  }

  .control-risk-zone {
    padding: 0.75rem;
  }

  .control-danger-inline-form button {
    width: 100%;
  }
}

.mobile-menu-button,
.mobile-topbar-spacer,
.app-mobile-panel {
  display: none;
}

.mobile-menu-form {
  margin: 0;
}

@media (max-width: 900px) {
  .app-shell .topbar,
  .admin-shell .topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 0.5rem;
    min-height: 82px;
    padding: 0.55rem calc(0.9rem + env(safe-area-inset-right)) 0.6rem calc(0.9rem + env(safe-area-inset-left));
    border-bottom: 1px solid var(--line);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--current-wash) 8%), var(--surface));
    overflow: visible;
  }

  .app-shell .topbar .brand,
  .admin-shell .topbar .brand {
    grid-column: 2;
    justify-self: center;
    justify-content: center;
    max-width: min(58vw, 12.5rem);
  }

  .app-shell .topbar .brand-logo-chip,
  .admin-shell .topbar .brand-logo-chip {
    width: min(176px, 52vw);
    height: 68px;
    padding: 0.24rem 0.5rem;
    border-radius: 14px;
  }

  .app-shell .topbar .brand-lockup,
  .admin-shell .topbar .brand-lockup {
    height: 58px;
  }

  .admin-shell .topbar .admin-mode-chip,
  .app-shell .topbar .tab-nav,
  .app-shell .topbar .topbar-actions,
  .admin-shell .topbar .topbar-actions {
    display: none;
  }

  .control-shell .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .control-shell .topbar .brand {
    grid-column: 1;
    justify-self: start;
  }

  .control-mobile-actions {
    grid-column: 2;
    justify-self: end;
  }

  .mobile-menu-button {
    grid-column: 1;
    justify-self: start;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-strong);
    color: var(--ink);
    box-shadow: 0 1px 0 var(--line-soft);
  }

  .mobile-menu-button:hover,
  .mobile-menu-button:focus-visible {
    border-color: var(--current-border);
    background: var(--current-wash);
    color: var(--current-deep);
  }

  .mobile-menu-button .material-symbols-outlined {
    font-size: 1.45rem;
    font-variation-settings: "FILL" 0, "wght" 650, "GRAD" 0, "opsz" 24;
  }

  .mobile-topbar-spacer {
    grid-column: 3;
    display: block;
    width: 44px;
    height: 44px;
  }

  .app-mobile-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: calc(0.75rem + env(safe-area-inset-left));
    right: calc(0.75rem + env(safe-area-inset-right));
    z-index: calc(var(--z-topbar) + 1);
    align-content: start;
    gap: 0.65rem;
    max-height: calc(100dvh - 6.25rem - env(safe-area-inset-bottom));
    padding: 0.72rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
    box-shadow: var(--shadow-raised);
    backdrop-filter: blur(18px);
  }

  .app-mobile-panel:not([hidden]) {
    display: grid;
  }

  .app-mobile-panel[hidden] {
    display: none;
  }

  .mobile-menu-user {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.68rem;
    align-items: center;
    padding: 0.35rem 0.38rem 0.68rem;
    border-bottom: 1px solid var(--line);
  }

  .mobile-menu-user div {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
  }

  .mobile-menu-user strong,
  .mobile-menu-user span:not(.user-avatar) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-user strong {
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.15;
  }

  .mobile-menu-user span:not(.user-avatar) {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
  }

  .mobile-menu-section {
    display: grid;
    gap: 0.28rem;
    padding: 0.46rem;
    border: 1px solid var(--line-soft);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 82%, var(--well) 18%);
  }

  .mobile-menu-section--account {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--current-wash) 72%, transparent), transparent 76%),
      color-mix(in srgb, var(--surface) 86%, var(--well) 14%);
  }

  .mobile-menu-section-label {
    padding: 0.16rem 0.32rem 0.22rem;
    color: var(--faint);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  .mobile-menu-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.62rem;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0.62rem 0.68rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ink-secondary);
    box-shadow: none;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 720;
    line-height: 1.1;
    text-align: left;
    text-decoration: none;
  }

  .mobile-menu-item span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .mobile-menu-item .material-symbols-outlined,
  .mobile-menu-item .theme-toggle__icon {
    justify-self: center;
    width: 1.25rem;
    color: var(--muted);
    font-size: 1.18rem;
    font-variation-settings: "FILL" 0, "wght" 550, "GRAD" 0, "opsz" 24;
  }

  .mobile-menu-item:hover,
  .mobile-menu-item:focus-visible,
  .mobile-menu-item.is-active {
    border-color: var(--current-border);
    background: var(--current-wash);
    color: var(--current-deep);
    transform: none;
  }

  .mobile-menu-item.is-active {
    box-shadow: inset 3px 0 0 var(--current);
  }

  .mobile-menu-item:hover .material-symbols-outlined,
  .mobile-menu-item:focus-visible .material-symbols-outlined,
  .mobile-menu-item.is-active .material-symbols-outlined,
  .mobile-menu-item:hover .theme-toggle__icon,
  .mobile-menu-item:focus-visible .theme-toggle__icon {
    color: var(--current-deep);
  }

  .mobile-menu-item--danger {
    color: var(--danger);
  }

  .mobile-menu-item--danger .material-symbols-outlined {
    color: var(--danger);
  }

  .mobile-menu-form {
    width: 100%;
  }

  .mobile-menu-form .mobile-menu-item {
    justify-content: stretch;
  }

  .admin-shell .admin-nav-shell {
    display: none;
  }

  .admin-shell .admin-console-grid {
    width: 100%;
    padding: 0.85rem 0.85rem 1.4rem;
  }

  .admin-shell .admin-console-hero,
  .admin-shell .tab-panel,
  .admin-shell .admin-panel {
    grid-column: 1;
  }

  .admin-shell .admin-panel {
    padding: 0.82rem;
  }

  .app-shell .dashboard-grid > .tab-panel {
    padding: 1rem 0.85rem 1.45rem;
  }

  .page-head {
    gap: 0.7rem;
    padding-bottom: 0.82rem;
  }

  .page-head h2 {
    font-size: 1.55rem;
  }

  .page-head-actions,
  .section-actions,
  .board-controls,
  .purchase-command-tools,
  .thermostat-actions,
  .modal-actions,
  .private-vault-access-banner__actions {
    width: 100%;
    justify-content: stretch;
  }

  .page-head-actions > *,
  .section-actions > *,
  .board-controls > *,
  .purchase-command-tools > *,
  .thermostat-actions > *,
  .modal-actions > *,
  .private-vault-access-banner__actions > * {
    flex: 1 1 10rem;
    min-width: 0;
  }

  .card,
  .admin-panel,
  .modal-panel {
    border-radius: 16px;
  }

  .modal {
    align-items: end;
    padding: 0;
  }

  .modal-panel {
    width: 100%;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top) - 1rem));
    padding: 0.9rem;
    border-radius: 18px 18px 0 0;
  }

  .role-popover,
  .approval-popover {
    left: calc(0.75rem + env(safe-area-inset-left)) !important;
    right: calc(0.75rem + env(safe-area-inset-right)) !important;
    width: auto;
    max-height: calc(100dvh - 6rem);
  }

  .table-shell,
  .audit-log-table,
  .kanban-board-shell {
    max-width: 100%;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-board {
    min-width: min(52rem, calc(300vw - 2rem));
  }

  .team-grid,
  .event-list,
  .approval-list,
  .staff-open-list,
  .operations-mini-list {
    gap: 0.62rem;
  }
}

@media (max-width: 520px) {
  .billing-choice-grid,
  .billing-slug-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-slug-field input {
    border-radius: 9px 9px 0 0;
  }

  .billing-slug-field__suffix {
    justify-content: flex-start;
    max-width: none;
    min-height: 2.45rem;
    border-top: 0;
    border-left: 1px solid var(--line);
    border-radius: 0 0 9px 9px;
  }

  .app-shell .topbar,
  .admin-shell .topbar {
    min-height: 76px;
    padding-inline: calc(0.68rem + env(safe-area-inset-left)) calc(0.68rem + env(safe-area-inset-right));
  }

  .app-shell .topbar .brand-logo-chip,
  .admin-shell .topbar .brand-logo-chip {
    width: min(160px, 54vw);
    height: 62px;
  }

  .app-shell .topbar .brand-lockup,
  .admin-shell .topbar .brand-lockup {
    height: 53px;
  }

  .app-mobile-panel {
    left: calc(0.55rem + env(safe-area-inset-left));
    right: calc(0.55rem + env(safe-area-inset-right));
    max-height: calc(100dvh - 5.75rem - env(safe-area-inset-bottom));
    padding: 0.58rem;
    border-radius: 16px;
  }

  .mobile-menu-section {
    padding: 0.38rem;
  }

  .mobile-menu-item {
    min-height: 44px;
    padding: 0.58rem 0.62rem;
    font-size: 0.9rem;
  }

  .mobile-menu-user {
    padding-bottom: 0.56rem;
  }
}

[data-theme="dark"] .mobile-menu-button {
  border-color: var(--line-strong);
  background: var(--surface-strong);
  color: var(--ink);
}

[data-theme="dark"] .mobile-menu-button:hover,
[data-theme="dark"] .mobile-menu-button:focus-visible {
  border-color: var(--current-border);
  background: color-mix(in srgb, var(--surface-strong) 70%, var(--current-wash) 30%);
  color: var(--ink);
}

[data-theme="dark"] .app-mobile-panel {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-strong) 92%, #33241f 8%);
}

[data-theme="dark"] .mobile-menu-section {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 84%, var(--well) 16%);
}

[data-theme="dark"] .mobile-menu-section--account {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--current-wash) 68%, transparent), transparent 76%),
    color-mix(in srgb, var(--surface) 88%, var(--well) 12%);
}

[data-theme="dark"] .mobile-menu-item {
  color: var(--ink-secondary);
}

[data-theme="dark"] .mobile-menu-item:hover,
[data-theme="dark"] .mobile-menu-item:focus-visible,
[data-theme="dark"] .mobile-menu-item.is-active {
  border-color: var(--current-border);
  background: color-mix(in srgb, var(--surface-strong) 72%, var(--current-wash) 28%);
  color: var(--ink);
}

[data-theme="dark"] .mobile-menu-item:hover .material-symbols-outlined,
[data-theme="dark"] .mobile-menu-item:focus-visible .material-symbols-outlined,
[data-theme="dark"] .mobile-menu-item.is-active .material-symbols-outlined,
[data-theme="dark"] .mobile-menu-item:hover .theme-toggle__icon,
[data-theme="dark"] .mobile-menu-item:focus-visible .theme-toggle__icon {
  color: var(--current-bright);
}

/* ==========================================================
   v5 — sharper application frame
   Full-width operational surfaces with tighter, more serious corners.
   ========================================================== */

.topbar,
.dashboard-grid,
.release-footer,
.profile-page,
.admin-context-strip,
.admin-console-grid,
.control-grid {
  max-width: none;
}

.release-footer,
.dashboard-grid,
.profile-page,
.admin-context-strip,
.admin-console-grid,
.control-grid {
  width: calc(100% - (var(--app-gutter) * 2));
}

.app-shell .dashboard-grid,
.app-shell .dashboard-grid > .tab-panel,
.profile-page {
  width: 100%;
}

.admin-shell .admin-console-grid,
.control-shell .control-grid {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  align-content: start;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
}

.admin-shell .admin-console-grid {
  padding: 0.92rem var(--app-gutter) 1.4rem;
}

.admin-shell .admin-nav-shell {
  top: 0.92rem;
}

.control-shell .control-grid {
  padding: 1.05rem var(--app-gutter) 2rem;
}

@media (max-width: 900px) {
  .admin-shell .admin-console-grid {
    padding: 0.85rem 0.85rem 1.4rem;
  }

  .control-shell .control-grid {
    padding: 0.75rem 0.75rem 1.4rem;
  }
}

button:not(.tab-button):not(.calendar-day):not(.venue-cal-viewbtn):not(.venue-cal-zoombtn):not(.venue-cal-legend-item),
.ghost-button,
.small-button,
.theme-toggle,
.topbar .theme-toggle,
.user-pill,
.topbar .user-pill,
.work-menu-button,
.work-menu-item,
.mobile-menu-button,
.mobile-menu-item,
.seg-tab,
.small-icon-button,
.kanban-drag-handle {
  border-radius: var(--radius-sm);
}

.badge,
[class*="-badge"],
[class*="-pill"],
.release-footer__license-trigger,
.release-footer__license .release-footer__license-warning,
.release-footer__codename,
.release-footer__copyright,
.release-footer__theme,
.marketing-footer__theme,
.admin-context-pills span,
.marketing-plan-card__badge,
.marketing-plan-card__checkout {
  border-radius: var(--radius-sm);
}

.card,
.login-card,
.profile-header-card,
.profile-card,
.admin-nav-shell,
.admin-panel,
.admin-card,
.modal-panel,
.role-popover,
.work-menu-popover,
.admin-console-hero,
.admin-context-strip,
.control-page-head,
.control-card,
.control-settings-disclosure,
.control-risk-zone,
.table-shell,
.audit-log-table,
.kanban-board-shell,
.kanban-column,
.board-message,
.app-mobile-panel,
.mobile-menu-section,
.private-vault-access-banner,
.thermostat-card,
.thermostat-control-card,
.thermostat-empty-state,
.marketing-proof-strip article,
.marketing-product-card,
.marketing-plan-card,
.marketing-pricing-table-wrap,
.app-shell [class*="-card"],
.admin-shell [class*="-card"],
.profile-shell [class*="-card"],
.control-shell [class*="-card"] {
  border-radius: var(--radius);
}

.login-card,
.login-shell .login-card,
.modal-panel,
.app-mobile-panel,
.admin-console-hero,
.admin-shell .admin-console-hero,
.control-page-head,
.control-shell .control-page-head,
.profile-header-card,
.profile-shell .profile-header-card {
  border-radius: var(--radius-lg);
}

input,
textarea,
select,
.secret-card-fieldset,
.secret-card-field-grid {
  border-radius: var(--radius-sm);
}

.user-avatar {
  border-radius: 50%;
}

/* ==========================================================
   v6 — content measure
   Full-width chrome, intentional reading widths for dense data.
   ========================================================== */

#panel-purchasing,
#panel-card-spend,
#panel-time-off {
  justify-items: stretch;
}

.purchase-center {
  display: grid;
  gap: 0.9rem;
  width: 100%;
}

.purchase-center > .page-head,
.purchase-center > .purchase-workspace,
.purchase-center > .church-card-workspace {
  width: 100%;
}

.profile-page {
  width: min(100%, 76rem);
  justify-self: center;
}

@media (max-width: 900px) {
  .release-footer,
  .dashboard-grid,
  .admin-context-strip,
  .admin-console-grid,
  .control-grid {
    width: 100%;
  }

  .modal-panel {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .purchase-center,
  .purchase-workspace,
  .church-card-workspace,
  .time-off-shell,
  .profile-page {
    width: 100%;
    max-width: none;
  }

  .time-off-team-bank-card,
  .time-off-history-card {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Reporting — one approved ledger powers both native review and payroll export. */
.reporting-toolbar,
.reporting-filter {
  display: flex;
  align-items: center;
}

.reporting-toolbar {
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.reporting-ledger > .section-block-head {
  align-items: center;
}

.reporting-filter {
  gap: 0.5rem;
}

.reporting-filter label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reporting-filter select {
  min-width: 10.5rem;
  min-height: 42px;
}

.reporting-export {
  align-self: center;
  min-height: 42px;
  line-height: 1;
}

@media (max-width: 720px) {
  .reporting-ledger > .section-block-head {
    align-items: stretch;
    flex-direction: column;
  }

  .reporting-toolbar,
  .reporting-filter {
    justify-content: stretch;
  }

  .reporting-filter {
    flex: 1 1 100%;
  }

  .reporting-filter select,
  .reporting-toolbar .ghost-button {
    flex: 1;
  }
}

/* Time tracking — an operational ledger, not a generic dashboard card stack. */
.time-ledger-shell {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.time-clock-band,
.time-submit-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.time-clock-band strong,
.time-clock-band small,
.time-submit-copy > strong,
.time-submit-copy > span {
  display: block;
  margin: 0;
}

.time-ledger-kicker {
  color: var(--current-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.time-ledger-period {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 1.8rem;
  flex-wrap: wrap;
}

.time-submit-band span,
.time-service-row small,
.time-unit-row small {
  color: var(--muted);
}

.time-clock-band {
  color: var(--chrome-text);
  border-color: var(--chrome);
  background: var(--chrome);
}

.time-clock-band .time-ledger-kicker,
.time-clock-band small {
  color: var(--chrome-muted);
}

.time-clock-band strong {
  margin: 0.2rem 0;
  font-size: 1.35rem;
}

.time-clock-button {
  min-width: 160px;
  background: var(--brand-amber);
  color: var(--brand-plum);
}

.time-clock-button.is-running {
  background: var(--brand-ember);
  color: #fff;
}

.time-clock-button .material-symbols-outlined {
  vertical-align: middle;
}

.time-ledger-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.time-ledger-section > .section-block-head,
.time-ledger-section > .empty-table-message {
  padding: 1rem 1.2rem;
}

.time-ledger-total {
  color: var(--brand-plum);
  font-size: 1.05rem;
  white-space: nowrap;
}

.time-paid-leave-ledger {
  display: grid;
  gap: 0.55rem;
  padding: 1rem 1.2rem 1.2rem;
  border-top: 1px solid var(--line);
}

.time-paid-leave-ledger h4 {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.82rem;
}

.time-paid-leave-ledger .data-table {
  min-width: 620px;
}

.time-leave-returned {
  color: var(--success);
  font-size: 0.78rem;
  font-weight: 700;
}

.time-shift-action-heading {
  width: 1%;
  text-align: right;
}

.time-shift-actions {
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  white-space: nowrap;
}

.time-shift-actions .small-button,
.time-shift-actions .small-icon-button {
  min-height: 2.35rem;
}

.time-shift-delete {
  color: var(--danger);
}

.time-shift-edit-flag {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  margin-top: 0.28rem;
  color: var(--current-deep);
  font-size: 0.72rem;
  font-weight: 700;
}

.time-shift-edit-flag .material-symbols-outlined {
  font-size: 1rem;
}

.time-shift-edit-flag.is-approver {
  flex-wrap: wrap;
  color: var(--color-warning-text);
}

.time-shift-modal-panel {
  width: min(560px, calc(100vw - 2rem));
}

.time-history-modal-panel {
  width: min(900px, calc(100vw - 2rem));
}

.time-approver-entry-modal-panel {
  width: min(680px, calc(100vw - 2rem));
}

.time-history-modal-body {
  display: grid;
  gap: 1rem;
}

.time-history-modal-panel .stat-strip {
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.75fr));
}

.time-history-modal-panel .stat-cell:first-child .stat-value {
  overflow-wrap: anywhere;
  white-space: normal;
}

.time-review-note {
  display: grid;
  gap: 0.4rem;
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 750;
}

.time-review-note textarea {
  width: 100%;
  resize: vertical;
}

.time-history-section {
  display: grid;
  gap: 0.55rem;
}

.time-history-section h4 {
  margin: 0;
  font-size: 0.92rem;
}

.time-history-meta {
  display: flex;
  gap: 0.4rem 1rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.8rem;
}

.time-shift-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.time-shift-edit-form label {
  display: grid;
  gap: 0.4rem;
}

.time-approver-entry-form,
.time-approver-hour-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.time-approver-service-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

.time-approver-hour-fields[hidden],
.time-approver-service-fields[hidden] {
  display: none;
}

.time-approver-entry-form > label,
.time-approver-hour-fields label,
.time-approver-service-fields label {
  display: grid;
  gap: 0.4rem;
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 750;
}

.time-approver-entry-form > label,
.time-approver-hour-fields,
.time-approver-hour-fields label,
.time-approver-service-fields,
.time-approver-service-fields label {
  min-width: 0;
}

.time-approver-entry-form input,
.time-approver-entry-form select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 44px;
}

.time-review-add-entry {
  margin-right: auto;
}

@media (max-width: 560px) {
  .time-shift-edit-form,
  .time-approver-entry-form,
  .time-approver-hour-fields {
    grid-template-columns: 1fr;
  }
}

[data-theme="dark"] .time-ledger-total {
  color: var(--brand-amber);
}

.time-service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 1rem;
}

.time-service-options {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.time-service-list,
.time-unit-list {
  border-top: 1px solid var(--line-soft);
}

.time-service-row,
.time-unit-row {
  display: grid;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--line-soft);
}

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

.time-service-row.is-selected {
  background: var(--success-soft);
}

.time-service-row > div,
.time-unit-row > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

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

.time-submit-band {
  border-left: 4px solid var(--brand-amber);
  padding-block: 0.8rem;
}

.time-submit-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.time-submit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
}

.time-approval-ledger {
  margin-top: 0.5rem;
  border-top: 4px solid var(--brand-ember);
}

.time-admin-shell,
.time-admin-section,
.time-workforce-create-form,
.time-workforce-edit-form {
  display: grid;
  gap: 1rem;
}

.time-admin-shell {
  align-self: start;
  align-content: start;
  grid-auto-rows: max-content;
}

.time-admin-policy-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.time-admin-policy-strip > div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem;
  background: var(--surface-soft);
}

.time-admin-policy-strip > div > span:last-child {
  display: flex;
  flex-direction: column;
}

.time-admin-policy-strip small {
  color: var(--muted);
}

.time-admin-section {
  overflow: hidden;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.time-policy-summary {
  min-width: 0;
}

.time-policy-settings-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.time-policy-modal-panel {
  width: min(600px, calc(100vw - 2rem));
}

.workforce-create-modal-panel {
  width: min(760px, calc(100vw - 2rem));
}

.workforce-edit-modal-panel {
  width: min(960px, calc(100vw - 2rem));
}

.workforce-edit-modal-panel > .section-heading {
  flex-direction: row;
  align-items: center;
}

.sunday-service-modal-panel {
  width: min(600px, calc(100vw - 2rem));
}

.sunday-service-form {
  display: grid;
  gap: 1rem;
}

.sunday-service-form label {
  display: grid;
  gap: 0.35rem;
}

.sunday-service-form > p:empty {
  display: none;
}

.sunday-service-status {
  justify-self: start;
}

.time-policy-form {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.time-policy-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.time-policy-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.time-policy-field--wide {
  grid-column: 1 / -1;
}

.time-policy-field > span {
  color: var(--ink-secondary);
  font-size: 0.75rem;
  font-weight: 750;
}

.time-policy-field select,
.time-policy-field input {
  width: 100%;
  min-height: 44px;
}

.time-policy-field[hidden] {
  display: none;
}

.time-policy-field small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.time-policy-message:empty {
  display: none;
}

.time-workforce-registry {
  display: grid;
  align-content: start;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.time-workforce-registry > .section-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.8rem 1rem;
  background: var(--surface-soft);
}

.time-workforce-registry > .section-block-head > div {
  display: grid;
  gap: 0.1rem;
}

.time-workforce-registry > .section-block-head h1,
.time-workforce-registry > .section-block-head h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.time-workforce-registry > .section-block-head .section-block-hint {
  color: var(--muted);
  font-size: 0.8rem;
}

.time-workforce-account-label {
  display: flex;
}

.time-workforce-table .cell-sub {
  color: var(--muted);
}

.time-workforce-create-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.time-workforce-create-form label,
.time-workforce-edit-form label {
  display: grid;
  gap: 0.35rem;
}

/* The author display rule above beats the UA [hidden] rule, so the
   access-mode toggle's field.hidden would otherwise do nothing here. */
.time-workforce-create-form label[hidden],
.time-workforce-edit-form label[hidden] {
  display: none;
}

.time-workforce-field-label {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-height: 1.2rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.time-workforce-create-form > p:empty,
.time-workforce-edit-form > p:empty {
  display: none;
}

.time-workforce-code-result {
  display: grid;
  grid-template-columns: auto minmax(9rem, 1fr) minmax(9rem, 1fr) auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border: 1px solid var(--current-border);
  border-radius: 6px;
  background: var(--current-wash);
}

.time-workforce-code-result[hidden] {
  display: none;
}

.time-workforce-code-result > span:not(.material-symbols-outlined) {
  display: flex;
  flex-direction: column;
}

.time-workforce-code-result small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.time-workforce-code-result output {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

.time-workforce-table .is-muted {
  opacity: 0.68;
}

.time-workforce-account-label {
  align-items: center;
  gap: 0.38rem;
  color: var(--ink-secondary);
  font-weight: 700;
}

.time-workforce-account-label .material-symbols-outlined {
  font-size: 1.15rem;
}

.time-workforce-account-label.is-workforce {
  color: var(--current-deep);
}

.time-workforce-edit-form {
  grid-template-columns: minmax(0, 1fr);
}

.time-workforce-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.time-workforce-profile-grid input:not([type="checkbox"]),
.time-workforce-profile-grid select {
  width: 100%;
  min-height: 44px;
  height: 44px;
}

.time-workforce-status-field {
  display: grid;
  grid-template-rows: auto 44px;
  gap: 0.35rem;
}

.time-workforce-access {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

.time-workforce-access > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.time-workforce-access > div:first-child > span {
  color: var(--muted);
  font-size: 0.78rem;
}

.time-workforce-access > .full-span {
  grid-column: 1 / -1;
}

.time-workforce-actions,
.time-workforce-edit-form > .full-span {
  grid-column: 1 / -1;
}

.time-workforce-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
}

.time-workforce-actions .danger-button {
  margin-left: auto;
}

.time-workforce-edit-form .time-workforce-status-control {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 0.72rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--ink-secondary);
}

@media (max-width: 760px) {
  .time-clock-band,
  .time-submit-band {
    align-items: stretch;
    flex-direction: column;
  }

  .time-service-layout {
    grid-template-columns: 1fr;
  }

  .time-clock-button,
  .time-submit-band button {
    width: 100%;
  }

  .time-admin-policy-strip,
  .time-workforce-create-form,
  .time-workforce-edit-form,
  .time-workforce-profile-grid {
    grid-template-columns: 1fr;
  }

  .sunday-service-form {
    grid-template-columns: 1fr;
  }

  .time-policy-fields {
    grid-template-columns: 1fr;
  }

  .time-policy-settings-row {
    grid-template-columns: 1fr;
  }

  .time-workforce-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .time-workforce-actions .danger-button {
    margin-left: 0;
  }

  .time-workforce-access {
    grid-template-columns: 1fr;
  }

  .time-workforce-code-result {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .time-workforce-code-result button {
    grid-column: 1 / -1;
  }
}

/* Control audit log: a dense command trace with immutable receipt numbers. */
.control-audit-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.control-audit-overview div {
  display: grid;
  gap: 0.18rem;
  min-height: 4.6rem;
  padding: 0.82rem 0.9rem;
  background: var(--surface-soft);
}

.control-audit-overview span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.control-audit-overview strong {
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.control-shell .control-audit-tool {
  display: grid;
  gap: 0.72rem;
  padding: 0;
  background: transparent;
}

.control-audit-filter {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(11rem, 0.45fr) minmax(10rem, 0.4fr) auto;
  gap: 0.62rem;
  align-items: end;
  padding: 0.78rem;
  border-radius: 4px;
  background: var(--surface-soft);
}

.control-audit-filter label {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 740;
}

.control-audit-filter input,
.control-audit-filter select {
  width: 100%;
  min-width: 0;
}

.control-audit-filter button {
  min-height: 42px;
}

.control-audit-ledger {
  display: grid;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-soft);
}

.control-audit-entry {
  position: relative;
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  gap: 0.78rem;
  align-items: start;
  min-width: 0;
  padding: 0.9rem 0.9rem 0.9rem 0.65rem;
  border-top: 1px solid var(--line);
}

.control-audit-entry:first-child {
  border-top: 0;
}

.control-audit-entry:hover {
  background: var(--surface-strong);
}

.control-audit-entry--danger {
  box-shadow: inset 3px 0 color-mix(in srgb, var(--danger) 74%, transparent);
}

.control-audit-sequence {
  position: relative;
  display: grid;
  grid-template-columns: 0.65rem minmax(0, 1fr);
  gap: 0.38rem;
  align-items: center;
  min-height: 1.25rem;
}

.control-audit-sequence span {
  position: relative;
  z-index: 1;
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid var(--surface-soft);
  border-radius: 50%;
  background: var(--current);
  box-shadow: 0 0 0 1px var(--current-border);
}

.control-audit-entry:hover .control-audit-sequence span {
  border-color: var(--surface-strong);
}

.control-audit-sequence code,
.control-audit-meta code {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.control-audit-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.control-audit-copy time {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.control-audit-copy > strong {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.control-audit-action {
  justify-self: end;
  max-width: 16rem;
  border: 0;
  border-radius: 3px;
  background: var(--well);
  color: var(--current-deep);
  font-size: 0.68rem;
  font-weight: 760;
  text-align: right;
}

.control-audit-entry--danger .control-audit-action {
  background: var(--danger-soft);
  color: var(--danger);
}

.control-audit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem 0.9rem;
  color: var(--muted);
  font-size: 0.74rem;
}

.control-audit-meta span {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: baseline;
  min-width: 0;
  overflow-wrap: anywhere;
}

.control-audit-meta b {
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 780;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.control-audit-details {
  grid-column: 2 / -1;
  min-width: 0;
}

.control-audit-details summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.35rem 0.5rem;
  border-radius: 3px;
  color: var(--current-deep);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 740;
  list-style-position: inside;
}

.control-audit-details summary:hover,
.control-audit-details summary:focus-visible {
  background: var(--current-wash);
}

.control-audit-details dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0.45rem 0 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}

.control-audit-details dl div {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.58rem;
  background: var(--well);
}

.control-audit-details dt {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.control-audit-details dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.control-audit-empty {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 3rem 1rem;
  color: var(--muted);
  text-align: center;
}

.control-audit-empty .material-symbols-outlined {
  color: var(--current-deep);
  font-size: 1.8rem;
}

.control-audit-empty strong {
  color: var(--ink);
}

.control-audit-empty p {
  margin: 0;
  font-size: 0.82rem;
}

@media (max-width: 820px) {
  .control-audit-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-audit-search {
    grid-column: 1 / -1;
  }

  .control-audit-filter button {
    justify-self: start;
  }

  .control-audit-details dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1320px) and (min-width: 1181px) {
  .control-nav-link {
    padding-inline: 0.55rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .control-shell .topbar {
    justify-content: space-between;
    gap: 0.7rem;
    overflow: visible;
  }

  .control-shell .brand {
    flex: 1 1 auto;
    max-width: calc(100% - 6rem);
  }

  .control-nav,
  .control-topbar-actions {
    display: none;
  }

  .control-mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .control-mobile-actions .theme-menu-button {
    width: 42px;
    min-width: 42px;
    padding-inline: 0;
  }

  .control-mobile-panel:not([hidden]) {
    display: grid;
  }
}

@media (max-width: 620px) {
  .control-audit-overview,
  .control-audit-filter,
  .control-audit-details dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-audit-search {
    grid-column: auto;
  }

  .control-audit-entry {
    grid-template-columns: 4.8rem minmax(0, 1fr);
  }

  .control-audit-action {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .control-audit-details {
    grid-column: 2;
  }
}

/* ============================================================================
   Operational primitives (v5 "Ledger") — Planning-Center-style full-width UI
   Shared, token-based components used across screens to replace the generic
   uniform-card grids: dense data tables, master/detail split views, a thin KPI
   stat strip, a quiet screen toolbar, and de-carded list rows. These consume
   the existing Ember token set only; they introduce no new colors.
   ============================================================================ */

/* --- Quiet screen toolbar: search + filters left, one primary action right --- */
.screen-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.8rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.screen-toolbar > .screen-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.screen-toolbar .toolbar-search {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: min(22rem, 100%);
  flex: 0 1 22rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 8px;
  background: var(--surface-inset, var(--surface-soft));
  color: var(--muted);
}

.screen-toolbar .toolbar-search:focus-within {
  border-color: var(--current-border, var(--accent));
  box-shadow: 0 0 0 3px var(--current-wash);
}

.screen-toolbar .toolbar-search .material-symbols-outlined {
  font-size: 1.1rem;
}

.screen-toolbar .toolbar-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.screen-toolbar .toolbar-search input:focus-visible {
  outline: none;
}

.screen-toolbar .toolbar-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.82rem;
  font-weight: 600;
}

.screen-toolbar .toolbar-filter select {
  min-height: 2.1rem;
}

/* --- Thin KPI stat strip: label + tabular figure, hairline separators. ----- */
.stat-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.stat-strip .stat-cell {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border-left: 1px solid var(--line);
  min-width: 0;
  /* Query container so the value can size itself to the cell width below. */
  container-type: inline-size;
}

.stat-strip .stat-cell:first-child {
  border-left: 0;
}

.stat-strip .stat-cell small,
.stat-strip .stat-cell .stat-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.stat-strip .stat-cell strong,
.stat-strip .stat-cell .stat-value {
  color: var(--ink);
  /* Scale to the cell width so multi-digit amounts (e.g. $1,000) stay on one line
     instead of breaking mid-number. Floor keeps narrow cells readable; the ceiling
     preserves the original size on comfortably wide cells. The plain value is a
     fallback for browsers without container-query units. */
  font-size: 1.32rem;
  font-size: clamp(0.9rem, 16cqi, 1.32rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-strip .stat-cell .stat-value--accent {
  color: var(--accent);
}

@media (max-width: 720px) {
  .stat-strip {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
  .time-history-modal-panel .stat-strip {
    grid-template-columns: 1fr;
  }
  .stat-strip .stat-cell {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .stat-strip .stat-cell:first-child {
    border-top: 0;
  }
}

/* --- Dense data table: full-width, sticky header, hover rows, numeric cols. - */
.data-table-wrap {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: auto;
  overscroll-behavior-x: contain;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: middle;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.data-table tbody td {
  padding: 0.62rem 0.85rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--line-soft, var(--line));
  color: var(--ink-secondary);
}

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

.data-table tbody tr:hover td {
  background: var(--surface-soft);
}

.data-table tbody tr[data-row-selected="true"] td {
  background: var(--current-wash);
}

.data-table .cell-primary {
  color: var(--ink);
  font-weight: 600;
}

.data-table .cell-strong {
  color: var(--ink);
  font-weight: 700;
}

.data-table .col-num,
.data-table td.col-num,
.data-table th.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table .col-shrink {
  width: 1%;
  white-space: nowrap;
}

.data-table .cell-actions {
  display: inline-flex;
  gap: 0.4rem;
  justify-content: flex-end;
  white-space: nowrap;
}

.data-table .cell-sub {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.data-table .cell-empty {
  color: var(--muted);
}

.data-table tbody tr.is-selected td {
  background: var(--current-wash);
}

.data-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--current);
}

/* A whole row that behaves like a link/opener (keeps <tr> semantics quiet). */
.data-table tr.row-clickable {
  cursor: pointer;
}

/* Table wrapping a genuinely tall list should still virtualize its height via
   the panel scroll; keep the sticky header readable in dark mode. */
[data-theme="dark"] .data-table thead th {
  background: var(--surface-raised, var(--surface-strong));
}

/* --- Master/detail split: list rail on the left, detail pane on the right. -- */
.split-view {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.6fr);
  gap: 1rem;
  align-items: start;
  min-height: 0;
}

.split-view.split-view--wide-detail {
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 2fr);
}

.split-rail {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  min-width: 0;
}

.split-detail {
  min-width: 0;
}

@media (max-width: 900px) {
  .split-view,
  .split-view.split-view--wide-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- De-carded list row: leading marker, main (title + meta), trailing. ----- */
.list-rows {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: inherit;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

button.list-row,
a.list-row {
  cursor: pointer;
}

button.list-row:hover,
a.list-row:hover {
  border-color: var(--current-border, var(--accent));
  background: var(--surface-soft);
}

.list-row[aria-current="true"],
.list-row[data-selected="true"] {
  border-color: var(--current-border, var(--accent));
  background: var(--current-wash);
}

.list-row-lead {
  display: grid;
  place-items: center;
  flex: none;
}

.list-row-main {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.list-row-main .list-row-title {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.list-row-main .list-row-meta {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.list-row-trail {
  display: grid;
  justify-items: end;
  gap: 0.2rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.list-row-trail .list-row-amount {
  color: var(--ink);
  font-weight: 700;
}

/* --- Non-card section block: heading + content with a hairline, not a box. -- */
.section-block {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.section-block > .section-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}

.section-block > .section-block-head h3 {
  margin: 0;
  font-size: 1.02rem;
}

.section-block > .section-block-head .section-block-hint {
  color: var(--muted);
  font-size: 0.8rem;
}

/* --- Overview layout: home support feeds. ------------------------------- */
.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 1.1rem;
  align-items: start;
  min-width: 0;
}

.overview-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.overview-main {
  display: grid;
  gap: 1.15rem;
  min-width: 0;
}

.overview-rail {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-width: 0;
}

.section-block > .section-block-head.overview-section-head {
  min-height: 2.75rem;
  align-items: center;
}

@media (max-width: 1080px) {
  .overview-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .overview-rail {
    order: -1;
  }
}

/* A two-up content grid for medium lists that should share the wide space
   instead of stacking (e.g. two side-by-side data tables). */
.content-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
  min-width: 0;
}

@media (max-width: 960px) {
  .content-cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- List-row helpers: date chip, lead icon well, 2-column variant. -------- */
.list-row.list-row--2col {
  grid-template-columns: minmax(0, 1fr) auto;
}

.list-row-lead .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink-secondary);
  font-size: 1.15rem;
}

.list-row--attention .list-row-lead .material-symbols-outlined {
  background: var(--current-wash-strong);
  color: var(--accent);
}

.list-row-trail > .material-symbols-outlined {
  color: var(--muted);
  font-size: 1.3rem;
}

.list-row-trail .badge {
  text-transform: capitalize;
}

.mini-date-chip {
  display: grid;
  justify-items: center;
  gap: 0;
  width: 2.7rem;
  padding: 0.28rem 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  line-height: 1.05;
}

.mini-date-chip > span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.mini-date-chip > strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- De-card opt-out: neutralize the global rounded/gradient card treatment
   (styles.css wildcard `[class*="-card"]` radius + `.card` gradient wash) on
   section/list/board/rail wrappers that should read as flat sections. ------- */
.app-shell [class*="-card"].is-flat,
.admin-shell [class*="-card"].is-flat,
.profile-shell [class*="-card"].is-flat,
.control-shell [class*="-card"].is-flat,
.is-flat {
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  padding: 0;
}

/* --- .num: right-aligned tabular numeric utility for money/count columns. --- */
.data-table .num,
.num,
td.num,
th.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ============================================================================
   v7 — authored composition
   Preserve the Ember token sets while removing the outlined-card grammar that
   made unrelated surfaces look like the same generated component. Structure
   now comes from type, spacing, tonal planes, and selective dividers. Borders
   remain on controls, tables, overlays, and semantic risk states.
   ============================================================================ */

/* App: one quiet summary plane, then compact tonal rows instead of card stacks. */
.app-shell .page-head {
  border-bottom: 0;
}

.stat-strip {
  gap: 0;
  border: 0;
  border-radius: 2px;
  background: var(--surface-soft);
  box-shadow: inset 4px 0 0 var(--current);
}

.stat-strip .stat-cell {
  border-left-color: color-mix(in srgb, var(--ink) 12%, transparent);
  padding: 0.82rem 1rem;
}

.section-block > .section-block-head {
  min-height: 2.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 0;
}

.section-block > .section-block-head h3 {
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.list-rows {
  gap: 0.42rem;
}

.list-row {
  padding: 0.75rem 0.8rem;
  border: 0;
  border-radius: 4px;
  background: var(--surface-soft);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

button.list-row:hover,
button.list-row:focus-visible,
a.list-row:hover,
a.list-row:focus-visible {
  background: var(--surface-strong);
  box-shadow: inset 3px 0 0 var(--current);
}

.list-row[aria-current="true"],
.list-row[data-selected="true"] {
  background: color-mix(in srgb, var(--current-wash-strong) 58%, var(--surface-soft));
  box-shadow: inset 3px 0 0 var(--current);
}

.mini-date-chip,
.list-row-lead .material-symbols-outlined {
  border: 0;
  border-radius: 4px;
  background: var(--surface-strong);
}

.empty-state {
  padding: 0.7rem 0.8rem;
  border: 0;
  border-radius: 4px;
  background: var(--surface-soft);
}

.data-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
}

.data-table tbody tr:hover td {
  background: var(--surface-strong);
}

.data-table tbody tr[data-row-selected="true"] td,
.data-table tbody tr.is-selected td {
  background: var(--current-wash);
}


.table-room-identity {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.table-room-identity .room-color-swatch {
  width: 1rem;
  height: 1rem;
}

.admin-record-modal-panel {
  display: grid;
  gap: 0.9rem;
}

.admin-record-modal-panel > .section-heading {
  margin-bottom: 0;
}

.admin-record-modal-panel .department-chain-form,
.admin-record-modal-panel .temperature-preset-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.admin-record-modal-panel .department-chain-form > .approval-step-row,
.admin-record-modal-panel .department-chain-form > .department-card-actions,
.admin-record-modal-panel .department-chain-form > [data-department-chain-message] {
  grid-column: 1 / -1;
}

.admin-record-modal-panel .room-camera-form {
  padding: 0;
  border-top: 0;
}

@media (max-width: 700px) {
  .admin-record-modal-panel .department-chain-form,
  .admin-record-modal-panel .temperature-preset-form,
  .admin-record-modal-panel .room-camera-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.app-shell .card:not(.modal-panel) {
  border: 0;
  background-image: none;
  box-shadow: none;
}

.release-notes-stack {
  gap: 0;
}

.release-notes-panel,
.release-notes-panel--history {
  padding: 1rem 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 0;
  background: transparent;
}

.release-notes-panel:first-child {
  border-top: 0;
}

.release-notes-panel--current {
  padding-left: 0.9rem;
  padding-right: 1.5rem;
  border-left: 4px solid var(--current);
  background: color-mix(in srgb, var(--current-wash) 45%, transparent);
}

.release-notes-empty--history {
  padding: 0.8rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Admin: rail + content plane, without a card nested inside another card. */
.admin-shell .admin-console-hero {
  min-height: 0;
  padding: 0.35rem 0 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-shell .admin-console-intro h2 {
  font-size: clamp(1.8rem, 2.5vw, 2.45rem);
  letter-spacing: -0.035em;
}

.admin-shell .admin-console-status {
  border: 0;
  border-radius: 4px;
  background: var(--surface-soft);
}

.admin-shell .admin-nav-shell {
  border: 0;
  border-radius: 4px;
  background: var(--surface-soft);
  background-image: none;
  box-shadow: none;
}

.admin-shell .admin-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-shell .admin-card:not(.modal-panel) {
  border: 0;
  background-image: none;
  box-shadow: none;
}

.admin-shell .settings-summary-list,
.admin-shell .admin-entity-grid,
.admin-shell .department-chain-grid,
.admin-shell .temperature-preset-grid,
.admin-shell .maintenance-area-list {
  gap: 0.42rem;
}

.admin-shell .settings-summary-row,
.admin-shell .maintenance-area-row,
.admin-shell .department-chain-card,
.admin-shell .team-card,
.admin-shell .temperature-preset-card,
.admin-shell .room-camera-card {
  border: 0;
  border-radius: 4px;
  background: var(--surface-soft);
  box-shadow: none;
}

.admin-shell .settings-summary-row:hover,
.admin-shell .maintenance-area-row:hover,
.admin-shell .department-chain-card:hover,
.admin-shell .team-card:hover,
.admin-shell .temperature-preset-card:hover,
.admin-shell .room-camera-card:hover,
.admin-shell .room-camera-card[open] {
  background: var(--surface-strong);
}

.admin-shell .settings-summary-icon,
.admin-shell .settings-section-head .material-symbols-outlined {
  border: 0;
  background: var(--surface-strong);
}

.admin-shell .admin-empty-guidance,
.admin-shell .audit-empty-state {
  border: 0;
  background: transparent;
}

/* Control: command header, one health plane, and tenant ledger rows. */
.control-shell .control-page-head {
  min-height: 7.25rem;
  padding: 0.4rem 0 1.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.control-shell .control-page-head h2 {
  font-size: clamp(2rem, 3.4vw, 3.15rem);
  font-weight: 760;
  letter-spacing: -0.045em;
}

.control-shell .control-operator {
  border: 0;
  border-radius: 4px;
  background: var(--surface-soft);
}

.control-shell .control-flash {
  padding: 0.72rem 0.85rem;
  border: 0;
  border-left: 4px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface-soft);
}

.control-shell .control-flash--success {
  border-left-color: var(--success);
}

.control-shell .control-flash--danger {
  border-left-color: var(--danger);
}

.control-shell .control-flash--warning {
  border-left-color: var(--current);
}

.control-shell .control-section-head .control-health-grid {
  grid-template-columns: repeat(4, minmax(6.5rem, 1fr));
  gap: 0;
  min-width: min(100%, 34rem);
  overflow: hidden;
  border-radius: 2px;
  background: var(--surface-soft);
}

.control-shell .control-health-grid div {
  min-height: 4.3rem;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 0;
  background: transparent;
}

.control-shell .control-health-grid div:first-child {
  border-left: 0;
}

.control-shell .control-card:not(.modal-panel) {
  border: 0;
  border-radius: 2px;
  background-image: none;
  box-shadow: none;
}

.control-shell .control-card--tenants {
  padding: 0;
  background: transparent;
}

.control-shell .control-tenant-list,
.control-shell .control-danger-list {
  gap: 0.42rem;
}

.control-shell .control-tenant-row,
.control-shell .control-danger-row {
  padding: 0.95rem 0.85rem;
  border: 0;
  border-radius: 4px;
  background: var(--surface-soft);
}

.control-shell .control-tenant-row:hover,
.control-shell .control-danger-row:hover {
  background: var(--surface-strong);
}

.control-shell .control-event-strip span {
  border: 0;
  border-radius: 3px;
  background: var(--well);
}

.control-shell .control-settings-disclosure {
  border: 0;
  border-radius: 2px;
  background: var(--surface-soft);
}

.control-shell .control-risk-zone {
  border: 0;
  border-left: 4px solid var(--danger);
  border-radius: 2px;
  background: color-mix(in srgb, var(--danger-soft) 34%, var(--surface));
}

.control-shell .control-legacy-count {
  border: 0;
  border-radius: 2px;
}

/* Control PTO catalog: immutable policy library and tenant assignment ledger. */
.control-shell .control-policy-health {
  grid-template-columns: repeat(3, minmax(6.5rem, 1fr));
}

.control-policy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
  gap: 0.8rem;
  align-items: start;
}

.control-policy-catalog,
.control-policy-create,
.control-policy-assignments,
.control-policy-list,
.control-policy-tenant-list {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.control-policy-create {
  align-self: start;
}

.control-policy-card,
.control-policy-tenant-row {
  min-width: 0;
  padding: 0.85rem;
  border-radius: 4px;
  background: var(--surface-soft);
}

.control-policy-card.is-inactive {
  opacity: 0.66;
}

.control-policy-card-head {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  justify-content: space-between;
}

.control-policy-card-head > div,
.control-policy-tenant-copy {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

.control-policy-card h5,
.control-policy-card p,
.control-policy-tenant-copy strong,
.control-policy-tenant-copy span,
.control-policy-tenant-copy small {
  margin: 0;
}

.control-policy-card h5 {
  color: var(--ink);
  font-size: 1rem;
}

.control-policy-card p,
.control-policy-tenant-copy span,
.control-policy-tenant-copy small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.control-policy-key {
  color: var(--current-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.control-policy-revision {
  flex: 0 0 auto;
  background: var(--chrome);
  color: var(--chrome-text);
}

.control-policy-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 0.7rem;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.control-policy-facts div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.58rem;
  background: var(--surface-strong);
}

.control-policy-facts span,
.control-policy-facts strong {
  overflow-wrap: anywhere;
}

.control-policy-facts span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
  text-transform: uppercase;
}

.control-policy-facts strong {
  color: var(--ink);
  font-size: 0.76rem;
}

.control-policy-history {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.56rem;
}

.control-policy-history span {
  padding: 0.25rem 0.4rem;
  border-radius: 3px;
  background: var(--well);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.66rem;
}

.control-policy-history span.is-latest {
  background: var(--current-wash);
  color: var(--current-deep);
}

.control-policy-disclosure {
  margin-top: 0.64rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.control-policy-disclosure summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.65rem 0 0;
  cursor: pointer;
  list-style: none;
}

.control-policy-disclosure summary::-webkit-details-marker {
  display: none;
}

.control-policy-disclosure summary > span:first-child {
  display: grid;
  gap: 0.1rem;
}

.control-policy-disclosure summary small {
  color: var(--muted);
  font-size: 0.72rem;
}

.control-policy-form {
  margin-top: 0.75rem;
}

.control-policy-form > .control-policy-rule-grid,
.control-policy-rule-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  min-width: 0;
}

.control-policy-rule-grid > .full-span {
  grid-column: 1 / -1;
}

.control-policy-rule-grid label {
  min-width: 0;
}

.control-policy-rule-grid input,
.control-policy-rule-grid select {
  width: 100%;
}

.control-policy-tenant-row {
  display: grid;
  grid-template-columns: minmax(13rem, 0.7fr) minmax(0, 1.3fr);
  gap: 0.9rem;
  align-items: center;
}

.control-policy-assignment-form {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) minmax(12rem, 0.8fr) auto;
  gap: 0.55rem;
  align-items: end;
  min-width: 0;
}

.control-policy-assignment-form > label {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.control-policy-assignment-form select {
  width: 100%;
  min-width: 0;
}

.control-policy-confirmation {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
  padding: 0.42rem 0.5rem;
  border-radius: 3px;
  background: var(--well);
}

.control-policy-confirmation span {
  display: grid;
  gap: 0.05rem;
}

.control-policy-confirmation small {
  color: var(--muted);
  font-size: 0.66rem;
}

@media (max-width: 1120px) {
  .control-policy-layout,
  .control-policy-tenant-row,
  .control-policy-assignment-form {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .control-policy-assignment-form button {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .control-shell .control-policy-health,
  .control-policy-facts,
  .control-policy-rule-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-policy-rule-grid > * {
    grid-column: 1;
  }

  .control-policy-card-head {
    display: grid;
  }

  .control-policy-revision {
    justify-self: start;
  }
}

/* Marketing: editorial sections and shared bands, not a bento/card catalog. */
.marketing-nav {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.marketing-nav__links {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.marketing-hero {
  grid-template-columns: minmax(0, 0.72fr) minmax(26rem, 1.28fr);
  gap: clamp(2.5rem, 5vw, 6rem);
}

.marketing-hero__visual {
  width: min(780px, 58vw);
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  transform: translateX(4vw) rotate(-0.35deg);
}

.marketing-hero__desktop {
  border-radius: 2px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
}

.marketing-section-head--center,
.marketing-pricing__head {
  max-width: 46rem;
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

.marketing-section-head--center p,
.marketing-pricing__head p {
  margin-left: 0;
  justify-self: start;
}

.marketing-proof-strip {
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.marketing-proof-strip article {
  min-height: 10.5rem;
  padding: 1.3rem 1.45rem 1.6rem;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.marketing-proof-strip article:first-child {
  border-left: 0;
}

.marketing-product-grid__inner {
  gap: 2.75rem 1.5rem;
}

.marketing-product-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.marketing-product-card img {
  border: 0;
  border-radius: 2px;
  box-shadow: 0 22px 64px color-mix(in srgb, var(--brand-plum) 22%, transparent);
}

.marketing-product-card--text {
  min-height: 12rem;
  padding: 1.35rem 0;
  border-top: 3px solid var(--current);
  background: transparent;
}

.marketing-phone-frame {
  padding: 0.72rem;
  border: 0;
  background: var(--surface-strong);
}

.marketing-pricing__tiers {
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.marketing-plan-card,
.marketing-plan-card--featured {
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.marketing-plan-card:first-child {
  border-left: 0;
}

.marketing-plan-card--featured {
  box-shadow: inset 0 4px 0 var(--current);
  background: color-mix(in srgb, var(--surface) 82%, var(--current-wash) 18%);
}

.marketing-plan-card li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

.marketing-included {
  padding: 2rem 0 0;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.marketing-pricing-table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.marketing-footer {
  border-top-width: 2px;
  border-top-color: var(--ink);
}

@media (max-width: 900px) {
  .control-shell .control-page-head {
    min-height: 11.5rem;
  }

  .control-shell .control-section-head .control-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .control-shell .control-health-grid div:nth-child(odd) {
    border-left: 0;
  }

  .control-shell .control-health-grid div:nth-child(n + 3) {
    border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  }

  .marketing-hero__visual {
    width: 100%;
    transform: none;
  }

  .marketing-hero__phone {
    right: 0.75rem;
    bottom: -2.5rem;
  }

  .marketing-mobile-gallery {
    grid-auto-columns: min(44vw, 310px);
  }

  .marketing-proof-strip article:nth-child(odd),
  .marketing-plan-card:nth-child(odd) {
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .marketing-proof-strip article,
  .marketing-plan-card,
  .marketing-plan-card--featured {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .marketing-proof-strip article:first-child,
  .marketing-plan-card:first-child {
    border-top: 0;
  }

  .stat-strip {
    box-shadow: inset 3px 0 0 var(--current);
  }
}

/* --- Approvals table: compact inline decision note + stacked row actions. --- */
.approval-table .approval-justif {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 42rem;
}

.approval-table .approval-note-cell {
  min-width: 14rem;
}

.approval-table .approval-note-cell textarea {
  width: 100%;
  min-height: 2.3rem;
  padding: 0.4rem 0.5rem;
  resize: vertical;
  font: inherit;
}

.approval-table .cell-actions {
  gap: 0.35rem;
}


/* --- In-table person cell (avatar + name/title) and inline badge cluster. -- */
.table-person {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.table-person .user-avatar {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 0.85rem;
}

.table-person-copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.data-table .role-badge-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

@media (max-width: 640px) {
  .marketing-hero h1 {
    max-width: 13ch;
    font-size: 2.75rem;
  }

  .marketing-hero__phone {
    right: 0.5rem;
    bottom: -1.5rem;
    width: 31%;
    border-width: 4px;
    border-radius: 16px;
  }

  .marketing-mobile-gallery {
    grid-auto-columns: min(82vw, 300px);
  }

  .marketing-section h2 {
    font-size: 2.15rem;
  }

  .marketing-proof-strip,
  .marketing-pricing__tiers {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-product-card,
  .marketing-plan-card,
  .marketing-included {
    padding: 0.85rem;
  }

  .marketing-plan-card {
    grid-template-rows: auto auto auto 1fr auto auto;
  }

  .marketing-plan-card__top {
    min-height: 8rem;
  }

  .marketing-plan-card__price strong {
    font-size: 3rem;
  }
}

/* ============================================================================
   v8 — unified operations shell
   Desktop product areas share one persistent rail. The topbar carries only
   brand, route context, and account utilities; existing mobile navigation is
   intentionally unchanged below the 900px breakpoint.
   ============================================================================ */

.app-navigation {
  display: none;
}

.topbar-context {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

.topbar-context__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--current-wash);
  color: var(--current-deep);
}

.topbar-context__mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  bottom: 0.42rem;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--current);
}

.topbar-context__mark .material-symbols-outlined {
  font-size: 1.18rem;
  font-variation-settings: "FILL" 1, "wght" 560, "GRAD" 0, "opsz" 20;
}

.topbar-context__copy {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.topbar-context__copy small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.topbar-context__copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-context--operations {
  position: relative;
  min-height: 48px;
  padding: 0.55rem 0.85rem 0.5rem 0.65rem;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--brand-plum);
}

.topbar-context__brand-rail {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 4px;
}

.topbar-context__brand-rail-amber {
  background: var(--brand-amber);
}

.topbar-context__brand-rail-ember {
  background: var(--brand-ember);
}

.topbar-context__brand-rail-plum {
  background: var(--brand-plum);
}

.topbar-context--operations .topbar-context__mark {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--brand-ember);
  color: #ffffff;
}

.topbar-context--operations .topbar-context__mark::before {
  display: none;
}

.topbar-context--operations .topbar-context__copy strong {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
}

@media (min-width: 901px) {
  body.app-shell:not(.profile-shell) {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  body.admin-shell:not(.control-shell) {
    --admin-navigation-rail: color-mix(in srgb, var(--brand-plum) 8%, var(--surface-soft));
    --admin-navigation-divider: color-mix(in srgb, var(--brand-plum) 24%, var(--line));
    grid-template-columns: 248px minmax(0, 1fr);
    background:
      linear-gradient(
        to right,
        var(--admin-navigation-rail) 0,
        var(--admin-navigation-rail) 247px,
        var(--admin-navigation-divider) 247px,
        var(--admin-navigation-divider) 248px,
        var(--body-background) 248px
      );
  }

  [data-theme="dark"] body.admin-shell:not(.control-shell) {
    --admin-navigation-rail: color-mix(in srgb, var(--brand-plum) 72%, var(--body-background));
  }

  html[data-desktop-navigation="collapsed"] body.app-shell:not(.profile-shell) {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  body.app-shell:not(.profile-shell) > .topbar {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body.app-shell:not(.profile-shell) > .app-navigation {
    grid-column: 1;
    grid-row: 2 / 4;
  }

  body.app-shell:not(.profile-shell) > .dashboard-grid {
    grid-column: 2;
    grid-row: 2;
  }

  body.app-shell:not(.profile-shell) > .release-footer {
    grid-column: 2;
    grid-row: 3;
  }

  body.admin-shell:not(.control-shell) > .topbar,
  body.admin-shell:not(.control-shell) > .admin-console-grid {
    grid-column: 1 / -1;
  }

  body.admin-shell:not(.control-shell) > .topbar {
    grid-row: 1;
  }

  body.admin-shell:not(.control-shell) > .admin-console-grid {
    grid-row: 2;
  }

  body.admin-shell:not(.control-shell) > .release-footer {
    grid-column: 2;
    grid-row: 3;
  }

  .app-shell .topbar,
  .admin-shell .topbar {
    min-height: 72px;
    gap: 1rem;
  }

  .app-shell .topbar .brand-logo-chip,
  .admin-shell .topbar .brand-logo-chip {
    width: 164px;
    height: 64px;
    padding: 0.24rem 0.5rem;
  }

  .app-shell .topbar .brand-lockup,
  .admin-shell .topbar .brand-lockup {
    height: 56px;
  }

  .app-navigation {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    min-height: 0;
    padding: 1rem 0.72rem 0.8rem;
    overflow: hidden;
    overscroll-behavior: contain;
    border-right: 1px solid var(--line);
    background: var(--body-background);
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-width: thin;
  }

  .app-navigation__groups,
  .app-navigation__group {
    display: grid;
    min-width: 0;
  }

  .app-navigation__groups {
    gap: 1rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-width: thin;
  }

  .app-navigation__group {
    gap: 0.25rem;
  }

  .app-navigation__label {
    display: flex;
    gap: 0.42rem;
    align-items: center;
    margin-bottom: 0.15rem;
    padding: 0 0.3rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
  }

  .app-navigation__label::before {
    content: "";
    width: 0.9rem;
    height: 3px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--brand-amber);
  }

  .app-navigation__item {
    position: relative;
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0.42rem 0.55rem;
    border: 0;
    border-radius: 8px;
    background: var(--well);
    color: var(--ink-secondary);
    box-shadow: none;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 620;
    line-height: 1.15;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
  }

  .app-navigation__item + .app-navigation__item {
    border-top: 0;
  }

  .app-navigation__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: transparent;
  }

  .app-navigation__item .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    justify-self: center;
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 1.12rem;
    font-variation-settings: "FILL" 0, "wght" 520, "GRAD" 0, "opsz" 20;
  }

  .app-navigation__item:hover,
  .app-navigation__item:focus-visible {
    background: var(--surface-strong);
    color: var(--ink);
  }

  .app-navigation__item.is-active {
    background: var(--current-wash);
    color: var(--current-deep);
    font-weight: 720;
  }

  .app-navigation__item.is-active::before {
    background: var(--current);
  }

  .app-navigation__item.is-active .material-symbols-outlined {
    background: color-mix(in srgb, var(--surface-strong) 78%, var(--current-wash));
    color: var(--current-deep);
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 20;
  }

  .app-navigation__footer {
    display: grid;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line-soft);
  }

  .app-navigation__collapse,
  .app-navigation__customize,
  .app-navigation__admin-console {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-secondary);
    box-shadow: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
  }

  .app-navigation__collapse:hover,
  .app-navigation__collapse:focus-visible,
  .app-navigation__customize:hover,
  .app-navigation__customize:focus-visible {
    background: var(--surface-soft);
    color: var(--current-deep);
  }

  .app-navigation__collapse > .material-symbols-outlined,
  .app-navigation__customize > .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    justify-self: center;
    color: var(--muted);
    font-size: 1.15rem;
  }

  .app-navigation__admin-console {
    min-height: 48px;
    background: var(--well);
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 720;
  }

  .app-navigation__admin-console:hover,
  .app-navigation__admin-console:focus-visible {
    background: var(--current-wash);
    color: var(--current-deep);
  }

  .app-navigation__admin-console > .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 8px;
    background: var(--surface);
    color: var(--current-deep);
    font-size: 1.12rem;
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 20;
  }

  html[data-desktop-navigation="collapsed"] .app-navigation {
    gap: 0.55rem;
    padding-right: 0.7rem;
    padding-left: 0.7rem;
  }

  html[data-desktop-navigation="collapsed"] .app-navigation__groups {
    gap: 0.55rem;
  }

  html[data-desktop-navigation="collapsed"] .app-navigation__text {
    display: none;
  }

  html[data-desktop-navigation="collapsed"] .app-navigation__label {
    display: flex;
    width: 100%;
    height: 3px;
    gap: 0;
    justify-content: center;
    margin: 0.35rem 0 0.15rem;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }

  html[data-desktop-navigation="collapsed"] .app-navigation__item,
  html[data-desktop-navigation="collapsed"] .app-navigation__collapse,
  html[data-desktop-navigation="collapsed"] .app-navigation__customize,
  html[data-desktop-navigation="collapsed"] .app-navigation__admin-console {
    grid-template-columns: 1.9rem;
    gap: 0;
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
  }

  .app-shell .dashboard-grid > #panel-venue {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  #panel-venue .venue-workspace {
    gap: 0.55rem;
  }

  #panel-venue .venue-calendar-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: calc(100dvh - 8.2rem);
    min-height: 0;
    padding: 0.8rem 0.9rem 0.9rem;
  }

  #panel-venue .venue-calendar-head,
  #panel-venue .venue-calendar-legend {
    flex: 0 0 auto;
  }

  #panel-venue .venue-calendar-legend {
    align-items: center;
    align-content: flex-start;
  }

  #panel-venue .venue-cal-legend-item {
    align-self: flex-start;
    min-height: 0;
  }

  #panel-venue .venue-calendar-body {
    flex: 1 1 auto;
    min-height: 0;
  }

  #panel-venue .vc-month {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  #panel-venue .vc-month-weekdays {
    flex: 0 0 auto;
  }

  #panel-venue .vc-mweek {
    flex: 1 1 0;
    min-height: 0;
    margin-bottom: 0.3rem;
  }

  #panel-venue .vc-mweek:last-child {
    margin-bottom: 0;
  }

  #panel-venue .vc-mweek-days {
    height: 100%;
    margin-bottom: 0;
  }

  #panel-venue .vc-mday {
    height: 100%;
    min-height: 0;
  }

  .admin-shell {
    --admin-accent: var(--current-deep);
  }

  .admin-shell .admin-console-grid {
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    padding: 0;
    overflow-y: hidden;
    scrollbar-gutter: auto;
  }

  .admin-shell .admin-nav-shell {
    --admin-navigation-row: color-mix(in srgb, var(--brand-plum) 5%, var(--surface));
    --admin-navigation-row-hover: color-mix(in srgb, var(--brand-plum) 13%, var(--surface));
    --admin-navigation-icon: color-mix(in srgb, var(--brand-plum) 10%, var(--surface));
    --admin-navigation-icon-ink: color-mix(in srgb, var(--brand-plum) 76%, var(--muted));
    --admin-navigation-active: var(--brand-plum);
    --admin-navigation-active-ink: var(--chrome-text);
    --admin-navigation-return: color-mix(in srgb, var(--brand-amber) 16%, var(--surface));
    --admin-navigation-return-hover: color-mix(in srgb, var(--brand-amber) 25%, var(--surface));
    position: relative;
    top: 0;
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    height: 100%;
    padding: 1rem 0.72rem 0.8rem;
    border: 0;
    border-right: 1px solid var(--admin-navigation-divider);
    border-radius: 0;
    background: var(--admin-navigation-rail);
  }

  [data-theme="dark"] .admin-shell .admin-nav-shell {
    --admin-navigation-row: color-mix(in srgb, var(--brand-plum) 54%, var(--surface-strong));
    --admin-navigation-row-hover: color-mix(in srgb, var(--brand-plum) 38%, var(--surface-strong));
    --admin-navigation-icon: color-mix(in srgb, var(--brand-plum) 64%, var(--surface-strong));
    --admin-navigation-icon-ink: var(--chrome-muted);
    --admin-navigation-return: color-mix(in srgb, var(--brand-amber) 9%, var(--brand-plum));
    --admin-navigation-return-hover: color-mix(in srgb, var(--brand-amber) 15%, var(--brand-plum));
  }

  .admin-shell .admin-nav-shell .app-navigation__label {
    color: color-mix(in srgb, var(--brand-plum) 72%, var(--muted));
  }

  [data-theme="dark"] .admin-shell .admin-nav-shell .app-navigation__label {
    color: var(--chrome-muted);
  }

  .admin-shell .admin-nav-shell .app-navigation__item {
    background: var(--admin-navigation-row);
  }

  .admin-shell .admin-nav-shell .app-navigation__item .material-symbols-outlined {
    background: var(--admin-navigation-icon);
    color: var(--admin-navigation-icon-ink);
  }

  .admin-shell .admin-nav-shell .app-navigation__item:hover,
  .admin-shell .admin-nav-shell .app-navigation__item:focus-visible {
    background: var(--admin-navigation-row-hover);
    color: var(--ink);
  }

  .admin-shell .admin-nav-shell .app-navigation__item.is-active {
    background: var(--admin-navigation-active);
    color: var(--admin-navigation-active-ink);
  }

  .admin-shell .admin-nav-shell .app-navigation__item.is-active::before {
    background: var(--brand-amber);
  }

  .admin-shell .admin-nav-shell .app-navigation__item.is-active .material-symbols-outlined {
    background: color-mix(in srgb, var(--admin-navigation-active-ink) 14%, transparent);
    color: var(--brand-amber);
  }

  .admin-shell .admin-nav-shell .app-navigation__footer {
    border-top-color: color-mix(in srgb, var(--brand-plum) 24%, var(--line));
  }

  .admin-shell .admin-nav-shell .admin-nav-return {
    background: var(--admin-navigation-return);
    color: var(--brand-plum);
  }

  .admin-shell .admin-nav-shell .admin-nav-return:hover,
  .admin-shell .admin-nav-shell .admin-nav-return:focus-visible {
    background: var(--admin-navigation-return-hover);
    color: var(--brand-plum);
  }

  .admin-shell .admin-nav-shell .admin-nav-return > .material-symbols-outlined {
    background: color-mix(in srgb, var(--brand-plum) 8%, var(--surface));
    color: var(--brand-plum);
  }

  [data-theme="dark"] .admin-shell .admin-nav-shell .admin-nav-return,
  [data-theme="dark"] .admin-shell .admin-nav-shell .admin-nav-return:hover,
  [data-theme="dark"] .admin-shell .admin-nav-shell .admin-nav-return:focus-visible {
    color: var(--chrome-text);
  }

  [data-theme="dark"] .admin-shell .admin-nav-shell .admin-nav-return > .material-symbols-outlined {
    background: color-mix(in srgb, var(--brand-amber) 9%, var(--surface-strong));
    color: var(--brand-amber);
  }

  .admin-shell .admin-settings-nav {
    min-height: 0;
    overflow-y: auto;
  }

  .admin-shell .tab-panel,
  .admin-shell .admin-panel {
    grid-column: 2;
    grid-row: 1;
  }

  .admin-shell .admin-panel {
    min-width: 0;
    min-height: 0;
    padding: 1.4rem var(--app-gutter) 1.6rem;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

}

@media (max-width: 900px) {
  .topbar-context {
    display: none;
  }
}

.sidebar-customize-panel {
  width: min(860px, calc(100vw - 2rem));
  max-width: 860px;
}

.sidebar-customize-panel form {
  display: grid;
  gap: 1rem;
}

.sidebar-customize-intro {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.sidebar-editor-groups {
  display: grid;
  gap: 0.75rem;
}

.sidebar-editor-group {
  position: relative;
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem;
  border-radius: 8px;
  background: var(--surface-soft);
}

.sidebar-editor-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.sidebar-editor-group-name {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  font-size: 0.86rem;
  font-weight: 720;
}

.sidebar-editor-group-actions,
.sidebar-customize-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.sidebar-editor-list {
  position: relative;
  display: grid;
  gap: 0.3rem;
  min-height: 3rem;
  border-radius: 6px;
}

.sidebar-editor-list.is-drop-target {
  background: var(--current-wash);
  box-shadow: inset 0 0 0 2px var(--current-border);
}

.sidebar-editor-empty {
  margin: 0;
  padding: 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.sidebar-editor-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
  min-height: 48px;
  padding: 0.42rem 0.5rem;
  border-radius: 6px;
  background: var(--surface-strong);
}

.sidebar-editor-group.is-dragging,
.sidebar-editor-item.is-dragging {
  opacity: 0.34;
}

.sidebar-editor-group.is-drop-before::before,
.sidebar-editor-group.is-drop-after::after,
.sidebar-editor-item.is-drop-before::before,
.sidebar-editor-item.is-drop-after::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0.3rem;
  left: 0.3rem;
  height: 3px;
  border-radius: 999px;
  background: var(--current);
  box-shadow: 0 0 0 2px var(--current-wash);
  pointer-events: none;
}

.sidebar-editor-group.is-drop-before::before,
.sidebar-editor-item.is-drop-before::before {
  top: -0.3rem;
}

.sidebar-editor-group.is-drop-after::after,
.sidebar-editor-item.is-drop-after::after {
  bottom: -0.3rem;
}

.sidebar-editor-item-main {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
}

.sidebar-editor-item-main .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: var(--well);
  color: var(--muted);
  font-size: 1.08rem;
}

.sidebar-editor-icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
}

.sidebar-editor-icon .material-symbols-outlined {
  font-size: 1.05rem;
}

.sidebar-editor-drag-handle {
  width: 44px;
  height: 44px;
  min-height: 44px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.sidebar-editor-drag-handle:hover,
.sidebar-editor-drag-handle:focus-visible {
  color: var(--current-deep);
  background: var(--current-wash);
}

.sidebar-editor-drag-handle:active,
.is-sidebar-editor-dragging .sidebar-editor-drag-handle {
  cursor: grabbing;
}

.sidebar-editor-drag-handle .material-symbols-outlined {
  font-size: 1.15rem;
}

.is-sidebar-editor-dragging {
  cursor: grabbing;
  user-select: none;
}

.sidebar-editor-drag-preview {
  position: fixed;
  z-index: var(--z-drag-preview);
  top: 0;
  left: 0;
  max-height: min(240px, 45vh);
  margin: 0;
  overflow: hidden;
  opacity: 0.96;
  pointer-events: none;
  box-shadow: var(--shadow-raised);
  transition: none !important;
  will-change: transform;
}

.sidebar-editor-drag-preview--group .sidebar-editor-list {
  display: none;
}

.sidebar-editor-drag-preview button,
.sidebar-editor-drag-preview input {
  pointer-events: none;
}

.sidebar-customize-toolbar {
  justify-content: space-between;
  padding-top: 0.1rem;
}

.sidebar-customize-toolbar .ghost-button {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.sidebar-customize-toolbar .material-symbols-outlined {
  font-size: 1rem;
}

.sidebar-customize-actions {
  justify-content: flex-end;
  align-items: center;
}

.sidebar-customize-actions > button {
  margin-left: 0;
}

.sidebar-customize-actions [data-sidebar-customize-message] {
  flex: 1 1 16rem;
  margin: 0 auto 0 0;
  text-align: left;
}

@media (max-width: 680px) {
  .sidebar-customize-panel {
    width: min(100%, calc(100vw - 1rem));
  }

  .sidebar-editor-group-head,
  .sidebar-editor-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .sidebar-editor-group-actions {
    justify-content: flex-end;
  }

  .sidebar-editor-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sidebar-customize-actions {
    justify-content: stretch;
  }

  .sidebar-customize-actions [data-sidebar-customize-message] {
    flex-basis: 100%;
    text-align: left;
  }

  .sidebar-customize-actions > button {
    flex: 1 1 0;
  }
}

.record-pager {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.record-pager > div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.record-pager__position {
  min-width: 7rem;
  color: var(--ink-secondary);
  text-align: center;
}

.reference-page-note {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink-secondary);
  font-size: 0.82rem;
}

.reference-page-note .record-pager {
  margin-top: 0.5rem;
}

.record-selector-toolbar {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

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

.event-reference-toolbar > div {
  min-width: 0;
}

.record-selector-search {
  display: flex;
  align-items: end;
  gap: 0.5rem;
}

.record-selector-search label {
  display: grid;
  flex: 1 1 16rem;
  gap: 0.28rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.record-selector-search input {
  width: 100%;
  min-height: 40px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.record-selector-toolbar .record-pager {
  min-height: 0;
  margin-top: 0.45rem;
  padding-top: 0.55rem;
}

.reference-picker-field {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.reference-picker-field-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.25;
}

.reference-picker {
  position: relative;
  min-width: 0;
}

.reference-picker:not(.is-enhanced) > .reference-picker-trigger,
.reference-picker:not(.is-enhanced) > .reference-picker-popover {
  display: none;
}

.reference-picker.is-enhanced > select[data-reference-picker-native] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

button.reference-picker-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0.66rem 0.72rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--muted);
  box-shadow: none;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
  transition:
    border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    background 160ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

[data-theme="dark"] button.reference-picker-trigger {
  color: var(--ink-secondary);
}

button.reference-picker-trigger:hover,
button.reference-picker-trigger:focus-visible,
.reference-picker.is-open > button.reference-picker-trigger {
  border-color: var(--focus-ring);
  background: var(--control-bg);
  color: var(--ink);
}

.reference-picker.has-value > button.reference-picker-trigger {
  color: var(--ink);
}

.reference-picker-trigger > [data-reference-picker-value] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-picker-trigger > .material-symbols-outlined {
  color: var(--muted);
  font-size: 1.18rem;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.reference-picker.is-open .reference-picker-trigger > .material-symbols-outlined {
  transform: rotate(180deg);
}

.reference-picker-popover {
  position: fixed;
  z-index: calc(var(--z-modal) + 3);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.38rem;
  max-height: var(--reference-picker-max-height, 360px);
  padding: 0.42rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: var(--shadow-raised);
  transform-origin: top center;
  animation: reference-picker-in 150ms cubic-bezier(0.23, 1, 0.32, 1);
}

.reference-picker-popover.opens-above {
  transform-origin: bottom center;
}

.reference-picker-popover[hidden] {
  display: none;
}

@keyframes reference-picker-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.reference-picker-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
  padding: 0 0.58rem;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  background: var(--control-bg);
  color: var(--muted);
}

.reference-picker-search:focus-within {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 1px var(--focus-ring-inner);
}

.reference-picker-search > .material-symbols-outlined {
  font-size: 1.08rem;
}

.reference-picker-search > input[type="search"] {
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  font-size: 0.86rem;
  font-weight: 600;
}

.reference-picker-search > input[type="search"]:focus-visible {
  outline: 0;
  box-shadow: none;
}

.reference-picker-options {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

button.reference-picker-option,
.reference-picker-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.62rem;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0.58rem 0.62rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
  font-size: 0.84rem;
  text-align: left;
}

button.reference-picker-option:hover,
button.reference-picker-option:focus-visible,
.reference-picker-option--multiple:hover,
.reference-picker-option--multiple:focus-within {
  background: var(--surface-soft);
  color: var(--ink);
}

button.reference-picker-option[aria-selected="true"],
.reference-picker-option--multiple[aria-selected="true"] {
  background: var(--current-wash);
  color: var(--ink);
}

button.reference-picker-option:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.reference-picker-option-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.reference-picker-option-copy strong,
.reference-picker-option-copy small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reference-picker-option-copy strong {
  color: inherit;
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.25;
}

.reference-picker-option-copy small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 550;
  line-height: 1.3;
}

[data-theme="dark"] .reference-picker-option-copy small,
[data-theme="dark"] .reference-picker-status {
  color: var(--ink-secondary);
}

.reference-picker-option-check {
  color: var(--current-deep);
  font-size: 1.05rem;
  opacity: 0;
}

.reference-picker-option[aria-selected="true"] .reference-picker-option-check {
  opacity: 1;
}

.reference-picker-option--multiple {
  grid-template-columns: auto minmax(0, 1fr);
}

.reference-picker-option--multiple > input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--current);
}

.reference-picker-status {
  min-height: 1.05rem;
  margin: 0;
  padding: 0.12rem 0.52rem 0.06rem;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 620;
  line-height: 1.35;
}

.reference-picker.is-loading .reference-picker-status {
  color: var(--ink-secondary);
}

.event-room-checklist.reference-picker-field {
  gap: 0.42rem;
}

@media (max-width: 560px) {
  .reference-picker-popover {
    max-width: calc(100vw - 24px);
  }

  button.reference-picker-option,
  .reference-picker-option {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reference-picker-popover {
    animation: none;
  }

  .reference-picker-trigger > .material-symbols-outlined {
    transition: none;
  }
}

.venue-window-notice {
  position: static;
  z-index: auto;
  width: auto;
  margin: 0.75rem;
  border-color: var(--current-border);
  border-radius: 8px;
  background: var(--current-wash);
  color: var(--ink-secondary);
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 650;
}

@media (max-width: 680px) {
  .record-pager {
    align-items: flex-start;
    flex-direction: column;
  }

  .record-pager > div {
    width: 100%;
    justify-content: space-between;
  }

  .event-reference-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .record-selector-search {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .record-selector-search label {
    flex-basis: 100%;
  }
}

/* Goals — wide commitment ledger with visible latest check-ins and compact history. */
.goals-shell {
  display: grid;
  gap: 1.25rem;
  width: min(100%, 100rem);
  margin-inline: auto;
}

.goal-stat-strip {
  width: 100%;
}

.goal-stat-strip .goal-stat-value--danger {
  color: var(--danger);
}

.goal-personal-section,
.goal-team-group,
.goal-team-owner-list,
.goal-owner-body,
.goal-rows {
  display: grid;
}

.goal-personal-section {
  gap: 0.65rem;
}

.goal-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0 0.1rem 0.65rem;
  border-bottom: 1px solid var(--line);
}

.goal-section-head h3,
.goal-section-head p {
  margin: 0;
}

.goal-section-head h3 {
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.goal-section-head p {
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.goal-section-count,
.goal-owner-total {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.goal-section-count {
  padding: 0.3rem 0.45rem;
  border-radius: var(--radius-xs);
  background: var(--surface-soft);
}

.goal-create-modal-panel {
  width: min(36rem, 100%);
}

.goal-detail-modal-panel {
  width: min(30rem, 92vw);
}
.goal-detail-modal-panel h3 {
  overflow-wrap: anywhere;
}

.goal-detail-update {
  margin-top: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-xs);
  background: var(--surface-soft);
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.goal-detail-update strong {
  display: block;
  margin: 0 0 0.25rem;
  color: var(--ink-secondary);
  font-size: 0.76rem;
  font-weight: 700;
}
.goal-detail-update p {
  margin: 0 0 0.25rem;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.goal-detail-update time {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.goal-modal-head,
.goal-modal-heading {
  display: flex;
  align-items: center;
}

.goal-modal-head {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.goal-modal-heading {
  gap: 0.75rem;
  min-width: 0;
}

.goal-modal-heading h3,
.goal-modal-heading p {
  margin: 0;
}

.goal-modal-heading h3 {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.goal-modal-heading p {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.goal-modal-mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--current-wash-strong);
  color: var(--current-deep);
  font-size: 1.35rem;
}

.goal-create-form {
  display: grid;
  gap: 0.8rem;
}

.goal-create-form label,
.goal-edit-form label {
  display: grid;
  gap: 0.32rem;
  color: var(--ink-secondary);
  font-size: 0.76rem;
  font-weight: 700;
}

.goal-create-form input,
.goal-create-form select,
.goal-edit-form input,
.goal-note-form input {
  min-height: 44px;
}

.goal-create-form button {
  min-height: 44px;
}

.goal-create-actions {
  justify-content: flex-end;
  padding-top: 0.2rem;
}

.goal-form-message {
  min-height: 1.1rem;
  margin: 0;
}

.goal-rows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.7rem;
}

.goal-team-group {
  gap: 0.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.goal-team-group-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.goal-team-group-head h3,
.goal-team-group-head p {
  margin: 0;
}

.goal-team-group-head h3 {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.goal-team-group-head p {
  margin-top: 0.08rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.goal-team-group-mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-secondary);
  font-size: 1.25rem;
}

.goal-team-owner-list {
  gap: 0.5rem;
  padding: 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.goal-team-owner-list .goal-row,
.goal-team-owner-list .goal-empty {
  background: var(--surface-strong);
}

.goal-team-owner-list .goal-row.is-completed {
  background: color-mix(in srgb, var(--success-soft) 42%, var(--surface-strong));
}

.goal-owner-section {
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  overflow: clip;
}

.goal-owner-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.goal-owner-head::-webkit-details-marker {
  display: none;
}

.goal-owner-head:hover {
  background: color-mix(in srgb, var(--current-wash) 32%, var(--surface-strong));
}

.goal-owner-head:focus-visible {
  outline: 2px solid var(--current);
  outline-offset: -2px;
}

.goal-owner-section[open] > .goal-owner-head {
  background: color-mix(in srgb, var(--current-wash) 42%, var(--surface-strong));
  box-shadow: inset 3px 0 0 var(--current);
}

.goal-owner-head .user-avatar {
  width: 2.35rem;
  height: 2.35rem;
  flex-basis: 2.35rem;
}

.goal-owner-head h3,
.goal-owner-head p {
  margin: 0;
}

.goal-owner-head h3 {
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 760;
  letter-spacing: -0.012em;
}

.goal-owner-head p {
  margin-top: 0.08rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.goal-owner-chevron {
  color: var(--muted);
  font-size: 1.2rem;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.goal-owner-section[open] > .goal-owner-head .goal-owner-chevron {
  transform: rotate(180deg);
}

.goal-owner-body {
  gap: 0.7rem;
  padding: 0.75rem;
  border-top: 1px solid var(--line);
}

.goal-completed-group {
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  overflow: clip;
}

.goal-completed-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  color: var(--ink-secondary);
  cursor: pointer;
  list-style: none;
}

.goal-completed-group > summary::-webkit-details-marker {
  display: none;
}

.goal-completed-group > summary:hover {
  background: var(--surface-soft);
}

.goal-completed-group > summary:focus-visible {
  outline: 2px solid var(--current);
  outline-offset: -2px;
}

.goal-completed-group > summary > span,
.goal-completed-summary-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.goal-completed-group > summary strong {
  font-size: 0.82rem;
  font-weight: 720;
}

.goal-completed-group > summary .material-symbols-outlined {
  color: var(--muted);
  font-size: 1.15rem;
}

.goal-completed-summary-meta {
  color: var(--muted);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.goal-completed-summary-meta .material-symbols-outlined {
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.goal-completed-group[open] > summary .goal-completed-summary-meta .material-symbols-outlined {
  transform: rotate(180deg);
}

.goal-completed-group > .goal-rows {
  padding: 0 0.65rem 0.65rem;
}

.goal-completed-group--team {
  background: var(--surface);
}

.goal-row {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 72%, transparent);
  scroll-margin-top: 6rem;
}

.goal-row:target {
  outline: 2px solid var(--current-border);
  outline-offset: 2px;
}

.goal-row.is-overdue {
  box-shadow: inset 3px 0 0 var(--danger), inset 0 0 0 1px color-mix(in srgb, var(--danger) 15%, transparent);
}

.goal-row.is-completed {
  background: color-mix(in srgb, var(--success-soft) 42%, var(--surface-soft));
}

.goal-row-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
}

.goal-complete-toggle,
.goal-status-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--muted);
}

.goal-complete-toggle {
  border: 1px solid transparent;
}

.goal-complete-toggle:hover {
  border-color: var(--current-border);
  background: var(--current-wash);
  color: var(--current-deep);
}

.goal-row.is-completed .goal-complete-toggle,
.goal-row.is-completed .goal-status-mark {
  background: var(--success-soft);
  color: var(--success);
}

.goal-complete-toggle .material-symbols-outlined,
.goal-status-mark.material-symbols-outlined {
  font-size: 1.35rem;
}

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

.goal-row-copy h4,
.goal-row-copy p {
  margin: 0;
}

.goal-row-copy h4 {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 740;
  line-height: 1.35;
  text-wrap: pretty;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.goal-row.is-completed .goal-row-copy h4 {
  color: var(--ink-secondary);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.goal-row-copy p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

/* An expand trigger appears only when a goal title is clipped to two lines. */
.goal-row-expand {
  text-align: right;
  margin-top: 0.2rem;
}
.goal-row-expand[hidden] {
  display: none;
}
.goal-expand-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.goal-expand-trigger:hover {
  color: var(--ink);
  background: var(--current-wash);
}
.goal-expand-trigger:focus-visible {
  outline: 2px solid var(--current-border);
  outline-offset: 2px;
}

.goal-status-overdue {
  background: var(--danger-soft);
  color: var(--danger);
}

.goal-row-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.4rem;
}

.goal-progress-trigger,
.goal-edit-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 40px;
  padding: 0.4rem 0.55rem;
}

.goal-progress-trigger .material-symbols-outlined,
.goal-edit-trigger .material-symbols-outlined {
  font-size: 1rem;
}

.goal-edit-form {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 12rem) auto;
  gap: 0.65rem;
  align-items: end;
  padding-left: 3.1rem;
}

.goal-edit-form[hidden] {
  display: none;
}

.goal-edit-actions {
  display: flex;
  gap: 0.45rem;
}

.goal-edit-actions button {
  min-height: 44px;
}

.goal-delete-button {
  margin-left: 0.35rem;
}

.goal-edit-form .form-message {
  grid-column: 1 / -1;
}

.goal-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.45rem 0.65rem;
  margin-left: 3.1rem;
  padding-top: 0.6rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.goal-latest-update {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-xs);
  background: var(--surface-strong);
  box-shadow: inset 3px 0 0 var(--current-border);
}

.goal-latest-update-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: var(--current-wash);
  color: var(--current-deep);
  font-size: 1rem;
}

.goal-latest-update-copy {
  min-width: 0;
}

.goal-latest-update-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
}

.goal-latest-update-copy strong,
.goal-latest-update-copy p,
.goal-latest-update-copy time {
  margin: 0;
}

.goal-latest-update-copy strong {
  color: var(--ink-secondary);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.goal-latest-update-copy p {
  margin-top: 0.12rem;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.goal-latest-update-copy time {
  color: var(--muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.goal-latest-update--empty {
  box-shadow: inset 3px 0 0 var(--line-strong);
}

.goal-latest-update--empty .goal-latest-update-mark {
  background: var(--surface-soft);
  color: var(--muted);
}

.goal-latest-update--empty .goal-latest-update-copy p {
  color: var(--muted);
}

.goal-progress-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.goal-progress-history {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.goal-progress-history summary {
  border-radius: var(--radius-sm);
  color: var(--ink-secondary);
  cursor: pointer;
  list-style: none;
}

.goal-progress-history-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  gap: 0.45rem;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.45rem;
}

.goal-progress-history summary::-webkit-details-marker {
  display: none;
}

.goal-progress-history summary:hover {
  background: var(--surface-strong);
}

.goal-progress-history summary:focus-visible {
  outline: 2px solid var(--current);
  outline-offset: 2px;
}

.goal-progress-history-label {
  font-size: 0.76rem;
  font-weight: 720;
}

.goal-progress-history-count {
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.goal-progress-history summary .material-symbols-outlined {
  color: var(--muted);
  font-size: 1.2rem;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.goal-progress-history[open] summary .material-symbols-outlined {
  transform: rotate(180deg);
}

.goal-progress-entry {
  grid-column: 1 / -1;
  padding: 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  box-shadow: inset 3px 0 0 var(--current-border);
}

.goal-progress-entry[hidden] {
  display: none;
}

.goal-progress-list li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.goal-progress-history[open] {
  grid-column: 1 / -1;
}

.goal-progress-history[open] .goal-progress-list {
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-xs);
  background: var(--surface-strong);
}

.goal-progress-dot {
  width: 7px;
  height: 7px;
  margin-top: 0.38rem;
  border-radius: 50%;
  background: var(--current);
  box-shadow: 0 0 0 3px var(--current-wash);
}

.goal-progress-list p,
.goal-progress-list time {
  margin: 0;
}

.goal-progress-list p {
  color: var(--ink-secondary);
  font-size: 0.84rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.goal-progress-list time {
  display: block;
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.goal-note-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  padding: 0;
}

.goal-note-form button {
  min-height: 44px;
}

.goal-note-form .form-message {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
}

.goal-note-form .form-message:empty {
  display: none;
}

.goal-latest-update-stamp {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}

.goal-note-edited {
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 720;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.goal-progress-item-copy {
  min-width: 0;
}

.goal-progress-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.12rem;
}

.goal-progress-item-meta time {
  display: inline;
  margin-top: 0;
}

.goal-note-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.goal-note-icon-button:hover {
  background: var(--surface-soft);
  color: var(--current-deep);
}

.goal-note-icon-button .material-symbols-outlined {
  font-size: 1rem;
}

.goal-note-modal-panel {
  width: min(32rem, 100%);
}

.goal-note-revisions-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0 0 0 0.85rem;
  border-left: 2px solid var(--line);
  list-style: none;
}

.goal-note-revisions-list p,
.goal-note-revisions-list time {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.goal-note-revision-label {
  font-style: italic;
}

.goal-note-edit-form {
  display: grid;
  gap: 0.85rem;
}

.goal-note-edit-form .form-message {
  min-height: 0;
  margin: 0;
}

.goal-note-edit-form .form-message:empty {
  display: none;
}

.goal-empty {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-xs);
  background: var(--surface-soft);
  color: var(--muted);
}

.goal-empty .material-symbols-outlined {
  font-size: 1.2rem;
}

.goal-empty strong {
  display: block;
  color: var(--ink-secondary);
  font-size: 0.84rem;
  font-weight: 720;
}

.goal-empty p {
  margin: 0;
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .goal-team-owner-list {
    padding: 0.7rem;
  }

  .goal-team-group {
    padding-top: 1rem;
  }

  .goal-edit-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .goal-edit-form {
    padding-left: 0;
  }

  .goal-edit-actions,
  .goal-edit-actions button {
    width: 100%;
  }

  .goal-edit-actions {
    flex-wrap: wrap;
  }

  .goal-delete-button {
    margin-top: 0.25rem;
    margin-left: 0;
  }

  .goal-progress {
    margin-left: 0;
  }

  .goal-note-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .goal-stat-strip {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .goal-stat-strip .stat-cell {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .goal-stat-strip .stat-cell:first-child {
    border-left: 0;
  }

}

@media (max-width: 1080px) {
  .goal-rows {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .goal-modal-head {
    align-items: flex-start;
  }

  .goal-modal-heading {
    align-items: flex-start;
  }

  .goal-create-actions {
    width: 100%;
  }

  .goal-create-actions button {
    flex: 1 1 0;
  }

  .goal-owner-head {
    grid-template-columns: auto minmax(0, 1fr) 24px;
  }

  .goal-owner-total {
    grid-column: 2;
  }

  .goal-owner-chevron {
    grid-column: 3;
    grid-row: 1;
  }

  .goal-row-main {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .goal-row-actions {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 390px) {
  .goal-row-actions {
    width: 100%;
  }

  .goal-row-actions button {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .goal-complete-toggle,
  .goal-progress-history summary .material-symbols-outlined,
  .goal-owner-head,
  .goal-owner-chevron,
  .goal-completed-summary-meta .material-symbols-outlined {
    transition: none;
  }
}

/* Shared feedback for requests and page-level form work. */
.app-async-trigger[data-async-pending="true"] {
  cursor: wait;
  pointer-events: none;
}

.app-async-trigger--spinner[data-async-pending="true"] {
  color: transparent !important;
  text-shadow: none;
}

.app-async-trigger--spinner[data-async-pending="true"] > :not(.app-async-spinner) {
  visibility: hidden;
}

.app-async-spinner,
.app-busy-status__spinner {
  display: block;
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid color-mix(in srgb, var(--app-async-spinner-color, var(--current)) 26%, transparent);
  border-top-color: var(--app-async-spinner-color, var(--current));
  border-radius: 50%;
}

.app-async-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  visibility: visible !important;
  transform: translate(-50%, -50%);
  animation: app-busy-spin-centered 720ms linear infinite;
}

.app-busy-status__spinner {
  animation: app-busy-spin 720ms linear infinite;
}

input.app-async-trigger[data-async-pending="true"] {
  opacity: 0.68;
}

.app-busy-status {
  position: fixed;
  bottom: var(--app-feedback-bottom, max(1rem, calc(env(safe-area-inset-bottom) + 1rem)));
  left: var(--app-feedback-center, 50%);
  z-index: calc(var(--z-modal) + 5);
  display: flex;
  align-items: center;
  gap: 0.58rem;
  min-height: 40px;
  padding: 0.56rem 0.72rem 0.56rem 0.62rem;
  border: 1px solid var(--current-border);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: var(--shadow-raised);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition:
    opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.app-busy-status::before {
  content: "";
  align-self: stretch;
  width: 3px;
  border-radius: 2px;
  background: var(--current);
}

.app-busy-status[hidden] {
  display: none;
}

.app-busy-status.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.app-busy-status--success::before {
  background: var(--success);
}

.app-busy-status--error {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  background: var(--danger-soft);
}

.app-busy-status--error::before {
  background: var(--danger);
}

.app-busy-status--success .app-busy-status__spinner,
.app-busy-status--error .app-busy-status__spinner {
  display: none;
}

.app-busy-status--interactive,
.app-busy-status--success,
.app-busy-status--dialog {
  max-inline-size: min(36rem, calc(100vw - 1.5rem));
}

.app-busy-status--interactive,
.app-busy-status--success {
  left: clamp(min(19rem, 50vw), var(--app-feedback-center, 50%), max(50vw, calc(100vw - 19rem)));
}

.app-busy-status--interactive.is-visible {
  pointer-events: auto;
}

.app-busy-status.app-busy-status--dialog {
  inset: auto auto max(1rem, calc(env(safe-area-inset-bottom) + 1rem)) 50%;
  margin: 0;
}

.app-busy-status__label {
  color: var(--ink-secondary);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.2;
  white-space: nowrap;
}

.app-busy-status--interactive .app-busy-status__label,
.app-busy-status--success .app-busy-status__label,
.app-busy-status--dialog .app-busy-status__label {
  min-inline-size: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-busy-status--error .app-busy-status__label {
  color: var(--danger);
}

.app-busy-status__action,
.app-busy-status__dismiss {
  flex: none;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0.25rem 0.55rem;
  font-size: 0.82rem;
}

.app-busy-status__dismiss {
  display: grid;
  place-items: center;
  background: transparent;
  border-color: transparent;
  color: var(--ink-secondary);
}

.app-busy-status__dismiss:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.app-busy-status__action[hidden],
.app-busy-status__dismiss[hidden] {
  display: none;
}

@keyframes app-busy-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes app-busy-spin-centered {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (max-width: 560px) {
  .board-message:not(.admin-message) {
    right: 1rem;
  }

  .app-busy-status {
    right: max(0.75rem, env(safe-area-inset-right));
    left: max(0.75rem, env(safe-area-inset-left));
    justify-content: center;
    transform: translateY(8px);
  }

  .app-busy-status.app-busy-status--dialog {
    right: max(0.75rem, env(safe-area-inset-right));
    left: max(0.75rem, env(safe-area-inset-left));
  }

  .app-busy-status.is-visible {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-busy-status {
    transition: none;
  }

  .app-async-spinner,
  .app-busy-status__spinner {
    animation: none;
  }
}

/* Legal / marketing policy pages (privacy, support, delete-account). */
.legal-main { max-width: 760px; margin: 0 auto; padding: 56px 24px 96px; }
.legal-main h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 6px; }
.legal-updated { opacity: .6; font-size: .9rem; margin: 0 0 8px; }
.legal-intro { font-size: 1.08rem; opacity: .95; margin: 24px 0 8px; }
.legal-main h2 { font-size: 1.18rem; margin: 40px 0 10px; }
.legal-main p, .legal-main li { font-size: 1rem; line-height: 1.7; opacity: .9; }
.legal-main ul { padding-left: 1.2rem; margin: 0 0 16px; }
.legal-main li { margin: 5px 0; }
.legal-main a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal-divider { height: 1px; border: 0; margin: 40px 0;
  background: color-mix(in srgb, currentColor 14%, transparent); }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 18px 0 8px; }
.steps li { counter-increment: step; position: relative; padding: 0 0 18px 46px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .95rem;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.contact-line { font-size: 1.05rem; padding: 16px 18px; border-radius: 14px; margin: 6px 0 0;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.support-contact { margin: 20px 0 8px; padding: 18px 20px; border-radius: 14px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.support-contact strong { font-size: 1.15rem; }
.support-contact p { margin: 4px 0 0; }

/* Compact approval counts stay attached to their navigation destination. */
.navigation-count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.32rem;
  border-radius: 999px !important;
  background: var(--brand-ember);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.app-navigation__item .navigation-count-badge {
  position: absolute;
  right: 0.55rem;
}

.app-navigation__item:has(.navigation-count-badge) {
  padding-right: 2.4rem;
}

.mobile-menu-item:has(.navigation-count-badge) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.mobile-menu-item .navigation-count-badge {
  width: auto;
  min-width: 1.35rem;
  color: #fff;
}

html[data-desktop-navigation="collapsed"] .app-navigation__item .navigation-count-badge {
  top: 0.2rem;
  right: 0.2rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.22rem;
  font-size: 0.6rem;
}

/* Action queue — unresolved operational work lives behind the global bell. */
.notification-bell-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--ink-secondary);
  box-shadow: none;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.notification-bell-button:hover,
.notification-bell-button[aria-expanded="true"] {
  border-color: var(--current-border);
  background: var(--current-wash);
  color: var(--current-deep);
}

.notification-bell-button.has-notifications > .material-symbols-outlined {
  color: var(--current-deep);
  font-variation-settings: "FILL" 1, "wght" 620, "GRAD" 0, "opsz" 24;
}

.notification-bell-count {
  position: absolute;
  top: -0.32rem;
  right: -0.34rem;
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.28rem;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--brand-ember);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.notification-bell-count[hidden],
.notification-queue-total[hidden] {
  display: none;
}

.notification-queue-popover {
  width: min(440px, calc(100vw - 2rem));
  padding: 0;
  overflow: hidden auto;
  border-radius: 10px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-raised);
  transform-origin: top right;
  animation: notification-queue-enter 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes notification-queue-enter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notification-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 74px;
  padding: 0.9rem 1rem 0.85rem;
  border-bottom: 1px solid var(--line);
}

.notification-queue-head > div {
  display: grid;
  gap: 0.12rem;
}

.notification-queue-kicker {
  color: var(--current-deep);
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.notification-queue-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.notification-queue-total {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.42rem;
  border-radius: var(--radius-sm);
  background: var(--current-wash);
  color: var(--current-deep);
  font-size: 0.76rem;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.notification-queue-list {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem;
}

.notification-queue-item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem;
  gap: 0.7rem;
  align-items: center;
  min-height: 64px;
  padding: 0.65rem 0.7rem;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1), color 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.notification-queue-item:hover,
.notification-queue-item:focus-visible {
  background: var(--current-wash);
  color: var(--ink);
}

.notification-queue-item:active {
  transform: scale(0.985);
}

.notification-queue-icon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--current-deep);
  box-shadow: inset 3px 0 0 var(--current);
}

.notification-queue-icon .material-symbols-outlined {
  font-size: 1.08rem;
  font-variation-settings: "FILL" 1, "wght" 560, "GRAD" 0, "opsz" 20;
}

.notification-queue-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.notification-queue-copy strong,
.notification-queue-copy small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.notification-queue-copy strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 740;
  line-height: 1.25;
}

.notification-queue-copy strong a {
  color: inherit;
  text-decoration: none;
}

.notification-queue-copy strong a:hover,
.notification-queue-copy strong a:focus-visible {
  color: var(--current-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

.notification-queue-copy small {
  color: var(--ink-secondary);
  font-size: 0.72rem;
  font-weight: 550;
  line-height: 1.35;
  text-wrap: pretty;
}

.notification-queue-arrow {
  color: var(--muted);
  font-size: 1rem;
  transition: color 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 150ms cubic-bezier(0.23, 1, 0.32, 1);
}

.notification-queue-item:hover .notification-queue-arrow,
.notification-queue-item:focus-visible .notification-queue-arrow {
  color: var(--current-deep);
  transform: translateX(2px);
}

.notification-queue-dismiss {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.notification-queue-dismiss:hover,
.notification-queue-dismiss:focus-visible {
  border-color: var(--line);
  background: var(--surface-strong);
  color: var(--current-deep);
}

.notification-queue-dismiss .material-symbols-outlined {
  font-size: 1.05rem;
}

.notification-queue-note {
  margin: 0;
  padding: 0.1rem 1rem 0.85rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
}

.notification-queue-message {
  margin: -0.45rem 0 0;
  padding: 0 1rem 0.85rem;
  color: var(--current-deep);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.35;
}

.notification-queue-message:empty {
  display: none;
}

.notification-queue-empty {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 1.8rem 1.25rem 2rem;
  color: var(--ink-secondary);
  text-align: center;
}

.notification-queue-empty > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--success-strong);
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 580, "GRAD" 0, "opsz" 24;
}

.notification-queue-empty strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 760;
}

.notification-queue-empty p {
  max-width: 18rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.notification-queue-empty--compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  text-align: start;
}

.notification-queue-empty--compact > .material-symbols-outlined {
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
  font-size: 1rem;
}

.notification-queue-empty--compact strong {
  color: var(--ink-secondary);
  font-weight: 600;
}

@media (max-width: 900px) {
  .app-shell .topbar .topbar-actions {
    grid-column: 3;
    display: flex;
    justify-self: end;
    margin-left: 0;
  }

  .app-shell .topbar .topbar-actions .user-pill {
    display: none;
  }

  .app-shell .topbar .mobile-topbar-spacer {
    display: none;
  }

  .notification-queue-popover {
    right: calc(0.75rem + env(safe-area-inset-right)) !important;
    left: calc(0.75rem + env(safe-area-inset-left)) !important;
    width: auto;
    max-height: calc(100dvh - 6.5rem - env(safe-area-inset-bottom));
    transform-origin: top right;
  }
}

@media (max-width: 480px) {
  .notification-queue-head {
    min-height: 68px;
    padding: 0.78rem 0.82rem;
  }

  .notification-queue-list {
    padding: 0.4rem;
  }

  .notification-queue-item {
    grid-template-columns: 2.15rem minmax(0, 1fr) 1rem;
    gap: 0.58rem;
    min-height: 62px;
    padding: 0.58rem;
  }

  .notification-queue-icon {
    width: 2.15rem;
    height: 2.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notification-queue-popover {
    animation: none;
  }

  .notification-queue-arrow,
  .notification-queue-item,
  .notification-bell-button {
    transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear;
  }
}

/* App access uses the same compact ledger rhythm as the admin permissions. */
.app-access-editor { border: 0; padding: 0; margin: 1rem 0; min-width: 0; }
.app-access-editor legend { color: var(--ink); font-weight: 700; }
.app-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.app-access-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--color-border-subtle); border-radius: 8px; align-content: start; }
.app-access-row label { display: grid; gap: .375rem; min-width: 0; }
.app-access-row select { width: 100%; min-height: 40px; }
.app-access-row small { grid-column: 1 / -1; color: var(--ink-secondary); }
.app-access-presets { display: flex; gap: .5rem; margin: .75rem 0; }
.app-access-editor output { display: block; margin-top: .75rem; }
@media (max-width: 700px) { .app-access-grid { grid-template-columns: 1fr; } }

.app-access-row--scoped { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Personal access keeps the effective result ahead of optional additions. */
.app-access-row[data-app-access-inherited] { grid-template-columns: minmax(0, 1fr); align-content: start; }
.app-access-heading { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; min-width: 0; }
.app-access-heading > strong { color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.5; }
.app-access-result { color: var(--ink-secondary); font-size: .875rem; line-height: 1.5; }
.app-access-result > strong { display: inline-block; padding: .125rem .5rem; border-radius: 4px; background: var(--surface-soft); color: var(--ink); font-size: .875rem; font-weight: 600; }
.app-access-row .app-access-source { font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.app-access-row .app-access-source > span:first-child { color: var(--ink-secondary); }
.app-access-row .app-access-source > span:last-child { color: var(--ink); }
.app-access-heading, .app-access-result { overflow-wrap: anywhere; }
.app-access-row details { min-width: 0; border-top: 1px solid var(--color-border-subtle); }
.app-access-row details summary { cursor: pointer; min-height: 44px; padding: .625rem 0; font-size: .8125rem; line-height: 1.5; color: var(--ink-secondary); }
.app-access-row details summary:hover { color: var(--ink); }
.app-access-row details summary:focus-visible { outline: 2px solid var(--current); outline-offset: 2px; border-radius: 4px; }
.app-access-row details[open] summary { color: var(--ink); }
.app-access-row details label { margin-bottom: .5rem; }
.app-access-presets { flex-wrap: wrap; }


/* Report selection and childcare routing use the existing compact ledger controls. */
.report-type-filter { margin-bottom: 16px; justify-content: flex-start; }
.reporting-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 16px; }
.childcare-settings-fields > * { grid-column: 1 / -1; }
.childcare-recipient-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.childcare-recipients { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; max-height: 320px; overflow: auto; }
.childcare-recipients legend { padding: 0 4px; font-weight: 600; }
.childcare-recipients .checkbox-label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.childcare-recipients input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; }
@media (max-width: 640px) { .childcare-recipient-grid { grid-template-columns: 1fr; } }

/* Compact role summaries shared by profile previews and the People registry. */
.assigned-role-summary { min-width: 0; max-width: 320px; }
.assigned-role-summary > summary {
  width: fit-content;
  min-height: 40px;
  padding: 8px 4px;
  box-sizing: border-box;
  color: var(--ink-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
}
.assigned-role-summary > summary:hover { color: var(--ink); background: var(--surface-soft); }
.assigned-role-summary > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.assigned-role-summary > summary:active { background: var(--surface-soft); }
.assigned-role-summary .assigned-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 0 8px;
}
.assigned-role-summary .badge { white-space: normal; overflow-wrap: anywhere; }

/* UniFi setup follows the shared Admin settings sections. */
#unifi-access-settings-form [hidden] { display: none !important; }
#unifi-access-settings-form details > summary {
  min-height: 44px;
  align-content: center;
  cursor: pointer;
  font-weight: 650;
}
#unifi-access-settings-form details > .settings-section-fields { margin-top: 0.65rem; }
#unifi-access-settings-form fieldset {
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#unifi-access-settings-form [data-unifi-door-list] {
  display: grid;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}
#unifi-access-settings-form [data-unifi-tunnel-details] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 0.5rem 0.75rem;
  padding: 0.75rem;
  background: var(--surface-soft);
  border-radius: 8px;
  overflow-wrap: anywhere;
}
#unifi-access-settings-form [data-unifi-tunnel-details] dd { margin: 0; font-variant-numeric: tabular-nums; }
#unifi-access-settings-form ol { padding-left: 1.25rem; }
#unifi-access-settings-form li + li { margin-top: 0.65rem; }

#unifi-access-settings-form .checkbox-label > span { display: grid; gap: 0.25rem; }

/* Keep integration settings aligned beneath their section headings. */
:is(#unifi-access-settings-form, #slack-settings-form) .settings-section {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0;
}

:is(#unifi-access-settings-form, #slack-settings-form) .settings-section:first-child {
  padding-top: 8px;
}

:is(#unifi-access-settings-form, #slack-settings-form) .settings-section-head {
  gap: 8px;
  align-items: start;
}

:is(#unifi-access-settings-form, #slack-settings-form) .settings-section-head h4 {
  line-height: 1.4;
}

:is(#unifi-access-settings-form, #slack-settings-form) .settings-section-head p {
  max-width: none;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
}

:is(#unifi-access-settings-form, #slack-settings-form) .settings-section-fields {
  align-items: start;
  gap: 16px;
}

:is(#unifi-access-settings-form, #slack-settings-form) .settings-section-fields > label:not(.checkbox-label) {
  display: grid;
  align-content: start;
  gap: 8px;
}

#unifi-access-settings-form input:not([type="checkbox"]),
#unifi-access-settings-form select,
#unifi-access-settings-form button {
  min-height: 44px;
}

#unifi-access-settings-form .checkbox-label {
  min-height: 44px;
  margin: 0;
}

#unifi-access-settings-form fieldset {
  margin: 0;
  padding: 16px;
}

#unifi-access-settings-form .unifi-credentials,
#unifi-access-settings-form .settings-feature-toggle {
  background: var(--surface-soft);
}

#unifi-access-settings-form .settings-feature-toggle {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

#unifi-access-settings-form .settings-section-fields > p,
#unifi-access-settings-form .unifi-check-action p,
#unifi-access-settings-form [data-unifi-test-result] {
  margin: 0;
}

#unifi-access-settings-form .unifi-connection-check {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

#unifi-access-settings-form .unifi-check-action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

#unifi-access-settings-form .unifi-check-action p {
  flex: 1 1 260px;
  font-size: 0.82rem;
  line-height: 1.5;
}

#unifi-access-settings-form [data-unifi-test-result]:empty {
  display: none;
}

#unifi-access-settings-form .unifi-settings-help,
#unifi-access-settings-form [data-unifi-settings-status],
#unifi-access-settings-message {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
}

.saved-credential {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 8px;
}

.saved-credential > label {
  margin: 0;
}

.saved-credential-locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: 12px;
  padding: 0 4px 0 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.saved-credential-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.saved-credential-state .material-symbols-outlined {
  font-size: 18px;
}

.saved-credential-editor {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.saved-credential input:not([type="checkbox"]),
.saved-credential button {
  min-height: 44px;
}

.saved-credential-editor > small {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.saved-credential .saved-credential-remove {
  margin: 0;
  min-height: 44px;
  align-items: center;
}

.saved-credential-cancel {
  justify-self: end;
}

.saved-credential [hidden] {
  display: none !important;
}

/* Web usability: readable chrome, a document scroller on phones, and local icons. */
[data-theme="dark"] { --color-text-muted: #aaa2b4; }
.notification-bell-count { background: #a93517; font-size: 0.6875rem; }
.topbar-actions { overflow: visible; }
.mobile-menu-user .account-church-name {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.4;
}
.app-navigation__label,
.mobile-menu-section-label {
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
}
@media (min-width: 901px) {
  .app-navigation { gap: 0.35rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .app-navigation__groups { gap: 0.4rem; }
  .app-navigation__group { gap: 0; }
  .app-navigation__label { margin-bottom: 0.1rem; font-size: 0.8125rem; text-transform: none; letter-spacing: 0; }
  .app-navigation__item { min-height: 44px; padding-block: 0.3rem; background: transparent; }
  .app-navigation__item .material-symbols-outlined { background: transparent; }
  .app-navigation__footer { gap: 0.2rem; padding-top: 0.3rem; }
  .app-navigation__tools { display: flex; gap: 0.2rem; }
  .app-navigation__tools > button { min-width: 0; gap: 0.15rem; padding-inline: 0.15rem; font-size: 0.7rem; }
  .app-navigation__tools > button > .material-symbols-outlined { width: 1.4rem; }
  html[data-desktop-navigation="collapsed"] .app-navigation__tools { flex-direction: column; }
  .admin-shell .admin-nav-shell { padding-top: 0.5rem; }
  .admin-shell .admin-nav-shell .app-navigation__item:not(.is-active):not(:hover) { background: transparent; }
}

@media (max-width: 900px) {
  html.app-document { height: auto; overflow-x: clip; overflow-y: auto; }
  body.app-shell,
  body.admin-shell:not(.control-shell) {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .app-shell .dashboard-grid,
  .admin-shell .admin-console-grid {
    flex: 1 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    display: block;
  }
  .app-shell .dashboard-grid > .tab-panel,
  .admin-shell .admin-panel {
    height: auto;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }
  .app-shell .topbar,
  .admin-shell:not(.control-shell) .topbar {
    flex: 0 0 auto;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 0.375rem;
    min-height: 76px;
    padding-inline: calc(0.75rem + env(safe-area-inset-left)) calc(0.75rem + env(safe-area-inset-right));
  }
  .app-shell .topbar .brand,
  .admin-shell .topbar .brand { max-width: 100%; min-width: 0; }
  .app-shell .topbar .brand-logo-chip,
  .admin-shell .topbar .brand-logo-chip { width: min(160px, 100%); height: 60px; min-width: 0; padding: 0.2rem 0.35rem; }
  .app-shell .topbar .brand-lockup,
  .admin-shell .topbar .brand-lockup { width: 100%; height: 52px; object-fit: contain; }
  .app-shell .topbar .topbar-actions,
  .admin-shell .topbar .topbar-actions {
    grid-column: 3;
    display: flex;
    gap: 0.375rem;
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    justify-self: end;
    flex-wrap: nowrap;
  }
  .app-shell .topbar .topbar-actions .user-pill,
  .admin-shell .topbar .topbar-actions .user-pill,
  .app-shell .mobile-topbar-spacer,
  .admin-shell .mobile-topbar-spacer { display: none; }
  .topbar .navigation-search-trigger {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }
  .topbar .navigation-search-trigger > span:not(.material-symbols-outlined),
  .topbar .navigation-search-trigger kbd { display: none; }
  .app-shell > .release-footer,
  .admin-shell:not(.control-shell) > .release-footer {
    position: static;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    gap: 0.35rem;
    margin-top: auto;
    padding: 0.3rem 0 max(0.5rem, env(safe-area-inset-bottom));
    width: calc(100% - 1.5rem);
    font-size: 0.6875rem;
  }
  .release-footer__meta { min-width: 0; flex: 1 1 0; }
  .app-shell > .release-footer .release-footer__release,
  .app-shell > .release-footer .release-footer__theme,
  .admin-shell > .release-footer .release-footer__release,
  .admin-shell > .release-footer .release-footer__theme { display: none; }
  .release-footer__license { min-width: 0; max-width: 100%; }
  .release-footer__license-trigger { max-width: 100%; min-height: 44px; padding: 0.3rem 0; border: 0; background: transparent; font-size: 0.6875rem; }
  .release-footer__copyright { min-height: 44px; padding: 0; border: 0; background: transparent; font-size: 0.6875rem; flex: 0 0 auto; }
  .mobile-menu-release-controls { display: grid; gap: 0.3rem; }
  .mobile-menu-release-controls > * { display: block; width: 100%; }
  .mobile-menu-release-controls .release-footer__codename,
  .mobile-menu-release-controls .release-footer__theme-trigger {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0.62rem 0.68rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-secondary);
    font-size: 0.92rem;
    text-transform: none;
  }
  .mobile-menu-release-controls .release-footer__codename::before { content: ""; }
  .mobile-menu-release-controls .release-footer__release-popover,
  .mobile-menu-release-controls .release-footer__theme-menu {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: 0.2rem;
    box-shadow: none;
  }
  .mobile-menu-release-controls button { min-height: 44px; }
  .app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .app-shell select,
  .app-shell textarea,
  .admin-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .admin-shell select,
  .admin-shell textarea { font-size: 16px; }
}

@media (max-width: 350px) {
  .app-shell .topbar,
  .admin-shell:not(.control-shell) .topbar { gap: 0.25rem; padding-inline: 0.5rem; }
  .app-shell .topbar .brand-logo-chip,
  .admin-shell .topbar .brand-logo-chip { width: 144px; max-width: 100%; }
}

@media (pointer: coarse) {
  .app-shell button:not(.goal-complete-toggle),
  .admin-shell button,
  .app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .app-shell select,
  .admin-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .admin-shell select,
  .app-shell a:is(.ghost-button, .small-button, .primary-button, .my-assignment-time-link),
  .admin-shell a:is(.ghost-button, .small-button, .primary-button) { min-height: 44px; }
  .app-shell button:not(.goal-complete-toggle), .admin-shell button { min-width: 44px; }
  .workforce-assignment-card a[href="/time-tracking"] { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 900px) {
  .admin-shell .topbar .topbar-actions > * { flex: 0 0 auto; }
}
@media (pointer: coarse) {
  .app-shell .goal-complete-toggle { min-width: 44px; min-height: 44px; }
}

.profile-phone-account { display: none; }
@media (max-width: 900px) {
  .profile-shell .topbar { position: sticky; }
  .profile-shell .profile-main { flex: 1 0 auto; overflow: visible; scrollbar-gutter: auto; }
  .profile-shell [data-profile-back], .profile-shell .profile-church-name { display: none; }
  .profile-phone-account { display: block; grid-column: 1; }
  .profile-phone-account > summary {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong);
    list-style: none; cursor: pointer;
  }
  .profile-phone-account > summary::-webkit-details-marker { display: none; }
  .profile-phone-account__panel {
    position: absolute; top: 100%; left: 0.75rem; right: 0.75rem;
    display: grid; gap: 0.5rem; padding: 1rem; max-height: calc(100dvh - 90px);
    overflow: auto; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); box-shadow: var(--shadow-raised);
  }
}

/* Routine care has a dashed plum edge, tool icon, and label on the calendar. */
.calendar-reminder-badge,
.vc-bar.is-facility-reminder,
.calendar-detail-card.is-facility-reminder {
  --reminder-ink: var(--ink);
  --reminder-bg: var(--surface-soft);
  background: var(--reminder-bg);
  color: var(--reminder-ink);
  border: 1px dashed var(--muted);
  border-left: 3px solid var(--ink);
}
.calendar-reminder-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}
.calendar-reminder-badge .material-symbols-outlined {
  font-size: 1rem;
}
.vc-bar.is-facility-reminder:hover,
.vc-bar.is-facility-reminder:focus-visible {
  background: var(--surface-strong);
  color: var(--ink);
}
@media (max-width: 900px) {
}
@media (max-width: 680px) {
  .vc-mday.has-facility-reminder .vc-mday-count {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    border: 1px dashed var(--muted);
    border-left: 3px solid var(--ink);
    border-radius: 4px;
    background: var(--surface-soft);
    color: var(--ink);
  }
  .vc-mday-count .material-symbols-outlined {
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   Sharper lists — foundation
   White content area on tinted chrome, a lighter top bar, a plain sidebar and
   footer, and one-line dropdowns. Shared list/dialog patterns live in
   ui_patterns.css; this block only owns the frame around them.
   ========================================================================== */

/* Dropdowns stay one line: a wide value must truncate, never wrap and grow the
   control taller than its neighbours (Linux and Windows render it that way). */
select:not([multiple]):not([size]) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Surfaces: chrome paints the canvas itself, so the page behind it is white. */
body.app-shell {
  background: var(--surface);
}

@media (max-width: 900px) {
  body.admin-shell:not(.control-shell) {
    background: var(--surface);
  }
}

@media (min-width: 901px) {
  /* Keep the admin rail painted through the footer row; only the content side turns white. */
  body.admin-shell:not(.control-shell) {
    background:
      linear-gradient(
        to right,
        var(--admin-navigation-rail) 0,
        var(--admin-navigation-rail) 247px,
        var(--admin-navigation-divider) 247px,
        var(--admin-navigation-divider) 248px,
        var(--surface) 248px
      );
  }
}

.profile-main,
body.admin-shell:not(.control-shell) > .admin-console-grid {
  background: var(--surface);
}

body.app-shell > .topbar,
body.admin-shell:not(.control-shell) > .topbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

/* The off-screen skip link must not cast its shadow into the top bar. */
.skip-link:not(:focus-visible) {
  box-shadow: none;
}

/* Top bar: logo plate, a soft page label, centred search, bell and account. */
.topbar .brand-logo-chip {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
}

.topbar .topbar-context__brand-rail {
  display: none;
}

.topbar .topbar-context--operations,
.topbar .topbar-context--admin {
  position: relative;
  gap: 10px;
  min-height: 44px;
  padding: 0.3rem 14px 0.3rem 12px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--surface-soft);
}

.topbar .topbar-context--operations .topbar-context__mark,
.topbar .topbar-context--admin .topbar-context__mark {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--color-brand-accent);
}

.topbar .topbar-context__mark::before {
  display: none;
}

.topbar .topbar-context--operations .topbar-context__copy strong,
.topbar .topbar-context--admin .topbar-context__copy strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
}

.topbar .topbar-context--admin .topbar-context__copy small {
  color: var(--ink-secondary);
}

.topbar .notification-bell-button {
  flex: 0 0 44px;
  border-color: var(--control-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.topbar .user-pill,
.topbar .user-pill--with-organization-logo {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.topbar .user-pill:hover,
.topbar .user-pill[aria-expanded="true"] {
  border-color: var(--control-border);
  background: var(--surface);
}

.topbar .user-pill .user-pill-copy > span {
  color: var(--ink-secondary);
  font-size: 0.75rem;
}

@media (min-width: 901px) {
  .app-shell .topbar,
  .admin-shell .topbar {
    gap: 16px;
  }

  .topbar .topbar-actions {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
  }

  .topbar .navigation-search-trigger {
    flex: 0 1 520px;
    min-width: 200px;
    min-height: 44px;
    margin-inline: auto;
    padding: 0 14px;
    justify-content: flex-start;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .topbar .navigation-search-trigger:hover {
    border-color: var(--ink-secondary);
    background: var(--surface);
  }

  .topbar .navigation-search-trigger kbd {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
  }

  body.app-shell:not(.profile-shell) > .topbar .brand,
  body.admin-shell:not(.control-shell) > .topbar .brand {
    width: calc(248px - var(--app-gutter) - 16px);
  }

  html[data-desktop-navigation="collapsed"] body.app-shell:not(.profile-shell) > .topbar .brand {
    width: auto;
  }

  .app-shell .topbar .brand-logo-chip,
  .admin-shell .topbar .brand-logo-chip {
    width: auto;
    height: 56px;
    padding: 5px 14px;
  }

  .app-shell .topbar .brand-lockup,
  .admin-shell .topbar .brand-lockup {
    height: 44px;
  }

  /* Content starts close to the top bar: data near the top. */
  .app-shell .dashboard-grid > .tab-panel {
    padding-top: 18px;
  }
}

/* Sidebar: same groups and items, no icon tiles, Admin Console as a plain row. */
.app-navigation__label {
  color: var(--ink-secondary);
  font-weight: 700;
}

@media (min-width: 901px) {
  .app-navigation {
    background: var(--bg);
  }

  .app-navigation__item {
    color: var(--ink-secondary);
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .app-navigation__item .material-symbols-outlined,
  .app-navigation__item.is-active .material-symbols-outlined {
    background: transparent;
  }

  .app-navigation__item .material-symbols-outlined {
    color: var(--ink-secondary);
  }

  .app-navigation__item:hover,
  .app-navigation__item:focus-visible {
    background: var(--surface-soft);
    color: var(--ink);
  }

  .app-navigation__item.is-active {
    background: var(--current-wash);
    color: var(--current-deep);
    font-weight: 700;
  }

  .app-navigation__item.is-active .material-symbols-outlined {
    color: var(--current-deep);
  }

  .app-navigation__footer {
    border-top-color: var(--line);
  }

  .app-navigation__admin-console {
    min-height: 44px;
    background: transparent;
    color: var(--ink-secondary);
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .app-navigation__admin-console > .material-symbols-outlined {
    background: transparent;
    color: var(--ink-secondary);
    font-variation-settings: "FILL" 0, "wght" 520, "GRAD" 0, "opsz" 20;
  }

  .app-navigation__admin-console:hover,
  .app-navigation__admin-console:focus-visible {
    background: var(--surface-soft);
    color: var(--ink);
  }

  .app-navigation__tools > button {
    display: inline-flex;
    flex: 0 1 auto;
    width: auto;
    gap: 5px;
    padding-inline: 4px;
    white-space: nowrap;
    color: var(--ink-secondary);
    font-size: 0.78rem;
    font-weight: 600;
  }

  .app-navigation__tools > button > .material-symbols-outlined {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .app-navigation__tools > .app-navigation__collapse {
    margin-left: auto;
  }

  .app-navigation__tools .app-navigation__text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[data-desktop-navigation="collapsed"] .app-navigation__tools > .app-navigation__collapse {
    margin-left: 0;
  }
}

/* Footer: release, license, theme and copyright as plain text on one hairline. */
body.app-shell > .release-footer,
body.admin-shell:not(.control-shell) > .release-footer {
  color: var(--ink-secondary);
  border-top: 1px solid var(--line);
}

.release-footer .release-footer__codename,
.release-footer .release-footer__license-trigger,
.release-footer .release-footer__theme-trigger {
  min-height: 2rem;
  padding: 0 4px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 700;
}

.release-footer .release-footer__codename {
  color: var(--current-deep);
}

.release-footer .release-footer__license-trigger,
.release-footer .release-footer__license-trigger .material-symbols-outlined {
  color: var(--ink-secondary);
}

.release-footer .release-footer__license--warning .release-footer__license-trigger,
.release-footer .release-footer__license--warning .release-footer__license-trigger .material-symbols-outlined {
  color: var(--warning);
}

.release-footer .release-footer__license--danger .release-footer__license-trigger,
.release-footer .release-footer__license--danger .release-footer__license-trigger .material-symbols-outlined {
  color: var(--danger);
}

.release-footer .release-footer__theme-trigger {
  color: var(--ink);
}

.release-footer .release-footer__theme-label > span {
  color: var(--ink-secondary);
}

.release-footer .release-footer__codename:hover,
.release-footer .release-footer__codename[aria-expanded="true"],
.release-footer button.release-footer__license-trigger:hover,
.release-footer button.release-footer__license-trigger[aria-expanded="true"],
.release-footer .release-footer__theme-trigger:hover,
.release-footer .release-footer__theme-trigger[aria-expanded="true"] {
  border: 0;
  background: transparent;
}

/* Underline the words only. On the whole button, an icon inside it draws a second line at its
   own size and baseline, lower than the text's. */
.release-footer .release-footer__codename:hover,
.release-footer .release-footer__codename[aria-expanded="true"],
.release-footer button.release-footer__license-trigger:hover > :not(.material-symbols-outlined),
.release-footer button.release-footer__license-trigger[aria-expanded="true"] > :not(.material-symbols-outlined),
.release-footer .release-footer__theme-trigger:hover > :not(.material-symbols-outlined),
.release-footer .release-footer__theme-trigger[aria-expanded="true"] > :not(.material-symbols-outlined) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.release-footer .release-footer__copyright {
  font-size: 0.8125rem;
}

@media (pointer: coarse) {
  .release-footer .release-footer__codename,
  .release-footer .release-footer__license-trigger,
  .release-footer .release-footer__theme-trigger {
    min-height: 44px;
  }
}

/* Sharper lists — Time Tracking */
.time-ledger-header > div { display: contents; }
.time-ledger-header .page-state { margin: 0; color: var(--muted); font-size: 0.875rem; }
/* The h1 sits inside a display: contents wrapper, so the shared head rule cannot reset it. */
.time-ledger-header h1 { margin: 0; }
.time-ledger-shell { gap: 12px; }
.time-clock-band,
.time-submit-band {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left-width: 1px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.time-clock-band .time-ledger-kicker,
.time-clock-band small { color: var(--muted); }
.time-ledger-kicker { color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.time-clock-band strong { margin: 0; font-size: 1.125rem; color: var(--ink); }
.time-ledger-section { overflow: visible; }
.time-ledger-section > .sh-box__head { padding: 0 12px; }
.time-ledger-section > .sh-box__head > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.time-ledger-section > .sh-box__head .time-ledger-total { margin-left: auto; color: var(--ink); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.time-ledger-section > .sh-box__empty { padding: 12px; }
.time-ledger-section > .sh-box__head:first-child { border-radius: 7px 7px 0 0; }
.time-service-row,
.time-unit-row { padding: 9px 12px; border-top: 1px solid var(--line); border-bottom: 0; }
.time-service-row.is-selected { background: transparent; }
.time-unit-list { border-top: 0; }
.time-paid-leave-ledger { padding: 12px; }
.time-ledger-header > div > h1,
.time-ledger-header h1 { font-size: 1.375rem; letter-spacing: -0.01em; line-height: 1.2; }

/* ==========================================================================
   Sharper lists — purchasing
   Purchase Requests, Receipts and the dialogs in dialogs/purchasing.html,
   built on the shared .sh-* patterns in ui_patterns.css.
   ========================================================================== */

#panel-purchasing .purchase-center,
#panel-card-spend .purchase-center {
  gap: 14px;
}

#panel-purchasing .purchase-workspace,
#panel-card-spend .church-card-workspace {
  gap: 14px;
}

/* Filters: one compact line on wide screens; the labels stay for assistive tech. */
#panel-purchasing .ledger-filter-bar,
#panel-card-spend .ledger-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

#panel-purchasing .ledger-filter-bar .ledger-filter-advanced,
#panel-card-spend .ledger-filter-bar .ledger-filter-advanced {
  display: contents;
}

#panel-purchasing .ledger-filter-bar label,
#panel-card-spend .ledger-filter-bar label {
  display: block;
  flex: 1 1 120px;
  min-width: 0;
}

#panel-purchasing .ledger-filter-bar .ledger-filter-search,
#panel-card-spend .ledger-filter-bar .ledger-filter-search {
  flex: 3 1 200px;
}

#panel-purchasing .ledger-filter-bar .ledger-filter-sort,
#panel-card-spend .ledger-filter-bar .ledger-filter-sort {
  flex: 1.4 1 180px;
}

#panel-purchasing .ledger-filter-bar label > span:first-child,
#panel-card-spend .ledger-filter-bar label > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#panel-purchasing .ledger-filter-bar :is(input, select),
#panel-card-spend .ledger-filter-bar :is(input, select) {
  min-height: 36px;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  background-color: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-purchasing .ledger-filter-bar .ledger-filter-meta,
#panel-card-spend .ledger-filter-bar .ledger-filter-meta {
  flex: 0 0 auto;
  min-height: 36px;
  margin-left: auto;
}

#panel-purchasing .ledger-filter-meta > :is(button, a):not([hidden]),
#panel-card-spend .ledger-filter-meta > :is(button, a):not([hidden]) {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 0.8125rem;
}

#panel-purchasing .ledger-filter-meta > span,
#panel-card-spend .ledger-filter-meta > span {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* List blocks: a group is one .sh-box; collapsible groups use details/summary. */
.purchase-box > summary.sh-box__head,
.receipt-group > summary.sh-box__head {
  cursor: pointer;
  list-style: none;
}

.purchase-box > summary.sh-box__head::-webkit-details-marker {
  display: none;
}

.purchase-box > summary.sh-box__head::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: 0 6px 3px auto;
  border-right: 2px solid var(--ink-secondary);
  border-bottom: 2px solid var(--ink-secondary);
  transform: rotate(45deg);
}

.purchase-box[open] > summary.sh-box__head::after {
  margin-bottom: -3px;
  transform: rotate(-135deg);
}

.purchase-box > summary.sh-box__head:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  box-shadow: none;
}

details.purchase-box:not([open]) > summary.sh-box__head {
  border-radius: 7px;
}

.sh-box__head .ledger-group-count {
  min-width: 0;
  line-height: 1.3;
}

.sh-box__note {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Purchase request row: the title button is the row's link. */
.purchase-row > button.sh-row__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  line-height: inherit;
  text-align: left;
  transform: none !important;
  transition: none;
}

.purchase-row > button.sh-row__link:is(:hover, :active, :focus) {
  background: transparent;
  color: var(--ink);
}

.purchase-row:has(> .sh-row__link:hover) {
  background: var(--color-bg-hover);
}

.purchase-row > .sh-meter {
  align-self: center;
}

.purchase-row__state .sh-meter__text {
  padding-left: 100px;
}

/* Receipts: the summary line is the row; details hold facts and actions. */
.receipt-sum {
  gap: 4px 24px;
}

.receipt-sum > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.receipt-sum > .receipt-sum--alert strong {
  color: var(--danger);
}

.sh-box > .receipt-row {
  border-top: 1px solid var(--line);
}

.sh-box > .receipt-row:first-child {
  border-top: 0;
}

.receipt-row > summary.sh-row {
  list-style: none;
}

.receipt-row > summary.sh-row::-webkit-details-marker {
  display: none;
}

.receipt-row > summary.sh-row .sh-row__go {
  transition: transform 160ms ease;
}

.receipt-row[open] > summary.sh-row .sh-row__go {
  transform: rotate(180deg);
}

.receipt-row:last-child:not([open]) > summary.sh-row {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.receipt-row .sh-row__amount.is-empty {
  color: var(--muted);
  font-weight: 500;
}

.receipt-row__flag {
  font-weight: 600;
}

.receipt-row__flag--draft {
  color: var(--color-link);
}

.receipt-row__flag--missing {
  color: var(--warning);
}

.receipt-row > .receipt-row__details {
  display: grid;
  gap: 12px;
  padding: 2px 12px 14px 42px;
}

.receipt-row__details > .sh-facts {
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
  font-size: 0.875rem;
}

.receipt-row__details > .sh-facts > :is(dt, dd) {
  padding: 7px 0;
}

.receipt-row__details .receipt-row__doc {
  font-weight: 400;
}

.receipt-row__details > .receipt-row__state {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.8125rem;
}

.receipt-row__state strong {
  color: var(--ink);
  font-weight: 600;
}

.receipt-row__details > .receipt-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.receipt-row__actions > .sh-quiet-danger {
  margin-right: auto;
}

.receipt-row__actions > :is(button, a):not(.sh-quiet-danger) {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 700;
}

/* New / edit request and receipt dialogs */
:is(#purchase-request-modal, #card-purchase-modal) .reference-picker-field.sh-field {
  display: grid;
  gap: 6px;
}

:is(#purchase-request-modal, #card-purchase-modal) .reference-picker-field.sh-field > .reference-picker-field-label {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

:is(#purchase-request-modal, #card-purchase-modal) .reference-picker-field-label .label-hint {
  color: var(--muted);
  font-size: inherit;
  font-weight: 500;
}

:is(#purchase-request-modal, #card-purchase-modal) .reference-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  text-align: left;
}

:is(#purchase-request-modal, #card-purchase-modal) .reference-picker-trigger [data-reference-picker-value] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-dialog__body > .purchase-form-note,
.sh-dialog__body > .card-form-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
}

.sh-dialog__body > .purchase-form-note[hidden] {
  display: none;
}

.sh-dialog__body > :is(.purchase-form-note, .card-form-note) > .material-symbols-outlined {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--muted);
  font-size: 18px;
}

.purchase-preview {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.purchase-preview__title {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

.purchase-preview__count {
  color: var(--muted);
  font-weight: 500;
}

.purchase-preview__empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

#purchase-request-modal .sh-more__what > span {
  white-space: nowrap;
}

/* Request detail */
.purchase-detail__lede {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: -12px 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.purchase-detail__amount {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.purchase-detail__who {
  flex-basis: 100%;
  color: var(--ink-secondary);
  font-size: 0.875rem;
}

.purchase-detail__reason {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.purchase-detail__path {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.purchase-detail__path > h3 {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
}

.purchase-detail__step {
  color: var(--muted);
  font-weight: 500;
}

.purchase-detail .purchase-request-detail-url {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: var(--color-link);
  font-weight: 600;
}

.purchase-detail .purchase-request-detail-url > .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 16px;
}

/* Receipt preview keeps its large viewer inside the dialog pattern. */
#card-receipt-modal .modal-panel.sh-dialog.card-receipt-modal-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1080px, 100%);
  height: min(820px, calc(100dvh - 3rem));
  overflow: hidden;
}

#card-receipt-modal .sh-dialog__head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

#card-receipt-modal .sh-dialog__foot {
  position: static;
  justify-content: space-between;
}

#card-receipt-modal .card-receipt-foot > span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  /* Rows keep the meter; the text gets the room left over. */
  .purchase-row {
    gap: 10px;
  }
}

@media (max-width: 700px) {
  #panel-purchasing .ledger-filter-bar.ledger-filter-bar--enhanced,
  #panel-card-spend .ledger-filter-bar.ledger-filter-bar--enhanced {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0;
  }

  #panel-purchasing .ledger-filter-toggle,
  #panel-card-spend .ledger-filter-toggle {
    min-height: 44px;
    border-radius: 7px;
  }

  .receipt-sum {
    gap: 2px 16px;
  }

  .sh-box__note {
    display: none;
  }

  .receipt-row > .receipt-row__details {
    padding-left: 12px;
  }

  .receipt-row__details > .receipt-row__actions > :is(button, a):not(.sh-quiet-danger) {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .receipt-row__details > .sh-facts {
    grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
  }

  .purchase-row__state .sh-meter__text {
    padding-left: 0;
  }
}
.sh-dialog .time-approver-entry-form,
.sh-dialog .time-shift-edit-form { display: block; }
.sh-dialog .time-approver-hour-fields[hidden],
.sh-dialog .time-approver-service-fields[hidden] { display: none; }

/* Sharper lists — facilities
   Page head, the issue board (columns are bordered lists of compact rows), reminders,
   and the issue / issue detail / reminder dialogs. Tokens only, so dark mode follows. */

.facilities-workspace,
.facilities-pane {
  gap: 14px;
}

.facilities-head .sh-seg .material-symbols-outlined {
  font-size: 18px;
}

.facilities-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.facilities-toolbar__title {
  margin: 0 8px 0 0;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.facilities-toolbar__select {
  flex: 0 1 190px;
  min-width: 0;
  margin: 0;
}

.facilities-toolbar__select select {
  width: 100%;
  min-height: 36px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facilities-toolbar__note {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 0.8125rem;
}

.facilities-pane > .kanban-board-shell {
  margin-bottom: 0;
}

/* Outranks the shared [class*="-card"] radius so hairlines run edge to edge. */
.kanban-board .kanban-column-body .kanban-card {
  border-radius: 0;
}

.kanban-card .kanban-drag-handle {
  grid-area: grip;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  margin: -4px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}

.kanban-card .kanban-drag-handle:hover,
.kanban-card .kanban-drag-handle:focus-visible {
  border: 0;
  background: var(--surface-soft);
  color: var(--ink);
}

.kanban-card .kanban-drag-handle .material-symbols-outlined {
  font-size: 20px;
}

.kanban-drag-preview.kanban-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

/* Issue detail */

.task-detail-heading {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.task-detail-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.task-detail-chip {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 16rem);
  min-height: 22px;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.task-detail-chip:empty {
  display: none;
}

.task-detail-chip.status-pending,
.task-detail-chip.priority-medium {
  background: var(--warning-soft);
  color: var(--warning);
}

.task-detail-chip.status-in_progress {
  background: var(--current-wash-strong);
  color: var(--current-deep);
}

.task-detail-chip.status-completed {
  background: var(--success-soft);
  color: var(--success);
}

.task-detail-chip.priority-high {
  background: var(--danger-soft);
  color: var(--danger);
}

.task-detail-sentence,
.task-detail-description {
  margin: 0;
  overflow-wrap: anywhere;
}

.task-detail-sentence {
  color: var(--ink-secondary);
  font-size: 0.875rem;
}

.task-detail-note {
  margin: 0;
}

.task-detail-description {
  color: var(--ink);
}

.task-detail-description.is-empty {
  color: var(--muted);
}

.task-detail-status-control {
  max-width: none;
}

.task-detail-photos,
.task-detail-budget {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.task-detail-photos[hidden],
.task-detail-budget[hidden],
.task-detail-actions[hidden] {
  display: none;
}

.task-detail-photo-head,
.task-detail-budget > h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.task-detail-photo-count {
  color: var(--muted);
  font-weight: 600;
}

.task-photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.task-photo-thumb {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--ink-secondary);
  font-size: 0.75rem;
  text-decoration: none;
}

.task-photo-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  object-fit: cover;
}

.task-photo-thumb span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-meta .task-meta-note {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* Report / edit issue */

#task-modal .reference-picker-field.sh-field {
  display: grid;
  gap: 6px;
}

#task-modal .reference-picker-field.sh-field > .reference-picker-field-label {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  /* Same line height as a plain field label, so pickers line up with the field beside them. */
  line-height: 1.35;
  text-transform: none;
}

#task-modal .reference-picker-field-label .label-hint {
  color: var(--muted);
  font-size: inherit;
  font-weight: 500;
}

#task-modal .reference-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  text-align: left;
}

#task-modal .reference-picker-trigger [data-reference-picker-value] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The photo target spans the dialog: the file input is stretched invisibly over it, so a
   click opens the picker and dropped files land in the same input. */
.task-photo-drop {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 84px;
  padding: 14px 16px;
  border: 1px dashed var(--control-border);
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
  cursor: pointer;
}

.task-photo-drop:hover,
.task-photo-drop.is-dragover {
  border-color: var(--current);
  background: var(--current-wash);
}

.task-photo-drop:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.sh-field .task-photo-drop > input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.task-photo-drop__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

.task-photo-drop__cta .material-symbols-outlined {
  font-size: 20px;
}

.task-photo-drop .task-photo-drop__files {
  max-width: 100%;
  color: var(--ink-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Maintenance reminders */

.facility-reminders-add {
  margin-left: auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: none;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.facility-reminders-add:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.facility-reminder-row .sh-row__title {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.45;
}

.facility-reminder-row .sh-row__meta {
  margin: 0;
}

.facility-reminder-row.is-completed .sh-row__title {
  color: var(--ink-secondary);
}

.facility-reminder-row.is-overdue .facility-reminder-state {
  color: var(--danger);
  font-weight: 600;
}

.facility-reminder-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.facility-reminder-actions > :is(button, .ghost-button) {
  min-height: 32px;
}

.facility-reminder-row .facility-reminder-notes {
  font-size: 0.8125rem;
  white-space: pre-wrap;
}

.facility-reminders-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.facility-reminders-empty strong {
  display: block;
  color: var(--ink);
}

@media (max-width: 900px) {
  .kanban-board {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }

  .kanban-column {
    min-height: 0;
  }

  .facilities-toolbar__note {
    flex-basis: 100%;
    margin-left: 0;
  }

  .facilities-head .sh-head__actions {
    width: 100%;
  }

  .facilities-head .facilities-add-button {
    margin-left: auto;
  }

  .facility-reminders-add,
  .facility-reminder-actions > :is(button, .ghost-button),
  .kanban-card .kanban-drag-handle {
    min-width: 44px;
    min-height: 44px;
  }

  .kanban-card .kanban-drag-handle {
    width: 44px;
    height: 44px;
    margin: -10px -4px -10px 0;
  }
}

@media (max-width: 640px) {
  .facilities-toolbar__select {
    flex: 1 1 140px;
  }

  .facility-reminder-row .facility-reminder-actions {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}
/* End sharper lists — facilities */

/* ==========================================================================
   Sharper lists — calendar
   One compact title row, a hairline month grid that keeps in-month days on the
   surface and outside days on the canvas, list rows for events and the day
   dialog, and the single-day event dialog.
   ========================================================================== */

#panel-venue .venue-workspace {
  gap: 12px;
}

#panel-venue .venue-calendar-card,
[data-theme="dark"] #panel-venue .venue-calendar-card {
  --venue-cal-panel: var(--surface);
  --venue-cal-surface: var(--surface);
  --venue-cal-inset: var(--surface-soft);
  --venue-cal-line: var(--line);
  --venue-cal-line-soft: color-mix(in srgb, var(--line) 55%, transparent);
  --venue-cal-line-strong: var(--line-strong);
  --venue-cal-text: var(--ink);
  --venue-cal-muted: var(--muted);
}

#panel-venue .venue-calendar-card {
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#panel-venue .venue-calendar-head {
  align-items: center;
  margin: 0;
}

#panel-venue .venue-calendar-head > h2 {
  font-size: 1.375rem;
}

#panel-venue .venue-calendar-head > .venue-calendar-context {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}

#panel-venue .venue-calendar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: auto;
}

#panel-venue .venue-calendar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
}

#panel-venue .venue-calendar-nav > :is(button, .ghost-button) {
  min-width: 36px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 0.875rem;
}

#panel-venue .venue-calendar-nav > .icon-button {
  padding: 0;
}

#panel-venue .venue-calendar-viewswitch.sh-seg,
#panel-venue .venue-calendar-zoom-options.sh-seg {
  display: inline-flex;
  gap: 0;
  width: auto;
  padding: 0;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  background: var(--surface);
}

#panel-venue .sh-seg > .venue-cal-viewbtn,
#panel-venue .sh-seg > .venue-cal-zoombtn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

#panel-venue .sh-seg > :is(.venue-cal-viewbtn, .venue-cal-zoombtn).is-active {
  background: var(--surface-soft);
  box-shadow: inset 0 -2px 0 var(--color-brand-accent);
  color: var(--ink);
}

#panel-venue .venue-calendar-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
}

#panel-venue .venue-calendar-zoom[hidden] {
  display: none;
}

#panel-venue .venue-calendar-zoom-label {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#panel-venue .venue-calendar-add {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 0.875rem;
}

/* A notice is one line of text, not a tinted card. */
#panel-venue .venue-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.875rem;
}

#panel-venue .venue-notice > strong {
  color: var(--danger);
  font-weight: 700;
}

#panel-venue .venue-notice > a {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Month grid: hairlines between days, white in-month days, canvas outside days. */
#panel-venue .venue-calendar-body {
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

#panel-venue .vc-month {
  --vc-day-gap: 1px;
  --vc-bar-top: 30px;
  --vc-bar-step: 24px;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

#panel-venue .vc-month-weekdays {
  gap: 1px;
  margin: 0;
}

#panel-venue .vc-month-weekdays span {
  padding: 7px 10px;
  background: var(--surface-soft);
  color: var(--ink-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#panel-venue .vc-mweek {
  margin: 0;
}

#panel-venue .vc-mweek-days {
  gap: 1px;
  margin: 0;
}

#panel-venue .vc-mday {
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
}

#panel-venue .vc-mday:hover {
  border-color: transparent;
  background: var(--color-bg-hover);
}

#panel-venue .vc-mday:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

#panel-venue .vc-mday.is-muted {
  opacity: 1;
  background: var(--bg);
}

#panel-venue .vc-mday.is-muted .vc-mday-num {
  color: var(--muted);
  font-weight: 500;
}

#panel-venue .vc-mday-num {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  margin-left: -4px;
  padding: 0 4px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Today: an accent frame on the cell and a filled date, not colour alone. */
#panel-venue .vc-mday.is-today {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--current);
}

#panel-venue .vc-mday.is-today .vc-mday-num {
  background: var(--current);
  color: var(--color-text-on-primary, #ffffff);
}

#panel-venue .vc-mday-more {
  left: 10px;
  bottom: 4px;
  color: var(--ink-secondary);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Event chips: one line, a darker leading edge, readable in both themes. */
#panel-venue .vc-month .vc-bar {
  height: 21px;
  padding: 0 6px 0 8px;
  border-radius: 4px;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--venue-event-bg) 62%, #000000);
  font-size: 0.75rem;
  font-weight: 700;
}

#panel-venue .vc-month .vc-bar.continues-left {
  box-shadow: none;
}

#panel-venue .vc-month .vc-bar.is-holiday {
  border: 0;
  box-shadow: inset 3px 0 0 var(--current);
}

#panel-venue .vc-month .vc-bar.is-holiday::before {
  display: none;
}

#panel-venue .vc-month .vc-bar.is-holiday.is-actual:not(.is-observed) {
  border: 1px dashed var(--line-strong);
  box-shadow: none;
}

#panel-venue .vc-month .vc-bar.is-leave {
  border: 0;
  box-shadow: inset 3px 0 0 var(--calendar-leave-ink);
}

#panel-venue .vc-month .vc-room-strip {
  display: none;
}

/* Time grids keep their layout and scroll; only the frame follows the month grid. */
#panel-venue .venue-calendar-body:has(> .vc-time) {
  border: 1px solid var(--line);
}

#panel-venue .venue-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.8125rem;
}

/* Event list */
#panel-venue .venue-events-card .sh-box__head {
  flex-wrap: wrap;
}

#panel-venue .venue-events-card .venue-event-tabs {
  margin-left: auto;
}

#panel-venue .venue-event-row__when {
  display: flex;
  flex: 0 0 132px;
  flex-direction: column;
  min-width: 0;
  white-space: nowrap;
}

#panel-venue .venue-event-row__day {
  color: var(--ink);
  font-weight: 700;
}

#panel-venue .venue-event-row__time {
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

#panel-venue .venue-event-row__note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-venue .venue-event-row.is-next {
  box-shadow: inset 3px 0 0 var(--current);
}

#panel-venue .venue-event-row .sh-row__title :is(.badge, .calendar-external-tag) {
  margin-left: 6px;
  vertical-align: 1px;
}

/* Day dialog rows */
.calendar-day-dialog .sh-dialog__body {
  gap: 12px;
}

.calendar-day-dialog .sh-dialog__body:has(> .calendar-detail-list:empty) {
  display: none;
}

.calendar-day-list > .calendar-detail-card {
  --sh-item-indent: 118px;
  margin: 0;
  padding: 12px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.calendar-day-list .sh-item__line {
  align-items: flex-start;
}

.calendar-day-list .calendar-day-icon {
  margin-top: 1px;
}

.calendar-day-list .calendar-day-icon.is-offsite {
  color: #285e89;
}

[data-theme="dark"] .calendar-day-list .calendar-day-icon.is-offsite {
  color: #9cc8ec;
}

.calendar-day-list .calendar-day-icon.is-facility-reminder {
  color: var(--ink-secondary);
}

.calendar-day-time {
  flex: 0 0 76px;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  white-space: nowrap;
}

.calendar-day-list .calendar-detail-main h4 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.calendar-day-list .calendar-detail-conflict > .material-symbols-outlined {
  font-size: 18px;
}

.calendar-day-list .calendar-detail-conflict p {
  margin: 2px 0;
}

.calendar-day-list .calendar-detail-actions > :is(button, a) {
  min-height: 36px;
}

.calendar-detail-list > .calendar-detail-empty {
  display: grid;
  gap: 4px;
  padding: 4px 0;
}

.calendar-detail-list > .calendar-detail-empty p {
  margin: 0;
}

/* Event dialog */
.event-dialog [hidden],
.calendar-day-dialog [hidden],
.event-access-panel [hidden] {
  display: none !important;
}

.event-dialog .event-room-setup-prompt {
  margin: 8px 24px 0;
}

.event-when {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.event-when__fields {
  display: grid;
  grid-template-areas: "date start end";
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.event-when.is-multi-day .event-when__fields {
  grid-template-areas:
    "date start"
    "enddate end";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.event-when__date { grid-area: date; }
.event-when__start { grid-area: start; }
.event-when__end-date { grid-area: enddate; }
.event-when__end { grid-area: end; }

/* Every control in the row is the same height whatever its text or label. */
.event-when__fields > .sh-field {
  grid-template-rows: auto 44px;
}

.event-when__fields .sh-field__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-when__fields .sh-picker__input {
  height: 44px;
  min-height: 44px;
  margin: 0;
}

.event-when__error {
  margin: 0;
  color: var(--danger);
  font-size: 0.8125rem;
  font-weight: 600;
}

.event-dialog .event-when__toggle {
  justify-self: start;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs) !important;
  background: transparent;
  box-shadow: none;
  color: var(--color-link);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: none !important;
}

.event-dialog .event-when__toggle:hover {
  background: transparent;
  color: var(--color-link-hover, var(--color-link));
}

.event-dialog .event-series-scope-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}

.event-dialog .event-series-scope-option > input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
}

.event-dialog .event-series-scope-option > span {
  display: grid;
  gap: 2px;
}

.event-dialog .event-series-scope-option strong {
  font-size: 0.9375rem;
  font-weight: 700;
}

.event-dialog .event-series-scope-option small {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.event-dialog .event-where:has(> [data-event-building-control][hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

/* The floated legend is an ordinary grid item, so the field's gap already spaces it from the
   picker: a margin as well would push Rooms below the Location box beside it. */
.event-dialog .event-room-checklist {
  grid-column: auto;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.event-dialog .event-room-checklist > legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}

.event-dialog .event-room-checklist > legend + * {
  clear: both;
}

.event-dialog .event-series-scope {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.event-dialog .event-series-scope > legend {
  margin-bottom: 8px;
  padding: 0;
}

.event-dialog .event-series-scope-options {
  display: grid;
  gap: 10px;
}

.event-dialog .event-climate-summary {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 0.875rem;
}

.event-dialog .event-climate-summary > .material-symbols-outlined {
  color: var(--ink-secondary);
  font-size: 20px;
}

.event-dialog .event-climate-summary strong {
  color: var(--ink);
}

.event-dialog .event-climate-summary-line {
  display: inline;
  margin: 0 0 0 4px;
}

.event-dialog .event-climate-summary .field-hint {
  display: block;
  margin-top: 2px;
}

.event-dialog .event-recurrence,
.event-dialog .event-recurrence-options,
.event-dialog .event-access-request,
.event-dialog .event-access-request__fields {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.event-dialog .event-recurrence-interval__row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-secondary);
  font-weight: 500;
}


.event-dialog :is(.event-recurrence-weekdays, .event-recurrence-month-ordinals) {
  margin: 0;
  padding: 0;
  border: 0;
}

.event-dialog .event-recurrence-hint:empty {
  display: none;
}

/* Event access dialogs */
.event-access-panel.sh-dialog,
.modal .event-access-panel.sh-dialog.form-sheet--fixed-actions {
  overflow: auto;
}

.event-access-panel .event-access-body {
  gap: 14px;
}

.event-access-panel .event-access-context {
  margin: 0;
  color: var(--ink-secondary);
}

.event-access-panel .event-access-form {
  display: grid;
  gap: 14px;
}

.event-access-panel .event-access-form .form-sheet-fields {
  display: grid;
  gap: 14px;
  padding: 0;
}

.event-access-panel .event-access-form__foot,
.event-access-panel .event-access-form .form-sheet-actions {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 900px) {
  #panel-venue .venue-calendar-nav > :is(button, .ghost-button),
  #panel-venue .sh-seg > :is(.venue-cal-viewbtn, .venue-cal-zoombtn),
  #panel-venue .venue-calendar-add {
    min-height: 44px;
  }

  #panel-venue .venue-calendar-nav > .icon-button {
    min-width: 44px;
  }

  .event-dialog .event-when__toggle {
    min-height: 44px;
  }

  .event-dialog .event-room-setup-prompt {
    margin: 8px 16px 0;
  }
}

@media (max-width: 680px) {
  #panel-venue .venue-calendar-head {
    gap: 6px 10px;
  }

  #panel-venue .venue-calendar-controls {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
  }

  #panel-venue .venue-calendar-nav {
    width: auto;
  }

  #panel-venue .venue-calendar-viewswitch.sh-seg {
    display: inline-flex;
    width: auto;
  }

  #panel-venue .venue-calendar-add {
    width: auto;
    margin-left: auto;
  }

  #panel-venue .venue-calendar-zoom {
    width: 100%;
  }

  #panel-venue .vc-month-weekdays span {
    padding: 6px 0;
    text-align: center;
  }

  #panel-venue .vc-mday {
    min-height: 56px;
    padding: 4px;
    text-align: center;
  }

  #panel-venue .vc-mday-num {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .event-when__fields {
    grid-template-areas:
      "date date"
      "start end";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Dates need the wider column when they sit beside a time. */
  .event-when.is-multi-day .event-when__fields {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }

  .calendar-day-list > .calendar-detail-card {
    --sh-item-indent: 0px;
  }

  .calendar-day-list .sh-item__line {
    display: flex;
  }

  .calendar-day-time {
    flex-basis: 64px;
  }

  #panel-venue .venue-event-row__when {
    flex-basis: 92px;
  }

  #panel-venue .venue-event-row {
    display: flex;
  }
}

/* Top bar on desktop: three zones. The logo sits one gutter from the left edge, the account
   controls one gutter from the right, and search on the page's own centre line whatever the
   sidebar's width. The section name is no longer repeated here: each page title is the
   section's pill, icon included (ui_patterns.css). The label stays in the document for screen readers, which hear it when
   the section changes. */
@media (min-width: 901px) {
  body.app-shell:not(.profile-shell) > .topbar .topbar-context--operations {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  body.app-shell:not(.profile-shell) > .topbar .topbar-actions {
    justify-content: flex-end;
  }

  /* Centred with auto margins, not a transform: the button's own press styles stay free. The
     width leaves room for the widest side zone on both sides, so it never meets the logo or
     the account controls. */
  body.app-shell:not(.profile-shell) > .topbar .navigation-search-trigger {
    position: absolute;
    inset: 0;
    width: min(520px, calc(100% - 680px));
    min-width: 200px;
    height: 44px;
    margin: auto;
  }
}

/* Top bar logo: the lockup alone, with no plate and no tagline. Each theme has its own file,
   dark lettering for the light bar and light lettering for the dark one, and only the one
   for the current theme is shown. With the plate gone the lockup uses the bar's height. The
   --bare modifier marks the bars that carry both files; other pages keep the plated lockup. */
.app-shell .topbar .brand-logo-chip--bare,
.admin-shell .topbar .brand-logo-chip--bare {
  width: auto;
  height: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-shell .topbar .brand-logo-chip--bare .brand-lockup,
.admin-shell .topbar .brand-logo-chip--bare .brand-lockup {
  display: block;
  width: auto;
  max-width: 100%;
  height: 52px;
  object-fit: contain;
}

.app-shell .topbar .brand-logo-chip--bare .brand-lockup--dark,
.admin-shell .topbar .brand-logo-chip--bare .brand-lockup--dark,
[data-theme="dark"] .topbar .brand-logo-chip--bare .brand-lockup--light {
  display: none;
}

[data-theme="dark"] .topbar .brand-logo-chip--bare .brand-lockup--dark {
  display: block;
}

@media (min-width: 901px) {
  .app-shell .topbar .brand-logo-chip--bare .brand-lockup,
  .admin-shell .topbar .brand-logo-chip--bare .brand-lockup {
    height: 56px;
  }
}

/* Phones and tablets: the logo sits on the page's centre line. In the bar's own grid it sat
   between one button on the left and two on the right, so it read as off-centre. Its width
   leaves room for the wider (right) group on both sides, so it shrinks on the narrowest
   phones before it can touch a button. */
@media (max-width: 900px) {
  .app-shell .topbar .brand--bare,
  .admin-shell .topbar .brand--bare {
    /* Spanning every column makes the whole bar the box it is centred in; otherwise an
       absolutely placed grid child is centred in its own column. */
    position: absolute;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    inset: 0;
    width: fit-content;
    height: fit-content;
    max-width: none;
    margin: auto;
  }

  .app-shell .topbar .brand-logo-chip--bare .brand-lockup,
  .admin-shell .topbar .brand-logo-chip--bare .brand-lockup {
    width: min(127px, calc(100vw - 228px));
    height: auto;
  }
}