:root {
  color-scheme: light;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: #dbeafe;
  --accent-softer: #eff6ff;
  --ink: #132238;
  --ink-soft: #34445b;
  --muted: #64748b;
  --muted-2: #8a9aaf;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: #f7f9fc;
  --surface-muted: #edf2f7;
  --canvas: #f3f6fa;
  --line: #dfe6ef;
  --line-strong: #cbd5e1;
  --nav: #0c1728;
  --nav-soft: #162438;
  --nav-ink: #f8fafc;
  --nav-muted: #94a3b8;
  --success: #087f5b;
  --success-soft: #e6f8f1;
  --warning: #b45309;
  --warning-soft: #fff7e6;
  --danger: #c0263d;
  --danger-soft: #fff0f2;
  --violet: #6d4aff;
  --violet-soft: #f0ecff;
  --cyan: #0e7490;
  --cyan-soft: #e5f8fb;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px rgba(15, 23, 42, .05);
  --shadow-float: 0 24px 70px rgba(15, 23, 42, .20);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --sidebar: 270px;
  --ribbon: 28px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --accent: #60a5fa;
  --accent-strong: #93c5fd;
  --accent-soft: rgba(59, 130, 246, .22);
  --accent-softer: rgba(59, 130, 246, .11);
  --ink: #edf5ff;
  --ink-soft: #c6d1df;
  --muted: #93a4b8;
  --muted-2: #718096;
  --surface: #121d2c;
  --surface-raised: #172437;
  --surface-subtle: #0f1a29;
  --surface-muted: #1d2c40;
  --canvas: #091321;
  --line: #26384d;
  --line-strong: #35506d;
  --nav: #07101c;
  --nav-soft: #111f31;
  --success: #5ee0b4;
  --success-soft: rgba(16, 185, 129, .13);
  --warning: #f6bd67;
  --warning-soft: rgba(245, 158, 11, .13);
  --danger: #ff8191;
  --danger-soft: rgba(244, 63, 94, .13);
  --violet: #aa94ff;
  --violet-soft: rgba(124, 92, 255, .16);
  --cyan: #67d8ef;
  --cyan-soft: rgba(6, 182, 212, .13);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .15), 0 16px 34px rgba(0, 0, 0, .16);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .55; }
svg { display: block; }

.skip-link { position: fixed; z-index: 999; left: 16px; top: 8px; transform: translateY(-160%); border-radius: 10px; background: var(--ink); color: var(--surface); padding: 10px 14px; font-weight: 800; text-decoration: none; transition: transform .15s ease; }
.skip-link:focus { transform: translateY(0); }
.demo-ribbon { position: fixed; z-index: 80; inset: 0 0 auto 0; height: var(--ribbon); display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff7ed; border-bottom: 1px solid #fed7aa; color: #9a3412; font-size: 10px; font-weight: 900; letter-spacing: .09em; }
html[data-theme="dark"] .demo-ribbon { background: #2b1d11; border-color: #5f3819; color: #fdba74; }
.ribbon-dot { width: 7px; height: 7px; border-radius: 999px; background: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .13); }

.app-shell { min-height: 100vh; padding-top: var(--ribbon); }
.sidebar { position: fixed; z-index: 50; left: 0; top: var(--ribbon); bottom: 0; width: var(--sidebar); display: flex; flex-direction: column; overflow: hidden; background: var(--nav); color: var(--nav-ink); border-right: 1px solid rgba(148, 163, 184, .13); }
.brand-row { min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 13px; background: linear-gradient(145deg, #3b82f6, #2558d7); color: white; font-size: 20px; font-weight: 950; box-shadow: 0 8px 22px rgba(37, 99, 235, .34); }
.brand-mark.small { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
.brand-copy { min-width: 0; display: grid; }
.brand-copy strong { font-size: 14px; font-weight: 900; letter-spacing: -.01em; }
.brand-copy span { color: var(--nav-muted); font-size: 10px; font-weight: 700; }
.location-switcher { margin: 0 12px 12px; min-height: 66px; display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); border: 1px solid rgba(148, 163, 184, .18); border-radius: 14px; background: rgba(255, 255, 255, .045); padding: 9px 10px; text-align: left; cursor: pointer; }
.location-switcher:hover { background: rgba(255, 255, 255, .07); }
.location-logo { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; background: #1f9d78; color: white; font-size: 11px; font-weight: 950; }
.location-copy { min-width: 0; display: grid; flex: 1; }
.location-copy strong { overflow: hidden; color: white; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.location-copy small { color: var(--nav-muted); font-size: 10px; font-weight: 650; }
.chevron { color: var(--nav-muted); }
.nav-groups { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 2px 10px 16px; scrollbar-width: thin; scrollbar-color: #314157 transparent; }
.nav-group + .nav-group { margin-top: 16px; }
.nav-group-label { margin: 0 10px 6px; color: #6f8198; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.nav-item { min-height: 40px; width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 10px; background: transparent; color: #aebbd0; padding: 8px 10px; cursor: pointer; text-align: left; transition: background .14s ease, color .14s ease, transform .14s ease; }
.nav-item:hover { background: rgba(255,255,255,.055); color: white; }
.nav-item.active { background: color-mix(in srgb, var(--accent) 18%, var(--sidebar)); color: white; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.nav-item span:last-child { font-size: 12px; font-weight: 800; }
.nav-icon { width: 18px; height: 18px; flex: 0 0 auto; color: currentColor; }
.nav-icon svg { width: 18px; height: 18px; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.08); color: #dce7f8; padding: 0 6px; font-size: 9px; font-weight: 900; }
.nav-item.active .nav-badge { background: #2563eb; color: white; }
.sidebar-footer { border-top: 1px solid rgba(148, 163, 184, .13); padding: 10px; }
.support-link { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 11px; background: transparent; padding: 9px 10px; color: #aebbd0; cursor: pointer; text-align: left; }
.support-link:hover { background: rgba(255,255,255,.05); color: white; }
.support-link > span:nth-child(2) { display: grid; }
.support-link strong { font-size: 11px; }
.support-link small { color: #6f8198; font-size: 9px; }
.user-card { margin-top: 6px; display: flex; align-items: center; gap: 9px; border-radius: 12px; background: rgba(255,255,255,.04); padding: 8px; }
.user-avatar, .header-avatar { display: grid; place-items: center; border-radius: 999px; background: linear-gradient(145deg, #334155, #172033); color: white; font-weight: 900; }
.user-avatar { width: 34px; height: 34px; font-size: 10px; }
.header-avatar { width: 34px; height: 34px; font-size: 10px; }
.user-card > span:nth-child(2) { min-width: 0; display: grid; flex: 1; }
.user-card strong { font-size: 10px; }
.user-card small { color: #76879e; font-size: 9px; }

.app-stage { min-height: calc(100vh - var(--ribbon)); margin-left: var(--sidebar); }
.topbar { position: sticky; z-index: 40; top: var(--ribbon); height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); padding: 0 28px; backdrop-filter: blur(16px); }
.topbar-context { display: grid; min-width: 0; }
.breadcrumb { color: var(--muted); font-size: 10px; font-weight: 800; }
.topbar-context strong { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.command-search { min-width: 230px; min-height: 38px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-subtle); color: var(--muted); padding: 7px 9px; cursor: pointer; }
.command-search:hover { border-color: var(--line-strong); background: var(--surface); }
.command-search svg { width: 15px; height: 15px; }
.command-search span:nth-child(2) { flex: 1; text-align: left; font-size: 11px; font-weight: 700; }
kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); color: var(--muted); padding: 1px 5px; font-size: 9px; }
.icon-button { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--muted); cursor: pointer; }
.icon-button:hover { border-color: var(--line-strong); color: var(--ink); }
.icon-button svg { width: 17px; height: 17px; }
.notification-button { position: relative; }
.notification-dot { position: absolute; right: 7px; top: 7px; width: 6px; height: 6px; border-radius: 999px; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }
.mobile-brand { display: none; align-items: center; gap: 9px; }
.mobile-brand > div:last-child { display: grid; }
.mobile-brand strong { font-size: 12px; font-weight: 900; }
.mobile-brand span { color: var(--muted); font-size: 9px; font-weight: 700; }

.workspace { width: min(100%, 1640px); margin: 0 auto; padding: 26px 28px 52px; }
.page-stack { display: grid; gap: 20px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-heading { min-width: 0; }
.eyebrow { display: block; color: var(--accent-strong); font-size: 10px; font-weight: 950; letter-spacing: .105em; text-transform: uppercase; }
.page-heading h1 { margin: 5px 0 0; color: var(--ink); font-size: clamp(25px, 3vw, 34px); line-height: 1.1; letter-spacing: -.045em; }
.page-heading p { max-width: 720px; margin: 8px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 11px; padding: 9px 14px; font-size: 12px; font-weight: 850; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.button:hover { transform: translateY(-1px); }
.button svg { width: 16px; height: 16px; }
.button.primary { background: var(--accent); color: white; box-shadow: 0 8px 20px rgba(37, 99, 235, .18); }
.button.primary:hover { background: var(--accent-strong); }
.button.secondary { border-color: var(--line); background: var(--surface); color: var(--ink-soft); }
.button.ghost { background: transparent; color: var(--muted); }
.button.danger { border-color: color-mix(in srgb, var(--danger) 25%, var(--line)); background: var(--danger-soft); color: var(--danger); }
.button.small { min-height: 34px; border-radius: 9px; padding: 7px 10px; font-size: 10px; }

.card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.card.flat { box-shadow: none; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 17px 18px; }
.card-header h2, .card-header h3 { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.3; letter-spacing: -.015em; }
.card-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; font-weight: 600; }
.card-body { padding: 18px; }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.section-title h2 { margin: 0; color: var(--ink); font-size: 17px; letter-spacing: -.025em; }
.section-title p { margin: 4px 0 0; color: var(--muted); font-size: 11px; font-weight: 600; }
.text-link { border: 0; background: transparent; color: var(--accent-strong); font-size: 11px; font-weight: 850; cursor: pointer; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 15px; box-shadow: var(--shadow-card); }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-muted); color: var(--ink-soft); }
.stat-icon svg { width: 17px; height: 17px; }
.stat-card.tone-blue .stat-icon { background: var(--accent-softer); color: var(--accent-strong); }
.stat-card.tone-green .stat-icon { background: var(--success-soft); color: var(--success); }
.stat-card.tone-amber .stat-icon { background: var(--warning-soft); color: var(--warning); }
.stat-card.tone-red .stat-icon { background: var(--danger-soft); color: var(--danger); }
.stat-label { display: block; margin-top: 13px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; }
.stat-value { display: block; margin-top: 2px; color: var(--ink); font-size: 26px; font-weight: 950; line-height: 1.1; letter-spacing: -.045em; }
.stat-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--muted); font-size: 10px; font-weight: 650; }
.stat-meta strong { color: var(--success); }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 999px; background: var(--muted-2); }
.status-dot.success { background: var(--success); }
.status-dot.warning { background: var(--warning); }
.status-dot.danger { background: var(--danger); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: 16px; }
.two-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.four-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stack { display: grid; gap: 12px; }

.alert-list { display: grid; gap: 10px; }
.alert-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); padding: 12px; }
.alert-marker { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; }
.alert-marker svg { width: 16px; height: 16px; }
.alert-card.critical .alert-marker { background: var(--danger-soft); color: var(--danger); }
.alert-card.warning .alert-marker { background: var(--warning-soft); color: var(--warning); }
.alert-card.info .alert-marker { background: var(--accent-softer); color: var(--accent-strong); }
.alert-copy { min-width: 0; }
.alert-copy strong { display: block; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.alert-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 600; }
.alert-age { color: var(--muted); font-size: 9px; font-weight: 750; }

.schedule-list { display: grid; gap: 2px; }
.schedule-item { display: grid; grid-template-columns: 58px 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-radius: 11px; padding: 9px 6px; }
.schedule-item:hover { background: var(--surface-subtle); }
.schedule-time { color: var(--muted); font-size: 9px; font-weight: 850; text-align: right; }
.schedule-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-softer); color: var(--accent-strong); }
.schedule-icon svg { width: 14px; height: 14px; }
.schedule-copy { min-width: 0; }
.schedule-copy strong { display: block; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.schedule-copy span { color: var(--muted); font-size: 9px; font-weight: 650; }

.pill, .badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 999px; white-space: nowrap; font-weight: 850; }
.pill { min-height: 30px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 5px 10px; font-size: 10px; cursor: pointer; }
.pill:hover { border-color: var(--line-strong); color: var(--ink); }
.pill.active { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-softer); color: var(--accent-strong); }
.badge { min-height: 23px; padding: 3px 8px; font-size: 9px; }
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--accent-softer); color: var(--accent-strong); }
.badge.neutral { background: var(--surface-muted); color: var(--muted); }
.badge.violet { background: var(--violet-soft); color: var(--violet); }
.badge.cyan { background: var(--cyan-soft); color: var(--cyan); }

.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 10px; }
.search-field { min-height: 38px; min-width: 230px; display: flex; align-items: center; gap: 8px; flex: 1; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); padding: 0 10px; }
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.search-field svg { width: 14px; height: 14px; color: var(--muted); }
.search-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.select { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-soft); padding: 0 32px 0 10px; font-size: 10px; font-weight: 750; }

.avatar { position: relative; width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--surface); border-radius: 14px; background: linear-gradient(145deg, var(--avatar-a, #dbeafe), var(--avatar-b, #bfdbfe)); color: var(--avatar-ink, #1d4ed8); box-shadow: 0 0 0 1px var(--line); }
.avatar.large { width: 66px; height: 66px; border-radius: 20px; }
.avatar svg { width: 23px; height: 23px; }
.avatar.large svg { width: 33px; height: 33px; }
.avatar-initial { position: absolute; right: 4px; bottom: 2px; font-size: 8px; font-weight: 950; }
.customer-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #e0e7ff, #c7d2fe); color: #4338ca; font-size: 11px; font-weight: 950; }

.entity-list { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.entity-row { display: grid; grid-template-columns: minmax(210px, 1.4fr) minmax(150px, 1fr) minmax(120px, .7fr) minmax(120px, .8fr) auto; align-items: center; gap: 14px; min-height: 68px; border-bottom: 1px solid var(--line); padding: 10px 14px; }
.entity-row:last-child { border-bottom: 0; }
.entity-row.header { min-height: 38px; background: var(--surface-subtle); color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.entity-row:not(.header):hover { background: color-mix(in srgb, var(--accent-softer) 35%, var(--surface)); }
.entity-primary { min-width: 0; display: flex; align-items: center; gap: 11px; }
.entity-primary-copy { min-width: 0; display: grid; }
.entity-primary strong { overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.entity-primary span { color: var(--muted); font-size: 9px; font-weight: 650; }
.entity-cell { min-width: 0; display: grid; color: var(--ink-soft); font-size: 10px; font-weight: 750; }
.entity-cell small { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 600; }
.row-action { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; }
.row-action svg { width: 14px; height: 14px; }

.room-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.room-stat { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); padding: 12px; }
.room-stat span { color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.room-stat strong { display: block; margin-top: 3px; color: var(--ink); font-size: 22px; line-height: 1; letter-spacing: -.04em; }
.room-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; align-items: start; }
.room-sections { display: grid; gap: 18px; }
.room-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.room-section-header h2 { margin: 0; font-size: 13px; }
.room-section-header p { margin: 2px 0 0; color: var(--muted); font-size: 9px; font-weight: 600; }
.room-section-header span { color: var(--muted); font-size: 9px; font-weight: 750; }
.room-grid { display: grid; grid-template-columns: repeat(10, minmax(58px, 1fr)); gap: 7px; }
.room-card { min-height: 76px; position: relative; display: grid; align-content: space-between; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 8px; cursor: pointer; text-align: left; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.room-card:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: 0 7px 15px rgba(15,23,42,.07); }
.room-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.room-card::before { content: ""; position: absolute; inset: 8px 8px auto auto; width: 9px; height: 9px; border-radius: 999px; background: var(--room-color, var(--line-strong)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--room-color, var(--line-strong)) 12%, transparent); }
.room-card.available { --room-color: var(--success); background: color-mix(in srgb, var(--success-soft) 50%, var(--surface)); }
.room-card.occupied { --room-color: var(--accent); }
.room-card.cleaning { --room-color: var(--warning); background: color-mix(in srgb, var(--warning-soft) 46%, var(--surface)); }
.room-card.blocked { --room-color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 50%, var(--surface)); }
.room-number { color: var(--ink); font-size: 12px; font-weight: 950; }
.room-state { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.room-pet { overflow: hidden; color: var(--ink-soft); font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.room-share { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; min-width: 17px; height: 17px; border-radius: 999px; background: var(--violet-soft); color: var(--violet); font-size: 7px; font-weight: 950; }
.room-detail { position: sticky; top: calc(var(--ribbon) + 82px); overflow: hidden; }
.room-detail-hero { padding: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent-softer) 85%, var(--surface)), var(--surface)); border-bottom: 1px solid var(--line); }
.room-detail-number { display: flex; align-items: center; justify-content: space-between; }
.room-detail-number strong { font-size: 25px; letter-spacing: -.05em; }
.detail-list { display: grid; gap: 12px; padding: 16px; }
.detail-pair { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.detail-pair:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-pair dt { color: var(--muted); font-size: 9px; font-weight: 750; }
.detail-pair dd { margin: 0; color: var(--ink); font-size: 10px; font-weight: 850; text-align: right; }

.training-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.training-card { overflow: hidden; }
.training-card-top { padding: 16px; }
.pet-heading { display: flex; align-items: center; gap: 11px; }
.pet-heading-copy { min-width: 0; flex: 1; }
.pet-heading h3 { margin: 0; color: var(--ink); font-size: 14px; font-weight: 950; }
.pet-heading p { margin: 2px 0 0; color: var(--muted); font-size: 9px; font-weight: 650; }
.progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-muted); }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #60a5fa); }
.progress-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 7px; }
.progress-row span { color: var(--muted); font-size: 9px; font-weight: 750; }
.progress-row strong { color: var(--ink); font-size: 10px; font-weight: 900; }
.training-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); background: var(--surface-subtle); padding: 10px 14px; }
.training-card-footer span { color: var(--muted); font-size: 9px; font-weight: 700; }
.skill-trends { display: grid; gap: 10px; }
.skill-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 70px; align-items: center; gap: 12px; }
.skill-row strong { font-size: 10px; }
.skill-dots { display: flex; align-items: center; gap: 5px; }
.skill-dot { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-muted); color: var(--muted); font-size: 7px; font-weight: 900; }
.skill-dot.on { background: var(--accent); color: white; }

.kanban { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 5px; }
.kanban-column { min-width: 190px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); padding: 10px; }
.kanban-column-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.kanban-column-header strong { color: var(--ink-soft); font-size: 9px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.kanban-count { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 8px; font-weight: 900; }
.kanban-cards { display: grid; gap: 8px; }
.kanban-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 11px; box-shadow: 0 3px 10px rgba(15,23,42,.035); }
.kanban-card:hover { border-color: var(--line-strong); }
.kanban-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kanban-card h3 { margin: 8px 0 0; color: var(--ink); font-size: 11px; }
.kanban-card p { margin: 2px 0 0; color: var(--muted); font-size: 9px; font-weight: 650; }
.kanban-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.mini-avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-softer); color: var(--accent-strong); font-size: 8px; font-weight: 950; }

.truck-grid, .activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.truck-card { overflow: hidden; }
.truck-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(145deg, #15243a, #243c5a); color: white; padding: 16px; }
.truck-hero span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.10); }
.truck-hero svg { width: 21px; height: 21px; }
.truck-hero h3 { margin: 0; font-size: 14px; }
.truck-hero p { margin: 2px 0 0; color: #b8c5d8; font-size: 9px; }
.route-list { display: grid; gap: 0; padding: 14px; }
.route-stop { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 9px; padding: 0 0 14px; }
.route-stop:last-child { padding-bottom: 0; }
.route-stop::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; width: 1px; background: var(--line); }
.route-stop:last-child::before { display: none; }
.route-dot { position: relative; z-index: 1; width: 15px; height: 15px; border: 4px solid var(--surface); border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 1px var(--line); }
.route-copy strong { display: block; color: var(--ink); font-size: 10px; }
.route-copy span { color: var(--muted); font-size: 8px; font-weight: 650; }
.route-time { color: var(--muted); font-size: 8px; font-weight: 800; }
.activity-card { position: relative; overflow: hidden; min-height: 245px; }
.activity-visual { height: 108px; position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, var(--visual-a), var(--visual-b)); color: white; }
.activity-visual::after { content: ""; position: absolute; width: 170px; height: 170px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; transform: translate(55px, -35px); }
.activity-visual svg { position: relative; z-index: 1; width: 38px; height: 38px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.16)); }
.activity-content { padding: 14px; }
.activity-content h3 { margin: 0; color: var(--ink); font-size: 13px; }
.activity-content p { margin: 4px 0 0; color: var(--muted); font-size: 9px; font-weight: 650; line-height: 1.5; }
.activity-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.activity-meta div { border-radius: 9px; background: var(--surface-subtle); padding: 7px; }
.activity-meta span { display: block; color: var(--muted); font-size: 7px; font-weight: 850; text-transform: uppercase; }
.activity-meta strong { display: block; margin-top: 1px; color: var(--ink); font-size: 9px; }

.compliance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.compliance-card { overflow: hidden; }
.compliance-head { display: flex; align-items: center; gap: 11px; padding: 14px; }
.compliance-head > div:nth-child(2) { min-width: 0; flex: 1; }
.compliance-head h3 { margin: 0; font-size: 13px; }
.compliance-head p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.compliance-list { display: grid; border-top: 1px solid var(--line); }
.compliance-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 10px 14px; }
.compliance-item:last-child { border-bottom: 0; }
.compliance-item strong { display: block; color: var(--ink-soft); font-size: 10px; }
.compliance-item span { color: var(--muted); font-size: 8px; font-weight: 650; }
.compliance-reason { margin: 0 14px 14px; border-radius: 11px; background: var(--danger-soft); color: var(--danger); padding: 10px; font-size: 9px; font-weight: 750; line-height: 1.5; }

.calendar-shell { overflow: hidden; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 12px; }
.segmented { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); padding: 3px; }
.segmented button { min-height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); padding: 5px 9px; font-size: 9px; font-weight: 850; cursor: pointer; }
.segmented button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(15,23,42,.08); }
.calendar-grid { display: grid; grid-template-columns: 62px repeat(5, minmax(120px, 1fr)); overflow-x: auto; }
.calendar-head { min-height: 48px; display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-subtle); color: var(--muted); font-size: 9px; font-weight: 800; }
.calendar-head strong { color: var(--ink); font-size: 11px; }
.time-cell { min-height: 62px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); padding: 6px; font-size: 8px; font-weight: 750; text-align: right; }
.calendar-cell { min-height: 62px; position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; }
.calendar-event { height: 100%; min-height: 48px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--event-bg, var(--accent-softer)); color: var(--ink-soft); padding: 6px; }
.calendar-event strong { display: block; font-size: 9px; }
.calendar-event span { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; font-weight: 650; }

.detail-backdrop, .sheet-backdrop { position: fixed; z-index: 100; inset: 0; background: rgba(5, 13, 24, .48); backdrop-filter: blur(4px); }
.detail-backdrop[hidden], .sheet-backdrop[hidden] { display: none; }
.detail-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(460px, 96vw); overflow-y: auto; background: var(--surface); box-shadow: var(--shadow-float); animation: slideIn .18s ease-out; }
@keyframes slideIn { from { transform: translateX(24px); opacity: 0; } }
.detail-panel-header { position: sticky; z-index: 2; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); padding: 18px; backdrop-filter: blur(12px); }
.detail-panel-header h2 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.035em; }
.detail-panel-body { display: grid; gap: 14px; padding: 18px; }
.detail-section { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px; }
.detail-section h3 { margin: 0; font-size: 12px; }
.detail-section p { margin: 5px 0 0; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.55; }
.bottom-sheet { position: absolute; inset: auto 0 0; max-height: 82vh; overflow-y: auto; border-radius: 22px 22px 0 0; background: var(--surface); padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); animation: sheetUp .18s ease-out; }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } }
.sheet-handle { width: 44px; height: 4px; border-radius: 999px; background: var(--line-strong); margin: 3px auto 12px; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-header h2 { margin: 2px 0 0; }
.sheet-nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.sheet-nav .nav-item { min-height: 52px; border: 1px solid var(--line); background: var(--surface-subtle); color: var(--ink-soft); }
.sheet-nav .nav-item.active { border-color: var(--accent); background: var(--accent-softer); color: var(--accent-strong); box-shadow: none; }
.toast-region { position: fixed; z-index: 120; right: 18px; bottom: 18px; display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: 360px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-float); padding: 12px 14px; animation: toastIn .2s ease-out; }
.toast svg { width: 18px; height: 18px; color: var(--success); }
.toast strong { display: block; font-size: 11px; }
.toast span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 600; }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } }
.mobile-nav { display: none; }
.empty-state { min-height: 220px; display: grid; place-items: center; text-align: center; padding: 30px; }
.empty-state span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: var(--success-soft); color: var(--success); }
.empty-state svg { width: 24px; height: 24px; }
.empty-state h3 { margin: 12px 0 0; font-size: 14px; }
.empty-state p { max-width: 360px; margin: 5px 0 0; color: var(--muted); font-size: 10px; font-weight: 600; }

