/*
 * Telos Portal — light-first operations system
 * This layer intentionally overrides the legacy embedded theme while keeping
 * the existing page and component contracts intact.
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f3;
  --bg-panel: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef1ed;
  --surface-3: #e6ebe6;
  --line: #d9dfd9;
  --line-strong: #bfc9c1;
  --text: #17211d;
  --white: #17211d;
  --muted: #5e6b65;
  --muted-strong: #394740;
  --emerald: #0b765c;
  --emerald-deep: #07513f;
  --gold: #b67919;
  --gold-soft: #8a5a10;
  --cyan: #176d8a;
  --cyan-soft: #155f78;
  --danger: #b93636;
  --shadow-glow: 0 2px 6px rgba(20, 41, 31, 0.06);
  --shadow-card: 0 1px 2px rgba(20, 41, 31, 0.06);
  --focus: #0b765c;
  --input-bg: #ffffff;
  --sidebar-ink: #10251e;
  --sidebar-muted: #c5d4cc;
  --sidebar-line: rgba(255, 255, 255, 0.12);
  --selection: #d9eee7;
  --ink: var(--text);
  --portal-muted: var(--muted);
  --code-bg: #e9eeea;
  --code-ink: #24352d;
  --notice-warm-bg: #fbf3df;
  --notice-warm-ink: #80540d;
  --notice-cool-bg: #e6f4f8;
  --notice-cool-ink: #0d6079;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c110f;
  --bg-panel: #121916;
  --surface: #161f1b;
  --surface-2: #1b2722;
  --surface-3: #22312a;
  --line: #2b3932;
  --line-strong: #42534a;
  --text: #edf2ee;
  --white: #f6faf7;
  --muted: #aab7b0;
  --muted-strong: #d1d9d4;
  --emerald: #46c49d;
  --emerald-deep: #74dbba;
  --gold: #dda94e;
  --gold-soft: #f0c875;
  --cyan: #68bdd8;
  --cyan-soft: #9cd9eb;
  --danger: #ff8585;
  --shadow-glow: 0 2px 8px rgba(0, 0, 0, 0.22);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.24);
  --focus: #69d7b4;
  --input-bg: #101714;
  --sidebar-ink: #0a100d;
  --sidebar-muted: #bdcbc3;
  --sidebar-line: rgba(255, 255, 255, 0.11);
  --selection: #18382e;
  --ink: var(--text);
  --portal-muted: var(--muted);
  --code-bg: #09100d;
  --code-ink: #dfeae4;
  --notice-warm-bg: #302817;
  --notice-warm-ink: #efc86f;
  --notice-cool-bg: #112b34;
  --notice-cool-ink: #8bd4ea;
}

html {
  background: var(--bg);
}

body.portal-page {
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}

body.portal-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% -12%, color-mix(in srgb, var(--emerald) 7%, transparent) 0, transparent 32rem),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 28%, transparent) 1px, transparent 1px);
  background-size: auto, 80px 80px;
  mask-image: linear-gradient(to bottom, black, transparent 38rem);
  opacity: 0.7;
}

.portal-wrap {
  padding: clamp(0.75rem, 2vw, 1.5rem);
}

.portal-shell {
  width: min(1480px, 100%);
  gap: 0.75rem;
}

.portal-topbar {
  top: 0.75rem;
  min-height: 4.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
  box-shadow: var(--shadow-glow);
  backdrop-filter: blur(14px);
}

.portal-brand {
  height: 3rem;
  max-width: min(17rem, 52vw);
  padding: 0.4rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.portal-brand img {
  max-height: 1.8rem;
}

:root[data-theme="dark"] .portal-brand {
  background: #f7fbf8;
}

.portal-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.portal-badge {
  min-height: 2.5rem;
  padding-inline: 0.8rem;
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted-strong);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.portal-theme-toggle {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.7rem 0.35rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

.portal-theme-toggle:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
}

.portal-theme-toggle__track {
  width: 2.4rem;
  height: 1.4rem;
  padding: 2px;
  display: block;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.portal-theme-toggle__thumb {
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-panel);
  color: var(--gold-soft);
  box-shadow: 0 1px 3px rgba(17, 35, 27, 0.18);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.portal-theme-toggle svg {
  width: 0.75rem;
  height: 0.75rem;
  stroke-width: 1.8;
}

.portal-theme-toggle__moon {
  display: none;
}

:root[data-theme="dark"] .portal-theme-toggle__thumb {
  transform: translateX(1rem);
  color: var(--cyan-soft);
}

:root[data-theme="dark"] .portal-theme-toggle__sun {
  display: none;
}

:root[data-theme="dark"] .portal-theme-toggle__moon {
  display: block;
}

.portal-panel,
.portal-card,
.portal-topbar {
  border-color: var(--line);
}

.portal-panel {
  border-radius: 14px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-glow);
}

.portal-panel__grid {
  min-height: 0;
}

.portal-main,
.portal-copy {
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.portal-copy {
  background: var(--sidebar-ink);
  border-color: var(--sidebar-line);
}

.portal-copy p {
  color: var(--sidebar-muted);
}

.portal-main {
  background: var(--bg-panel);
}

.portal-copy h1,
.portal-main h1,
.portal-card h2 {
  font-family: Sora, "IBM Plex Sans", system-ui, sans-serif;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.portal-copy h1 {
  color: #f4f8f5;
}

.portal-main h1 {
  max-width: 15ch;
  font-size: clamp(2.25rem, 5vw, 4.4rem);
}

.portal-copy p,
.portal-main p,
.portal-card p,
.portal-list li,
.portal-muted {
  color: var(--muted);
}

.portal-copy p {
  color: var(--sidebar-muted);
}

.eyebrow-pill {
  min-height: 2.25rem;
  padding: 0.5rem 0.7rem;
  border-color: var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--muted-strong);
  font-size: 0.69rem;
  letter-spacing: 0.065em;
}

.eyebrow-pill__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: none;
}

.portal-grid {
  gap: 0.75rem;
}

.portal-card {
  padding: 1.15rem;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
  transition: border-color 160ms ease-out, background-color 160ms ease-out, transform 160ms ease-out;
}

a.portal-card:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.portal-card h2 {
  font-size: 1.05rem;
}

.portal-section {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
}

.portal-section h2,
.portal-section h3 {
  color: var(--text);
  letter-spacing: -0.015em;
}

.portal-actions {
  gap: 0.55rem;
}

.portal-button {
  min-height: 2.75rem;
  border: 1px solid var(--emerald-deep);
  border-radius: 8px;
  background: var(--emerald-deep);
  color: #ffffff;
  box-shadow: none;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 100ms ease-out;
}

.portal-button:hover {
  border-color: var(--emerald);
  background: var(--emerald);
}

.portal-button:active {
  transform: translateY(1px);
}

.portal-button--ghost {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--text);
}

.portal-button--ghost:hover {
  border-color: var(--muted);
  background: var(--surface-2);
  color: var(--text);
}

:root[data-theme="dark"] .portal-button:not(.portal-button--ghost):not(.portal-button--danger) {
  color: #09241b;
}

.portal-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.portal-field label {
  color: var(--muted-strong);
  font-size: 0.75rem;
  letter-spacing: 0.035em;
}

.portal-field input,
.portal-field select,
.portal-field textarea,
.portal-input,
.portal-select {
  border-color: var(--line-strong);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  box-shadow: 0 1px 1px rgba(17, 35, 27, 0.03);
}

.portal-field input::placeholder,
.portal-field textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.portal-field input:hover,
.portal-field select:hover,
.portal-field textarea:hover {
  border-color: var(--muted);
}

.portal-field input:focus,
.portal-field select:focus,
.portal-field textarea:focus {
  border-color: var(--focus);
  background: var(--input-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent);
}

.portal-page :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.portal-table {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.portal-table th {
  background: var(--surface-2);
  color: var(--muted-strong);
  font-size: 0.7rem;
  letter-spacing: 0.045em;
}

.portal-table td {
  border-color: var(--line);
  color: var(--text);
}

.portal-table tbody tr:hover td {
  background: var(--selection);
}

.portal-alert {
  border-color: color-mix(in srgb, var(--notice-warm-ink) 25%, var(--line));
  background: var(--notice-warm-bg);
  color: var(--notice-warm-ink);
}

.portal-status,
.portal-tag,
.portal-chip {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted-strong);
}

.portal-link {
  color: var(--emerald-deep);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--emerald) 35%, transparent);
  text-underline-offset: 0.18em;
}

.portal-link:hover {
  color: var(--emerald);
  text-decoration-color: currentColor;
}

.portal-card::before {
  display: none;
}

.portal-card--link:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.portal-button--danger,
:root[data-theme="dark"] .portal-button--danger {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--danger);
}

.portal-button--danger:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 20%, var(--surface));
}

.portal-disclosure > summary {
  color: var(--text);
}

.portal-disclosure > summary::after {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--emerald-deep);
}

.portal-check,
.settings-check,
.estore-product-card,
.settings-subsection,
.portal-lead-field,
.monthly-special-preview {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

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

.portal-lead-field strong,
.settings-option__body strong {
  color: var(--text);
}

.portal-status {
  background: color-mix(in srgb, var(--emerald) 10%, var(--surface));
  color: var(--emerald-deep);
}

.portal-status--disabled {
  background: var(--surface-3);
  color: var(--muted);
}

.portal-check:hover {
  border-color: var(--line-strong);
}

.portal-code,
pre,
code {
  background: var(--code-bg);
  color: var(--code-ink);
  border-color: var(--line);
}

hr {
  border-color: var(--line);
}

dialog {
  color: var(--text);
  background: var(--bg-panel);
  border-color: var(--line);
}

dialog::backdrop {
  background: rgba(4, 9, 7, 0.58);
}

/* Shared module surfaces --------------------------------------------------- */

