/* Rently Next CSS manifest. The Pages builder inlines these local files into
   one cache-busted artifact, while local development keeps each concern small. */

/* Source: styles/foundation.css */
/* Rently Next visual foundation: one calm, mobile-first product surface. */
:root {
  --canvas: #f6f7f9;
  --surface: #ffffff;
  --surface-subtle: #f7f7f7;
  --surface-accent: #fff1f4;
  --ink: #202326;
  --muted: #697078;
  --muted-strong: #50565d;
  --line: #e6e8eb;
  --line-strong: #cfd4d9;
  --accent: #ff385c;
  --accent-strong: #c72f43;
  --accent-soft: #fff1f4;
  --success: #2e7d4f;
  --success-soft: #f1f8f3;
  --warning: #8d651d;
  --warning-soft: #fff8ed;
  --stub: #735b88;
  --stub-soft: #f7f3fa;
  --chart-primary: #e84d6d;
  --chart-berry: #a95671;
  --chart-gold: #bd7a3d;
  --chart-sage: #4f8264;
  --chart-plum: #765c83;
  --chart-stone: #8b817c;
  --chart-turnover: #e31c5f;
  --chart-owner: #3f7956;
  --chart-expense: #c85e61;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --control-height: 42px;
  --touch-control-height: 44px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-popover: 0 12px 30px rgba(32, 35, 38, .10);
  --shadow-overlay: 0 22px 54px rgba(32, 35, 38, .16);
  --shadow-fixed: 0 -3px 16px rgba(32, 35, 38, .07);
  color: var(--ink);
  background: var(--canvas);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: none;
  background: var(--canvas);
  overflow-x: clip;
  touch-action: pan-y pinch-zoom;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: clip;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overscroll-behavior-x: none;
  background: var(--canvas);
}
html.rently-modal-open { overflow: hidden; overscroll-behavior: none; }
body.rently-modal-open {
  position: fixed;
  top: calc(-1 * var(--rently-modal-scroll-y, 0px));
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
/* The Messages route is an application workspace, not a document page. This
 * keeps iOS from handing a gesture on its static surface to the browser. */
html.rently-messages-route-open {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body.rently-messages-route-open {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body.rently-messages-route-open #app {
  height: 100%;
  overflow: hidden;
}
#app { width: 100%; min-width: 0; max-width: 100%; overflow-x: clip; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
/* A disabled range-control must suppress its later :active transform. */
button:disabled { cursor: not-allowed; opacity: .5; transform: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ph-icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; display: inline-block; vertical-align: -.15em; }

.eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-title, .onboarding-heading h1, .entry-copy h1 {
  margin: 0;
  color: var(--ink);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -.035em;
}
.page-title { font-size: clamp(28px, 2.4vw, 30px); line-height: 1.2; }
.page-subtitle, .entry-note { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.entry-note { font-size: 13px; }
.page-title-row, .section-title-row, .modal-title-row, .entry-title-row, .onboarding-title-row, .choice-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.page-title-row .page-title, .section-title-row h2, .modal-title-row h2, .entry-title-row h2, .onboarding-title-row h1, .choice-title strong { margin: 0; }


/* Source: styles/layout.css */
/* Shell and navigation are intentionally flat; hierarchy comes from space and type. */
.app-shell { min-width: 0; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 220px minmax(0, 1fr); background: var(--canvas); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  border-right: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
  overflow: hidden;
}
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 19px; font-weight: var(--font-weight-semibold); letter-spacing: -.035em; line-height: 1; }
.brand-mark { width: 30px; height: 30px; flex: 0 0 30px; display: block; object-fit: contain; background: transparent; }
.brand-word { display: inline-block; }
.workspace-name { margin: 24px 10px 8px; color: var(--muted); font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: .07em; text-transform: uppercase; }
.main-nav { display: grid; gap: 2px; }
.nav-item {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  text-align: left;
}
.nav-item:hover { background: var(--surface-subtle); color: var(--ink); }
.nav-item.is-active { background: var(--surface-accent); color: var(--accent-strong); font-weight: var(--font-weight-semibold); }
.nav-icon { width: 24px; display: grid; place-items: center; }
.nav-icon .ph-icon { width: 20px; height: 20px; }
.nav-item-badge { min-width: 18px; height: 18px; display: inline-grid; place-items: center; margin-left: auto; padding: 0 5px; border-radius: 999px; background: var(--accent-strong); color: #fff; font-size: 10px; font-weight: var(--font-weight-semibold); line-height: 1; }
.sidebar-bottom { min-width: 0; display: grid; gap: 10px; margin-top: auto; }
.sidebar-bottom > * { min-width: 0; max-width: 100%; }
.sidebar-bottom .person { overflow: hidden; }
.sidebar-bottom .person > div { min-width: 0; overflow-wrap: anywhere; }
.person { display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--line); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-subtle); color: var(--ink); font-size: 12px; font-style: normal; font-weight: var(--font-weight-semibold); }
.person strong, .person span { display: block; }
.person strong { font-size: 13px; font-weight: var(--font-weight-semibold); }
.person span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.logout { justify-content: flex-start; color: var(--muted); }

.main-area { min-width: 0; padding: 16px clamp(24px, 2.5vw, 32px) 32px; }
.topbar { min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; }
.breadcrumb { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 14px; }
.workspace-company { min-width: 0; max-width: 360px; flex: 1; }
.workspace-company label { display: block; min-width: 0; }
.workspace-company select { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.workspace-company-error { margin: 6px 0 0; font-size: 12px; color: var(--danger, #b42318); line-height: 1.4; overflow-wrap: break-word; }
.workspace-company-current { margin: 5px 0 0; color: var(--muted-strong); font-size: 12px; line-height: 1.4; overflow-wrap: break-word; }
.workspace-company-current strong { color: var(--ink); font-weight: var(--font-weight-semibold); }
.top-actions, .page-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page { min-width: 0; display: grid; gap: 24px; width: 100%; max-width: none; margin: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.page-head .page-title { font-size: clamp(28px, 2.4vw, 30px); }
.page-head .page-subtitle { margin-top: 5px; }
.mobile-nav { display: none; }

/* Entry and loading are deliberately one clear frame each: a free brand mark
 * followed by a single form surface, or a compact preview of the workspace. */
.entry { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: clamp(24px, 5vw, 72px); background: var(--canvas); }
.entry-card { width: min(100%, 460px); display: grid; gap: 14px; }
.entry-brand { display: flex; justify-content: center; padding: 0 0 2px; }
.entry-card-auth .entry-form { display: grid; align-content: start; gap: 20px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-popover); }
.entry-card-auth .entry-form h2 { margin: 0; color: var(--ink); font-size: clamp(25px, 3vw, 29px); font-weight: var(--font-weight-semibold); letter-spacing: -.03em; line-height: 1.18; }
.entry-card-auth .entry-form p { margin: 8px 0 0; color: var(--muted); line-height: 1.45; }
.entry-card-auth .entry-form .button-primary { min-height: 48px; }
.app-loading { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: clamp(24px, 5vw, 72px); background: var(--canvas); }
.app-loading-frame { width: min(100%, 920px); display: grid; justify-items: center; gap: 20px; text-align: center; }
.app-loading .brand, .app-loading-wordmark { color: var(--ink); font-size: 20px; font-weight: var(--font-weight-semibold); letter-spacing: -.04em; }
.app-loading-copy { display: grid; gap: 4px; }.app-loading-copy strong { color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }.app-loading-copy span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.app-loading-progress { position: relative; width: 68px; height: 4px; overflow: hidden; border-radius: 999px; background: var(--surface-subtle); }.app-loading-progress i { position: absolute; inset: 0 auto 0 -40%; width: 42%; border-radius: inherit; background: var(--accent); animation: app-loading-progress 1.25s ease-in-out infinite; }
@keyframes app-loading-progress { 50% { transform: translateX(240%); opacity: .68; } 100% { transform: translateX(360%); } }
.app-loading-skeleton { width: 100%; display: grid; gap: 16px; padding: clamp(20px, 4vw, 28px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); animation: app-loading-pulse 2.2s ease-in-out infinite; }.loading-skeleton-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }.loading-skeleton-heading i, .loading-skeleton-metrics span, .loading-skeleton-list i, .loading-skeleton-chart i { display: block; border-radius: 6px; background: var(--surface-subtle); }.loading-skeleton-heading i:first-child { width: 32%; height: 18px; }.loading-skeleton-heading i:last-child { width: 18%; height: 28px; }.loading-skeleton-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.loading-skeleton-metrics span { height: clamp(48px, 8vw, 72px); }.loading-skeleton-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; min-height: 112px; }.loading-skeleton-chart { display: flex; align-items: end; gap: 8px; padding-top: 12px; border-bottom: 1px solid var(--line); }.loading-skeleton-chart i { flex: 1; height: 38%; border-radius: 5px 5px 0 0; }.loading-skeleton-chart i:nth-child(2n) { height: 64%; }.loading-skeleton-chart i:nth-child(3n) { height: 88%; }.loading-skeleton-list { display: grid; align-content: space-evenly; gap: 12px; }.loading-skeleton-list i { height: 9px; }.loading-skeleton-list i:nth-child(2n) { width: 70%; }
@keyframes app-loading-pulse { 50% { opacity: .62; } }
.visual-onboarding-shell .onboarding-top { min-height: 64px; padding-block: 12px; }.visual-onboarding-shell .onboarding-body { margin-top: 28px; margin-bottom: 32px; }.visual-onboarding-shell .onboarding-form { gap: 24px; }.visual-onboarding-shell .onboarding-heading h1 { font-size: clamp(28px, 3vw, 30px); line-height: 1.2; }


/* Source: styles/components.css */
/* Reusable controls. Ordinary content is not a card; a surface is only used for a real boundary. */
.button, .text-action, .logout, .range-control, .onboarding-support-link, .entry-proof span { display: inline-flex; align-items: center; gap: 8px; }
.guest-card-tabs { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 280px); border-bottom: 1px solid var(--line); }
.guest-card-tab { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: var(--font-weight-semibold); }
.guest-card-tab.is-active { border-bottom-color: var(--accent-strong); color: var(--ink); }
.guest-card-tab-badge { min-width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0 4px; border-radius: 999px; background: var(--accent-strong); color: #fff; font-size: 10px; line-height: 1; }
.button {
  min-height: var(--control-height);
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.button:hover { border-color: var(--ink); }
.button-primary { border-color: var(--accent-strong); background: var(--accent-strong); color: #fff; }
.button-primary:hover { border-color: #c9154d; background: #c9154d; }
.button-primary:focus-visible { border-color: var(--accent-strong); background: var(--accent-strong); }
.button-quiet { background: transparent; }
.button .ph-icon, .text-action .ph-icon { width: 17px; height: 17px; }
.range-control {
  min-height: var(--control-height);
  padding: 0 14px;
  border: 1px solid #e6e3df;
  border-radius: 11px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(34, 34, 34, .04);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.range-control:hover { border-color: #cfcac5; background: #fffafb; box-shadow: 0 3px 10px rgba(34, 34, 34, .06); }
.range-control:active { transform: translateY(1px); }
.range-control .ph-icon { width: 17px; height: 17px; color: var(--accent-strong); }
.range-control .ph-icon:last-child { width: 14px; height: 14px; margin-left: 2px; color: var(--muted); }
.icon-button {
  flex-shrink: 0;
  width: var(--touch-control-height);
  height: var(--touch-control-height);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
}
.icon-button:hover { background: var(--surface-subtle); }
.icon-button .ph-icon { width: 20px; height: 20px; }
.progress-button { width: auto; min-width: 52px; grid-auto-flow: column; gap: 5px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: var(--font-weight-semibold); }
.progress-button .ph-icon { width: 15px; height: 15px; }
.onboarding-readonly { display: inline-flex; align-items: center; min-height: 36px; max-width: 100%; padding: 0 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: var(--font-weight-medium); text-overflow: ellipsis; white-space: nowrap; }

.field { display: grid; gap: 7px; color: var(--ink); font-size: 14px; font-weight: var(--font-weight-medium); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select:not([multiple]):not([size]), .field select:not([multiple])[size="0"], .field select:not([multiple])[size="1"], select:not([multiple]):not([size]), select:not([multiple])[size="0"], select:not([multiple])[size="1"], textarea, .compose input {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--surface);
  color: var(--ink);
}
.field select:not([multiple]):not([size]), .field select:not([multiple])[size="0"], .field select:not([multiple])[size="1"], select:not([multiple]):not([size]), select:not([multiple])[size="0"], select:not([multiple])[size="1"] {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256' fill='none' stroke='%23697078' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'%3E%3Cpath d='m48 96 80 80 80-80'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
.field select[multiple], select[multiple], .field select[size]:not([size="0"]):not([size="1"]), select[size]:not([size="0"]):not([size="1"]) { min-height: 96px; padding-block: 8px; }
textarea { min-height: 96px; padding-block: 12px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; width: 19px; height: 19px; min-height: 19px; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--accent-strong); }
.selection-field { display: flex; align-items: center; gap: 8px; min-width: 44px; max-width: 100%; min-height: 44px; padding-block: 4px; cursor: pointer; line-height: 1.4; overflow-wrap: anywhere; }
.selection-field > span { min-width: 0; }
.selection-field:has(> input:disabled) { cursor: not-allowed; color: var(--muted); }
.selection-field > input:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.selection-button { display: inline-grid; place-items: center; box-sizing: border-box; width: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 0; cursor: pointer; }
.selection-button::before { content: ""; display: inline-grid; place-items: center; box-sizing: border-box; width: 19px; height: 19px; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 13px; line-height: 1; }
.selection-button[aria-pressed="true"]::before { content: "✓"; border-color: var(--accent-strong); background: var(--accent-strong); color: var(--surface); }
.selection-button:focus-visible { outline: 0; }
.selection-button:focus-visible::before { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.selection-button:disabled { cursor: not-allowed; opacity: .5; }
.field input::placeholder, .compose input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus, select:focus, textarea:focus, .compose input:focus { border-color: var(--ink); }
.field > small { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; font-weight: var(--font-weight-regular); line-height: 1.4; }
.form-message, .form-error { margin: 0; padding: 12px 13px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.4; }
.form-message { border: 1px solid #cfe1d4; background: var(--success-soft); color: var(--success); }
.form-error { border: 1px solid #f0c6d0; background: var(--accent-soft); color: #a12d49; }
.auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }
.auth-links button { min-height: 40px; padding: 0 2px; border: 0; background: transparent; color: var(--accent-strong); font-weight: var(--font-weight-semibold); }
.entry-actions, .integration-actions, .modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.text-action { min-height: 34px; padding: 0 4px; border: 0; background: transparent; color: var(--accent-strong); font-size: 12px; font-weight: var(--font-weight-semibold); }
.form-draft-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 100%; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); color: var(--muted-strong); font-size: 13px; line-height: 1.4; }.form-draft-notice > span { min-width: 0; flex: 1 1 220px; }.form-draft-notice .text-action { min-height: 44px; flex: 0 0 auto; padding-inline: 4px; }

/* Shared contact and channel primitives.  Messages, Guests and future
 * integrations render these through the common presentation helpers, so none
 * of those feature areas owns another feature's visual dependency. */
.contact-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}
.contact-avatar > img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.contact-avatar-fallback { display: grid; z-index: 0; width: 100%; height: 100%; place-items: center; }
.channel-provider-mark { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; color: var(--muted-strong); font-size: 10px; font-weight: var(--font-weight-semibold); line-height: 1; }
.channel-provider-mark > span { min-width: 16px; height: 16px; display: inline-grid; place-items: center; padding: 0 3px; border-radius: 5px; background: #f3f1ef; color: #6b625c; font-size: 9px; font-weight: var(--font-weight-semibold); letter-spacing: -.03em; }
.channel-provider-mark > img { width: 16px; height: 16px; display: block; flex: 0 0 16px; object-fit: contain; }
.channel-provider-mark.is-cian > span { background: #f4eff8; color: #765188; }
.channel-provider-mark.is-sutochno > span { background: #fff3e8; color: #9b5e2d; }
.channel-provider-mark.is-telegram > span { background: #f9ecef; color: #a33f59; }
.channel-provider-mark.is-vk > span { background: #f2f0ed; color: #665f59; }
.channel-provider-mark b { color: inherit; font-size: inherit; font-weight: inherit; }

.card {
  min-width: 0;
  padding: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line);
  background: transparent;
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.card-head h2, .card-head h3 { margin: 0; color: var(--ink); font-size: 20px; font-weight: var(--font-weight-semibold); letter-spacing: -.025em; line-height: 1.2; }
.card-head p { margin: 1px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.card-head > p { max-width: 250px; text-align: right; }
.card-head > div { min-width: 0; }
.empty-workspace, .empty-step {
  display: grid;
  justify-items: start;
  gap: 9px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.empty-workspace strong, .empty-step strong { color: var(--ink); font-size: 18px; font-weight: var(--font-weight-semibold); }
.empty-step p { margin: 0; line-height: 1.45; }

.modal-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 20px; overscroll-behavior: contain; background: rgba(32, 35, 38, .24); backdrop-filter: blur(3px); }
.modal { width: min(100%, 640px); max-height: min(760px, calc(100vh - 40px)); max-height: min(760px, calc(100dvh - 40px)); overflow-x: hidden; overflow-y: auto; padding: 24px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-overlay); }
.modal:has(> .modal-body) { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; padding: 0; }
.modal-head, .modal-body, .modal-actions { min-width: 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.modal-head h2 { margin: 0; overflow-wrap: anywhere; font-size: 27px; font-weight: var(--font-weight-semibold); letter-spacing: -.03em; }
.modal-actions { justify-content: flex-end; margin-top: 8px; }
.modal:has(> .modal-body) > .modal-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.modal-title-row { min-width: 0; }
.modal:has(> .modal-body) > .modal-body { overflow: auto; padding: 20px 24px; overflow-anchor: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal:has(> .modal-body) > .modal-actions { justify-content: flex-end; gap: 8px; margin-top: 0; padding: 16px 24px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.modal > :not(.modal-head):not(.modal-body):not(.modal-actions) { min-width: 0; }
.modal-backdrop[data-modal-backdrop="workspace-confirmation"] { z-index: 100; }
.workspace-confirmation-modal { width: min(100%, 480px); display: grid; gap: 18px; }

@media (forced-colors: active) {
  .field select:not([multiple]):not([size]), .field select:not([multiple])[size="0"], .field select:not([multiple])[size="1"], select:not([multiple]):not([size]), select:not([multiple])[size="0"], select:not([multiple])[size="1"] { appearance: auto; -webkit-appearance: auto; padding-right: 13px; background-image: none; }
}

/* Section-owned Trash uses canonical rows and the shared native controls. */
.record-trash { min-width: 0; display: grid; gap: 16px; }
.record-trash-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.record-trash-head h2 { margin: 0; font-size: 20px; }
.record-trash-row { min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.record-trash-row > div { min-width: 0; display: grid; gap: 6px; overflow-wrap: anywhere; }
.record-trash-row small, .record-trash > p { color: var(--muted); }
.record-trash-row .button { flex-shrink: 0; }
.record-trash-restore { min-width: 0; display: grid; gap: 14px; padding-block: 16px; border-block: 1px solid var(--line); }
.record-trash > p, .record-trash-restore p { margin: 0; line-height: 1.5; }
.record-trash [data-form-feedback]:empty { display: none; }
.record-trash .page-actions { justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 1023px) { .record-trash :is(input, button) { scroll-margin-block: 16px 160px; } }
@media (max-width: 599px) { .record-trash-row { align-items: flex-start; flex-direction: column; } .record-trash .button { min-height: 44px; } }


/* Source: styles/features.css */
.insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.insight { min-height: 106px; padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }.insight.is-highlight { background: var(--accent-soft); }
.insight span { display: block; color: var(--muted); font-size: 12px; }.insight strong { display: block; margin-top: 9px; color: var(--ink); font-size: 21px; font-weight: var(--font-weight-semibold); letter-spacing: -.025em; }.insight small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }

/* Guests: one document scroll owner, visually separated by quiet headings. */
.section-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.section-intro h2 { margin: 0; font-size: 22px; font-weight: var(--font-weight-semibold); letter-spacing: -.025em; }.section-intro p { max-width: 650px; margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.stage-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px; border-bottom: 1px solid var(--line); }.stage-header strong { font-size: 14px; font-weight: var(--font-weight-semibold); }.stage-count { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-subtle); color: var(--muted); font-size: 12px; font-weight: var(--font-weight-semibold); }
.booking-modal { display: grid; gap: 18px; }

/* Lists: operations and settings share an unboxed row language. */
.operations-grid, .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: 32px; }
.transaction-list, .settings-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.transaction, .setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 68px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.transaction strong, .setting-row strong { display: block; color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }.transaction span, .setting-row span { color: var(--muted); font-size: 13px; }.amount-income { color: var(--success); }.amount-expense { color: var(--accent-strong); }
.task-create { display: grid; gap: 13px; }.task-state { color: var(--muted); font-size: 13px; }

/* Settings overview is the reference implementation of the open list pattern. */
.settings-overview { gap: 26px; max-width: 920px; }.settings-overview .page-head { align-items: flex-start; }
.settings-overview-title { display: grid; gap: 4px; }.settings-overview-meta { color: var(--muted); font-size: 13px; }.settings-organization-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 6px 0 0; color: var(--muted); font-size: 12px; }.settings-organization-id code { color: var(--muted-strong); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.settings-setup-progress { display: grid; gap: 12px; padding-block: 4px 8px; }.settings-setup-progress-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }.settings-setup-progress-heading strong { font-size: 15px; font-weight: var(--font-weight-semibold); }.settings-setup-progress-heading > span { color: var(--muted); font-size: 13px; white-space: nowrap; }.settings-setup-progress-track { height: 7px; overflow: hidden; border-radius: 4px; background: var(--line); }.settings-setup-progress-track > span { display: block; width: var(--setup-progress); height: 100%; background: var(--accent); }.settings-setup-progress p { margin: 0; max-width: 640px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.settings-primary-list { width: 100%; }.settings-list .setting-row { width: 100%; appearance: none; grid-template-columns: 38px minmax(0, 1fr) auto; border-top: 0; border-right: 0; border-left: 0; background: transparent; color: var(--ink); text-align: left; }.setting-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink); }.setting-icon .ph-icon { width: 21px; height: 21px; }.setting-row-link { cursor: pointer; }.setting-row-link:hover { padding-inline: 8px; background: var(--surface-subtle); }.setting-row-copy { min-width: 0; display: grid; gap: 3px; }.setting-row-copy > span { overflow-wrap: anywhere; }.setting-row-meta { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); }.setting-row-meta > .ph-icon { width: 18px; height: 18px; }
.settings-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 14px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }.settings-summary strong { color: var(--ink); font-weight: var(--font-weight-semibold); }.settings-summary span + span::before { margin-right: 18px; color: var(--line-strong); content: "·"; }
.settings-domain-head { align-items: flex-start; }.settings-return { margin-bottom: 13px; }.settings-domain-content { min-width: 0; display: grid; gap: 28px; }.settings-objects-panel, .settings-catalog-panel { display: grid; align-content: start; gap: 15px; }.settings-objects-panel .button, .settings-catalog-panel .button { justify-self: start; }.settings-catalog-preview { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }.settings-catalog-preview li { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-subtle); color: var(--ink); font-size: 13px; }

/* Integrations and account domains use the same row rhythm, not a tile wall. */
.integrations-section { width: 100%; max-width: 920px; display: grid; gap: 20px; padding-top: 0; }.integration-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }.integration-card { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px; min-height: 94px; padding: 16px 0; border-bottom: 1px solid var(--line); }.integration-card-head { display: contents; }.integration-provider { grid-column: 1; grid-row: 1 / span 4; width: 30px; height: 30px; display: grid; place-items: center; background: transparent; color: var(--ink); }.integration-provider .ph-icon { width: 18px; height: 18px; }.integration-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 15px; font-weight: var(--font-weight-semibold); letter-spacing: -.015em; }.integration-card > .integration-state { grid-column: 2; grid-row: 2; }.integration-card p { grid-column: 2; grid-row: 3; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }.integration-card small { grid-column: 2; grid-row: 4; color: var(--muted); font-size: 11px; line-height: 1.3; }.integration-card .button { grid-column: 3; grid-row: 1 / span 4; align-self: center; min-height: 36px; padding-inline: 10px; font-size: 12px; }
.integration-state, .team-member-status { display: inline-flex; align-items: center; min-height: 22px; padding: 0; color: var(--muted); font-size: 11px; font-weight: var(--font-weight-medium); }.integration-state.is-connected, .team-member-status.is-active { color: var(--success); }.integration-state.is-needs_attention { color: var(--accent-strong); }.integration-state.is-paused, .team-member-status.is-inactive { color: var(--muted); }.integration-modal { min-height: 0; display: grid; gap: 16px; overflow: hidden; }.integration-modal > p { margin: 0; color: var(--muted-strong); line-height: 1.45; }.integration-form, .integration-guidance { display: grid; gap: 13px; }.integration-dialog-content > .integration-credentials { order: 2; }.integration-dialog-content > .integration-guidance { order: 3; }.integration-dialog-content > .integration-actions { order: 4; }.integration-guidance { padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.45; }.integration-guidance strong { color: var(--ink); }.integration-guidance .button { justify-self: start; }
.integration-provider-logo { width: 24px; height: 24px; object-fit: contain; }
.integration-dialog-content { display: grid; min-width: 0; gap: 18px; }
.integration-dialog-intro, .integration-connection-summary-head { display: flex; align-items: center; gap: 12px; }
.integration-dialog-intro h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.integration-dialog-intro p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.avito-mark { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); }
.avito-mark img { display: block; width: 30px; height: 30px; object-fit: contain; }
.integration-connection-summary { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-subtle); }
.integration-connection-summary-head strong { display: block; font-size: 14px; }
.integration-connection-summary-head .integration-state { display: block; min-height: 0; margin-top: 2px; }
.integration-connection-summary .entry-note { margin: 0; }
.integration-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.integration-facts div { min-width: 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
.integration-facts dt { color: var(--muted); font-size: 11px; }
.integration-facts dd { overflow-wrap: anywhere; margin: 3px 0 0; color: var(--ink); font-size: 12px; font-weight: var(--font-weight-medium); }
.integration-credentials { display: grid; gap: 12px; }
.integration-guidance h4, .integration-credentials h4 { margin: 0; font-size: 14px; }
.integration-connect-steps { display: grid; gap: 12px; margin: 0; padding-left: 21px; }
.integration-connect-steps li { padding-left: 3px; color: var(--ink); font-size: 13px; line-height: 1.4; }
.integration-connect-steps li a, .integration-connect-steps li span { display: block; width: fit-content; margin-top: 4px; color: var(--muted); font-size: 12px; }
.integration-connect-steps li a { color: var(--ink); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 3px; }
.avito-doc-links { display: flex; flex-wrap: wrap; gap: 12px; }
.avito-doc-links a { color: var(--ink); font-size: 12px; font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 3px; }
.integration-actions { padding-top: 2px; }
.integration-provider-mark { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; overflow: hidden; background: transparent; }
.integration-provider-mark img { display: block; width: 30px; height: 30px; object-fit: contain; }

/* VK: put the setup steps first and keep external actions touch-friendly. */
.vk-integration-modal-content > .vk-guide { order: 1; }
.vk-integration-modal-content .vk-connect-steps { gap: 18px; }
.vk-integration-modal-content .vk-connect-steps li a { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; line-height: 1.4; text-decoration: none; text-align: center; }
.vk-integration-modal-content .vk-integration-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vk-integration-modal-content.is-recovery > .vk-integration-actions { order: 1; }
.vk-guide-help { order: 3; min-width: 0; }
.vk-guide-help > summary { width: fit-content; min-height: 44px; padding-block: 12px; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: var(--font-weight-medium); }
.vk-setup-progress { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); color: var(--ink); font-size: 13px; line-height: 1.5; }

/* CIAN: one ordered setup flow, then a separate incoming/reply check. */
.cian-integration-modal-content .cian-guide { order: 2; }
.cian-integration-modal-content .cian-connect-steps { gap: 22px; }
.cian-integration-modal-content .cian-connect-steps li p { margin: 6px 0 10px; color: var(--muted-strong); font-size: 13px; line-height: 1.5; }
.cian-integration-modal-content .cian-connect-steps li a.button { display: inline-flex; width: auto; max-width: 100%; min-height: 44px; margin-top: 0; color: var(--ink); text-align: center; text-decoration: none; font-size: 13px; line-height: 1.35; }
.cian-integration-modal-content .cian-connect-steps li .button span { display: inline; width: auto; margin: 0; color: inherit; font-size: inherit; }
.cian-integration-modal-content .cian-connect-steps li .cian-credentials { margin-top: 10px; }
.cian-integration-modal-content .integration-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cian-integration-modal-content .cian-capabilities { margin: 0; color: var(--muted-strong); line-height: 1.5; }
.cian-access-help { margin-top: 12px; color: var(--muted-strong); font-size: 13px; line-height: 1.5; }
.cian-access-help summary { width: fit-content; min-height: 44px; display: list-item; padding-block: 10px; color: var(--ink); cursor: pointer; font-weight: var(--font-weight-medium); }
.cian-access-help p { margin: 6px 0 10px; }
.cian-access-help .integration-actions { margin-block: 8px; }
.cian-next-step { display: grid; gap: 14px; }
.cian-next-step h4 { margin: 0; color: var(--ink); font-size: 15px; }
.cian-next-step > p { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.5; }
.instagram-credentials > div > p,
.instagram-webhook-setup > div > p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.instagram-credential-form { padding-top: 2px; }

.instagram-credential-form .field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
}

.field-optional {
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
}

.instagram-webhook-setup,
.instagram-platform-setup-required {
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-subtle);
}

.instagram-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.instagram-setup-value input {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  letter-spacing: -.02em;
}

.instagram-copy-button {
  min-height: 40px;
  white-space: nowrap;
}

.instagram-account-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.instagram-readiness-loading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-subtle);
}