@media (max-width: 1280px) {
  :root { --sidebar: 238px; }
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .training-grid, .truck-grid, .activity-grid, .compliance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-grid { grid-template-columns: repeat(8, minmax(58px, 1fr)); }
}

@media (max-width: 1024px) {
  :root { --sidebar: 80px; }
  .brand-row { justify-content: center; padding-inline: 10px; }
  .brand-copy, .location-copy, .location-switcher .chevron, .nav-group-label, .nav-item span:last-child, .nav-badge, .support-link > span:nth-child(2), .user-card > span:nth-child(2), .user-card .icon-button { display: none; }
  .location-switcher { justify-content: center; min-height: 52px; padding: 7px; }
  .nav-item { justify-content: center; padding-inline: 8px; }
  .sidebar-footer { display: grid; place-items: center; }
  .support-link { justify-content: center; width: 44px; }
  .user-card { padding: 5px; }
  .content-grid, .room-map-layout { grid-template-columns: 1fr; }
  .room-detail { position: static; }
  .entity-row { grid-template-columns: minmax(200px, 1.4fr) minmax(130px, 1fr) minmax(110px, .7fr) auto; }
  .entity-row > :nth-child(4) { display: none; }
}

@media (max-width: 760px) {
  :root { --ribbon: 27px; }
  .demo-ribbon { padding: 0 8px; font-size: 8px; letter-spacing: .065em; white-space: nowrap; }
  .sidebar { display: none; }
  .app-stage { margin-left: 0; }
  .topbar { height: 58px; padding: 0 14px; }
  .mobile-brand { display: flex; }
  .topbar-context, .command-search, .header-avatar { display: none; }
  .topbar-actions { margin-left: auto; }
  .workspace { padding: 18px 14px calc(94px + env(safe-area-inset-bottom)); }
  .page-stack { gap: 16px; }
  .page-header { align-items: flex-start; flex-direction: column; gap: 13px; }
  .page-actions { width: 100%; justify-content: flex-start; }
  .page-actions .button { flex: 1; }
  .page-heading h1 { font-size: 27px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: 13px; }
  .stat-value { font-size: 23px; }
  .content-grid, .two-grid, .three-grid, .four-grid, .training-grid, .truck-grid, .activity-grid, .compliance-grid { grid-template-columns: 1fr; }
  .room-summary { grid-template-columns: repeat(2, 1fr); }
  .room-grid { grid-template-columns: repeat(4, minmax(58px, 1fr)); }
  .filter-bar { align-items: stretch; }
  .search-field { min-width: 100%; }
  .entity-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 74px; }
  .entity-row.header { display: none; }
  .entity-row > :not(:first-child):not(:last-child) { display: none; }
  .calendar-toolbar { align-items: stretch; flex-direction: column; }
  .calendar-grid { grid-template-columns: 52px repeat(5, minmax(135px, 1fr)); }
  .mobile-nav { position: fixed; z-index: 70; inset: auto 0 0; min-height: calc(64px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); padding: 5px 5px calc(5px + env(safe-area-inset-bottom)); backdrop-filter: blur(16px); }
  .mobile-nav button { min-width: 0; min-height: 52px; display: grid; place-items: center; align-content: center; gap: 3px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); padding: 4px; font-size: 8px; font-weight: 850; cursor: pointer; }
  .mobile-nav button.active { background: var(--accent-softer); color: var(--accent-strong); }
  .mobile-nav svg { width: 19px; height: 19px; }
  .detail-panel { inset: 0; width: 100%; }
  .toast-region { right: 10px; left: 10px; bottom: 82px; }
  .toast { max-width: none; }
}

@media (max-width: 390px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-card { padding: 11px; }
  .stat-label { font-size: 8px; }
  .room-grid { grid-template-columns: repeat(3, minmax(60px, 1fr)); }
}

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

/* v0.4 owner-review interaction refinements */
button.stat-card { width: 100%; color: inherit; font: inherit; text-align: left; cursor: default; }
button.stat-card.is-link { cursor: pointer; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
button.stat-card.is-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); box-shadow: var(--shadow-elevated); }
button.stat-card.is-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.search-result-list { display: grid; gap: 8px; margin-top: 14px; }
.search-result { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px; color: var(--ink); text-align: left; cursor: pointer; }
.search-result:hover { border-color: var(--accent); background: var(--accent-softer); }
.search-result > span:first-child { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-muted); color: var(--accent-strong); }
.search-result svg { width: 16px; height: 16px; }
.search-result-copy { min-width: 0; }
.search-result-copy strong, .search-result-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-copy strong { font-size: 11px; }
.search-result-copy small { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 650; }
.entitlement-preview { display: grid; gap: 10px; }
.entitlement-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px; color: var(--ink); text-align: left; cursor: pointer; }
.entitlement-option.active { border-color: var(--accent); background: var(--accent-softer); }
.entitlement-option strong, .entitlement-option small { display: block; }
.entitlement-option small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 650; }

/* v0.6 local-operations functional surfaces */
.surface-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 18px; box-shadow: var(--shadow-card); }
.surface-card h2 { margin: 4px 0 12px; font-size: 18px; letter-spacing: -.035em; }
.compact-card { align-self: start; }
.data-note, .muted-copy { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.55; }
.clickable { appearance: none; width: 100%; color: inherit; text-align: left; cursor: pointer; }
.clickable:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.danger-text { color: var(--danger) !important; }
.inline-link, .text-button { border: 0; background: transparent; color: var(--accent-strong); padding: 0; font-size: inherit; font-weight: 850; cursor: pointer; text-decoration: none; }
.inline-link:hover, .text-button:hover { text-decoration: underline; }
.inline-actions { display: flex; gap: 10px; align-items: center; }
.panel-intro { margin: 0; color: var(--muted); font-size: 12px; font-weight: 620; line-height: 1.55; }
.detail-status { margin-top: 7px; }
.detail-hero, .training-hero, .pet-profile-hero, .truck-detail-hero, .activity-detail-hero { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, var(--accent-softer), var(--surface)); padding: 16px; }
.detail-hero h3, .training-hero h3, .pet-profile-hero h3, .truck-detail-hero h3, .activity-detail-hero h3 { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.detail-hero p, .training-hero p, .pet-profile-hero p, .truck-detail-hero p, .activity-detail-hero p { margin: 4px 0 0; color: var(--muted); font-size: 10px; font-weight: 650; }
.detail-action-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-action-grid .button { flex: 1 1 135px; }
.detail-section .section-title { margin-bottom: 12px; }
.detail-section .section-title h2 { font-size: 12px; }
.detail-section .section-title p { font-size: 9px; }
.customer-avatar.large, .pet-avatar.large { width: 54px; height: 54px; font-size: 15px; }
.pet-avatar.xlarge { width: 72px; height: 72px; font-size: 18px; }
.pet-avatar.small { width: 22px; height: 22px; border-radius: 7px; font-size: 7px; }
.pet-avatar { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; background: linear-gradient(145deg, var(--accent-soft), var(--accent-softer)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); color: var(--accent-strong); font-weight: 950; }
.pet-avatar.tone-gold { background: linear-gradient(145deg, #ffedd5, #fde68a); color: #92400e; }
.pet-avatar.tone-gray { background: linear-gradient(145deg, #e2e8f0, #cbd5e1); color: #334155; }
.pet-avatar.tone-violet { background: linear-gradient(145deg, #ede9fe, #ddd6fe); color: #5b21b6; }
.pet-avatar.tone-green { background: linear-gradient(145deg, #d1fae5, #a7f3d0); color: #065f46; }
.pet-avatar.tone-blue { background: linear-gradient(145deg, #dbeafe, #bfdbfe); color: #1e40af; }

.form-stack { gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.form-field { display: grid; gap: 6px; min-width: 0; }
.form-field > span, .form-section legend { color: var(--ink-soft); font-size: 10px; font-weight: 850; }
.form-field > small { color: var(--muted); font-size: 9px; font-weight: 600; }
.form-control { width: 100%; min-height: 42px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); color: var(--ink); padding: 9px 11px; font-size: 11px; font-weight: 650; transition: border .15s ease, box-shadow .15s ease; }
textarea.form-control { min-height: 92px; resize: vertical; line-height: 1.5; }
.form-control:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong)); }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); outline: none; }
.form-section { margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.form-section legend { padding: 0 6px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.checkbox-card { min-height: 54px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-subtle); padding: 9px 10px; cursor: pointer; }
.checkbox-card:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); }
.checkbox-card input, .checkbox-row input, .select-chip input, .rating-grid input { accent-color: var(--accent); }
.checkbox-card > span { display: grid; min-width: 0; }
.checkbox-card strong { color: var(--ink); font-size: 10px; }
.checkbox-card small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.checkbox-row { min-height: 48px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); padding: 10px 12px; cursor: pointer; }
.checkbox-row > span { display: grid; }
.checkbox-row strong { font-size: 11px; }
.checkbox-row small { color: var(--muted); font-size: 9px; }
.checkbox-row.safety:has(input:checked) { border-color: var(--danger); background: var(--danger-soft); }
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.select-chip { position: relative; cursor: pointer; }
.select-chip input { position: absolute; opacity: 0; pointer-events: none; }
.select-chip span { min-height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-subtle); padding: 7px 12px; color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.select-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.rating-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.rating-grid label { position: relative; cursor: pointer; }
.rating-grid input { position: absolute; opacity: 0; }
.rating-grid span { min-height: 56px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-subtle); padding: 7px; color: var(--muted); font-size: 9px; font-weight: 850; text-align: center; }
.rating-grid input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 9%, transparent); }
.form-error, .form-warning { display: flex; align-items: flex-start; gap: 10px; border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--line)); border-radius: 12px; background: var(--danger-soft); color: var(--danger); padding: 11px 12px; }
.form-error svg { width: 18px; height: 18px; flex: 0 0 auto; }
.form-error span, .form-warning strong { font-size: 10px; font-weight: 800; }
.form-warning { display: block; }
.form-warning p { margin: 4px 0 0; color: var(--ink-soft); font-size: 9px; }
.sticky-action-bar { position: sticky; z-index: 3; bottom: -18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 95%, transparent); margin: 2px -18px -18px; padding: 13px 18px calc(13px + env(safe-area-inset-bottom)); backdrop-filter: blur(16px); }
.context-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.context-strip > div { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-subtle); padding: 10px; }
.context-strip span { color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.context-strip strong { font-size: 10px; }

.tab-bar, .filter-bar, .segmented-control { display: flex; align-items: center; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.tab-bar { margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tab-bar::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
.tab-button { min-height: 44px; display: flex; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 8px 4px; font-size: 11px; font-weight: 850; white-space: nowrap; cursor: pointer; }
.tab-button + .tab-button { margin-left: 14px; }
.tab-button.active { border-bottom-color: var(--accent); color: var(--accent-strong); }
.tab-button span { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-muted); padding: 0 6px; font-size: 8px; }
.filter-bar { margin-bottom: 14px; }
.filter-chip { min-height: 34px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); padding: 6px 11px; font-size: 9px; font-weight: 850; white-space: nowrap; cursor: pointer; }
.filter-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

.staff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.staff-card { display: grid; gap: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); padding: 15px; box-shadow: var(--shadow-card); color: inherit; text-align: left; cursor: pointer; transition: transform .15s ease, border .15s ease; }
.staff-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.staff-card-top { display: flex; align-items: center; gap: 10px; }
.staff-card-top > div { min-width: 0; display: grid; flex: 1; }
.staff-card-top strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.staff-card-top span:not(.badge) { color: var(--muted); font-size: 9px; font-weight: 650; }
.staff-card-meta { display: grid; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 700; }
.staff-card-meta span { display: flex; align-items: center; gap: 7px; }
.staff-card-meta svg { width: 14px; height: 14px; color: var(--accent); }
.schedule-summary-grid, .pipeline-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.schedule-summary-grid article { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); padding: 12px; }
.schedule-summary-grid span { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.schedule-summary-grid strong { font-size: 17px; }
.schedule-summary-grid small { color: var(--muted); font-size: 8px; }
.schedule-list, .request-list { display: grid; gap: 9px; }
.shift-card, .request-card { display: grid; grid-template-columns: minmax(115px, .7fr) minmax(0, 2fr) auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px; }
.shift-time, .shift-body, .request-dates, .request-state { display: grid; gap: 3px; }
.shift-time strong, .request-dates strong { font-size: 10px; }
.shift-time span, .request-dates span, .shift-body p { margin: 0; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.shift-time small, .shift-body small, .request-dates small, .request-state small { color: var(--muted); font-size: 8px; }
.shift-body > div { display: flex; align-items: center; gap: 8px; }
.shift-body strong { font-size: 11px; }
.shift-actions, .request-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.shift-actions .button, .request-actions .button { min-height: 32px; padding: 6px 9px; font-size: 8px; }
.request-card { grid-template-columns: 1.1fr 1.5fr .7fr auto; }
.request-person { display: flex; align-items: center; gap: 9px; }
.request-person > div { display: grid; }
.request-person strong { font-size: 11px; }
.request-person span { color: var(--muted); font-size: 8px; }
.coverage-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); gap: 14px; }
.coverage-table { display: grid; gap: 8px; }
.coverage-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); padding: 12px; }
.coverage-row > div { display: grid; align-content: center; gap: 4px; }
.coverage-row span:not(.badge), .coverage-row small { color: var(--muted); font-size: 8px; font-weight: 700; }
.explanation-callout { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: 13px; margin-top: 12px; padding: 12px; }
.explanation-callout.warning { border-color: color-mix(in srgb, var(--warning) 30%, var(--line)); background: var(--warning-soft); }
.explanation-callout.info { border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); background: var(--accent-softer); }
.explanation-callout > span svg { width: 19px; height: 19px; color: var(--warning); }
.explanation-callout.info > span svg { color: var(--accent); }
.explanation-callout strong { font-size: 10px; }
.explanation-callout p { margin: 3px 0 0; color: var(--ink-soft); font-size: 9px; line-height: 1.5; }

.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.list-toolbar .search-field { width: min(390px, 100%); }
.list-toolbar > span { color: var(--muted); font-size: 9px; font-weight: 750; }
.data-list { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-card); }
.customer-row { width: 100%; display: grid; grid-template-columns: minmax(220px, 1.4fr) 1fr 1.2fr auto 24px; gap: 12px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: inherit; padding: 12px 14px; text-align: left; cursor: pointer; }
.customer-row:last-child { border-bottom: 0; }
.customer-row:hover { background: var(--surface-subtle); }
.customer-row > div { min-width: 0; display: grid; gap: 2px; }
.customer-row strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.customer-row span:not(.badge):not(.customer-avatar) { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.customer-main { display: flex !important; align-items: center; gap: 10px; }
.customer-main > div { min-width: 0; display: grid; }
.row-arrow svg { width: 16px; color: var(--muted); }
.pet-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pet-directory-card { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); padding: 14px; box-shadow: var(--shadow-card); color: inherit; text-align: left; cursor: pointer; }
.pet-directory-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); transform: translateY(-2px); }
.pet-card-heading { display: grid; min-width: 0; }
.pet-card-heading strong { font-size: 13px; }
.pet-card-heading span { color: var(--muted); font-size: 9px; }
.pet-card-owner { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 700; }
.pet-card-owner svg { width: 14px; color: var(--accent); }
.pet-card-status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.pet-card-status small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.pet-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.pet-mini-grid > button { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-subtle); padding: 8px; color: inherit; text-align: left; cursor: pointer; }
.pet-mini-grid > button > div { min-width: 0; display: grid; }
.pet-mini-grid strong { font-size: 10px; }
.pet-mini-grid span { color: var(--muted); font-size: 8px; }
.compliance-banner { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 13px; }
.compliance-banner.success { border-color: color-mix(in srgb, var(--success) 25%, var(--line)); background: var(--success-soft); }
.compliance-banner.warning { border-color: color-mix(in srgb, var(--warning) 25%, var(--line)); background: var(--warning-soft); }
.compliance-banner.danger { border-color: color-mix(in srgb, var(--danger) 25%, var(--line)); background: var(--danger-soft); }
.compliance-banner svg { width: 20px; color: currentColor; }
.compliance-banner strong { font-size: 11px; }
.compliance-banner p { margin: 3px 0 0; color: var(--ink-soft); font-size: 9px; }
.compliance-list { display: grid; gap: 7px; }
.compliance-list article { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); padding: 9px 10px; }
.compliance-list article > div:first-child { min-width: 0; display: grid; flex: 1; }
.compliance-list strong { font-size: 10px; }
.compliance-list span:not(.badge) { color: var(--muted); font-size: 8px; }
.compliance-dashboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.compliance-pet-card { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); padding: 12px; color: inherit; text-align: left; cursor: pointer; }
.compliance-pet-card > div { min-width: 0; display: grid; }
.compliance-pet-card strong { font-size: 11px; }
.compliance-pet-card span:not(.badge) { color: var(--muted); font-size: 8px; }
.compliance-pet-card p { grid-column: 2 / -1; margin: 4px 0 0; color: var(--ink-soft); font-size: 9px; }
.policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.policy-grid article { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); padding: 11px; }
.policy-grid strong { font-size: 10px; }
.policy-grid p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.document-preview, .report-preview { border: 1px solid var(--line); border-radius: 15px; background: var(--surface-subtle); padding: 16px; }
.document-preview h3, .report-preview h3 { margin: 5px 0 9px; font-size: 16px; }
.document-preview p, .report-preview p { color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.document-preview small, .report-preview small { color: var(--muted); font-size: 8px; }

.dashboard-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 14px; margin-top: 14px; }
.attention-list, .schedule-agenda { display: grid; gap: 8px; }
.attention-item { width: 100%; display: grid; grid-template-columns: 9px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); padding: 11px; color: inherit; text-align: left; cursor: pointer; }
.attention-item:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.attention-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted); }
.attention-item.danger .attention-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.attention-item.warning .attention-dot { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.attention-item strong { font-size: 10px; }
.attention-item p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.attention-item svg { width: 16px; color: var(--muted); }
.agenda-row { width: 100%; display: grid; grid-template-columns: 52px 32px 1fr auto; gap: 9px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 9px 0; color: inherit; text-align: left; cursor: pointer; }
.agenda-row:last-child { border-bottom: 0; }
.agenda-row time { color: var(--ink-soft); font-size: 9px; font-weight: 850; }
.agenda-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-softer); color: var(--accent); }
.agenda-icon svg { width: 16px; }
.agenda-row strong { font-size: 10px; }
.agenda-row p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }

.calendar-shell { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 12px 14px; }
.segmented-control { border: 1px solid var(--line); border-radius: 11px; background: var(--surface-subtle); padding: 3px; }
.segmented-control button { min-height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); padding: 5px 9px; font-size: 8px; font-weight: 850; cursor: pointer; }
.segmented-control button.active { background: var(--surface); color: var(--accent-strong); box-shadow: 0 1px 4px rgba(15,23,42,.08); }
.calendar-navigation { display: flex; align-items: center; gap: 7px; }
.calendar-navigation strong { min-width: 150px; font-size: 10px; text-align: right; }
.calendar-agenda { padding: 10px; }
.calendar-event { width: 100%; display: grid; grid-template-columns: 145px 1fr auto 18px; gap: 12px; align-items: center; border: 1px solid var(--line); border: 1px solid var(--line); border-radius: 13px; background: var(--surface); margin-bottom: 8px; padding: 11px; color: inherit; text-align: left; cursor: pointer; }
.calendar-event:hover { background: var(--surface-subtle); }
.calendar-event.event-boarding { --event-color: var(--accent); }
.calendar-event.event-training { --event-color: var(--violet); }
.calendar-event.event-grooming, .calendar-event.event-mobile_grooming { --event-color: var(--warning); }
.calendar-event.event-daycare { --event-color: var(--cyan); }
.calendar-event time { display: grid; }
.calendar-event time strong { font-size: 9px; }
.calendar-event time span { color: var(--muted); font-size: 8px; }
.calendar-event-body { min-width: 0; display: grid; }
.calendar-event-body strong { font-size: 11px; }
.calendar-event-body p { margin: 2px 0; color: var(--ink-soft); font-size: 9px; }
.calendar-event-body small { color: var(--muted); font-size: 8px; }
.calendar-event > svg { width: 16px; color: var(--muted); }
.lifecycle-track { display: flex; align-items: center; gap: 5px; overflow-x: auto; }
.lifecycle-track span { flex: 1 0 auto; min-width: 80px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-subtle); color: var(--muted); padding: 7px 9px; font-size: 8px; font-weight: 850; text-align: center; }
.lifecycle-track span.complete { border-color: color-mix(in srgb, var(--success) 28%, var(--line)); background: var(--success-soft); color: var(--success); }

.room-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.room-filter-panel { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.room-search-form { display: flex; gap: 7px; align-items: center; }
.room-search-form .search-field { min-width: 190px; }
.room-map-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; }
.room-card { min-height: 105px; display: grid; align-content: space-between; gap: 7px; border: 1px solid var(--line); border-top: 4px solid var(--success); border-radius: 12px; background: var(--surface); padding: 8px; color: inherit; text-align: left; cursor: pointer; }
.room-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.room-card.status-occupied { border-top-color: var(--accent); background: var(--accent-softer); }
.room-card.status-reserved { border-top-color: var(--violet); background: var(--violet-soft); }
.room-card.status-cleaning { border-top-color: var(--warning); background: var(--warning-soft); }
.room-card.status-blocked, .room-card.status-out_of_service { border-top-color: var(--danger); background: var(--danger-soft); }
.room-card header { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.room-card header > strong { font-size: 15px; }
.room-card .badge { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-occupants { display: grid; gap: 3px; }
.room-occupants > span { display: flex; align-items: center; gap: 5px; overflow: hidden; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.room-empty { color: var(--muted); }
.room-card footer { display: grid; gap: 2px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding-top: 5px; color: var(--muted); font-size: 7px; }
.room-card footer em { color: var(--violet); font-style: normal; font-weight: 800; }
.room-detail-hero p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }

.daycare-roster { display: grid; gap: 10px; }
.daycare-card { display: grid; grid-template-columns: 1.1fr 1.3fr .75fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); padding: 12px; box-shadow: var(--shadow-card); }
.daycare-pet { display: flex; align-items: center; gap: 9px; }
.daycare-pet > div, .daycare-service, .daycare-state { min-width: 0; display: grid; }
.daycare-pet strong, .daycare-service strong { font-size: 11px; }
.daycare-service span, .daycare-service small, .daycare-state small { color: var(--muted); font-size: 8px; }
.daycare-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.daycare-actions .button { min-height: 32px; padding: 6px 9px; font-size: 8px; }
.daycare-observations { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); padding-top: 9px; }
.daycare-observations span { border-radius: 999px; background: var(--surface-subtle); color: var(--muted); padding: 5px 8px; font-size: 8px; }

.task-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.task-card { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--line); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px; color: inherit; text-align: left; cursor: pointer; }
.task-card.complete { --task-accent: var(--success); opacity: .78; }
.task-card.problem, .task-card.escalated { --task-accent: var(--danger); background: var(--danger-soft); }
.task-card > div { min-width: 0; display: grid; }
.task-card strong { font-size: 10px; }
.task-card p { margin: 2px 0; color: var(--ink-soft); font-size: 9px; }
.task-card small { color: var(--muted); font-size: 8px; }
.task-priority { align-self: start; }

.pipeline-grid { display: grid; grid-template-columns: repeat(7, minmax(190px, 1fr)); gap: 9px; overflow-x: auto; padding-bottom: 8px; }
.pipeline-column { min-height: 360px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); padding: 9px; }
.pipeline-column > header { display: flex; align-items: center; justify-content: space-between; padding: 2px 3px 9px; }
.pipeline-column > header strong { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.pipeline-column > header span { min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-muted); font-size: 8px; font-weight: 850; }
.pipeline-column > div { display: grid; gap: 7px; }
.lead-card { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 10px; color: inherit; text-align: left; box-shadow: 0 3px 12px rgba(15,23,42,.04); cursor: pointer; }
.lead-card:hover { border-color: var(--accent); }
.lead-card strong { font-size: 10px; }
.lead-card span { color: var(--ink-soft); font-size: 8px; }
.lead-card small { color: var(--muted); font-size: 7px; }
.lead-card em { margin-top: 4px; color: var(--accent-strong); font-size: 8px; font-style: normal; font-weight: 800; }
.pipeline-empty { display: grid; place-items: center; min-height: 70px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 8px; }