.estore-product-image,
.estore-stock-panel,
.estore-image-order__item,
.estore-tag-row,
.estore-markdown-preview,
.estore-variant-editor,
.reference-image-card,
.settings-health-card,
.settings-checklist li,
.settings-hub__nav,
.settings-option__body,
.settings-subsection,
.settings-toggle,
.settings-credential,
.monthly-special-preview,
.portal-lead-field {
  border-color: var(--line);
  background: var(--surface-2);
  box-shadow: none;
}

.estore-variant-editor {
  border-radius: 10px;
}

.estore-chip,
.content-day__status {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted-strong);
}

.settings-hub__nav a:hover,
.settings-hub__nav a:focus-visible {
  background: var(--surface-3);
  color: var(--text);
}

.settings-option input:checked + .settings-option__body {
  border-color: color-mix(in srgb, var(--emerald) 48%, var(--line));
  background: color-mix(in srgb, var(--emerald) 10%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--emerald) 22%, transparent);
}

.settings-option input:focus-visible + .settings-option__body {
  outline-color: var(--focus);
}

.settings-preview {
  border-color: color-mix(in srgb, var(--cyan) 30%, var(--line));
  background: color-mix(in srgb, var(--cyan) 8%, var(--surface));
  color: var(--cyan-soft);
}