.instagram-readiness-loading strong {
  display: block;
  font-size: 14px;
}

.instagram-readiness-loading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.instagram-connection-readiness {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-subtle);
}

.instagram-connection-readiness h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.instagram-connection-readiness p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.instagram-connection-readiness ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.instagram-readiness-step {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 13px;
}

.instagram-readiness-step strong {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.instagram-readiness-step.is-complete strong { color: var(--success, #237b4b); }
.instagram-readiness-step.is-current { border: 1px solid var(--accent); }
.instagram-readiness-step.is-current strong { color: var(--accent); }
.instagram-readiness-step.is-conditional strong { color: var(--muted-strong); }

.instagram-platform-setup-required strong { font-size: 14px; }

.instagram-platform-setup-required p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.instagram-webhook-activate {
  display: flex;
  padding-top: 2px;
}

.instagram-readiness-skeleton {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 14px;
  background: #ebe9e7;
}

.instagram-readiness-skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.7), transparent);
  content: "";
  transform: translateX(-120%);
  animation: integration-readiness-shimmer 1.4s ease-in-out infinite;
}
@keyframes integration-readiness-shimmer { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .instagram-readiness-skeleton::after { animation: none; } }

/* Calendar: a pure grid; range fill never changes the cell's geometry. */
.calendar-backdrop { background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); }
.calendar-modal { width: min(100%, 560px); padding: 26px; border-color: #ece9e7; border-radius: 22px; background: #fff; box-shadow: 0 20px 60px rgba(34, 34, 34, .14); }
.calendar-modal .modal-head { padding-bottom: 2px; }
.month-switch { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 12px; margin: 24px 0 16px; }.month-switch strong { color: var(--ink); font-size: 18px; font-weight: var(--font-weight-semibold); text-align: center; }.quick-ranges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }.quick-ranges .button { min-height: 38px; padding-inline: 12px; font-size: 13px; }
.calendar-modal .quick-ranges .button { border-color: #e9e6e3; border-radius: 999px; background: #fff; color: var(--muted-strong); }
.calendar-modal .quick-ranges .button:hover { border-color: #efb7c5; background: #fff5f7; color: var(--accent-strong); }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }.calendar-weekdays { margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: var(--font-weight-semibold); text-align: center; }.calendar-weekdays span { min-height: 24px; display: grid; place-items: center; }.calendar-days { row-gap: 4px; overflow: hidden; overflow: clip; }
.calendar-cell { position: relative; min-height: 43px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--ink); font-weight: var(--font-weight-medium); isolation: isolate; }.calendar-cell:focus-visible { outline-offset: -3px; }.calendar-cell.is-outside { color: var(--muted); }.calendar-cell.is-range::before { position: absolute; z-index: -1; top: 4px; right: 0; bottom: 4px; left: 0; background: #fff0f3; content: ""; }.calendar-cell.is-start::before { left: 50%; }.calendar-cell.is-end::before { right: 50%; }.calendar-cell.is-single::before { display: none; }.calendar-cell .day-number { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; }.calendar-cell.is-start .day-number, .calendar-cell.is-end .day-number, .calendar-cell.is-single .day-number { background: var(--accent-strong); color: #fff; }
.range-summary { display: flex; align-items: center; min-height: 48px; margin-top: 20px; padding: 0 14px; border: 1px solid #f0edeb; border-radius: 12px; background: #fffafa; color: var(--muted); font-size: 13px; }.range-summary strong { margin-left: 5px; color: var(--ink); font-weight: var(--font-weight-semibold); }

/* Nine-step onboarding keeps one clear form on an otherwise open canvas. */
.onboarding-shell { min-height: 100vh; min-height: 100dvh; background: var(--canvas); }.onboarding-top { min-height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 16px clamp(18px, 4vw, 56px); border-bottom: 1px solid var(--line); background: var(--surface); }.onboarding-top .icon-button { justify-self: end; }.onboarding-meta { display: grid; justify-items: center; gap: 3px; color: var(--muted); font-size: 12px; }.onboarding-meta strong { color: var(--ink); font-size: 13px; font-weight: var(--font-weight-semibold); }
.progress-rail { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0 clamp(18px, 4vw, 56px); list-style: none; background: var(--surface); }.progress-rail > li { min-width: 0; }.progress-step { min-width: 0; min-height: 32px; display: grid; place-items: end center; }.progress-step::after { width: 100%; height: 3px; background: var(--line); content: ""; }.progress-step > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }.progress-step.is-active::after, .progress-step.is-configured::after { background: var(--accent); }.progress-step.is-deferred::after { background: var(--chart-gold); }.onboarding-step-selector { width: min(100% - 36px, 820px); margin: 12px auto 0; border: 1px solid var(--line); background: var(--surface); }.onboarding-step-selector > summary { min-height: 44px; display: flex; align-items: center; padding: 0 14px; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: var(--font-weight-semibold); }.onboarding-step-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; border-top: 1px solid var(--line); }.onboarding-step-choice { min-height: 44px; display: grid; justify-items: start; gap: 2px; padding: 8px 10px; text-align: left; }.onboarding-step-choice[aria-current="step"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }.onboarding-step-choice small { color: var(--muted); font-size: 11px; font-weight: var(--font-weight-regular); }
.onboarding-body { width: min(100% - 36px, 820px); display: grid; gap: 16px; margin: 38px auto; }.onboarding-support-link { justify-self: center; padding: 8px; color: var(--muted); font-size: 12px; text-decoration: none; }.onboarding-support-link:hover { color: var(--accent-strong); }
.onboarding-form { min-width: 0; display: grid; align-content: start; gap: 26px; padding: clamp(24px, 4vw, 48px) 0; background: transparent; }.onboarding-heading h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.08; }.onboarding-heading > p:not(.eyebrow) { max-width: 640px; margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.48; }.onboarding-fields { min-width: 0; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.company-profile-grid { align-items: start; }.company-profile-grid > .field { align-content: start; }.compact-field { font-size: 12px; }.compact-field input, .compact-field select { min-height: 44px; padding-inline: 12px; font-size: 14px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.choice { min-height: 136px; display: grid; align-content: start; gap: 8px; padding: 18px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; }.choice.is-selected { background: var(--accent-soft); }.choice input { position: absolute; opacity: 0; }.choice strong { font-size: 16px; font-weight: var(--font-weight-semibold); }.choice span { color: var(--muted); font-size: 13px; line-height: 1.45; }.choice-title { justify-content: space-between; }
.items-editor, .workflow-editor { display: grid; gap: 14px; }.item-card, .workflow-stage-card, .task-scenario-card { position: relative; margin: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--line); background: transparent; }.item-card legend, .workflow-stage-card legend, .task-scenario-card legend { padding: 0; color: var(--muted); font-size: 12px; font-weight: var(--font-weight-semibold); }.item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 12px; }.item-grid .compact-field:first-child { grid-column: span 2; }.item-remove { color: var(--accent-strong); }.item-remove .ph-icon { width: 12px; height: 12px; }.catalog-editor-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }.catalog-editor-row .field { gap: 0; }.catalog-editor-row .toggle-field { justify-content: center; min-height: 44px; }.catalog-editor-row .icon-button { width: 44px; height: 44px; }.object-editor-row { padding: 0; border-top: 1px solid var(--line); }.object-editor-row > summary { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }.object-editor-row > summary::-webkit-details-marker { display: none; }.object-editor-row > summary > span { color: var(--muted); font-size: 13px; }.object-editor-row .item-grid { padding-bottom: 12px; }.object-editor-row .item-remove { margin: 0 0 12px; }.toggle-list { display: grid; gap: 10px; margin-top: 18px; }.toggle-field { display: inline-flex; align-items: center; gap: 9px; color: var(--muted-strong); font-size: 13px; font-weight: var(--font-weight-medium); }
.onboarding-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }.onboarding-actions > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }.onboarding-actions .button-primary { min-width: 176px; }.item-grid-simple { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }.item-grid-simple .compact-field:first-child { grid-column: auto; }.object-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.object-grid .compact-field:first-child { grid-column: span 2; }
.team-editor { margin-top: 16px; }.team-member-card .entry-note { margin: 10px 0 0; }.workflow-editor > .entry-note { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); line-height: 1.45; }.workflow-stage-list, .task-scenario-list { display: grid; gap: 0; }.workflow-stage-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 10px; }.workflow-stage-card > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--surface-subtle); color: var(--muted); font-size: 11px; }.workflow-stage-card strong, .workflow-stage-card small { display: block; }.workflow-stage-card small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }.workflow-stage-grid, .task-scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 12px; }.workflow-order { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 13px; color: var(--muted); font-size: 12px; }.workflow-order .button { min-height: 34px; padding-inline: 11px; font-size: 12px; }.task-scenario-card .toggle-field { margin-top: 13px; }.rules-editor { display: grid; gap: 18px; }.rules-grid { align-items: end; }.rules-note { display: grid; gap: 4px; padding: 15px 0; border-top: 1px solid var(--line); color: var(--muted-strong); font-size: 13px; line-height: 1.45; }.rules-note strong { color: var(--ink); font-weight: var(--font-weight-semibold); }.settings-editor-shell { min-height: 100vh; min-height: 100dvh; padding: clamp(20px, 4vw, 48px); background: var(--canvas); }.settings-editor-shell .onboarding-body { max-width: 980px; margin: 0 auto; }.is-settings-editor { max-width: 820px; padding-top: 0; }