.training-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.training-card { display: grid; gap: 13px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 15px; color: inherit; text-align: left; box-shadow: var(--shadow-card); cursor: pointer; }
.training-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--violet) 30%, var(--line)); }
.training-card-head { display: flex; align-items: center; gap: 10px; }
.training-card-head > div { min-width: 0; display: grid; flex: 1; }
.training-card-head strong { font-size: 13px; }
.training-card-head span:not(.badge) { color: var(--muted); font-size: 9px; }
.progress-wrap { display: grid; gap: 5px; }
.progress-wrap small { color: var(--muted); font-size: 8px; }
.training-card-meta { display: flex; flex-wrap: wrap; gap: 8px 13px; color: var(--muted); font-size: 8px; font-weight: 700; }
.training-card-meta span { display: flex; align-items: center; gap: 5px; }
.training-card-meta svg { width: 13px; }
.training-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.training-card footer strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.training-card footer svg { width: 16px; color: var(--muted); }
.training-hero { align-items: flex-start; }
.training-hero > div { min-width: 0; flex: 1; }
.session-list { display: grid; gap: 7px; }
.session-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-subtle); padding: 8px; }
.session-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-muted); color: var(--ink-soft); font-size: 9px; font-weight: 900; }
.session-row.complete .session-number { background: var(--success-soft); color: var(--success); }
.session-row > div { display: grid; }
.session-row strong { font-size: 9px; }
.session-row p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.session-row .button { min-height: 30px; padding: 5px 8px; font-size: 8px; }
.skill-progress-list { display: grid; gap: 8px; }
.skill-progress-list article { display: grid; grid-template-columns: 100px 1fr; gap: 8px; align-items: center; }
.skill-progress-list strong { font-size: 9px; }
.skill-progress-list article > div { display: flex; gap: 5px; overflow-x: auto; }
.skill-progress-list span { min-width: 56px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--success-soft); color: var(--success); padding: 5px; font-size: 8px; font-weight: 900; }
.skill-progress-list small { color: var(--ink-soft); font-size: 6px; }
.report-preview header { display: flex; align-items: center; justify-content: space-between; }
.report-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.report-columns strong { font-size: 10px; }
.report-columns ul { margin: 6px 0 0; padding-left: 17px; color: var(--ink-soft); font-size: 9px; }

.grooming-board { display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr)); gap: 9px; overflow-x: auto; padding-bottom: 8px; }
.grooming-column { min-height: 310px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); padding: 9px; }
.grooming-column > header { display: flex; justify-content: space-between; padding: 2px 3px 9px; }
.grooming-column > header strong { font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.grooming-column > header span { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-muted); font-size: 8px; font-weight: 850; }
.grooming-column > div { display: grid; gap: 7px; }
.grooming-card { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 9px; box-shadow: 0 3px 12px rgba(15,23,42,.04); }
.groom-main { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; color: inherit; text-align: left; cursor: pointer; }
.groom-main > div { min-width: 0; display: grid; }
.groom-main strong { font-size: 10px; }
.groom-main span, .groom-main small { color: var(--muted); font-size: 7px; }
.grooming-card .button { min-height: 31px; justify-content: center; padding: 5px 7px; font-size: 7px; }
.grooming-track { flex-wrap: wrap; }
.grooming-track span { min-width: 90px; }

.truck-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.truck-card { display: grid; gap: 13px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 15px; color: inherit; text-align: left; box-shadow: var(--shadow-card); cursor: pointer; }
.truck-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 35%, var(--line)); }
.truck-card header { display: flex; align-items: center; gap: 10px; }
.truck-card header > div { min-width: 0; display: grid; flex: 1; }
.truck-card header strong { font-size: 13px; }
.truck-card header span:not(.badge) { color: var(--muted); font-size: 9px; }
.truck-icon, .truck-detail-hero > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: var(--cyan-soft); color: var(--cyan); }
.truck-icon svg, .truck-detail-hero > span svg { width: 24px; }
.truck-card dl { display: grid; gap: 8px; margin: 0; }
.truck-card footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; color: var(--muted); font-size: 8px; font-weight: 750; }
.truck-card footer svg { width: 16px; }
.route-list { display: grid; gap: 8px; }
.route-list article { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-subtle); padding: 8px; }
.route-sequence { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: var(--cyan-soft); color: var(--cyan); font-size: 9px; font-weight: 900; }
.route-list article > div { min-width: 0; display: grid; }
.route-list strong { font-size: 9px; }
.route-list p { margin: 2px 0; color: var(--ink-soft); font-size: 8px; }
.route-list small { color: var(--muted); font-size: 7px; }

.activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.activity-card { display: grid; grid-template-columns: auto 1fr; gap: 11px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 15px; color: inherit; text-align: left; box-shadow: var(--shadow-card); cursor: pointer; }
.activity-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--violet) 30%, var(--line)); }
.activity-icon, .activity-detail-hero > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--violet-soft); color: var(--violet); }
.activity-icon svg, .activity-detail-hero > span svg { width: 23px; }
.activity-card > div { min-width: 0; display: grid; }
.activity-card > div strong { font-size: 13px; }
.activity-card > div p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.activity-card dl { grid-column: 1 / -1; display: grid; gap: 7px; margin: 0; }
.activity-card footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 9px; }
.activity-card footer svg { width: 16px; color: var(--muted); }

.settings-grid, .report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.organization-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.organization-heading h2 { margin: 0; }
.organization-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.entitlement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.entitlement-grid span, .disabled-feature-list span { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); padding: 8px; color: var(--ink-soft); font-size: 9px; font-weight: 750; }
.entitlement-grid svg, .disabled-feature-list svg { width: 15px; color: var(--accent); }
.disabled-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 25%, var(--line)); }
.metric-bars { display: grid; gap: 14px; }
.metric-bars article > div:first-child { display: flex; justify-content: space-between; margin-bottom: 6px; }
.metric-bars strong, .metric-bars span { font-size: 10px; }
.audit-section { margin-top: 14px; }
.audit-feed { display: grid; gap: 8px; }
.audit-entry { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px; }
.audit-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-softer); color: var(--accent); }
.audit-icon svg { width: 16px; }
.audit-entry div { display: grid; }
.audit-entry strong { font-size: 10px; }
.audit-entry p { margin: 2px 0; color: var(--ink-soft); font-size: 8px; }
.audit-entry small { color: var(--muted); font-size: 7px; }
.raw-audit { margin: -4px 10px 4px 54px; }
.raw-audit summary { color: var(--muted); font-size: 8px; cursor: pointer; }
.raw-audit pre { overflow: auto; max-height: 220px; border-radius: 10px; background: var(--nav); color: #dbeafe; padding: 10px; font-size: 7px; }

.search-panel { gap: 14px; }
.global-search-input { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--surface); padding: 7px 8px 7px 11px; }
.global-search-input > svg { width: 18px; color: var(--muted); }
.global-search-input input { min-width: 0; border: 0; background: transparent; color: var(--ink); outline: 0; font-size: 13px; }
.search-results, .search-result-group { display: grid; gap: 7px; }
.search-result-group h3 { margin: 8px 0 1px; color: var(--muted); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.search-result { width: 100%; display: grid; grid-template-columns: 34px 1fr 18px; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 9px; color: inherit; text-align: left; cursor: pointer; }
.search-result:hover { background: var(--surface-subtle); border-color: var(--accent); }
.search-result > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-softer); color: var(--accent); }
.search-result > span svg, .search-result > svg { width: 16px; }
.search-result > div { min-width: 0; display: grid; }
.search-result strong { font-size: 10px; }
.search-result p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.search-result > svg { color: var(--muted); }
.search-suggestions { border: 1px dashed var(--line-strong); border-radius: 13px; background: var(--surface-subtle); padding: 14px; }
.search-suggestions p { margin: 0 0 10px; color: var(--muted); font-size: 9px; }
.search-suggestions div { display: flex; flex-wrap: wrap; gap: 6px; }
.search-suggestions button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent-strong); padding: 6px 9px; font-size: 8px; font-weight: 800; cursor: pointer; }
.notification-list > button { width: 100%; display: grid; grid-template-columns: 34px 1fr 18px; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 10px; color: inherit; text-align: left; cursor: pointer; }
.notification-list > button > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--warning-soft); color: var(--warning); }
.notification-list > button svg { width: 16px; }
.notification-list > button div { min-width: 0; }
.notification-list strong { font-size: 10px; }
.notification-list p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.timeline, .mini-list { display: grid; gap: 7px; }
.timeline article { display: grid; grid-template-columns: 10px 1fr; gap: 8px; align-items: start; }
.timeline article > span { width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer); }
.timeline strong { font-size: 9px; }
.timeline p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.mini-list > button, .mini-list > article { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); padding: 8px 9px; color: inherit; text-align: left; cursor: pointer; }
.mini-list > article { cursor: default; }
.mini-list strong { font-size: 9px; }
.mini-list span { color: var(--muted); font-size: 8px; }
.empty-state { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed var(--line-strong); border-radius: 15px; background: var(--surface-subtle); padding: 24px; text-align: center; }
.empty-state > svg { width: 28px; color: var(--accent); }
.empty-state h3 { margin: 0; font-size: 13px; }
.empty-state p { max-width: 380px; margin: 0; color: var(--muted); font-size: 9px; }
.error-state { display: grid; place-items: center; min-height: 50vh; text-align: center; }
.error-state h2 { margin: 0; }
.error-state p { color: var(--muted); }

@media (max-width: 1240px) {
  .dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .room-map-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .staff-grid, .pet-directory-grid, .training-card-grid, .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .schedule-summary-grid, .pipeline-summary, .room-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-grid, .dashboard-grid, .settings-grid, .report-grid { grid-template-columns: 1fr; }
  .room-map-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .customer-row { grid-template-columns: minmax(200px, 1.4fr) 1fr auto 20px; }
  .customer-row > div:nth-child(3) { display: none; }
  .daycare-card { grid-template-columns: 1fr 1.2fr auto; }
  .daycare-state { display: none; }
}

@media (max-width: 720px) {
  .workspace { padding-bottom: 88px; }
  .page-header { align-items: flex-start; }
  .page-actions { width: 100%; }
  .page-actions .button { flex: 1; justify-content: center; }
  .dashboard-stats, .stats-grid, .stats-grid.three, .stats-grid.four, .room-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-grid, .pet-directory-grid, .training-card-grid, .truck-grid, .activity-grid, .compliance-dashboard, .task-board { grid-template-columns: 1fr; }
  .form-grid, .checkbox-grid, .report-columns, .policy-grid, .entitlement-grid, .disabled-feature-list { grid-template-columns: 1fr; }
  .rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-strip { grid-template-columns: 1fr; }
  .shift-card, .request-card { grid-template-columns: 1fr; }
  .shift-actions, .request-actions { justify-content: flex-start; }
  .coverage-row { grid-template-columns: 1fr 1fr; }
  .coverage-row > div:first-child { grid-column: 1 / -1; }
  .customer-row { grid-template-columns: 1fr auto 18px; }
  .customer-row > div:nth-child(2), .customer-row > div:nth-child(3) { display: none; }
  .list-toolbar { align-items: stretch; flex-direction: column; }
  .list-toolbar .search-field { width: 100%; }
  .calendar-toolbar { align-items: stretch; flex-direction: column; }
  .calendar-navigation { justify-content: space-between; }
  .calendar-navigation strong { min-width: 0; text-align: right; }
  .calendar-event { grid-template-columns: 82px 1fr auto; }
  .calendar-event > svg { display: none; }
  .room-filter-panel { align-items: stretch; flex-direction: column; }
  .room-search-form { display: grid; grid-template-columns: 1fr auto; }
  .room-search-form .search-field { grid-column: 1 / -1; min-width: 0; }
  .room-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .room-card { min-height: 98px; }
  .daycare-card { grid-template-columns: 1fr; }
  .daycare-state { display: grid; }
  .daycare-actions { justify-content: flex-start; }
  .daycare-observations { grid-column: 1; }
  .sticky-action-bar { flex-wrap: wrap; }
  .sticky-action-bar .button { flex: 1; justify-content: center; }
  .detail-action-grid .button { flex-basis: 100%; }
  .pet-mini-grid { grid-template-columns: 1fr; }
  .raw-audit { margin-left: 0; }
}

@media (max-width: 420px) {
  .dashboard-stats, .stats-grid, .stats-grid.three, .stats-grid.four, .room-summary, .schedule-summary-grid, .pipeline-summary { grid-template-columns: 1fr 1fr; }
  .room-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-card { min-height: 94px; }
  .global-search-input { grid-template-columns: 20px 1fr; }
  .global-search-input .button { grid-column: 1 / -1; justify-content: center; }
}

/* --------------------------------------------------------------------------
   v0.8 Dogwalker Ranch tenant experience
   Premium ranch palette + consistent metric hierarchy + living product depth.
   -------------------------------------------------------------------------- */
:root {
  --accent: #a85d2a;
  --accent-strong: #7f421e;
  --accent-soft: #f3dfcf;
  --accent-softer: #fbf3ec;
  --ink: #17251f;
  --ink-soft: #405148;
  --muted: #6b7a72;
  --muted-2: #92a099;
  --surface: #fffefa;
  --surface-raised: #ffffff;
  --surface-subtle: #f8f7f1;
  --surface-muted: #eeeee6;
  --canvas: #f2f3ec;
  --line: #dde1d8;
  --line-strong: #c7cec3;
  --nav: #14251d;
  --nav-soft: #1e3529;
  --nav-ink: #f7faf5;
  --nav-muted: #a9b9ae;
  --success: #2d7455;
  --success-soft: #e7f3ed;
  --warning: #a56416;
  --warning-soft: #fff4dd;
  --danger: #b33c42;
  --danger-soft: #fff0ef;
  --violet: #6956a8;
  --violet-soft: #f0edfa;
  --cyan: #257585;
  --cyan-soft: #e8f5f5;
  --ranch-green: #335f48;
  --ranch-copper: #a85d2a;
  --ranch-cream: #f7f1e7;
  --shadow-card: 0 1px 2px rgba(20, 37, 29, .04), 0 16px 38px rgba(20, 37, 29, .06);
  --shadow-elevated: 0 24px 70px rgba(20, 37, 29, .16);
}
html[data-theme="dark"] {
  --accent: #dc9864;
  --accent-strong: #f0b587;
  --accent-soft: rgba(196, 112, 55, .22);
  --accent-softer: rgba(196, 112, 55, .11);
  --ink: #f1f7f2;
  --ink-soft: #c7d4cb;
  --muted: #9fb0a6;
  --muted-2: #7d9085;
  --surface: #15241d;
  --surface-raised: #1c2e25;
  --surface-subtle: #101e18;
  --surface-muted: #22382d;
  --canvas: #0b1712;
  --line: #2d4438;
  --line-strong: #405e4d;
  --nav: #07120d;
  --nav-soft: #14271e;
  --success: #74d4a7;
  --success-soft: rgba(46, 160, 110, .16);
  --warning: #f2c177;
  --warning-soft: rgba(199, 131, 34, .16);
  --danger: #ff9298;
  --danger-soft: rgba(190, 55, 66, .16);
  --violet: #b5a6e8;
  --violet-soft: rgba(126, 99, 181, .18);
  --cyan: #82d7df;
  --cyan-soft: rgba(45, 148, 162, .16);
}

.brand-mark { background: linear-gradient(145deg, #b86b35, #7d421f); box-shadow: 0 8px 24px rgba(138, 73, 33, .34); }
.brand-mark span { letter-spacing: -.08em; }
.location-logo { background: linear-gradient(145deg, #477b5e, #2f5b44); }
.nav-item.active { background: color-mix(in srgb, var(--accent) 20%, var(--sidebar)); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.nav-item.active .nav-badge { background: var(--ranch-copper); }
.button.primary { box-shadow: 0 9px 22px rgba(168, 93, 42, .19); }
.demo-ribbon { background: #f7efe3; border-color: #e7d1b9; color: #74401f; }
html[data-theme="dark"] .demo-ribbon { background: #2d2118; border-color: #61442e; color: #efb98d; }
.ribbon-dot { background: var(--ranch-copper); box-shadow: 0 0 0 4px rgba(168,93,42,.14); }

/* Metrics must never visually run together. */
.stat-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 13px; min-height: 126px; }
.stat-card > .stat-icon { grid-row: 1; }
.stat-card > .stat-content { min-width: 0; display: grid; align-content: start; gap: 4px; }
.stat-card .stat-label { margin: 0; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .025em; text-transform: none; }
.stat-card .stat-value { margin: 0; color: var(--ink); font-size: clamp(25px, 2.25vw, 34px); font-weight: 930; line-height: 1.05; letter-spacing: -.05em; overflow-wrap: anywhere; }
.stat-card .stat-meta { margin: 2px 0 0; display: block; color: var(--muted); font-size: 10px; font-weight: 650; line-height: 1.35; }
.stat-card.clickable { cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.stat-card.clickable:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); box-shadow: var(--shadow-elevated); }

.pet-avatar, .customer-avatar { position: relative; overflow: hidden; }
.pet-avatar img, .customer-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pet-avatar.has-photo > span, .customer-avatar.has-photo > span { opacity: 0; }
.customer-avatar { display: inline-grid; place-items: center; }
.customer-avatar > span { position: relative; z-index: 1; }

.file-field input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-drop { position: relative; min-height: 86px; display: flex; align-items: center; gap: 13px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: var(--surface-subtle); padding: 15px; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.file-drop:hover { border-color: var(--accent); background: var(--accent-softer); transform: translateY(-1px); }
.file-drop svg { width: 25px; height: 25px; color: var(--accent-strong); }
.file-drop > span { display: grid; }
.file-drop strong { color: var(--ink); font-size: 11px; }
.file-drop small { color: var(--muted); font-size: 9px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.media-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); }
.media-card-preview { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: var(--surface-muted); }
.media-card-preview img, .media-card-preview video { width: 100%; height: 100%; object-fit: cover; }
.media-card-body { padding: 9px; }
.media-card-body strong { display: block; overflow: hidden; color: var(--ink); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.media-card-body small { color: var(--muted); font-size: 8px; }

.ranch-hero { position: relative; min-height: 230px; overflow: hidden; border-radius: 24px; background: #22382d; color: white; box-shadow: var(--shadow-card); }
.ranch-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 24, 17, .88) 0%, rgba(8, 24, 17, .64) 47%, rgba(8, 24, 17, .08) 80%), url("assets/ranch-hero.jpg") center 48% / cover no-repeat; transform: scale(1.01); }
.ranch-hero-content { position: relative; z-index: 1; max-width: 650px; display: grid; gap: 12px; padding: clamp(28px, 5vw, 55px); }
.ranch-hero .eyebrow { color: #e8b58d; }
.ranch-hero h1 { margin: 0; color: white; font-size: clamp(30px, 4.7vw, 56px); line-height: .98; letter-spacing: -.055em; }
.ranch-hero p { max-width: 560px; margin: 0; color: rgba(255,255,255,.79); font-size: 13px; }
.ranch-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.ranch-hero .button.secondary { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: white; backdrop-filter: blur(8px); }

.live-pulse { display: inline-flex; align-items: center; gap: 7px; color: var(--success); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.live-pulse::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 30%, transparent); animation: dwr-pulse 2.2s infinite; }
@keyframes dwr-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 32%, transparent); } 65% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes dwr-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.workspace > * { animation: dwr-rise .22s ease both; }

.stage-rail { display: grid; grid-template-columns: repeat(10, minmax(90px, 1fr)); gap: 6px; overflow-x: auto; padding: 5px 2px 12px; scrollbar-width: thin; }
.stage-step { min-width: 100px; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); padding: 10px; }
.stage-step .stage-number { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 99px; background: var(--surface-muted); color: var(--muted); font-size: 9px; font-weight: 900; }
.stage-step strong { color: var(--muted); font-size: 9px; line-height: 1.25; }
.stage-step.complete { border-color: color-mix(in srgb, var(--success) 28%, var(--line)); background: var(--success-soft); }
.stage-step.complete .stage-number { background: var(--success); color: white; }
.stage-step.current { border-color: var(--accent); background: var(--accent-softer); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.stage-step.current .stage-number { background: var(--accent); color: white; }
.stage-step.current strong { color: var(--accent-strong); }

.queue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 12px; }
.queue-card { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 15px; box-shadow: var(--shadow-card); text-align: left; cursor: pointer; }
.queue-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); transform: translateY(-1px); }
.queue-card-header { display: flex; justify-content: space-between; gap: 12px; }
.queue-card h3 { margin: 0; font-size: 14px; }
.queue-card p { margin: 0; color: var(--muted); font-size: 10px; }
.next-action-card { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 16px; background: linear-gradient(145deg, var(--accent-softer), var(--surface)); padding: 16px; }
.next-action-card span { display: block; color: var(--accent-strong); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.next-action-card strong { display: block; margin-top: 4px; color: var(--ink); font-size: 16px; }
.next-action-card p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }

.message-layout { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.4fr); gap: 14px; min-height: 580px; }
.thread-list, .thread-view { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); }
.thread-list { overflow: hidden; }
.thread-list header, .thread-view header { border-bottom: 1px solid var(--line); padding: 14px; }
.thread-row { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 12px 14px; text-align: left; cursor: pointer; }
.thread-row:hover, .thread-row.active { background: var(--accent-softer); }
.thread-row.unread strong::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 99px; background: var(--accent); }
.thread-row-copy { min-width: 0; display: grid; }
.thread-row-copy strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.thread-row-copy span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.message-feed { min-height: 390px; max-height: 58vh; overflow-y: auto; display: grid; align-content: start; gap: 9px; padding: 16px; }
.message-bubble { max-width: min(78%, 620px); border-radius: 15px 15px 15px 4px; background: var(--surface-muted); padding: 10px 12px; }
.message-bubble.own { justify-self: end; border-radius: 15px 15px 4px 15px; background: var(--accent-softer); }
.message-bubble strong { display: block; color: var(--ink); font-size: 9px; }
.message-bubble p { margin: 4px 0; color: var(--ink-soft); font-size: 11px; white-space: pre-wrap; }
.message-bubble small { color: var(--muted); font-size: 8px; }
.message-composer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; border-top: 1px solid var(--line); padding: 12px; }
.message-composer textarea { min-height: 48px; resize: vertical; }

.portal-shell { max-width: 1120px; margin: 0 auto; }
.portal-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(240px,.8fr); gap: 14px; }
.action-required { border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--line)); border-radius: 18px; background: var(--warning-soft); padding: 17px; }
.action-required h2 { margin: 0; font-size: 18px; }
.action-list { display: grid; gap: 8px; margin-top: 12px; }
.action-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid color-mix(in srgb, var(--warning) 20%, var(--line)); border-radius: 12px; background: var(--surface); padding: 11px; text-align: left; cursor: pointer; }
.action-row strong { display: block; font-size: 10px; }
.action-row small { color: var(--muted); font-size: 8px; }

.outbox-card { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 15px; box-shadow: var(--shadow-card); }
.outbox-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.outbox-card h3 { margin: 0; font-size: 13px; }
.outbox-card pre { max-height: 190px; overflow: auto; margin: 0; border-radius: 10px; background: var(--surface-subtle); color: var(--ink-soft); padding: 11px; font: 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }

.signature-pad { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-subtle); padding: 15px; }
.signature-preview { min-height: 74px; display: grid; place-items: center; border-bottom: 1px solid var(--line); color: var(--ink); font-family: "Segoe Script", "Bradley Hand", cursive; font-size: 28px; }
.legal-review-banner { border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--line)); border-radius: 12px; background: var(--warning-soft); color: #7a4a0b; padding: 11px; font-size: 10px; font-weight: 750; }