.content-day {
  border-color: var(--line);
  background: var(--surface);
}

.content-day--posted {
  border-color: color-mix(in srgb, var(--emerald) 38%, var(--line));
  background: color-mix(in srgb, var(--emerald) 9%, var(--surface));
}

.content-day--pending {
  border-color: color-mix(in srgb, var(--notice-warm-ink) 28%, var(--line));
  background: var(--notice-warm-bg);
}

.content-day--not_generated,
.content-day--planned {
  border-color: color-mix(in srgb, var(--notice-cool-ink) 28%, var(--line));
  background: var(--notice-cool-bg);
}

.content-day--failed {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
}

.reference-image-card img {
  background: var(--surface-3);
}

.monthly-special-preview__status,
.content-day__link {
  color: var(--emerald-deep);
}

/* Congregation admin module uses the same shell but ships its own stylesheet. */
.congregation-admin-toolbar,
.congregation-record-editor,
.congregation-record-form,
.congregation-settings-disclosure,
.congregation-preview-disclosure,
.congregation-delivery-cards article,
.congregation-image-field,
.congregation-section-list,
.congregation-service-time-editor,
.congregation-submission-member,
.congregation-submission-edit-member,
.congregation-submission-field {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.congregation-record-editor summary:hover,
.congregation-settings-disclosure summary:hover,
.congregation-preview-disclosure summary:hover {
  background: var(--surface-3);
}

.congregation-record-copy strong,
.congregation-settings-disclosure summary span,
.congregation-preview-disclosure summary span {
  color: var(--text);
}

.congregation-record-copy span,
.congregation-settings-disclosure summary small,
.congregation-preview-disclosure summary small {
  color: var(--muted);
}

.congregation-lock,
.congregation-plan--premium,
.congregation-record-badge--staff,
.tag-picker__tag {
  border-color: color-mix(in srgb, var(--notice-warm-ink) 24%, var(--line));
  background: var(--notice-warm-bg);
  color: var(--notice-warm-ink);
}

.congregation-record-badge--published {
  border-color: color-mix(in srgb, var(--emerald) 24%, var(--line));
  background: color-mix(in srgb, var(--emerald) 9%, var(--surface));
  color: var(--emerald-deep);
}

.congregation-preview-panel,
.congregation-service-time-row,
.congregation-submission-member,
.congregation-submission-edit-member {
  border-color: var(--line);
  background: var(--surface-2);
}

.congregation-preview-toolbar {
  border-color: var(--line);
  background: var(--surface-3);
  color: var(--text);
}

.congregation-switch > span[aria-hidden] {
  background: var(--line-strong);
}

.congregation-member-tab strong {
  background: var(--surface-3);
  color: var(--text);
}

.congregation-member-tab.is-active {
  border-color: color-mix(in srgb, var(--emerald) 35%, var(--line));
  background: color-mix(in srgb, var(--emerald) 9%, var(--surface));
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--emerald);
}