/* Team, notifications and billing honour the same no-nested-card rule. */
.team-management-panel { min-width: 0; display: grid; gap: 28px; }.team-management-panel > .page-head { padding: 0; }.team-members-grid, .settings-feature-grid { min-width: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }.team-members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.settings-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }.team-management-panel .team-member-card { display: grid; align-content: start; gap: 14px; border-top: 0; border-right: 1px solid var(--line); }.team-management-panel .team-member-card .card-head { margin-bottom: 0; }.team-member-status { max-width: 150px; text-align: center; }.team-member-access { border-top: 1px solid var(--line); }.team-member-access > summary { padding: 10px 0 0; color: var(--muted-strong); cursor: pointer; font-size: 13px; font-weight: var(--font-weight-semibold); }.team-member-access-controls { display: grid; gap: 10px; padding-top: 12px; }.team-member-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: end; gap: 9px; }.team-member-actions .field { min-width: min(100%, 180px); flex: 1 1 180px; }.team-member-actions .field select, .team-member-actions .button { min-height: 44px; }.team-delivery-note { margin: 0; }
.notifications-panel, .billing-card { display: grid; align-content: start; gap: 18px; }.notifications-panel .card-head, .billing-card .card-head { margin-bottom: 0; }.notifications-form { display: grid; gap: 15px; }.notifications-form fieldset { min-width: 0; display: grid; gap: 14px; margin: 0; padding: 0; border: 0; }.notifications-form legend { padding: 0; color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); }.notifications-panel .toggle-list { margin-top: 0; padding-top: 13px; border-top: 1px solid var(--line); }.notifications-panel .toggle-list:first-of-type { padding-top: 0; border-top: 0; }.notification-toggle { align-items: flex-start; min-width: 0; }.notification-toggle > span { min-width: 0; display: grid; gap: 3px; }.notification-toggle small { color: var(--muted); font-size: 12px; font-weight: var(--font-weight-regular); line-height: 1.4; }.notification-delivery-note { margin: 0; }
.workspace-help-modal { position: fixed; inset: 50% auto auto 50%; margin: 0; transform: translate(-50%, -50%); }.workspace-help-modal .modal-title-row { display: grid; gap: 3px; }.workspace-help-modal .eyebrow { margin: 0; }.workspace-help-steps { display: grid; gap: 9px; margin: 0; padding-left: 20px; color: var(--muted-strong); font-size: 13px; line-height: 1.45; }.workspace-help-modal::backdrop { background: rgba(255, 255, 255, .72); backdrop-filter: blur(6px); }
/* A native top-layer dialog keeps the previous workspace inert during a company handoff. */
.company-transition { width: min(calc(100% - 40px), 480px); max-width: min(calc(100% - 40px), 480px); display: grid; gap: 16px; margin: auto; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-overlay); }.company-transition:modal { display: grid; }.company-transition h2, .company-transition p { margin: 0; }.company-transition h2 { font-size: 24px; line-height: 1.2; }.company-transition p { color: var(--muted-strong); line-height: 1.45; }.company-transition .app-loading-progress { width: 100%; }.company-transition .button { justify-self: start; }.company-transition::backdrop { background: rgba(32, 35, 38, .24); backdrop-filter: blur(3px); }
.billing-card .insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.billing-card .insight { min-height: 84px; }.subscription-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.subscription-option { min-width: 0; display: grid; gap: 6px; padding: 16px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }.subscription-option.is-highlight { background: var(--accent-soft); }.subscription-option > span { color: var(--muted); font-size: 12px; font-weight: var(--font-weight-medium); }.subscription-option > strong { color: var(--ink); font-size: 20px; font-weight: var(--font-weight-semibold); letter-spacing: -.025em; }.subscription-option > small, .subscription-option > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }.billing-checkout, .billing-quote, .billing-refund-support { display: grid; gap: 14px; }.billing-details { border-top: 1px solid var(--line); }.billing-details > summary { min-height: 44px; display: flex; align-items: center; color: var(--muted-strong); cursor: pointer; font-size: 13px; font-weight: var(--font-weight-semibold); }.billing-planner-modal { width: min(100% - 32px, 520px); }.billing-planner-modal .billing-checkout-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.billing-refund-support .rules-note { padding-bottom: 0; }.billing-receipt-consent { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; cursor: pointer; }.billing-receipt-consent input { margin-top: 2px; }.billing-receipt-consent span { display: grid; gap: 4px; min-width: 0; }.billing-receipt-consent small { color: var(--muted); font-size: 12px; line-height: 1.4; }.preview-note, .rules-section-title { color: var(--muted); font-size: 13px; }
.team-capacity-modal { width: min(100% - 32px, 520px); }.team-capacity-quote, .team-capacity-checkout { display: grid; gap: 10px; }.team-capacity-controls { align-items: end; }
.prototype-toast { position: fixed; z-index: 30; right: 18px; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: min(360px, calc(100vw - 36px)); padding: 13px 16px; border-radius: var(--radius-md); background: var(--ink); color: #fff; box-shadow: var(--shadow-overlay); font-size: 13px; font-weight: var(--font-weight-semibold); }

/* Platform administration stays intentionally sparse: aggregate facts, one organization list, then detail. */
.platform-admin-page { width: 100%; max-width: 1240px; min-width: 0; gap: 28px; }
.platform-admin-page > .page-head { gap: 18px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.platform-admin-page > .page-head .button { min-height: 44px; flex: 0 0 auto; }
.platform-admin-page > .form-error, .platform-admin-page > .form-message, .platform-admin-page > .entry-note { margin: 0; }
.platform-admin-page > .entry-note { padding: 12px 0; border-bottom: 1px solid var(--line); }
.platform-admin-range { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.platform-admin-range .button { min-height: 36px; padding-inline: 12px; font-size: 12px; }
.platform-admin-range .button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: var(--accent-soft); color: var(--accent-strong); }
.platform-admin-metrics { min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 16px; }
.platform-admin-metric { min-width: 0; min-height: 116px; display: grid; align-content: space-between; gap: 14px; padding: 16px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); box-shadow: none; }
.platform-admin-metric > span { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.35; }
.platform-admin-metric > strong { overflow-wrap: anywhere; color: var(--ink); font-size: clamp(20px, 2vw, 27px); font-weight: var(--font-weight-semibold); letter-spacing: -.04em; line-height: 1.04; }
.platform-admin-workspace { min-width: 0; display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(24px, 4vw, 52px); }
.platform-admin-list, .platform-admin-detail { min-width: 0; }
.platform-admin-list { display: grid; align-content: start; gap: 16px; }
.platform-admin-list .card-head, .platform-admin-detail .card-head { margin-bottom: 0; }
.platform-admin-search { display: grid; gap: 7px; margin: 0; color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-semibold); }
.platform-admin-search input { width: 100%; min-width: 0; min-height: 44px; }
.platform-admin-organizations { min-width: 0; }
.platform-admin-organizations .platform-admin-organization { position: relative; min-width: 0; grid-template-columns: 38px minmax(0, 1fr) auto; cursor: pointer; transition: background-color .16s ease, padding-inline .16s ease; }
.platform-admin-organization > span { min-width: 0; display: grid; gap: 3px; }
.platform-admin-organization > span > small { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.35; }
.platform-admin-organization > .ph-icon { width: 18px; height: 18px; color: var(--muted); }
.platform-admin-organization:hover { padding-inline: 8px; background: var(--surface-subtle); }
.platform-admin-organization:focus-visible { z-index: 1; outline-offset: -3px; }
.platform-admin-organization.is-selected { padding-inline: 10px; background: var(--accent-soft); }
.platform-admin-organization.is-selected::before { position: absolute; top: 14px; bottom: 14px; left: 0; width: 3px; border-radius: 99px; background: var(--accent); content: ""; }
.platform-admin-organization.is-selected > .setting-icon, .platform-admin-organization.is-selected > .ph-icon { color: var(--accent-strong); }
.platform-admin-detail { display: grid; gap: 30px; }
.platform-admin-detail > .card { min-width: 0; }
.platform-admin-detail .platform-admin-metrics { margin-top: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.platform-admin-detail .platform-admin-metric { min-height: 96px; padding: 14px; }
.platform-admin-detail .platform-admin-metric > strong { font-size: clamp(18px, 1.7vw, 23px); }
.platform-admin-detail .settings-list { min-width: 0; }
.platform-admin-detail .setting-row { grid-template-columns: 38px minmax(0, 1fr); align-items: start; padding-block: 15px; }
.platform-admin-detail .setting-row > div { min-width: 0; display: grid; gap: 4px; }
.platform-admin-detail .setting-row span, .platform-admin-detail .setting-row small { overflow-wrap: anywhere; line-height: 1.4; }
.platform-admin-journal-card { display: grid; gap: 18px; }
.platform-admin-journal-filters { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 180px) auto; align-items: end; gap: 12px; }
.platform-admin-journal-filters .field { margin: 0; }
.platform-admin-journal-filters .button { min-height: 44px; }
.platform-admin-journal { min-width: 0; }
.platform-admin-journal-row { grid-template-columns: 38px minmax(0, 1fr); align-items: start; padding-block: 15px; }
.platform-admin-journal-row > div { min-width: 0; display: grid; gap: 4px; }
.platform-admin-journal-row span, .platform-admin-journal-row small { overflow-wrap: anywhere; line-height: 1.4; }
.platform-admin-journal-row[data-platform-admin-journal-severity="error"] .setting-icon { color: var(--accent-strong); }
.platform-admin-journal-row[data-platform-admin-journal-severity="warning"] .setting-icon { color: var(--muted-strong); }
.platform-admin-denied { min-height: 158px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-content: center; align-items: start; gap: 14px; }
.platform-admin-denied .setting-icon { width: 42px; height: 42px; color: var(--accent-strong); }
.platform-admin-denied .setting-icon .ph-icon { width: 22px; height: 22px; }
.platform-admin-denied h2 { margin: 1px 0 0; font-size: 20px; letter-spacing: -.025em; }
.platform-admin-denied p { max-width: 620px; margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* The Yandex readiness list is an intentional checklist, not browser-default bullets. */
.yandex-travel-integration-modal-content { min-width: 0; }
.yandex-travel-readiness { min-width: 0; display: grid; gap: 12px; }
.yandex-travel-readiness h4 { margin: 0; color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); }
.yandex-travel-readiness ul { min-width: 0; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.yandex-travel-readiness-item { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted-strong); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.yandex-travel-readiness-item .ph-icon { width: 18px; height: 18px; margin-top: 1px; }
.yandex-travel-readiness-item > span { min-width: 0; overflow-wrap: anywhere; }
.yandex-travel-readiness-item.is-done .ph-icon { color: var(--success); }
.yandex-travel-readiness-item.is-pending .ph-icon { color: var(--muted); }

/* Visual audit 046–063, 097–154, 167–201: compact settings and bounded feature dialogs. */
.settings-domain-content > .card, .settings-domain-content > .settings-feature-grid { min-width: 0; }
.settings-domain-content .card { box-shadow: none; }
.settings-list .setting-row { transition: background-color .15s ease, padding-inline .15s ease; }
.integration-modal-body, .billing-planner-body { min-height: 0; display: grid; align-content: start; gap: 16px; overflow: auto; overscroll-behavior: contain; padding-inline: 2px; }
.integration-modal .integration-dialog-content { padding-bottom: 2px; }
.integration-modal .integration-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.integration-modal .integration-actions .button { min-height: 42px; }
.integration-modal .modal-actions, .billing-planner-modal .modal-actions { margin-top: 0; }
.billing-planner-modal { min-height: 0; overflow: hidden; }
.automation-editor { min-height: 0; overflow: hidden; }
.automation-editor-body { min-height: 0; overflow: auto; overscroll-behavior: contain; align-content: start; padding-inline: 2px; }
.automation-editor > .modal-actions { margin-top: 0; }
.automation-panel { min-width: 0; }
.automation-panel .automation-page-head { gap: 16px; }
.automation-panel .automation-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.automation-panel .automation-tabs > button { flex: 1 1 148px; min-width: 0; }
.platform-admin-workspace > .card, .platform-admin-detail > .card { box-shadow: none; }
.platform-admin-journal-filters { padding-bottom: 4px; }
@media (max-width: 760px) {
  .settings-feature-grid, .team-members-grid { grid-template-columns: 1fr; }
  .integration-facts { grid-template-columns: 1fr; }
  .platform-admin-workspace, .platform-admin-journal-filters { grid-template-columns: 1fr; }
  .platform-admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-admin-detail .platform-admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* One focused integration task at a time. Provider forms remain the sole
   credential boundary; this layout never serializes their values. */
.integration-wizard { display: grid; gap: 16px; min-width: 0; }
.integration-wizard-progress { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: var(--font-weight-medium); }
.integration-wizard-progress progress { width: 100%; height: 6px; accent-color: var(--accent-strong); }
.integration-wizard-step { min-width: 0; }
.integration-wizard-actions { display: flex; justify-content: space-between; gap: 9px; padding-top: 4px; border-top: 1px solid var(--line); }
.integration-wizard-actions .button, .integration-wizard .button { min-height: var(--touch-control-height); }
.integration-wizard-unavailable { min-height: 0; }
.integration-wizard-step > h3 { margin: 0; font-size: 16px; }
.integration-wizard-step > p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; }


/* Source: styles/messages.css */
/* Messages is a bounded workspace, not a page of nested containers. The shell
 * owns the viewport; only the conversation list, message history and an open
 * modal are allowed to scroll. */
.app-shell.is-messages-route {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  overscroll-behavior: none;
}

.app-shell.is-messages-route .sidebar {
  min-height: 0;
  overflow: hidden;
}

.main-area.is-messages-route {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.main-area.is-messages-route .topbar { margin-bottom: 18px; }

.messages-page {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.messages-page-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
}

.messages-page-head .page-title { margin: 0; }
.messages-page-head .page-actions { justify-content: flex-end; }
.messages-page-actions { display: flex; align-items: center; gap: 6px; }
.messages-page-actions .icon-button { width: 42px; height: 42px; }
.messages-feedback { grid-column: 1 / -1; width: 100%; }

.messages-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(272px, .78fr) minmax(0, 1.45fr);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.messages-inbox {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.messages-inbox-head {
  min-height: 88px;
  display: grid;
  gap: 9px;
  padding: 13px 18px 11px;
  border-bottom: 1px solid var(--line);
}

.messages-inbox-head-primary { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.messages-inbox-head h2 { margin: 0; font-size: 16px; font-weight: var(--font-weight-semibold); letter-spacing: -.02em; }
.message-inbox-count { min-width: 20px; color: var(--accent-strong); font-size: 12px; font-weight: var(--font-weight-semibold); text-align: right; }
.messages-inbox-filters { display: inline-flex; align-items: center; gap: 4px; width: max-content; max-width: 100%; padding: 3px; border-radius: 999px; background: var(--surface-subtle); }
.message-inbox-filter { min-height: 28px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-strong); font-size: 11px; font-weight: var(--font-weight-medium); white-space: nowrap; }
.message-inbox-filter:hover, .message-inbox-filter:focus-visible { color: var(--ink); outline: 0; }
.message-inbox-filter.is-active { background: var(--surface); box-shadow: 0 1px 2px rgb(32 25 20 / .08); color: var(--ink); font-weight: var(--font-weight-semibold); }

.message-conversation-list {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.message-conversation {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 82px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.message-conversation:hover, .message-conversation:focus-visible, .message-conversation.is-active { background: var(--surface-subtle); outline: 0; }
.message-conversation.is-active { box-shadow: inset 2px 0 0 var(--accent-strong); }
.message-conversation.is-unread .message-conversation-preview, .message-conversation.is-unread strong { color: var(--ink); font-weight: var(--font-weight-semibold); }
.message-conversation time { align-self: start; padding-top: 3px; color: var(--muted); font-size: 11px; white-space: nowrap; }

.message-conversation-copy { min-width: 0; display: grid; gap: 3px; }
.message-conversation-title { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.message-conversation-title strong, .message-conversation-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-conversation-title strong { color: var(--ink); font-size: 14px; font-weight: var(--font-weight-medium); }
.message-conversation-flags { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.message-conversation-title i { min-width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--accent-strong); color: #fff; font-size: 10px; font-style: normal; font-weight: var(--font-weight-semibold); }
.message-conversation-title .message-conversation-important { width: auto; min-width: 0; padding: 0 6px; background: var(--accent-soft); color: var(--accent-strong); font-size: 9px; text-transform: uppercase; letter-spacing: .02em; }
.message-conversation-preview { color: var(--muted); font-size: 12px; }
.message-conversation-archive-metadata { color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.message-conversation-copy small { min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.message-conversation-copy small > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.message-list-state { min-height: 220px; display: grid; align-content: center; justify-items: start; gap: 7px; padding: 22px 18px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.messages-empty-workspace { min-height: min(560px, calc(100dvh - 190px)); display: grid; place-content: center; justify-items: center; gap: 10px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--muted); text-align: center; }
.messages-empty-workspace strong { color: var(--ink); font-size: 17px; font-weight: var(--font-weight-semibold); }
.messages-empty-workspace p { max-width: 360px; margin: 0; font-size: 13px; line-height: 1.5; }
.message-list-state strong { color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.message-inbox-empty-action { display: none; min-height: 42px; margin-top: 6px; }
.message-load-more { justify-self: center; min-height: 38px; margin: 12px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-semibold); }
.message-load-more:hover, .message-load-more:focus-visible { border-color: var(--accent); color: var(--ink); outline: 0; }

/* Loading keeps the messenger's final geometry in place. Only neutral,
 * non-interactive shapes move, so waiting never looks like a blank page. */
.message-loading-workspace { position: relative; }
.messages-inbox-loading { grid-template-rows: auto minmax(0, 1fr); }
.message-loading-filters { pointer-events: none; }
.message-loading-inbox-list { min-width: 0; min-height: 0; display: grid; align-content: start; overflow: hidden; }
.message-loading-inbox-row { min-width: 0; min-height: 82px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 30px; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.message-loading-inbox-copy { min-width: 0; display: grid; gap: 8px; }
.message-loading-shape, .message-loading-bubble { position: relative; overflow: hidden; border-radius: 999px; background: #f1f1f1; }
.message-loading-shape::after, .message-loading-bubble::after { position: absolute; inset: 0 auto 0 -60%; width: 58%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .78), transparent); content: ""; animation: message-loading-shimmer 1.35s ease-in-out infinite; }
.message-loading-shape.is-avatar { width: 38px; height: 38px; border-radius: 50%; }
.message-loading-shape.is-title { width: min(100%, 128px); height: 12px; }
.message-loading-shape.is-preview { width: min(100%, 184px); height: 10px; }
.message-loading-shape.is-meta { width: min(100%, 88px); height: 9px; }
.message-loading-shape.is-time { justify-self: end; width: 28px; height: 9px; }
.message-loading-shape.is-filter { width: 42px; height: 28px; }
.message-loading-shape.is-filter-short { width: 84px; }
.message-loading-inbox-row.is-compact .message-loading-shape.is-preview { width: min(100%, 132px); }
.message-thread-panel-loading { grid-template-rows: auto minmax(0, 1fr) auto; }
.message-thread-loading-head { grid-template-columns: auto minmax(0, 1fr); }
.message-loading-thread-contact { min-width: 0; display: grid; align-content: center; gap: 7px; }
.message-loading-thread-contact .message-loading-shape.is-title { width: min(100%, 142px); }
.message-thread-scroll-loading { display: grid; align-content: start; }
.message-thread-loading { min-height: 100%; display: grid; align-content: end; gap: 11px; }
.message-loading-bubble { width: min(72%, 306px); min-height: 48px; display: grid; align-content: center; gap: 7px; padding: 12px; border-radius: 16px 16px 16px 4px; }
.message-loading-bubble > span, .message-loading-bubble > i { position: relative; z-index: 1; display: block; height: 9px; border-radius: inherit; background: rgb(255 255 255 / .46); }
.message-loading-bubble > span { width: 100%; }
.message-loading-bubble > i { width: 58%; }
.message-loading-bubble.is-out { justify-self: end; background: #f4f0f1; border-radius: 16px 16px 4px 16px; }
.message-loading-bubble.is-medium { width: min(56%, 238px); }
.message-loading-bubble.is-short { width: min(41%, 176px); }
.message-loading-compose { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 8px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.message-loading-shape.is-compose { width: 100%; height: 44px; border-radius: 10px; }
.message-loading-shape.is-send { width: 42px; height: 42px; border-radius: var(--radius-sm); }
@keyframes message-loading-shimmer { to { transform: translateX(275%); } }
@media (prefers-reduced-motion: reduce) { .message-loading-shape::after, .message-loading-bubble::after { animation: none; transform: translateX(170%); } }

.message-thread-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--surface);
}

.message-thread-panel.has-refresh-error { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.message-thread-refresh-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--line); background: var(--accent-soft); color: #a12d49; font-size: 13px; }
.message-thread-refresh-error > span { min-width: 0; }
.message-thread-refresh-error .button { flex: 0 0 auto; }

/* When a selected mobile thread is hidden behind the inbox, keep refresh
 * recovery in the visible inbox flow. The thread keeps its own in-flow alert
 * whenever it is the active mobile surface or the desktop pane. */
.message-inbox-refresh-error.is-selected-thread-error { display: none; }

.message-thread-head {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.message-thread-idle-head { grid-template-columns: minmax(0, 1fr); }
.message-thread-contact { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); text-align: left; }
.message-thread-contact:hover, .message-thread-contact:focus-visible { background: var(--surface-subtle); outline: 0; }
.message-thread-avatar { width: 36px; height: 36px; }
.message-thread-person { min-width: 0; display: grid; gap: 3px; }
.message-thread-person strong { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.message-thread-person > span { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.message-thread-person > span > b { min-width: 0; overflow: hidden; color: inherit; font-size: inherit; font-weight: var(--font-weight-regular); text-overflow: ellipsis; white-space: nowrap; }
.message-thread-actions { display: flex; gap: 5px; }
.message-thread-actions .icon-button { width: 42px; height: 42px; }
.message-thread-menu { position: relative; }
.message-thread-menu > summary { list-style: none; cursor: pointer; }
.message-thread-menu > summary::-webkit-details-marker { display: none; }
.message-thread-menu > summary::marker { content: ""; }
.message-thread-menu[open] > summary { background: var(--surface-subtle); color: var(--ink); }
.message-thread-menu-popover { position: absolute; z-index: 8; top: calc(100% + 7px); right: 0; width: max-content; min-width: 216px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-overlay); }
.message-thread-menu-item { min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: var(--font-weight-medium); text-align: left; }
.message-thread-menu-item:hover, .message-thread-menu-item:focus-visible { background: var(--surface-subtle); outline: 0; }
.message-thread-menu-item.is-danger { color: var(--accent-strong); }
.message-thread-menu-separator { height: 1px; margin: 4px 2px; background: var(--line); }
.message-mobile-back { display: none; }

.message-thread-scroll {
  overflow-anchor: none;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 22px clamp(16px, 3vw, 32px);
  background: var(--surface);
}

.message-content-trash { width: min(100%, 560px); min-width: 0; overflow-wrap: anywhere; }
.message-content-trash > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.message-content-trash > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.message-content-trash .chat-message { margin-top: 10px; }
.message-content-trash .chat-message-bubble { display: grid; gap: 8px; }

.message-thread-scroll .messages-feedback { width: min(100%, 560px); margin: 0; }
.message-load-earlier { margin: 0 0 10px; }
.message-day-separator {
  position: sticky;
  z-index: 2;
  top: 6px;
  justify-self: center;
  max-width: 100%;
  margin: 2px 0;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(32 25 20 / .06);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
.message-day-separator time { white-space: nowrap; }

.message-thread-state { min-height: 210px; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; }
.message-thread-state.is-error { color: var(--accent-strong); }
.message-thread-state > div { max-width: 350px; display: grid; justify-items: center; gap: 10px; }
.message-thread-state p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.chat-message { max-width: min(82%, 560px); display: grid; justify-items: start; gap: 4px; }
.chat-message.is-own { justify-self: end; justify-items: end; }
.chat-message-bubble { min-width: 0; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--surface-subtle); color: var(--ink); font-size: 14px; line-height: 1.43; overflow-wrap: anywhere; }
.chat-message.is-own .chat-message-bubble { border-radius: 16px 16px 4px 16px; background: var(--accent-soft); color: #652036; }
.chat-message-bubble p { margin: 0; }
.chat-message-media { display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; }
.chat-message-attachments { display: grid; gap: 7px; }
.chat-message-image {
  position: relative;
  width: min(100%, 360px);
  /* One frame owns geometry in idle, loading, error and ready states. */
  aspect-ratio: 4 / 3;
  min-height: 152px;
  display: grid;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-subtle);
  color: var(--ink);
  text-align: left;
}

.chat-message-image > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  background: var(--surface-subtle);
}

.chat-message-image:hover, .chat-message-image:focus-visible { border-color: var(--accent); outline: 0; }
.chat-message-image:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-message-image-loading, .chat-message-image-error { place-items: center; }
.chat-message-image-loading { background: linear-gradient(135deg, var(--surface-subtle), var(--surface)); }
.chat-message-image-error { background: var(--surface); }
.chat-message-image-status {
  width: min(100%, 240px);
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 18px;
  text-align: center;
}

.message-inline-media-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--accent-strong);
}

.message-inline-media-icon .ph-icon { width: 17px; height: 17px; }
.message-inline-media-icon.is-spinning .ph-icon { animation: message-attachment-spin .9s linear infinite; }
.chat-message-image-status strong { color: var(--ink); font-size: 12px; font-weight: var(--font-weight-semibold); }
.chat-message-image-status small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-image-error .chat-message-image-status small { white-space: normal; }
.chat-message-image-retry { margin: -4px 0 16px; color: var(--accent-strong); font-size: 11px; font-weight: var(--font-weight-semibold); }
.chat-message-image-open {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity .16s ease;
}

.chat-message-image-open .ph-icon { width: 16px; height: 16px; }
.chat-message-image:hover .chat-message-image-open, .chat-message-image:focus-visible .chat-message-image-open { opacity: 1; }
@media (hover: none) { .chat-message-image-open { opacity: 1; } }
.chat-message-attachment { min-width: min(100%, 260px); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 3px 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; }
.chat-message-attachment:hover, .chat-message-attachment:focus-visible { border-color: var(--accent); background: var(--surface-subtle); outline: 0; }
.chat-message-attachment:disabled { cursor: progress; opacity: .66; }
.chat-message-attachment-kind { color: var(--accent-strong); font-size: 10px; font-weight: var(--font-weight-semibold); text-transform: uppercase; }
.chat-message-attachment-name { min-width: 0; overflow: hidden; font-size: 12px; font-weight: var(--font-weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.chat-message-attachment small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.chat-message time { color: var(--muted); font-size: 10px; }

.message-compose {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 12px 18px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.message-compose input[name="message"] { min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.message-compose.has-message-image-attach { grid-template-columns: auto minmax(0, 1fr) auto; }
/* The picker is activated only by the adjacent labelled button. Keeping the
 * native file input out of the rendered tree avoids a second browser-provided
 * attachment affordance on mobile WebKit. */
.message-compose-image-input { display: none; }
.message-compose .icon-button { width: 42px; height: 42px; }
.message-attach { color: var(--muted-strong); }
.message-attach:hover, .message-attach:focus-visible { color: var(--accent-strong); outline: 0; }
.message-attach:disabled { color: var(--muted); }
.message-send { color: var(--accent-strong); }
.message-send:disabled { color: var(--muted); }
.message-compose-note, .message-compose-image-note, .message-compose [data-form-draft-notice] { grid-column: 1 / -1; min-width: 0; width: 100%; margin: -1px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.message-compose-channel-action { grid-column: 1 / -1; justify-self: start; }
.message-uncertain-send-actions { grid-column: 1 / -1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.message-uncertain-send-actions .message-send { flex: 1 1 168px; min-height: 36px; }
.message-compose-image-note { color: var(--muted); }
.message-compose-image-draft { grid-column: 1 / -1; width: min(100%, 280px); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 9px; align-items: center; margin: 0; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); }
.message-compose-image-draft > img { display: block; width: 72px; height: 54px; border-radius: 8px; object-fit: cover; background: var(--surface); }
.message-compose-image-draft figcaption { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.message-compose-image-draft figcaption > span { min-width: 0; display: grid; gap: 2px; }
.message-compose-image-draft strong, .message-compose-image-draft small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-compose-image-draft strong { color: var(--ink); font-size: 12px; font-weight: var(--font-weight-semibold); }
.message-compose-image-draft small { color: var(--muted); font-size: 10px; }
.message-compose .message-compose-image-remove { flex: 0 0 auto; width: 42px; height: 42px; color: var(--muted-strong); }
.message-compose-image-remove:hover, .message-compose-image-remove:focus-visible { color: var(--accent-strong); outline: 0; }
.chat-message-edit { width: min(100%, 420px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 4px; }
.chat-message-edit input[name="message-edit-text"] { width: 100%; min-height: 42px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: none; }
.chat-message-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-message-edit-actions .button { min-height: 36px; }
.chat-message-edit-error { width: 100%; margin: 0; padding: 8px 10px; border: 1px solid var(--danger); border-radius: 8px; background: var(--danger-soft); }
.message-empty-icon { width: 46px; height: 46px; display: grid; place-items: center; color: var(--accent-strong); }
.message-empty-icon .ph-icon { width: 23px; height: 23px; }
.message-thread-empty-action { min-height: 42px; }

.message-contact-modal { display: grid; gap: 20px; }
.message-contact-head .modal-title-row { display: grid; gap: 3px; }
.message-contact-head .modal-title-row .eyebrow { margin: 0; }
.message-contact-tabs { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 260px); border-bottom: 1px solid var(--line); }
.message-contact-tab { min-height: 42px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: var(--font-weight-semibold); }
.message-contact-tab.is-active { border-bottom-color: var(--accent-strong); color: var(--ink); }
.message-contact-profile { display: grid; gap: 22px; }
.message-contact-identity { display: flex; align-items: center; gap: 12px; }
.message-contact-avatar { width: 54px; height: 54px; font-size: 15px; }
.message-contact-identity h3 { margin: 0 0 5px; color: var(--ink); font-size: 20px; font-weight: var(--font-weight-semibold); letter-spacing: -.02em; }
.message-contact-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.message-contact-facts div { min-width: 0; }
.message-contact-facts dt { color: var(--muted); font-size: 11px; }
.message-contact-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; font-weight: var(--font-weight-medium); }
.message-contact-dialog { min-height: 210px; display: grid; justify-items: center; align-content: center; gap: 13px; text-align: center; }
.message-contact-dialog > div { display: grid; gap: 5px; }
.message-contact-dialog strong { color: var(--ink); font-size: 16px; }
.message-contact-dialog p { max-width: 340px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.message-dialog-remove-modal { width: min(100%, 460px); display: grid; gap: 18px; }
.message-dialog-remove-modal > p { margin: 0; color: var(--muted-strong); font-size: 14px; line-height: 1.5; }
.button-danger { border-color: var(--accent-strong); background: var(--accent-strong); color: #fff; }
.button-danger:hover { border-color: var(--ink); background: var(--ink); }
.message-dialog-undo { position: fixed; z-index: 28; right: 18px; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: min(380px, calc(100vw - 36px)); display: flex; align-items: center; gap: 16px; padding: 11px 12px 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-overlay); }
.message-dialog-undo span { min-width: 0; display: grid; gap: 2px; }
.message-dialog-undo strong { color: var(--ink); font-size: 13px; font-weight: var(--font-weight-semibold); }
.message-dialog-undo small { color: var(--muted); font-size: 11px; }
.message-dialog-undo .button { flex: 0 0 auto; min-height: 34px; color: var(--accent-strong); }

/* Media is rendered from a temporary local Blob URL only after the protected
 * Messages gateway has verified a user-bound ticket. No provider address or
 * Storage address is ever put into this surface. */
.message-attachment-modal { width: min(100%, 760px); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; max-height: min(780px, calc(100dvh - 40px)); }
.message-attachment-body { min-width: 0; min-height: 0; display: grid; align-content: start; justify-items: center; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); padding-top: 18px; }
.message-attachment-image { display: block; width: auto; max-width: 100%; max-height: min(560px, calc(100dvh - 210px)); border-radius: var(--radius-md); object-fit: contain; background: var(--surface-subtle); }
.message-attachment-file, .message-attachment-loading { width: min(100%, 620px); display: grid; justify-items: center; gap: 10px; padding: 28px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); text-align: center; }
.message-attachment-file-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--accent-strong); }
.message-attachment-file-icon .ph-icon { width: 22px; height: 22px; }
.message-attachment-loading .message-attachment-file-icon .ph-icon { animation: message-attachment-spin .9s linear infinite; }
.message-attachment-file > strong { max-width: 100%; overflow-wrap: anywhere; color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.message-attachment-file > span, .message-attachment-loading > span { color: var(--muted); font-size: 12px; }
.message-attachment-document { width: 100%; min-height: min(44dvh, 360px); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.message-attachment-file > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.message-attachment-file .text-action { min-height: 40px; }
.message-attachment-preview-note { max-width: 380px; margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
@keyframes message-attachment-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .main-area.is-messages-route { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .main-area.is-messages-route .topbar { margin-bottom: 14px; }
  .messages-workspace { grid-template-columns: minmax(236px, .72fr) minmax(0, 1.28fr); }
  .messages-page-head .page-actions { width: auto; }
}

/* In short landscape the navigation moves to the top. Keeping the portrait
 * bottom-navigation reserve here consumed the whole conversation scroll area
 * and left message actions below the composer hit target. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .main-area.is-messages-route { padding-bottom: 8px; }
}

@media (max-width: 640px) {
  .main-area.is-messages-route { padding: 16px 0 calc(66px + env(safe-area-inset-bottom)); }
  .main-area.is-messages-route .topbar { margin: 0 16px 14px; }
  .messages-page { gap: 12px; }
  .messages-page-head { grid-template-columns: minmax(0, 1fr) auto; padding: 0 16px; }
  .messages-page-head .page-title { font-size: 27px; }
  .messages-page-head .page-actions { width: auto; gap: 5px; }
  .messages-page-actions .icon-button { width: 42px; height: 42px; }
  .messages-feedback { margin-inline: 0; }
  .messages-workspace { display: block; min-height: 0; border-bottom: 0; }
  .messages-inbox { height: 100%; border-right: 0; }
  .messages-page.is-mobile-thread {
    position: fixed;
    /* The thread ends above navigation, but its contact modal must still sit
       above that navigation when it opens. */
    z-index: 16;
    inset: 0 0 calc(66px + env(safe-area-inset-bottom)) 0;
    height: auto;
    min-height: 0;
    display: block;
    overflow: hidden;
    background: var(--surface);
  }
  .messages-page.is-mobile-thread > .messages-page-head { display: none; }
  .messages-page.is-mobile-thread .messages-workspace { height: 100%; min-height: 0; }
  .messages-workspace.is-mobile-thread .messages-inbox { display: none; }
  .messages-workspace:not(.is-mobile-thread) .message-thread-panel { display: none; }
  .messages-page:not(.is-mobile-thread) > .message-inbox-refresh-error.is-selected-thread-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border: 1px solid var(--line); background: var(--accent-soft); color: #a12d49; font-size: 13px; }
  .messages-page:not(.is-mobile-thread) > .message-inbox-refresh-error.is-selected-thread-error > span { min-width: 0; }
  .messages-page:not(.is-mobile-thread) > .message-inbox-refresh-error.is-selected-thread-error .button { flex: 0 0 auto; }
  .messages-workspace.is-mobile-thread .message-thread-panel { height: 100%; min-height: 0; border-top: 1px solid var(--line); }
  .message-inbox-empty-action { display: inline-flex; }
  .message-thread-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
  .message-mobile-back { display: inline-grid; width: 42px; height: 42px; }
  .message-thread-actions { gap: 2px; }
  .message-thread-actions .icon-button { width: 42px; height: 42px; }
  .message-thread-scroll { padding: 18px 14px; }
  .message-compose { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .message-compose .icon-button { width: 42px; height: 42px; }
  .chat-message-edit { width: 100%; }
  .message-attachment-image { max-height: min(58dvh, 520px); }
  .message-contact-facts { grid-template-columns: 1fr; gap: 12px; }
  .message-dialog-undo { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); left: 12px; max-width: none; }
}

/* Batch selection remains inside the inbox boundary: it never changes a
 * provider message, and the normal conversation button stays the opener. */
.message-dialog-select-start { min-height: 32px; justify-self: start; }
.message-dialog-selection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.message-dialog-selection-actions strong { margin-right: 2px; color: var(--ink); font-size: 12px; }
.message-dialog-selection-actions .button { min-height: 32px; padding-inline: 9px; font-size: 11px; }
.message-conversation-selectable { display: grid; grid-template-columns: 44px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.message-conversation-selectable .message-conversation { border-bottom: 0; }
.message-conversation-select { align-self: center; justify-self: center; font-weight: var(--font-weight-semibold); }
@media (max-width: 640px) { .message-dialog-selection-actions { gap: 5px; } .message-dialog-selection-actions .button { min-height: 34px; } }
.message-latest-button { align-self: center; justify-self: center; min-height: 44px; margin: 4px 12px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent-strong); font: inherit; cursor: pointer; }
.message-latest-button[hidden] { display: none; }
.message-latest-button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }


/* Source: styles/operations.css */
/* Operations combines one calm money-movement chart and its source journal,
   with thin dividers instead of a second Dashboard made of containers. */
.operations-page { gap: 20px; }
.operations-page .page-actions { justify-content: flex-end; }
.operations-page-toolbar { gap: 12px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.operations-toolbar-actions { align-items: center; }
.operations-page .range-control, .operations-page .operation-row-total > strong, .operations-cashflow-detail b { font-variant-numeric: tabular-nums; }
.operations-refresh-button { flex: 0 0 auto; }
.operations-add-actions { display: inline-flex; flex: 0 0 auto; gap: 0; }
.operations-add-actions .button { border-radius: 0; }
.operations-add-actions .button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.operations-add-actions .button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
@media (min-width: 1201px) {
  .operations-page .page-head > :first-child { min-width: 0; max-width: 620px; }
  .operations-page .page-actions { flex: 0 0 auto; flex-wrap: nowrap; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .operations-page .page-head { align-items: stretch; flex-direction: column; }
  .operations-page .page-actions { width: 100%; justify-content: flex-start; }
  .operations-page .page-actions .range-control { width: auto; }
}
.operations-permission-note { max-width: 640px; margin-top: 10px; }
.operations-stale-notice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 12px; padding: 13px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.operations-stale-notice strong { color: var(--ink); font-weight: var(--font-weight-semibold); }
.operations-stale-notice span { flex: 1 1 280px; }
.operations-stale-notice .text-action { color: var(--accent-strong); }

.operations-cashflow { display: grid; gap: 18px; padding: 4px 0 22px; border-bottom: 1px solid var(--line); }
.operations-cashflow-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.operations-section-eyebrow { margin: 0 0 6px; color: var(--muted); font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: .08em; text-transform: uppercase; }
.operations-cashflow-period { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.operations-cashflow h2 { margin: 0; color: var(--ink); font-size: 22px; font-weight: var(--font-weight-semibold); letter-spacing: -.025em; }
.operations-cashflow-modes { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.operations-cashflow-mode { min-height: 32px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-semibold); }
.operations-cashflow-mode.is-active { background: var(--surface-accent); color: var(--accent-strong); }
.operations-cashflow-note { margin: -7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.operations-cashflow-chart { width: 100%; height: 232px; display: block; overflow: visible; }
.operations-cashflow-grid { stroke: var(--line); stroke-width: 1; }
.operations-cashflow-axis { stroke: var(--line-strong); stroke-width: 1.4; }
.operations-cashflow-hit { fill: transparent; cursor: pointer; }
.operations-cashflow-bar { transition: opacity 160ms ease, transform 160ms ease; transform-origin: center; }
.operations-cashflow-bar-income { fill: var(--success); }
.operations-cashflow-bar-expense { fill: var(--accent); }
.operations-cashflow-point:not(.is-selected) .operations-cashflow-bar { opacity: .72; }
.operations-cashflow-point:hover .operations-cashflow-bar, .operations-cashflow-point:focus .operations-cashflow-bar, .operations-cashflow-point.is-selected .operations-cashflow-bar { opacity: 1; }
.operations-cashflow-point:focus { outline: none; }
.operations-cashflow-point:focus .operations-cashflow-hit { stroke: var(--ink); stroke-width: 1.5; }
.operations-cashflow-label { fill: var(--muted); font-size: 11px; }
.operations-cashflow-detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted-strong); font-size: 13px; line-height: 1.4; }
.operations-cashflow-detail strong { color: var(--ink); font-weight: var(--font-weight-semibold); }
.operations-cashflow-detail b { margin-left: 3px; color: var(--ink); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.operations-cashflow-empty { display: grid; gap: 5px; }
.operations-cashflow-empty .operations-cashflow-chart { opacity: .45; }
.operations-cashflow-empty p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }

.operations-history { display: grid; gap: 12px; }
.operations-history-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.operations-history-head h2 { margin: 0; color: var(--ink); font-size: 22px; font-weight: var(--font-weight-semibold); letter-spacing: -.025em; }
.operations-filters { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; }
.operations-filter { min-height: 32px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-semibold); }
.operations-filter.is-active { background: var(--surface-accent); color: var(--accent-strong); }
.operations-payer-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.operations-payer-filters > span { margin-right: 2px; }
.operations-payer-filter { min-height: 32px; display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-medium); }
.operations-payer-filter strong { color: var(--ink); font-weight: var(--font-weight-semibold); }
.operations-payer-filter small { color: var(--muted); font-size: 11px; }
.operations-payer-filter.is-active { border-color: #efbfcb; background: var(--accent-soft); color: var(--accent-strong); }
.operation-list { display: grid; border-top: 1px solid var(--line); }
.operation-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 74px; padding: 14px 0; border-bottom: 1px solid var(--line); scroll-margin-block: 16px 96px; }
.operation-row-planned { background: linear-gradient(90deg, var(--surface-subtle), transparent 46%); }
.operation-row-feedback { grid-column: 1 / -1; }
.operations-conflict-recovery { scroll-margin-block: 16px 96px; }
.operation-row-main { min-width: 0; display: grid; grid-template-columns: 4px minmax(0, 1fr); align-items: center; gap: 12px; }
.operation-row-tone { align-self: stretch; min-height: 36px; border-radius: 999px; background: var(--line-strong); }
.operation-row-income .operation-row-tone { background: var(--success); }
.operation-row-expense .operation-row-tone { background: var(--accent); }
.operation-row-main > div { min-width: 0; }
.operation-row-main strong { display: block; overflow-wrap: anywhere; color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.operation-row-main > div > span { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.35; }
.operation-row-total { display: grid; justify-items: end; gap: 5px; }
.operation-row-total > strong { font-size: 15px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.operation-row-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.operation-row-actions .text-action { min-height: 25px; }
.operation-row-action { color: var(--muted-strong); font-weight: var(--font-weight-medium); }
.operation-row-action:hover { color: var(--ink); }
.operation-source-note { max-width: 145px; color: var(--muted); font-size: 11px; line-height: 1.25; text-align: right; }

/* The body owns scrolling while the title and save controls remain visible.
   Conditional fields span the full width; no generic third column is allowed
   to escape the form rhythm. */
.operation-editor { width: min(100%, 680px); min-height: 0; overflow: hidden; }
.operation-editor, .operation-editor :not(.selection-field) { min-width: 0; }
.operation-editor-body { min-height: 0; display: grid; align-content: start; gap: 0; }
.operation-editor-retry-notice { margin: 0; padding: 12px 14px; border: 1px solid #f1c8d2; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--muted-strong); font-size: 13px; line-height: 1.42; }
.operation-editor-retry-lock { min-inline-size: 0; margin: 0; padding: 0; border: 0; opacity: .66; }
.operation-editor-section { display: grid; gap: 15px; padding: 20px 0; border-top: 1px solid var(--line); }
.operation-editor-section-head h3 { margin: 0; color: var(--ink); font-size: 16px; font-weight: var(--font-weight-semibold); letter-spacing: -.01em; }
.operation-editor-section-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.42; }
.operation-editor-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 16px; }
.operation-editor-grid .field { min-width: 0; }
.operation-editor-field-full, .operation-editor-inline-hint { grid-column: 1 / -1; min-width: 0; }
.operation-editor-inline-hint { margin: -5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.operation-editor-inline-hint:empty { display: none; }
.operation-service-field[hidden] { display: none; }
.operation-editor-section-allocation { gap: 13px; }
.operation-editor-section-payer { gap: 8px; }
.operation-allocation { min-width: 0; display: grid; gap: 13px; margin: 0; padding: 0; border: 0; }
.operation-allocation legend { padding: 0; color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); }
.operation-allocation-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.operation-selection-count { color: var(--muted-strong); font-size: 13px; font-weight: var(--font-weight-medium); }
.operation-allocation-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.operation-allocation-actions .text-action { min-height: 36px; }
.operation-object-checks { display: grid; border-top: 1px solid var(--line); }
.operation-object-choice { min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--muted-strong); font-size: 13px; font-weight: var(--font-weight-medium); line-height: 1.28; cursor: pointer; }
.operation-object-choice:has(input:checked) { color: var(--ink); }

.operation-object-choice span { min-width: 0; overflow-wrap: anywhere; }
.operation-object-choice span small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: var(--font-weight-regular); line-height: 1.35; }
.operation-object-choice-historical { color: #8a5b28; }
.operation-editor-optional { padding: 18px 0; border-top: 1px solid var(--line); }
.operation-editor-optional > summary { cursor: pointer; color: var(--muted-strong); font-size: 14px; font-weight: var(--font-weight-semibold); }
.operation-editor-optional > div { display: grid; gap: 18px; padding-top: 16px; }
.operation-editor-optional .operation-editor-section { padding: 0; border: 0; }
.operation-editor-actions { margin: 0; }
.operation-editor-section-receipt { gap: 11px; }
.operation-receipt-picker { position: relative; display: inline-flex; width: max-content; max-width: 100%; cursor: pointer; }
.operation-receipt-picker > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.operation-receipt-picker-face { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: var(--font-weight-semibold); box-shadow: 0 1px 2px rgb(34 34 34 / 4%); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; pointer-events: none; }
.operation-receipt-picker-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; background: transparent; color: var(--accent-strong); }
.operation-receipt-picker-icon .ph-icon { width: 17px; height: 17px; }
.operation-receipt-picker:hover .operation-receipt-picker-face { border-color: #e8adbf; background: #fffafb; box-shadow: 0 3px 9px rgb(34 34 34 / 6%); }
.operation-receipt-picker:focus-within .operation-receipt-picker-face { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(255 56 92 / 14%); }
.operation-receipt-picker:has(input:disabled) { cursor: progress; }
.operation-receipt-picker:has(input:disabled) .operation-receipt-picker-face { opacity: .58; }
.operation-receipt-caption { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.operation-receipt-draft-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.operation-receipt-draft-list li { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--muted-strong); font-size: 12px; }
.operation-receipt-draft-list .ph-icon { width: 16px; height: 16px; color: var(--accent-strong); }
.operation-receipt-draft-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-receipt-draft-list small { color: var(--muted); white-space: nowrap; }
.operation-receipt-remove { width: 28px; height: 28px; min-width: 28px; min-height: 28px; color: var(--muted); }
.operation-receipt-remove .ph-icon { width: 15px; height: 15px; color: currentColor; }
.operation-row-receipts { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; color: var(--muted-strong); font-size: 11px; }
.operation-row-receipt-list { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.operation-row-receipts .text-action { min-height: 26px; padding: 0; color: var(--muted-strong); font-size: 11px; font-weight: var(--font-weight-medium); }
.operation-row-receipts .ph-icon { width: 14px; height: 14px; color: var(--accent-strong); }
.finance-receipt-modal { width: min(100%, 760px); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; max-height: min(780px, calc(100dvh - 40px)); }
.finance-receipt-body { min-width: 0; min-height: 0; display: grid; align-content: start; justify-items: center; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); padding-top: 18px; }
.finance-receipt-image { display: block; width: auto; max-width: 100%; max-height: min(560px, calc(100dvh - 210px)); border-radius: var(--radius-md); object-fit: contain; background: var(--surface-subtle); }
.finance-receipt-file, .finance-receipt-loading { width: min(100%, 620px); display: grid; justify-items: center; gap: 10px; padding: 28px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); text-align: center; }
.finance-receipt-file-icon { width: 42px; height: 42px; display: grid; place-items: center; background: transparent; color: var(--accent-strong); }
.finance-receipt-file-icon .ph-icon { width: 22px; height: 22px; }
.finance-receipt-loading .finance-receipt-file-icon .ph-icon { animation: finance-receipt-spin .9s linear infinite; }
.finance-receipt-file > strong { max-width: 100%; overflow-wrap: anywhere; color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.finance-receipt-file > span, .finance-receipt-loading > span { color: var(--muted); font-size: 12px; }
.finance-receipt-file > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.finance-receipt-document { width: 100%; min-height: min(44dvh, 360px); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
@keyframes finance-receipt-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  .operations-add-actions { width: 100%; }
  .operations-toolbar-actions { align-items: stretch; }
  .operations-add-actions .button { flex: 1; }
  .operations-cashflow { gap: 16px; padding: 20px 0; }
  .operations-cashflow-head { align-items: flex-start; flex-direction: column; }
  .operations-cashflow-modes { width: 100%; }
  .operations-cashflow-mode { flex: 1; }
  .operations-cashflow-chart { height: 216px; }
  .operations-cashflow-label { font-size: 24px; }
  .operation-editor-section { gap: 14px; padding: 18px 0; }
  .operation-editor-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .operation-editor-field-full, .operation-editor-inline-hint { grid-column: auto; }
  .operation-object-checks { grid-template-columns: minmax(0, 1fr); }
  .operation-allocation-toolbar { align-items: flex-start; flex-direction: column; }
  .finance-receipt-image { max-height: min(58dvh, 520px); }
}


/* Source: styles/guests.css */
/* Guests is one calm workspace: cards and the calendar share the same
   typography and dividers instead of becoming separate boxed products. */
.guests-page { gap: 26px; }
.guest-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.guest-tab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}
.guest-tab .ph-icon { width: 17px; height: 17px; }
.guest-tab:hover { background: var(--surface-subtle); color: var(--ink); }
.guest-tab.is-active { background: var(--surface-accent); color: var(--accent-strong); font-weight: var(--font-weight-semibold); }

.guest-process, .guest-calendar { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.guest-process-search { display: grid; grid-template-columns: minmax(0, 420px) auto; justify-content: start; align-items: center; gap: 8px; }
.guest-process-search input { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.guest-process-search input::placeholder { color: var(--muted); }
.guest-process-search input:focus-visible { border-color: var(--accent-strong); outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }
.guest-stage-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; }
.guest-stage-shortcut { min-height: 34px; display: inline-flex; align-items: center; justify-content: space-between; gap: 7px; padding: 4px 6px 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted-strong); font: inherit; font-size: 12px; font-weight: var(--font-weight-semibold); text-align: left; }
.guest-stage-shortcut:hover, .guest-stage-shortcut:focus-visible { border-color: var(--line-strong); color: var(--ink); }
.section-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.section-intro h2 { margin: 0; color: var(--ink); font-size: 24px; font-weight: var(--font-weight-semibold); letter-spacing: -.028em; }
.section-intro p { max-width: 680px; margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.stage-count {
  min-width: 28px;
  height: 28px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

.guest-process-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.guest-process-filters [aria-pressed="true"] { color: var(--accent-strong); background: var(--accent-soft); }
.guest-process-complete-drop { display: none; position: sticky; left: calc(100% - 152px); top: 0; z-index: 8; width: 144px; height: 48px; margin-bottom: -48px; align-items: center; justify-content: center; border: 2px dashed var(--accent-strong); border-radius: var(--radius-sm); color: var(--accent-strong); background: var(--surface); }
.is-dragging-booking > .guest-process-complete-drop { display: flex; }
.guest-process-complete-drop.is-drop-target { border-style: solid; background: var(--accent-soft); }
.guest-process-rail {
  width: 100%;
  max-width: 100vw;
  inline-size: 100%;
  max-inline-size: 100%;
  min-width: 0;
  contain: inline-size paint;
  overflow-x: auto;
  overflow-y: clip;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y pinch-zoom;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}
.guest-process-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(264px, 304px);
  gap: 14px;
  width: max-content;
  min-width: 100%;
  padding: 2px 2px 12px;
}
.guest-stage {
  min-width: 0;
  min-height: 280px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  box-shadow: 0 1px 2px rgb(32 25 20 / .03);
}
/* Process is a manipulation surface, not a selectable document. In WebKit
   without Pointer Events, native long-press selection otherwise climbs from a
   card to the complete stage before our Touch Events fallback can begin drag. */
.guest-process-board, .guest-stage,
.guest-card[data-guest-draggable-booking], .guest-card[data-guest-draggable-lead] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.guest-card[data-guest-draggable-booking] input,
.guest-card[data-guest-draggable-booking] textarea,
.guest-card[data-guest-draggable-lead] input,
.guest-card[data-guest-draggable-lead] textarea {
  -webkit-user-select: text;
  user-select: text;
}
.guest-stage:nth-child(2n) { border-top-color: #f3c5cf; }
.stage-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stage-header-copy { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; }
.guest-stage-illustration { width: 44px; height: 44px; object-fit: contain; object-position: center; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.stage-header-copy > div { min-width: 0; display: grid; gap: 3px; }
.stage-header-actions { min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.stage-automation-link { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.stage-automation-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.stage-automation-link .ph-icon { width: 14px; height: 14px; }
.stage-header strong { color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.stage-header small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.guest-stage-empty { margin: 0; padding: 14px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.stage-header { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; }
.stage-header > div:first-child { min-width: 0; }
.stage-header > div:first-child strong, .stage-header > div:first-child small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-header-actions { min-width: 0; }
.stage-flow-arrow { width: 16px; height: 28px; display: inline-grid; flex: 0 0 16px; place-items: center; color: var(--muted); }
.stage-flow-arrow .ph-icon { width: 14px; height: 14px; }
.stage-header-menu { position: relative; }
.stage-header-menu > summary { width: var(--touch-control-height); height: var(--touch-control-height); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; list-style: none; cursor: pointer; color: var(--muted-strong); }
.stage-header-menu > summary::-webkit-details-marker { display: none; }
.stage-header-menu > div { position: absolute; z-index: 3; top: calc(100% + 5px); right: 0; width: max-content; max-width: min(240px, 75vw); padding: 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-overlay); }
.stage-automation-link { min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; white-space: nowrap; }
.stage-automation-link:hover, .stage-header-menu > summary:hover, .stage-header-menu[open] > summary { background: var(--surface-subtle); }
.stage-automation-link:focus-visible, .stage-header-menu > summary:focus-visible { background: var(--surface-subtle); outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.guest-process-diagnostic { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); color: var(--muted-strong); font-size: 12px; line-height: 1.4; }
.guest-process-diagnostic .text-action { flex: 0 0 auto; min-height: 28px; padding: 0; }

.guest-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(32 25 20 / .025);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.guest-stage .guest-card:first-of-type { margin-top: 0; }
.guest-card:hover .guest-card-open, .guest-card:hover .guest-card-lead-identity { color: var(--accent-strong); }
.guest-card-top { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 9px; }
.guest-card-identity, .guest-card-lead-identity { min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.guest-card-lead-identity { padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.guest-card-avatar { width: 38px; height: 38px; flex: 0 0 38px; font-size: 12px; }
.guest-card-heading { min-width: 0; display: grid; gap: 3px; }
.guest-card-heading small { min-width: 0; display: inline-flex; align-items: center; gap: 5px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.guest-card-heading small .ph-icon { width: 13px; height: 13px; flex: 0 0 auto; }
.guest-card-open { min-width: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.guest-card-tools { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.guest-card-channel { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; min-height: 28px; }
.guest-card-source { display: inline-flex; min-width: 0; color: var(--muted); font-size: 11px; font-weight: var(--font-weight-medium); white-space: nowrap; }
.guest-card-source .channel-provider-mark { max-width: 112px; }
.guest-card-unread { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--accent-strong); color: #fff; font-size: 10px; font-weight: var(--font-weight-semibold); line-height: 1; }
.guest-card-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.guest-card-meta span + span::before { margin-right: 8px; color: var(--line-strong); content: "·"; }
.guest-card-message { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted-strong); font-size: 12px; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.guest-card-message span { color: var(--ink); font-weight: var(--font-weight-medium); }
.guest-card-locked { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.guest-card-locked .ph-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.guest-card-move { margin-top: 1px; padding-top: 9px; border-top: 1px solid var(--line); }
.guest-card-move > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-semibold); cursor: pointer; list-style: none; }
.guest-card-move > summary::-webkit-details-marker { display: none; }
.guest-card-move > summary .ph-icon { width: 15px; height: 15px; }
.guest-card-move > form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding-top: 9px; }
.guest-card-move select { min-width: 0; min-height: 38px; padding-inline: 9px; font-size: 12px; }
.guest-card-move .button { min-height: 38px; padding-inline: 10px; font-size: 12px; }
.guest-card-lead { border-top-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.guest-card-lead-source { display: inline-flex; align-items: center; gap: 5px; width: fit-content; color: var(--accent-strong); font-size: 10px; font-weight: var(--font-weight-semibold); }
.guest-card-lead-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guest-card-lead-actions .text-action { min-height: 28px; padding: 0; color: var(--muted-strong); font-size: 11px; }
.guest-card[data-guest-draggable-booking], .guest-card[data-guest-draggable-lead] { cursor: grab; touch-action: pan-y pinch-zoom; }
.guest-card.is-dragging { opacity: .58; cursor: grabbing; box-shadow: 0 10px 24px rgb(32 25 20 / .14); }
.guest-card-drag-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: grid;
  margin: 0;
  box-sizing: border-box;
  pointer-events: none;
  opacity: .94;
  cursor: grabbing;
  box-shadow: 0 18px 38px rgb(32 25 20 / .2);
  transform-origin: top left;
  will-change: transform;
}
.guest-stage.is-drop-target { border-color: var(--accent-strong); border-top-color: var(--accent-strong); background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface-subtle)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-soft) 76%, transparent); }

.guest-calendar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guest-timeline-controls { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.guest-timeline-today { min-height: 38px; white-space: nowrap; }
.guest-timeline-nav { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.guest-timeline-nav strong { min-width: 168px; color: var(--ink); font-size: 16px; font-weight: var(--font-weight-semibold); letter-spacing: -.015em; text-align: center; }
.guest-timeline-nav .icon-button { width: var(--touch-control-height); height: var(--touch-control-height); flex: 0 0 auto; }

/* One scroll rail only: dates move horizontally together, while the page
   itself remains responsible for vertical movement between properties. */
.guest-timeline-scroller { min-width: 0; overflow-x: auto; overflow-y: clip; overscroll-behavior-x: contain; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.guest-timeline-board { --timeline-rail: 208px; --timeline-day-width: 64px; width: max-content; min-width: 100%; background: var(--surface); }
.guest-timeline-header, .guest-timeline-row { display: grid; grid-template-columns: var(--timeline-rail) repeat(var(--timeline-day-count), var(--timeline-day-width)); min-width: max-content; }
.guest-timeline-header { position: sticky; top: 0; z-index: 7; border-bottom: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.guest-timeline-corner, .guest-timeline-property { position: sticky; left: 0; z-index: 5; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.guest-timeline-corner { min-height: 56px; display: flex; align-items: center; padding: 0 15px; border-right: 1px solid var(--line); color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-semibold); }
.guest-timeline-day { min-height: 56px; display: grid; place-content: center; gap: 2px; border-right: 1px solid var(--line); color: var(--muted); text-align: center; }
.guest-timeline-day span { font-size: 10px; font-weight: var(--font-weight-medium); }
.guest-timeline-day strong { color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.guest-timeline-day.is-weekend { background: #fcfaf8; }
.guest-timeline-day.is-today { position: relative; color: var(--accent-strong); background: var(--accent-soft); }
.guest-timeline-day.is-today::after { position: absolute; right: 15px; bottom: 0; left: 15px; height: 2px; border-radius: 999px; background: var(--accent-strong); content: ""; }
.guest-timeline-day.is-today strong { color: var(--accent-strong); }
.guest-timeline-row { --timeline-lane-height: 58px; min-height: calc(var(--timeline-lane-count) * var(--timeline-lane-height)); border-bottom: 1px solid var(--line); }
.guest-timeline-property { min-width: 0; display: grid; align-content: center; gap: 4px; padding: 10px 15px; border-right: 1px solid var(--line); }
.guest-timeline-property strong { color: var(--ink); font-size: 13px; font-weight: var(--font-weight-semibold); line-height: 1.3; overflow-wrap: anywhere; }
.guest-timeline-conflict { display: inline-flex; align-items: center; gap: 4px; color: #9b4e32; font-size: 10px; font-weight: var(--font-weight-semibold); }
.guest-timeline-conflict .ph-icon { width: 13px; height: 13px; }
.guest-timeline-track { position: relative; grid-column: 2 / -1; display: grid; grid-template-columns: repeat(var(--timeline-day-count), var(--timeline-day-width)); grid-template-rows: repeat(var(--timeline-lane-count), var(--timeline-lane-height)); min-width: 0; min-height: calc(var(--timeline-lane-count) * var(--timeline-lane-height)); background-color: var(--surface); background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), repeating-linear-gradient(to bottom, transparent 0 calc(var(--timeline-lane-height) - 1px), var(--line) calc(var(--timeline-lane-height) - 1px) var(--timeline-lane-height)); background-size: var(--timeline-day-width) 100%, 100% var(--timeline-lane-height); }
.guest-timeline-slot { z-index: 1; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.guest-timeline-slot:hover { background: color-mix(in srgb, var(--accent-soft) 54%, transparent); }
.guest-timeline-slot:focus-visible { position: relative; z-index: 4; outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.guest-timeline-closure, .guest-timeline-booking { min-width: 0; overflow: hidden; border: 0; text-align: left; }
.guest-timeline-closure { z-index: 2; align-self: stretch; display: flex; align-items: center; margin: 6px 3px; padding: 0 8px; border-radius: 5px; background: repeating-linear-gradient(135deg, #f0efec 0 5px, #e9e7e3 5px 10px); color: #655f57; font: inherit; font-size: 11px; font-weight: var(--font-weight-semibold); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
button.guest-timeline-closure { cursor: pointer; }
button.guest-timeline-closure:hover, button.guest-timeline-closure:focus-visible { outline: 2px solid #797167; outline-offset: -1px; filter: brightness(.98); }
.guest-timeline-booking { z-index: 3; display: grid; align-content: center; gap: 2px; min-height: 38px; margin: 5px var(--timeline-booking-inset-end, 3px) 5px var(--timeline-booking-inset-start, 3px); padding: 5px 8px; border-radius: 6px; color: #3b2a2d; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(34, 34, 34, .06); }
.guest-timeline-booking:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(34, 34, 34, .11); }
.guest-timeline-booking:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.guest-timeline-booking-title { min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; color: inherit; font-size: 12px; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.guest-timeline-booking-title .ph-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.guest-timeline-booking-stage { overflow: hidden; color: inherit; font-size: 10px; font-weight: var(--font-weight-medium); opacity: .75; text-overflow: ellipsis; white-space: nowrap; }
.guest-timeline-booking.tone-stone { background: #f2f1ef; color: #4f4a44; }
.guest-timeline-booking.tone-sky { background: #f8edf1; color: #7d4d62; }
.guest-timeline-booking.tone-gold { background: #fff6df; color: #8b651d; }
.guest-timeline-booking.tone-coral { background: #ffe9ee; color: #a22f4a; }
.guest-timeline-booking.tone-sage { background: #e8f5ef; color: #326e58; }
.guest-timeline-booking.tone-plum { background: #f1ebf1; color: #654d63; }
.guest-timeline-booking.tone-peach { background: #fff0e9; color: #8b563e; }
.guest-timeline-booking.has-conflict { box-shadow: inset 0 0 0 2px #c98155; }
.guest-availability-editor { padding-top: 17px; border-top: 1px solid var(--line); }
.guest-availability-editor summary { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); cursor: pointer; }
.guest-availability-form { display: grid; grid-template-columns: 1.3fr .9fr 1.2fr auto; gap: 10px; align-items: end; margin-top: 14px; }
.guest-availability-form .button { min-height: 50px; }

.guest-detail-modal, .guest-editor-modal { display: grid; gap: 18px; }
.guest-editor-modal { min-height: 0; overflow: hidden; }
.guest-detail-modal .modal-title-row, .guest-editor-modal .modal-title-row { display: grid; align-items: start; gap: 4px; }
.guest-detail-modal .modal-title-row .eyebrow, .guest-editor-modal .modal-title-row .eyebrow { margin-bottom: 0; }
.guest-detail-tab-panel:not([hidden]) { display: grid; gap: 18px; min-width: 0; min-height: 0; }
.guest-detail-modal {
  width: min(100%, 760px);
  height: min(760px, calc(100dvh - 40px));
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
.guest-detail-modal:not(.is-messages-tab) .guest-detail-tab-panel:not([hidden]) { overflow-y: auto; overscroll-behavior: contain; align-content: start; }
.guest-detail-message-thread { min-height: 0; overflow: hidden; }
.guest-detail-message-thread .message-thread-panel { height: 100%; min-height: 0; }
.guest-detail-message-thread .message-thread-head { min-height: 62px; }
.guest-detail-message-thread .message-thread-scroll { min-height: 0; }
.guest-detail-message-empty, .guest-detail-message-link { display: grid; gap: 18px; }
.guest-detail-message-empty { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 10px 0 2px; }
.guest-detail-message-empty > div { display: grid; gap: 5px; }
.guest-detail-message-empty strong { color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.guest-detail-message-empty p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.guest-detail-message-identity { display: flex; align-items: center; gap: 11px; }
.guest-detail-message-avatar { width: 46px; height: 46px; flex: 0 0 46px; font-size: 13px; }
.guest-detail-message-identity > div { min-width: 0; display: grid; gap: 4px; }
.guest-detail-message-identity strong { overflow: hidden; color: var(--ink); font-size: 16px; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.guest-detail-message-preview { margin: 0; padding: 12px 13px; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.guest-detail-message-preview strong { color: var(--ink); font-weight: var(--font-weight-semibold); }
.guest-detail-message-link > .button { justify-self: start; }
.guest-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.guest-detail-summary { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); }
.guest-detail-summary-identity { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.guest-detail-summary-avatar { width: 48px; height: 48px; flex: 0 0 48px; font-size: 14px; }
.guest-detail-summary-identity > div:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.guest-detail-summary-identity strong { overflow: hidden; color: var(--ink); font-size: 17px; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.guest-detail-summary-identity span { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.guest-detail-summary-identity span small { min-width: 0; overflow: hidden; color: var(--muted); font: inherit; text-overflow: ellipsis; white-space: nowrap; }
.guest-detail-contact-actions { display: inline-flex; align-items: center; gap: 6px; }
.guest-detail-contact-actions .icon-button { width: var(--touch-control-height); height: var(--touch-control-height); }
.guest-detail-finance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.guest-detail-finance > div { min-width: 0; display: grid; gap: 4px; padding: 10px; border-radius: var(--radius-sm); background: var(--surface); }
.guest-detail-finance span, .guest-detail-summary-grid dt { color: var(--muted); font-size: 11px; font-weight: var(--font-weight-medium); }
.guest-detail-finance strong { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.guest-detail-finance .is-due strong { color: var(--accent-strong); }
.guest-detail-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin: 0; border-top: 1px solid var(--line); }
.guest-detail-summary-grid > div { min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.guest-detail-summary-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; line-height: 1.35; }
.guest-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.guest-detail-tags span { padding: 4px 8px; border-radius: 999px; background: var(--surface); color: var(--muted-strong); font-size: 11px; font-weight: var(--font-weight-medium); }
.guest-detail-lead-summary { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.guest-detail-lead-note, .guest-detail-lead-next p { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.5; }
.guest-detail-lead-next { display: grid; gap: 5px; padding: 2px 0; }
.guest-detail-lead-next h3 { margin: 0; color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.guest-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; border-top: 1px solid var(--line); }
.guest-detail-facts > div { min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.guest-detail-facts dt { color: var(--muted); font-size: 11px; font-weight: var(--font-weight-medium); }
.guest-detail-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--ink); font-size: 14px; line-height: 1.4; }
.guest-detail-tasks { padding-top: 2px; }
.guest-detail-task-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.guest-detail-task-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.guest-detail-task-list li { min-height: 44px; padding: 0; }
.guest-detail-task-link { width: 100%; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--ink); text-align: left; }
.guest-detail-task-link:hover, .guest-detail-task-link:focus-visible { background: var(--surface-subtle); outline: 0; }
.guest-editor-core { display: grid; gap: 14px; }
.guest-editor-contacts, .guest-editor-dates, .guest-editor-booking-meta, .guest-editor-notes-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guest-editor-dates { grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr); }
.guest-editor-notes { border-top: 1px solid var(--line); padding-top: 12px; }
.guest-editor-notes > summary { color: var(--muted-strong); cursor: pointer; font-size: 13px; font-weight: var(--font-weight-semibold); }
.guest-editor-notes-fields { margin-top: 12px; }
.guest-service-time-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guest-service-time-fields[hidden] { display: none; }
.guest-timeline-property strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }
.guest-timeline-booking { min-height: 32px; }
.guest-timeline-booking-title, .guest-timeline-booking-stage { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest-timeline-booking-title { display: block; }
.guest-timeline-booking-stage { display: block; font-size: 10px; opacity: .82; }
.guest-detail-task-link > span:first-child { min-width: 0; display: grid; gap: 3px; padding-block: 10px; }
.guest-detail-task-list strong { color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); }
.guest-detail-task-list small, .guest-detail-task-list span { color: var(--muted); font-size: 12px; }
.guest-services { display: grid; gap: 12px; padding-top: 3px; }
.guest-services .card-head { align-items: flex-start; }
.guest-services .card-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.guest-service-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.guest-service-list > li { min-width: 0; border-bottom: 1px solid var(--line); }
.guest-service-editor, .guest-service-add, .guest-cancellation { min-width: 0; }
.guest-service-editor > summary, .guest-service-add > summary, .guest-cancellation > summary {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.guest-service-editor > summary::-webkit-details-marker, .guest-service-add > summary::-webkit-details-marker, .guest-cancellation > summary::-webkit-details-marker { display: none; }
.guest-service-editor > summary > span, .guest-service-readonly > span { min-width: 0; flex: 1; display: grid; gap: 3px; }
.guest-service-editor > summary strong, .guest-service-readonly strong { font-size: 14px; font-weight: var(--font-weight-semibold); }
.guest-service-editor > summary > span strong, .guest-service-readonly > span strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest-service-editor > summary > strong, .guest-service-readonly > strong { flex: 0 0 auto; white-space: nowrap; }
.guest-service-editor > summary small, .guest-service-readonly small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.guest-service-readonly { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.guest-service-form { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 2px 0 12px; }
.guest-service-form .guest-service-notes, .guest-service-form .guest-service-correction-reason, .guest-service-form > .form-draft-notice { grid-column: 1 / -1; }
.guest-service-correction-reason textarea { width: 100%; min-height: 84px; resize: vertical; }
.guest-service-form .button { grid-column: 1 / -1; justify-self: start; min-height: 40px; }
.guest-service-actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 10px; }
.guest-service-add { padding-top: 1px; border-top: 1px solid var(--line); }
.guest-service-add > summary { justify-content: flex-start; color: var(--accent-strong); font-size: 13px; font-weight: var(--font-weight-semibold); }
.guest-service-add > summary .ph-icon, .guest-cancellation > summary .ph-icon { width: 16px; height: 16px; }
.guest-service-remove { margin: 0; padding-bottom: 12px; }
.guest-service-remove-action { color: var(--muted-strong); }
.guest-service-remove-action:hover, .guest-service-remove-action:focus-visible { color: var(--ink); }
.field-hint { color: var(--muted); font-size: 11px; font-weight: var(--font-weight-regular); }
.guest-cancellation { padding-top: 16px; border-top: 1px solid var(--line); }
.guest-cancellation > summary { justify-content: flex-start; color: var(--muted-strong); font-size: 13px; font-weight: var(--font-weight-semibold); }
.guest-cancellation form { display: grid; gap: 10px; padding-bottom: 2px; }
.guest-cancellation form p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.guest-cancellation-button { justify-self: start; color: var(--muted-strong); }
.guest-cancellation-status { display: inline-flex; align-items: flex-start; gap: 7px; margin: 0; padding-top: 4px; color: var(--muted-strong); font-size: 12px; line-height: 1.45; }
.guest-cancellation-status .ph-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.guest-payments { display: grid; gap: 13px; padding-top: 3px; }
.guest-payments .card-head { align-items: flex-start; }
.guest-payments .card-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.guest-payment-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guest-payment-summary > div { display: grid; gap: 3px; }
.guest-payment-summary span { color: var(--muted); font-size: 11px; }
.guest-payment-summary strong { color: var(--ink); font-size: 16px; font-weight: var(--font-weight-semibold); }
.guest-payment-progress { grid-column: 1 / -1; width: 100%; height: 5px; overflow: hidden; border: 0; border-radius: 999px; background: var(--surface-subtle); color: var(--accent); }
.guest-payment-progress::-webkit-progress-bar { background: var(--surface-subtle); }
.guest-payment-progress::-webkit-progress-value { background: var(--accent); }
.guest-payment-progress::-moz-progress-bar { background: var(--accent); }
.guest-payment-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.guest-payment-list li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.guest-payment-list li > div { min-width: 0; display: grid; gap: 3px; }
.guest-payment-list strong { color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); }
.guest-payment-list small, .guest-payment-list span { color: var(--muted); font-size: 12px; }
.guest-payment-list > li > span { align-self: start; padding-top: 2px; color: var(--muted-strong); text-align: right; }
.guest-payment-editor, .guest-payment-history { grid-column: 1 / -1; min-width: 0; }
.guest-payment-editor > summary, .guest-payment-history > summary { color: var(--accent-strong); cursor: pointer; font-size: 12px; font-weight: var(--font-weight-semibold); list-style: none; }
.guest-payment-editor > summary::-webkit-details-marker, .guest-payment-history > summary::-webkit-details-marker { display: none; }
.guest-payment-mutation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 9px; }
.guest-payment-mutation .entry-note { grid-column: 1 / -1; margin: 0; }
.guest-payment-mutation .button, .guest-payment-mutation .text-action { grid-column: 1 / -1; justify-self: start; }
.guest-payment-history { margin: 0; }
.guest-payment-history > ul { display: grid; gap: 8px; margin: 9px 0 0; padding: 0; list-style: none; }
.guest-payment-history li { display: grid; grid-template-columns: none; gap: 3px; padding: 8px 0 0; border: 0; border-top: 1px solid var(--line); }
.guest-payment-history li p { margin: 1px 0 0; color: var(--muted-strong); font-size: 12px; line-height: 1.45; }
.guest-payment-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.guest-payment-form .guest-payment-note { grid-column: 1 / -1; }
.guest-payment-form .button { grid-column: 1 / -1; justify-self: start; min-height: var(--touch-control-height); }

.guest-message-lead-trash { display: grid; gap: 12px; margin-top: 4px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.guest-message-lead-trash > summary { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; color: var(--muted-strong); cursor: pointer; list-style: none; font-size: 13px; font-weight: var(--font-weight-semibold); }
.guest-message-lead-trash > summary::-webkit-details-marker { display: none; }
.guest-message-lead-trash > summary .ph-icon { width: 17px; height: 17px; }
.guest-message-lead-trash > summary b { min-width: 19px; height: 19px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: 10px; }
.guest-message-lead-trash > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.guest-message-lead-trash-actions { display: flex; justify-content: flex-start; margin-top: -3px; }
.guest-message-lead-trash-actions .text-action { color: var(--muted-strong); }
.guest-message-lead-trash > ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.guest-message-lead-trash li { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.guest-message-lead-trash li > div { min-width: 0; display: grid; gap: 3px; }
.guest-message-lead-trash strong, .guest-message-lead-trash small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest-message-lead-trash strong { color: var(--ink); font-size: 13px; font-weight: var(--font-weight-semibold); }
.guest-message-lead-trash small { color: var(--muted); font-size: 11px; }
.guest-message-lead-trash-status { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.guest-message-lead-trash.is-unavailable { border-color: var(--warning-line, var(--line)); }
.guest-message-lead-trash-diagnostic { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; color: var(--muted-strong); font-size: 12px; line-height: 1.45; }
.guest-message-lead-trash-diagnostic > span { min-width: 0; }
.guest-message-lead-trash-diagnostic .text-action { flex: 0 0 auto; }
.guest-message-lead-remove-modal { width: min(100%, 420px); display: grid; gap: 18px; }
.guest-message-lead-remove-modal > p, .guest-message-lead-remove-modal > .modal-body > p { margin: 0; color: var(--muted-strong); font-size: 14px; line-height: 1.5; }
.guest-message-lead-removal-error { margin: -5px 0 0; color: var(--danger, #b42318); font-size: 13px; line-height: 1.45; }
.guest-message-lead-remove-modal > footer, .guest-message-lead-remove-modal > .modal-actions { display: flex; justify-content: flex-end; gap: 9px; }
.guest-message-lead-undo { position: fixed; z-index: 90; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); width: min(calc(100vw - 28px), 430px); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px 11px 14px; transform: translateX(-50%); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 14px 32px rgba(31, 25, 23, .16); }
.guest-message-lead-undo > span { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; align-items: center; }
.guest-message-lead-undo .ph-icon { grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--accent-strong); }
.guest-message-lead-undo b { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.guest-message-lead-undo small { color: var(--muted); font-size: 11px; }
.guest-message-lead-undo .button { flex: 0 0 auto; min-height: 36px; }

@media (max-width: 1180px) {
  .guest-timeline-board { --timeline-rail: 174px; --timeline-day-width: 58px; }
}

@media (max-width: 900px) {
  .guest-availability-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest-availability-form .button { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .guests-page { gap: 20px; }
  .guest-stage-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest-tabs { margin-inline: -4px; padding-bottom: 8px; }
  .guest-tab { flex: 1 1 0; justify-content: center; min-width: 0; padding-inline: 7px; font-size: 12px; }
  .guest-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .section-intro { display: grid; gap: 11px; padding-bottom: 15px; }
  .section-intro h2 { font-size: 22px; }
  .section-intro .button { justify-self: start; }
  .guest-process-board { grid-auto-columns: min(82vw, 318px); gap: 16px; }
  .guest-stage { min-height: 264px; }
  .guest-stage-illustration { width: 40px; height: 40px; }
  .stage-header-copy { grid-template-columns: 40px minmax(0, 1fr); gap: 7px; }
  .guest-card { padding: 12px; }
  .guest-card-top { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .guest-card-tools { justify-content: flex-start; }
  .guest-card-channel { justify-content: flex-start; }
  .guest-payment-mutation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest-calendar-actions { width: 100%; }
  .guest-calendar-actions .button { flex: 1 1 auto; }
  .guest-timeline-controls { width: 100%; justify-content: stretch; }
  .guest-timeline-today { flex: 0 0 auto; }
  .guest-timeline-nav { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; width: 100%; }
  .guest-timeline-nav strong { min-width: 0; align-self: center; font-size: 15px; }
  .guest-timeline-board { --timeline-rail: 112px; --timeline-day-width: 54px; }
  .guest-timeline-corner { min-height: 52px; padding-inline: 10px; font-size: 10px; }
  .guest-timeline-day { min-height: 52px; }
  .guest-timeline-day span { font-size: 9px; }
  .guest-timeline-day strong { font-size: 14px; }
  .guest-timeline-property { padding-inline: 10px; }
  .guest-timeline-property strong { font-size: 11px; }
  .guest-timeline-row { --timeline-lane-height: 54px; }
  .guest-timeline-track { grid-template-rows: repeat(var(--timeline-lane-count), var(--timeline-lane-height)); min-height: calc(var(--timeline-lane-count) * var(--timeline-lane-height)); }
  .guest-timeline-booking { margin: 4px var(--timeline-booking-inset-end, 2px) 4px var(--timeline-booking-inset-start, 2px); padding: 4px 6px; }
  .guest-timeline-booking-title { font-size: 11px; }
  .guest-timeline-booking-stage { display: none; }
  .guest-timeline-closure { margin: 5px 2px; padding-inline: 5px; font-size: 9px; }
  .guest-availability-form { grid-template-columns: 1fr; }
  .guest-availability-form .button { grid-column: auto; }
  .guest-detail-facts { grid-template-columns: 1fr; gap: 0; }
  .guest-editor-contacts, .guest-editor-dates, .guest-editor-booking-meta, .guest-editor-notes-fields { grid-template-columns: 1fr; }
  .guest-service-time-fields { grid-template-columns: 1fr; }
  .guest-detail-finance, .guest-detail-summary-grid { grid-template-columns: 1fr; }
  .guest-detail-modal { width: min(100%, calc(100vw - 24px)); height: min(820px, calc(100dvh - 24px)); gap: 0; }
  .guest-detail-modal .modal-head { padding-bottom: 13px; }
  .guest-detail-modal:not(.is-messages-tab) .guest-detail-tab-panel:not([hidden]) { padding-top: 18px; }
  .guest-detail-actions { display: grid; grid-template-columns: 1fr; }
  .guest-detail-actions .button { width: 100%; }
  .guest-service-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest-payment-form { grid-template-columns: 1fr; }
  .guest-payment-form .guest-payment-note, .guest-payment-form .button { grid-column: auto; }
  .guest-payment-form .button { justify-self: stretch; }
}

@media (max-width: 420px) {
  .guest-service-form { grid-template-columns: 1fr; }
  .guest-service-form .guest-service-notes, .guest-service-form .button, .guest-service-actions { grid-column: auto; }
  .guest-service-editor > summary strong, .guest-service-readonly strong { font-size: 13px; }
}

/* Visual audit 004–010, 065–070, 079: one bounded working surface per guest view. */
.guest-process { gap: 16px; }
.guest-editor-modal-body, .guest-detail-modal-body { min-height: 0; display: grid; align-content: start; gap: 18px; overflow: auto; overscroll-behavior: contain; padding-inline: 2px; }
.guest-editor-modal .modal-actions, .guest-message-lead-remove-modal .modal-actions { margin-top: 0; }
.guest-editor-link-candidates, .guest-editor-link-search, .guest-editor-link-confirmation { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); }
.guest-editor-link-candidates h3, .guest-editor-link-confirmation h3 { margin: 0; color: var(--ink); font-size: 14px; }
.guest-editor-link-candidates p, .guest-editor-link-confirmation p { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.guest-editor-link-candidates ul, .guest-editor-link-search ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.guest-editor-link-candidates .text-action, .guest-editor-link-search .text-action { display: grid; gap: 3px; width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 10px; text-align: left; }
.guest-editor-link-candidates .text-action span, .guest-editor-link-search .text-action span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.guest-editor-link-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.guest-detail-modal-body .guest-detail-tab-panel { min-height: 0; }
.guest-timeline-scroller { position: relative; max-width: 100%; overflow-x: auto; overflow-y: clip; overscroll-behavior-x: contain; scrollbar-gutter: stable both-edges; }
.guest-timeline-day { background: var(--surface); }
.guest-timeline-track { min-height: max(54px, calc(var(--timeline-lane-count) * 38px)); }
.guest-timeline-booking { min-height: 30px; align-self: center; }
@media (max-width: 680px) {
  .guest-editor-modal-body, .guest-detail-modal-body { gap: 14px; }
  .guest-editor-link-actions .button { flex: 1 1 160px; }
}

/* Optional card marks use the existing palette and keep a 44px touch target. */
.guest-color-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; flex: 0 0 auto; }
.guest-color-dot .ph-icon { width: 12px; height: 12px; color: var(--surface); }
.guest-color-rose { background: var(--chart-berry); }
.guest-color-amber { background: var(--chart-gold); }
.guest-color-green { background: var(--chart-sage); }
.guest-color-blue { background: var(--chart-primary); }
.guest-color-violet { background: var(--chart-plum); }
.guest-color-control { min-width: 0; }
.guest-color-control > summary { display: flex; align-items: center; gap: 5px; width: fit-content; min-width: 44px; min-height: 44px; padding: 8px; color: var(--muted-strong); border-radius: var(--radius-sm); cursor: pointer; list-style: none; }
.guest-color-control > summary::-webkit-details-marker { display: none; }
.guest-color-control > summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.guest-color-control form { min-width: 0; padding-top: 6px; border-top: 1px solid var(--line); }
.guest-color-control fieldset { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.guest-color-scopes { display: flex; flex-wrap: wrap; gap: 8px; }
.guest-color-scopes label, .guest-color-clear { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--muted-strong); font-size: 12px; }
.guest-color-options { display: flex; flex-wrap: wrap; gap: 2px; }
.guest-color-choice { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.guest-color-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.guest-color-choice input:checked + .guest-color-dot { outline: 2px solid var(--ink); outline-offset: 3px; }
.guest-color-choice input:focus-visible + .guest-color-dot { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.guest-color-choice:has(input:disabled), .guest-color-scopes label:has(input:disabled) { opacity: .5; }
.guest-color-badges { display: flex; gap: 5px; align-items: center; }
.guest-color-unavailable { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); }

.guest-service-money-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; grid-column:1/-1; min-width:0; }
.guest-service-money-preview { grid-column:1/-1; min-width:0; color:var(--muted); font-size:13px; line-height:1.5; }
.guest-service-money-preview p { margin:0; }
.guest-service-history { min-width: 0; }
.guest-service-history ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.guest-service-history li { display: grid; gap: 4px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.guest-service-history li > span, .guest-service-history li > small { color: var(--muted); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
@media(max-width:640px) { .guest-service-money-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } .guest-service-money-fields > .field:last-child { grid-column:1/-1; } }


/* Source: styles/tasks.css */
/* Tasks and Management use one calm, flat workspace language.  Cards mark
   real boundaries only; hierarchy is expressed with spacing and hairlines. */
.task-management-page,
.task-management-page * { min-width: 0; }
.task-management-page { overflow-x: clip; }
.task-management-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 330px);
  border-bottom: 1px solid var(--line);
}
.task-management-tab {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}
.task-management-tab .ph-icon { width: 18px; height: 18px; }
.task-management-tab.is-active { border-bottom-color: var(--accent-strong); color: var(--ink); }
.task-management-page-error,
.task-management-page-message { max-width: 720px; }
.task-management-empty {
  min-height: 210px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.task-management-empty.is-inline { min-height: 124px; padding: 20px 0; }
.task-management-empty strong { color: var(--ink); font-size: 18px; font-weight: var(--font-weight-semibold); letter-spacing: -.015em; }
.task-management-empty > span { max-width: 460px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.task-management-task-surface,
.task-management-management-surface { display: grid; gap: 18px; }
.task-management-task-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.task-management-task-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.task-management-overview {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  gap: 8px 18px;
  min-height: 52px;
  flex: 1 1 320px;
  padding: 4px 0 10px;
}
.task-management-overview > div:not(.task-management-overview-track) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.task-management-overview span { color: var(--muted); font-size: 11px; line-height: 1.3; }
.task-management-overview strong { color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); letter-spacing: -.018em; }
.task-management-overview .is-alert,
.task-management-member-facts dd.is-alert { color: var(--accent-strong); }
.task-management-overview small { grid-column: 1 / -1; color: var(--accent-strong); font-size: 11px; font-weight: var(--font-weight-semibold); }
.task-management-overview-track { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 999px; background: var(--surface-subtle); }
.task-management-overview-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent-strong); transition: width .2s ease; }
.task-management-filters { display: grid; gap: 6px; }
.task-management-filter-row { display: flex; flex-wrap: wrap; gap: 7px; }
.task-management-filter-row-secondary { gap: 5px; }
.task-management-filter {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}
.task-management-filter:hover { border-color: var(--line-strong); color: var(--ink); }
.task-management-filter.is-active { border-color: #f3c2cf; background: var(--accent-soft); color: var(--accent-strong); }
.task-management-filter small { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 4px; border-radius: 999px; background: var(--surface-subtle); color: inherit; font-size: 10px; line-height: 1; }
.task-management-filter.is-active small { background: #fff; }
.task-management-filter-row-secondary .task-management-filter { min-height: 31px; padding: 0 9px; font-size: 11px; font-weight: var(--font-weight-medium); }
.task-management-list { display: grid; border-top: 1px solid var(--line); }
.task-management-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.task-management-row.task-status-completed { opacity: .82; }
.task-management-row:has(.task-management-row-menu[open]) { position: relative; z-index: 3; opacity: 1; }
.task-management-complete {
  width: var(--touch-control-height);
  height: var(--touch-control-height);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: transparent;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.task-management-complete:not(.is-static):hover { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.task-management-row.task-status-completed .task-management-complete { border-color: var(--success); background: var(--success); color: #fff; }
.task-management-complete .ph-icon { width: 16px; height: 16px; }
.task-management-row-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
button.task-management-row-main { cursor: pointer; }
button.task-management-row-main:hover .task-management-row-copy strong { text-decoration: underline; text-underline-offset: 3px; }
.task-management-row-copy { min-width: 0; display: grid; gap: 4px; }
.task-management-row-copy strong { overflow-wrap: anywhere; color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); line-height: 1.35; }
.task-management-row.task-status-completed .task-management-row-copy strong { text-decoration: line-through; }
.task-management-row.task-status-completed .task-management-row-copy strong,
.task-management-row.task-status-completed .task-management-status { color: var(--success); }
.task-management-row-copy small { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.task-management-booking { color: var(--muted-strong); }
.task-management-row-meta { min-width: 0; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.task-management-due,
.task-management-assignee { min-width: 0; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.task-management-due { white-space: normal; }
.task-management-assignee { white-space: nowrap; }
.task-management-due .ph-icon { width: 14px; height: 14px; }
.task-management-due.is-overdue { color: var(--accent-strong); font-weight: var(--font-weight-semibold); }
.task-management-deadline-zone { display: block; font-size: 11px; font-weight: var(--font-weight-regular); overflow-wrap: anywhere; }
.task-management-exact-deadline { display: grid; align-content: start; gap: 6px; }
.task-management-exact-deadline time { color: var(--ink); font-weight: var(--font-weight-semibold); }
.task-management-exact-deadline small { color: var(--muted-strong); overflow-wrap: anywhere; }
.task-management-assignee > span:last-child { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.task-management-avatar {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-subtle);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}
.task-management-avatar.is-small { width: 20px; height: 20px; font-size: 8px; }
.task-management-row-aside { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.task-management-priority,
.task-management-status { min-height: 24px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: 10px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.task-management-origin { max-width: 180px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.task-priority-urgent .task-management-priority { background: var(--accent-soft); color: var(--accent-strong); }
.task-priority-high .task-management-priority { background: var(--warning-soft); color: var(--warning); }
.task-status-in_progress .task-management-status { background: #f2f5fb; color: #526a9d; }
.task-status-completed .task-management-status { background: var(--success-soft); color: var(--success); }
.task-status-scheduled .task-management-status { background: #f2f5fb; color: #526a9d; }
.task-management-planned-run .task-management-row-main { cursor: pointer; }
.task-management-planned-run .task-management-status { background: var(--surface-subtle); color: var(--muted-strong); }
.task-management-planned-run.task-status-needs_attention .task-management-status,
.task-management-planned-run.task-status-failed .task-management-status { background: var(--warning-soft); color: var(--warning); }
.task-management-cancellation-reason { color: var(--muted-strong); white-space: normal; }
.task-management-row-menu,
.task-management-modal-menu { position: relative; }
.task-management-row-menu summary { width: var(--touch-control-height); height: var(--touch-control-height); display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-strong); cursor: pointer; list-style: none; }
.task-management-modal-menu summary { min-height: var(--touch-control-height); display: inline-flex; align-items: center; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-strong); cursor: pointer; list-style: none; }
.task-management-row-menu summary::-webkit-details-marker,
.task-management-modal-menu summary::-webkit-details-marker { display: none; }
.task-management-row-menu summary:hover,
.task-management-modal-menu summary:hover,
.task-management-row-menu[open] > summary,
.task-management-modal-menu[open] > summary { background: var(--surface-subtle); }
.task-management-row-menu summary:focus-visible,
.task-management-modal-menu summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.task-management-row-menu summary .ph-icon { width: 17px; height: 17px; }
.task-management-row-menu > div { position: absolute; z-index: 2; right: 0; top: calc(100% + 5px); min-width: 164px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 24px rgb(35 29 25 / .12); }
.task-management-row-menu .text-action,
.task-management-modal-menu .text-action { min-height: 32px; padding: 0 7px; color: var(--muted-strong); text-align: left; }
.task-management-row-menu .text-action:hover,
.task-management-modal-menu .text-action:hover { color: var(--ink); background: var(--surface-subtle); }
.task-management-management-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 26px; padding: 2px 0 4px; }
.task-management-management-intro > div { display: inline-flex; align-items: center; gap: 10px; }
.task-management-management-intro-person { display: grid; gap: 2px; }
.task-management-management-intro strong { color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); }
.task-management-management-intro small,
.task-management-management-intro p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.task-management-management-intro p { max-width: 510px; }
.task-management-chart-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 8px; }
.task-management-chart-controls .entry-note { margin: 0; }
.task-management-chart-controls [role="group"] { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.task-management-org-chart-wrap { position: relative; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.task-management-org-chart,
.task-management-org-children { margin: 0; padding: 0; list-style: none; }
.task-management-org-chart { width: max-content; min-width: 100%; display: grid; justify-items: center; gap: 22px; }
.task-management-additional-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.task-management-additional-connectors path { fill: none; stroke: var(--accent-strong); stroke-width: 1.5; stroke-dasharray: 4 5; stroke-linecap: round; opacity: .72; }
.task-management-org-card { position: relative; z-index: 2; }
.task-management-org-node { position: relative; width: max-content; min-width: 236px; display: grid; justify-items: center; }
.task-management-org-card {
  width: 236px;
  align-self: start;
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: inherit;
  text-align: left;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.task-management-org-card:hover { border-color: var(--line-strong); background: #fffdfd; transform: translateY(-1px); }
.task-management-org-card:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.task-management-org-card.is-hierarchy-reparentable {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}
.task-management-org-card.is-hierarchy-reparentable:active { cursor: grabbing; }
.task-management-org-card.is-hierarchy-dragging { opacity: .48; cursor: grabbing; transform: none; }
.task-management-org-card.is-hierarchy-drop-target {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-soft) 78%, transparent);
}
.task-management-hierarchy-drag-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: grid;
  box-sizing: border-box;
  margin: 0;
  pointer-events: none;
  opacity: .95;
  cursor: grabbing;
  box-shadow: 0 18px 38px rgb(32 25 20 / .2);
  transform-origin: top left;
  will-change: transform;
}
.task-management-org-card-head { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.task-management-org-card-head > span:last-child { min-width: 0; display: grid; gap: 3px; }
.task-management-org-card-head strong { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.task-management-org-card-head small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.task-management-org-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.task-management-additional-manager-relation { display: grid; align-items: center; color: var(--muted); font-size: 11px; line-height: 1.35; text-align: left; }
.task-management-additional-manager-relation small { overflow-wrap: anywhere; }
.task-management-role-access { gap: 10px; }
.task-management-org-card-progress,
.task-management-member-performance-track { height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface-subtle); }
.task-management-org-card-progress i,
.task-management-member-performance-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent-strong); transition: width .2s ease; }
.task-management-org-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted-strong); font-size: 11px; font-weight: var(--font-weight-semibold); }
.task-management-org-card-footer .ph-icon { width: 14px; height: 14px; color: var(--muted); }
.task-management-org-children {
  position: relative;
  width: max-content;
  max-width: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 20px 16px;
  margin: 26px auto 0;
  padding-top: 28px;
}
.task-management-org-children::before { position: absolute; top: -26px; left: 50%; width: 1px; height: 27px; background: var(--line-strong); content: ""; }
.task-management-org-children:has(> .task-management-org-node:nth-child(2)) { border-top: 1px solid var(--line-strong); }
.task-management-org-children > .task-management-org-node { width: max-content; min-width: 236px; flex: 0 0 auto; }
.task-management-org-children > .task-management-org-node::before { position: absolute; top: -29px; left: 50%; width: 1px; height: 29px; background: var(--line-strong); content: ""; }
.task-management-modal-backdrop { z-index: 62; }
.task-management-modal { width: min(100%, 640px); min-height: 0; display: grid; gap: 20px; overflow: hidden; }
.task-management-modal .modal-head { align-items: flex-start; }
.task-management-modal .modal-head .eyebrow { margin-bottom: 5px; }
.task-management-modal .modal-head h2 { color: var(--ink); }
.task-management-cancellation-confirm { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--warning); border-radius: 14px; background: var(--warning-soft); }
.task-management-cancellation-confirm p { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.task-management-cancelled-notice { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); }
.task-management-cancelled-notice strong { color: var(--muted-strong); font-size: 14px; font-weight: var(--font-weight-semibold); }
.task-management-cancelled-notice p { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.task-management-cancellation-confirm .field { display: grid; gap: 6px; }
.task-management-optional { color: var(--muted); font-size: 12px; font-weight: var(--font-weight-regular); }
.task-management-task-origin,
.task-management-task-context { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.task-management-editor-form,
.task-management-management-form { display: grid; gap: 16px; }
.task-management-editor-form { align-content: start; padding-inline: 2px; }
.task-management-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.task-management-editor-actions { justify-content: flex-end; padding-top: 18px; border-top: 1px solid var(--line); }
.task-management-readonly-title { margin: 0; color: var(--ink); font-size: 18px; font-weight: var(--font-weight-semibold); line-height: 1.35; }
.task-management-readonly-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.task-management-readonly-facts > div { display: grid; gap: 5px; min-height: 72px; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.task-management-readonly-facts > .is-wide { grid-column: 1 / -1; }
.task-management-readonly-facts dt { color: var(--muted); font-size: 11px; }
.task-management-readonly-facts dd { display: grid; gap: 3px; margin: 0; color: var(--ink); font-size: 14px; line-height: 1.45; }
.task-management-readonly-facts dd small { color: var(--muted); font-size: 12px; }
.task-management-modal-menu { margin-right: auto; }
.task-management-modal-menu > div { display: grid; gap: 3px; padding-top: 6px; }
.task-management-member-modal { width: min(100%, 680px); }
.task-management-hierarchy-move-modal { width: min(100%, 480px); }
.task-management-hierarchy-move-copy { margin: 0; color: var(--muted-strong); font-size: 14px; line-height: 1.55; }
.task-management-hierarchy-move-copy strong { color: var(--ink); font-weight: var(--font-weight-semibold); }
.task-management-member-modal-title { display: inline-flex; align-items: center; gap: 12px; }
.task-management-member-modal-title > div { display: grid; gap: 2px; }
.task-management-member-modal-title .eyebrow { margin: 0; }
.task-management-member-modal-title h2 { margin: 0; }
.task-management-member-modal-title span { color: var(--muted); font-size: 12px; }
.task-management-member-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.task-management-member-tab { min-height: var(--touch-control-height); padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: var(--font-weight-semibold); }
.task-management-member-tab.is-active { border-bottom-color: var(--accent-strong); color: var(--ink); }
.task-management-member-panel:not([hidden]) { display: grid; gap: 18px; }
.task-management-member-performance { display: grid; gap: 9px; padding: 14px 0 2px; }
.task-management-member-performance header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.task-management-member-performance header span,
.task-management-member-performance b { color: var(--muted); font-size: 12px; font-weight: var(--font-weight-medium); }
.task-management-member-performance header strong { color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); }
.task-management-member-performance b { color: var(--muted-strong); }
.task-management-member-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.task-management-member-facts > div { min-width: 0; display: grid; gap: 5px; min-height: 78px; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.task-management-member-facts dt { color: var(--muted); font-size: 11px; line-height: 1.35; }
.task-management-member-facts dd { margin: 0; color: var(--ink); font-size: 20px; font-weight: var(--font-weight-semibold); letter-spacing: -.025em; }
.task-management-member-context { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.task-management-member-context > span,
.task-management-management-form header p { color: var(--muted); font-size: 12px; line-height: 1.4; }
.task-management-member-context strong { color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); }
.task-management-management-form { padding: 18px 0; border-bottom: 1px solid var(--line); }
.task-management-management-form header { display: grid; gap: 4px; }
.task-management-management-form h3,
.task-management-management-form p { margin: 0; }
.task-management-management-form h3 { color: var(--ink); font-size: 16px; font-weight: var(--font-weight-semibold); }
.task-management-management-form.is-readonly { color: var(--muted); }
.task-management-grant-list { display: grid; gap: 7px; }
.task-management-grant-choice { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.task-management-grant-choice:has(input:checked) { color: var(--accent-strong); }
.task-management-grant-choice > span { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
.task-management-grant-choice .task-management-avatar { grid-row: span 2; }
.task-management-grant-choice strong { overflow: hidden; font-size: 13px; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.task-management-grant-choice small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-management-search { display: grid; grid-template-columns: minmax(0, 420px) auto auto; align-items: center; justify-content: start; gap: 8px; }
.task-management-search input[type="search"] { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.task-management-search input[type="search"]::placeholder { color: var(--muted); }
.task-management-search input[type="search"]:focus-visible { border-color: var(--accent-strong); outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }

@media (max-width: 1100px) {
  /* At tablet widths, keep the title's usable line length and let secondary
     facts take their own rows. The desktop side-by-side metadata remains for
     wide workspaces. */
  .task-management-row { grid-template-columns: 32px minmax(0, 1fr); align-items: start; }
  .task-management-row-main { grid-template-columns: 1fr; gap: 7px; padding-top: 2px; }
  .task-management-row-meta { justify-content: flex-start; }
  .task-management-row-aside { grid-column: 2; justify-content: flex-start; }
}

@media (max-width: 720px) {
  .task-management-tabs { width: 100%; }
  .task-management-tab { min-height: 46px; }
  .task-management-task-toolbar > .button { width: 100%; }
  .task-management-org-chart { justify-items: stretch; }
  .task-management-org-children { width: max-content; gap: 16px 10px; }
  .task-management-org-children > .task-management-org-node { min-width: 236px; }
  .task-management-editor-grid { grid-template-columns: 1fr; }
  .task-management-readonly-facts { grid-template-columns: 1fr; }
  .task-management-readonly-facts > .is-wide { grid-column: auto; }
  .task-management-search { grid-template-columns: minmax(0, 1fr) auto; }
  .task-management-search .text-action { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 430px) {
  .task-management-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
  .task-management-overview strong { font-size: 14px; }
  .task-management-filter-row:first-child .task-management-filter { flex: 1 1 auto; justify-content: space-between; }
  .task-management-member-facts { grid-template-columns: 1fr; }
  .task-management-member-facts > div { min-height: 58px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .task-management-member-facts dt { grid-column: 1; }.task-management-member-facts dd { grid-column: 2; grid-row: 1; }
}

/* Visual audit 011–020, 072, 080, 161–166: hierarchy remains an intentional canvas. */
.task-management-management-surface { min-width: 0; }
.task-management-org-chart-wrap { max-width: 100%; min-height: 180px; padding: 18px 0 22px; isolation: isolate; scrollbar-gutter: stable both-edges; }
.task-management-org-chart { padding-inline: 20px; }
.task-management-org-card { box-shadow: none; }
.task-management-org-children::before, .task-management-org-children > .task-management-org-node::before { background: var(--line-strong); }
.task-management-additional-connectors path { stroke: var(--muted-strong); stroke-dasharray: 5 5; opacity: .68; }
.task-management-modal > .modal-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.task-management-modal > .modal-actions { margin-top: 0; }
.task-management-cancellation-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.task-management-member-modal-body { display: grid; align-content: start; gap: 16px; }
.task-management-hierarchy-move-modal > .modal-actions { margin-top: 0; }
@media (max-width: 680px) {
  .task-management-org-chart-wrap { margin-inline: -4px; padding-inline: 4px; }
  .task-management-org-card { min-width: 220px; }
  .task-management-editor-grid { grid-template-columns: 1fr; }
}

.task-progress { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-medium); white-space: nowrap; }
.task-progress progress { width: 56px; height: 6px; accent-color: var(--accent-strong); }
.task-progress-section { display: grid; gap: 10px; padding-block: 10px; border-top: 1px solid var(--line); }
.task-progress-field { max-width: 240px; }
.task-progress-history { color: var(--muted-strong); font-size: 12px; }
.task-progress-history ul { display: grid; gap: 8px; padding: 8px 0; list-style: none; }
.task-progress-history li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }


/* Source: features/automation/automation.css */
.automation-panel,
.automation-panel :not(.selection-field) { min-width: 0; }
.automation-panel { display: grid; gap: 20px; overflow-x: clip; }
.automation-page-head,
.automation-section-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 14px 24px; }
.automation-page-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.automation-page-head h2,
.automation-section-head h2,
.automation-section-head h3 { margin: 0; color: var(--ink); font-weight: var(--font-weight-semibold); }
.automation-page-head h2 { font-size: 24px; letter-spacing: -.025em; }
.automation-page-head p,
.automation-section-head p { max-width: 650px; margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.automation-tabs { display: flex; flex-wrap: wrap; max-width: 100%; border-bottom: 1px solid var(--line); }
.automation-tabs button { min-height: 44px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.automation-tabs button.is-active { border-bottom-color: var(--accent-strong); color: var(--ink); }
.automation-service-menu { position: relative; }
.automation-service-menu summary { min-height: 34px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted-strong); cursor: pointer; font-size: 12px; list-style: none; }
.automation-service-menu summary::-webkit-details-marker { display: none; }
.automation-service-menu > button { position: absolute; z-index: 3; right: 0; top: calc(100% + 5px); min-width: 190px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted-strong); text-align: left; box-shadow: 0 10px 24px rgb(35 29 25 / .12); }
.automation-rules,
.automation-journal,
.automation-access { display: grid; gap: 18px; }
.automation-rule-list,
.automation-journal-list { display: grid; border-top: 1px solid var(--line); }
.automation-rule,
.automation-journal-list article { display: grid; align-items: start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.automation-rule { grid-template-columns: minmax(0, 1fr); }
.automation-journal-list article { grid-template-columns: minmax(0, 1fr) auto; }
.automation-rule-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.automation-rule-title strong { color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.automation-rule p { margin: 5px 0; color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.automation-rule small,
.automation-journal-list small { color: var(--muted); font-size: 12px; }
.automation-rule-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.automation-rule-actions > .entry-note { flex-basis: 100%; margin: 3px 0 0; }
.automation-rule-actions .button { min-height: 32px; padding: 0 9px; font-size: 12px; }
.automation-rule-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.automation-rule-filter { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-medium); }
.automation-rule-filter small { min-width: 17px; height: 17px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-subtle); font-size: 10px; }
.automation-rule-filter.is-active { border-color: #f3c2cf; background: var(--accent-soft); color: var(--accent-strong); }
.automation-status { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: 10px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.automation-status-active { background: var(--success-soft); color: var(--success); }
.automation-status-paused { background: var(--warning-soft); color: var(--warning); }
.automation-status-archived { opacity: .7; }
.automation-empty { display: grid; align-content: center; gap: 6px; min-height: 160px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.automation-empty strong { color: var(--ink); font-size: 17px; }
.automation-empty span { color: var(--muted); font-size: 13px; }
.automation-templates { display: grid; gap: 9px; padding: 18px; border-radius: 16px; background: var(--surface-subtle); }
.automation-templates h3,
.automation-templates p { margin: 0; }
.automation-templates p { color: var(--muted); font-size: 13px; }
.automation-templates > div { display: flex; flex-wrap: wrap; gap: 8px; }
.automation-templates .button { min-height: 34px; font-size: 12px; }
.automation-journal-list article { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.automation-journal-list strong { display: block; color: var(--ink); font-size: 13px; }
.automation-journal-task { color: var(--muted); font-size: 12px; white-space: nowrap; }
.automation-access { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.automation-access > header { grid-column: 1 / -1; }
.automation-access .card { display: grid; gap: 12px; padding: 18px; }
.automation-access h3 { margin: 0; color: var(--ink); font-size: 15px; }
.automation-grant-list,
.automation-mapping-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.automation-grant-list label { display: flex; gap: 8px; color: var(--muted-strong); font-size: 13px; }
.automation-mapping-list li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted-strong); font-size: 13px; }
.automation-delegate { display: grid; gap: 14px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.automation-delegate summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); cursor: pointer; font-size: 13px; list-style: none; }
.automation-delegate summary::-webkit-details-marker { display: none; }
.automation-delegate summary span { color: var(--muted); font-size: 12px; }
.automation-delegate-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 14px; }
.automation-delegate-group { display: grid; align-content: start; gap: 8px; }
.automation-delegate-group h4 { margin: 0; color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-semibold); }
.automation-delegate-options { display: grid; gap: 8px; }
.automation-delegate-options label { display: flex; align-items: flex-start; gap: 8px; color: var(--muted-strong); font-size: 13px; line-height: 1.35; }
.automation-delegate-group small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.automation-editor { width: min(100%, 780px); max-height: min(92vh, 860px); overflow: auto; }
.automation-editor form { display: grid; gap: 18px; }
.automation-editor-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.automation-editor-group { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.automation-editor-group h3 { margin: 0; color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.automation-editor-advanced { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.automation-editor-advanced > summary { color: var(--ink); cursor: pointer; font-size: 13px; font-weight: var(--font-weight-semibold); }
.automation-editor-advanced[open] > summary { margin-bottom: 2px; }
.automation-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.automation-editor-grid .field { display: grid; align-content: start; gap: 6px; color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-semibold); }
.automation-editor-grid .field > input:not([type="checkbox"]):not([type="radio"]),
.automation-editor-grid .field > select { width: 100%; }
.automation-editor-grid .field > input + select { margin-top: 2px; }
/* Keep inactive interval values in the form so a person can switch back,
   while showing only controls that affect the selected mode. */
.automation-editor-grid .field:has(select[name="activation_kind"] option[value="immediate"]:checked) > input[name="activation_amount"],
.automation-editor-grid .field:has(select[name="activation_kind"] option[value="immediate"]:checked) > select[name="activation_unit"],
.automation-editor-grid .field:has(select[name="deadline_kind"] option[value="none"]:checked) > input[name="deadline_amount"],
.automation-editor-grid .field:has(select[name="deadline_kind"] option[value="none"]:checked) > select[name="deadline_unit"],
.automation-editor-grid .field:has(select[name="deadline_kind"] option[value="none"]:checked) > select[name="deadline_anchor"],
.automation-editor-grid .field:has(select[name="deadline_kind"] option[value="none"]:checked) > select[name="deadline_direction"],
.automation-editor-grid .field:has(select[name="deadline_kind"] option[value="after_activation"]:checked) > select[name="deadline_anchor"],
.automation-editor-grid .field:has(select[name="deadline_kind"] option[value="after_activation"]:checked) > select[name="deadline_direction"] { display: none; }
.field-wide { grid-column: 1 / -1; }
.automation-condition,
.automation-cancellation,
.automation-trigger-details,
.automation-member-list { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.automation-condition legend,
.automation-cancellation legend,
.automation-trigger-details legend,
.automation-member-list legend { padding: 0 4px; color: var(--muted-strong); font-size: 12px; font-weight: var(--font-weight-semibold); }
.automation-trigger-details > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.automation-trigger-details label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.automation-weekdays { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-content: center; align-self: stretch; gap: 6px; color: var(--muted-strong); font-size: 12px; }
.automation-weekdays legend { margin-bottom: 5px; padding: 0; font-size: 11px; color: var(--muted); }
.automation-weekdays label { min-height: 44px; cursor: pointer; }

.automation-weekdays label,
.automation-member-list label { display: inline-flex; align-items: center; gap: 5px; }
.automation-member-list { display: flex; flex-wrap: wrap; gap: 7px 12px; }
.automation-catchup { display: grid; gap: 9px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.automation-catchup strong { color: var(--ink); font-size: 14px; }
.automation-catchup p { margin: 0; color: var(--muted); font-size: 13px; }
.automation-catchup > div { display: grid; gap: 7px; }
.automation-catchup label { color: var(--muted-strong); font-size: 13px; }
.automation-condition > div { display: grid; gap: 8px; }
.automation-condition-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr) auto; align-items: stretch; gap: 8px; }
.automation-condition > select,
.automation-condition-row > select,
.automation-condition-row > input:not([type="hidden"]) { box-sizing: border-box; width: 100%; min-height: var(--touch-control-height); height: var(--touch-control-height); padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: 0; background: var(--surface); color: var(--ink); }
.automation-condition-row > .button { min-height: var(--touch-control-height); height: var(--touch-control-height); }
.automation-condition > select:focus,
.automation-condition-row > select:focus,
.automation-condition-row > input:not([type="hidden"]):focus { border-color: var(--ink); }
.automation-cancellation > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
.automation-cancellation label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.automation-preview { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--success-soft); color: var(--success); }
.automation-preview strong { font-size: 13px; }
.automation-preview span { font-size: 12px; }
@media (max-width: 620px) {
  .automation-panel { gap: 14px; }
  .automation-page-head { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .automation-page-head h2 { display: none; }
  .automation-page-head p { margin: 0; font-size: 13px; line-height: 1.35; }
  .automation-page-head .button { flex: 0 0 auto; }
  .automation-access,
  .automation-editor-top,
  .automation-editor-grid,
  .automation-delegate-groups { grid-template-columns: 1fr; }
  .automation-access > header,
  .field-wide { grid-column: auto; }
  .automation-rule,
  .automation-journal-list article { grid-template-columns: 1fr; }
  .automation-rule-actions { justify-content: flex-start; }
  .automation-condition-row,
  .automation-cancellation > div,
  .automation-trigger-details > div { grid-template-columns: 1fr; }
  .automation-editor { width: 100%; border-radius: 18px 18px 0 0; }
}


/* Source: styles/dashboard.css */
/* Dashboard is one calm reading surface. Financial facts arrive from the
   protected snapshot; this stylesheet only establishes hierarchy and space. */
.dashboard-page { gap: 24px; }
.dashboard-page-head { align-items: flex-end; }
.dashboard-toolbar { gap: 12px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dashboard-page .range-control, .dashboard-metric strong, .dashboard-fact-grid strong, .dashboard-kpi-values dd, .dashboard-breakdown-column > strong { font-variant-numeric: tabular-nums; }
.dashboard-page-controls, .dashboard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dashboard-tabs { display: inline-flex; align-self: start; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.dashboard-tabs button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-strong); font-size: 13px; font-weight: var(--font-weight-semibold); }
.dashboard-tabs button.is-active { background: var(--surface-accent); color: var(--accent-strong); }
.finance-hub { display: grid; gap: 24px; min-width: 0; max-width: 1480px; margin: 0 auto; }
.finance-hub-tabs { width: min(100%, 470px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finance-hub-tabs button, .finance-hub-panel, .finance-hub-panel > .page { min-width: 0; }
.finance-hub-tabs button { padding-inline: 8px; white-space: nowrap; }
.finance-hub-panel > .page { max-width: none; margin: 0; }

.dashboard-analytics { display: grid; min-width: 0; gap: 32px; }
.dashboard-freshness, .dashboard-period-coverage, .dashboard-allocation { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.dashboard-freshness { padding: 10px 12px; color: var(--muted-strong); font-size: 13px; line-height: 1.5; }
.dashboard-refresh-confirmation { margin: -14px 0 -10px; color: var(--success); font-size: 12px; font-weight: var(--font-weight-medium); line-height: 1.4; }
.dashboard-period-coverage, .dashboard-allocation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 16px 18px; }
.dashboard-period-coverage > div, .dashboard-allocation > div { display: grid; gap: 4px; min-width: 0; }
.dashboard-period-coverage span, .dashboard-allocation span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.dashboard-period-coverage strong, .dashboard-allocation strong { overflow-wrap: anywhere; color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.dashboard-period-coverage p, .dashboard-allocation p { grid-column: 1 / -1; margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.dashboard-period-coverage.is-partial { border-color: var(--accent-soft); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.dashboard-period-coverage.is-future { background: var(--surface-subtle); }
.dashboard-allocation[data-dashboard-allocation="incomplete"] { border-color: var(--line-strong); }
.dashboard-context-facts { margin: -18px 0 0; color: var(--muted-strong); font-size: 13px; line-height: 1.5; }
.dashboard-context-facts p { margin: 0; }
.dashboard-breakdown-selection { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-breakdown-selection > div { display: grid; min-width: 0; gap: 2px; }
.dashboard-breakdown-selection span, .dashboard-breakdown-selection small, .dashboard-breakdown-selection p { color: var(--muted); font-size: 12px; line-height: 1.4; }
.dashboard-breakdown-selection strong { overflow-wrap: anywhere; color: var(--ink); }
.dashboard-breakdown-selection p { grid-column: 1 / -1; margin: 0; }
.dashboard-breakdown-detail-rows { display: grid; grid-column: 1 / -1; gap: 8px; }
.dashboard-breakdown-detail-rows article { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding: 8px 0; border-top: 1px solid var(--line); }
.dashboard-breakdown-detail-rows article > div { display: grid; min-width: 0; gap: 2px; }
.dashboard-breakdown-detail-rows small { overflow-wrap: anywhere; }

.dashboard-metric-group { display: grid; min-width: 0; gap: 15px; padding-top: 3px; }
.dashboard-metric-group > header, .dashboard-section > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.dashboard-metric-group .eyebrow, .dashboard-section .eyebrow { margin-bottom: 5px; }
.dashboard-metric-group h2, .dashboard-section h2 { margin: 0; color: var(--ink); font-size: 22px; font-weight: var(--font-weight-semibold); letter-spacing: -.028em; line-height: 1.2; }
.dashboard-metric-group > header > p, .dashboard-section > header > p { max-width: 330px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: right; }
.dashboard-metrics { display: grid; min-width: 0; gap: 16px; }
.dashboard-metric-group-primary .dashboard-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-metric-group-operating .dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-metric-group-finance .dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-metric { width: 100%; min-width: 0; min-height: 158px; display: grid; align-content: space-between; gap: 11px; padding: 17px 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.dashboard-metric.is-accent { border-color: #efc8d2; background: var(--surface); }
.dashboard-metric:hover { background: var(--surface-subtle); }
.dashboard-metric.is-accent:hover { background: var(--accent-soft); }
.dashboard-metric:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.dashboard-metric.is-selected { position: relative; z-index: 2; background: var(--surface); box-shadow: 0 7px 18px rgba(34, 34, 34, .11); }
.dashboard-metric.is-selected::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--accent-strong); content: ""; }
.dashboard-metric.is-selected.is-accent { background: var(--surface); }
.dashboard-metric > span, .dashboard-metric small { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.35; }
.dashboard-metric strong { overflow-wrap: anywhere; color: var(--ink); font-size: clamp(20px, 1.9vw, 29px); font-weight: var(--font-weight-semibold); letter-spacing: -.04em; }

.dashboard-payer-summary { display: grid; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-payer-summary > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 18px; }
.dashboard-payer-summary h2 { margin: 0; color: var(--ink); font-size: 18px; font-weight: var(--font-weight-semibold); }
.dashboard-payer-summary header p { max-width: 440px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; text-align: right; }
.dashboard-payer-summary > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.dashboard-payer-summary article { display: grid; min-width: 0; gap: 4px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.dashboard-payer-summary article > span, .dashboard-payer-summary article small { color: var(--muted); font-size: 12px; }
.dashboard-payer-summary article strong { color: var(--ink); font-size: 16px; font-weight: var(--font-weight-semibold); }

.dashboard-section { min-width: 0; padding: 27px 0 0; border-top: 1px solid var(--line); }
.dashboard-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.dashboard-section-grid > .dashboard-section + .dashboard-section { border-left: 1px solid var(--line); padding-left: 36px; }
.dashboard-muted, .dashboard-chart-empty { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.dashboard-empty { display: grid; justify-items: start; gap: 10px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-empty h2 { margin: 0; font-size: 22px; font-weight: var(--font-weight-semibold); letter-spacing: -.025em; }
.dashboard-empty p { max-width: 560px; margin: 0; color: var(--muted); line-height: 1.5; }

.chart-wrap { position: relative; min-width: 0; height: 340px; overflow: hidden; }
.line-chart { width: 100%; height: 100%; overflow: visible; }
.line-chart--mobile { display: none; }
.line-chart .gridline { stroke: var(--line); stroke-width: 1; }
.line-chart .axis-label, .line-chart .axis-value { fill: var(--muted); font-size: 11px; }
.line-chart .axis-label.is-empty { fill: var(--muted); opacity: .68; }
.line-chart .chart-empty-label { fill: var(--muted-strong); font-size: 13px; font-weight: var(--font-weight-semibold); }
.line-chart .series { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.line-chart .series-income { stroke: var(--chart-turnover); }
.line-chart .series-owner { stroke: var(--chart-owner); }
.line-chart .series-expense { stroke: var(--chart-expense); }
.line-chart .point { fill: var(--surface); stroke-width: 2.5; }
.line-chart .point-income { stroke: var(--chart-turnover); }
.line-chart .point-owner { stroke: var(--chart-owner); }
.line-chart .point-expense { stroke: var(--chart-expense); }
.dashboard-chart-interactions { position: absolute; inset: 0; pointer-events: none; }
.dashboard-chart-interactions--mobile { display: none; }
.dashboard-chart-hit { position: absolute; top: 0; bottom: 0; left: var(--timeline-position); width: max(40px, 8%); padding: 0; border: 0; background: transparent; color: transparent; cursor: crosshair; transform: translateX(-50%); pointer-events: auto; }
.dashboard-chart-hit::before { position: absolute; top: 24px; bottom: 28px; left: 50%; width: 1px; background: transparent; content: ""; }
.dashboard-chart-tooltip { position: absolute; top: 8px; left: clamp(0px, calc(var(--timeline-position) - min(115px, 50%)), calc(100% - min(230px, 100%))); z-index: 2; box-sizing: border-box; width: min(230px, 100%); padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 8px 20px rgb(32 25 20 / .12); color: var(--ink); font-size: 12px; line-height: 1.4; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease; }
.dashboard-chart-hit:hover::before, .dashboard-chart-hit:focus-visible::before, .dashboard-chart-hit.is-selected::before { background: var(--accent-strong); }
.dashboard-chart-hit:hover + .dashboard-chart-tooltip, .dashboard-chart-hit:focus-visible + .dashboard-chart-tooltip, .dashboard-chart-hit.is-selected + .dashboard-chart-tooltip { opacity: 1; transform: translateY(0); }
.dashboard-chart-hit:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.dashboard-chart-inspection { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; margin-top: 12px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-chart-inspection > div { display: grid; min-width: 0; gap: 2px; }
.dashboard-chart-inspection span, .dashboard-chart-inspection small, .dashboard-chart-inspection p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.dashboard-chart-inspection strong { color: var(--ink); font-size: 18px; font-weight: var(--font-weight-semibold); }
.dashboard-chart-inspection p { grid-column: 1 / -1; }
.dashboard-chart-note { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.chart-key { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.chart-key span { display: inline-flex; align-items: center; gap: 7px; }
.chart-key i { width: 18px; height: 3px; border-radius: 999px; }
.chart-key .income { background: var(--chart-turnover); }
.chart-key .owner { background: var(--chart-owner); }
.chart-key .expense { background: var(--chart-expense); }

.dashboard-performance-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dashboard-performance-card { min-width: 0; display: grid; gap: 15px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.dashboard-performance-card > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.dashboard-performance-card > header strong { overflow-wrap: anywhere; color: var(--ink); font-size: 16px; font-weight: var(--font-weight-semibold); }
.dashboard-performance-card > header span { color: var(--muted-strong); font-size: 11px; }
.dashboard-performance-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.dashboard-performance-facts > div { display: grid; min-width: 0; min-height: 97px; align-content: start; gap: 6px; padding: 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-performance-facts span, .dashboard-performance-facts small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.dashboard-performance-facts strong { overflow-wrap: anywhere; color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); letter-spacing: -.02em; }
.dashboard-performance-facts .is-unavailable strong { color: var(--muted-strong); }

.dashboard-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.dashboard-fact-grid > div { display: grid; min-width: 0; min-height: 106px; align-content: start; gap: 7px; padding: 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-fact-grid span, .dashboard-fact-grid small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.dashboard-fact-grid strong { overflow-wrap: anywhere; color: var(--ink); font-size: 20px; font-weight: var(--font-weight-semibold); letter-spacing: -.025em; }
.dashboard-booking-pending { display: grid; gap: 5px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-booking-pending strong { color: var(--ink); font-size: 26px; font-weight: var(--font-weight-semibold); }
.dashboard-booking-pending span, .dashboard-booking-pending p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.dashboard-booking-empty { display: grid; grid-template-columns: minmax(128px, .8fr) minmax(0, 1fr); align-items: center; gap: 20px; min-height: 172px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-booking-empty-visual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; min-height: 88px; padding: 12px; border-bottom: 1px solid var(--line-strong); }
.dashboard-booking-empty-visual > div { display: grid; justify-items: center; gap: 8px; color: var(--muted); }
.dashboard-booking-empty-visual .ph-icon { width: 25px; height: 25px; }
.dashboard-booking-empty-visual i { width: 100%; height: 7px; border-radius: 999px; background: var(--surface-subtle); }
.dashboard-booking-empty-visual > div:nth-child(2) { color: var(--accent-strong); }
.dashboard-booking-empty-visual > div:nth-child(2) i { background: var(--accent-soft); }
.dashboard-booking-empty strong { color: var(--ink); font-size: 15px; font-weight: var(--font-weight-semibold); }
.dashboard-booking-empty p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.dashboard-booking-facts { display: grid; gap: 14px; }
.dashboard-occupancy-visual { display: grid; gap: 6px; }
.dashboard-occupancy-visual > small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.dashboard-occupancy-visual.is-overflow > small { color: var(--danger); }
.dashboard-occupancy-track { position: relative; height: 9px; overflow: hidden; border-radius: 999px; background: var(--surface-subtle); }
.dashboard-occupancy-track > span { display: block; width: var(--occupancy, 0%); height: 100%; border-radius: inherit; background: var(--chart-sage); }
.dashboard-occupancy-capacity { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--occupancy-capacity, 100%); width: 1px; background: var(--ink); opacity: .55; transform: translateX(-1px); pointer-events: none; }
.chart-tone-0 { background: var(--chart-primary); }
.chart-tone-1 { background: var(--chart-berry); }
.chart-tone-2 { background: var(--chart-gold); }
.chart-tone-3 { background: var(--chart-sage); }
.chart-tone-4 { background: var(--chart-plum); }
.donut-segment.chart-tone-0 { stroke: var(--chart-primary); }
.donut-segment.chart-tone-1 { stroke: var(--chart-berry); }
.donut-segment.chart-tone-2 { stroke: var(--chart-gold); }
.donut-segment.chart-tone-3 { stroke: var(--chart-sage); }
.donut-segment.chart-tone-4 { stroke: var(--chart-plum); }
.dashboard-breakdown-column i.chart-tone-0, .bar-fill.chart-tone-0 { background: var(--chart-primary); }
.dashboard-breakdown-column i.chart-tone-1, .bar-fill.chart-tone-1 { background: var(--chart-berry); }
.dashboard-breakdown-column i.chart-tone-2, .bar-fill.chart-tone-2 { background: var(--chart-gold); }
.dashboard-breakdown-column i.chart-tone-3, .bar-fill.chart-tone-3 { background: var(--chart-sage); }
.dashboard-breakdown-column i.chart-tone-4, .bar-fill.chart-tone-4 { background: var(--chart-plum); }

.dashboard-breakdown-chart { display: grid; min-height: 226px; gap: 12px; margin: 0; padding: 15px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-breakdown-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; min-width: 0; height: 178px; gap: 10px; }
.dashboard-breakdown-chart.is-single .dashboard-breakdown-columns { grid-auto-columns: minmax(76px, 116px); justify-content: center; }
.dashboard-breakdown-column { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: end; min-width: 0; gap: 7px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.dashboard-breakdown-column:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.dashboard-breakdown-column.is-selected i { filter: brightness(.84); }
.dashboard-breakdown-column > strong, .dashboard-breakdown-column span { min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-breakdown-column > strong { color: var(--ink); font-size: 11px; font-weight: var(--font-weight-semibold); line-height: 1.25; }
.dashboard-breakdown-column > div { display: flex; min-height: 0; height: 100%; align-self: stretch; align-items: end; border-bottom: 1px solid var(--line-strong); }
.dashboard-breakdown-column i { width: 100%; height: var(--column-value, 0%); min-height: 0; border-radius: 5px 5px 0 0; background: var(--chart-primary); }
.dashboard-breakdown-column span { color: var(--muted); font-size: 10px; line-height: 1.25; }
.dashboard-breakdown-chart > .dashboard-legend { padding-bottom: 14px; }
.dashboard-breakdown-chart.is-empty { align-content: center; min-height: 196px; gap: 16px; }
.dashboard-breakdown-empty-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; height: 106px; gap: 10px; padding: 0 10px; border-bottom: 1px solid var(--line-strong); }
.dashboard-breakdown-empty-columns i { display: block; height: 24%; border-radius: 5px 5px 0 0; background: var(--surface-subtle); }
.dashboard-breakdown-empty-columns i:nth-child(2) { height: 48%; }
.dashboard-breakdown-empty-columns i:nth-child(3) { height: 72%; }
.dashboard-breakdown-empty-columns i:nth-child(4) { height: 38%; }
.dashboard-breakdown-empty-columns i:nth-child(5) { height: 56%; }
.dashboard-breakdown-chart figcaption { padding: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
.dashboard-daily-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; }
.dashboard-daily-facts > div { display: grid; min-width: 0; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.dashboard-daily-facts span, .dashboard-daily-facts small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.dashboard-daily-facts strong { overflow-wrap: anywhere; color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); }
.dashboard-comparison { display: grid; gap: 18px; min-width: 0; }
.dashboard-comparison table { width: 100%; min-width: 460px; border-collapse: collapse; }
.dashboard-comparison th, .dashboard-comparison td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; text-align: right; }
.dashboard-comparison th:first-child, .dashboard-comparison td:first-child { text-align: left; }
.dashboard-comparison thead th { color: var(--muted); font-size: 11px; font-weight: var(--font-weight-medium); }
.dashboard-donut-layout { display: grid; min-height: 218px; place-items: center; }
.donut { width: min(100%, 210px); overflow: visible; }
.donut circle { fill: none; stroke-width: 17; transform: rotate(-90deg); transform-origin: 50% 50%; }
.donut-base { stroke: var(--surface-subtle); }
.donut-total { font-size: 12px; font-weight: var(--font-weight-medium); text-anchor: middle; letter-spacing: -.02em; fill: var(--ink); }
.donut-caption { font-size: 10px; text-anchor: middle; fill: var(--muted); }
.donut[data-donut-state="empty"] .donut-base { stroke: var(--line-strong); }
.dashboard-legend { display: grid; gap: 10px; }
.dashboard-legend > div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.dashboard-legend strong { color: var(--ink); font-size: 13px; font-weight: var(--font-weight-semibold); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.bar-track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-subtle); }
.bar-fill { width: var(--bar-value, 0%); height: 100%; border-radius: inherit; background: var(--chart-primary); }
.bar-track-signed { position: relative; }
.bar-track-signed .bar-baseline { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--bar-zero, 50%); width: 1px; background: color-mix(in srgb, var(--ink) 34%, transparent); transform: translateX(-0.5px); }
.bar-track-signed .bar-fill-signed { position: absolute; z-index: 0; top: 0; width: var(--bar-length, 0%); }
.bar-track-signed .bar-fill-signed.is-positive { left: var(--bar-zero, 50%); border-radius: 0 999px 999px 0; }
.bar-track-signed .bar-fill-signed.is-negative { right: calc(100% - var(--bar-zero, 50%)); border-radius: 999px 0 0 999px; }
.dashboard-payback-list { display: grid; border-top: 1px solid var(--line); }
.dashboard-payback-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 22px; min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.dashboard-payback-row > div:first-child { display: grid; min-width: 0; gap: 5px; }
.dashboard-payback-row > div:first-child strong, .dashboard-payback-row > div:nth-child(2) > strong { color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); }
.dashboard-payback-row > div:first-child span, .dashboard-payback-row small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.dashboard-payback-row > div:nth-child(2) { display: grid; gap: 3px; text-align: right; }
.dashboard-payback-row .bar-track, .dashboard-payback-row footer { grid-column: 1 / -1; }
.dashboard-payback-row footer { display: flex; margin-top: 2px; }
.dashboard-payback-row.is-setup-required { align-items: start; }
.dashboard-payback-row .payback-setup-note { max-width: 440px; color: var(--muted-strong); }

.dashboard-kpi-modal-backdrop { z-index: 60; }
.dashboard-kpi-detail { width: min(100%, 920px); max-height: min(780px, calc(100dvh - 40px)); display: grid; gap: 22px; padding: 28px; border-color: var(--line); border-top: 3px solid var(--accent-strong); }
.dashboard-kpi-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dashboard-kpi-detail-head .eyebrow { margin-bottom: 5px; }
.dashboard-kpi-detail-head h2 { margin: 0; color: var(--ink); font-size: 25px; font-weight: var(--font-weight-semibold); letter-spacing: -.03em; }
.dashboard-kpi-detail-hero { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr); align-items: end; gap: 16px 34px; }
.dashboard-kpi-detail-hero > div { display: grid; gap: 5px; }
.dashboard-kpi-detail-hero strong { color: var(--ink); font-size: clamp(28px, 3vw, 42px); font-weight: var(--font-weight-semibold); letter-spacing: -.045em; }
.dashboard-kpi-detail-hero span, .dashboard-kpi-detail-hero p { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.dashboard-kpi-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.dashboard-kpi-values > div { display: grid; min-width: 0; min-height: 86px; gap: 5px; padding: 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-kpi-values dt, .dashboard-kpi-values small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.dashboard-kpi-values dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 17px; font-weight: var(--font-weight-semibold); letter-spacing: -.02em; }
.dashboard-kpi-detail-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.dashboard-kpi-detail-group { min-width: 0; }
.dashboard-kpi-detail-group h3 { margin: 0 0 12px; color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); }
.dashboard-kpi-breakdown { display: grid; border-top: 1px solid var(--line); }
.dashboard-kpi-breakdown-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-width: 0; gap: 7px 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.dashboard-kpi-breakdown-row > div:first-child { display: grid; min-width: 0; gap: 3px; }
.dashboard-kpi-breakdown-row > div:first-child strong, .dashboard-kpi-breakdown-row > strong { overflow-wrap: anywhere; color: var(--ink); font-size: 13px; font-weight: var(--font-weight-semibold); }
.dashboard-kpi-breakdown-row > div:first-child span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.dashboard-kpi-breakdown-row > .bar-track { grid-column: 1 / -1; }
.dashboard-kpi-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.dashboard-kpi-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard-ai-stub { min-height: 260px; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-content: center; gap: 18px; padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-ai-icon { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: var(--accent-strong); }
.dashboard-ai-icon .ph-icon { width: 24px; height: 24px; }
.dashboard-ai-stub h2 { margin: 0; color: var(--ink); font-size: 26px; font-weight: var(--font-weight-semibold); letter-spacing: -.03em; }
.dashboard-ai-stub p:last-child { max-width: 500px; margin: 9px 0 0; color: var(--muted); line-height: 1.5; }

@media (max-width: 1023px) {
  .dashboard-metric-group-primary .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metric-group-operating .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-performance-list { grid-template-columns: 1fr; }
  .dashboard-section-grid { grid-template-columns: 1fr; gap: 32px; }
  .dashboard-section-grid > .dashboard-section + .dashboard-section { border-left: 0; padding-left: 0; }
}

@media (max-width: 767px) {
  .dashboard-page-head { align-items: stretch; }
  .dashboard-page-controls, .dashboard-actions { width: 100%; }
  .dashboard-page-controls > .range-control { flex: 1 1 100%; }
  .dashboard-metric-group > header, .dashboard-section > header { display: grid; gap: 7px; }
  .dashboard-metric-group > header > p, .dashboard-section > header > p, .dashboard-payer-summary header p { max-width: none; text-align: left; }
  .dashboard-metric-group-primary .dashboard-metrics, .dashboard-metric-group-operating .dashboard-metrics, .dashboard-metric-group-finance .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metric { min-height: 136px; padding: 14px 11px; }
  .dashboard-metric > span, .dashboard-metric small { font-size: 10px; }
  .dashboard-metric strong { font-size: 19px; }
  .dashboard-period-coverage, .dashboard-allocation { grid-template-columns: 1fr; }
  .dashboard-period-coverage p, .dashboard-allocation p { grid-column: auto; }
  .dashboard-payer-summary > div { grid-template-columns: 1fr 1fr; }
  .chart-wrap { height: 242px; }
  .dashboard-chart-interactions--desktop { display: none; }
  .dashboard-chart-interactions--mobile { display: block; }
  .dashboard-chart-inspection { grid-template-columns: 1fr; }
  .line-chart--desktop { display: none; }
  .line-chart--mobile { display: block; }
  .dashboard-performance-facts { grid-template-columns: 1fr; }
  .dashboard-fact-grid, .dashboard-kpi-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-booking-empty { grid-template-columns: 1fr; gap: 13px; }
  .dashboard-kpi-detail { gap: 18px; padding: 22px 18px max(24px, env(safe-area-inset-bottom)); }
  .dashboard-kpi-detail-head h2 { font-size: 23px; }
  .dashboard-kpi-detail-hero, .dashboard-kpi-detail-groups { grid-template-columns: 1fr; }
  .dashboard-kpi-values > div { min-height: 78px; padding: 11px; }
  .dashboard-kpi-values > div:last-child:nth-child(odd) { grid-column: span 2; }
  .dashboard-breakdown-chart { min-height: 212px; }
  .dashboard-breakdown-columns { height: 160px; gap: 7px; }
  .dashboard-breakdown-column > strong { font-size: 10px; }
  .dashboard-payback-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dashboard-comparison table { min-width: 0; table-layout: fixed; }
  .dashboard-comparison th, .dashboard-comparison td { padding: 8px 6px; overflow-wrap: anywhere; font-size: 11px; }
  .dashboard-ai-stub { min-height: 220px; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
  .dashboard-ai-icon { width: 40px; height: 40px; }
  .dashboard-ai-stub h2 { font-size: 23px; }
}

@keyframes dashboard-refresh-spin { to { transform: rotate(360deg); } }
.dashboard-refresh-button.is-refreshing .ph-icon { animation: dashboard-refresh-spin .75s linear infinite; }


/* Source: styles/ai-report.css */
.ai-report-page {
  max-width: 920px;
  margin: 0 auto;
  gap: 20px;
}
.ai-report-intro {
  max-width: 650px;
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.5;
}
.ai-report-request {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding: 20px 0;
  border-block: 1px solid var(--line);
}
.ai-report-request > div {
  display: grid;
  gap: 12px;
}
.ai-report-request-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 14px; }
.ai-report-request label {
  display: grid;
  gap: 5px;
  color: var(--muted-strong);
  font-size: 13px;
}
.ai-report-request select {
  width: min(230px, 100%);
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0 10px;
  color: var(--ink);
}
.ai-report-error {
  padding: 12px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
}
.ai-report-coverage,
.ai-report-section,
.ai-report-history {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 20px;
}
.ai-report-coverage h2,
.ai-report-section h3 {
  margin: 0 0 9px;
  font-size: 17px;
}
.ai-report-coverage ul,
.ai-report-section ul,
.ai-report-section ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted-strong);
  line-height: 1.55;
}
.ai-report-result header h2 {
  margin: 3px 0 8px;
  font-size: 26px;
}
.ai-report-result header p {
  max-width: 760px;
  margin: 0;
  line-height: 1.55;
}
.ai-report-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 16px;
  padding: 14px 0;
}
.ai-report-item p,
.ai-report-evidence p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.5;
}
.ai-report-item > ol,
.ai-report-item > details {
  grid-column: 1 / -1;
}
.ai-report-evidence summary,
.ai-report-history summary {
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: var(--font-weight-semibold);
}
.ai-report-history {
  display: grid;
  gap: 10px;
}
.ai-report-history-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.ai-report-history-row small {
  color: var(--muted);
}
@media (max-width: 520px) {
  .ai-report-request {
    align-items: stretch;
    flex-direction: column;
  }
  .ai-report-request .button {
    width: 100%;
  }
  .ai-report-request-controls { align-items: stretch; flex-direction: column; }
  .ai-report-request label, .ai-report-request select { width: 100%; }
  .ai-report-result header h2 {
    font-size: 23px;
  }
}
.ai-report-page {
  min-width: 0;
}
.ai-report-page .page-head {
  margin-bottom: 0;
}
.ai-report-request > div {
  min-width: 0;
  flex: 1;
}
.ai-report-request > .button {
  flex-shrink: 0;
}
.ai-report-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.ai-report-result {
  padding-top: 0;
}
.ai-report-result > header {
  margin-bottom: 22px;
}
.ai-report-result > .ai-report-section:first-of-type { border-top: 1px solid var(--line); }
.ai-report-result .ai-report-domain-reviews { max-width: 760px; }
.ai-report-item > .button {
  grid-column: 1;
  justify-self: start;
}
.ai-report-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 22px 0;
  border-block: 1px solid var(--line);
}
.ai-report-metrics > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.ai-report-metrics span,
.ai-report-metrics small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.ai-report-metrics strong {
  color: var(--ink);
  font-size: clamp(18px, 2.2vw, 25px);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}
.ai-report-quality-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ai-report-scope {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.ai-report-scope summary {
  cursor: pointer;
  color: var(--muted-strong);
}
.ai-report-scope ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}
.ai-report-scope li {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
}
.ai-report-scope small {
  color: var(--muted);
}
.ai-report-evidence p {
  font-size: 13px;
  padding-top: 8px;
}
.ai-report-history-row {
  cursor: pointer;
  min-height: 44px;
}
@media (max-width: 650px) {
  .ai-report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ai-report-page .page-head h1 {
    font-size: 27px;
  }
}

.ai-report-result h2,
.ai-report-item strong,
.ai-report-item p {
  overflow-wrap: anywhere;
}
.ai-report-controls,
.ai-report-current-quality {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.ai-report-controls > summary,
.ai-report-current-quality > summary {
  color: var(--muted-strong);
  cursor: pointer;
  font-size: 14px;
}
.ai-report-controls .ai-report-request {
  border-bottom: 0;
  margin-top: 14px;
}
.ai-report-current-quality .ai-report-coverage {
  border-bottom: 0;
}
.ai-report-page .page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}
.ai-report-page .page-head h1 {
  margin: 5px 0 0;
}
.ai-report-page > .ai-report-meta {
  margin: 0;
}
.ai-report-page .page-head > .icon-button {
  flex-shrink: 0;
}
.ai-report-result > header .button {
  margin-top: 14px;
}
.ai-report-domain-meta,
.ai-report-provenance {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.ai-report-provenance {
  margin: 18px 0 0;
}


/* Source: styles/responsive.css */
/* Responsive rules are kept separate so every screen shares the same breakpoints. */
.mobile-logout { display: none; }
@media (min-width: 768px) and (max-width: 1279px) {
  .dashboard-metric-group-primary .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metric-group-supporting .dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-section-grid { grid-template-columns: 1fr; gap: 32px; }
  .dashboard-section-grid > .dashboard-section + .dashboard-section { border-left: 0; padding-left: 0; }
  .platform-admin-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .platform-admin-workspace { grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr); gap: 28px; }
}

@media (max-width: 767px) {
  .dashboard-metric-group-primary .dashboard-metrics, .dashboard-metric-group-supporting .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-section-grid { grid-template-columns: 1fr; gap: 28px; }
  .dashboard-section-grid > .dashboard-section + .dashboard-section { border-left: 0; padding-left: 0; }
  .dashboard-kpi-detail-hero, .dashboard-kpi-detail-groups { grid-template-columns: 1fr; }
  .dashboard-occupancy-portfolio > div { grid-template-columns: 1fr; }
}

@media (min-width: 901px) {
  .prototype-toast { bottom: 20px; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main-area { padding: 12px 20px calc(88px + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 28px; }
  .mobile-logout { display: inline-grid; }
  .mobile-nav {
    position: fixed;
    z-index: 15;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 7px 10px max(7px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-fixed);
    backdrop-filter: blur(12px);
  }
  .mobile-nav .nav-item { min-height: 52px; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 2px; border-radius: var(--radius-sm); font-size: 11px; text-align: center; }
  .mobile-nav .nav-icon { height: 20px; }.mobile-nav .nav-icon .ph-icon { width: 19px; height: 19px; }
  .mobile-nav .nav-item-badge { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-actions { width: 100%; }.page-actions .button { flex: 1; }
  .operations-grid, .settings-grid { grid-template-columns: 1fr; }
  .platform-admin-workspace { grid-template-columns: 1fr; gap: 28px; }
  .platform-admin-list { max-width: none; }
  .yandex-travel-readiness-item { grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 13px; }
  .yandex-travel-readiness-item .ph-icon { width: 17px; height: 17px; }
  .team-members-grid, .settings-feature-grid { grid-template-columns: 1fr; }.team-management-panel .team-member-card { border-right: 0; }
  .onboarding-top { grid-template-columns: 1fr auto; }.onboarding-meta { display: none; }.onboarding-body { margin: 20px auto calc(100px + env(safe-area-inset-bottom)); }.onboarding-form { min-height: auto; }.item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.item-grid .compact-field:first-child { grid-column: span 2; }.workflow-stage-grid, .task-scenario-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .entry { align-items: start; padding: 0; }
  .entry-card { min-height: 100vh; min-height: 100dvh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
  .entry-brand { justify-content: flex-start; padding: 20px 20px 0; }
  .entry-form { align-content: start; padding: 22px 20px 44px; border: 0; border-radius: 0; }
  .button, .range-control { min-height: var(--touch-control-height); }
  .field input:not([type="checkbox"]):not([type="radio"]), .field select:not([multiple]):not([size]), .field select:not([multiple])[size="0"], .field select:not([multiple])[size="1"], .field textarea, input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: var(--touch-control-height); font-size: 16px; }
  .form-draft-notice { align-items: flex-start; }.form-draft-notice .text-action { width: auto; }
  .main-area { padding: 12px 16px calc(88px + env(safe-area-inset-bottom)); }
  .topbar { flex-wrap: wrap; align-items: flex-start; margin-bottom: 25px; row-gap: 12px; }.workspace-company.has-error { flex-basis: 100%; max-width: none; }.top-actions { margin-left: auto; justify-content: flex-end; }
  .page { gap: 25px; }.page-title { font-size: 32px; }.page-subtitle { font-size: 14px; }
  .range-control { width: 100%; justify-content: space-between; }
  .dashboard-page-head { align-items: stretch; }.dashboard-page-controls, .dashboard-actions { width: 100%; }.dashboard-page-controls > .range-control { flex: 1 1 100%; }.dashboard-actions .button { flex: 1; }
  .operations-page .page-actions { width: 100%; }.operations-page .page-actions .range-control { width: 100%; }.operations-page .page-actions .button { flex: 1; }
  .operations-history-head { align-items: flex-start; flex-direction: column; }.operations-filters { width: 100%; }.operations-filter { flex: 1; }
  .operation-row { grid-template-columns: 1fr; align-items: start; gap: 10px; }.operation-row-total { width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; }.operation-row-actions, .operation-source-note { justify-self: end; text-align: right; }.operation-row-total > strong { grid-row: 1; }.operation-row-actions, .operation-source-note { grid-column: 2; grid-row: 1; }
  .card { padding: 18px 0; }.card-head { align-items: flex-start; }.card-head p { display: none; }.card-head h2, .card-head h3 { font-size: 19px; }
  .chart-wrap { height: 220px; }.insight-grid { grid-template-columns: 1fr 1fr; }.insight { min-height: 94px; padding: 12px; }.insight strong { font-size: 19px; }
  .dashboard-analytics { gap: 28px; }.dashboard-metric-group > header { display: grid; gap: 6px; }.dashboard-metric-group > header > p { max-width: none; text-align: left; }.dashboard-metric { min-height: 126px; padding: 13px 10px; }.dashboard-metric > span, .dashboard-metric small { font-size: 10px; }.dashboard-metric strong { font-size: 18px; }.dashboard-kpi-detail { gap: 18px; padding: 22px 18px max(24px, env(safe-area-inset-bottom)); }.dashboard-kpi-detail-head h2 { font-size: 23px; }.dashboard-kpi-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-kpi-values > div { min-height: 78px; padding: 11px; }.dashboard-kpi-values > div:last-child:nth-child(odd) { grid-column: span 2; }.dashboard-kpi-detail-groups { gap: 20px; }.dashboard-breakdown-chart { min-height: 212px; }.dashboard-breakdown-columns { height: 160px; gap: 7px; }.dashboard-breakdown-column > strong { font-size: 10px; }.dashboard-section > header { display: grid; gap: 7px; }.dashboard-section > header > p { max-width: none; text-align: left; }.dashboard-fact-grid, .dashboard-summary-list { grid-template-columns: 1fr 1fr; }.dashboard-booking-empty { grid-template-columns: 1fr; gap: 13px; }.dashboard-object-row { grid-template-columns: 1fr; gap: 10px; }.dashboard-object-value { text-align: left; }.dashboard-payback-row { grid-template-columns: minmax(0, 1fr) auto; }.dashboard-ai-stub { min-height: 220px; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }.dashboard-ai-icon { width: 40px; height: 40px; }.dashboard-ai-stub h2 { font-size: 23px; }
  .section-intro { display: grid; gap: 12px; }.guest-card-move select, .guest-card-move .button, .text-action { min-height: 44px; }
  .modal-backdrop { align-items: end; padding: 0; }.modal { width: 100%; max-height: min(88vh, 760px); max-height: min(88dvh, 760px); padding: 18px; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 20px 20px 0 0; }.modal:has(> .modal-body) { padding: 0; }.modal:has(> .modal-body) > .modal-head { padding: 18px 18px 14px; }.modal:has(> .modal-body) > .modal-body { padding: 18px; }.modal-head h2 { font-size: 24px; }.modal:has(> .modal-body) > .modal-actions { display: grid; grid-template-columns: 1fr; padding: 14px 18px max(18px, env(safe-area-inset-bottom)); }.modal:has(> .modal-body) > .modal-actions .button { width: 100%; }.operation-editor-cancel { display: none; }
  .calendar-cell { min-height: 40px; }.calendar-cell .day-number { width: 33px; height: 33px; }.month-switch { margin-top: 18px; }
  .settings-overview .page-head { gap: 12px; }.setting-row { gap: 9px; }.settings-list .setting-row { grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 64px; }.setting-icon { width: 28px; height: 28px; }.setting-icon .ph-icon { width: 20px; height: 20px; }.setting-row-copy > span { font-size: 12px; }.settings-summary { gap: 7px 12px; }.settings-summary span + span::before { margin-right: 12px; }
  .platform-admin-page > .page-head { gap: 12px; }.platform-admin-page > .page-head .button { width: 100%; }.platform-admin-range { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }.platform-admin-range .button { width: 100%; padding-inline: 6px; }.platform-admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.platform-admin-metric { min-height: 98px; padding: 13px 12px; }.platform-admin-metric > span { font-size: 11px; }.platform-admin-metric > strong { font-size: 21px; }.platform-admin-detail { gap: 26px; }.platform-admin-detail .platform-admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }.platform-admin-organizations .platform-admin-organization { grid-template-columns: 34px minmax(0, 1fr) auto; }.platform-admin-organization:hover { padding-inline: 0; background: transparent; }.platform-admin-organization.is-selected { padding-inline: 9px; }.platform-admin-detail .setting-row, .platform-admin-journal-row { grid-template-columns: 34px minmax(0, 1fr); }.platform-admin-journal-filters { grid-template-columns: 1fr; align-items: stretch; }.platform-admin-journal-filters .button { width: 100%; }.platform-admin-denied { min-height: 0; grid-template-columns: 36px minmax(0, 1fr); }.platform-admin-denied .setting-icon { width: 36px; height: 36px; }
  .integration-card { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .integration-facts { grid-template-columns: 1fr; gap: 0; }.integration-actions { display: grid; grid-template-columns: 1fr; }.integration-actions .button { width: 100%; }
  .form-grid, .company-profile-grid, .choice-grid, .item-grid, .object-grid { grid-template-columns: 1fr; }.company-transition { width: min(calc(100% - 32px), 480px); max-width: min(calc(100% - 32px), 480px); padding: 20px; }.item-grid .compact-field:first-child, .object-grid .compact-field:first-child { grid-column: auto; }.item-grid-simple { grid-template-columns: minmax(0, 1fr) auto; }.choice { min-height: 112px; }.onboarding-actions { align-items: stretch; flex-direction: column-reverse; }.onboarding-actions > div { display: grid; grid-template-columns: 1fr; }.onboarding-actions .button { width: 100%; }.onboarding-actions .button-primary { min-width: 0; }.onboarding-form { gap: 22px; padding: 18px 0; }
  .subscription-catalog { grid-template-columns: 1fr; }.team-member-actions { display: grid; grid-template-columns: 1fr; }.team-member-actions .field, .team-member-actions .button { width: 100%; min-width: 0; }
}

@media (max-width: 390px) {
  .mobile-nav .nav-item { font-size: 10px; }.chart-wrap { height: 198px; }.page-title { font-size: 30px; }.dashboard-metric strong { font-size: 18px; }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .main-area { padding-top: 72px; padding-bottom: 28px; }
  .mobile-nav { top: 10px; right: 12px; bottom: auto; left: auto; grid-template-columns: repeat(5, 44px); width: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-md); }
  .mobile-nav .nav-item { min-height: 44px; padding: 0; }.mobile-nav .nav-item-label { display: none; }.mobile-nav .nav-icon { height: auto; }
}

@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: var(--touch-control-height); font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Source: features/first-steps/first-steps.css */
/* Fullscreen personal route: solid canvas, no workspace navigation or chips. */
dialog.first-steps-dialog {
  --house-paper: #f8f6f2;
  --house-ink: #2f3032;
  --house-muted: #66615c;
  --house-coral: #ef8b73;
  margin: 0; padding: 0; border: 0; width: 100%; max-width: none;
  height: 100%; height: 100dvh; max-height: none; inset: 0;
  color: var(--house-ink); background: var(--house-paper); overflow: hidden;
}
dialog.first-steps-dialog::backdrop { background: #f8f6f2; }
body:has(dialog.first-steps-dialog[open]) { overflow: hidden; }
.first-steps-window { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; height: 100%; max-width: 1320px; margin-inline: auto; padding: 32px 48px 28px; }
.first-steps-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.first-steps-brand { display: flex; align-items: center; gap: 20px; font-size: 24px; font-weight: 700; letter-spacing: -.8px; }
.first-steps-brand span { font-size: 14px; font-weight: 500; color: var(--house-muted); letter-spacing: 0; }
.first-steps-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #dedbd5; border-radius: 50%; color: inherit; background: transparent; }
.first-steps-icon .ph-icon { width: 20px; height: 20px; }
.first-steps-progress { display: flex; gap: 7px; max-width: 410px; margin-block: 24px 0; }
.first-steps-progress span { flex: 1; height: 3px; border-radius: 3px; background: #e0ddd7; transition: background .3s ease; }
.first-steps-progress .is-active { background: var(--house-coral); }
.first-steps-body { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 64px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-gutter: stable; padding-block: 20px; touch-action: pan-y; }
.first-steps-art { margin: 0; display: grid; place-items: center; }
.first-steps-art img { display: block; width: 100%; height: auto; object-fit: contain; max-height: 600px; animation: first-steps-enter .65s cubic-bezier(.2,.8,.2,1) both; }
.first-steps-copy { min-width: 0; max-width: 500px; padding-right: 8px; }
.first-steps-kicker { font-size: 13px; color: var(--house-muted); margin: 0 0 18px; }
.first-steps-copy h1 { margin: 0 0 20px; font-size: clamp(32px,3.5vw,48px); letter-spacing: -.045em; line-height: 1.1; font-weight: 600; text-wrap: balance; }
.first-steps-summary { margin: 0; font-size: 19px; line-height: 1.5; color: var(--house-muted); max-width: 410px; }
.first-steps-disclosure { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; margin-top: 14px; border: 0; color: var(--house-ink); background: transparent; font-size: 15px; font-weight: 600; min-height: 44px; }
.first-steps-disclosure .ph-icon { width: 16px; height: 16px; transition: transform .3s ease; }
.first-steps-disclosure[aria-expanded="true"] .ph-icon { transform: rotate(180deg); }
.first-steps-details { max-width: 460px; animation: first-steps-details .3s ease both; }
.first-steps-details[hidden] { display: none; }
.first-steps-details p { font-size: 15px; line-height: 1.6; color: var(--house-muted); margin: 0 0 14px; }
.first-steps-feedback { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--house-muted); margin-top: 12px; }
.first-steps-feedback button { color: var(--house-ink); background: transparent; border: 0; text-decoration: underline; padding: 4px 0; min-height: 44px; }
.first-steps-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; }
.first-steps-back,.first-steps-next { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; border: 0; border-radius: 14px; padding: 12px 24px; font-size: 15px; font-weight: 600; }
.first-steps-back { color: var(--house-ink); background: transparent; }
.first-steps-back:disabled { opacity: .3; }
.first-steps-next { color: var(--house-paper); background: var(--house-ink); min-width: 160px; box-shadow: 0 8px 20px #2f303215; }
.first-steps-next .ph-icon { color: var(--house-coral); width: 20px; height: 20px; }
.first-steps-next:disabled { opacity: .5; }
@keyframes first-steps-enter { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes first-steps-details { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) {
  .first-steps-window { padding: 28px 36px 24px; }
  .first-steps-body { gap: 32px; }
}
@media (max-width: 900px) and (min-height: 900px) {
  .first-steps-body { grid-template-columns: 1fr; gap: 4px; align-content: center; }
  .first-steps-art img { max-height: 410px; width: min(100%,430px); }
  .first-steps-copy { width: 100%; max-width: 570px; margin-inline: auto; }
  .first-steps-copy h1 { font-size: 38px; }
}
@media (max-width: 600px) {
  .first-steps-window { padding: max(16px,env(safe-area-inset-top)) 22px max(18px,env(safe-area-inset-bottom)); }
  .first-steps-brand { font-size: 23px; gap: 14px; }
  .first-steps-brand span { font-size: 12px; }
  .first-steps-progress { margin-top: 18px; max-width: none; }
  .first-steps-body { grid-template-columns: 1fr; align-content: start; gap: 4px; padding-block: 10px 18px; }
  .first-steps-art img { width: min(100%,310px); max-height: min(38dvh,310px); }
  .first-steps-copy { padding: 0; }
  .first-steps-kicker { margin-bottom: 12px; font-size: 12px; }
  .first-steps-copy h1 { font-size: 32px; margin-bottom: 14px; }
  .first-steps-summary { font-size: 17px; }
  .first-steps-disclosure { margin-top: 8px; }
  .first-steps-foot { padding-top: 12px; }
  .first-steps-back,.first-steps-next { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .first-steps-art img,.first-steps-details { animation: none; }
  .first-steps-progress span,.first-steps-disclosure .ph-icon { transition: none; }
}