@media (max-width: 980px) {
  .message-layout { grid-template-columns: 1fr; }
  .portal-hero { grid-template-columns: 1fr; }
  .ranch-hero { min-height: 270px; }
}
@media (max-width: 720px) {
  .ranch-hero { min-height: 330px; }
  .ranch-hero::before { background: linear-gradient(0deg, rgba(8,24,17,.92), rgba(8,24,17,.24)), url("assets/ranch-hero.jpg") 58% center / cover no-repeat; }
  .ranch-hero-content { align-self: end; padding: 24px 20px; }
  .stat-card { min-height: 118px; grid-template-columns: auto minmax(0,1fr); padding: 13px; }
  .stat-card .stat-value { font-size: 27px; }
  .stage-rail { margin-inline: -4px; }
  .message-feed { min-height: 320px; }
  .message-bubble { max-width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace > *, .live-pulse::before { animation: none !important; }
}

/* ================================================================
   v0.8 Ranch lifecycle experience
   ================================================================ */
.ranch-command-hero {
  position: relative;
  min-height: 255px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 26px;
  background: #173c32;
  color: #fff;
  box-shadow: 0 22px 55px rgba(18,48,39,.22);
}
.ranch-command-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,28,22,.92) 0%, rgba(7,28,22,.70) 46%, rgba(7,28,22,.12) 83%),
    url("assets/ranch-hero.jpg") center 48% / cover no-repeat;
  transform: scale(1.012);
}
.ranch-hero-overlay {
  position: relative;
  z-index: 1;
  width: min(690px, 100%);
  display: grid;
  gap: 12px;
  padding: clamp(27px, 5vw, 54px);
}
.ranch-hero-overlay .eyebrow { color: #efc39f; }
.ranch-hero-overlay h1 { margin: 0; color: #fff; font-size: clamp(34px, 5vw, 62px); line-height: .96; letter-spacing: -.055em; }
.ranch-hero-overlay p { max-width: 590px; margin: 0; color: rgba(255,255,255,.80); font-size: 13px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
.ranch-command-hero .button.secondary { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(12px); }
.live-operations-chip {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: rgba(8,33,25,.56);
  padding: 8px 11px;
  color: rgba(255,255,255,.90);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.live-operations-chip > span, .live-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 99px;
  background: #79d49e;
  box-shadow: 0 0 0 0 rgba(121,212,158,.4);
  animation: dwr-pulse 2.2s infinite;
}
.ranch-stats { margin-top: 16px; }
.command-layout { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: 14px; margin-top: 14px; }
.attention-surface, .recent-surface { min-width: 0; }
.attention-list { display: grid; gap: 8px; }
.attention-row {
  width: 100%;
  display: grid;
  grid-template-columns: 37px minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-subtle);
  padding: 11px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.attention-row > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: var(--surface); }
.attention-row > span svg { width: 18px; }
.attention-row > div { min-width: 0; display: grid; }
.attention-row strong { font-size: 10px; }
.attention-row p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.attention-row.critical { border-color: color-mix(in srgb, var(--danger) 26%, var(--line)); background: var(--danger-soft); }
.attention-row.critical > span { color: var(--danger); }
.attention-row.warning { border-color: color-mix(in srgb, var(--warning) 24%, var(--line)); background: var(--warning-soft); }
.all-clear { display: flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--success) 24%, var(--line)); border-radius: 13px; background: var(--success-soft); padding: 13px; }
.all-clear > svg { width: 22px; color: var(--success); }
.all-clear strong { font-size: 11px; }
.all-clear p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.compact-timeline { display: grid; gap: 7px; }
.compact-timeline .audit-entry { box-shadow: none; }
.quick-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.quick-action-card { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-subtle); padding: 16px; color: inherit; text-align: left; cursor: pointer; }
.quick-action-card:hover { border-color: var(--accent); background: var(--accent-softer); transform: translateY(-1px); }
.quick-action-card > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--accent-strong); }
.quick-action-card strong { font-size: 11px; }
.quick-action-card small { color: var(--muted); font-size: 8px; }


/* Segmented controls keep dense workflows simple without browser-default buttons. */
.segmented-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 16px 0 20px;
  padding: 4px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 84%, var(--background));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.segmented-tabs::-webkit-scrollbar { display: none; }
.segmented-tabs button {
  appearance: none;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.segmented-tabs button:hover { color: var(--ink); background: color-mix(in srgb, var(--interactive) 8%, transparent); }
.segmented-tabs button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.segmented-tabs button.active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 6px 16px rgba(20,34,29,.10), 0 1px 2px rgba(20,34,29,.08);
}
.segmented-tabs button:active { transform: translateY(1px); }
.training-tabs { margin: 14px 0 20px; }
@media (max-width: 760px) {
  .segmented-tabs { margin-inline: -2px; border-radius: 12px; }
  .segmented-tabs button { min-height: 44px; padding-inline: 13px; }
}

.training-work-queue { display: grid; gap: 22px; }
.queue-section { display: grid; gap: 10px; }
.queue-section-heading { display: flex; align-items: center; justify-content: space-between; padding-inline: 2px; }
.queue-section-heading span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.queue-section-heading strong { min-width: 25px; height: 25px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-muted); color: var(--ink-soft); font-size: 9px; }
.training-case-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 12px; }
.queue-card { padding: 0; overflow: hidden; cursor: default; }
.queue-card-main { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; border: 0; background: transparent; padding: 15px; color: inherit; text-align: left; cursor: pointer; }
.queue-card-copy { min-width: 0; display: grid; gap: 5px; }
.queue-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.queue-card-heading strong { font-size: 14px; }
.queue-card-copy > span { color: var(--muted); font-size: 9px; }
.queue-card-copy p { color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.queue-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); background: var(--surface-subtle); padding: 10px 13px; }
.queue-card > footer > span { min-width: 0; display: grid; color: var(--muted); font-size: 8px; }
.queue-card > footer > span strong { color: var(--ink-soft); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.queue-card > footer .button { min-height: 33px; padding: 6px 9px; font-size: 8px; }
.report-card-gallery, .outbox-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: 12px; }
.report-card-tile { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); padding: 14px; color: inherit; text-align: left; box-shadow: var(--shadow-card); cursor: pointer; }
.report-card-tile > div { min-width: 0; display: grid; gap: 3px; }
.report-card-tile strong { font-size: 12px; }
.report-card-tile p { margin: 0; color: var(--ink-soft); font-size: 8px; }
.report-card-tile small { color: var(--muted); font-size: 7px; }
.training-case-file { gap: 14px; }
.training-case-cover { display: flex; align-items: center; gap: 14px; border-radius: 18px; background: linear-gradient(135deg, #153f34, #315f4f); padding: 17px; color: #fff; }
.training-case-cover > div { min-width: 0; flex: 1; }
.training-case-cover h3 { margin: 3px 0; color: #fff; font-size: 25px; }
.training-case-cover p { margin: 0 0 9px; color: rgba(255,255,255,.72); font-size: 9px; }
.training-case-cover .eyebrow { color: #efc39f; }
.training-case-cover .progress-track { background: rgba(255,255,255,.15); }
.training-case-cover .progress-track span { background: #efc39f; }
.training-case-cover .progress-wrap small { color: rgba(255,255,255,.72); }
.lifecycle-rail { display: grid; grid-template-columns: repeat(10,minmax(88px,1fr)); gap: 6px; overflow-x: auto; margin: 0; padding: 2px 1px 10px; list-style: none; }
.lifecycle-rail li { min-width: 88px; display: grid; justify-items: start; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); padding: 9px; }
.lifecycle-rail li > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-muted); color: var(--muted); font-size: 8px; font-weight: 900; }
.lifecycle-rail li > span svg { width: 13px; }
.lifecycle-rail small { color: var(--muted); font-size: 7px; line-height: 1.2; }
.lifecycle-rail li.complete { border-color: color-mix(in srgb,var(--success) 28%,var(--line)); background: var(--success-soft); }
.lifecycle-rail li.complete > span { background: var(--success); color: #fff; }
.lifecycle-rail li.current { border-color: var(--accent); background: var(--accent-softer); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent); }
.lifecycle-rail li.current > span { background: var(--accent); color: #fff; }
.lifecycle-rail li.current small { color: var(--accent-strong); font-weight: 800; }
.next-action-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.next-action-card > div { min-width: 0; }
.next-action-card .live-dot { display: inline-block; margin-right: 4px; }
.next-action-card strong { margin-top: 3px; }
.case-overview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.case-overview-grid article { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); padding: 12px; }
.case-overview-grid article > span { color: var(--muted); font-size: 7px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.case-overview-grid article strong { font-size: 12px; }
.case-overview-grid article p { margin: 0; color: var(--ink-soft); font-size: 8px; line-height: 1.45; }
.plan-preview { border-color: color-mix(in srgb,var(--accent) 22%,var(--line)); background: linear-gradient(145deg,var(--accent-softer),var(--surface)); }
.plan-goals { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.plan-goals span { border-radius: 999px; background: var(--surface); padding: 6px 9px; color: var(--accent-strong); font-size: 8px; font-weight: 800; }
.document-status-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 11px; }
.document-status-row button { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 9px; color: inherit; text-align: left; cursor: pointer; }
.document-status-row button > svg { width: 17px; color: var(--accent); }
.document-status-row button > span { min-width: 0; display: grid; }
.document-status-row strong { font-size: 8px; }
.document-status-row small { color: var(--muted); font-size: 7px; }
.lifecycle-sessions .session-row { grid-template-columns: 32px minmax(0,1fr) auto; }
.lifecycle-sessions .session-row > div small { margin-top: 3px; color: var(--accent-strong); font-size: 7px; }
.case-timeline { display: grid; gap: 8px; }
.case-timeline article { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; align-items: start; }
.case-timeline article > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-softer); color: var(--accent); }
.case-timeline article svg { width: 14px; }
.case-timeline strong { font-size: 9px; }
.case-timeline p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.session-context-hero { display: flex; gap: 13px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,var(--accent-softer),var(--surface)); padding: 14px; }
.session-context-hero > div { min-width: 0; flex: 1; }
.session-context-hero h3 { margin: 3px 0 6px; font-size: 18px; }
.session-context-hero p { margin: 3px 0; color: var(--ink-soft); font-size: 8px; }
.media-section { border-color: color-mix(in srgb,var(--accent) 20%,var(--line)); }
.form-hint { margin: -2px 0 10px; color: var(--muted); font-size: 8px; }
.customer-report-card { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: var(--surface); box-shadow: var(--shadow-card); }
.customer-report-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg,#153f34,#315f4f); padding: 18px; color: #fff; }
.report-brand-mark { display: flex; align-items: center; gap: 10px; }
.report-brand-mark > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: #b86635; color: #fff; font-weight: 950; }
.report-brand-mark > div { display: grid; }
.report-brand-mark strong { color: #fff; font-size: 12px; }
.report-brand-mark small { color: rgba(255,255,255,.68); font-size: 8px; }
.report-title, .customer-report-card > section, .customer-report-card > footer { padding: 16px 18px; }
.report-title { border-bottom: 1px solid var(--line); }
.report-title h3 { margin: 3px 0; font-size: 22px; }
.report-title p { margin: 0; color: var(--muted); font-size: 9px; }
.customer-report-card h4 { margin: 0 0 7px; font-size: 11px; }
.report-story-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 0 18px 16px; }
.report-story-grid > section { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 9px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); padding: 11px; }
.report-story-grid > section > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-softer); color: var(--accent); }
.report-story-grid svg { width: 15px; }
.report-story-grid h4 { margin: 0; font-size: 9px; }
.report-story-grid p { margin: 3px 0 0; color: var(--ink-soft); font-size: 8px; line-height: 1.45; }
.report-story-grid .homework { border-color: color-mix(in srgb,var(--warning) 28%,var(--line)); background: var(--warning-soft); }
.report-media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 9px; }
.report-media-grid figure, .report-media-grid article { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); }
.report-media-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.report-media-grid figcaption { padding: 7px; color: var(--muted); font-size: 7px; }
.report-media-grid article { display: grid; place-items: center; gap: 5px; min-height: 110px; padding: 12px; text-align: center; }
.report-media-grid article svg { width: 24px; color: var(--accent); }
.report-media-grid article strong { font-size: 8px; }
.report-media-grid article small { color: var(--muted); font-size: 7px; }
.customer-report-card > footer { display: grid; gap: 4px; border-top: 1px solid var(--line); background: var(--accent-softer); }
.customer-report-card > footer strong { font-size: 10px; }
.customer-report-card > footer small { color: var(--muted); font-size: 8px; }
.premium-report { border-color: color-mix(in srgb,var(--accent) 28%,var(--line)); }
.premium-report p { display: grid; gap: 3px; }

.document-center-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 14px; margin: 14px 0; }
.document-list, .template-list { display: grid; gap: 8px; }
.document-list button, .template-list article { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); padding: 10px; color: inherit; text-align: left; }
.document-list button { cursor: pointer; }
.document-list button > span, .template-list article > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--accent); }
.document-list svg, .template-list svg { width: 16px; }
.document-list div, .template-list div { min-width: 0; display: grid; }
.document-list strong, .template-list strong { font-size: 9px; }
.document-list small, .template-list small { color: var(--muted); font-size: 7px; }
.document-row { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto 18px; gap: 9px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 10px; color: inherit; text-align: left; cursor: pointer; }
.document-row > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-softer); color: var(--accent); }
.document-row > div { min-width: 0; display: grid; }
.document-row strong { font-size: 9px; }
.document-row small { color: var(--muted); font-size: 7px; }
.legal-review-banner { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; color: var(--ink-soft); }
.legal-review-banner > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--warning); }
.legal-review-banner > span svg { width: 17px; }
.legal-review-banner > div { display: grid; }
.legal-review-banner strong { color: var(--ink); font-size: 9px; }
.legal-review-banner p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.document-sheet { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fffef9; color: #28322d; box-shadow: 0 10px 32px rgba(21,63,52,.09); }
.document-sheet header { display: grid; gap: 2px; border-bottom: 1px solid #d9d4c8; background: #f4efe3; padding: 14px; }
.document-sheet header span { color: #b86635; font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.document-sheet header strong { font-size: 13px; }
.document-sheet header small { color: #748078; font-size: 7px; }
.document-sheet > div { min-height: 220px; padding: 18px; font-size: 9px; line-height: 1.7; }
.signature-document-summary { display: grid; gap: 7px; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); padding: 12px; }
.signature-document-summary strong { font-size: 11px; }
.signature-document-summary span { color: var(--muted); font-size: 8px; }
.signature-document-summary p { margin: 0; color: var(--ink-soft); font-size: 8px; line-height: 1.6; }
.consent-row { border-color: color-mix(in srgb,var(--accent) 28%,var(--line)); background: var(--accent-softer); }

.messaging-shell { display: grid; grid-template-columns: minmax(245px,.72fr) minmax(0,1.55fr); gap: 14px; min-height: 600px; }
.thread-sidebar, .message-workspace { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); }
.thread-filter { display: flex; gap: 5px; border-bottom: 1px solid var(--line); padding: 10px; }
.thread-filter button { border: 0; border-radius: 999px; background: transparent; padding: 6px 9px; color: var(--muted); font-size: 8px; font-weight: 800; }
.thread-filter button.active { background: var(--accent-softer); color: var(--accent-strong); }
.thread-sidebar .thread-list { border: 0; border-radius: 0; box-shadow: none; }
.thread-avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-softer); color: var(--accent); }
.thread-avatar svg { width: 17px; }
.thread-row b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; font-size: 7px; }
.message-thread-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 14px; }
.message-thread-header h2 { margin: 2px 0; font-size: 17px; }
.message-thread-header p { margin: 0; color: var(--muted); font-size: 8px; }
.message-stream { min-height: 390px; max-height: 58vh; overflow: auto; display: grid; align-content: start; gap: 10px; padding: 15px; }
.message-bubble { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; max-width: 82%; background: transparent; padding: 0; }
.message-bubble > div { border-radius: 15px 15px 15px 4px; background: var(--surface-muted); padding: 10px 12px; }
.message-bubble.mine { justify-self: end; grid-template-columns: minmax(0,1fr) auto; }
.message-bubble.mine > .customer-avatar { order: 2; }
.message-bubble.mine > div { border-radius: 15px 15px 4px 15px; background: var(--accent-softer); }
.message-bubble header { display: flex; justify-content: space-between; gap: 10px; }
.message-bubble header strong { font-size: 8px; }
.message-bubble header time { color: var(--muted); font-size: 7px; }
.message-bubble p { margin: 4px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.inline-message-composer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; border-top: 1px solid var(--line); padding: 11px; }
.inline-message-composer label { display: block; }
.inline-message-composer textarea { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); padding: 9px; color: var(--ink); resize: vertical; }
.handoff-card { margin-top: 14px; }
.handoff-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 9px; }
.handoff-grid article { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); padding: 10px; }
.handoff-grid article > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--accent); }
.handoff-grid strong { font-size: 9px; }
.handoff-grid p { margin: 2px 0; color: var(--muted); font-size: 8px; }
.handoff-grid small { color: var(--muted); font-size: 7px; }

.notification-center { display: grid; gap: 8px; margin-top: 12px; }
.notification-row { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) 9px 18px; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px; color: inherit; text-align: left; cursor: pointer; }
.notification-row.unread { border-color: color-mix(in srgb,var(--accent) 24%,var(--line)); background: linear-gradient(145deg,var(--accent-softer),var(--surface)); }
.notification-row > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-subtle); color: var(--accent); }
.notification-row > span svg { width: 19px; }
.notification-row > div { min-width: 0; display: grid; }
.notification-row strong { font-size: 10px; }
.notification-row p { margin: 2px 0; color: var(--ink-soft); font-size: 8px; }
.notification-row small { color: var(--muted); font-size: 7px; }
.notification-row > b { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.notification-row.priority-critical { border-color: color-mix(in srgb,var(--danger) 32%,var(--line)); background: var(--danger-soft); }
.notification-detail { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-subtle); padding: 14px; }
.notification-detail > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-softer); color: var(--accent); }
.notification-detail h3, .notification-detail strong { font-size: 13px; }
.notification-detail p { margin: 4px 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.notification-detail small { color: var(--muted); font-size: 8px; }

.external-send-lock { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; align-items: center; border: 1px solid color-mix(in srgb,var(--success) 24%,var(--line)); border-radius: 15px; background: var(--success-soft); padding: 13px; margin-bottom: 14px; }
.external-send-lock > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--success); }
.external-send-lock > span svg { width: 20px; }
.external-send-lock strong { font-size: 10px; }
.external-send-lock p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.external-send-lock.compact { grid-template-columns: 35px minmax(0,1fr); margin-bottom: 12px; }
.external-send-lock.compact > span { width: 33px; height: 33px; }
.outbox-card { color: inherit; text-align: left; cursor: pointer; }
.outbox-card > header { display: flex; justify-content: space-between; }
.outbox-card > header > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-softer); color: var(--accent); }
.outbox-card > header svg { width: 18px; }
.outbox-card > strong { font-size: 12px; }
.outbox-card > p { margin: 0; color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.outbox-card > footer { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 9px; }
.outbox-card > footer small { color: var(--muted); font-size: 7px; }
.outbox-card > footer svg { width: 15px; }
.communication-preview { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-card); }
.communication-preview > header { display: flex; justify-content: space-between; background: linear-gradient(135deg,#153f34,#315f4f); padding: 14px; color: #fff; }
.communication-preview > header span { font-weight: 850; }
.communication-preview > header small { color: rgba(255,255,255,.7); }
.communication-preview h3 { margin: 0; padding: 16px 16px 7px; font-size: 18px; }
.communication-preview > p { margin: 0; padding: 0 16px 16px; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.communication-preview > footer { display: grid; gap: 2px; border-top: 1px solid var(--line); background: var(--surface-subtle); padding: 12px 16px; }
.communication-preview > footer strong { font-size: 8px; }
.communication-preview > footer span { color: var(--muted); font-size: 8px; }
.attachment-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.attachment-strip span { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: var(--surface-muted); padding: 6px 8px; color: var(--muted); font-size: 7px; }
.attachment-strip svg { width: 12px; }

.portal-account-switcher { display: flex; align-items: center; gap: 9px; overflow-x: auto; margin-bottom: 12px; }
.portal-account-switcher > span { flex: 0 0 auto; color: var(--muted); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.portal-account-switcher > div { display: flex; gap: 5px; }
.portal-account-switcher button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 6px 9px; color: var(--muted); font-size: 8px; cursor: pointer; }
.portal-account-switcher button.active { border-color: var(--accent); background: var(--accent-softer); color: var(--accent-strong); font-weight: 800; }
.portal-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg,var(--surface),var(--accent-softer)); padding: 16px; }
.portal-hero > div { display: flex; align-items: center; gap: 12px; }
.portal-hero h2 { margin: 3px 0; font-size: 22px; }
.portal-hero p { margin: 0; color: var(--muted); font-size: 8px; }
.portal-action-required { margin: 12px 0; overflow: hidden; border: 1px solid color-mix(in srgb,var(--warning) 28%,var(--line)); border-radius: 17px; background: var(--warning-soft); }
.portal-action-required > header { display: flex; align-items: center; gap: 10px; padding: 13px; }
.portal-action-required > header > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: var(--surface); color: var(--warning); }
.portal-action-required h2 { margin: 0; font-size: 14px; }
.portal-action-required p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.portal-action-required > div { display: grid; gap: 1px; border-top: 1px solid color-mix(in srgb,var(--warning) 20%,var(--line)); }
.portal-action-required button { display: grid; grid-template-columns: 31px minmax(0,1fr) 17px; gap: 9px; align-items: center; border: 0; background: rgba(255,255,255,.55); padding: 10px 13px; color: inherit; text-align: left; cursor: pointer; }
.portal-action-required button + button { border-top: 1px solid color-mix(in srgb,var(--warning) 16%,var(--line)); }
.portal-action-required button > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: var(--surface); color: var(--warning); }
.portal-action-required button strong { font-size: 9px; }
.portal-home-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.portal-card { min-width: 0; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); padding: 14px; box-shadow: var(--shadow-card); }
.portal-card > header { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 10px; }
.portal-card > header h3 { margin: 0; font-size: 13px; }
.portal-card > header > span { color: var(--muted); font-size: 8px; }
.portal-card > button, .portal-card > article { width: 100%; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 9px; align-items: center; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 9px 0; color: inherit; text-align: left; }
.portal-card > button { cursor: pointer; }
.portal-card > button > span, .portal-card > article > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-softer); color: var(--accent); }
.portal-card > button > span svg, .portal-card > article > span svg { width: 15px; }
.portal-card > button > div, .portal-card > article > div { min-width: 0; display: grid; }
.portal-card > button strong, .portal-card > article strong { font-size: 9px; }
.portal-card > button p, .portal-card > article p { margin: 2px 0 0; color: var(--muted); font-size: 7px; }
.portal-pet-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(105px,1fr)); gap: 8px; }
.portal-pet-grid button { display: grid; justify-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); padding: 10px; color: inherit; cursor: pointer; }
.portal-pet-grid strong { font-size: 9px; }
.portal-pet-grid span { color: var(--muted); font-size: 7px; }
.portal-appointment { border: 1px solid var(--line) !important; border-radius: 12px; background: var(--surface-subtle) !important; padding: 10px !important; }
.customer-message-stream { display: grid; gap: 9px; }
.customer-message-stream article { max-width: 85%; border-radius: 14px 14px 14px 4px; background: var(--surface-muted); padding: 10px; }
.customer-message-stream article.staff { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--accent-softer); }
.customer-message-stream header { display: flex; justify-content: space-between; gap: 10px; }
.customer-message-stream strong { font-size: 8px; }
.customer-message-stream time { color: var(--muted); font-size: 7px; }
.customer-message-stream p { margin: 4px 0 0; color: var(--ink-soft); font-size: 9px; }
.onboarding-gate { border: 1px solid var(--line); border-radius: 15px; padding: 13px; }
.onboarding-gate.incomplete { border-color: color-mix(in srgb,var(--warning) 28%,var(--line)); background: var(--warning-soft); }
.onboarding-gate.complete { border-color: color-mix(in srgb,var(--success) 28%,var(--line)); background: var(--success-soft); }
.onboarding-gate > header { display: flex; gap: 9px; }
.onboarding-gate > header > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); }
.onboarding-gate strong { font-size: 10px; }
.onboarding-gate p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.onboarding-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 11px; }
.onboarding-steps span { border-radius: 8px; background: var(--surface); padding: 7px; color: var(--muted); font-size: 7px; font-weight: 800; text-align: center; }
.onboarding-steps span.done { background: var(--success); color: #fff; }
.profile-edit-preview { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); padding: 11px; }
.profile-edit-preview > div { display: grid; }
.profile-edit-preview strong { font-size: 11px; }
.profile-edit-preview small { color: var(--muted); font-size: 8px; }

@media (max-width: 1050px) {
  .command-layout, .document-center-grid { grid-template-columns: 1fr; }
  .messaging-shell { grid-template-columns: minmax(220px,.7fr) minmax(0,1.3fr); }
}
@media (max-width: 800px) {
  .ranch-command-hero { min-height: 340px; }
  .ranch-command-hero::before { background: linear-gradient(0deg,rgba(7,28,22,.94),rgba(7,28,22,.24)),url("assets/ranch-hero.jpg") 58% center / cover no-repeat; }
  .ranch-hero-overlay { align-self: flex-end; padding: 23px 19px; }
  .live-operations-chip { top: 12px; right: 12px; }
  .training-case-grid, .portal-home-grid, .report-story-grid, .case-overview-grid { grid-template-columns: 1fr; }
  .messaging-shell { grid-template-columns: 1fr; min-height: auto; }
  .thread-sidebar { max-height: 260px; }
  .message-workspace { min-height: 500px; }
  .portal-hero { align-items: flex-start; }
  .next-action-card { align-items: flex-start; flex-direction: column; }
  .next-action-card .button { width: 100%; justify-content: center; }
  .document-status-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .quick-action-grid { grid-template-columns: 1fr; }
  .ranch-hero-overlay h1 { font-size: 39px; }
  .live-operations-chip { font-size: 7px; }
  .queue-card-main { grid-template-columns: 1fr; }
  .queue-card-main .pet-avatar { justify-self: start; }
  .queue-card > footer { align-items: stretch; flex-direction: column; }
  .queue-card > footer .button { width: 100%; justify-content: center; }
  .lifecycle-sessions .session-row { grid-template-columns: 30px minmax(0,1fr); }
  .lifecycle-sessions .session-row > .button, .lifecycle-sessions .session-row > .badge { grid-column: 1 / -1; justify-self: stretch; }
  .report-card-gallery, .outbox-grid { grid-template-columns: 1fr; }
  .document-row { grid-template-columns: 32px minmax(0,1fr) auto; }
  .document-row > span:nth-of-type(2), .document-row > .badge { display: none; }
  .portal-hero { flex-direction: column; }
  .portal-account-switcher { align-items: flex-start; flex-direction: column; }
  .external-send-lock { grid-template-columns: 36px minmax(0,1fr); }
  .external-send-lock > .badge { grid-column: 1 / -1; justify-self: start; }
  .onboarding-steps { grid-template-columns: repeat(2,1fr); }
}