/* A. Miller workspace ------------------------------------------------------ */

.booking-page .portal-main {
  gap: 1.15rem;
}

.booking-page__header {
  align-items: flex-end;
  padding-bottom: 0.25rem;
}

.booking-page__header h1 {
  margin-block: 0.8rem 0.25rem;
}

.booking-page__header p {
  max-width: 66ch;
  color: var(--muted);
}

.booking-tabs {
  gap: 0.25rem;
  padding: 0.3rem;
  border-color: var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  scrollbar-color: var(--line-strong) transparent;
}

.booking-tab {
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted-strong);
  font-size: 0.82rem;
  font-weight: 700;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.booking-tab:hover,
.booking-tab:focus-visible {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

.booking-tab.is-active {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--emerald-deep);
  box-shadow: 0 1px 2px rgba(18, 43, 32, 0.06);
}

.booking-summary {
  border-color: var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.booking-summary > div {
  gap: 0.35rem;
  min-height: 5.4rem;
  align-content: center;
  padding: 0.9rem 1rem;
  border-color: var(--line);
  background: var(--surface);
}

.booking-summary span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.booking-summary strong {
  color: var(--text);
  font-family: Sora, "IBM Plex Sans", system-ui, sans-serif;
  font-size: 1.35rem;
  line-height: 1;
}

.booking-summary__item--client-approval {
  background: var(--notice-warm-bg) !important;
}

.booking-summary__item--client-approval strong {
  color: var(--notice-warm-ink);
}

.booking-summary__item--booking-approval {
  background: var(--notice-cool-bg) !important;
}

.booking-summary__item--booking-approval strong {
  color: var(--notice-cool-ink);
}

.booking-surface {
  padding: clamp(1rem, 2vw, 1.25rem);
  border-color: var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.booking-section-heading {
  align-items: flex-start;
  margin-bottom: 0.9rem;
}

.booking-section-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.18rem;
  letter-spacing: -0.015em;
}

.booking-section-heading p {
  margin-top: 0.25rem;
  color: var(--muted);
}

.booking-section-heading > .portal-link {
  min-height: 2.4rem;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-inline: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.booking-section-heading > .portal-link:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.booking-page .portal-table th:last-child,
.booking-page .portal-table td:last-child {
  text-align: right;
}

.booking-page .portal-table td {
  vertical-align: middle;
}

.booking-page .portal-table td:last-child .portal-link {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  padding-inline: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  white-space: nowrap;
}

.booking-page .portal-table td:last-child .portal-link:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.booking-table-subline {
  margin-top: 0.12rem;
  color: var(--muted);
}

.booking-warning {
  border-color: color-mix(in srgb, var(--notice-warm-ink) 24%, var(--line));
  background: var(--notice-warm-bg);
  color: var(--notice-warm-ink);
}

.booking-approval-state {
  min-height: 1.75rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
}

.booking-approval-state--client {
  border-color: color-mix(in srgb, var(--notice-warm-ink) 20%, transparent);
  background: var(--notice-warm-bg);
  color: var(--notice-warm-ink);
}

.booking-approval-state--booking {
  border-color: color-mix(in srgb, var(--notice-cool-ink) 20%, transparent);
  background: var(--notice-cool-bg);
  color: var(--notice-cool-ink);
}

.booking-request-row--client-approval td {
  background: color-mix(in srgb, var(--notice-warm-bg) 34%, var(--surface));
}

.booking-request-row--booking-approval td {
  background: color-mix(in srgb, var(--notice-cool-bg) 30%, var(--surface));
}

.booking-request-detail,
.booking-request-appointment,
.booking-addon-editor,
.booking-control-group,
.booking-mode-panel,
.booking-mode-actions {
  border-color: var(--line);
  background: var(--surface-2);
}

@media (max-width: 720px) {
  .portal-wrap {
    padding: 0;
  }

  .portal-shell {
    gap: 0;
  }

  .portal-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 4rem;
    flex-direction: row;
    align-items: center;
    border-width: 0 0 1px;
    border-radius: 0;
  }

  .portal-brand {
    width: auto;
    justify-content: flex-start;
  }

  .portal-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .portal-main,
  .portal-copy,
  .portal-section,
  .portal-card {
    padding: 1rem;
  }

  .portal-badge {
    display: none;
  }

  .portal-theme-toggle > [data-theme-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .portal-theme-toggle {
    padding-right: 0.4rem;
  }

  .booking-page__header {
    align-items: stretch;
  }

  .booking-page__header .portal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-page__header .portal-actions .portal-button {
    width: 100%;
  }

  .booking-tabs {
    margin-inline: -1rem;
    padding-inline: 1rem;
    border-width: 1px 0;
    border-radius: 0;
  }

  .booking-section-heading > .portal-link {
    width: fit-content;
  }

  .booking-page .portal-table th:last-child,
  .booking-page .portal-table td:last-child {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.portal-page,
  .portal-theme-toggle__thumb,
  .portal-card,
  .portal-button {
    transition: none !important;
  }
}

/* Portal console v2 ======================================================== */

:root,
:root[data-theme="light"] {
  --console-bg: #f1f4f1;
  --console-nav: #e8ede9;
  --console-bar: rgba(247, 249, 247, 0.92);
  --console-grid: rgba(22, 58, 43, 0.045);
  --console-accent: #087057;
  --console-accent-strong: #064c3c;
  --console-active: #d9eae3;
}

:root[data-theme="dark"] {
  --console-bg: #090e0c;
  --console-nav: #0d1411;
  --console-bar: rgba(13, 20, 17, 0.92);
  --console-grid: rgba(145, 197, 173, 0.035);
  --console-accent: #54c7a3;
  --console-accent-strong: #8be0c3;
  --console-active: #183329;
}

.portal-layout--app {
  --portal-space-1: 0.25rem;
  --portal-space-2: 0.5rem;
  --portal-space-3: 0.75rem;
  --portal-space-4: 1rem;
  --portal-space-5: 1.5rem;
  --portal-space-6: 2rem;
  --portal-type-caption: 0.75rem;
  --portal-type-ui: 0.875rem;
  --portal-type-body: 1rem;
  --portal-type-card: 1.0625rem;
  --portal-type-section: 1.25rem;
  --portal-type-title: 2.25rem;
  min-height: 100dvh;
  background: var(--console-bg);
  font-kerning: normal;
  font-optical-sizing: auto;
}

.portal-layout--app::before {
  background-image:
    linear-gradient(var(--console-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--console-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black 0, transparent 46rem);
  opacity: 1;
}

.portal-app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
}

.portal-sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 100dvh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 0.8rem;
  border-right: 1px solid var(--line);
  background: var(--console-nav);
}

.portal-sidebar__brand {
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-radius: 9px;
}

.portal-sidebar__brand img {
  width: auto;
  max-width: 9.25rem;
  max-height: 1.65rem;
  object-fit: contain;
}

:root[data-theme="dark"] .portal-sidebar__brand {
  background: #f7fbf8;
}

.portal-sidebar__workspace {
  display: grid;
  gap: var(--portal-space-1);
  margin: var(--portal-space-3) 0.45rem var(--portal-space-5);
  padding-top: var(--portal-space-4);
  border-top: 1px solid var(--line);
}

.portal-sidebar__workspace span {
  color: var(--muted);
  font-size: var(--portal-type-caption);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.portal-sidebar__workspace strong {
  color: var(--text);
  font-size: var(--portal-type-body);
  font-weight: 700;
  line-height: 1.35;
}

.portal-nav {
  display: grid;
  gap: var(--portal-space-1);
}

.portal-nav__link {
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: 0.45rem minmax(0, 1fr);
  align-items: center;
  gap: var(--portal-space-3);
  padding: 0.55rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted-strong);
  font-size: var(--portal-type-ui);
  font-weight: 650;
  line-height: 1.35;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}

.portal-nav__marker {
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: var(--line-strong);
  transition: transform 140ms ease-out, background-color 140ms ease-out;
}

.portal-nav__link:hover {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  color: var(--text);
}

.portal-nav__link[aria-current="page"] {
  border-color: color-mix(in srgb, var(--console-accent) 20%, var(--line));
  background: var(--console-active);
  color: var(--console-accent-strong);
}

.portal-nav__link[aria-current="page"] .portal-nav__marker {
  transform: scale(1.3);
  background: var(--console-accent);
}

.portal-sidebar__footer {
  display: grid;
  gap: var(--portal-space-3);
  margin-top: auto;
  padding: 0.9rem 0.45rem 0.15rem;
  border-top: 1px solid var(--line);
}

.portal-system-state,
.portal-commandbar__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: var(--portal-type-caption);
  font-weight: 700;
  line-height: 1.35;
}

.portal-system-state > span,
.portal-commandbar__status > span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--console-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--console-accent) 12%, transparent);
}

