:root {
  --mist: #f4f8f7;
  --paper: #fff;
  --ink: #132c31;
  --ink-soft: #5c7074;
  --water: #0b7a75;
  --water-dark: #075d59;
  --seafoam: #bce7da;
  --foam: #e6f5f0;
  --line: #dce8e5;
  --coral: #e86152;
  --sun: #f1c75b;
  --blue: #dcecf4;
  --shadow: 0 18px 48px rgba(19, 44, 49, .09);
  --display: "Trebuchet MS", "Avenir Next", sans-serif;
  --body: "Segoe UI", "Helvetica Neue", sans-serif;
  --utility: "Cascadia Mono", "SFMono-Regular", monospace;
}

/* Employee workspace: short job views, large room targets, persistent navigation. */
.employee-shell .cleaner-main { max-width: 760px; padding-bottom: 110px; }
.employee-shell h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; }
.employee-jobs { display: grid; gap: 18px; margin-top: 28px; }
.employee-job { padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); }
.employee-job h2 { margin: 20px 0 10px; font-size: 1.6rem; }
.employee-job p { line-height: 1.5; }
.employee-job-top { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; font-size: .85rem; }
.employee-job .primary-button { width: 100%; }
.employee-empty { padding: 32px 0; }
.employee-empty h2 { margin-bottom: 16px; }
.employee-nav { position: fixed; z-index: 35; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); }
.employee-nav button { display: grid; justify-items: center; gap: 6px; min-height: 54px; width: min(32%, 180px); border: 0; border-radius: 14px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.employee-nav button[aria-current] { color: var(--water-dark); background: var(--foam); font-weight: 700; }
.employee-nav svg, .room-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.room-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.room-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 168px; padding: 20px; text-align: left; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--paper); cursor: pointer; overflow-wrap: anywhere; }
.room-tile:hover { background: var(--foam); border-color: var(--water); }
.room-tile strong { font-size: 1rem; line-height: 1.4; text-transform: capitalize; }
.room-tile > span:not(.room-tile-symbol), .room-tile small { color: var(--ink-soft); font-size: .8rem; }
.room-tile-symbol { color: var(--water); }
.room-tile.is-ready { background: var(--foam); }
.room-back { margin-bottom: 20px; }
.is-room-view .job-hero, .is-room-view .instruction-card, .is-room-view .status-strip,
.is-room-view .cleaner-notes { display: none; }
.is-room-view .cleaner-checklist { margin-top: 20px; }
.is-room-view .group-title-text { text-transform: none; }
@media (max-width: 380px) { .room-tile { padding: 14px; } .room-tiles { gap: 10px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--mist); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, .photo-tile { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
svg { display: block; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); }
h1 { margin-bottom: 12px; font-size: clamp(2.15rem, 6vw, 4.45rem); letter-spacing: -.05em; line-height: .98; }
h2 { margin-bottom: 0; font-size: clamp(1.55rem, 3.4vw, 2.45rem); letter-spacing: -.04em; line-height: 1.05; }
h3 { letter-spacing: -.025em; }
.muted { color: var(--ink-soft); }
.eyebrow { margin: 0 0 7px; color: var(--water-dark); font-family: var(--utility); font-size: .67rem; font-weight: 750; letter-spacing: .11em; line-height: 1.2; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--display); font-weight: 850; letter-spacing: -.035em; text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; color: #fff; background: var(--water); border-radius: 13px 13px 13px 5px; }
.brand-mark svg { width: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.admin-shell { min-height: 100vh; }
.admin-topbar { position: sticky; z-index: 40; top: 0; display: flex; min-height: 70px; padding: 10px max(20px, calc((100vw - 1160px)/2)); align-items: center; justify-content: space-between; gap: 18px; background: rgba(244,248,247,.92); border-bottom: 1px solid rgba(19,44,49,.07); backdrop-filter: blur(18px); }
.desktop-nav { display: flex; align-items: center; gap: 4px; }
.nav-link { min-height: 42px; padding: 0 15px; border: 0; border-radius: 12px; color: var(--ink-soft); background: transparent; font-size: .86rem; font-weight: 750; cursor: pointer; }
.nav-link:hover, .nav-link.is-active { color: var(--water-dark); background: var(--foam); }
.profile-chip { display: inline-flex; align-items: center; gap: 9px; padding: 5px 9px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.profile-avatar { display: grid; width: 31px; height: 31px; place-items: center; color: #fff; background: var(--ink); border-radius: 50%; font-size: .69rem; font-weight: 800; }
.profile-chip span:last-child { font-size: .79rem; font-weight: 750; }
.profile-button { color: var(--ink); cursor: pointer; }
.profile-button:hover { border-color: var(--seafoam); background: var(--foam); }
.profile-menu-wrap { position: relative; }
.profile-menu { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; min-width: 220px; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.profile-menu-head { display: grid; gap: 4px; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); }
.profile-menu-head strong { font-size: .9rem; }
.profile-menu-head span { color: var(--ink-soft); font-size: .76rem; }
.profile-menu-role { color: var(--water-dark); font-family: var(--utility); font-size: .64rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.profile-menu-action { width: 100%; min-height: 42px; margin-top: 8px; padding: 0 12px; border: 0; border-radius: 12px; color: #a53e33; background: #fff5f3; font-size: .82rem; font-weight: 750; text-align: left; cursor: pointer; }
.profile-menu-action:hover { background: #ffe9e4; }
.admin-main { width: min(100%, 1160px); margin: 0 auto; padding: 42px 20px 120px; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: 34px; }
.page-intro-copy { max-width: 720px; }
.page-intro-copy > p:not(.eyebrow) { max-width: 620px; margin: 0; color: var(--ink-soft); line-height: 1.55; }

.primary-button, .secondary-button, .ghost-button, .danger-button { display: inline-flex; min-height: 48px; padding: 0 18px; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; font-weight: 800; cursor: pointer; }
.primary-button { border: 0; color: #fff; background: var(--water); box-shadow: 0 8px 22px rgba(11,122,117,.2); }
.primary-button:hover { background: var(--water-dark); }
.primary-button:disabled { color: #92a09f; background: #e2e9e7; box-shadow: none; cursor: not-allowed; }
.secondary-button { border: 1px solid var(--line); background: var(--paper); }
.secondary-button:hover, .ghost-button:hover { border-color: var(--seafoam); background: var(--foam); }
.ghost-button { min-height: 42px; padding: 0 12px; border: 1px solid transparent; color: var(--water-dark); background: transparent; font-size: .79rem; }
.danger-button { border: 1px solid #f2cbc6; color: #a53e33; background: #fff5f3; }
.button-icon { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.full-button { width: 100%; }
.plain-button { padding: 10px; border: 0; color: var(--ink-soft); background: transparent; font-size: .82rem; font-weight: 750; cursor: pointer; }
.icon-button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.icon-button:hover { background: var(--foam); }
.icon-button svg { width: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

.overview-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(290px,.85fr); gap: 22px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px 16px; }
.panel-head h2 { font-size: 1.25rem; }
.panel-head p { margin: 4px 0 0; color: var(--ink-soft); font-size: .79rem; }
.live-card { margin: 0 14px 14px; overflow: hidden; border: 1px solid var(--seafoam); border-radius: 18px; background: #fbfefd; }
.live-ribbon { display: flex; min-height: 42px; padding: 8px 13px; align-items: center; justify-content: space-between; gap: 12px; color: var(--water-dark); background: var(--foam); font-size: .72rem; font-weight: 800; }
.live-ribbon span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.pulse-dot { width: 8px; height: 8px; background: var(--water); border-radius: 50%; box-shadow: 0 0 0 5px rgba(11,122,117,.12); }
.work-order { padding: 20px; }
.work-order-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.work-order h3 { margin-bottom: 5px; font-size: 1.3rem; }
.work-order-address { margin: 0; color: var(--ink-soft); font-size: .84rem; }
.timer { color: var(--ink); font-family: var(--utility); font-size: 1.03rem; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.timer small { display: block; margin-bottom: 3px; color: var(--ink-soft); font-family: var(--body); font-size: .6rem; font-weight: 700; letter-spacing: .03em; text-align: right; text-transform: uppercase; }
.job-meta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; color: var(--ink-soft); font-size: .77rem; }
.meta-piece { display: inline-flex; align-items: center; gap: 6px; }
.meta-piece svg { width: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.progress-line { height: 7px; overflow: hidden; background: #e5edeb; border-radius: 999px; }
.progress-line span { display: block; height: 100%; background: var(--water); border-radius: inherit; transition: width 300ms ease; }
.progress-meter { display: block; width: 100%; height: 7px; margin: 0; padding: 0; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: #e5edeb; }
.progress-meter::-webkit-progress-bar { background: #e5edeb; border-radius: 999px; }
.progress-meter::-webkit-progress-value { background: var(--water); border-radius: 999px; transition: width 300ms ease; }
.progress-meter::-moz-progress-bar { background: var(--water); border-radius: 999px; }
.progress-caption { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; color: var(--ink-soft); font-size: .72rem; }
.work-order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.empty-live { margin: 0 14px 14px; padding: 32px; color: var(--ink-soft); background: var(--mist); border-radius: 17px; text-align: center; }

.stat-stack { display: grid; gap: 10px; padding: 0 14px 14px; }
.stat-card { display: flex; min-height: 94px; padding: 16px; align-items: center; justify-content: space-between; gap: 14px; border-radius: 17px; background: var(--mist); }
.stat-card strong { display: block; font-family: var(--display); font-size: 1.8rem; letter-spacing: -.05em; }
.stat-card span { color: var(--ink-soft); font-size: .73rem; }
.stat-symbol { display: grid; width: 46px; height: 46px; place-items: center; color: var(--water-dark); background: var(--foam); border-radius: 15px; }
.stat-symbol svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.section-block { margin-top: 24px; }
.section-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.section-title-row h2 { font-size: 1.3rem; }
.section-title-row p { margin: 4px 0 0; color: var(--ink-soft); font-size: .8rem; }

.job-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.job-card { padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.job-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.job-card h3 { margin-bottom: 5px; font-size: 1.02rem; }
.job-card p { margin-bottom: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.4; }
.status-pill { display: inline-flex; min-height: 26px; padding: 0 9px; align-items: center; border-radius: 999px; font-size: .63rem; font-weight: 800; white-space: nowrap; }
.status-pill.scheduled { color: #725400; background: #fff4d4; }
.status-pill.in-progress { color: var(--water-dark); background: var(--foam); }
.status-pill.paused { color: #725400; background: #fff4d4; }
.status-pill.submitted { color: var(--water-dark); background: var(--foam); }
.status-pill.completed { color: #34545b; background: var(--blue); }
.status-pill.revoked { color: #993a31; background: #fff0ed; }
.job-card .job-meta-row { margin: 15px 0; gap: 10px; }
.job-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 15px; }
.mini-progress { color: var(--ink-soft); font-family: var(--utility); font-size: .69rem; }

.filter-bar { display: flex; gap: 7px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--paper); font-size: .74rem; font-weight: 750; white-space: nowrap; cursor: pointer; }
.filter-button.is-active { color: #fff; border-color: var(--water); background: var(--water); }
.jobs-list { display: grid; gap: 10px; }
.job-row { display: grid; grid-template-columns: minmax(210px,1.4fr) minmax(140px,.8fr) minmax(130px,.7fr) minmax(130px,.7fr) auto; gap: 18px; align-items: center; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.job-row h3 { margin-bottom: 4px; font-size: .97rem; }
.job-row p { margin: 0; color: var(--ink-soft); font-size: .73rem; }
.job-row-label { display: block; margin-bottom: 4px; color: var(--ink-soft); font-size: .61rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.row-value { font-size: .78rem; font-weight: 750; }
.row-actions { display: flex; gap: 4px; }

.template-layout { display: grid; grid-template-columns: minmax(240px,.68fr) minmax(0,1.5fr); gap: 20px; align-items: start; }
.template-list { display: grid; gap: 9px; }
.template-card { width: 100%; padding: 17px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--paper); text-align: left; cursor: pointer; }
.template-card[data-template-color="0"] { --template-color: #0b7a75; }
.template-card[data-template-color="1"] { --template-color: #4f7f98; }
.template-card[data-template-color="2"] { --template-color: #d58b4b; }
.template-card[data-template-color="3"] { --template-color: #795c92; }
.template-card[data-template-color="4"] { --template-color: #5e8b62; }
.template-card:hover, .template-card.is-active { border-color: var(--seafoam); box-shadow: 0 0 0 3px rgba(11,122,117,.07); }
.template-card.is-active { background: #fbfefd; }
.template-card h3 { margin-bottom: 5px; font-size: .98rem; }
.template-card p { margin-bottom: 12px; color: var(--ink-soft); font-size: .73rem; line-height: 1.4; }
.template-card-meta { display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); font-size: .68rem; }
.color-pin { width: 9px; height: 9px; border-radius: 50%; background: var(--template-color,var(--water)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--template-color,var(--water)) 16%, transparent); }
.template-editor { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px; border-bottom: 1px solid var(--line); }
.editor-head > div:first-child { min-width: 0; flex: 1; }
.template-title { width: 100%; margin: 0; padding: 2px 0; border: 0; color: var(--ink); background: transparent; font-family: var(--display); font-size: 1.45rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; outline: none; }
.template-title:focus { box-shadow: 0 2px 0 var(--water); }
.editor-head p { margin: 7px 0 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.45; }
.editor-actions { display: flex; gap: 6px; }
.room-editor { padding: 20px 22px; border-bottom: 1px solid var(--line); transition: opacity 160ms ease, box-shadow 160ms ease; }
.room-editor.is-dragging { opacity: .55; box-shadow: var(--shadow); }
.room-editor:last-of-type { border-bottom: 0; }
.room-edit-list > .room-editor:last-of-type { border-bottom: 0; }
.room-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.room-drag-handle { flex: 0 0 28px; }
.room-collapse-toggle { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; flex: 0 0 28px; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; cursor: pointer; }
.room-collapse-toggle:hover { color: var(--ink); background: var(--foam); }
.room-collapse-toggle .collapse-icon { width: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; transition: transform 160ms ease; }
.room-editor.is-collapsed .room-collapse-toggle .collapse-icon { transform: rotate(-90deg); }
.room-name { min-width: 0; flex: 1; border: 0; color: var(--ink); background: transparent; font-family: var(--utility); font-size: .72rem; font-weight: 800; letter-spacing: .07em; outline: none; text-transform: uppercase; }
.room-name:focus { box-shadow: 0 2px 0 var(--water); }
.room-task-count { flex: 0 0 auto; color: var(--ink-soft); font-size: .66rem; font-weight: 700; white-space: nowrap; }
.room-editor.is-collapsed .room-body { display: none; }
.task-edit-list { display: grid; gap: 8px; }
.task-edit-block { display: grid; gap: 0; transition: opacity 160ms ease, box-shadow 160ms ease; }
.task-edit-block.is-dragging { opacity: .55; }
.task-edit-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdfc; transition: opacity 160ms ease, box-shadow 160ms ease; }
.task-edit-card.is-dragging, .task-edit-block.is-dragging .task-edit-card { opacity: 1; box-shadow: var(--shadow); }
.task-edit-row { display: grid; grid-template-columns: 28px minmax(0,1fr) 40px; gap: 8px; align-items: center; }
.task-edit-extras { display: grid; gap: 8px; padding-left: 36px; }
.task-instructions { width: 100%; min-height: 72px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; resize: vertical; outline: none; line-height: 1.4; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; }
.task-instructions:focus { border-color: var(--water); box-shadow: 0 0 0 3px rgba(11,122,117,.08); }
.md-body { color: inherit; font-size: inherit; line-height: 1.45; }
.md-body p { margin: 0 0 .45em; }
.md-body p:last-child { margin-bottom: 0; }
.md-body ul, .md-body ol { margin: .35em 0 .45em; padding-left: 1.15em; }
.md-body li { margin: .12em 0; }
.md-body strong { font-weight: 650; color: inherit; }
.md-body em { font-style: italic; }
.md-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; padding: .05em .28em; border-radius: 4px; background: rgba(0, 0, 0, .06); }
.md-body a { color: var(--water, #0b7a75); text-decoration: underline; text-underline-offset: 2px; }
.mini-field { display: grid; gap: 5px; min-width: 0; }
.mini-field > span { color: var(--ink-soft); font-size: .68rem; font-weight: 750; }
.mini-field em { color: var(--ink-soft); font-style: normal; font-weight: 500; }
.mini-number { width: 100%; height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; outline: none; }
.mini-number:focus { border-color: var(--water); box-shadow: 0 0 0 3px rgba(11,122,117,.08); }
.task-settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.span-all { grid-column: 1 / -1; }
.reference-photo-set { display: flex; flex-wrap: nowrap; gap: 6px; max-width: 100%; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; }
.reference-thumb { position: relative; display: block; flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.reference-thumb.is-dragging { opacity: .55; box-shadow: var(--shadow); }
.thumb-drag-handle { position: absolute; left: 3px; bottom: 3px; z-index: 1; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 5px; color: #fff; background: rgba(19,44,49,.72); font-size: .55rem; line-height: 1; cursor: grab; }
.thumb-drag-handle:active, body.is-reordering .thumb-drag-handle { cursor: grabbing; }
.reference-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; background: #e7f1ee; }
.thumb-remove { position: absolute; top: 3px; right: 3px; display: grid; width: 22px; height: 22px; padding: 0; place-items: center; border: 0; border-radius: 7px; color: #fff; background: rgba(19,44,49,.72); cursor: pointer; }
.thumb-remove svg { width: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.reference-add { width: 64px; height: 64px; }
.cleaner-example { color: var(--water-dark); text-decoration: none; }
.cleaner-examples { margin-top: 10px; }
.cleaner-example span { position: absolute; right: 4px; bottom: 4px; padding: 2px 5px; color: #fff; background: rgba(19,44,49,.75); border-radius: 6px; font-size: .5rem; font-weight: 800; }
.task-value-row { margin-top: 10px; }
.value-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.value-chip { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-size: .78rem; font-weight: 750; }
.value-chip:disabled { cursor: not-allowed; opacity: .6; }
.value-chip.is-selected { border-color: var(--water); color: var(--water-dark); background: var(--foam); }
.number-complete-field { display: grid; gap: 5px; max-width: 168px; }
.number-complete-field span { font-size: .68rem; font-weight: 750; }
.number-complete-input { height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; outline: none; }
.number-complete-input:focus { border-color: var(--water); box-shadow: 0 0 0 3px rgba(11,122,117,.08); }
.task-note-field { display: grid; gap: 6px; margin-top: 10px; }
.task-note-field span { font-size: .72rem; font-weight: 750; }
.task-note-field em { color: var(--ink-soft); font-style: normal; font-weight: 500; }
.task-note-field textarea { min-height: 58px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fbfdfc; resize: vertical; outline: none; }
.task-note-field textarea:focus { border-color: var(--water); box-shadow: 0 0 0 3px rgba(11,122,117,.09); }
.check-control.value-indicator { cursor: default; }
.check-control.value-indicator.is-on { border-color: var(--water); background: var(--water); }
.check-control.value-indicator.is-on svg { stroke: #fff; }
.drag-handle { color: #91a4a5; font-family: var(--utility); font-size: 1rem; text-align: center; cursor: grab; user-select: none; touch-action: none; }
.drag-handle:active, body.is-reordering .drag-handle { cursor: grabbing; }
body.is-reordering { user-select: none; }
.task-name-input, .photo-rule-select { width: 100%; height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fbfdfc; outline: none; }
.task-name-input:focus, .photo-rule-select:focus { border-color: var(--water); box-shadow: 0 0 0 3px rgba(11,122,117,.08); }
.photo-rule-select { font-size: .78rem; }
.remove-task { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 0; border-radius: 10px; color: #9a5d57; background: transparent; cursor: pointer; }
.remove-task:hover { background: #fff1ef; }
.remove-task svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.add-task-row { margin: 2px 0 10px 35px; }
.editor-footer { padding: 16px 22px 22px; }
.save-note { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: .69rem; }
.save-note::before { width: 7px; height: 7px; background: var(--water); border-radius: 50%; content: ""; }

.sheet { position: fixed; inset: 0; width: min(calc(100% - 24px),660px); height: fit-content; max-height: min(90vh,800px); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 24px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.compact-sheet { width: min(calc(100% - 24px),500px); }
.sheet::backdrop { background: rgba(9,30,34,.5); backdrop-filter: blur(4px); }
.sheet form { padding: 12px 24px 24px; }
.sheet-handle { width: 44px; height: 4px; margin: 0 auto 20px; background: var(--line); border-radius: 99px; }
.sheet-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.span-2 { grid-column: span 2; }
.field { display: grid; gap: 7px; }
.field > span { color: var(--ink); font-size: .76rem; font-weight: 750; }
.field em { color: var(--ink-soft); font-size: .65rem; font-style: normal; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fbfdfc; outline: none; }
.field input, .field select { height: 48px; padding: 0 12px; }
.field textarea { min-height: 86px; padding: 12px; resize: vertical; line-height: 1.4; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--water); box-shadow: 0 0 0 3px rgba(11,122,117,.09); }
.sheet-actions, .share-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 9px; margin-top: 22px; }
.share-content { display: grid; justify-items: center; padding: 34px 26px 24px; text-align: center; }
.share-mark { display: grid; width: 70px; height: 70px; margin-bottom: 20px; place-items: center; color: var(--water-dark); background: var(--foam); border-radius: 24px 24px 24px 8px; }
.share-mark.success { color: #fff; background: var(--water); }
.share-mark svg { width: 36px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.share-content .muted { max-width: 380px; margin: 12px 0 20px; font-size: .84rem; line-height: 1.5; }
.link-field { width: 100%; text-align: left; }
.share-actions { width: 100%; }

.toast { position: fixed; z-index: 80; top: 82px; left: 50%; max-width: calc(100% - 32px); padding: 11px 16px; color: #fff; background: var(--ink); border-radius: 12px; box-shadow: var(--shadow); font-size: .8rem; font-weight: 750; opacity: 0; pointer-events: none; transform: translate(-50%,-12px); transition: 200ms ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

/* Cleaner job */
.cleaner-shell { min-height: 100vh; padding-bottom: 114px; }
.cleaner-topbar { position: sticky; z-index: 30; top: 0; display: flex; min-height: 68px; padding: 11px max(20px,calc((100vw - 900px)/2)); align-items: center; justify-content: space-between; background: rgba(244,248,247,.94); border-bottom: 1px solid rgba(19,44,49,.07); backdrop-filter: blur(16px); }
.section-jump { position: sticky; z-index: 29; top: 68px; display: flex; padding: 8px max(20px,calc((100vw - 900px)/2)); background: rgba(244,248,247,.94); border-bottom: 1px solid rgba(19,44,49,.07); backdrop-filter: blur(16px); }
.section-jump-toggle { display: inline-flex; width: 100%; min-height: 44px; padding: 0 14px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--water-dark); background: var(--paper); font-size: .82rem; font-weight: 750; cursor: pointer; }
.section-jump-toggle:hover, .section-jump-toggle[aria-expanded="true"] { border-color: var(--seafoam); background: var(--foam); }
.section-jump-toggle svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
body.section-nav-open { overflow: hidden; }
.section-jump-overlay { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; justify-content: center; }
.section-jump-backdrop { position: absolute; inset: 0; border: 0; background: rgba(9,30,34,.5); backdrop-filter: blur(4px); cursor: pointer; }
.section-jump-sheet { position: relative; z-index: 1; width: min(100%, 520px); max-height: min(80vh, 640px); overflow: auto; padding: 12px 16px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); background: var(--paper); border-radius: 24px 24px 0 0; box-shadow: var(--shadow); }
.section-jump-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-jump-head h2 { font-size: 1.35rem; }
.section-jump-list { display: grid; gap: 6px; }
.section-jump-item { display: flex; width: 100%; min-height: 52px; padding: 0 14px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); font-size: .92rem; font-weight: 750; text-align: left; cursor: pointer; }
.section-jump-item:hover { border-color: var(--seafoam); background: var(--foam); }
.cleaner-status { display: inline-flex; min-height: 30px; padding: 0 11px; align-items: center; gap: 7px; color: var(--water-dark); background: var(--foam); border-radius: 999px; font-size: .68rem; font-weight: 800; }
.cleaner-main { width: min(100%,900px); margin: 0 auto; }
.job-hero { display: flex; padding: 34px 20px 24px; align-items: center; justify-content: space-between; gap: 18px; }
.job-hero h1 { max-width: 570px; font-size: clamp(2.05rem,9vw,4.1rem); }
.job-subline { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; color: var(--ink-soft); font-size: .87rem; }
.progress-orbit { position: relative; width: 72px; height: 72px; flex: 0 0 72px; }
.progress-orbit svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-orbit circle { fill: none; stroke-width: 6; }
.orbit-track { stroke: #dce9e6; }
.orbit-value { stroke: var(--water); stroke-linecap: round; stroke-dasharray: 182.21; transition: stroke-dashoffset 450ms ease; }
.progress-orbit strong { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: .94rem; }
.instruction-card { margin: 0 20px 26px; padding: 16px; background: #fff9e9; border: 1px solid #f2dfa8; border-radius: 16px; }
.instruction-card .instruction-heading,
.instruction-toggle-label { display: block; font-family: var(--display); font-size: .89rem; font-weight: 800; color: var(--ink); }
.instruction-card .md-body { color: #645c43; font-size: .77rem; line-height: 1.45; }
.job-instruction-note .instruction-toggle { width: 100%; }
.instruction-toggle { display: flex; width: auto; margin: 0; padding: 0; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.instruction-toggle-action { flex: 0 0 auto; color: var(--water-dark); background: rgba(11,122,117,.1); border-radius: 999px; padding: 4px 10px; font-family: var(--utility); font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.instruction-toggle:hover .instruction-toggle-action { background: rgba(11,122,117,.16); }
.task-instruction-note { margin-top: 8px; color: #645c43; font-size: .77rem; line-height: 1.45; }
.task-instruction-note .instruction-toggle { width: 100%; min-height: 36px; padding: 6px 0; }
.task-instruction-note.is-collapsed .md-body,
.job-instruction-note.is-collapsed .md-body { display: none; }
.task-instruction-note.is-expanded .md-body,
.job-instruction-note.is-expanded .md-body { display: block; margin-top: 10px; }
.edit-window-card { margin: 0 20px 26px; padding: 16px; background: var(--foam); border: 1px solid var(--seafoam); border-radius: 16px; }
.edit-window-card strong { display: block; margin-bottom: 5px; font-family: var(--display); font-size: .89rem; }
.edit-window-card p { margin: 0; color: var(--ink-soft); font-size: .77rem; line-height: 1.45; }
.status-strip { display: flex; margin: 0 20px 34px; padding: 13px 15px; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-soft); background: var(--foam); border: 1px solid var(--seafoam); border-radius: 15px; font-size: .77rem; }
.status-strip span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 750; }
.cleaner-checklist { padding: 0 20px; }
.cleaner-section-head { margin-bottom: 22px; }
.cleaner-section-head h2 { font-size: 1.75rem; }
.task-group { margin-bottom: 28px; scroll-margin-top: 132px; }
.task-group:focus { outline: none; }
.task-group:focus-visible { outline: 3px solid rgba(11,122,117,.3); outline-offset: 4px; }
.group-title { display: flex; width: 100%; margin: 0 0 10px; padding: 0; align-items: center; gap: 8px; border: 0; color: var(--ink-soft); background: transparent; font-family: var(--utility); font-size: .69rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-align: left; }
.group-title:hover { color: var(--ink); }
.group-title .collapse-icon { width: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; transition: transform 160ms ease; }
.task-group.is-collapsed .group-title .collapse-icon { transform: rotate(-90deg); }
.group-title-text { flex: 0 1 auto; min-width: 0; }
.group-title::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.task-group.is-collapsed .task-list { display: none; }
.group-count { display: inline-grid; min-width: 24px; height: 22px; padding: 0 6px; place-items: center; color: var(--water-dark); background: var(--foam); border-radius: 999px; font-size: .65rem; letter-spacing: 0; }
.task-list { display: grid; gap: 10px; }
.clean-task { padding: 12px; scroll-margin-top: 132px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; transition: 180ms ease; }
.clean-task.is-focus { padding: 16px; border-color: var(--seafoam); box-shadow: 0 10px 28px rgba(19, 44, 49, .07); }
.clean-task.is-compact { padding: 10px 12px; cursor: pointer; }
.clean-task.is-compact:hover { border-color: var(--seafoam); }
.clean-task.is-compact:focus-visible { outline: 3px solid rgba(11,122,117,.28); outline-offset: 3px; }
.clean-task.is-compact .task-copy h3 { margin-bottom: 2px; font-size: .9rem; }
.clean-task.is-compact .task-copy p { font-size: .68rem; }
/* Disabled checks otherwise swallow taps; let them pass through to the card. */
.clean-task.is-compact .check-control:disabled { pointer-events: none; }
.open-task-hint {
  flex: 0 0 auto;
  align-self: center;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--water-dark);
  background: var(--foam);
  font-family: var(--utility);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.clean-task.is-compact .clean-task-row { grid-template-columns: 44px minmax(0,1fr) auto; }
.clean-task.is-complete { border-color: var(--seafoam); background: #fbfefd; }
.clean-task.is-optional { border-style: dashed; }
.optional-tag { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px; color: var(--water-dark); background: var(--foam); font-family: var(--utility); font-size: .58rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.focus-tag { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px; color: #fff; background: var(--water); font-family: var(--utility); font-size: .58rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.clean-task-row { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 11px; align-items: center; }
.clean-task.is-focus .clean-task-row { align-items: start; }
.check-control { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: var(--paper); cursor: pointer; transition: 160ms ease; }
.check-control:disabled { cursor: not-allowed; opacity: .6; }
.check-control:not(:disabled):hover { border-color: var(--water); transform: scale(1.04); }
.check-control svg { width: 21px; fill: none; stroke: transparent; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.6; }
.is-complete .check-control { border-color: var(--water); background: var(--water); }
.is-complete .check-control svg { stroke: #fff; }
.task-copy { min-width: 0; }
.task-copy h3 { margin-bottom: 4px; font-size: .98rem; line-height: 1.2; }
.task-copy p { margin: 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.35; }
.is-complete .task-copy h3 { color: #647778; }
.is-complete .task-copy .task-title-text { text-decoration: line-through; text-decoration-color: var(--seafoam); text-decoration-thickness: 2px; }
.photo-set { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; align-items: center; }
.photo-set > .proof-thumb,
.photo-set > .photo-tile { flex: 0 0 70px; width: 70px; min-width: 70px; height: 70px; min-height: 70px; }
.task-photos { display: grid; gap: 10px; margin-top: 10px; }
.photo-lane { display: grid; gap: 6px; min-width: 0; }
.photo-lane-label { color: var(--ink-soft); font-family: var(--utility); font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.photo-lane-label em { font-style: normal; font-weight: 500; }
.photo-lane-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.proof-thumb { width: 70px; height: 70px; }
.proof-thumb.is-uploading { opacity: .65; }
.library-add { position: relative; display: inline-flex; flex: 0 0 auto; min-height: 42px; padding: 0 10px; align-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--water-dark); background: var(--paper); font-size: .72rem; font-weight: 750; cursor: pointer; }
.library-add:hover { border-color: var(--seafoam); background: var(--foam); }
.library-add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.library-add > span { display: inline-flex; align-items: center; gap: 6px; }
.library-add svg { width: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.photo-tile { position: relative; display: grid; width: 70px; height: 70px; overflow: hidden; place-items: center; border: 1.5px dashed #96b8b2; border-radius: 13px; color: var(--water-dark); background: var(--foam); cursor: pointer; }
.photo-tile.is-disabled { cursor: default; opacity: .72; }
.photo-tile.is-disabled:hover { border-color: #96b8b2; }
.photo-tile input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-empty { display: grid; justify-items: center; gap: 3px; font-size: .59rem; font-weight: 800; }
.photo-empty svg { width: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.photo-preview { display: none; width: 100%; height: 100%; object-fit: cover; background: #e7f1ee; }
.photo-tile.has-photo { border-style: solid; border-color: var(--seafoam); }
.photo-tile.has-photo .photo-empty { display: none; }
.photo-tile.has-photo .photo-preview { display: block; }
.photo-badge { position: absolute; right: 4px; bottom: 4px; display: none; padding: 3px 5px; color: #fff; background: rgba(19,44,49,.82); border-radius: 6px; font-size: .5rem; font-weight: 800; }
.photo-tile.has-photo .photo-badge { display: block; }
.cleaner-notes { margin: 6px 20px 28px; padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.cleaner-notes label { display: block; margin-bottom: 10px; font-family: var(--display); font-size: .95rem; font-weight: 800; }
.cleaner-notes textarea { width: 100%; min-height: 84px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fbfdfc; resize: vertical; outline: none; }
.cleaner-notes textarea:focus { border-color: var(--water); box-shadow: 0 0 0 3px rgba(11,122,117,.09); }
.action-dock { position: fixed; z-index: 35; right: 0; bottom: 0; left: 0; display: flex; min-height: 88px; padding: 13px max(20px,calc((100vw - 860px)/2)); align-items: center; justify-content: space-between; gap: 13px; background: rgba(255,255,255,.95); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(19,44,49,.06); backdrop-filter: blur(18px); padding-bottom: max(13px,env(safe-area-inset-bottom)); }
.dock-copy { display: grid; gap: 2px; }
.dock-copy span { color: var(--ink-soft); font-size: .68rem; }
.dock-copy strong { font-family: var(--display); font-size: .84rem; }
.access-state { display: grid; min-height: 70vh; padding: 32px 20px; place-items: center; text-align: center; }
.access-state-inner { max-width: 430px; }
.access-state .share-mark { margin-inline: auto; }
.access-state p { color: var(--ink-soft); line-height: 1.55; }

/* Authentication and shared loading states use the existing visual language. */
.auth-shell { display: grid; min-height: 100vh; padding: 24px; place-items: center; background: radial-gradient(circle at 80% 15%, rgba(188,231,218,.55), transparent 32%), var(--mist); }
.auth-card { display: grid; width: min(100%,440px); gap: 28px; padding: clamp(26px,6vw,42px); background: var(--paper); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); }
.auth-card h1 { margin-bottom: 10px; font-size: clamp(2.2rem,8vw,3.5rem); }
.auth-card .muted { margin: 0; line-height: 1.55; }
.auth-form { display: grid; gap: 15px; }
.form-error { margin: -8px 0; padding: 11px 13px; color: #8d352c; background: #fff1ef; border: 1px solid #f2cbc6; border-radius: 11px; font-size: .78rem; line-height: 1.4; }
.sheet-feedback { margin: -6px 0 16px; }
.loading-card { justify-items: center; color: var(--ink-soft); text-align: center; }
.loading-card p { margin: 0; }
.loading-spinner { width: 34px; height: 34px; border: 3px solid var(--seafoam); border-top-color: var(--water); border-radius: 50%; animation: spin 750ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.mobile-nav { position: fixed; z-index: 45; right: 12px; bottom: 12px; left: 12px; display: none; height: 68px; padding: 7px; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.mobile-nav button { display: grid; flex: 1; padding: 4px; place-items: center; gap: 2px; border: 0; border-radius: 13px; color: var(--ink-soft); background: transparent; font-size: .59rem; font-weight: 750; cursor: pointer; }
.mobile-nav button.is-active { color: var(--water-dark); background: var(--foam); }
.mobile-nav svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }

:focus-visible { outline: 3px solid rgba(11,122,117,.3); outline-offset: 3px; }

@media (max-width: 880px) {
  .overview-grid, .template-layout { grid-template-columns: 1fr; }
  .job-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-row { grid-template-columns: minmax(190px,1.3fr) repeat(2,minmax(110px,.7fr)) auto; }
  .job-row .hide-tablet { display: none; }
}

@media (max-width: 680px) {
  .admin-topbar { min-height: 64px; }
  .desktop-nav, .profile-chip span:last-child { display: none; }
  .profile-chip { padding-right: 5px; }
  .admin-main { padding: 30px 16px 104px; }
  .page-intro { align-items: flex-start; flex-direction: column; margin-bottom: 25px; }
  .page-intro .primary-button { width: 100%; }
  .mobile-nav { display: flex; }
  .job-grid { grid-template-columns: 1fr; }
  .job-row { grid-template-columns: minmax(0,1fr) auto; gap: 13px; }
  .job-row > .job-row-cell { display: none; }
  .job-row > .job-row-cell:first-child { display: block; }
  .task-edit-row { grid-template-columns: 22px minmax(0,1fr) 40px; }
  .task-edit-extras { padding-left: 0; }
  .task-settings-row { grid-template-columns: 1fr; }
  .editor-head { align-items: stretch; flex-direction: column; }
  .editor-actions { width: 100%; }
  .editor-actions button { flex: 1; }
  .field-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .photo-lane-row { flex-direction: column; align-items: stretch; }
  .photo-set { flex: none; width: 100%; }
  .library-add { justify-content: center; }
  .sheet:not(.compact-sheet) { inset: auto 0 0; width: 100%; height: auto; max-height: 92vh; margin: 0; border-radius: 24px 24px 0 0; }
  .compact-sheet { inset: 0; width: min(calc(100% - 24px),500px); height: fit-content; max-height: min(90vh,800px); margin: auto; border-radius: 24px; }
  .sheet-actions, .share-actions { grid-template-columns: 1fr; }
  .share-actions .primary-button { grid-row: 1; }
  .task-list { grid-template-columns: 1fr; }
  /* Expanded cleaner instructions: larger body + roomier bullets on phones */
  .task-instruction-note.is-expanded .md-body,
  .job-instruction-note.is-expanded .md-body {
    font-size: 1rem;
    line-height: 1.55;
    color: #4f4633;
  }
  .task-instruction-note.is-expanded .md-body p,
  .job-instruction-note.is-expanded .md-body p { margin: 0 0 .65em; }
  .task-instruction-note.is-expanded .md-body ul,
  .task-instruction-note.is-expanded .md-body ol,
  .job-instruction-note.is-expanded .md-body ul,
  .job-instruction-note.is-expanded .md-body ol {
    margin: .45em 0 .7em;
    padding-left: 1.35em;
  }
  .task-instruction-note.is-expanded .md-body li,
  .job-instruction-note.is-expanded .md-body li { margin: .28em 0; }
  .clean-task.is-focus .task-copy h3 { font-size: 1.08rem; line-height: 1.25; }
  .clean-task.is-focus .task-copy > p { font-size: .78rem; line-height: 1.4; }
}

@media (min-width: 720px) {
  .task-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  /* One-task focus reads top-to-bottom; keep the cleaner list single-column. */
  .cleaner-checklist .task-list { grid-template-columns: 1fr; }
  .photo-tile, .proof-thumb { width: 76px; height: 76px; }
  .photo-set > .proof-thumb,
  .photo-set > .photo-tile { flex-basis: 76px; width: 76px; min-width: 76px; height: 76px; min-height: 76px; }
  .job-hero { padding: 52px 24px 30px; }
  .instruction-card, .edit-window-card, .status-strip, .cleaner-notes { margin-inline: 24px; }
  .cleaner-checklist { padding-inline: 24px; }
  .section-jump { padding-inline: max(24px, calc((100vw - 900px)/2)); }
  .section-jump-overlay { align-items: center; }
  .section-jump-sheet { border-radius: 24px; padding-bottom: 24px; }
}

@media (max-width: 390px) {
  .status-strip { align-items: flex-start; flex-direction: column; gap: 5px; }
  .clean-task-row { grid-template-columns: 44px minmax(0,1fr); gap: 7px; }
  .check-control { width: 44px; height: 44px; }
  .photo-tile, .proof-thumb { width: 62px; height: 62px; }
  .photo-set > .proof-thumb,
  .photo-set > .photo-tile { flex-basis: 62px; width: 62px; min-width: 62px; height: 62px; min-height: 62px; }
  .dock-copy span { display: none; }
}

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

/* Arrival and safety remain reachable from each room. */
.sos-button { background: #a52332; color: white; border: 0; border-radius: 12px; padding: 12px 18px; font: inherit; font-weight: 700; min-height: 44px; cursor: pointer; text-decoration: none; }
.sos-button:disabled { opacity: .65; cursor: default; }
.cleaner-topbar .sos-button { flex-shrink: 0; margin-left: 8px; }
.arrival-card, .client-preferences { padding: 18px; border: 1px solid var(--line, #dce5e3); border-radius: 16px; margin: 16px 0; background: white; }
.arrival-card p { margin: 8px 0 0; }
.client-preferences summary { cursor: pointer; font-weight: 700; min-height: 28px; }
.client-preferences p, .safety-history p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.is-room-view .arrival-card { display: none; }
.safety-dialog { padding: 24px; }
.safety-dialog p { line-height: 1.5; overflow-wrap: anywhere; }
.safety-dialog .emergency-call { display: block; text-align: center; margin: 16px 0; }
.safety-history { max-height: 300px; overflow: auto; }
@media (max-width: 480px) { .cleaner-topbar .brand { font-size: 14px; gap: 6px; } .cleaner-topbar .cleaner-status { font-size: 11px; } .row-actions { flex-wrap: wrap; } }

.safety-dialog [hidden] { display: none !important; }

/* Employee workday and team calendar */
.employee-job-facts { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid #e4eeeb; margin-top: 14px; }
.employee-job-facts div { display: grid; gap: 5px; }
.employee-job-facts span { font-size: 12px; color: #61746e; }
.employee-job-facts strong { font-size: 24px; color: #126c60; }
.employee-job-facts strong.attendance-badge { font-size: 13px; color: #3e5750; }
.work-summary { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; padding: 20px; border: 1px solid #d5e7e0; border-radius: 18px; background: #f0f8f4; margin: 18px 0; }
.work-pay { display: grid; align-content: start; gap: 5px; }
.work-pay span, .work-pay small { color: #536d63; font-size: 12px; }
.work-pay strong { font-size: 27px; color: #125c50; }
.work-attendance p { color: #536d63; font-size: 12px; line-height: 1.5; margin: 7px 0; }
.attendance-state { font-size: 13px; font-weight: 700; }
.attendance-state.is-on-site { color: #087553; }
.is-room-view .work-summary { padding: 12px 16px; margin: 12px 0; }
.is-room-view .work-pay strong { font-size: 22px; }
.manager-pay, .visit-history { border-bottom: 1px solid #e3ebe7; padding-bottom: 14px; margin-bottom: 18px; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.calendar-toolbar > div { display: flex; gap: 6px; }
.calendar-toolbar label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.calendar-toolbar select { padding: 10px; border: 1px solid #d8e6e0; border-radius: 10px; background: white; font: inherit; }
.calendar-zone { font-size: 12px; margin: 16px 0; }
.calendar-week { display: grid; grid-template-columns: repeat(7, minmax(145px, 1fr)); overflow-x: auto; border: 1px solid #d7e5df; border-radius: 16px; background: #fff; min-height: 460px; }
.calendar-day { border-right: 1px solid #e0e9e4; padding: 8px; }
.calendar-day:last-child { border-right: 0; }
.calendar-day > header { display: grid; gap: 4px; padding: 12px 5px 18px; border-bottom: 1px solid #e5ede9; margin-bottom: 12px; }
.calendar-day > header span, .calendar-day > header small { font-size: 12px; color: #70847a; }
.calendar-day.is-today { background: #f1f8f3; }
.calendar-day.is-today > header strong { color: #08745c; }
.calendar-visit { width: 100%; display: grid; gap: 8px; text-align: left; border: 1px solid #cddfe3; border-left: 4px solid #7194a7; border-radius: 10px; padding: 12px; background: #f1f7fa; color: #183c40; margin-bottom: 10px; cursor: pointer; font: inherit; overflow-wrap: anywhere; }
.calendar-visit.is-on-site { border-left-color: #0f8063; background: #e7f7ee; }
.calendar-visit time, .calendar-visit > span { font-size: 12px; }
.calendar-visit > strong { font-size: 14px; }
.calendar-visit small { color: #5b7375; font-size: 11px; }
.calendar-visit-status { padding-top: 6px; border-top: 1px solid #d1e2df; }
.calendar-empty { color: #8a9993; font-size: 12px; padding: 12px 4px; }
@media (max-width: 700px) { .calendar-week { grid-template-columns: 1fr; min-height: auto; } .calendar-day { border-right: 0; border-bottom: 1px solid #e0e9e4; } .calendar-day > header { display: flex; align-items: baseline; gap: 12px; padding: 10px 4px; margin-bottom: 8px; } .calendar-toolbar { align-items: flex-start; } .work-summary { gap: 12px; padding: 16px; } .work-pay strong { font-size: 23px; } }
.demo-banner { background: #143b35; color: #fff; padding: 8px 16px; font-size: 11px; text-align: center; letter-spacing: .02em; }

/* Time-positioned appointment blocks, shared by cleaner and manager calendars. */
.employee-calendar-shell { max-width: 1320px; }
.employee-calendar-shell .cleaner-main { max-width: 1240px; }
.calendar-view-switch { display: flex; border: 1px solid #d7e4dd; border-radius: 10px; overflow: hidden; }
.calendar-view-switch button { border: 0; background: white; font: inherit; padding: 11px 15px; min-height: 44px; cursor: pointer; color: #405a51; }
.calendar-view-switch button[aria-pressed="true"] { background: #ddefe7; color: #165b4b; font-weight: 700; }
.time-grid-scroll { max-height: 65vh; min-height: 330px; overflow: auto; border: 1px solid #d5e2dc; border-radius: 14px; background: white; position: relative; overscroll-behavior: contain; }
.time-grid { display: grid; position: relative; min-width: 100%; }
.time-grid.is-week { min-width: 962px; }
.time-grid-corner, .time-grid-heading { position: sticky; top: 0; z-index: 4; background: #f5f9f7; border-bottom: 1px solid #dce6e0; border-right: 1px solid #dce6e0; display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column; font-size: 12px; }
.time-grid-heading.is-today { background: #dff1e8; color: #075d46; }
.time-grid-heading strong { font-size: 14px; }
.time-grid-corner { left: 0; z-index: 6; font-size: 10px; }
.time-grid-hours { position: sticky; left: 0; z-index: 3; background: #f9fbfa; border-right: 1px solid #dce6e0; }
.time-grid-hours > div { height: 72px; text-align: right; padding: 7px 7px 0 0; box-sizing: border-box; color: #6c8178; font-size: 12px; border-top: 1px solid #e6ece9; }
.time-grid-hours small { font-size: 9px; padding-left: 2px; }
.time-grid-day { position: relative; border-right: 1px solid #dce6e0; background: repeating-linear-gradient(to bottom, #e5ece8 0px, #e5ece8 1px, transparent 1px, transparent 35px, #f0f4f2 35px, #f0f4f2 36px, transparent 36px, transparent 72px); }
.time-grid-day.is-today { background-color: #f6fbf7; }
.time-job { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; padding: 8px; border: 1px solid #da8980; border-left: 4px solid #c55f53; border-radius: 7px; background: #f7d4ce; color: #642a24; cursor: pointer; overflow: hidden; font: inherit; text-align: left; box-sizing: border-box; min-width: 0; }
.time-job time { font-size: 10px; line-height: 1.2; }
.time-job strong { font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.time-job > span, .time-job small { font-size: 11px; line-height: 1.2; }
.time-job.is-active { background: #d2efe2; color: #145a43; border-color: #66b895; border-left-color: #218461; }
.time-job.is-complete { background: #e5edf4; color: #3e566b; border-color: #adbecd; border-left-color: #7c95ae; }
.time-job:hover { filter: brightness(.97); }
.time-job:focus-visible, .time-grid-scroll:focus-visible { outline: 3px solid #0a7361; outline-offset: -3px; }
@media (max-width: 600px) { .time-calendar .calendar-toolbar { gap: 10px; } .time-calendar .calendar-toolbar > strong { order: -1; width: 100%; } .employee-calendar-shell .cleaner-main { padding-left: 14px; padding-right: 14px; } .time-grid-scroll { max-height: 61vh; } }

.employee-calendar-shell { margin: 0 auto; }
.employee-calendar-shell .cleaner-main { width: min(100%, 1240px); }
.employee-calendar-shell .cleaner-main { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

/* Manager workspace */
.operations-shell { background:#f5f8f8; min-height:100vh; }
.operations-shell .admin-topbar { justify-content:space-between; }
.operations-layout { display:grid; grid-template-columns:228px minmax(0,1fr); max-width:1800px; margin:auto; }
.operations-sidebar { background:#fff; border-right:1px solid #dce6e5; padding:28px 16px; min-height:calc(100vh - 85px); }
.sidebar-title { font-size:10px; font-weight:800; letter-spacing:1.4px; color:#6b8583; padding:0 12px; }
.operations-sidebar section { margin:24px 0; }
.operations-sidebar h2 { font-size:11px; text-transform:uppercase; letter-spacing:1px; padding:0 12px; color:#829492; }
.operations-sidebar button { width:100%; display:flex; align-items:center; gap:12px; border:0; background:transparent; text-align:left; padding:12px; border-radius:10px; color:#4a6260; font:inherit; font-size:13px; cursor:pointer; margin:3px 0; }
.operations-sidebar button:hover { background:#f0f7f6; }
.operations-sidebar button[aria-current] { background:#dff3ef; color:#17645b; font-weight:750; }
.nav-dot { width:7px; height:7px; border:1.5px solid currentColor; border-radius:3px; flex-shrink:0; }
.operations-shell .admin-main { width:100%; min-width:0; box-sizing:border-box; padding:32px; margin:0; }
.ops-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:16px; margin:24px 0; }
.ops-stat { background:#fff; border:1px solid #dfe9e7; border-radius:16px; padding:23px; display:flex; flex-direction:column; gap:9px; }
.ops-stat>span { font-size:12px; color:#59736e; }.ops-stat strong { font-size:30px; color:#163f38; letter-spacing:-1px; }.ops-stat small { color:#82908c; font-size:11px; }
.ops-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; }.ops-card,.ops-panel { border:1px solid #dce7e4; background:#fff; border-radius:16px; padding:24px; }.ops-panel { margin:22px 0; }.ops-card h2,.ops-panel h2 { font-size:18px; margin:0 0 15px; }.ops-card p { font-size:13px; color:#526b65; line-height:1.6; }.ops-person { display:flex; align-items:center; gap:12px; margin-bottom:20px; }.ops-person h2 { margin:0 0 4px; }.ops-person p { margin:0; overflow-wrap:anywhere; }.ops-avatar { border-radius:50%; background:#e5f2ed; color:#376b57; display:grid; place-items:center; width:44px; height:44px; font-weight:700; flex-shrink:0; }.ops-tag { display:inline-block; background:#edf5f1; color:#50765f; padding:6px 9px; border-radius:7px; font-size:11px; text-transform:capitalize; }.ops-card-footer { margin-top:20px; border-top:1px solid #e8efec; padding-top:15px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; color:#788b85; }.ops-details,.availability-summary { display:grid; grid-template-columns:100px 1fr; gap:10px; font-size:13px; }.ops-details dt,.availability-summary dt { color:#7a8d86; }.ops-details dd,.availability-summary dd { margin:0; overflow-wrap:anywhere; }.ops-note { white-space:pre-wrap; overflow-wrap:anywhere; }.ops-address { border-top:1px solid #edf0ef; padding-top:12px; }.ops-empty { padding:28px 10px; color:#798d86; font-size:14px; }.ops-row { display:flex; justify-content:space-between; align-items:center; gap:18px; border-bottom:1px solid #edf0ef; padding:19px 0; }.ops-row:last-child { border-bottom:0; }.ops-row strong { font-size:14px; }.ops-row p { margin:7px 0; font-size:12px; color:#75877f; }.ops-row small { display:block; font-size:11px; color:#8c7460; }.ops-actions { display:flex; gap:8px; flex-wrap:wrap; }.ops-table-wrap { overflow:auto; }.ops-table { width:100%; text-align:left; border-collapse:collapse; font-size:13px; }.ops-table th { padding:13px 16px; color:#698075; background:#f3f7f5; font-weight:600; font-size:11px; white-space:nowrap; }.ops-table td { padding:17px 16px; border-bottom:1px solid #edf0ef; white-space:nowrap; }.rating-stars { color:#b88126; letter-spacing:3px; }.ops-error { background:#fff0e8; padding:16px; border-radius:10px; }.ops-dialog { width:min(540px,calc(100% - 32px)); box-sizing:border-box; border:1px solid #d9e5e0; border-radius:20px; padding:28px; }.ops-dialog::backdrop { background:#132a2566; }.ops-dialog .field { display:grid; gap:8px; margin:16px 0; }.ops-dialog input,.ops-dialog textarea,.ops-dialog select,.availability-day input[type=time] { border:1px solid #d8e2df; border-radius:9px; padding:10px; background:#fff; color:#244739; font:inherit; width:100%; box-sizing:border-box; }.ops-dialog p,.ops-dialog li { font-size:14px; line-height:1.6; }.availability-days { margin-bottom:24px; }.availability-day { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid #e6ede9; }.availability-day>div { display:flex; align-items:center; gap:8px; }.availability-day input[type=time] { max-width:120px; }.availability-day label { min-width:115px; font-size:13px; }.availability-day input[type=checkbox] { accent-color:#2c8068; width:18px; height:18px; vertical-align:middle; }.employee-nav { grid-template-columns:repeat(4,1fr); }.employee-nav button { font-size:11px; }
@media(max-width:900px) { .operations-layout { grid-template-columns:185px minmax(0,1fr); }.operations-shell .admin-main { padding:24px 18px; }.operations-sidebar { padding:22px 8px; }.operations-sidebar button { font-size:12px; }.ops-row { align-items:flex-start; flex-direction:column; } }
@media(max-width:650px) { .operations-layout { display:block; }.operations-sidebar { min-height:0; padding:12px 14px; border-right:0; border-bottom:1px solid #dce6e5; }.sidebar-title { display:none; }.operations-sidebar nav { display:flex; gap:18px; overflow-x:auto; padding-bottom:4px; }.operations-sidebar section { margin:0; flex-shrink:0; }.operations-sidebar h2 { font-size:9px; margin:0 0 7px; }.operations-sidebar section button { display:inline-flex; width:auto; padding:8px 10px; margin:0 2px; font-size:11px; }.operations-sidebar .nav-dot { display:none; }.operations-shell .admin-main { padding:22px 16px 40px; }.ops-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.ops-stat { padding:15px; }.ops-stat strong { font-size:25px; }.ops-card-grid { grid-template-columns:1fr; }.ops-panel { padding:18px; }.availability-day { flex-wrap:wrap; }.availability-day>div { width:100%; }.availability-day input[type=time] { flex:1; max-width:none; } }
.day-off-add { display:flex; gap:10px; flex-wrap:wrap; }.day-off-add input { padding:10px; border:1px solid #d7e4de; border-radius:8px; font:inherit; }.days-off-list { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }.day-off-chip { background:#eaf4ef; color:#2a614e; border:0; border-radius:8px; padding:9px 12px; cursor:pointer; }
.work-review { width:min(760px,calc(100% - 32px)); }.review-task { padding:16px 0; border-bottom:1px solid #e5eee9; }.review-photos { display:flex; flex-wrap:wrap; gap:12px; }.review-photos a { display:grid; gap:4px; font-size:12px; color:#496a5a; }.review-photos img { width:140px; height:110px; object-fit:cover; border-radius:9px; }.work-review h3 { margin-top:25px; }
@media(max-width:1400px) {
 .operations-shell .job-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .operations-shell .job-row>.job-row-cell { display:block; min-width:0; }
 .operations-shell .job-row>.job-row-cell:first-child { grid-column:1/-1; }
 .operations-shell .job-row .row-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:flex-start; }
}
.review-room { border:1px solid #dce7e2; border-radius:12px; padding:16px; margin:12px 0; }.review-room summary { cursor:pointer; font-weight:700; color:#265747; }.review-task small { color:#6d8176; }.job-card-footer { flex-wrap:wrap; gap:10px; }
.employee-feedback { padding:18px; margin:16px 0; border:1px solid #d7e7df; border-radius:14px; background:#f3f8f4; }.employee-feedback h3 { font-size:14px; margin:0 0 10px; }.employee-feedback p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; font-size:14px; margin:10px 0; }.employee-feedback small { font-size:11px; color:#637e70; }.feedback-score { display:flex; align-items:center; gap:12px; }.feedback-score span { color:#b77d23; font-size:23px; letter-spacing:3px; }.feedback-score strong { font-size:16px; }
.employee-rating-summary { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; padding:22px; margin:22px 0; background:#edf6f1; border:1px solid #cde1d5; border-radius:18px; }.employee-rating-summary h2 { font-size:17px; margin:4px 0 8px; }.employee-rating-summary p:not(.eyebrow) { color:#567263; font-size:13px; margin:0; }.employee-rating-summary>small { flex-basis:100%; color:#658071; line-height:1.5; font-size:11px; }.rating-average { white-space:nowrap; color:#476851; }.rating-average strong { font-size:38px; letter-spacing:-1px; color:#204d37; }.rating-average>span:first-child { color:#b77d23; font-size:24px; margin-right:6px; }
.employee-nav { grid-template-columns:repeat(5,minmax(0,1fr)); }.offer-price { font-size:30px; font-weight:750; color:#21583f; }.offer-price span { display:block; font-size:11px; font-weight:500; color:#648474; margin-top:4px; }.offer-actions { display:flex; gap:12px; margin-top:20px; }.offer-actions button { flex:1; }.offers-status:not(:empty) { background:#fff2e5; border-radius:12px; padding:15px; margin:16px 0; }
.schedule-change-list { background:#fff8e9; border:1px solid #e8d9b6; padding:20px; border-radius:16px; margin:20px 0; }.schedule-change-list>h2 { font-size:19px; margin:0 0 8px; }.schedule-change-list>p { font-size:13px; color:#766344; }.schedule-change-card { background:white; padding:18px; border-radius:12px; margin-top:14px; }.schedule-change-card h3 { font-size:16px; margin:0 0 16px; }.schedule-comparison { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }.schedule-comparison>div { flex:1; min-width:150px; }.schedule-comparison small { display:block; font-size:11px; color:#7e795e; margin-bottom:6px; }.schedule-comparison strong { font-size:14px; }.schedule-change-status:not(:empty) { padding:12px; color:#924d29; }
.job-navigation { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }.job-navigation a { text-decoration:none; min-height:44px; padding:10px 13px; box-sizing:border-box; font-size:12px; justify-content:center; }.job-navigation a:focus-visible { outline:3px solid #438770; outline-offset:3px; }.navigation-unavailable { font-size:12px; color:#6e8078; }.is-room-view .job-navigation { margin-top:8px; }
.arrival-update-card { padding:18px; margin:16px 0; background:#f5f8fa; border:1px solid #dce6ea; border-radius:14px; }.arrival-update-card h3 { margin:0 0 6px; font-size:15px; }.arrival-update-card>p { font-size:12px; color:#556d76; }.arrival-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.arrival-buttons button { min-height:44px; font-size:12px; padding:10px; }.help-button { border:1px solid #dab985; background:#fff4df; color:#744b1f; border-radius:10px; font-weight:650; cursor:pointer; }.arrival-update-card small { display:block; color:#77878c; font-size:11px; line-height:1.5; }.arrival-update-status:not(:empty) { padding-top:8px; }.arrival-history p { padding:12px 0; border-bottom:1px solid #e5ece8; font-size:13px; }
.arrival-update-card [data-arrival-reset][hidden] { display: none; }

.manual-dialog { width:min(760px,95vw); max-height:90vh; overflow:auto; }.manual-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; }.manual-heading h2 { margin:0; }.manual-address { font-weight:650; }.manual-updated { font-size:12px; color:#687e7b; }.manual-section { border:1px solid #d7e4df; border-radius:12px; margin:10px 0; padding:14px; }.manual-section summary { cursor:pointer; font-weight:650; }.manual-section summary span { float:right; font-weight:400; font-size:11px; color:#647c75; }.manual-section .field { margin-top:14px; }.manual-text { white-space:pre-wrap; line-height:1.7; overflow-wrap:anywhere; }.manual-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }.manual-gallery figure { margin:0; }.manual-gallery img { width:100%; max-height:240px; object-fit:contain; border-radius:12px; background:#f2f6f4; }.manual-gallery figcaption { padding:8px 0; overflow-wrap:anywhere; }.manual-photo-form { padding-top:20px; }.property-manual-launch { width:100%; margin:14px 0; min-height:50px; }

.visit-difference-card { margin:18px 0; padding:20px; border:1px solid #e4bd72; border-left:5px solid #c88623; border-radius:16px; background:#fff7e7; color:#513d22; }.visit-difference-card h2 { margin:5px 0 12px; font-size:20px; }.visit-difference-card .eyebrow { color:#85602a; }.visit-difference-text { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; font-size:16px; }.manager-visit-instructions { padding:16px; margin:16px 0; border:1px solid #e4bd72; border-radius:14px; background:#fffaf0; }

.room-progress { padding:16px; margin:16px 0; border:1px solid #d6e5e0; border-radius:16px; background:#f4f9f7; }.room-progress-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-bottom:12px; }.room-progress-heading small { color:#657a73; font-size:11px; }.room-progress-chips { display:flex; flex-wrap:wrap; gap:8px; }.room-progress-chip { display:inline-flex; gap:8px; align-items:center; padding:9px 12px; min-height:44px; border:1px solid #d0dfd9; border-radius:30px; background:white; color:#39594c; font:inherit; font-size:12px; }.room-progress-chip.is-done { color:#186346; background:#e0f3e8; border-color:#afd6bf; }button.room-progress-chip { cursor:pointer; }button.room-progress-chip[aria-current] { outline:2px solid #285c4c; outline-offset:2px; }button.room-progress-chip:focus-visible { outline:3px solid #285c4c; outline-offset:2px; }

.report-issue-button { width:100%; min-height:56px; margin:14px 0; border:2px solid #c67e22; border-radius:14px; background:#fff2dd; color:#704515; font:inherit; font-weight:750; font-size:18px; cursor:pointer; }.issue-categories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px; border:1px solid #dae4df; border-radius:12px; }.issue-categories label { display:flex; align-items:center; padding:10px; gap:6px; background:#f2f7f4; border-radius:8px; }.issue-categories input { width:auto; }.issue-safety { padding:12px; background:#fff0de; }.issue-record { padding:16px 0; border-bottom:1px solid #d9e2dd; }.issue-record img { display:block; width:100%; max-width:360px; max-height:240px; object-fit:contain; margin:12px 0; }.issue-notes { white-space:pre-wrap; overflow-wrap:anywhere; }

.supply-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid #dce6e0; }.supply-row small { display:block; color:#60756b; margin-top:6px; }.supply-row button { min-height:44px; margin:3px; }.supply-out { background:#fff0e5; border-color:#d0a381; color:#864623; }

/* Private cleaner progress */
.progress-welcome{padding:24px;border-radius:22px;background:#e5f5ee;margin-bottom:28px}.progress-welcome span{font-size:13px;color:#376550}.progress-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.progress-stat{padding:20px;background:white;border:1px solid #dce8e1;border-radius:18px}.progress-stat h3{font-size:14px;margin:0 0 14px}.progress-stat strong{font-size:32px;color:#215746}.progress-stat p{font-size:12px;line-height:1.6;color:#65756b}.progress-achievements{margin-top:32px}.achievement{display:flex;gap:16px;border:1px solid #dce8e1;border-radius:18px;padding:20px;margin:12px 0;background:white}.achievement>span{font-size:32px;color:#859b8e}.achievement>div{flex:1;min-width:0}.achievement h3{margin:0}.achievement progress{width:100%;accent-color:#35755c}.achievement small{display:block;margin-top:8px;line-height:1.6;color:#65756b}.achievement.is-earned{background:#f3f8de;border-color:#c1d578}.achievement.is-earned>span{color:#819a24}.employee-nav{overflow-x:auto}.employee-nav button{flex-shrink:0}@media(max-width:380px){.progress-stats{grid-template-columns:1fr}}

@media(max-width:600px){.employee-nav{justify-content:flex-start}.employee-nav button{min-width:66px}}

.final-check{max-width:520px}.final-check fieldset{border:0;padding:12px 0;display:grid;gap:15px}.final-check fieldset label{display:flex;align-items:center;gap:10px;font-size:16px}.final-check input{width:22px;height:22px;accent-color:#24765d}.final-check [data-verdict]{padding:16px;border-radius:14px;background:#e8f4ed;margin:12px 0}.final-check [data-error]{color:#9a332f}.final-check small{line-height:1.6;display:block}

.earnings-filters{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0}.earnings-filters .field{flex:1;min-width:140px}.earnings-filters select,.earnings-filters input{padding:12px;border:1px solid #cadbd3;border-radius:10px;background:white;font:inherit;max-width:100%;box-sizing:border-box}
.availability-day>.availability-blocks{display:block;flex:1;min-width:0}.availability-shift{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}.availability-shift input[type=time]{max-width:130px}.availability-day{align-items:flex-start}.availability-blocks>[data-add-shift]{font-size:12px;padding:8px 12px}@media(max-width:540px){.availability-day{display:block}.availability-blocks{margin-top:12px}}

.offer-recipient{display:flex;align-items:center;gap:10px;padding:10px 0}.ops-dialog .offer-recipient input{width:20px;height:20px;accent-color:#287257}[data-recipients]{border:1px solid #d8e2df;border-radius:12px;padding:12px 16px}

/* Phone-first cleaner navigation and comfortable touch targets. */
.employee-more{display:grid;gap:12px;margin-top:24px}.employee-more button{display:grid;grid-template-columns:1fr auto;text-align:left;color:var(--ink);font:inherit;cursor:pointer;gap:8px}.employee-more button span:first-of-type{grid-column:1;color:var(--ink-soft);font-size:14px}.employee-more button span:last-child{grid-column:2;grid-row:1/3;align-self:center}
@media(max-width:600px){
 .employee-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px 8px max(8px,env(safe-area-inset-bottom));overflow:visible}
 .employee-nav button{width:100%;min-width:0;min-height:54px;font-size:12px}
 .employee-shell .cleaner-main,.cleaner-main{padding-left:16px;padding-right:16px;padding-bottom:120px;min-width:0}
 .cleaner-topbar{padding:12px 16px;gap:8px}.cleaner-topbar .ghost-button{min-height:44px}
 .cleaner-shell input,.cleaner-shell textarea,.cleaner-shell select,dialog input,dialog textarea,dialog select{font-size:16px!important}
 .cleaner-shell button,.sheet button{min-height:44px;touch-action:manipulation}
 .employee-job{padding:18px;border-radius:18px}.employee-job h2{font-size:22px}.employee-job p,.job-subline{overflow-wrap:anywhere}
 .room-tiles{gap:10px}.room-tile{padding:14px;min-height:136px}.room-tile strong{font-size:15px}
 .action-dock{padding-left:12px;padding-right:12px;gap:8px;flex-wrap:wrap}.action-dock .dock-copy{flex:1;min-width:110px}.action-dock .primary-button{font-size:14px;padding:12px}
 .sheet{box-sizing:border-box;width:calc(100% - 20px);max-height:calc(100dvh - 28px);overflow-y:auto;padding:22px 18px;border-radius:20px}.sheet-actions,.share-actions{flex-wrap:wrap}.sheet-actions button,.share-actions button{flex:1;min-width:110px}
 .progress-welcome{padding:20px}.progress-stat{padding:15px}.progress-stat strong{font-size:27px}.progress-stat h3{line-height:1.4}.progress-stat p{overflow-wrap:anywhere}
 .availability-shift{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px}.availability-shift input[type=time]{width:100%;min-width:0;max-width:none}.availability-shift button{grid-column:1/-1;justify-self:end}.availability-blocks>[data-add-shift]{width:100%}
 .work-summary{flex-wrap:wrap}.calendar-toolbar{flex-wrap:wrap}.calendar-toolbar button{min-height:44px}.time-grid-scroll{overscroll-behavior:contain}
}