/* v0.8 operational depth */
.connected-history { margin-top: 18px; }
.connected-timeline article > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--interactive) 10%, var(--surface)); color: var(--interactive); }
.connected-timeline article > span svg { width: 14px; height: 14px; }
.connected-timeline .inline-link { margin-top: 4px; }
.stay-plan-summary { border-top: 1px solid var(--border); }
.boarding-family-card { background: linear-gradient(155deg, color-mix(in srgb, var(--success) 8%, var(--surface)), var(--surface)); }
.portal-depth-section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.portal-depth-section .portal-card { min-height: 220px; }
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.package-grid article { display: grid; gap: 9px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 93%, var(--background)); }
.package-grid article > strong { font-size: 16px; color: var(--ink); }
.notification-preferences-card { grid-column: 1 / -1; }
.financial-test-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--warning) 12%, var(--surface)); color: var(--warning); font-size: 10px; font-weight: 850; }
.report-card-preview.boarding-family-card h3 { font-size: clamp(28px, 4vw, 42px); margin: 6px 0 12px; }
@media (max-width: 980px) { .portal-depth-section { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .portal-depth-section { grid-template-columns: 1fr; }
  .package-grid { grid-template-columns: 1fr; }
  .stay-plan-summary .detail-action-grid { grid-template-columns: 1fr; }
}

/* v0.9 command center + unified information architecture */
:root {
  --service-boarding: #376c57;
  --service-daycare: #2f7782;
  --service-training: #7154a7;
  --service-grooming: #a35f45;
  --service-activity: #366f94;
}

/* One shared navigation type system. */
.nav-group { margin-top: 0; }
.nav-group + .nav-group { margin-top: 12px; }
.nav-group-label,
.nav-group-toggle {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #73859d;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .115em;
  text-align: left;
  text-transform: uppercase;
}
.nav-group-toggle { cursor: pointer; }
.nav-group-toggle:hover { background: rgba(255,255,255,.045); color: #b8c6d9; }
.nav-group-chevron { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .16s ease; }
.nav-group.collapsed .nav-group-chevron { transform: rotate(0); }
.nav-group-items { display: grid; gap: 2px; }
.nav-item {
  min-height: 42px;
  gap: 11px;
  border-radius: 11px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.25;
  letter-spacing: -.005em;
}
.nav-item .nav-label { min-width: 0; overflow: hidden; flex: 1; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
.nav-item span:last-child { font-size: inherit; font-weight: inherit; }
.nav-item .nav-badge { flex: 0 0 auto; font-size: 9px; font-weight: 900; }
.nav-group[hidden], .nav-group-items[hidden] { display: none !important; }
.sheet-nav .nav-item { justify-content: flex-start; }
.sheet-nav .nav-item .nav-label { display: inline; }

.command-center-hero { margin-bottom: 15px; }
.command-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 11px; }
.command-metric {
  min-width: 0;
  min-height: 116px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 17px;
  align-items: start;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  color: var(--ink);
  padding: 14px;
  text-align: left;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.command-metric:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--accent) 34%,var(--line)); box-shadow: var(--shadow-elevated); }
.command-metric:focus-visible { outline: 3px solid color-mix(in srgb,var(--accent) 30%,transparent); outline-offset: 2px; }
.command-metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-softer); color: var(--accent-strong); }
.command-metric-icon svg { width: 19px; height: 19px; }
.command-metric.tone-green .command-metric-icon { background: var(--success-soft); color: var(--success); }
.command-metric.tone-violet .command-metric-icon { background: var(--violet-soft); color: var(--violet); }
.command-metric.tone-red .command-metric-icon { background: var(--danger-soft); color: var(--danger); }
.command-metric.tone-amber .command-metric-icon { background: var(--warning-soft); color: var(--warning); }
.command-metric-copy { min-width: 0; display: grid; align-content: start; gap: 2px; }
.command-metric-copy small { color: var(--muted); font-size: 9px; font-weight: 850; line-height: 1.25; }
.command-metric-copy strong { color: var(--ink); font-size: clamp(26px,2.4vw,36px); font-weight: 930; line-height: 1; letter-spacing: -.055em; }
.command-metric-copy span { color: var(--muted); font-size: 9px; font-weight: 650; line-height: 1.35; }
.command-metric-arrow { align-self: center; color: var(--muted); }
.command-metric-arrow svg { width: 15px; }

.today-service-strip { margin-top: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 15px; box-shadow: var(--shadow-card); }
.today-service-strip > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.today-service-strip h2 { margin: 3px 0 0; font-size: 17px; letter-spacing: -.03em; }
.today-service-strip > div { display: flex; gap: 9px; overflow-x: auto; margin-top: 12px; padding-bottom: 3px; scrollbar-width: thin; }
.service-count-pill { min-width: 150px; display: grid; grid-template-columns: 35px minmax(0,1fr) 14px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-subtle); color: var(--ink); padding: 10px; text-align: left; cursor: pointer; }
.service-count-pill:hover { border-color: var(--line-strong); background: var(--surface); }
.service-count-pill > span:first-child { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-softer); color: var(--accent-strong); }
.service-count-pill > span:first-child svg { width: 17px; }
.service-count-pill > span:nth-child(2) { display: grid; }
.service-count-pill small { color: var(--muted); font-size: 8px; font-weight: 750; }
.service-count-pill strong { font-size: 19px; font-weight: 920; line-height: 1; }
.service-count-pill > svg { width: 13px; color: var(--muted); }

.today-primary-grid, .today-arrival-grid, .today-secondary-grid, .service-operation-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(340px,.65fr); gap: 14px; margin-top: 14px; }
.today-arrival-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.today-secondary-grid { grid-template-columns: minmax(0,1.2fr) minmax(340px,.8fr); }
.command-section { min-width: 0; padding: 16px; }
.command-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.command-section-header h2 { margin: 3px 0 0; font-size: 18px; line-height: 1.1; letter-spacing: -.035em; }
.command-section-header p { margin: 4px 0 0; color: var(--muted); font-size: 9px; font-weight: 650; line-height: 1.45; }

.who-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.who-grid.full { grid-template-columns: repeat(auto-fit,minmax(265px,1fr)); }
.who-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-subtle); }
.who-card-pet { width: 100%; display: grid; grid-template-columns: 43px minmax(0,1fr) 16px; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); padding: 11px; text-align: left; cursor: pointer; }
.who-card-pet:hover { background: color-mix(in srgb,var(--accent-softer) 45%,transparent); }
.who-card-pet > span:nth-child(2) { min-width: 0; display: grid; }
.who-card-pet strong { overflow: hidden; font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.who-card-pet small { color: var(--muted); font-size: 8px; font-weight: 650; }
.who-card-pet > svg { width: 14px; color: var(--muted); }
.who-card-meta { display: grid; gap: 6px; padding: 9px 11px; }
.who-card-meta > span { min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; font-weight: 650; }
.who-card-meta svg { width: 13px; height: 13px; flex: 0 0 auto; }
.who-card-alert { display: flex; align-items: flex-start; gap: 7px; border-top: 1px solid color-mix(in srgb,var(--danger) 22%,var(--line)); background: var(--danger-soft); color: var(--danger); padding: 8px 11px; font-size: 8px; font-weight: 750; }
.who-card-alert svg { width: 13px; flex: 0 0 auto; }

.command-event-list, .next-up-timeline { display: grid; gap: 7px; }
.command-event-list.expanded { gap: 9px; }
.command-event-row { width: 100%; min-width: 0; min-height: 62px; display: grid; grid-template-columns: 58px 38px minmax(0,1fr) auto 15px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); color: var(--ink); padding: 9px 10px; text-align: left; cursor: pointer; }
.command-event-row:hover { border-color: var(--line-strong); background: var(--surface); }
.command-event-row.needs-action { border-color: color-mix(in srgb,var(--danger) 32%,var(--line)); }
.command-event-row > time { color: var(--ink-soft); font-size: 9px; font-weight: 850; }
.command-event-row > .pet-avatar, .event-service-icon { width: 38px; height: 38px; }
.event-service-icon { display: grid; place-items: center; border-radius: 12px; background: var(--accent-softer); color: var(--accent-strong); }
.event-service-icon svg { width: 18px; }
.command-event-copy { min-width: 0; display: grid; gap: 2px; }
.command-event-copy strong { overflow: hidden; font-size: 10px; font-weight: 880; text-overflow: ellipsis; white-space: nowrap; }
.command-event-copy span, .command-event-copy small { overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.command-event-row > svg { width: 14px; color: var(--muted); }
.command-attention .attention-row { min-height: 57px; }

.coverage-status-grid { display: grid; gap: 8px; }
.coverage-status { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); padding: 10px; }
.coverage-status > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; }
.coverage-status.covered > span { background: var(--success-soft); color: var(--success); }
.coverage-status.gap > span { background: var(--danger-soft); color: var(--danger); }
.coverage-status svg { width: 16px; }
.coverage-status strong { display: block; font-size: 10px; }
.coverage-status p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.coverage-detail-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 13px; }
.coverage-detail-card { padding: 15px; }
.coverage-detail-card > header { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 11px; }
.coverage-detail-card > header > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; }
.coverage-detail-card.covered > header > span { background: var(--success-soft); color: var(--success); }
.coverage-detail-card.gap > header > span { background: var(--danger-soft); color: var(--danger); }
.coverage-detail-card h2 { margin: 0; font-size: 15px; }
.coverage-detail-card header p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.coverage-detail-card > div { display: grid; gap: 7px; margin-top: 10px; }
.coverage-detail-card > div > button { width: 100%; display: grid; grid-template-columns: 35px minmax(0,1fr) 14px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); color: var(--ink); padding: 9px; text-align: left; cursor: pointer; }
.coverage-detail-card > div > button > span:nth-child(2) { display: grid; }
.coverage-detail-card > div > button strong { font-size: 9px; }
.coverage-detail-card > div > button small { color: var(--muted); font-size: 7px; }

.drilldown-surface { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 16px; padding: 16px; }
.drilldown-summary { min-height: 120px; display: grid; align-content: center; justify-items: center; border-radius: 15px; background: var(--accent-softer); text-align: center; }
.drilldown-summary strong { font-size: 42px; line-height: 1; letter-spacing: -.06em; }
.drilldown-summary span { color: var(--muted); font-size: 8px; font-weight: 750; }
.context-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.context-tabs button { flex: 0 0 auto; min-height: 35px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); padding: 7px 11px; font-size: 9px; font-weight: 800; cursor: pointer; }
.context-tabs button.active, .context-tabs button:hover { border-color: var(--line); background: var(--surface); color: var(--ink); }

.booking-roster { display: grid; gap: 9px; }
.booking-roster-card { display: grid; grid-template-columns: minmax(250px,1.25fr) minmax(310px,1fr) auto; align-items: center; gap: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-subtle); padding: 12px; }
.booking-roster-pets { min-width: 0; display: flex; align-items: center; gap: 8px; }
.booking-roster-pets .pet-avatar + .pet-avatar { margin-left: -15px; }
.booking-roster-pets > div { min-width: 0; display: grid; }
.booking-roster-pets strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.booking-roster-card dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0; }
.booking-roster-card dl > div { min-width: 0; }
.booking-roster-card dt { color: var(--muted); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.booking-roster-card dd { margin: 2px 0 0; font-size: 8px; font-weight: 750; }

.service-identity-banner { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 14px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg,var(--surface),var(--accent-softer)); padding: 17px; }
.service-identity-banner > span:first-child, .service-catalog-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--accent-softer); color: var(--accent-strong); }
.service-identity-banner > span:first-child svg, .service-catalog-icon svg { width: 25px; }
.service-identity-banner h2 { margin: 3px 0; font-size: 23px; letter-spacing: -.04em; }
.service-identity-banner p { margin: 0; color: var(--muted); font-size: 9px; }
.service-requirements { margin: 0; }
.service-catalog-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 11px; }
.service-catalog-card { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-subtle); padding: 13px; }
.service-catalog-card .service-catalog-icon { width: 46px; height: 46px; }
.service-catalog-card > div:nth-child(2) { min-width: 0; }
.service-catalog-card h3 { margin: 3px 0; font-size: 13px; letter-spacing: -.02em; }
.service-catalog-card p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.service-catalog-card dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 0; }
.service-catalog-card dl > div { border-radius: 10px; background: var(--surface); padding: 8px; }
.service-catalog-card dt { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.service-catalog-card dd { margin: 2px 0 0; font-size: 8px; font-weight: 800; }
.service-catalog-actions { grid-column: 1 / -1; display: flex; gap: 7px; }
.resource-summary-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(235px,1fr)); gap: 11px; margin-bottom: 14px; }
.resource-summary-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); padding: 12px; box-shadow: var(--shadow-card); }
.resource-summary-card > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--accent-softer); color: var(--accent-strong); }
.resource-summary-card strong { display: block; font-size: 10px; }
.resource-summary-card p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.organization-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 14px; }
.organization-identity { display: flex; align-items: center; gap: 13px; padding: 18px; }
.location-logo.large { width: 58px; height: 58px; border-radius: 17px; font-size: 16px; }
.organization-identity h2 { margin: 3px 0; font-size: 21px; }
.organization-identity p { margin: 0; color: var(--muted); font-size: 9px; }

.search-workspace { padding: 17px; }
.search-page-form label { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 15px; background: var(--surface-subtle); padding: 8px 8px 8px 13px; }
.search-page-form svg { width: 19px; color: var(--muted); }
.search-page-form input { width: 100%; min-height: 40px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; }
.search-page-summary { display: flex; align-items: baseline; gap: 7px; margin: 16px 0 8px; }
.search-page-summary strong { font-size: 24px; }
.search-page-summary span { color: var(--muted); font-size: 9px; }
.search-page-results { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 13px; margin-top: 13px; }
.search-page-results > section { min-width: 0; }
.search-page-results h2 { margin: 0 0 7px; color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.intake-journey { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 14px; }
.intake-journey span { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); color: var(--muted); padding: 8px; font-size: 8px; font-weight: 800; text-align: center; }
.intake-journey span.active { border-color: color-mix(in srgb,var(--accent) 35%,var(--line)); background: var(--accent-softer); color: var(--accent-strong); }
.profile-missing-callout { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 10px; border: 1px solid color-mix(in srgb,var(--warning) 32%,var(--line)); border-radius: 14px; background: var(--warning-soft); color: var(--warning); padding: 11px; }
.profile-missing-callout > svg { width: 18px; }
.profile-missing-callout strong { display: block; font-size: 9px; }
.profile-missing-callout p { margin: 2px 0 0; font-size: 8px; }

@media (max-width: 1440px) {
  .command-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1180px) {
  .today-primary-grid, .today-secondary-grid, .service-operation-grid { grid-template-columns: 1fr; }
  .booking-roster-card { grid-template-columns: minmax(220px,1fr) minmax(280px,1fr); }
  .booking-roster-actions { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .nav-group-toggle { justify-content: center; padding-inline: 7px; }
  .nav-group-toggle > span, .nav-group-chevron, .nav-item .nav-label, .nav-item .nav-badge { display: none; }
  .nav-group-items[hidden] { display: grid !important; }
  .nav-item { justify-content: center; padding-inline: 8px; }
}
@media (max-width: 760px) {
  .command-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .command-metric { min-height: 108px; grid-template-columns: 34px minmax(0,1fr); padding: 11px; }
  .command-metric-icon { width: 34px; height: 34px; }
  .command-metric-arrow { display: none; }
  .command-metric-copy strong { font-size: 27px; }
  .today-service-strip { padding: 12px; }
  .today-service-strip > header { align-items: flex-start; flex-direction: column; }
  .service-count-pill { min-width: 142px; }
  .today-primary-grid, .today-arrival-grid, .today-secondary-grid, .service-operation-grid, .organization-grid { grid-template-columns: 1fr; }
  .command-section { padding: 13px; }
  .command-section-header { align-items: flex-start; flex-direction: column; }
  .who-grid, .who-grid.full { grid-template-columns: 1fr; }
  .command-event-row { grid-template-columns: 46px 36px minmax(0,1fr) 14px; }
  .command-event-row > .badge { display: none; }
  .command-event-row > time { font-size: 8px; }
  .drilldown-surface { grid-template-columns: 1fr; padding: 12px; }
  .drilldown-summary { min-height: 82px; }
  .booking-roster-card { grid-template-columns: 1fr; }
  .booking-roster-card dl { grid-template-columns: repeat(3,1fr); }
  .booking-roster-actions { grid-column: auto; }
  .service-identity-banner { grid-template-columns: 45px minmax(0,1fr); }
  .service-identity-banner > .badge { grid-column: 1 / -1; justify-self: start; }
  .service-catalog-grid, .search-page-results { grid-template-columns: 1fr; }
  .service-catalog-actions { flex-direction: column; }
  .search-page-form label { grid-template-columns: 20px minmax(0,1fr); }
  .search-page-form .button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .intake-journey { grid-template-columns: repeat(2,1fr); }
}

/* ========================================================================
   v0.10 Maintenance, profile media, and distinctive DWR surface language
   ======================================================================== */
:root {
  --dwr-radius-sm: 10px;
  --dwr-radius-md: 16px;
  --dwr-radius-lg: 22px;
  --dwr-elevation-1: 0 8px 24px rgba(31, 23, 18, .06);
  --dwr-elevation-2: 0 16px 44px rgba(31, 23, 18, .10);
  --dwr-critical-surface: linear-gradient(145deg, color-mix(in srgb, var(--danger-soft) 82%, var(--surface)), var(--surface));
  --dwr-selected-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
[data-theme="dark"] {
  --dwr-elevation-1: 0 10px 28px rgba(0, 0, 0, .22);
  --dwr-elevation-2: 0 18px 48px rgba(0, 0, 0, .32);
}

/* Replace the old left-stripe card motif with top markers and layered surfaces. */
.calendar-event,
.task-card {
  position: relative;
  overflow: hidden;
  border-left-width: 1px !important;
  border-left-color: var(--line) !important;
  border-radius: var(--dwr-radius-md);
  box-shadow: none;
}
.calendar-event::before,
.task-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--event-color, var(--task-accent, var(--accent)));
  opacity: .78;
}
.task-card.complete::before { background: var(--success); }
.task-card.problem::before,
.task-card.escalated::before { background: var(--danger); }
.calendar-event:hover,
.task-card:hover { transform: translateY(-1px); box-shadow: var(--dwr-elevation-1); }

.header-control,
.header-profile-control {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--ink);
  padding: 7px 10px;
  box-shadow: 0 3px 12px rgba(31, 23, 18, .04);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.header-control > svg,
.header-profile-control > svg { width: 17px; height: 17px; }
.header-control:hover,
.header-profile-control:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); background: var(--surface); box-shadow: var(--dwr-elevation-1); }
.header-control:focus-visible,
.header-profile-control:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 26%, transparent); outline-offset: 2px; }
.header-control-label { font-size: 8px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.header-profile-control .header-avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 8px; font-weight: 900; }
.notification-button { position: relative; }
.notification-button .notification-dot { position: absolute; top: 6px; left: 25px; }

.profile-photo-hero { position: relative; }
.profile-photo-overlay {
  position: absolute;
  z-index: 4;
  left: 13px;
  top: 13px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 14, 12, .54);
  color: #fff;
  opacity: 0;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.profile-photo-overlay svg { width: 19px; height: 19px; }
.profile-photo-overlay span { font-size: 7px; font-weight: 850; }
.profile-photo-hero:hover .profile-photo-overlay,
.profile-photo-overlay:focus-visible { opacity: 1; }
.profile-photo-overlay:hover { transform: scale(1.03); }
.profile-photo-overlay:focus-visible { outline: 3px solid var(--surface); outline-offset: 2px; }
.profile-photo-dialog { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: var(--dwr-radius-md); background: var(--surface-subtle); padding: 14px; }
.profile-photo-preview { width: 84px; height: 84px; display: grid; place-items: center; overflow: hidden; border-radius: 999px; background: var(--accent-softer); }
.profile-photo-preview .pet-avatar,
.profile-photo-preview .customer-avatar { width: 84px; height: 84px; }
.profile-photo-preview-image { width: 100%; height: 100%; object-fit: cover; }
.photo-validation-note { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-muted); font-size: 8px; }
.photo-validation-note svg { width: 18px; flex: 0 0 auto; color: var(--accent); }

.maintenance-list-surface { padding: 0; overflow: hidden; }
.maintenance-list { display: grid; }
.maintenance-card {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  padding: 15px 17px;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.maintenance-card:last-child { border-bottom: 0; }
.maintenance-card:hover { background: var(--surface-subtle); }
.maintenance-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: -3px; }
.maintenance-card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-subtle); color: var(--ink-soft); }
.maintenance-card-icon svg { width: 20px; }
.maintenance-card-copy { min-width: 0; display: grid; gap: 3px; }
.maintenance-card-copy small { color: var(--ink-muted); font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.maintenance-card-copy strong { font-size: 10px; }
.maintenance-card-copy span { overflow: hidden; color: var(--ink-soft); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-card-copy em { color: var(--ink-muted); font-size: 7px; font-style: normal; }
.maintenance-card-status { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.maintenance-card.severity-critical .maintenance-card-icon { background: var(--danger-soft); color: var(--danger); }
.maintenance-card.severity-high .maintenance-card-icon { background: var(--warning-soft); color: var(--warning-ink); }
.maintenance-detail-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: var(--dwr-radius-lg); background: linear-gradient(145deg, var(--surface), var(--surface-subtle)); padding: 15px; }
.maintenance-detail-hero > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: var(--surface-subtle); color: var(--accent-strong); }
.maintenance-detail-hero > span svg { width: 24px; }
.maintenance-detail-hero.out-of-service { border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); background: var(--dwr-critical-surface); }
.maintenance-detail-hero.out-of-service > span { background: var(--danger-soft); color: var(--danger); }
.room-out-of-service-callout { display: grid; grid-template-columns: auto 1fr; gap: 10px; border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line)); border-radius: var(--dwr-radius-md); background: var(--dwr-critical-surface); padding: 13px; }
.room-out-of-service-callout > svg { width: 22px; color: var(--danger); }
.room-out-of-service-callout strong { color: var(--danger); letter-spacing: .04em; }
.critical-surface { border-color: color-mix(in srgb, var(--danger) 24%, var(--line)); background: var(--dwr-critical-surface); }
.maintenance-mini-grid { display: grid; }
.maintenance-mini-grid .maintenance-card { border: 1px solid var(--line); border-radius: var(--dwr-radius-md); margin-top: 8px; background: var(--surface); }

/* Red room state remains accessible without relying on color alone. */
.room-card.status-out-of-service,
.room-card.maintenance,
.room-card[data-status="OUT_OF_SERVICE"] {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
  background: var(--dwr-critical-surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 9%, transparent);
}
.room-card.status-out-of-service::after,
.room-card.maintenance::after,
.room-card[data-status="OUT_OF_SERVICE"]::after {
  content: "MAINTENANCE · DO NOT USE";
  display: block;
  margin-top: 6px;
  color: var(--danger);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .07em;
}