.portal-sidebar__footer .portal-theme-toggle {
  width: 100%;
  justify-content: flex-start;
  border-color: var(--line);
  background: transparent;
}

.portal-stage {
  min-width: 0;
}

.portal-commandbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: var(--portal-space-4);
  padding: 0.65rem clamp(1rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--console-bar);
  backdrop-filter: blur(16px);
}

.portal-commandbar__title {
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.portal-commandbar__title span {
  color: var(--muted);
  font-size: var(--portal-type-caption);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.portal-commandbar__title strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-commandbar__meta {
  display: flex;
  align-items: center;
  gap: var(--portal-space-3);
  margin-left: auto;
}

.portal-commandbar .portal-badge {
  min-height: 2rem;
  font-size: var(--portal-type-caption);
}

.portal-menu-button {
  width: 2.75rem;
  height: 2.75rem;
  display: none;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.portal-menu-button span {
  width: 1rem;
  height: 1px;
  display: block;
  background: var(--text);
}

.portal-nav-scrim {
  display: none;
}

.portal-content {
  min-width: 0;
  padding: clamp(1rem, 2.4vw, 2rem);
}

.portal-layout--app .portal-shell {
  width: min(1460px, 100%);
  gap: var(--portal-space-4);
}

.portal-layout--app .portal-panel {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.portal-layout--app .portal-panel__grid {
  min-height: 0;
}

.portal-layout--app .portal-main {
  gap: 0;
  padding: 0;
  background: transparent;
}

.portal-layout--app :is(h1, h2, h3, h4),
.portal-layout--app .portal-card h2,
.portal-layout--app .portal-section h2 {
  font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-wrap: balance;
}

.portal-layout--app .portal-main > .eyebrow-pill,
.portal-layout--app .booking-page__header .eyebrow-pill {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--console-accent-strong);
  font-size: var(--portal-type-caption);
  line-height: 1.35;
  letter-spacing: 0.06em;
}

.portal-layout--app .portal-main > .eyebrow-pill {
  margin-bottom: var(--portal-space-3);
}

.portal-layout--app .portal-main > h1,
.portal-layout--app .booking-page__header h1 {
  max-width: 22ch;
  margin: 0;
  color: var(--text);
  font-size: var(--portal-type-title);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.portal-layout--app .portal-main > h1 {
  margin-bottom: var(--portal-space-2);
}

.portal-layout--app .portal-main > p,
.portal-layout--app .booking-page__header p {
  max-width: 70ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--portal-type-body);
  line-height: 1.5;
  text-wrap: pretty;
}

.portal-layout--app .portal-main > p {
  margin-bottom: var(--portal-space-5);
}

.portal-layout--app .portal-actions {
  align-items: center;
  gap: var(--portal-space-2);
}

.portal-layout--app .portal-main > .portal-actions {
  margin-bottom: var(--portal-space-5);
}

.portal-layout--app .portal-button {
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 7px;
  font-size: var(--portal-type-ui);
  line-height: 1.25;
}

.portal-layout--app .portal-grid {
  gap: var(--portal-space-3);
  margin-bottom: var(--portal-space-4);
}

.portal-layout--app .portal-card {
  min-height: 8.25rem;
  display: grid;
  align-content: start;
  gap: var(--portal-space-2);
  padding: 1.125rem;
  border-radius: 10px;
  background: var(--surface);
}

.portal-layout--app .portal-card h2 {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: var(--portal-type-card);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.portal-layout--app .portal-card p {
  max-width: 60ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.portal-layout--app .portal-section,
.portal-layout--app .booking-surface {
  border-radius: 11px;
  background: var(--surface);
}

.portal-layout--app .portal-section {
  padding: var(--portal-space-5);
  margin-bottom: var(--portal-space-4);
}

.portal-layout--app .portal-section h2 {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: var(--portal-type-section);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.portal-layout--app .portal-section h3 {
  font-size: var(--portal-type-card);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.portal-layout--app .portal-section p {
  max-width: 72ch;
  font-size: var(--portal-type-body);
  line-height: 1.5;
  text-wrap: pretty;
}

.portal-layout--app .portal-table {
  font-size: var(--portal-type-ui);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.portal-layout--app .portal-table th,
.portal-layout--app .portal-table td {
  padding: var(--portal-space-3) var(--portal-space-4);
}

.portal-layout--app .portal-table th {
  font-size: var(--portal-type-caption);
  line-height: 1.35;
  letter-spacing: 0.06em;
}

.portal-layout--app .portal-field {
  gap: var(--portal-space-2);
}

.portal-layout--app .portal-field label {
  margin: 0;
  font-size: var(--portal-type-caption);
  line-height: 1.35;
  letter-spacing: 0.055em;
}

.portal-layout--app .portal-field input,
.portal-layout--app .portal-field select,
.portal-layout--app .portal-field textarea {
  min-height: 2.75rem;
  padding: var(--portal-space-3) var(--portal-space-4);
  border-radius: 7px;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.portal-layout--app .settings-hub__nav {
  top: 5.75rem;
}

.portal-layout--auth .portal-panel {
  max-width: 1220px;
  margin-inline: auto;
}

@media (max-width: 1080px) {
  .portal-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(18rem, 86vw);
    transform: translateX(-105%);
    box-shadow: 12px 0 32px rgba(6, 18, 12, 0.18);
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .portal-nav-open .portal-sidebar {
    transform: translateX(0);
  }

  .portal-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    border: 0;
    background: rgba(4, 10, 7, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-out;
  }

  .portal-nav-open .portal-nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .portal-menu-button {
    display: grid;
    flex: 0 0 auto;
  }
}

@media (max-width: 720px) {
  .portal-sidebar .portal-theme-toggle > [data-theme-label] {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .portal-sidebar .portal-theme-toggle__track {
    flex: 0 0 auto;
  }

  .portal-commandbar {
    min-height: 4rem;
    padding-inline: 0.75rem;
  }

  .portal-commandbar__status,
  .portal-commandbar .portal-badge {
    display: none;
  }

  .portal-content {
    padding: var(--portal-space-4) var(--portal-space-3) var(--portal-space-5);
  }

  .portal-layout--app .portal-shell {
    gap: 1rem;
  }

  .portal-layout--app .portal-panel {
    border-radius: 0;
  }

  .portal-layout--app .portal-main,
  .portal-layout--app .portal-section,
  .portal-layout--app .portal-card {
    padding: var(--portal-space-4);
  }

  .portal-layout--app .portal-main {
    padding: 0;
  }

  .portal-layout--app .portal-main > h1,
  .portal-layout--app .booking-page__header h1 {
    font-size: 1.875rem;
    line-height: 1.15;
  }

  .portal-layout--app .portal-main > p,
  .portal-layout--app .booking-page__header p {
    font-size: var(--portal-type-body);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-sidebar,
  .portal-nav-scrim {
    transition: none;
  }
}