.adjustment-list { padding: 0; overflow: hidden; }
.adjustment-card-row { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 12px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; padding: 14px 16px; text-align: left; cursor: pointer; }
.adjustment-card-row:last-child { border-bottom: 0; }
.adjustment-card-row:hover { background: var(--surface-subtle); }
.adjustment-card-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.adjustment-card-row small { color: var(--ink-muted); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.adjustment-card-row em { overflow: hidden; color: var(--ink-soft); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.adjustment-score { min-width: 72px; display: grid; justify-items: end; }
.adjustment-score strong { font-size: 18px; }
.adjustment-score.comfortable strong { color: var(--success); }
.adjustment-score.attention strong { color: var(--warning-ink); }
.adjustment-score.critical strong { color: var(--danger); }
.adjustment-score-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
.adjustment-ring { --score: 0; width: 104px; aspect-ratio: 1; display: grid; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(circle at center, var(--surface) 58%, transparent 59%), conic-gradient(var(--accent) calc(var(--score) * 1%), var(--line) 0); box-shadow: inset 0 0 0 1px var(--line), var(--dwr-elevation-1); }
.adjustment-ring strong { font-size: 22px; line-height: 1; }
.adjustment-ring span { max-width: 76px; margin-top: 5px; color: var(--ink-muted); font-size: 6px; font-weight: 850; text-align: center; text-transform: uppercase; }
.adjustment-components { display: grid; gap: 8px; }
.adjustment-components article { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; border: 1px solid var(--line); border-radius: var(--dwr-radius-md); background: var(--surface-subtle); padding: 11px; }
.adjustment-components article span { display: grid; }
.adjustment-components article b { font-size: 12px; }
.adjustment-components article p { grid-column: 1/-1; color: var(--ink-soft); font-size: 8px; }
.dual-concept-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dual-concept-card > div { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; align-items: center; border: 1px solid var(--line); border-radius: var(--dwr-radius-md); background: var(--surface-subtle); padding: 12px; }
.dual-concept-card > div > span { grid-row: 1/3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--accent); }
.dual-concept-card p { color: var(--ink-muted); font-size: 7px; }

@media (max-width: 940px) {
  .header-control-label { display: none; }
  .header-control, .header-profile-control { width: 40px; justify-content: center; padding: 7px; }
  .notification-button .notification-dot { left: auto; right: 7px; }
}
@media (max-width: 680px) {
  .profile-photo-overlay { opacity: 1; width: 60px; height: 60px; left: 11px; top: 11px; background: rgba(18, 14, 12, .46); }
  .profile-photo-overlay span { display: none; }
  .maintenance-card { grid-template-columns: auto minmax(0,1fr) auto; padding: 13px; }
  .maintenance-card-status { grid-column: 2/4; justify-content: flex-start; }
  .maintenance-card > svg:last-child { display: none; }
  .adjustment-card-row { grid-template-columns: auto minmax(0,1fr) auto; }
  .adjustment-card-row > svg:last-child { display: none; }
  .dual-concept-card { grid-template-columns: 1fr; }
  .adjustment-score-hero { grid-template-columns: 1fr; }
}

/* ========================================================================== 
   v0.11 Field Operations + distinctive DWR surface language
   Replaces the pervasive colored-left-stripe motif with status orbs, soft
   elevation, small top-edge light, and readable state badges.
   ========================================================================== */
:root {
  --dwr-surface-glow: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 48%);
  --dwr-surface-selected: color-mix(in srgb, var(--accent) 8%, var(--surface));
  --dwr-edge-light: color-mix(in srgb, var(--accent) 28%, var(--line));
  --dwr-route-surface: linear-gradient(152deg, color-mix(in srgb, var(--surface) 96%, var(--accent-softer)), var(--surface));
  --dwr-map-line: color-mix(in srgb, var(--muted) 13%, transparent);
}
html[data-theme="dark"] {
  --dwr-surface-glow: linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 52%);
  --dwr-surface-selected: color-mix(in srgb, var(--accent) 11%, var(--surface));
  --dwr-edge-light: color-mix(in srgb, var(--accent) 34%, var(--line));
  --dwr-route-surface: linear-gradient(152deg, color-mix(in srgb, var(--surface-raised) 94%, var(--accent-softer)), var(--surface));
  --dwr-map-line: color-mix(in srgb, var(--muted) 16%, transparent);
}

/* No persistent Paws-like left stripe. State is communicated by icon, chip,
   top-edge light, readable text, and surface treatment. */
.nav-item.active {
  background: linear-gradient(135deg, rgba(184,107,53,.22), rgba(71,123,94,.12));
  box-shadow: 0 8px 22px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.09) !important;
  transform: translateY(-1px);
}
.nav-item.active::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  margin-right: -4px;
  border-radius: 999px;
  background: #f2b180;
  box-shadow: 0 0 0 4px rgba(242,177,128,.12);
}
.calendar-event,
.task-card {
  border-left-width: 1px !important;
  border-left-color: var(--line) !important;
  position: relative;
  overflow: hidden;
}
.calendar-event::before,
.task-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.calendar-event.event-training::before { background: color-mix(in srgb, var(--violet) 60%, transparent); }
.calendar-event.event-grooming::before,
.calendar-event.event-mobile_grooming::before { background: color-mix(in srgb, var(--warning) 60%, transparent); }
.calendar-event.event-daycare::before { background: color-mix(in srgb, var(--cyan) 60%, transparent); }
.task-card.complete::before { background: color-mix(in srgb, var(--success) 70%, transparent); }
.task-card.problem::before,
.task-card.escalated::before { background: color-mix(in srgb, var(--danger) 75%, transparent); }
.surface-card,
.stat-card,
.action-card,
.booking-card,
.training-card,
.service-card,
.message-card,
.notification-card {
  background-image: var(--dwr-surface-glow);
  box-shadow: var(--dwr-elevation-1);
}
.surface-card:hover,
.stat-card:hover,
.action-card:hover {
  border-color: var(--dwr-edge-light);
}

.field-privacy-banner {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--line));
  border-radius: var(--dwr-radius-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--success-soft) 76%, var(--surface)), var(--surface));
  padding: 12px 14px;
}
.field-privacy-banner > span:first-child {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--surface);
  color: var(--success);
  box-shadow: var(--dwr-elevation-1);
}
.field-privacy-banner svg { width: 19px; }
.field-privacy-banner strong { display: block; font-size: 10px; }
.field-privacy-banner p { margin: 2px 0 0; color: var(--ink-muted); font-size: 8px; }
.field-privacy-banner.compact { margin: 0; grid-template-columns: auto 1fr; }
.field-privacy-banner.compact > .badge { display: none; }

.truck-day-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(370px, .85fr);
  gap: 16px;
  align-items: start;
}
.truck-current-stop {
  min-height: 620px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  overflow: hidden;
  border: 1px solid var(--dwr-edge-light);
  border-radius: 28px;
  background: var(--dwr-route-surface);
  box-shadow: var(--dwr-elevation-2);
}
.truck-current-stop.complete {
  min-height: 360px;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 18px;
  padding: 28px;
}
.truck-current-stop.complete > span {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--success-soft);
  color: var(--success);
}
.truck-current-main { padding: clamp(24px, 4vw, 52px); }
.truck-current-main .eyebrow { font-size: 9px; letter-spacing: .13em; }
.truck-pet-line { display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; }
.truck-pet-line h2,
.truck-pet-line h3 { margin: 0; font-size: clamp(28px, 4vw, 48px); line-height: 1; letter-spacing: -.045em; }
.truck-pet-line h3 { font-size: 22px; }
.truck-pet-line p { margin: 5px 0 0; color: var(--ink-muted); font-size: 11px; }
.truck-current-main address { max-width: 680px; margin: 0; color: var(--ink-soft); font-size: clamp(17px, 2.2vw, 26px); font-style: normal; font-weight: 750; line-height: 1.25; }
.truck-window { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.truck-window > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: var(--accent-softer); color: var(--accent-strong); }
.truck-window svg { width: 19px; }
.truck-window strong { font-size: 14px; }
.truck-window small { color: var(--ink-muted); }
.truck-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--line);
}
.truck-context > div { min-height: 96px; background: color-mix(in srgb, var(--surface) 96%, transparent); padding: 16px; }
.truck-context small { color: var(--ink-muted); font-size: 7px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.truck-context p { margin: 6px 0 0; font-size: 9px; }
.truck-primary-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px;
  background: var(--surface);
}
.truck-primary-actions .button.primary { flex: 1; min-height: 56px; justify-content: center; font-size: 13px; }
.truck-primary-actions .button.ghost { min-height: 56px; }

.truck-route-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--dwr-elevation-1);
}
.truck-route-panel > header { display: flex; justify-content: space-between; gap: 10px; align-items: start; padding: 18px 18px 8px; }
.truck-route-panel h2 { margin: 2px 0 0; font-size: 18px; }
.truck-route-panel > .progress-wrap { margin: 0 18px 12px; }
.truck-route-panel > footer { display: flex; gap: 8px; padding: 12px 16px 16px; }
.route-stop-list { display: grid; }
.route-stop-list.compact { max-height: 520px; overflow-y: auto; }
.route-stop-list.preview { border-top: 1px solid var(--line); }
.route-stop-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr) auto auto;
  gap: 11px;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: inherit;
  padding: 13px 15px;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
article.route-stop-row { cursor: default; }
.route-stop-row:hover { background: var(--surface-subtle); }
.route-stop-row.current { background: var(--dwr-surface-selected); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 15%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 15%, transparent); }
.route-stop-row.current .route-sequence { background: var(--accent); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent); }
.route-sequence { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-muted); color: var(--ink-soft); font-size: 9px; font-weight: 900; }
.route-stop-copy { min-width: 0; display: grid; gap: 2px; }
.route-stop-copy small { color: var(--ink-muted); font-size: 7px; font-weight: 800; letter-spacing: .03em; }
.route-stop-copy strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.route-stop-copy em { overflow: hidden; color: var(--ink-soft); font-size: 7px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.route-stop-meta { display: grid; justify-items: end; gap: 4px; }
.route-stop-meta small { color: var(--ink-muted); font-size: 7px; }
.route-stop-row > svg { width: 16px; color: var(--muted); }

.field-fleet-cards,
.mileage-list { padding: 16px; }
.fleet-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.fleet-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  align-items: start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--dwr-route-surface);
  padding: 17px;
  box-shadow: var(--dwr-elevation-1);
}
.fleet-card::after { content: ""; position: absolute; inset: 0 12% auto; height: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.fleet-card.critical::after { background: var(--danger); }
.fleet-card-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px; background: var(--surface); color: var(--accent-strong); box-shadow: var(--dwr-elevation-1); }
.fleet-card-icon svg { width: 23px; }
.fleet-card h3 { margin: 2px 0; font-size: 15px; }
.fleet-card p { margin: 0; color: var(--ink-muted); font-size: 8px; }
.fleet-card > div:last-child { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; justify-content: space-between; }

.fleet-map-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(330px,.55fr); gap: 16px; }
.fleet-map-surface {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 25%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 26%),
    radial-gradient(circle at 78% 72%, color-mix(in srgb, var(--success) 10%, transparent), transparent 24%),
    var(--surface-subtle);
}
.fleet-map-grid { position: absolute; inset: 0; opacity: .72; background-image: linear-gradient(var(--dwr-map-line) 1px, transparent 1px), linear-gradient(90deg, var(--dwr-map-line) 1px, transparent 1px); background-size: 48px 48px; transform: rotate(-5deg) scale(1.1); }
.fleet-map-surface::before,
.fleet-map-surface::after { content: ""; position: absolute; width: 120%; height: 22px; left: -10%; border-radius: 999px; background: color-mix(in srgb, var(--surface) 60%, var(--line)); box-shadow: 0 0 0 1px var(--line); transform: rotate(24deg); top: 42%; }
.fleet-map-surface::after { transform: rotate(-31deg); top: 56%; }
.fleet-map-campus { position: absolute; left: 18%; top: 18%; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 8px 11px; box-shadow: var(--dwr-elevation-1); font-size: 8px; font-weight: 850; }
.fleet-map-campus svg { width: 16px; color: var(--success); }
.fleet-map-pin { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 3px; border: 0; background: transparent; cursor: pointer; }
.fleet-map-pin > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 17px 17px 17px 5px; background: var(--accent); color: #fff; box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 35%, transparent); transform: rotate(-8deg); }
.fleet-map-pin > span svg { width: 22px; transform: rotate(8deg); }
.fleet-map-pin strong { border-radius: 999px; background: var(--surface); padding: 4px 8px; box-shadow: var(--dwr-elevation-1); font-size: 7px; }
.fleet-map-pin.pin-1 { left: 54%; top: 27%; }
.fleet-map-pin.pin-2 { left: 68%; top: 53%; }
.fleet-map-pin.pin-3 { left: 38%; top: 70%; }
.fleet-map-surface > footer { position: absolute; inset: auto 16px 16px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); padding: 10px; backdrop-filter: blur(12px); }
.fleet-map-surface > footer p { margin: 0; color: var(--ink-muted); font-size: 7px; }
.fleet-map-list { display: grid; align-content: start; gap: 9px; }
.fleet-status-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 13px; box-shadow: var(--dwr-elevation-1); }
.fleet-status-card > span:first-child { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-softer); color: var(--accent-strong); }
.fleet-status-card div:nth-child(2) { min-width: 0; display: grid; }
.fleet-status-card small,
.fleet-status-card p { color: var(--ink-muted); font-size: 7px; }
.fleet-status-card p { margin: 2px 0 0; }
.fleet-status-card > div:last-child { display: grid; gap: 6px; justify-items: end; }

.mileage-hero { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--dwr-route-surface); padding: 18px; box-shadow: var(--dwr-elevation-1); }
.mileage-hero > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; background: var(--accent-softer); color: var(--accent-strong); }
.mileage-hero svg { width: 28px; }
.mileage-hero div { display: grid; }
.mileage-hero strong { font-size: 32px; line-height: 1; letter-spacing: -.04em; }
.mileage-hero small { margin-top: 4px; color: var(--ink-muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.data-table td strong,
.data-table td small { display: block; }
.data-table td small { color: var(--ink-muted); font-size: 7px; }

.boarding-care-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.care-card { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 11px; align-items: center; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); padding: 13px; color: inherit; text-align: left; cursor: pointer; box-shadow: var(--dwr-elevation-1); transition: transform .15s ease, border-color .15s ease; }
.care-card:hover { transform: translateY(-1px); border-color: var(--dwr-edge-light); }
.care-card.status-overdue_review { border-color: color-mix(in srgb, var(--danger) 34%, var(--line)); background: var(--dwr-critical-surface); }
.care-card > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.care-card small { color: var(--ink-muted); font-size: 7px; font-weight: 800; }
.care-card strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.care-card em { overflow: hidden; color: var(--ink-soft); font-size: 7px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.care-card > svg { width: 15px; color: var(--muted); }
.care-detail-hero { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 20px; background: var(--dwr-route-surface); padding: 16px; }
.care-detail-hero h3 { margin: 2px 0; font-size: 18px; }
.care-detail-hero p { margin: 0; color: var(--ink-soft); font-size: 8px; }

.unc-workbench,
.maintenance-communication-preview { margin-top: 16px; }
.maintenance-preview-list { display: grid; }
.maintenance-preview-list > button { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 11px; align-items: center; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; padding: 12px; text-align: left; cursor: pointer; }
.maintenance-preview-list > button > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: var(--warning-soft); color: var(--warning); }
.maintenance-preview-list p { margin: 2px 0 0; color: var(--ink-muted); font-size: 7px; }
.maintenance-preview-list svg { width: 16px; }

.field-status-rail { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.field-status-rail > button { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); color: inherit; padding: 14px; text-align: left; cursor: pointer; box-shadow: var(--dwr-elevation-1); }
.field-status-rail > button:hover { transform: translateY(-1px); border-color: var(--dwr-edge-light); }
.status-orb { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-muted); color: var(--muted); }
.status-orb.active { background: var(--success-soft); color: var(--success); box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 8%, transparent); }
.status-orb.critical { background: var(--danger-soft); color: var(--danger); box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 8%, transparent); }
.status-orb svg { width: 22px; }
.field-status-rail small { color: var(--ink-muted); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.field-status-rail strong { display: block; margin-top: 2px; font-size: 11px; }
.field-status-rail p { margin: 2px 0 0; color: var(--ink-soft); font-size: 8px; }
.field-status-rail > button > svg { width: 16px; color: var(--muted); }

@media (max-width: 1180px) {
  .truck-day-layout,
  .fleet-map-layout { grid-template-columns: 1fr; }
  .truck-current-stop { min-height: 540px; }
  .fleet-map-surface { min-height: 520px; }
}
@media (max-width: 900px) {
  .fleet-card-grid { grid-template-columns: 1fr; }
  .boarding-care-grid { grid-template-columns: 1fr; }
  .truck-current-stop { min-height: 500px; }
  .truck-current-main { padding: 28px; }
}
@media (max-width: 680px) {
  .field-privacy-banner { grid-template-columns: auto 1fr; }
  .field-privacy-banner > .badge { grid-column: 2; justify-self: start; }
  .truck-current-stop { min-height: 0; border-radius: 22px; }
  .truck-current-main { padding: 22px 18px; }
  .truck-pet-line h2 { font-size: 32px; }
  .truck-current-main address { font-size: 17px; }
  .truck-context { grid-template-columns: 1fr; }
  .truck-context > div { min-height: 0; }
  .truck-primary-actions { position: sticky; bottom: 0; flex-wrap: wrap; }
  .truck-primary-actions .button { width: 100%; justify-content: center; }
  .route-stop-row { grid-template-columns: auto auto minmax(0,1fr); }
  .route-stop-meta { grid-column: 3; justify-items: start; }
  .route-stop-row > svg { display: none; }
  .fleet-map-surface { min-height: 430px; }
  .fleet-map-surface::before,
  .fleet-map-surface::after { height: 16px; }
  .fleet-status-card { grid-template-columns: auto minmax(0,1fr); }
  .fleet-status-card > div:last-child { grid-column: 1/-1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
  .field-status-rail { grid-template-columns: 1fr; }
  .maintenance-preview-list > button { grid-template-columns: auto minmax(0,1fr) auto; }
  .maintenance-preview-list > button > svg:last-child { display: none; }
  .maintenance-preview-list .badge { grid-column: 2; justify-self: start; }
}
@media (orientation: landscape) and (min-width: 700px) and (max-width: 1280px) {
  .truck-day-layout { grid-template-columns: minmax(0,1.18fr) minmax(330px,.82fr); }
  .truck-current-stop { min-height: calc(100vh - 180px); }
  .truck-current-main { padding: 30px; }
  .truck-pet-line h2 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item,
  .surface-card,
  .route-stop-row,
  .care-card,
  .fleet-card,
  .field-status-rail > button { transition: none !important; }
}

/* v0.12 navigation reliability + integrated Maintenance work queue */
.nav-group-toggle {
  position: relative;
  isolation: isolate;
  touch-action: manipulation;
}
.nav-group-toggle[aria-expanded="true"] { color: #c5d2e4; }
.nav-group-toggle[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  inset: 4px 5px;
  z-index: -1;
  border-radius: 8px;
  background: rgba(255,255,255,.038);
}
.nav-group-chevron { transform: rotate(0deg); }
.nav-group:not(.collapsed) .nav-group-chevron { transform: rotate(90deg); }
.nav-group-items { overflow: hidden; }
.nav-group-items:not([hidden]) { animation: navItemsReveal .16s ease-out; }
@keyframes navItemsReveal { from { opacity: 0; transform: translateY(-3px); } }

/* The command center remains a labelled accordion through tablet widths.
   Phone navigation uses the More sheet below 760px. */
@media (max-width: 1024px) and (min-width: 761px) {
  :root { --sidebar: 220px; }
  .brand-row { justify-content: flex-start; padding-inline: 14px; }
  .brand-copy, .location-copy, .location-switcher .chevron,
  .nav-group-label, .nav-group-toggle > span, .nav-group-chevron,
  .nav-item .nav-label, .nav-item .nav-badge,
  .support-link > span:nth-child(2), .user-card > span:nth-child(2),
  .user-card .icon-button { display: initial; }
  .brand-copy, .location-copy, .support-link > span:nth-child(2), .user-card > span:nth-child(2) { display: grid; }
  .location-switcher { justify-content: flex-start; min-height: 62px; padding: 8px; }
  .nav-group-toggle { justify-content: space-between; padding-inline: 9px; }
  .nav-group-items[hidden] { display: none !important; }
  .nav-item { justify-content: flex-start; padding-inline: 9px; }
  .sidebar-footer { display: block; }
  .support-link { justify-content: flex-start; width: 100%; }
  .user-card { padding: 8px; }
}

.sheet-nav {
  grid-template-columns: 1fr;
  gap: 9px;
  max-height: min(64vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1px 2px 4px;
}
.sheet-nav .nav-group {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-subtle);
}
.sheet-nav .nav-group-label,
.sheet-nav .nav-group-toggle {
  min-height: 44px;
  margin: 0;
  border-radius: 0;
  color: var(--ink-muted);
  padding: 10px 12px;
}
.sheet-nav .nav-group-toggle:hover,
.sheet-nav .nav-group-toggle[aria-expanded="true"] { background: var(--surface); color: var(--ink); }
.sheet-nav .nav-group-toggle[aria-expanded="true"]::after { display: none; }
.sheet-nav .nav-group-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
  border-top: 1px solid var(--line);
  padding: 8px;
}
.sheet-nav .nav-group-items[hidden] { display: none !important; }
.sheet-nav .nav-item {
  min-height: 48px;
  border-radius: 11px;
  padding: 8px 10px;
}
.sheet-nav .nav-icon { color: var(--accent-strong); }
@media (max-width: 460px) {
  .sheet-nav .nav-group-items { grid-template-columns: 1fr; }
}

.maintenance-work-queue {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
}
.maintenance-queue-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 15px;
}
.maintenance-queue-header h2 { margin: 3px 0 0; font-size: 18px; letter-spacing: -.025em; }
.maintenance-queue-header p { margin: 5px 0 0; color: var(--muted); font-size: 10px; font-weight: 650; }
.maintenance-queue-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--surface-subtle);
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px var(--line);
}
.maintenance-queue-mark svg { width: 19px; height: 19px; }
.maintenance-filter-shell {
  position: relative;
  border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-subtle) 86%, var(--accent-soft) 14%);
  padding: 8px 10px;
}
.maintenance-filter-shell::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-subtle) 92%, transparent));
}
.maintenance-status-filter {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  padding: 1px 12px 2px 1px;
}
.maintenance-status-option {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  padding: 7px 9px 7px 11px;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.maintenance-status-option:hover { background: var(--surface); color: var(--ink-soft); }
.maintenance-status-option:active { transform: translateY(1px); }
.maintenance-status-option strong {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--line) 65%, transparent);
  color: var(--ink-muted);
  padding: 0 5px;
  font-size: 9px;
  font-weight: 950;
}
.maintenance-status-option.active {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 5px 14px rgba(15,23,42,.08), inset 0 -2px 0 var(--accent);
}
.maintenance-status-option.active strong { background: var(--accent-soft); color: var(--accent-strong); }
.maintenance-work-queue > .maintenance-list { border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 760px) {
  .maintenance-queue-header { padding: 15px 14px 12px; }
  .maintenance-queue-header p { max-width: 270px; }
  .maintenance-filter-shell { margin-inline: 0; padding-inline: 9px; }
  .maintenance-status-option { min-height: 42px; font-size: 10px; }
}

/* v0.12 Boarding shift continuity + Daycare compatibility depth */
.care-plan-controls-v12 > p { margin-bottom: 12px; }
.handoff-list-v12, .handoff-board-v12, .compatibility-list-v12, .playgroup-list-v12 { display: grid; gap: 7px; margin-top: 11px; }
.handoff-list-v12 > button,
.handoff-board-v12 > button,
.compatibility-list-v12 > button,
.playgroup-list-v12 > button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-subtle);
  color: var(--ink);
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.handoff-list-v12 > button:hover,
.handoff-board-v12 > button:hover,
.compatibility-list-v12 > button:hover,
.playgroup-list-v12 > button:hover { transform: translateY(-1px); border-color: var(--line-strong); background: var(--surface); }
.handoff-list-v12 > button > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); }
.handoff-list-v12 strong, .handoff-board-v12 strong, .compatibility-list-v12 strong, .playgroup-list-v12 strong { display: block; font-size: 10px; }
.handoff-list-v12 p, .handoff-board-v12 p, .compatibility-list-v12 p, .playgroup-list-v12 p { margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.handoff-detail-hero-v12 { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-subtle); padding: 13px; }
.handoff-detail-hero-v12 small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.handoff-detail-hero-v12 h3 { margin: 3px 0 0; font-size: 13px; line-height: 1.45; }
.handoff-detail-hero-v12 p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.daycare-depth-grid-v12 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.daycare-depth-grid-v12 > section { min-width: 0; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-subtle); padding: 12px; }
.daycare-depth-grid-v12 h3 { margin: 0; font-size: 11px; }
.playgroup-mark-v12 { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--service-daycare, var(--accent)); color: white; }
@media (max-width: 900px) { .daycare-depth-grid-v12 { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .handoff-list-v12 > button, .handoff-board-v12 > button, .compatibility-list-v12 > button, .playgroup-list-v12 > button { grid-template-columns: auto minmax(0,1fr) auto; }
  .handoff-list-v12 > button > svg:last-child, .handoff-board-v12 > button > svg:last-child, .compatibility-list-v12 > button > svg:last-child, .playgroup-list-v12 > button > svg:last-child { display: none; }
}

/* v0.12.1 — pet-first identity and one-tap customer calling.
   Staff identify the dog first; the customer is supporting context. */
.pet-contact-identity {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.pet-contact-primary {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
}
.pet-contact-identity .pet-contact-name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 940;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-contact-owner {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-contact-details {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-contact-phone {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 999px;
  background: var(--accent-softer);
  color: var(--accent-strong);
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.pet-contact-phone:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-softer) 75%, var(--surface));
  transform: translateY(-1px);
}
.pet-contact-phone:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 38%, transparent);
  outline-offset: 2px;
}
.pet-contact-phone svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}
.pet-contact-phone.compact {
  min-height: 25px;
  padding: 3px 7px;
  font-size: 9px;
}
.pet-contact-identity.compact .pet-contact-name { font-size: 14px; }
.pet-contact-identity.compact .pet-contact-owner { font-size: 10px; }
.pet-contact-identity.compact .pet-contact-details { font-size: 9px; }

/* Existing pet-centered surfaces inherit the same hierarchy even where a
   compact service label sits beside the shared identity component. */
.daycare-pet .pet-contact-identity,
.groom-main .pet-contact-identity,
.training-card-head .pet-contact-identity,
.command-event-copy .pet-contact-identity,
.who-card-pet .pet-contact-identity,
.compliance-pet-card .pet-contact-identity,
.pet-directory-card .pet-contact-identity { min-width: 0; }

@media (max-width: 760px) {
  .pet-contact-primary { gap: 5px 7px; }
  .pet-contact-identity .pet-contact-name { font-size: 15px; }
  .pet-contact-phone { min-height: 30px; font-size: 10px; }
  .pet-contact-phone.compact { min-height: 28px; font-size: 9px; }
}


/* Pet-first hierarchy refinements across compact operational surfaces. */
.customer-main .pet-contact-identity,
.detail-hero .pet-contact-identity,
.training-case-cover .pet-contact-identity,
.training-hero .pet-contact-identity,
.truck-pet-line .pet-contact-identity,
.room-detail-hero .pet-contact-identity { flex: 1; min-width: 0; }
.customer-row .pet-contact-owner,
.customer-row .pet-contact-details,
.groom-main .pet-contact-owner,
.groom-main .pet-contact-details,
.lead-card .pet-contact-owner,
.lead-card .pet-contact-details { font-size: 10px; }
.room-pet-contact { display: flex !important; align-items: center; gap: 6px; min-width: 0; white-space: normal !important; }
.room-pet-contact .pet-contact-identity { min-width: 0; }
.room-card .pet-contact-name { font-size: 11px !important; }
.room-card .pet-contact-owner,
.room-card .pet-contact-details { font-size: 8px !important; }
.room-card .pet-contact-phone { min-height: 22px; max-width: 100%; padding: 3px 5px; font-size: 7px; }
.room-card .pet-contact-phone span { display: inline; overflow: hidden; text-overflow: ellipsis; }
.calendar-event-body .pet-contact-name,
.command-event-copy .pet-contact-name { font-size: 12px; }
.calendar-event-body .pet-contact-owner,
.command-event-copy .pet-contact-owner { font-size: 9px; }
.who-card-pet .pet-contact-name { font-size: 14px; }
.who-card-pet .pet-contact-owner { font-size: 10px; }
.queue-card-heading .pet-contact-identity { flex: 1; }
.queue-card-heading .pet-contact-name { font-size: 15px; }
.route-stop-copy .pet-contact-name { font-size: 12px; }
.route-stop-copy .pet-contact-owner,
.route-stop-copy .pet-contact-details { font-size: 8px; }
.care-card .pet-contact-name { font-size: 12px; }
.care-card .pet-contact-owner,
.care-card .pet-contact-details { font-size: 8px; }
.pet-first-lead { align-items: center; }

@media (max-width: 520px) {
  .pet-contact-primary { align-items: flex-start; }
  .pet-contact-phone { max-width: 100%; }
  .pet-contact-phone span { overflow: hidden; text-overflow: ellipsis; }
}

/* v0.13 owner preview, shared lobby schedule, and departure operations */
.owner-preview-banner{position:sticky;top:0;z-index:45;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 24px;background:linear-gradient(90deg,var(--warning-soft,#fff4d7),var(--surface,#fff));border-bottom:1px solid var(--warning,#bd7a00);color:var(--text,#162237);box-shadow:0 8px 24px rgba(15,33,55,.08)}
.owner-preview-banner[hidden]{display:none}.owner-preview-banner>span{display:flex;align-items:center;gap:10px;min-width:0}.owner-preview-banner svg{width:20px;height:20px}.owner-preview-banner strong{font-size:.92rem}.owner-preview-banner small{color:var(--muted,#637083)}
.preview-control{min-width:max-content}.lobby-schedule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.lobby-slot{display:grid;grid-template-columns:74px auto 1fr auto;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border:1px solid var(--border,#dde3ea);border-radius:18px;background:var(--surface,#fff);text-align:left;color:var(--text,#162237);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.lobby-slot:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(17,43,72,.09)}.lobby-slot time{font-size:1.02rem;font-weight:800}.lobby-slot.available{grid-template-columns:74px auto 1fr;background:var(--surface-subtle,#f7f9fb);border-style:dashed}.lobby-slot.occupied{border-color:color-mix(in srgb,var(--accent,#1b5fae) 30%,var(--border,#dde3ea))}.lobby-slot .pet-avatar{flex:none}
.bath-queue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}.bath-queue-card{display:flex;flex-direction:column;gap:16px;padding:18px;border:1px solid var(--border,#dde3ea);border-radius:24px;background:var(--surface,#fff);box-shadow:0 12px 34px rgba(17,43,72,.07)}.bath-pet{display:flex;align-items:center;gap:14px}.bath-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.bath-facts span{padding:10px;border-radius:14px;background:var(--surface-subtle,#f6f8fa)}.bath-facts small{display:block;color:var(--muted,#637083);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.bath-facts strong{display:block;margin-top:4px;font-size:.9rem}.bath-queue-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.bath-print-table{display:none;width:100%;border-collapse:collapse}.bath-print-table th,.bath-print-table td{padding:8px;border:1px solid #cdd3da;text-align:left;font-size:12px}
.boarding-departure-command-v13,.today-departure-strip-v13{margin-top:20px}.departure-readiness-list{display:grid;gap:10px}.departure-readiness-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;width:100%;padding:12px 14px;border:1px solid var(--border,#dde3ea);border-radius:18px;background:var(--surface,#fff);text-align:left;color:var(--text,#162237)}.departure-readiness-row>span{font-weight:700;color:var(--muted,#637083)}.portal-lobby-v13{margin-top:18px}.portal-lobby-v13>p{color:var(--muted,#637083)}
@media(max-width:800px){.owner-preview-banner{padding:10px 14px;align-items:flex-start}.owner-preview-banner>span{align-items:flex-start;flex-wrap:wrap}.owner-preview-banner small{width:100%;padding-left:30px}.lobby-schedule-grid{grid-template-columns:1fr}.lobby-slot{grid-template-columns:68px auto 1fr}.lobby-slot.occupied>svg{display:none}.bath-queue-grid{grid-template-columns:1fr}.bath-facts{grid-template-columns:1fr 1fr}.departure-readiness-row{grid-template-columns:auto 1fr}.departure-readiness-row>span{grid-column:2}.departure-readiness-row>svg{display:none}}
@media print{body *{visibility:hidden!important}.print-bath-list,.print-bath-list *{visibility:visible!important}.print-bath-list{position:absolute!important;left:0;top:0;width:100%!important;border:0!important;box-shadow:none!important}.print-bath-list .command-section-header p,.bath-queue-grid{display:none!important}.bath-print-table{display:table!important}.sidebar,.topbar,.demo-ribbon,.mobile-nav,.owner-preview-banner{display:none!important}}

/* v0.14 operations-completion surfaces */
.completion-check-grid,
.adjustment-dimension-grid,
.readiness-grid-v14,
.daycare-completion-grid-v14,
.mapping-grid-v14 {
  display: grid;
  gap: 14px;
}
.completion-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.completion-check {
  display: block;
  min-width: 0;
  cursor: pointer;
}
.completion-check > input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.completion-check > span {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 76px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 18px);
  background: var(--surface);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.completion-check > span > svg,
.completion-check > span > span:first-child {
  flex: 0 0 auto;
}
.completion-check strong,
.completion-check small { display: block; }
.completion-check small { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.completion-check:hover > span { transform: translateY(-1px); border-color: var(--interactive); }
.completion-check > input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.completion-check > input:checked + span {
  background: var(--dwr-surface-selected);
  border-color: var(--interactive);
  box-shadow: var(--shadow-sm);
}
.adjustment-dimension-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.readiness-grid-v14 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.readiness-item-v14 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 18px);
  background: var(--surface-muted, var(--surface));
}
.readiness-item-v14 > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.readiness-item-v14 strong,
.readiness-item-v14 small { display: block; }
.readiness-item-v14 small { margin-top: 4px; color: var(--muted); }
.readiness-item-v14.complete { background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.readiness-item-v14.blocked { background: color-mix(in srgb, var(--critical) 9%, var(--surface)); border-color: color-mix(in srgb, var(--critical) 38%, var(--border)); }
.daycare-completion-grid-v14 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.daycare-completion-grid-v14 > section,
.mapping-grid-v14 > article {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 22px);
  background: var(--surface-muted, var(--surface));
}
.portal-action-required-v14 {
  background: linear-gradient(145deg, color-mix(in srgb, var(--warning) 8%, var(--surface)), var(--surface));
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
}
.portal-action-list-v14 { display: grid; gap: 10px; margin-top: 14px; }
.portal-action-list-v14 > button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 18px);
  background: var(--surface);
  color: var(--text);
  text-align: left;
}
.portal-action-list-v14 > button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.portal-action-list-v14 strong,
.portal-action-list-v14 small { display: block; }
.portal-action-list-v14 small { margin-top: 3px; color: var(--muted); }
.portal-action-row-v14 { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mapping-grid-v14 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mapping-grid-v14 > article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.mapping-grid-v14 p { margin: 4px 0 0; color: var(--muted); }
.operations-completion-v14 .mini-list button { min-height: 58px; }
@media (max-width: 980px) {
  .adjustment-dimension-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapping-grid-v14 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .completion-check-grid,
  .adjustment-dimension-grid,
  .readiness-grid-v14,
  .daycare-completion-grid-v14 { grid-template-columns: 1fr; }
  .portal-action-row-v14 { display: grid; grid-template-columns: 1fr; }
  .portal-action-row-v14 .button { width: 100%; }
  .mapping-grid-v14 > article { grid-template-columns: auto minmax(0, 1fr); }
  .mapping-grid-v14 > article .status-badge { grid-column: 2; justify-self: start; }
}
@media print {
  .portal-action-required-v14,
  .operations-completion-v14 { break-inside: avoid; }
}

/* v0.15 front-desk Boarding, structured check-in/checkout, and local test-payment surfaces */
html[data-theme="dark"] .lobby-slot,
html[data-theme="dark"] .lobby-slot time,
html[data-theme="dark"] .lobby-slot small,
html[data-theme="dark"] .lobby-slot .pet-contact-name,
html[data-theme="dark"] .lobby-slot .pet-contact-owner,
html[data-theme="dark"] .lobby-slot .pet-contact-details,
html[data-theme="dark"] .lobby-slot .pet-contact-phone,
html[data-theme="dark"] .lobby-slot .badge {
  color: var(--ink);
}
html[data-theme="dark"] .lobby-slot small,
html[data-theme="dark"] .lobby-slot .pet-contact-owner,
html[data-theme="dark"] .lobby-slot .pet-contact-details { color: var(--ink-soft); }
.lobby-slot {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
}
.lobby-slot.available { background: var(--surface-subtle); }
.lobby-slot > *, .lobby-pet-v15, .lobby-pet-v15 > *, .pet-contact-identity, .pet-contact-primary { min-width: 0; }
.lobby-pet-v15 { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.lobby-pet-v15 .pet-contact-identity { flex: 1 1 auto; overflow: hidden; }
.pet-contact-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; max-width: 100%; }
.pet-contact-phone { max-width: 100%; min-width: 0; overflow: hidden; }
.pet-contact-phone span { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-slot .pet-contact-primary { align-items: flex-start; }
.lobby-slot .pet-contact-phone { flex: 0 1 auto; }
.lobby-kind-v15 { min-width: 0; }

.view-as-fields-v15 { display: contents; }
[data-view-as-section][hidden] { display: none !important; }
.view-as-context-v15 { padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); }
.view-as-context-v15 strong, .view-as-context-v15 small { display: block; }
.view-as-context-v15 small { margin-top: 4px; color: var(--muted); }
.portal-preview-identity, .portal-account-header, .portal-household-header { min-width: 0; }
.portal-preview-identity .avatar, .portal-preview-identity .customer-avatar,
.portal-account-header .avatar, .portal-account-header .customer-avatar,
.portal-household-header .avatar, .portal-household-header .customer-avatar {
  width: 46px !important; height: 46px !important; max-width: 46px !important; max-height: 46px !important;
  min-width: 46px !important; min-height: 46px !important; flex: 0 0 46px !important;
  font-size: 13px !important; line-height: 1 !important; overflow: hidden;
}
.portal-preview-identity svg, .portal-account-header svg, .portal-household-header svg { width: 20px; height: 20px; }
.portal-preview-identity .avatar-initial, .portal-account-header .avatar-initial, .portal-household-header .avatar-initial { font-size: 8px !important; }

.boarding-reservation-form-v15, .boarding-checkin-v15, .boarding-checkout-v15 { display: grid; gap: 18px; }
.form-section-v15 { display: grid; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.form-section-v15 > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.form-section-v15 > header h3 { margin: 0; font-size: 1rem; }
.form-section-v15 > header p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; }
.choice-grid-v15 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice-card-v15 { position: relative; display: block; min-width: 0; cursor: pointer; }
.choice-card-v15 > input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.choice-card-v15 > span { display: grid; gap: 4px; min-height: 94px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.choice-card-v15 > span strong { color: var(--ink); }
.choice-card-v15 > span small { color: var(--muted); }
.choice-card-v15 > input:checked + span { border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); background: var(--accent-softer); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-1px); }
.choice-card-v15 > input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.booking-estimate-v15, .invoice-summary-v15, .readiness-card-v15, .boarding-timing-card-v15, .development-payment-badge-v15 { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-subtle); }
.booking-estimate-v15 { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 16px; }
.booking-estimate-v15 strong { display: block; font-size: 1.4rem; }
.booking-estimate-v15 small { color: var(--muted); }
.booking-estimate-v15 [data-estimate-detail] { grid-column: 1 / -1; }
.boarding-timing-card-v15 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 12px; }
.boarding-timing-card-v15 article { min-width: 0; padding: 11px; border-radius: var(--radius-md); background: var(--surface); }
.boarding-timing-card-v15 small { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.boarding-timing-card-v15 strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.readiness-card-v15 { display: grid; gap: 9px; padding: 14px; }
.readiness-card-v15 header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.readiness-list-v15 { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.readiness-list-v15 li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-soft); }
.readiness-list-v15 li svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; }
.invoice-table-v15 { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.invoice-table-v15 th, .invoice-table-v15 td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.invoice-table-v15 th { color: var(--muted); background: var(--surface-subtle); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.invoice-table-v15 tr:last-child td { border-bottom: 0; }
.invoice-table-v15 td:last-child, .invoice-table-v15 th:last-child { text-align: right; }
.invoice-table-v15 .requires-config { color: var(--warning); font-weight: 800; }
.invoice-total-v15 { display: flex; justify-content: space-between; gap: 16px; padding: 14px 2px 0; font-size: 1rem; }
.invoice-total-v15 strong:last-child { font-size: 1.3rem; }
.development-payment-badge-v15 { display: flex; align-items: flex-start; gap: 11px; margin-top: 12px; padding: 13px; background: var(--warning-soft); }
.development-payment-badge-v15 svg { flex: 0 0 19px; width: 19px; height: 19px; color: var(--warning); }
.development-payment-badge-v15 strong, .development-payment-badge-v15 small { display: block; }
.development-payment-badge-v15 small { margin-top: 2px; color: var(--ink-soft); }
.portal-service-actions-v15 { display: grid; gap: 10px; }
.portal-service-actions-v15 > article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); }
.portal-service-actions-v15 > article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--accent-softer); color: var(--accent-strong); }
.portal-service-actions-v15 p { margin: 3px 0 0; color: var(--muted); font-size: .78rem; }
.lobby-only-schedule-v15 .command-section-header { align-items: flex-start; }
.lobby-only-schedule-v15 .lobby-slot small { color: var(--muted); }
.front-desk-role-strip-v15 { margin-bottom: 18px; }

@media (max-width: 820px) {
  .boarding-timing-card-v15 { grid-template-columns: 1fr; }
  .choice-grid-v15 { grid-template-columns: 1fr; }
  .portal-service-actions-v15 > article { grid-template-columns: auto minmax(0,1fr); }
  .portal-service-actions-v15 > article > .button, .portal-service-actions-v15 > article > .badge { grid-column: 1 / -1; width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .lobby-slot, .lobby-slot.available, .lobby-slot.occupied { grid-template-columns: 64px minmax(0,1fr); gap: 8px 10px; padding: 11px; }
  .lobby-slot .lobby-kind-v15 { justify-self: end; }
  .lobby-slot .lobby-pet-v15, .lobby-slot > small { grid-column: 1 / -1; }
  .lobby-slot > svg { display: none; }
  .lobby-pet-v15 .pet-avatar { width: 34px; height: 34px; }
  .lobby-pet-v15 .pet-contact-primary { display: grid; grid-template-columns: 1fr; gap: 3px; }
  .lobby-pet-v15 .pet-contact-phone { width: fit-content; max-width: 100%; }
  .booking-estimate-v15 { grid-template-columns: 1fr; }
  .booking-estimate-v15 [data-estimate-detail] { grid-column: 1; }
  .invoice-table-v15 th:nth-child(2), .invoice-table-v15 td:nth-child(2) { display: none; }
}

/* v0.15 component details */
.front-desk-step-v15 { display:flex; align-items:flex-start; gap:12px; margin:4px 0 -2px; }
.front-desk-step-v15 h3 { margin:0; font-size:1.02rem; }
.front-desk-step-v15 p { margin:3px 0 0; color:var(--muted); font-size:.8rem; }
.step-number-v15 { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:11px; background:var(--accent-softer); color:var(--accent-strong); font-weight:950; }
.choice-card-grid-v15 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.choice-card-v15 > span > svg { width:22px; height:22px; color:var(--accent-strong); }
.prebagged-row-v15 { margin-top:10px; }
.precheck-identity-v15 { display:flex; align-items:center; gap:13px; min-width:0; padding:14px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-subtle); }
.precheck-identity-v15 > div { min-width:0; flex:1; }
.checkin-checklist-v15 { display:grid; gap:9px; }
.checkin-checklist-v15 article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.checkin-checklist-v15 article > span:first-child { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--accent-softer); color:var(--accent-strong); }
.checkin-checklist-v15 article p { margin:2px 0 0; color:var(--muted); font-size:.78rem; }
.reservation-estimate-v15 { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; padding:15px; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--surface),var(--accent-softer)); }
.reservation-estimate-v15 > span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--surface); color:var(--accent-strong); box-shadow:var(--shadow-card); }
.reservation-estimate-v15 small { color:var(--muted); font-weight:850; letter-spacing:.06em; }
.reservation-estimate-v15 strong { display:block; margin-top:2px; font-size:1.35rem; }
.reservation-estimate-v15 p { margin:2px 0 0; color:var(--ink-soft); font-size:.8rem; }
.preview-result-example-v15 { display:flex; align-items:flex-start; gap:11px; padding:13px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-subtle); }
.preview-result-example-v15 > span { display:grid; place-items:center; width:35px; height:35px; flex:0 0 35px; border-radius:11px; background:var(--accent-softer); color:var(--accent-strong); }
.preview-result-example-v15 p { margin:3px 0 0; color:var(--muted); font-size:.8rem; }
.readiness-summary-v15 { display:grid; gap:8px; padding:14px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-subtle); }
.readiness-summary-v15 > header { display:flex; align-items:flex-start; gap:10px; }
.readiness-summary-v15 > header > span { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:11px; background:var(--surface); }
.readiness-summary-v15 > header p { margin:2px 0 0; color:var(--muted); font-size:.78rem; }
.readiness-summary-v15.blocked { border-color:color-mix(in srgb,var(--danger) 45%,var(--line)); background:var(--danger-soft); }
.readiness-summary-v15.attention { border-color:color-mix(in srgb,var(--warning) 45%,var(--line)); background:var(--warning-soft); }
.readiness-summary-v15.ready { border-color:color-mix(in srgb,var(--success) 38%,var(--line)); background:var(--success-soft); }
.readiness-item-v15 { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-radius:10px; background:color-mix(in srgb,var(--surface) 80%,transparent); font-size:.8rem; }
.readiness-item-v15 svg { width:16px; height:16px; flex:0 0 16px; margin-top:2px; }
.invoice-table-v15 { display:grid; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.invoice-table-head-v15,.invoice-table-row-v15 { display:grid; grid-template-columns:minmax(0,1fr) 58px 82px 92px; gap:10px; align-items:start; padding:10px 12px; }
.invoice-table-head-v15 { color:var(--muted); background:var(--surface-subtle); font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.invoice-table-row-v15 { border-top:1px solid var(--line); }
.invoice-table-row-v15 > span { min-width:0; overflow-wrap:anywhere; }
.invoice-table-row-v15 > span:not(:first-child),.invoice-table-head-v15 > span:not(:first-child) { text-align:right; }
.invoice-table-row-v15 small { display:block; margin-top:2px; color:var(--warning); }
.invoice-table-total-v15 { display:flex; justify-content:space-between; gap:12px; padding:11px 12px; border-top:1px solid var(--line); background:var(--surface-subtle); }
.invoice-table-total-v15.balance { font-size:1.05rem; background:var(--accent-softer); }
.invoice-table-total-v15.balance strong { font-size:1.2rem; }
.portal-frontdesk-v15 { margin-top:16px; }
.front-desk-home-v15 { margin-bottom:18px; }
.invoice-payment-state-v15 { margin-top:16px; }
.external-send-lock.compact { padding:12px; }

@media(max-width:680px){
  .choice-card-grid-v15 { grid-template-columns:1fr; }
  .reservation-estimate-v15 { grid-template-columns:auto minmax(0,1fr); }
  .reservation-estimate-v15 > .badge { grid-column:1/-1; justify-self:stretch; text-align:center; }
  .checkin-checklist-v15 article { grid-template-columns:auto minmax(0,1fr); }
  .checkin-checklist-v15 article > .badge { grid-column:1/-1; justify-self:start; }
  .invoice-table-head-v15,.invoice-table-row-v15 { grid-template-columns:minmax(0,1fr) 48px 80px; }
  .invoice-table-head-v15 > span:nth-child(3),.invoice-table-row-v15 > span:nth-child(3) { display:none; }
}

/* v0.16 connected service-operations surfaces */
.service-operations-v16 { margin-top: 18px; }
.service-operation-queue { display: grid; gap: 11px; margin-top: 14px; }
.service-operation-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface), var(--surface-subtle));
  box-shadow: var(--shadow-card);
  transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.service-operation-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); box-shadow: var(--shadow-hover); }
.service-operation-card.critical { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: linear-gradient(145deg, var(--surface), var(--danger-soft)); }
.operation-card-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.operation-card-main > :last-child { min-width: 0; }
.operation-card-status { display: grid; justify-items: end; align-content: start; gap: 4px; }
.operation-card-status small { max-width: 18rem; color: var(--muted); text-align: right; }
.service-operation-card > p { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.operation-card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.daycare-ops-grid-v16 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.daycare-ops-grid-v16 > article { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-subtle); }
.document-preview-v16 { max-height: 34rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-subtle); color: var(--ink); font: 500 .86rem/1.65 var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace); }
.paws-readiness-grid-v16 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.paws-readiness-grid-v16 article { display: grid; gap: 7px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); }
.paws-readiness-grid-v16 small { color: var(--muted); overflow-wrap: anywhere; }
.today-service-depth-v16 { margin-bottom: 14px; }
.portal-request-history-v16 { margin-top: 16px; }
.portal-request-row-v16 { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--ink); text-align: left; cursor: pointer; }
.portal-request-row-v16:hover, .portal-request-row-v16:focus-visible { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: var(--accent-softer); }
.portal-request-row-v16 > span:nth-child(2) { min-width: 0; }
.portal-request-row-v16 strong, .portal-request-row-v16 small { display: block; overflow-wrap: anywhere; }
.portal-request-row-v16 small { margin-top: 3px; color: var(--muted); }
@media (max-width: 720px) {
  .service-operation-card { grid-template-columns: 1fr; }
  .operation-card-status { justify-items: start; }
  .operation-card-status small { text-align: left; }
  .daycare-ops-grid-v16 { grid-template-columns: 1fr; }
  .portal-request-row-v16 { grid-template-columns: auto minmax(0,1fr); }
  .portal-request-row-v16 > .badge { grid-column: 1 / -1; justify-self: start; }
}

/* v0.18 real-world operations and Owner Review Center */
.test-mode-banner-v18,
.alert-strip-v18 {
  display:flex; align-items:flex-start; gap:12px; margin:14px 0 18px; padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--warning) 38%,var(--line)); border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--surface),var(--warning-soft)); color:var(--ink);
}
.test-mode-banner-v18 > svg,.alert-strip-v18 > svg { width:22px;height:22px;flex:0 0 22px;color:var(--warning); }
.test-mode-banner-v18 > div,.alert-strip-v18 > div { flex:1;min-width:0; }
.test-mode-banner-v18 p,.alert-strip-v18 p { margin:3px 0 0;color:var(--ink-soft); }
.qa-grid-v18,.service-option-grid-v18,.playgroup-grid-v18 { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0 20px; }
.real-card-v18 { min-width:0;padding:15px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(145deg,var(--surface),var(--surface-subtle));box-shadow:var(--shadow-card);transition:transform var(--motion-fast),box-shadow var(--motion-fast),border-color var(--motion-fast); }
.real-card-v18:hover { transform:translateY(-1px);box-shadow:var(--shadow-hover);border-color:color-mix(in srgb,var(--accent) 26%,var(--line)); }
.real-card-v18.warning { background:linear-gradient(145deg,var(--surface),var(--warning-soft)); }
.real-card-v18.danger { background:linear-gradient(145deg,var(--surface),var(--danger-soft)); }
.real-card-v18.success { background:linear-gradient(145deg,var(--surface),var(--success-soft)); }
.real-card-v18 header strong { font-size:.94rem; }
.real-card-v18 header p { margin:4px 0 0;color:var(--muted);font-size:.8rem;overflow-wrap:anywhere; }
.real-card-actions-v18 { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px; }
.real-card-actions-v18 small { display:block;flex:1 1 100%;color:var(--muted); }
.real-list-v18 { display:grid;gap:10px;margin:12px 0 20px; }
.mini-stats-v18 { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0 18px; }
.mini-stat-v18 { min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-subtle); }
.mini-stat-v18 span { display:block;color:var(--muted);font-size:.72rem;font-weight:900;letter-spacing:.045em;text-transform:uppercase; }
.mini-stat-v18 strong { display:block;margin-top:4px;font-size:1.35rem;line-height:1; }
.mini-stat-v18 small { display:block;margin-top:5px;color:var(--ink-soft); }
.front-desk-columns-v18 { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.front-desk-columns-v18 h3 { margin:0 0 9px; }
.pet-row-v18 { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-subtle);min-width:0;margin-bottom:8px; }
.pet-row-main-v18 { display:flex;align-items:center;gap:11px;min-width:0; }
.pet-row-main-v18 > div { min-width:0; }
.pet-row-actions-v18 { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px; }
.care-lanes-v18,.daycare-lanes-v18,.groomer-lanes-v18 { display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:12px;overflow-x:auto;padding:2px 1px 12px;scroll-snap-type:x proximity; }
.daycare-lanes-v18,.groomer-lanes-v18 { grid-template-columns:repeat(6,minmax(240px,1fr)); }
.care-lane-v18,.daycare-lanes-v18 > section,.groomer-lanes-v18 > section { min-width:230px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-subtle);scroll-snap-align:start; }
.care-lane-v18 > header,.daycare-lanes-v18 > section > header,.groomer-lanes-v18 > section > header { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px; }
.care-lane-v18 h3,.daycare-lanes-v18 h3,.groomer-lanes-v18 h3 { margin:0;font-size:.8rem;letter-spacing:.045em;text-transform:uppercase; }
.care-lane-v18.overdue { border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:var(--danger-soft); }
.section-actions-v18 { display:flex;flex-wrap:wrap;gap:8px;margin-top:12px; }
.muted-copy-v18 { margin:8px 0;color:var(--muted);font-size:.8rem; }
.timeline-board-v18,.action-required-list-v18 { display:grid;gap:9px;margin-top:12px; }
.external-send-lock { overflow:hidden; }
@media(max-width:960px){
  .front-desk-columns-v18{grid-template-columns:1fr;}
  .care-lanes-v18,.daycare-lanes-v18,.groomer-lanes-v18{grid-template-columns:repeat(4,minmax(260px,80vw));}
}
@media(max-width:680px){
  .qa-grid-v18,.service-option-grid-v18,.playgroup-grid-v18{grid-template-columns:1fr;}
  .pet-row-v18{grid-template-columns:1fr;align-items:start;}
  .pet-row-actions-v18{justify-content:flex-start;}
  .mini-stats-v18{grid-template-columns:repeat(2,minmax(0,1fr));}
  .test-mode-banner-v18,.alert-strip-v18{align-items:flex-start;flex-wrap:wrap;}
  .care-lanes-v18,.daycare-lanes-v18,.groomer-lanes-v18{grid-template-columns:repeat(4,minmax(82vw,82vw));}
}
@media print{
  .test-mode-banner-v18,.real-card-actions-v18,.section-actions-v18{display:none!important;}
  .real-card-v18,.pet-row-v18{box-shadow:none;break-inside:avoid;}
}

/* v0.19 Resort Command: live operations, command centers, inventory, automation, turnover, and data quality. */
.resort-hero-v19,
.automation-lock-v19,
.command-center-panel-v19 {
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px;border:1px solid var(--line);border-radius:calc(var(--radius-lg) + 2px);
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent-softer) 68%,var(--surface)));
  box-shadow:var(--shadow-card);
}
.resort-hero-v19 h2,.command-center-panel-v19 h3{margin:2px 0 4px;font-size:clamp(1.35rem,3vw,2rem);line-height:1.08;letter-spacing:-.035em;}
.resort-hero-v19 p,.automation-lock-v19 p,.command-center-panel-v19 p{margin:3px 0 0;color:var(--muted);}
.status-pill-v19{display:inline-flex;align-items:center;gap:8px;min-height:30px;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:5px 10px;color:var(--ink-soft);font-size:.72rem;font-weight:850;white-space:nowrap;}
.status-pill-v19 strong{display:grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--surface-muted);color:var(--ink);padding:0 6px;font-size:.68rem;}
.status-pill-v19.tone-critical{border-color:color-mix(in srgb,var(--danger) 42%,var(--line));background:var(--danger-soft);color:var(--danger);}
.status-pill-v19.tone-warning{border-color:color-mix(in srgb,var(--warning) 42%,var(--line));background:var(--warning-soft);color:var(--warning);}
.status-pill-v19.tone-success{border-color:color-mix(in srgb,var(--success) 42%,var(--line));background:var(--success-soft);color:var(--success);}
.operations-lanes-v19{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px;margin-top:12px;}
.operations-lane-v19{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card);}
.operations-lane-head-v19{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;border:0;border-bottom:1px solid var(--line);background:linear-gradient(145deg,var(--surface),var(--surface-subtle));padding:14px;text-align:left;cursor:pointer;}
.operations-lane-head-v19:hover{background:var(--accent-softer);}
.operations-lane-head-v19>svg{width:17px;height:17px;color:var(--muted);}
.operations-lane-icon-v19{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--accent-softer);color:var(--accent);}
.operations-lane-icon-v19 svg{width:18px;height:18px;}
.operations-lane-head-v19 small{display:block;color:var(--muted);font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;}
.operations-lane-head-v19 strong{display:block;color:var(--ink);font-size:1.3rem;line-height:1.1;}
.operations-lane-list-v19{display:grid;gap:1px;padding:7px;}
.operations-mini-row-v19{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;width:100%;border:0;border-radius:10px;background:transparent;padding:9px 10px;text-align:left;cursor:pointer;}
.operations-mini-row-v19:hover{background:var(--surface-subtle);}
.operations-mini-row-v19 span{min-width:0;overflow:hidden;color:var(--ink);font-size:.77rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap;}
.operations-mini-row-v19 small{color:var(--muted);font-size:.67rem;font-weight:750;white-space:nowrap;}
.resort-two-col-v19{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.resort-list-v19{display:grid;gap:10px;margin-top:12px;}
.resort-card-v19{min-width:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(145deg,var(--surface),var(--surface-subtle));padding:14px;box-shadow:var(--shadow-card);transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;}
.resort-card-v19:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 28%,var(--line));}
.resort-card-head-v19{display:flex;align-items:start;justify-content:space-between;gap:12px;}
.resort-card-head-v19 h3{margin:0;color:var(--ink);font-size:.93rem;line-height:1.2;letter-spacing:-.015em;}
.resort-card-meta-v19{display:block;margin-bottom:4px;color:var(--muted);font-size:.62rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;}
.resort-card-body-v19{margin-top:8px;color:var(--ink-soft);font-size:.78rem;}
.resort-card-body-v19 p{margin:0 0 5px;}
.resort-card-body-v19 small{color:var(--muted);overflow-wrap:anywhere;}
.resort-card-actions-v19{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px;}
.exception-summary-v19,.resort-stat-grid-v19{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.exception-stat-v19{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:14px 16px;cursor:pointer;}
.exception-stat-v19 small{font-size:.7rem;font-weight:900;letter-spacing:.06em;}
.exception-stat-v19 strong{font-size:1.5rem;}
.exception-stat-v19.tone-critical{background:var(--danger-soft);color:var(--danger);}
.exception-stat-v19.tone-warning{background:var(--warning-soft);color:var(--warning);}
.inventory-grid-v19,.automation-grid-v19{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px;}
.inventory-quantity-v19{display:flex;align-items:baseline;gap:6px;margin-bottom:6px;}
.inventory-quantity-v19 strong{color:var(--ink);font-size:2rem;line-height:1;}
.inventory-quantity-v19 span{color:var(--muted);font-weight:800;}
.turnover-board-v19{display:grid;grid-template-columns:repeat(6,minmax(245px,1fr));gap:12px;overflow-x:auto;padding:3px 1px 14px;scroll-snap-type:x proximity;}
.turnover-column-v19{min-width:245px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-subtle);padding:10px;scroll-snap-align:start;}
.turnover-column-v19>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 4px 10px;color:var(--muted);font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;}
.turnover-column-v19>header strong{display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:var(--surface);color:var(--ink);}
.resource-picker-v19{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 12px;}
.resource-chip-v19{display:inline-flex;align-items:center;gap:7px;min-height:38px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);padding:7px 11px;font-size:.73rem;font-weight:820;white-space:nowrap;cursor:pointer;}
.resource-chip-v19.selected{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--accent-softer);color:var(--accent-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);}
.resource-chip-v19 svg{width:15px;height:15px;}
.resource-calendar-v19{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-card);}
.resource-calendar-summary-v19{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:17px;}
.resource-calendar-summary-v19 h2{margin:2px 0 3px;font-size:1.3rem;}
.resource-calendar-summary-v19 p{margin:0;color:var(--muted);}
.resource-calendar-summary-v19>div:last-child{display:flex;flex-wrap:wrap;gap:8px;}
.resource-calendar-events-v19{display:grid;gap:1px;padding:9px;}
.resource-calendar-events-v19 article{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;border-radius:10px;padding:10px;background:var(--surface-subtle);}
.resource-calendar-events-v19 time{color:var(--accent-strong);font-weight:900;}
.resource-calendar-events-v19 strong,.resource-calendar-events-v19 small{display:block;}
.resource-calendar-events-v19 small{color:var(--muted);}
.automation-lock-v19{align-items:flex-start;margin-bottom:16px;background:linear-gradient(135deg,var(--surface),var(--warning-soft));}
.automation-lock-v19>svg{width:24px;height:24px;flex:0 0 24px;color:var(--warning);}
.automation-lock-v19>div{flex:1;min-width:0;}
.command-center-panel-v19{display:grid;gap:14px;margin-bottom:16px;}
.command-center-identity-v19,.command-center-summary-v19{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;}
.command-center-identity-v19>div{min-width:0;flex:1;}
.command-center-facts-v19,.command-center-actions-v19{display:flex;flex-wrap:wrap;gap:8px;}
.command-center-warnings-v19{display:grid;gap:7px;}
.command-center-warnings-v19 button{display:flex;align-items:center;gap:9px;width:100%;border:1px solid color-mix(in srgb,var(--warning) 35%,var(--line));border-radius:11px;background:var(--warning-soft);color:var(--ink);padding:10px 12px;text-align:left;cursor:pointer;}
.command-center-warnings-v19 svg{width:17px;height:17px;color:var(--warning);}
.resort-muted-v19{margin:8px;color:var(--muted);font-size:.75rem;}
@media(max-width:1200px){.operations-lanes-v19{grid-template-columns:repeat(2,minmax(0,1fr));}.turnover-board-v19{grid-template-columns:repeat(6,minmax(270px,72vw));}}
@media(max-width:760px){.resort-hero-v19,.automation-lock-v19,.command-center-summary-v19,.resource-calendar-summary-v19{align-items:flex-start;flex-direction:column;}.operations-lanes-v19,.resort-two-col-v19,.exception-summary-v19,.resort-stat-grid-v19{grid-template-columns:1fr;}.inventory-grid-v19,.automation-grid-v19{grid-template-columns:1fr;}.command-center-identity-v19{align-items:flex-start;}.command-center-actions-v19 .button{flex:1 1 100%;}.turnover-board-v19{grid-template-columns:repeat(6,minmax(84vw,84vw));}.resource-calendar-events-v19 article{grid-template-columns:72px minmax(0,1fr);}}
@media print{.resource-picker-v19,.resort-card-actions-v19,.command-center-actions-v19,.automation-lock-v19 .status-pill-v19{display:none!important}.resort-card-v19,.resource-calendar-v19{box-shadow:none;break-inside:avoid}}
.exception-stat-v19.active{border-color:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent);transform:translateY(-1px)}
.exception-stat-v19[aria-pressed="false"]{opacity:.82}
.exception-stat-v19:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* v0.20 private staging readiness and notification signal */
.staging-check-grid-v20{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}.staging-check-v20{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface)}.staging-check-v20>span:first-child{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:var(--surface-muted);color:var(--ink-muted)}.staging-check-v20.pass>span:first-child,.staging-check-v20.verified>span:first-child{background:var(--success-soft);color:var(--success)}.staging-check-v20.blocked>span:first-child{background:var(--danger-soft);color:var(--danger)}.staging-check-v20 strong{display:block;font-weight:900;color:var(--ink)}.staging-check-v20 p{margin:.25rem 0 0;color:var(--ink-muted);font-size:.78rem;font-weight:650;line-height:1.4}.staging-sequence-v20{display:grid;gap:.7rem;margin:1rem 0 0;padding:0;list-style:none}.staging-sequence-v20 li{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem;border-radius:.9rem;background:var(--surface-subtle)}.staging-sequence-v20 li>b{display:grid;place-items:center;min-width:2rem;height:2rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong)}.staging-sequence-v20 p{margin:.2rem 0 0;color:var(--ink-muted);font-size:.8rem}.safety-gates-v20{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:1rem 0}.safety-gates-v20>span{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.8rem;border:1px solid var(--line);border-radius:.85rem;background:var(--surface-subtle);font-size:.78rem}.notification-tabs-v20 button b{display:inline-grid;min-width:1.3rem;height:1.3rem;place-items:center;margin-left:.25rem;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);font-size:.65rem}.notification-center-v20 .notification-row{display:flex;align-items:center;gap:.5rem}.notification-main-v20{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto auto;align-items:center;gap:.8rem;flex:1;min-width:0;text-align:left}.notification-center-v20 .button{flex:0 0 auto}@media(max-width:760px){.staging-check-grid-v20,.safety-gates-v20{grid-template-columns:1fr}.staging-check-v20{grid-template-columns:2.5rem minmax(0,1fr)}.staging-check-v20>.status-pill{grid-column:2}.notification-center-v20 .notification-row{align-items:flex-start;flex-direction:column}.notification-main-v20{width:100%;grid-template-columns:2.5rem minmax(0,1fr) auto}.notification-main-v20>svg:last-child{display:none}}

/* v0.20+ Add-on sales goal */
.addon-goal-card-v21{padding:22px;border-color:color-mix(in srgb,var(--accent) 28%,var(--line));}
.addon-goal-head-v21{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.addon-goal-head-v21 h2{margin:.35rem 0 0;font-size:2.35rem;letter-spacing:-.055em}.addon-goal-head-v21 p{margin:.35rem 0 0;color:var(--text-muted);font-weight:700}.addon-progress-track-v21{height:12px;margin-top:18px;border-radius:999px;overflow:hidden;background:var(--surface-muted)}.addon-progress-track-v21 span{display:block;height:100%;border-radius:inherit;background:var(--accent)}.addon-goal-facts-v21{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:15px}.addon-goal-facts-v21 div,.addon-category-list-v21 div,.addon-history-grid-v21 div{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface)}.addon-goal-facts-v21 small{display:block;color:var(--text-muted);font-size:.68rem;font-weight:900;letter-spacing:.08em}.addon-goal-facts-v21 strong{display:block;margin-top:4px;font-size:1.05rem}.addon-goal-note-v21{margin:14px 0 0;color:var(--text-muted);font-size:.78rem;font-weight:700}.addon-category-list-v21,.addon-history-grid-v21{display:grid;gap:8px;padding:0 20px 20px}.addon-category-list-v21 div{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px}.addon-category-list-v21 span{color:var(--text-muted);font-size:.82rem}.addon-history-grid-v21{grid-template-columns:repeat(3,minmax(0,1fr))}.addon-history-grid-v21 div{display:flex;justify-content:space-between;gap:10px}.addon-rule-grid-v21{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 20px 20px}.addon-rule-grid-v21 article{border:1px solid var(--line);border-radius:12px;padding:14px}.addon-rule-grid-v21 p{margin:.45rem 0 0;color:var(--text-muted);font-size:.82rem;line-height:1.5}@media(max-width:760px){.addon-goal-facts-v21{grid-template-columns:repeat(2,minmax(0,1fr))}.addon-history-grid-v21,.addon-rule-grid-v21{grid-template-columns:1fr}.addon-goal-head-v21{flex-direction:column}}

.addon-goal-compact-v21{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));}
.addon-goal-compact-v21>div{display:grid;gap:3px}.addon-goal-compact-v21 strong{font-size:1.05rem;letter-spacing:-.02em}.addon-goal-compact-v21 small{color:var(--text-muted);font-weight:700}.addon-goal-compact-v21 .button{flex:0 0 auto}@media(max-width:640px){.addon-goal-compact-v21{align-items:flex-start;flex-direction:column}.addon-goal-compact-v21 .button{width:100%}}

/* v0.22 simplified workflow — revenue first, counts second, one operational list at a time. */
.today-redesign-v22{display:grid;gap:16px;max-width:100%;}
.today-goal-first-v22{margin:0!important;border-width:1.5px;box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 8%,transparent);}
.today-goal-actions-v22{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;color:var(--muted);font-size:.73rem;font-weight:750;}
.today-block-v22{display:grid;gap:10px;}
.today-block-v22>header,.today-workflow-v22>header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.today-block-v22 h2,.today-workflow-v22 h2{margin:2px 0 0;font-size:1.12rem;letter-spacing:-.025em;}
.today-block-v22 p,.today-workflow-v22 p{margin:3px 0 0;color:var(--muted);font-size:.78rem;}
.today-summary-grid-v22{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.today-summary-card-v22{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:9px;min-height:86px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:11px;text-align:left;cursor:pointer;box-shadow:var(--shadow-sm);transition:.16s ease;}
.today-summary-card-v22:hover,.today-service-card-v22:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:var(--shadow-md);}
.today-summary-icon-v22,.today-service-icon-v22{display:grid;place-items:center;border-radius:11px;background:var(--surface-subtle);color:var(--ink-soft);}
.today-summary-icon-v22{width:38px;height:38px;}.today-summary-card-v22.tone-green .today-summary-icon-v22{background:var(--success-soft);color:var(--success);}.today-summary-card-v22.tone-red .today-summary-icon-v22{background:var(--danger-soft);color:var(--danger);}
.today-summary-card-v22 small,.today-service-card-v22 small{display:block;color:var(--muted);font-size:.61rem;font-weight:900;letter-spacing:.055em;text-transform:uppercase;}
.today-summary-card-v22 strong{display:block;margin-top:2px;color:var(--ink);font-size:1.55rem;line-height:1;font-weight:950;letter-spacing:-.045em;}
.today-summary-card-v22 em,.today-service-card-v22 em{display:block;margin-top:4px;overflow:hidden;color:var(--muted);font-size:.66rem;font-style:normal;font-weight:700;text-overflow:ellipsis;white-space:nowrap;}
.today-summary-card-v22>svg,.today-service-card-v22>svg{width:15px;height:15px;color:var(--muted);}
.today-service-grid-v22{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
.today-service-card-v22{display:grid;grid-template-columns:34px minmax(0,1fr) 15px;align-items:center;gap:8px;min-height:75px;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:9px;text-align:left;cursor:pointer;transition:.16s ease;}
.today-service-icon-v22{width:34px;height:34px;}.today-service-card-v22.tone-boarding .today-service-icon-v22{background:color-mix(in srgb,#3b82f6 12%,var(--surface));color:#2563eb}.today-service-card-v22.tone-daycare .today-service-icon-v22{background:color-mix(in srgb,#06b6d4 12%,var(--surface));color:#0891b2}.today-service-card-v22.tone-training .today-service-icon-v22{background:color-mix(in srgb,#8b5cf6 12%,var(--surface));color:#7c3aed}.today-service-card-v22.tone-grooming .today-service-icon-v22{background:color-mix(in srgb,#f59e0b 13%,var(--surface));color:#d97706}.today-service-card-v22.tone-mobile .today-service-icon-v22{background:color-mix(in srgb,#10b981 12%,var(--surface));color:#059669}.today-service-card-v22.tone-activity .today-service-icon-v22{background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.today-service-card-v22 strong{display:block;margin-top:1px;color:var(--ink);font-size:1.28rem;line-height:1;font-weight:950;letter-spacing:-.04em;}
.today-workflow-v22{overflow:hidden;padding:14px;}
.today-tabs-v22{display:flex;gap:4px;margin:12px -2px 0;padding:0 2px;border-bottom:1px solid var(--line);overflow-x:auto;}
.today-tab-v22{display:inline-flex;min-height:42px;align-items:center;gap:7px;border:0;border-bottom:2px solid transparent;background:transparent;padding:0 11px;color:var(--muted);font-size:.78rem;font-weight:850;white-space:nowrap;cursor:pointer;}
.today-tab-v22 b{display:grid;min-width:20px;height:20px;place-items:center;border-radius:999px;background:var(--surface-subtle);font-size:.63rem;}
.today-tab-v22.active{border-bottom-color:var(--accent);color:var(--accent);}.today-tab-v22.active b{background:var(--accent-soft);}
.today-work-list-v22{display:grid;gap:7px;padding-top:12px;}.today-next-grid-v22{grid-template-columns:repeat(2,minmax(0,1fr));}
.today-event-row-v22{display:grid;grid-template-columns:70px 38px minmax(0,1fr) auto 16px;align-items:center;gap:8px;min-height:69px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:8px;text-align:left;cursor:pointer;transition:.15s ease;}.today-event-row-v22:hover{background:var(--surface-subtle);border-color:var(--line-strong)}
.today-event-row-v22 time{font-size:.7rem;font-weight:900;color:var(--ink);}.today-event-avatar-v22{display:grid;width:38px;height:38px;place-items:center;border-radius:10px;background:var(--surface-subtle);overflow:hidden}.today-event-avatar-v22 .pet-avatar{width:38px!important;height:38px!important;}.today-event-copy-v22{min-width:0}.today-event-copy-v22 strong,.today-event-copy-v22 small,.today-event-copy-v22 em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.today-event-copy-v22 strong{font-size:.79rem;color:var(--ink)}.today-event-copy-v22 small{margin-top:2px;color:var(--muted);font-size:.68rem;font-weight:700}.today-event-copy-v22 em{margin-top:2px;color:var(--muted);font-size:.64rem;font-style:normal}
.today-attention-grid-v22{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding-top:12px;}
@media(max-width:1100px){.today-service-grid-v22{grid-template-columns:repeat(3,minmax(0,1fr));}.today-summary-grid-v22{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.today-summary-grid-v22,.today-service-grid-v22{grid-template-columns:repeat(2,minmax(0,1fr))}.today-next-grid-v22,.today-attention-grid-v22{grid-template-columns:1fr}.today-goal-actions-v22{align-items:flex-start;flex-direction:column}.today-event-row-v22{grid-template-columns:62px 34px minmax(0,1fr) 16px}.today-event-row-v22 .badge{display:none}.today-block-v22>header,.today-workflow-v22>header{align-items:flex-start;flex-direction:column}.today-summary-card-v22{grid-template-columns:32px minmax(0,1fr) 14px;gap:6px;padding:9px;min-height:78px}.today-summary-icon-v22{width:32px;height:32px}.today-summary-card-v22 strong{font-size:1.3rem}.today-summary-card-v22 em{font-size:.6rem}.today-service-card-v22{grid-template-columns:30px minmax(0,1fr) 12px;gap:5px;padding:8px;min-height:70px}.today-service-icon-v22{width:30px;height:30px}.today-service-card-v22 small{font-size:.55rem;letter-spacing:.035em}.today-service-card-v22 strong{font-size:1.15rem}.today-service-card-v22 em{font-size:.57rem}}
/* v0.24 Sites PWA shell */
#install-dwr-app[hidden], #update-dwr-app[hidden] { display:none !important; }
@media (display-mode: standalone) {
  .demo-ribbon { padding-top: max(8px, env(safe-area-inset-top)); }
}