/* Fraunces, bundled (latin subset, variable: opsz 9–144, wght 400–700, SOFT 0–100). */
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Workhorse — the design system.
   Rustic organic, Anthropologie-ish, built around Heather's Tuscan yellow door.
   Fraunces (soft serif) for headings; the system sans for everything else.
   Every colour is a token, so dark mode is one block of overrides. Chips and tints are mixed
   from their base colour with color-mix(), so they stay right in both modes. */

:root {
  --door: #E9B949;
  --door-deep: #C8961F;
  --door-ink: #3A2A08;
  --ink: #2E261F;
  --ink-2: #5E5246;
  --ink-3: #706357;          /* faint text: still ≥ 4.5:1 on every background */
  --bg: #F4EEE3;
  --bg-2: #EDE5D7;
  --surface: #FFFDF8;
  --surface-2: #F8F3EA;
  --line: #E6DCCB;
  --line-2: #D9CDB9;
  --sage: #8A9A78;
  --sage-deep: #5D6F4F;
  --terra: #B9694A;
  --sky: #5F86A3;
  --plum: #8A7FB0;
  --amber: #C9822B;
  --good: #5D6F4F;
  --bad: #A84B35;
  --badge: #A84B35;          /* count badges: white on this is 5.6:1 */
  --badge-ink: #fff;
  --bar-bg: var(--surface);   /* sticky header and tab bars: solid, so page text never shows through (WebKit lets it bleed through even at 96%) */
  --shadow-1: 0 1px 2px rgba(46, 38, 31, .05), 0 2px 8px rgba(46, 38, 31, .05);
  --shadow-2: 0 2px 4px rgba(46, 38, 31, .06), 0 12px 32px -8px rgba(46, 38, 31, .18);
  --shadow-3: 0 4px 8px rgba(46, 38, 31, .08), 0 24px 48px -12px rgba(46, 38, 31, .28);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --top: calc(62px + env(safe-area-inset-top));
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --door: #EFC255;
    --door-deep: #D9A838;
    --door-ink: #2A1E05;
    --ink: #F3EBDF;
    --ink-2: #C2B4A4;
    --ink-3: #A09281;
    --bg: #1B1714;
    --bg-2: #221D19;
    --surface: #27211C;
    --surface-2: #2F2823;
    --line: #3B332C;
    --line-2: #4A4038;
    --sage: #96A684;
    --sage-deep: #AEBE9B;
    --terra: #D4846A;
    --sky: #8AAFC9;
    --plum: #A79DCB;
    --amber: #DFA058;
    --good: #AEBE9B;
    --bad: #E08A74;
    --badge: #E08A74;
    --badge-ink: #1B1714;
    --bar-bg: var(--surface);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 32px -8px rgba(0, 0, 0, .6);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, .4), 0 24px 48px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg);
  background-image: var(--noise), radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--door) 14%, transparent), transparent 60%);
  background-attachment: fixed;
  font: 16px/1.5 var(--sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--door-deep) 60%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color .15s; }
a:hover { text-decoration-color: var(--door-deep); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.012em; margin: 0 0 .45em; line-height: 1.12; font-variation-settings: "SOFT" 60, "opsz" 48; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .8em; }
small, .muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.1rem 0; }
img { max-width: 100%; }
code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); padding: .1em .4em; border-radius: 6px; }
:focus-visible { outline: 3px solid color-mix(in oklab, var(--door) 70%, transparent); outline-offset: 2px; border-radius: 8px; }
::selection { background: color-mix(in oklab, var(--door) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .75rem; height: var(--top);
  padding: env(safe-area-inset-top) max(1.1rem, env(safe-area-inset-right)) 0 max(1.1rem, env(safe-area-inset-left));
  background: var(--bar-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; }
.brand .mark { width: 30px; height: 38px; flex: none; filter: drop-shadow(0 2px 3px rgba(46, 38, 31, .18)); }
.brand .name { font-family: var(--serif); font-size: 1.28rem; font-weight: 650; letter-spacing: -.01em; line-height: 1; font-variation-settings: "SOFT" 80; }
.brand .org { display: block; font: 500 .74rem/1.2 var(--sans); color: var(--ink-3); margin-top: 3px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.topbar .spacer { flex: 1; }
.topbar .back { display: inline-flex; align-items: center; gap: .15rem; min-height: 44px; margin-left: -.5rem; padding: 0 .55rem 0 .3rem; border-radius: 22px; text-decoration: none; color: var(--ink); font-weight: 600; flex: none; }
.topbar .back svg { width: 1.35em; height: 1.35em; }
.topbar .back:hover { background: var(--surface-2); }
.topbar .back:active { transform: scale(.96); }
/* With Back there, the phone keeps the door and drops the business name to make room. */
@media (max-width: 600px) { .topbar.has-back .brand .org { display: none; } .topbar.has-back { gap: .4rem; } }
.bell { position: relative; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; font-size: 1.15rem; color: var(--ink-2); transition: background .15s, transform .15s var(--ease); }
.bell:hover { background: var(--surface-2); color: var(--ink); }
.bell:active { transform: scale(.94); }
.bell .dot { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--badge); color: var(--badge-ink); font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface); }
.topbar .btn.small { min-height: 44px; padding: .4rem .9rem; }

/* "See what they see": the office previewing a worker's app. The door yellow, so it can't be missed. */
.preview-bar { position: sticky; top: var(--top); z-index: 39; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem max(1.1rem, env(safe-area-inset-right)) .55rem max(1.1rem, env(safe-area-inset-left));
  background: var(--door); color: var(--door-ink); font-size: .92rem; font-weight: 520; border-bottom: 1px solid var(--door-deep); }
.preview-bar > span { flex: 1 1 14rem; }
.preview-bar .btn.small { min-height: 40px; background: var(--door-ink); color: #fff; border-color: var(--door-ink); }

/* ---------- Office layout ---------- */
.admin { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - var(--top)); }
.side { border-right: 1px solid var(--line); padding: 1rem .7rem; background: color-mix(in oklab, var(--surface) 55%, transparent); position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow-y: auto; display: flex; flex-direction: column; }
.side a { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 12px; text-decoration: none; color: var(--ink-2); font-weight: 520; font-size: .95rem; position: relative; transition: background .15s, color .15s; }
.side a > span:first-child { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--surface-2); font-size: .95rem; flex: none; transition: background .15s, transform .2s var(--ease); }
.side a:hover { background: var(--surface-2); color: var(--ink); }
.side a:hover > span:first-child { transform: translateY(-1px); }
.side a.on { background: color-mix(in oklab, var(--door) 22%, var(--surface)); color: var(--ink); font-weight: 650; }
.side a.on > span:first-child { background: var(--door); }
.side a.on::before { content: ""; position: absolute; left: -.7rem; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--door-deep); }
.side a .n { margin-left: auto; background: var(--badge); color: var(--badge-ink); border-radius: 10px; font-size: .7rem; padding: 1px 7px; font-weight: 700; }
.side .group { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin: 1rem .6rem .35rem; font-weight: 700; }
.side .group:first-child { margin-top: .2rem; }
.side form { margin-top: auto; padding-top: 1rem; }
.side a.more-only { display: none; }
/* Who's signed in, at the foot of the side menu: one tidy row. */
.me-row { display: flex; align-items: center; gap: .6rem; padding: 1rem .6rem .2rem; }
.me-text { flex: 1; min-width: 0; font-size: .85rem; line-height: 1.25; }
.me-text strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-links { display: flex; flex-wrap: nowrap; align-items: center; gap: .7rem; font-size: .8rem; }
.side .me-links a, .me-links .linkbtn { display: inline; padding: 0; background: none; font: 500 .8rem var(--sans); white-space: nowrap; color: var(--ink-2); min-height: 0; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--door-deep) 60%, transparent); }
.me-links a + .linkbtn::before { content: "·"; margin-right: .7rem; color: var(--ink-3); text-decoration: none; display: inline-block; }
main { padding: 1.5rem 1.6rem 3rem; max-width: 1240px; width: 100%; margin: 0 auto; }
.staff main { max-width: 640px; padding: 1rem max(1rem, env(safe-area-inset-right)) calc(7.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
/* A page with a sticky finish bar: room for the bar and the tab bar under the last card. */
.staff main:has(.sticky-action) { padding-bottom: calc(9.5rem + env(safe-area-inset-bottom)); }

/* Office on a phone: no side menu; a bottom tab bar (Today, Jobs, Issues, Requests, More) like the
   staff one, and "More" (/admin/more) shows the whole side menu as a list. */
.tabs.office-tabs { display: none; }
@media (max-width: 860px) {
  .admin { display: block; }
  .side { display: none; }
  main { padding: 1rem max(1rem, env(safe-area-inset-right)) calc(6.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
  .tabs.office-tabs { display: grid; }
  .more-page .side { display: flex; position: static; height: auto; overflow: visible; border: 0; background: none; padding: 1rem max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left)); }
  .more-page .side a { padding: .7rem .7rem; min-height: 52px; font-size: 1.02rem; background: var(--surface); border: 1px solid var(--line); margin-bottom: .4rem; box-shadow: var(--shadow-1); }
  .more-page .side a.on::before { display: none; }
  .more-page .side a::after { content: "›"; margin-left: auto; color: var(--ink-3); font-size: 1.3rem; line-height: 1; }
  .more-page .side a:has(.n)::after { margin-left: .6rem; }
  .more-page .side .group { margin: 1.1rem .3rem .45rem; }
  .more-page .side form.me-row { display: none; }
  .more-page .side a.more-only { display: flex; }
  .more-page main { padding-top: .2rem; }
}
.morelist { padding: .3rem .9rem; }
.morelist-head { margin: 1.1rem .3rem .45rem; }
.morelist button { width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.morelist a, .morelist button { display: flex; align-items: center; gap: .75rem; min-height: 52px; text-decoration: none; font-weight: 560; border-bottom: 1px solid var(--line); }
.morelist > :last-child { border-bottom: 0; }
.morelist .grow { flex: 1; min-width: 0; }
.morelist .count { background: var(--badge); color: var(--badge-ink); border-radius: 10px; font-size: .72rem; padding: 1px 7px; font-weight: 700; }
.morelist .chev { color: var(--ink-3); font-size: 1.3rem; line-height: 1; }
.morelist .ic-tile { width: 34px; height: 34px; border-radius: 10px; }
.morelist .ic-tile .i { width: 18px; height: 18px; }
@media (min-width: 861px) { .morelist, .morelist-head { display: none; } }

/* ---------- Staff floating tab bar ---------- */
.tabs {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  background: var(--bar-bg); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-2); padding: 6px 4px;
  max-width: 616px; margin: 0 auto;
}
/* Labels: smaller on narrow phones; long ones ("Serviços disponíveis") wrap to a second line inside
   their own column instead of running into the next tab. A .lbl span gets an ellipsis instead. */
.tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: .45rem 2px .4rem; min-width: 0; min-height: 48px; font-size: clamp(.58rem, 2.8vw, .68rem); font-weight: 600; line-height: 1.2; text-align: center; overflow-wrap: anywhere; overflow: hidden; text-decoration: none; color: var(--ink-2); position: relative; border-radius: 18px; transition: color .15s; }
.tabs a .lbl { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; padding-bottom: 1px; }
.tabs .plus { overflow: visible; }
.tabs a.on { color: var(--ink); }
.tabs a.on::after { content: ""; position: absolute; bottom: 2px; width: 18px; height: 3px; border-radius: 2px; background: var(--door); }
.tabs .plus.on::after { display: none; }
.tabs .plus:active .ico { transform: scale(.94); }
.tabs .badge { position: absolute; top: 2px; left: 56%; background: var(--badge); color: var(--badge-ink); font-size: .62rem; border-radius: 8px; padding: 0 5px; font-weight: 700; box-shadow: 0 0 0 2px var(--surface); }

/* ---------- Cards & layout ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-1); margin-bottom: 1rem; position: relative; }
.card.tight { padding: .8rem .9rem; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.card.door { border-left: 4px solid var(--door); background: linear-gradient(90deg, color-mix(in oklab, var(--door) 10%, var(--surface)), var(--surface) 40%); }
.card.alert { border-left: 4px solid var(--terra); background: linear-gradient(90deg, color-mix(in oklab, var(--terra) 9%, var(--surface)), var(--surface) 40%); }
.card.ok { border-left: 4px solid var(--sage); background: linear-gradient(90deg, color-mix(in oklab, var(--sage) 12%, var(--surface)), var(--surface) 40%); }
a.card { display: block; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
a.card:active { transform: translateY(0); }
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .g2 { grid-template-columns: 1fr; } .g3, .g4 { gap: .6rem; } }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: .6rem; }
.right { margin-left: auto; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: .75rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .75rem; align-items: center; }
.list > li:last-child { border-bottom: 0; }
.list > li:first-child { padding-top: .25rem; }
.list .grow { flex: 1; min-width: 0; }
.list .title { font-weight: 620; }
.list .sub { color: var(--ink-2); font-size: .86rem; line-height: 1.45; }
.list a.grow { text-decoration: none; }
.list a.grow:hover .title { text-decoration: underline; text-decoration-color: var(--door-deep); text-underline-offset: 3px; }

/* Stat tiles */
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .95rem 1.1rem .85rem; text-decoration: none; display: block; box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--line-2); }
.kpi .n { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variation-settings: "SOFT" 40, "opsz" 72; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--ink-2); font-size: .82rem; margin-top: .4rem; }
.kpi.good::after { background: var(--sage); }
.kpi.good .n { color: var(--sage-deep); }
.kpi.warn { background: color-mix(in oklab, var(--terra) 10%, var(--surface)); border-color: color-mix(in oklab, var(--terra) 30%, var(--line)); }
.kpi.warn::after { background: var(--terra); }
.kpi.warn .n { color: var(--terra); }
.kpi.door::after { background: var(--door); }

.swatch { width: 5px; align-self: stretch; border-radius: 3px; flex: none; background: var(--door); min-height: 36px; }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 650; letter-spacing: .01em; white-space: nowrap; line-height: 1.5; background: var(--surface-2); color: var(--ink-2); border: 1px solid transparent; }
.chip.open { background: color-mix(in oklab, var(--amber) 16%, var(--surface)); color: color-mix(in oklab, var(--amber) 80%, var(--ink)); }
.chip.draft { background: var(--surface-2); color: var(--ink-3); }
.chip.assigned { background: color-mix(in oklab, var(--plum) 18%, var(--surface)); color: color-mix(in oklab, var(--plum) 75%, var(--ink)); }
.chip.accepted { background: color-mix(in oklab, var(--sky) 18%, var(--surface)); color: color-mix(in oklab, var(--sky) 75%, var(--ink)); }
.chip.in_progress { background: color-mix(in oklab, var(--door) 30%, var(--surface)); color: color-mix(in oklab, var(--door-deep) 85%, var(--ink)); }
.chip.done { background: color-mix(in oklab, var(--sage) 22%, var(--surface)); color: var(--sage-deep); }
.chip.verified { background: color-mix(in oklab, var(--sage) 36%, var(--surface)); color: var(--sage-deep); }
.chip.cancelled { background: var(--surface-2); color: var(--ink-3); text-decoration: line-through; }
/* Handled outside Workhorse (arranged by phone): grey, dashed, still on the calendar. */
.chip.outside { background: var(--surface-2); color: var(--ink-3); border: 1px dashed var(--line-2); }
.outside-note { color: var(--ink-3); font-style: italic; }
.chip.urgent, .chip.emergency { background: var(--terra); color: #fff; }
.chip.high { background: color-mix(in oklab, var(--terra) 18%, var(--surface)); color: color-mix(in oklab, var(--terra) 85%, var(--ink)); }
.chip.guest { background: color-mix(in oklab, var(--sage) 18%, var(--surface)); color: var(--sage-deep); }
.chip.ghost { background: transparent; border-color: var(--line-2); color: var(--ink-2); }

/* ---------- Buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 .94rem var(--sans); text-decoration: none; cursor: pointer;
  min-height: 44px; box-shadow: var(--shadow-1); transition: transform .15s var(--ease), box-shadow .15s, background .15s, border-color .15s;
  white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; flex-shrink: 0; overflow-wrap: break-word;   /* long Portuguese labels wrap instead of overflowing */
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-1); }
.btn.primary { background: linear-gradient(180deg, color-mix(in oklab, var(--door) 92%, white), var(--door)); border-color: var(--door-deep); color: var(--door-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 14px -4px color-mix(in oklab, var(--door-deep) 70%, transparent); }
.btn.primary:hover { background: linear-gradient(180deg, color-mix(in oklab, var(--door) 80%, white), var(--door)); }
.btn.dark { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.dark:hover { background: color-mix(in oklab, var(--ink) 88%, var(--door)); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 35%, var(--line)); }
.btn.danger:hover { background: color-mix(in oklab, var(--bad) 8%, var(--surface)); }
.btn.good { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--sage-deep) 70%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.good { color: #1B1714; } }
.btn.big { width: 100%; padding: 1rem 1.2rem; font-size: 1.06rem; min-height: 58px; border-radius: 18px; white-space: normal; line-height: 1.25; }
.btn.small { padding: .3rem .7rem; min-height: 34px; font-size: .82rem; }
/* Fingers, not mice: small buttons and text links get a 44px target on touch screens. */
@media (pointer: coarse) {
  .btn.small { min-height: 44px; padding: .4rem .85rem; }
  .linkbtn { min-height: 44px; display: inline-flex; align-items: center; }
  .list > li .linkbtn, .list > li .btn.small { flex: none; }
}
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; box-shadow: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--door-deep) 60%, transparent); text-underline-offset: 3px; cursor: pointer; font: inherit; }
.linkbtn:hover { color: var(--ink); }

label { display: block; font-weight: 620; font-size: .88rem; margin-bottom: .3rem; color: var(--ink); }
.field { margin-bottom: .95rem; }
.field .hint { font-weight: 400; color: var(--ink-3); font-size: .8rem; margin-top: .3rem; line-height: 1.4; }
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=url], input[type=search], select, textarea {
  width: 100%; max-width: 100%; padding: .68rem .85rem; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); font: 16px var(--sans);
  transition: border-color .15s, box-shadow .15s; box-shadow: inset 0 1px 2px rgba(46, 38, 31, .04);
}
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239C8F80' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.2rem; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--door-deep); box-shadow: 0 0 0 3px color-mix(in oklab, var(--door) 35%, transparent); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input[type=file] { font-size: .9rem; max-width: 100%; min-width: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--sage-deep); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; line-height: 1.4; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1rem; margin: 0 0 1rem; background: var(--surface-2); }
fieldset.plain { border: 0; padding: 0; margin: 0; background: none; min-width: 0; }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea { opacity: .7; cursor: not-allowed; }
legend { font-weight: 650; padding: 0 .4rem; font-family: var(--serif); font-size: 1rem; }
.inline-form { display: inline; }
/* Two inputs side by side (day + time, from + until): they wrap rather than squeeze. */
.pair { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pair > select, .pair > input { flex: 1 1 8rem; min-width: 7.5rem; width: auto; }
/* Narrow phones: forms go to one column, and inline "add" rows stack their boxes full width. */
@media (max-width: 520px) {
  form .grid.g3, form .grid.g4, form.grid.g3, form.grid.g4 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  main form.row:not(.tbl form):not(.filters form) > input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  main form.row:not(.tbl form) > select, main form.row:not(.tbl form) > textarea { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }
  main form.row:not(.tbl form) > .filepick { flex: 1 1 100%; }
}
/* A number with its unit after it: [ 30 ] minutes */
.unit { display: flex; align-items: center; gap: .5rem; }
.unit input { width: 6.5rem; flex: none; }
.unit span { color: var(--ink-2); font-size: .88rem; line-height: 1.25; }
details.advanced h3 { font-size: 1rem; margin: .4rem 0 .7rem; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details.card > summary { margin: -1.1rem -1.2rem; padding: 1.1rem 1.2rem; border-radius: var(--r); }
details.card[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
details.card.tight > summary { margin: -.8rem -.9rem; padding: .8rem .9rem; }
details.card > summary::after { content: "›"; float: right; color: var(--ink-3); font-size: 1.3rem; line-height: 1; transition: transform .2s var(--ease); }
details.card[open] > summary::after { transform: rotate(90deg); }

/* ---------- Flash ---------- */
.flash { padding: .8rem 1rem; border-radius: 14px; margin-bottom: 1rem; font-weight: 520; display: flex; gap: .6rem; align-items: flex-start; animation: rise .35s var(--ease); border: 1px solid transparent; }
.flash::before { font-size: 1rem; line-height: 1.4; }
.flash.good { background: color-mix(in oklab, var(--sage) 18%, var(--surface)); color: var(--sage-deep); border-color: color-mix(in oklab, var(--sage) 35%, transparent); }
.flash.good::before { content: "✓"; }
.flash.bad { background: color-mix(in oklab, var(--terra) 14%, var(--surface)); color: color-mix(in oklab, var(--terra) 85%, var(--ink)); border-color: color-mix(in oklab, var(--terra) 35%, transparent); }
.flash.bad::before { content: "!"; font-weight: 800; }
.flash.warn { background: color-mix(in oklab, var(--door) 25%, var(--surface)); color: color-mix(in oklab, var(--door-deep) 85%, var(--ink)); border-color: color-mix(in oklab, var(--door-deep) 35%, transparent); }
@keyframes rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Text-message outbox: one row per message, recipients folded inside. */
.outbox .body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); }
.outbox .acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem; flex: none; max-width: 50%; }
.outbox > li.group { display: block; }
.outbox details > summary { display: flex; align-items: center; gap: .75rem; }
.outbox details > summary::after { content: "›"; color: var(--ink-3); font-size: 1.3rem; transition: transform .2s var(--ease); }
.outbox details[open] > summary::after { transform: rotate(90deg); }
.outbox details .list { margin: .5rem 0 0 .9rem; padding-left: .8rem; border-left: 2px solid var(--line); }
@media (max-width: 560px) { .outbox > li:not(.group) { flex-wrap: wrap; } .outbox .acts { max-width: none; width: 100%; justify-content: flex-start; } }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 700; padding: .55rem .6rem; border-bottom: 1px solid var(--line-2); }
.tbl td { padding: .62rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td, .tbl tr:hover td { background: color-mix(in oklab, var(--door) 6%, transparent); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Office job page: two columns; on a narrow screen one column with the actions straight after
   "Who's doing it", before the (long) checklist. */
details.card.jc-check > summary { display: flex; align-items: center; gap: .6rem; }
details.card.jc-check > summary::after { margin-left: .2rem; }
details.card.jc-check > summary .muted { margin-left: auto; }
@media (max-width: 960px) {
  #jobgrid { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0; }
  #jobgrid > div { display: contents; }
  #jobgrid .jc-who { order: 1; } #jobgrid .jc-actions { order: 2; } #jobgrid .jc-guests { order: 3; } #jobgrid .jc-review { order: 3; } #jobgrid .jc-check { order: 4; }
  #jobgrid .jc-photos { order: 5; } #jobgrid .jc-reported { order: 6; } #jobgrid .jc-edit { order: 7; } #jobgrid .jc-time { order: 8; } #jobgrid .jc-history { order: 9; }
}
/* A file picker that looks like a button instead of the browser's "Choose Files". */
.filepick { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1px dashed var(--line-2); background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer; max-width: 100%; margin: 0; }
.filepick:hover { border-color: var(--ink-3); }
.filepick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.filepick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filepick:focus-within { outline: 3px solid color-mix(in oklab, var(--door) 70%, transparent); outline-offset: 2px; }

/* Supplies: an editable table on wide screens; each supply its own little card below 1100px. */
.supplytbl { table-layout: fixed; min-width: 900px; }
.supplytbl th.c-name { width: 21%; } .supplytbl th.c-cat { width: 11%; } .supplytbl th.c-unit { width: 8%; } .supplytbl th.c-store { width: 11%; }
.supplytbl th.c-cost { width: 8%; } .supplytbl th.c-par { width: 7%; } .supplytbl th.c-on { width: 6%; } .supplytbl th.c-go { width: 84px; }
.supplytbl td { padding: .4rem .3rem; }
.supplytbl input:not([type=checkbox]) { padding: .5rem .55rem; }
.phone-only { display: none; }
@media (min-width: 961px) { .narrow-only { display: none !important; } }
@media (max-width: 1100px) {
  .scroll-x:has(> .supplytbl) { overflow: visible; }
  .supplytbl { min-width: 0; display: block; }
  .supplytbl thead { display: none; }
  .supplytbl tbody { display: block; }
  .supplytbl tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .45rem .6rem; padding: .8rem 0; border-bottom: 1px solid var(--line); align-items: end; }
  .supplytbl tr:last-child { border-bottom: 0; }
  .supplytbl tr.newrow { background: var(--surface-2); margin: 0 -.6rem; padding: .8rem .6rem; border-radius: 12px; }
  .supplytbl td { display: block; padding: 0; border: 0; background: none !important; }
  .supplytbl td.c-name, .supplytbl td.c-url { grid-column: 1 / -1; }
  .supplytbl td.c-name input { font-weight: 620; }
  .supplytbl td[data-label]::before { content: attr(data-label); display: block; font-size: .74rem; font-weight: 650; color: var(--ink-2); margin-bottom: .2rem; }
  .supplytbl td.c-go { justify-self: end; grid-column: -2 / -1; }
  .supplytbl td.c-on:empty { display: none; }
  .phone-only { display: inline; }
}

/* Jobs list: one card per day; columns line up from day to day. */
.jobday { padding: .85rem 1rem .5rem; }
.dayhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; font-size: 1.1rem; margin: 0 0 .25rem .3rem; }
.dayhead .muted, .dayhead .faint { font: 500 .82rem var(--sans); letter-spacing: 0; }
.jobtbl { table-layout: fixed; }
.jobtbl th.c-house { width: 21%; }
.jobtbl th.c-win { width: 17%; }
.jobtbl th.c-who { width: 16%; }
.jobtbl th.c-st { width: 15%; }
.jobtbl th.c-pay { width: 8%; }
.jobtbl td { overflow-wrap: break-word; }
.jobtbl td.c-win { color: var(--ink-2); font-size: .86rem; }
.jobtbl .chip { white-space: normal; text-align: center; line-height: 1.2; }
details.filters > summary { display: flex; align-items: center; gap: .45rem; font-weight: 620; min-height: 28px; }
details.filters .row > select { width: auto; flex: 1 1 150px; }
details.filters input[type=date] { width: auto; min-width: 0; }
@media (max-width: 640px) {
  .jobday { padding: .7rem .9rem .3rem; }
  .jobtbl thead { display: none; }
  .jobtbl, .jobtbl tbody { display: block; }
  .jobtbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "job st" "house who" "win pay"; column-gap: .7rem; row-gap: .15rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
  .jobtbl tr:last-child { border-bottom: 0; }
  .jobtbl td { padding: 0; border: 0; width: auto; background: none !important; }
  .jobtbl td.c-job { grid-area: job; font-weight: 600; }
  .jobtbl td.c-st { grid-area: st; justify-self: end; }
  .jobtbl td.c-house { grid-area: house; color: var(--ink-2); font-size: .86rem; }
  .jobtbl td.c-pay { grid-area: pay; justify-self: end; font-size: .86rem; }
  .jobtbl td.c-win { grid-area: win; }
  .jobtbl td.c-who { grid-area: who; justify-self: end; font-size: .86rem; text-align: right; }
  .jobtbl td.is-empty { display: none; }
  details.filters .row > * { flex: 1 1 100%; }
  details.filters .row > .row input[type=date] { flex: 1; }
}
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Tables marked .cards turn into one small card per row on phones (labels from data-label). */
@media (max-width: 640px) {
  .scroll-x:has(> .tbl.cards) { overflow: visible; }
  .tbl.cards, .tbl.cards tbody { display: block; }
  .tbl.cards tr:has(> th) { display: none; }
  .tbl.cards tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .35rem .8rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .tbl.cards tr:last-child { border-bottom: 0; }
  .tbl.cards td { display: block; padding: 0; border: 0; text-align: left; background: none !important; font-size: .9rem; }
  .tbl.cards td:first-child, .tbl.cards td[colspan] { grid-column: 1 / -1; font-size: 1rem; }
  .tbl.cards td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .1rem; }
  .tbl.cards td:empty { display: none; }
}

/* ---------- Job screen (staff) ---------- */
.hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.15rem 1.2rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow-1); position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; right: -34px; top: -26px; width: 118px; height: 170px; border-radius: 60px 60px 8px 8px; background: linear-gradient(180deg, color-mix(in oklab, var(--door) 55%, var(--surface)), color-mix(in oklab, var(--door) 25%, var(--surface))); opacity: .55; z-index: -1; transform: rotate(8deg); }
.hero::after { content: ""; position: absolute; right: -10px; top: 0; width: 70px; height: 112px; border-radius: 36px 36px 4px 4px; border: 2px solid color-mix(in oklab, var(--door-deep) 40%, transparent); opacity: .5; z-index: -1; transform: rotate(8deg); }
.hero h1 { font-size: 1.85rem; }
.hero .when { font-size: 1rem; font-weight: 560; color: var(--ink-2); }
.stay-who { margin-top: .55rem; font-size: .92rem; display: grid; gap: .25rem; }
.stay-who .i { width: 1em; height: 1em; vertical-align: -.12em; }
.hostaway-suggest { background: var(--surface-2, #faf6ee); border: 1px dashed var(--line); border-radius: var(--r, 10px); padding: .5rem .7rem; margin-top: .4rem; font-size: .88rem; }
.hostaway-suggest p { margin: .2rem 0 .4rem; white-space: pre-line; max-height: 9rem; overflow-y: auto; }
.review { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.review:last-child { border-bottom: 0; }
.review .stars { color: var(--door-deep, #b8862b); letter-spacing: .05em; }
.review .private { color: var(--ink-2); font-size: .88rem; }
.timeline { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; margin: .9rem 0 .4rem; font-size: .82rem; color: var(--ink-2); }
.timeline b { color: var(--ink); display: block; font-size: .95rem; }
.timeline .bar { height: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; position: relative; overflow: hidden; }
.timeline .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--door-deep), var(--door)); border-radius: 4px; transition: width .4s var(--ease); }
.progress { display: block; height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--sage-deep), var(--sage)); border-radius: 6px; transition: width .4s var(--ease); }
.room { margin-bottom: 1rem; }
.room h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; margin: 0 .2rem .4rem; }
.item { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-bottom: .45rem; box-shadow: var(--shadow-1); transition: background .25s, border-color .25s, transform .15s var(--ease); }
.item.done { background: color-mix(in oklab, var(--sage) 12%, var(--surface)); border-color: color-mix(in oklab, var(--sage) 35%, var(--line)); box-shadow: none; }
.item.done .label { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--sage) 60%, transparent); }
.item .label .req, .item .label .faint { display: inline-block; text-decoration: none; }
.item.guest { border-color: color-mix(in oklab, var(--terra) 50%, var(--line)); background: color-mix(in oklab, var(--terra) 7%, var(--surface)); }
.item .tick { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; flex: none; padding: 0; color: transparent; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.item .tick:active { transform: scale(.88); }
.item.done .tick { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; animation: pop .35s var(--ease); }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.item .label { flex: 1; min-width: 0; line-height: 1.35; }
.item .cam { position: relative; overflow: hidden; flex: none; display: inline-block; }
.item .cam input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.item .cam .btn { pointer-events: none; }
.item .req { font-size: .7rem; color: var(--terra); font-weight: 700; letter-spacing: .02em; }
.code-box { font-family: var(--mono); font-size: 1.7rem; letter-spacing: .25em; background: var(--ink); color: var(--door); padding: .6rem 1.1rem .6rem 1.35rem; border-radius: 14px; display: inline-block; box-shadow: var(--shadow-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .code-box { background: #0F0C0A; } }
.sticky-action { position: sticky; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 10; padding: .5rem 0; }
.sticky-action .btn.big { box-shadow: var(--shadow-3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sticky-action a.btn.big { background: color-mix(in oklab, var(--surface) 92%, transparent); text-decoration: none; }
.tracking { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--sage-deep); font-weight: 650; }
.tracking::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--sage) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.thumbs { display: flex; flex-wrap: wrap; gap: .45rem; }
.thumbs img { width: 78px; height: 78px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .2s var(--ease); }
.thumbs a:hover img { transform: scale(1.04); }
.thumbs.big img { width: 140px; height: 140px; }

/* ---------- Calendar (office) ---------- */
.cal { --house-w: 170px; grid-template-columns: var(--house-w) repeat(var(--days, 14), minmax(92px, 1fr)); display: grid; font-size: .78rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; min-width: 900px; box-shadow: var(--shadow-1); }
.cal .h { background: var(--surface-2); padding: .45rem .3rem; font-weight: 700; text-align: center; border-bottom: 1px solid var(--line-2); color: var(--ink-2); line-height: 1.2; }
.cal .h.today { background: color-mix(in oklab, var(--door) 35%, var(--surface)); color: var(--ink); }
.cal .h.we { background: color-mix(in oklab, var(--bg-2) 70%, var(--surface-2)); }
.cal .p { padding: .5rem .7rem; font-weight: 620; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-2); display: flex; align-items: center; gap: .5rem; background: var(--surface); position: sticky; left: 0; z-index: 1; }
.cal .p a { text-decoration: none; }
.cal .c { border-bottom: 1px solid var(--line); border-right: 1px solid color-mix(in oklab, var(--line) 55%, transparent); min-height: 56px; padding: 2px; position: relative; }
.cal .c.today { background: color-mix(in oklab, var(--door) 9%, transparent); }
.cal .stay { position: absolute; top: 5px; height: 13px; background: color-mix(in oklab, var(--sage) 45%, var(--surface)); }
.cal .stay.in { left: 55%; right: 0; border-radius: 7px 0 0 7px; }
.cal .stay.mid { left: 0; right: 0; }
.cal .stay.out { left: 0; right: 55%; border-radius: 0 7px 7px 0; }
.cal .stay.block { background: repeating-linear-gradient(45deg, var(--line-2), var(--line-2) 4px, var(--surface-2) 4px, var(--surface-2) 8px); }
.cal .jobs { position: relative; margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
.cal .jobs a { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 2px 6px 3px; border-radius: 7px; text-decoration: none; font-size: .7rem; font-weight: 650; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.cal .jobs a b, .cal .jobs a span { display: block; overflow: hidden; text-overflow: ellipsis; }
.cal .jobs a b { font-weight: 700; }
.cal .jobs a span { font-weight: 550; opacity: .9; }
.cal .jobs a span.nobody { font-style: italic; }
.cal .jobs a .i { width: 11px; height: 11px; vertical-align: -1px; }
.scroll-cal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 860px) { .cal { --house-w: 116px; min-width: 0; } .cal .p { padding: .45rem .5rem; font-size: .74rem; } }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; font-size: .8rem; color: var(--ink-2); margin: 0 0 .8rem; }
.cal-legend > span:not(.chip) { display: inline-flex; align-items: center; gap: .35rem; }
.cal-legend .stay-key { display: inline-block; width: 26px; height: 11px; border-radius: 6px; background: color-mix(in oklab, var(--sage) 45%, var(--surface)); }
.cal-legend .stay-key.block { background: repeating-linear-gradient(45deg, var(--line-2), var(--line-2) 4px, var(--surface-2) 4px, var(--surface-2) 8px); }
/* Guests tapped "We've arrived": the start of their stay in a deeper sage. */
.cal .stay.in.arrived, .cal-legend .stay-key.arrived { background: color-mix(in oklab, var(--sage-deep) 75%, var(--surface)); }

/* ---------- Guest page ---------- */
.guest-page { max-width: 560px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.guest-page .welcome { text-align: center; padding: 1.6rem 1rem 1.2rem; }
.guest-page .welcome .mark { width: 72px; height: 92px; filter: drop-shadow(0 6px 10px rgba(46, 38, 31, .2)); }
.guest-page .welcome h1 { font-size: 2.3rem; margin-top: .7rem; font-variation-settings: "SOFT" 100, "opsz" 72; }
.guest-page details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: .8rem; box-shadow: var(--shadow-1); transition: box-shadow .2s; }
.guest-page details[open] { box-shadow: var(--shadow-2); }
.guest-page summary { padding: 1.05rem 1.1rem; font-weight: 650; cursor: pointer; list-style: none; display: flex; align-items: center; gap: .7rem; font-size: 1.02rem; }
.guest-page summary::-webkit-details-marker { display: none; }

.guest-page summary::after { content: "›"; margin-left: auto; color: var(--ink-3); font-size: 1.4rem; transition: transform .2s var(--ease); }
.guest-page details[open] summary::after { transform: rotate(90deg); }
.guest-page details > div { padding: 0 1.1rem 1.1rem; }

/* ---------- Auth pages ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.auth .panel { background: var(--ink); color: var(--bg); padding: calc(3rem + env(safe-area-inset-top)) 3rem 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth .panel::before { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 620px; border-radius: 210px 210px 20px 20px; background: linear-gradient(180deg, var(--door), var(--door-deep)); opacity: .9; transform: rotate(-6deg); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .5); }
.auth .panel::after { content: ""; position: absolute; right: -60px; bottom: -120px; width: 300px; height: 480px; border-radius: 150px 150px 10px 10px; border: 2px solid rgba(58, 42, 8, .35); transform: rotate(-6deg); }
.auth .panel .brand .name, .auth .panel .brand .org { color: var(--bg); }
.auth .panel .brand .org { white-space: normal; max-width: none; }
.auth .panel h2 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); font-weight: 500; line-height: 1.15; max-width: 14ch; position: relative; z-index: 1; font-variation-settings: "SOFT" 100, "opsz" 72; }
.auth .panel p { color: color-mix(in oklab, var(--bg) 70%, transparent); max-width: 34ch; position: relative; z-index: 1; }
.auth .form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.2rem; }
.auth .form > * { width: 100%; max-width: 440px; }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth .panel { padding: calc(2rem + env(safe-area-inset-top)) max(1.4rem, env(safe-area-inset-right)) 5rem max(1.4rem, env(safe-area-inset-left)); min-height: 0; } .auth .panel::before { width: 220px; height: 300px; right: -70px; bottom: -120px; } .auth .panel::after { display: none; } .auth .form { padding: 1.5rem 1rem 3rem; margin-top: -2.5rem; } }

/* ---------- Misc ---------- */
.empty { text-align: center; padding: 2.2rem 1rem; color: var(--ink-2); }
.empty .big { font-size: 2.6rem; margin-bottom: .3rem; filter: saturate(.85); }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.pagehead h1 { margin: 0; }
.tabsbar { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabsbar a { padding: .38rem .85rem; border-radius: 999px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); font-size: .86rem; font-weight: 560; color: var(--ink-2); transition: background .15s, color .15s; }
.tabsbar a:hover { color: var(--ink); border-color: var(--line-2); }
.tabsbar a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Kind of work on Jobs (cleaning / maintenance / grounds): a segmented bar above the status tabs. */
.areabar { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: .7rem; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); border-radius: 12px; }
.areabar a { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .9rem; border-radius: 9px; text-decoration: none; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.areabar a:hover { color: var(--ink); }
.areabar a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--line); }
.areabar svg { width: 16px; height: 16px; }
.asks { margin: .4rem 0 .9rem; padding: .7rem .8rem; border-radius: 10px; background: var(--surface-2, rgba(0,0,0,.03)); border: 1px dashed var(--line-2, var(--line)); }
.ask-row { align-items: center; gap: .6rem; flex-wrap: wrap; }
.cal-hint { margin: -.2rem 0 .8rem; font-size: .88rem; }
@media print { .areabar, .cal-hint { display: none !important; } }
.weather { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; }
.weather::-webkit-scrollbar { display: none; }
.weather .d { flex: none; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .45rem .75rem; font-size: .8rem; min-width: 78px; color: var(--ink-2); box-shadow: var(--shadow-1); }
.weather .d.snow { background: color-mix(in oklab, var(--sky) 14%, var(--surface)); border-color: color-mix(in oklab, var(--sky) 35%, var(--line)); }
.weather .d b { display: block; font-size: 1.25rem; margin: .1rem 0; }
.qr-sign { max-width: 640px; margin: 0 auto; text-align: center; background: #fff; color: #2E261F; padding: 2.4rem 2rem; border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.qr-sign img { width: 300px; height: 300px; border-radius: 16px; }
.who { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #fff; background: var(--sky); flex: none; letter-spacing: .02em; box-shadow: 0 0 0 2px var(--surface); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; padding-top: .4rem; }
.bars i { flex: 1; background: linear-gradient(180deg, var(--door), var(--door-deep)); border-radius: 4px 4px 2px 2px; min-height: 3px; transition: opacity .15s; }
.bars i:hover { opacity: .75; }
.copy { cursor: pointer; }
.hide { display: none !important; }
.eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--ink-3); }
.reveal { animation: rise .4s var(--ease) both; }

/* One person's pay receipt (admin/pay.ejs). */
.receipt-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; margin-bottom: .4rem; border-bottom: 1px dashed var(--line-2); }
.weeknav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 .8rem; }
.weeknav strong { text-align: center; }
.receipt-lines { list-style: none; margin: 0; padding: 0; }
.receipt-lines li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.receipt-lines li:last-child { border-bottom: 0; }
.receipt-lines .what { min-width: 0; }
.receipt-lines .sub { font-size: .82rem; color: var(--ink-3); margin-top: .15rem; }
.receipt-lines .amt { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt-lines .sub.paid { color: var(--sage-deep); font-weight: 500; }
.receipt-total { margin-top: .8rem; border-top: 1px dashed var(--line-2); padding-top: .6rem; display: grid; gap: .3rem; }
.receipt-total > div { display: flex; justify-content: space-between; gap: 1rem; }
.receipt-total .owed { font-size: 1.15rem; padding-top: .3rem; }
.receipt-total .owed strong { font-family: var(--serif); font-size: 1.4rem; }

@media print {
  .topbar, .side, .tabs, .no-print, .btn, .sticky-action { display: none !important; }
  body { background: #fff; color: #000; }
  .admin { display: block; }
  main { padding: 0; max-width: none; }
  .card, .kpi { box-shadow: none; break-inside: avoid; }
}

/* Browser autofill paints inputs pale blue; keep them on brand. */
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s; }

/* Inside the iPhone app (the shell adds .in-app): hide web-only install and push tips. */
.in-app .web-only { display: none !important; }

/* ---------- Icons (Lucide, inline SVG) ---------- */
.i { width: 1.15em; height: 1.15em; stroke-width: 1.85; vertical-align: -0.2em; flex: none; display: inline-block; }
.btn .i { width: 1.2em; height: 1.2em; }
.btn.small .i { width: 1.05em; height: 1.05em; }
.chip .i { width: 1.05em; height: 1.05em; stroke-width: 2.2; vertical-align: -0.18em; }
.bell .i { width: 22px; height: 22px; }
.side a > span:first-child .i { width: 17px; height: 17px; stroke-width: 2; }
.side a.on > span:first-child { color: var(--door-ink); }
.tabs a .i { width: 24px; height: 24px; stroke-width: 1.8; }
.tabs a .ico { display: inline-flex; transition: transform .25s var(--ease); }
.tabs a.on .ico { transform: translateY(-2px) scale(1.06); }
.tabs a.on .i { stroke-width: 2.2; color: var(--door-deep); }
.tabs .plus .ico { background: var(--door); color: var(--door-ink); width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: -28px; box-shadow: 0 6px 16px -4px color-mix(in oklab, var(--door-deep) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.5); border: 3px solid var(--surface); }
.tabs .plus .i { width: 26px; height: 26px; stroke-width: 2.4; color: var(--door-ink); }
.empty .big .i { width: 44px; height: 44px; stroke-width: 1.4; color: var(--door-deep); }
.empty .big { filter: none; }
.ic-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in oklab, var(--door) 28%, var(--surface)); color: color-mix(in oklab, var(--door-deep) 80%, var(--ink)); flex: none; }
.ic-tile .i { width: 22px; height: 22px; }
.sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--line-2); box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 0%, transparent); }
.sdot.red { background: var(--terra); box-shadow: 0 0 0 3px color-mix(in oklab, var(--terra) 22%, transparent); }
.sdot.amber { background: var(--door-deep); box-shadow: 0 0 0 3px color-mix(in oklab, var(--door) 30%, transparent); }
.sdot.green { background: var(--sage); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sage) 25%, transparent); }
.sdot.calm { background: var(--line-2); }
.meta { display: flex; align-items: flex-start; gap: .5rem; }
.meta > .i { margin-top: .15em; color: var(--ink-3); }
.flag { color: var(--terra); }
.item .cam .btn { padding: 0; width: 44px; height: 44px; min-height: 44px; border-radius: 50%; }
.item .cam .btn .i { width: 18px; height: 18px; }
.item .req .i { width: 12px; height: 12px; stroke-width: 2.4; vertical-align: -1px; }
.weather .d b .i { width: 24px; height: 24px; color: var(--door-deep); }
.weather .d.snow b .i { color: var(--sky); }

/* Live-refreshed wrappers on the job page must not box in the sticky Finish bar. */
#live-finish, #live-progress { display: contents; }
/* "Location on" only once a location has actually been sent (app.js sets data-on). */
.tracking:not([data-on]) { color: var(--ink-3); }
.tracking:not([data-on])::before { background: var(--ink-3); animation: none; }
/* Large text (iOS text size / 150% zoom) and small phones: chips wrap, the guest-out/next-guest
   line stacks, and the header subtitle steps aside. */
.chip { max-width: 100%; }
@media (max-width: 380px) {
  .chip { white-space: normal; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline .bar { grid-column: 1 / -1; grid-row: 2; }
  .brand .org { display: none; }
}
/* Typing on a phone: the floating tab bar and sticky bars step aside so they never sit on top
   of the form above the keyboard. */
@media (pointer: coarse) {
  body:has(input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, textarea:focus, select:focus) .tabs,
  body:has(input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, textarea:focus, select:focus) .sticky-action { display: none; }
}
/* Office pages on a phone: room under the last card for the tab bar and the home indicator. */
@media (max-width: 860px) {
  body:has(.office-tabs) main { padding-bottom: calc(7.5rem + env(safe-area-inset-bottom)); }
}

/* ---- Round 3 cleaner ---------------------------------------------------------------------------- */
/* Big text on a small phone: the Finish bar stays one slim line (label shortens, chip stays whole). */
.sticky-action a.btn.big { flex-wrap: nowrap; gap: .5rem; }
.sticky-action a.btn.big > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-action a.btn.big > .chip { flex: none; }
.sticky-action .btn.big { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* So narrow that tab words would be cut ("Probl…", happens with large text on an SE): icons only,
   the words stay for screen readers. */
@media (max-width: 300px) {
  .tabs a .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabs a { justify-content: center; }
}
/* Me: the three numbers stay on one row on small phones (no lone tile on a second row). */
.grid.kpis3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.kpis3 .kpi .n { font-size: clamp(1.1rem, 6vw, 1.6rem); }

/* ---- Round 3 office ----------------------------------------------------------------------------- */
/* The owner asked to close the business: a slim banner on every office page, with "Keep it". */
.closure-banner { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem .8rem; margin-bottom: 1rem; border-radius: 14px; font-size: .9rem;
  background: color-mix(in oklab, var(--terra) 12%, var(--surface)); border: 1px solid color-mix(in oklab, var(--terra) 35%, transparent); color: var(--ink); }
.closure-banner > .i { color: var(--terra); flex: none; }
.closure-banner .grow { flex: 1 1 0; min-width: 8rem; }
.closure-banner form { margin: 0; flex: none; }
/* Search: a box at the top of the office menu (also on the phone's More page), and on /admin/search. */
.searchbox { position: relative; display: flex; align-items: center; margin: 0 0 .8rem; }
.searchbox > .i { position: absolute; left: .7rem; width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; }
.searchbox input[type=search] { width: 100%; padding-left: 2.2rem; min-height: 42px; border-radius: 999px; }
.side .searchbox { margin: .2rem .2rem .6rem; }
.page-search .searchbox { max-width: 560px; }
@media (min-width: 861px) { .page-search { display: none; } }
/* Reports: what's owed for the days shown, and "Mark this period paid". */
.card.paybar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .8rem 1rem; }
.card.paybar .grow { flex: 1 1 16rem; }
.card.paybar form { margin: 0; }
/* Small keys under a heading ("📷 = needs a photo"). */
.legend-line { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; font-size: .85rem; color: var(--ink-2); margin: .2rem 0 .6rem; }
.legend-line > span { display: inline-flex; align-items: center; gap: .3rem; }
/* After adding a house. */
.nextsteps ol { margin: .2rem 0 0; padding-left: 1.3rem; line-height: 1.75; }
/* Seasonal: "Per house (15)" looks like something to tap. */
details.perhouse { margin-top: .7rem; }
details.perhouse > summary { display: flex; align-items: center; gap: .45rem; min-height: 44px; padding: .2rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-weight: 600; font-size: .92rem; }
details.perhouse > summary .faint { font-weight: 400; font-size: .82rem; }
@media (max-width: 600px) { details.perhouse > summary .faint { display: none; } }
details.perhouse > summary::after { content: "›"; margin-left: auto; color: var(--ink-3); font-size: 1.3rem; line-height: 1; transition: transform .2s var(--ease); }
details.perhouse[open] > summary::after { transform: rotate(90deg); }
/* Calendar key: a fold on a phone (open by default on wide screens). */
.cal-legend-fold > summary { font-size: .85rem; color: var(--ink-2); margin-bottom: .5rem; display: inline-flex; align-items: center; gap: .3rem; }
.cal-legend-fold > summary::after { content: "›"; color: var(--ink-3); font-size: 1.15rem; line-height: 1; transition: transform .2s var(--ease); }
.cal-legend-fold[open] > summary::after { transform: rotate(90deg); }
@media (min-width: 700px) { .cal-legend-fold > summary { display: none; } }
/* Seasonal per-house and the shopping list: one small card per row on a phone, buttons on their
   own line, nothing cut off at the right. */
@media (max-width: 600px) {
  .schedtbl, .schedtbl tbody, .shoptbl, .shoptbl tbody { display: block; }
  .schedtbl tr:has(> th), .shoptbl tr:has(> th) { display: none; }
  .schedtbl tr, .shoptbl tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .schedtbl tr:last-child, .shoptbl tr:last-child { border-bottom: 0; }
  .schedtbl td, .shoptbl td { display: block; padding: 0; border: 0; text-align: left; background: none !important; }
  .schedtbl td.c-house, .schedtbl td.c-acts, .shoptbl td.c-houses, .shoptbl td.c-acts { grid-column: 1 / -1; }
  .shoptbl tr { grid-template-columns: minmax(0, 1fr) auto; }
  .shoptbl td.c-total { justify-self: end; text-align: right; white-space: nowrap; }
  .shoptbl td.c-total::before { display: none !important; }
  .schedtbl td.c-house { font-weight: 650; }
  .schedtbl td[data-label]::before, .shoptbl td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .1rem; }
  .schedtbl td form.row, .shoptbl td form.row { flex-wrap: wrap; }
}
/* Team list on a phone: two short lines a person (name and role; what they do, where they are now,
   how to reach them). */
@media (max-width: 640px) {
  .tbl.cards.teamtbl tr { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; padding: .55rem 0; }
  .tbl.cards.teamtbl td[data-label]::before { display: none; }
  .tbl.cards.teamtbl tr:has(> th) { display: none; }
  .tbl.cards.teamtbl td { font-size: .8rem; color: var(--ink-2); }
  .tbl.cards.teamtbl td:nth-child(1) { flex: 1 1 100%; font-size: .98rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tbl.cards.teamtbl td:nth-child(1) br { display: none; }
  .tbl.cards.teamtbl td:nth-child(1) .faint::before { content: " · "; }
  .tbl.cards.teamtbl td:nth-child(2) .chip { padding: 0 6px; font-size: .7rem; }
  .tbl.cards.teamtbl td:nth-child(4), .tbl.cards.teamtbl td:nth-child(5) { display: none; }
  .tbl.cards.teamtbl td:nth-child(6) { margin-left: auto; }
  .tbl.cards.teamtbl td:nth-child(3):has(> .faint:only-child) { display: none; }   /* just "seen 5 min ago" */
}
/* In the iPhone app: nothing scrolls visibly under the clock, and the page fades out under the
   floating tab bar instead of showing half-cut lines next to the home indicator. */
html.in-app body:is(.staff, .office)::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--bg); z-index: 60; pointer-events: none; }
@media (max-width: 899px) {
  html.in-app body:is(.staff, .office)::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(28px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 40%, transparent); z-index: 40; pointer-events: none; }
}
/* The finish bar sits on a soft backdrop so the list it points to doesn't show through around it. */
.sticky-action { background: linear-gradient(to top, var(--bg) 55%, color-mix(in oklab, var(--bg) 0%, transparent)); margin: 0 -1rem; padding: .6rem 1rem .5rem; }

/* ---- Round 4 office on a phone ------------------------------------------------------------------ */
/* "90% of what I do in management is on my phone." (Heather, 27 Oct 2026) */
/* Fingers, not mice: fields, filter tabs, small link buttons and color swatches are 44px. */
@media (max-width: 860px), (pointer: coarse) {
  input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date],
  input[type=time], input[type=datetime-local], input[type=url], input[type=search], select { min-height: 44px; }
  .tabsbar a { display: inline-flex; align-items: center; min-height: 44px; }
  .btn.small { min-height: 44px; padding: .4rem .85rem; }
  .linkbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .cal-legend-fold > summary, details.filters > summary { min-height: 44px; }
  .colorpick { min-height: 44px; min-width: 44px; justify-content: center; }
  .brand { min-height: 44px; }
  /* A row in a list is a target as tall as the row, not just its line of text. */
  .list > li > a.grow { padding-block: .6rem; margin-block: -.6rem; }
  /* Tick boxes: the whole label is the target, at least a finger high. */
  .check { min-height: 44px; padding-block: .6rem; }
  .check input { margin-top: 0; }
  /* Calendar: each job chip is a finger high. */
  .cal .jobs a { min-height: 44px; justify-content: center; }
}
/* Big text (iOS text size up to 160%) in the top bar: the name shortens instead of running under
   the buttons. */
.brand > span:last-child { min-width: 0; }
.brand .name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
main code { overflow-wrap: anywhere; }
@media (max-width: 860px) { .wide-only { display: none !important; } }
@media (max-width: 640px) {
  /* Number tiles: smaller, so the first screen shows what needs doing, not four big numbers. */
  .kpi { padding: .7rem .85rem .7rem; }
  .kpi .n { font-size: 1.7rem; }
  .kpi .l { font-size: .78rem; margin-top: .3rem; }
  .grid.g4 { gap: .6rem; }
  /* A status chip at the end of a list row wraps instead of squeezing the title into a column. */
  .list > li > .chip { white-space: normal; max-width: 42%; text-align: center; line-height: 1.25; }
  /* Issues: the status goes under the title, so the title gets the whole width. */
  .list.issuelist > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; row-gap: .35rem; align-items: start; }
  .list.issuelist > li > .chip { grid-column: 2; justify-self: start; max-width: 100%; text-align: left; }
  /* Label-and-value tables as cards: three to a row, not two. */
  .tbl.cards tr { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
/* Today on a phone: "Needs you" first, then the board, who's on the job, arrivals, the week. */
@media (max-width: 960px) {
  #todaygrid { display: flex !important; flex-direction: column; gap: 0; }
  #todaygrid > div { display: contents; }
  #todaygrid .t-needs { order: 1; } #todaygrid .t-board { order: 2; } #todaygrid .t-live { order: 3; }
  #todaygrid .t-stays { order: 4; margin-bottom: 1rem; } #todaygrid .t-week { order: 5; }
  /* An issue: what to do about it before the details and photos. */
  .issuegrid { display: flex; flex-direction: column; gap: 0; }
  .issuegrid > div { display: contents; }
  .issuegrid .i-act { order: 1; } .issuegrid .i-details { order: 2; } .issuegrid .i-history { order: 3; }
}
/* A house's stays: "edit" opens the form full width under the stay, not off the right edge. */
.list.stays > li { flex-wrap: wrap; }
.list.stays > li > details[open] { flex: 1 1 100%; }
.list.stays > li > details[open] > form { min-width: 0 !important; }
/* Reports: from – to on one line on a phone, "Show" under them. */
@media (max-width: 480px) {
  main form.daterange { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; }
  main form.daterange > input { width: 100% !important; min-width: 0 !important; }
  main form.daterange > .btn { grid-column: 1 / -1; justify-self: start; }
}
/* More (phones): tiles, two to a row, so every page fits on one screen; the four pages already in
   the bottom bar are left out. */
@media (max-width: 860px) {
  .more-page .side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .5rem; align-content: start; }
  .more-page .side > .searchbox, .more-page .side > .group, .more-page .side > form { grid-column: 1 / -1; }
  .more-page .side a.in-tabs { display: none; }
  .more-page .side a { min-height: 56px; margin-bottom: .5rem; padding: .55rem .6rem; gap: .5rem; font-size: .95rem; line-height: 1.2; overflow-wrap: anywhere; }
  .more-page .side a::after { display: none; }
  .more-page .side a .n { flex: none; }
}
@media (max-width: 330px) { .more-page .side { grid-template-columns: 1fr; } }

/* "Sign in with Face ID next time?" (partials/passkey_offer.ejs) */
.pk-offer { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; margin-bottom: 1rem; border-radius: var(--r);
  background: color-mix(in oklab, var(--door) 14%, var(--surface)); border: 1px solid color-mix(in oklab, var(--door-deep) 30%, var(--line)); box-shadow: var(--shadow-1); animation: rise .35s var(--ease); }
.pk-offer[hidden] { display: none; }
.pk-offer .pk-body { flex: 1; min-width: 0; }
.pk-offer h2 { font-size: 1.12rem; margin: .15rem 0 .25rem; }
.pk-offer p { margin: 0 0 .6rem; font-size: .9rem; }
.pk-offer .pk-done { margin: 0; color: var(--sage-deep); font-weight: 600; }
/* Sign-in page: "Forgot your password?" under the password box. */
.field a.forgot { display: flex; align-items: center; justify-content: flex-end; width: max-content; min-height: 44px; margin: 0 0 -.6rem auto; font-size: .88rem; color: var(--ink-2); }
/* "Forgot your password?" page. */
.signin-help h2 { display: flex; align-items: center; gap: .45rem; font-size: 1.05rem; margin: 1.3rem 0 .35rem; }
.signin-help ul { margin: 0 0 .6rem; padding-left: 1.15rem; }
.signin-help li { margin-bottom: .45rem; }
.signin-help .tip { display: flex; gap: .55rem; align-items: flex-start; padding: .75rem .85rem; margin: 1rem 0 1.1rem; border-radius: 12px; background: var(--surface-2); font-size: .9rem; }
.signin-help .tip > .i { margin-top: .15em; color: var(--door-deep); }
/* A person's page: "Signing in" facts and recent trouble. */
.list.facts > li { padding: .5rem 0; flex-wrap: wrap; gap: .1rem .75rem; }
.list.facts > li > .muted { text-align: right; font-size: .9rem; margin-left: auto; }
.list.trouble > li { align-items: flex-start; }
.list.trouble .sdot { margin-top: .45rem; }

/* "Where's everyone" (admin/map.ejs, js/map.js). Full width on a phone, the list underneath. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.map-when { align-items: center; }
.map-when .btn .i { width: 1em; height: 1em; vertical-align: -0.15em; }
.map-day { gap: .4rem; flex-wrap: nowrap; }
.map-day input[type=date] { width: auto; min-height: 38px; padding: .3rem .5rem; }
.whmap-wrap { margin: 0 0 .5rem; }
.whmap { height: min(56vh, 460px); min-height: 280px; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow-1); background: var(--bg-2); z-index: 0; }
.whmap[hidden] { display: none; }
.whmap-fallback { display: flex; gap: .4rem; align-items: center; padding: .8rem 1rem; border-radius: var(--r); background: var(--surface-2); }
.whmap-fallback[hidden] { display: none; }
.map-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: var(--ink-2); margin: 0 0 .6rem; }
.map-legend[hidden] { display: none; }
.map-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.map-legend .dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); }
.map-legend .dot.person { border-radius: 50%; background: var(--ink); }
.map-legend .dot.s-in { border-radius: 50%; background: var(--sage-deep); }
.map-legend .dot.s-out { border-radius: 50%; background: var(--door-deep); }
.map-legend .line { width: 18px; height: 3px; border-radius: 2px; background: var(--sky); display: inline-block; }
.map-rule { font-size: .84rem; display: flex; gap: .45rem; align-items: flex-start; margin: 0 0 1rem; }
.map-rule .i { flex: none; margin-top: .15em; color: var(--sage-deep); }
.map-count { font: 500 .9rem var(--sans); }
.map-updated { font-size: .8rem; margin: -.3rem 0 1rem; }
.map-houses .title { text-decoration: none; color: var(--ink); }
.map-houses .chip { margin-left: .25rem; vertical-align: .1em; }
.map-job { display: block; text-decoration: none; }
.map-job:hover { text-decoration: underline; }
.map-people .who.away { background: var(--terra); }
.map-people .who, .map-visits .who { background: var(--ink-2); }
.map-focus { display: none; flex: none; min-width: 44px; min-height: 44px; justify-content: center; }
.map-ready .map-focus { display: inline-flex; }
/* States: not started (sky), in progress (door yellow), done (sage), running late (terra). */
.s-waiting { --st: var(--sky); } .s-going { --st: var(--door-deep); } .s-done { --st: var(--sage); } .s-late { --st: var(--terra); }
.swatch.s-waiting, .swatch.s-going, .swatch.s-done, .swatch.s-late, .map-legend .dot.s-waiting, .map-legend .dot.s-going, .map-legend .dot.s-done, .map-legend .dot.s-late { background: var(--st); }
.chip.map-waiting { background: color-mix(in oklab, var(--sky) 18%, var(--surface)); color: color-mix(in oklab, var(--sky) 75%, var(--ink)); }
.chip.map-going { background: color-mix(in oklab, var(--door) 30%, var(--surface)); color: color-mix(in oklab, var(--door-deep) 85%, var(--ink)); }
.chip.map-done { background: color-mix(in oklab, var(--sage) 22%, var(--surface)); color: var(--sage-deep); }
.chip.map-late { background: color-mix(in oklab, var(--terra) 20%, var(--surface)); color: color-mix(in oklab, var(--terra) 85%, var(--ink)); }
/* Pins (Leaflet divIcons). */
.leaflet-container { font: inherit; }
.leaflet-container a { color: var(--ink); }
.leaflet-marker-icon.pin { background: none; border: 0; box-sizing: border-box; }
.leaflet-marker-icon.pin > span { display: block; line-height: 1; text-align: center; }
.leaflet-marker-icon.pin-house { display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--st, var(--door)); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.leaflet-marker-icon.pin-house svg { width: 17px; height: 17px; fill: #fff; }
.leaflet-marker-icon.pin-person { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #2E261F; color: #fff; font: 700 12px/1 var(--sans); letter-spacing: .02em;
  border: 3px solid var(--sage); box-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
.leaflet-marker-icon.pin-person.away { border-color: var(--terra); }
.leaflet-marker-icon.pin-person.contractor { border-style: dashed; }
.leaflet-marker-icon.pin-visit { display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font: 700 10px/1 var(--sans); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.leaflet-marker-icon.pin-visit.s-in { background: var(--sage-deep); }
.leaflet-marker-icon.pin-visit.s-out { background: var(--door-deep); color: #2A1E05; }
path.trail { stroke: var(--sky); }
.mpop { font-size: .9rem; line-height: 1.45; min-width: 180px; }
.mpop > strong { font-size: 1rem; }
.mpop-sub { color: #5E5246; font-size: .84rem; }
.mpop ul { margin: .3rem 0 0; padding-left: 1rem; }
.mpop a { font-weight: 600; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
.leaflet-popup-content-wrapper .mpop-sub { color: var(--ink-2); }
@media (max-width: 860px) {
  /* Edge to edge on a phone: the map is the page. */
  .whmap-wrap { margin-inline: calc(-1 * max(1rem, env(safe-area-inset-left))) calc(-1 * max(1rem, env(safe-area-inset-right))); }
  .whmap { border-radius: 0; border-left: 0; border-right: 0; height: min(52vh, 420px); }
}

/* ---- Round 5: the office calendar on a phone ---------------------------------------------------- */
/* Below 860px the two-week grid showed two days at a time; the week comes as a list instead
   (views/admin/_agenda.ejs). Printing always gets the grid. */
.cal-agenda { display: none; }
@media screen and (max-width: 860px) {
  .cal-agenda { display: block; }
  .scroll-cal, .cal-legend-fold, .cal-loose { display: none; }
}
@media print { .cal-agenda { display: none !important; } }
.agenda-day { padding: .75rem 1rem .4rem; }
.agenda-head { display: flex; margin: 0; font-size: 1.25rem; }
.agenda-head a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; min-height: 44px; padding-top: .35rem; text-decoration: none; }
.agenda-head .muted { font: 500 .85rem var(--sans); }
.agenda-sum { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .5rem; }
.agenda-sum:empty { display: none; }
.agenda-none { margin: 0 0 .5rem; }
.agenda-list > li.agenda-house { align-items: flex-start; padding: .35rem 0 .6rem; }
.agenda-house .grow { min-width: 0; }
.agenda-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; font-weight: 650; font-size: 1.02rem; }
.agenda-name a, .agenda-name > span:first-child { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.agenda-flow { display: flex; flex-wrap: wrap; gap: 0 .4rem; margin: -.35rem 0 .35rem; }
.agenda-flow b { color: var(--ink); font-weight: 650; }
.agenda-gap { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .2rem 0 .35rem; padding: .45rem .6rem; border-radius: 12px; font-size: .88rem; font-weight: 600;
  background: color-mix(in oklab, var(--terra) 10%, var(--surface)); border: 1px solid color-mix(in oklab, var(--terra) 40%, var(--line)); color: color-mix(in oklab, var(--terra) 85%, var(--ink)); }
.agenda-gap > span { flex: 1 1 10rem; min-width: 0; }
.agenda-gap .btn { color: var(--ink); }
.agenda-jobs { list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.agenda-jobs > li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.agenda-job { flex: 1 1 13rem; min-width: 0; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; padding: .35rem .65rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; font-size: .92rem; transition: border-color .15s; }
.agenda-job:hover { border-color: var(--line-2); }
.agenda-job .aj-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.agenda-job .aj-main > .i { color: var(--ink-2); margin-right: .2rem; }
.agenda-job .aj-what { color: var(--ink-2); }
.agenda-job .aj-who { font-weight: 620; }
.agenda-job .aj-nobody { font-weight: 700; color: color-mix(in oklab, var(--terra) 85%, var(--ink)); }
.agenda-job .chip { margin-left: auto; white-space: normal; text-align: center; line-height: 1.25; }
.agenda-jobs > li.nobody .agenda-job { background: color-mix(in oklab, var(--terra) 9%, var(--surface)); border-color: color-mix(in oklab, var(--terra) 45%, var(--line)); }
.agenda-jobs > li > .btn { flex: none; }
/* The week at a glance, above the days: turnovers a day and how many need someone. */
.agenda-week { display: flex; gap: .45rem; overflow-x: auto; margin: 0 0 1rem; padding: 2px 2px .3rem; scrollbar-width: none; }
.agenda-week::-webkit-scrollbar { display: none; }
.agenda-week a { flex: 1 0 4.6rem; display: flex; flex-direction: column; align-items: center; min-height: 44px; padding: .45rem .3rem .5rem; border-radius: 14px; text-decoration: none; text-align: center; line-height: 1.2;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--ink-2); font-size: .74rem; }
.agenda-week a.on { border-color: var(--door-deep); background: color-mix(in oklab, var(--door) 18%, var(--surface)); }
.agenda-week .aw-day { font-weight: 700; color: var(--ink); font-size: .8rem; white-space: nowrap; }
.agenda-week .aw-n { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--ink); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.agenda-week .aw-st { margin-top: .2rem; font-weight: 650; color: var(--sage-deep); }
.agenda-week a.short .aw-st { color: color-mix(in oklab, var(--terra) 85%, var(--ink)); }
.agenda-day { scroll-margin-top: calc(var(--top) + .6rem); }

/* ---- Round 5: supplies on a phone --------------------------------------------------------------- */
/* Up to 860px: a short list grouped by kind; tap an item to open its fields. Wider: the table. */
.supplies-narrow { display: none; }
@media (max-width: 860px) {
  .supplies-wide { display: none !important; }
  .supplies-narrow { display: block; }
}
.supply-group { display: flex; align-items: baseline; gap: .45rem; font-size: 1.05rem; margin: 1.2rem .3rem .45rem; }
.supply-group .faint { font: 600 .8rem var(--sans); }
.supply-list { padding: .2rem .95rem; }
.supply + .supply { border-top: 1px solid var(--line); }
.supply > summary { display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .5rem 0; }
.supply > summary .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.supply > summary .title { font-weight: 620; overflow-wrap: anywhere; }
.supply > summary .sub { color: var(--ink-2); font-size: .85rem; line-height: 1.4; overflow-wrap: anywhere; }
.supply > summary .chip { flex: none; }
.supply > summary::after { content: "›"; color: var(--ink-3); font-size: 1.3rem; line-height: 1; flex: none; transition: transform .2s var(--ease); }
.supply[open] > summary::after { transform: rotate(90deg); }
.supply[open] { padding-bottom: .9rem; }
.supply { scroll-margin-top: calc(var(--top) + .6rem); }
.supply-form { margin-top: .3rem; }
.supply-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: 0 .7rem; }
.supply-fields .field { margin-bottom: .7rem; min-width: 0; }
.supply-fields .full { grid-column: 1 / -1; }
.supply-fields .supply-on { align-self: end; }
.supply-form > .btn { width: 100%; }
.supply-add > summary { display: flex; align-items: center; min-height: 44px; }
details.card.supply-add > summary::after { float: none; margin-left: auto; padding-left: .5rem; }
.supply-add[open] > summary { margin-bottom: .8rem; }

/* House photos and the business logo (migration 013). */
.brand img.mark.logo { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; background: #fff; filter: none; box-shadow: 0 1px 3px rgba(46, 38, 31, .18); }
.house-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--line); }
.card > .house-cover.top { width: calc(100% + 2.4rem); max-width: none; margin: -1.1rem -1.2rem .8rem; border-radius: 0; aspect-ratio: 16 / 8; }
.house-hero { margin: 0 0 1rem; max-height: 340px; aspect-ratio: 21 / 8; }
.house-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.house-thumbs figure { margin: 0; position: relative; }
.house-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; background: var(--line); }
.house-thumbs figure.is-cover img { outline: 3px solid var(--door); outline-offset: 2px; }
.house-thumbs figcaption { display: flex; justify-content: space-between; gap: .3rem; font-size: .78rem; margin-top: .25rem; }
/* "How it should look": reference photos (office on the house page; team on the job). */
.ref-thumbs figcaption { flex-direction: column; align-items: flex-start; }
.ref-caption { color: var(--ink-2); line-height: 1.3; }
.ref-form { display: grid; gap: .5rem; margin-top: .8rem; }
.ref-form .btn { justify-self: start; }
.ref-strip { display: flex; gap: .6rem; overflow-x: auto; padding: .2rem 0 .5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.ref-strip .ref { flex: 0 0 auto; width: 150px; scroll-snap-align: start; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; color: inherit; font: inherit; }
.ref-strip img { width: 150px; height: 112px; object-fit: cover; border-radius: 12px; display: block; background: var(--line); box-shadow: var(--shadow-1); }
.ref-strip .ref span { display: block; font-size: .8rem; color: var(--ink-2); line-height: 1.3; margin-top: .3rem; }
.ref-room { margin: .1rem 0 .5rem; }
.ref-room summary { font-size: .85rem; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; gap: .35rem; min-height: 32px; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(20, 16, 12, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; }
.lightbox p { color: #fff; font-size: 1rem; text-align: center; margin: 0; max-width: 34rem; }
.lightbox .close { position: absolute; top: max(.8rem, env(safe-area-inset-top)); right: 1rem; color: #fff; background: rgba(255, 255, 255, .15); border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 1.4rem; }
.jobcard-thumb { width: 64px; flex: none; border-radius: 10px; object-fit: cover; align-self: stretch; min-height: 64px; background: var(--line); }
.job-cover { margin: -.2rem 0 .8rem; aspect-ratio: 16 / 7; }
.guest-page .welcome .house-cover { margin: -1rem 0 1rem; aspect-ratio: 4 / 3; box-shadow: var(--shadow-2); }
.guest-page .welcome img.mark.logo { width: 84px; height: 84px; object-fit: contain; border-radius: 50%; background: #fff; box-shadow: var(--shadow-2); margin-top: -58px; position: relative; border: 4px solid #fff; }
.guest-page .welcome img.mark.logo.alone { margin-top: 0; }
.logo-preview { width: 96px; height: 96px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--line); }

/* ---------- Contacts & "Who to call" (30 Oct 2026) ---------- */
.contact-list .contact { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.contact-list .contact:first-child { border-top: 0; }
.card.tight.contact-list .contact { padding: .7rem 1rem; }
.contact-actions { flex-wrap: nowrap; gap: .35rem; }
.kindpick { gap: .3rem 1rem; }
.whocall h2 { margin-bottom: .3rem; }
@media (max-width: 560px) {
  .contact-list .contact { flex-wrap: wrap; }
  .contact-actions { width: 100%; }
}
/* The "you left the house" bar on a worker's phone. */
.leftbar { display: flex; align-items: center; gap: .6rem; }
.leftbar .grow { flex: 1; }

/* ---------- Plan the week, Send invites (30 Oct 2026) ---------- */
.plan-day h2 { margin-bottom: .4rem; }
.planrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.plan-day h2 + .planrow, .plan-day h2 + p + .planrow { border-top: 0; }
.planrow .info { flex: 1 1 280px; min-width: 0; }
.planrow select { flex: 1 1 260px; max-width: 100%; min-height: 44px; }
.planrow.needs { background: color-mix(in oklab, var(--terra) 7%, var(--surface)); border-radius: 10px; padding: .7rem; }
.plan-save { position: sticky; bottom: .6rem; z-index: 5; display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2); }
@media (max-width: 860px) {
  .plan-save { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); padding: .4rem; }
  .plan-save .btn { flex: 1; }
  .plan-save .faint { display: none; }
  .bulktbl td[data-label="Notes"] { grid-column: 1 / -1; }
}
.invites .card h2 a { text-decoration: none; }
.bulktbl td { vertical-align: top; }
/* "What's missing" on a house page. */
.ready-card > summary { cursor: pointer; list-style: none; gap: .5rem; }
.ready-card > summary::-webkit-details-marker { display: none; }
.ready-list { margin-top: .4rem; }
.ready-list > li { gap: .5rem; flex-wrap: wrap; }
.ready-list form { display: inline; }
.ready-ok { color: var(--sage-deep); }
.ready-no { color: var(--ink-3); }
.setup-card > summary { cursor: pointer; }

/* Prices page: houses × nights */
.rates-houses { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.rates-scroll { overflow-x: auto; margin-top: .7rem; -webkit-overflow-scrolling: touch; }
.rates-grid { border-collapse: separate; border-spacing: 2px; font-size: .8rem; min-width: 100%; }
.rates-grid th { font-weight: 600; color: var(--ink-2); text-align: center; padding: .2rem .3rem; white-space: nowrap; }
.rates-grid th span { font-weight: 500; color: var(--ink-3, var(--ink-2)); font-size: .72rem; }
.rates-grid th.wkend { color: var(--ink); }
.rates-grid th.h { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.rates-grid td { text-align: center; padding: .35rem .3rem; border-radius: 6px; min-width: 3.2rem; white-space: nowrap; background: color-mix(in oklab, var(--sage, #8A9A78) 14%, var(--surface)); }
.rates-grid td small { display: block; font-size: .68rem; color: var(--ink-2); }
.rates-grid td.st-reserved { background: color-mix(in oklab, var(--door) 30%, var(--surface)); }
.rates-grid td.st-reserved .b { font-size: .7rem; color: var(--ink-2); }
.rates-grid td.st-blocked { background: var(--line); color: var(--ink-2); text-decoration: line-through; }
.rates-grid td.st-pending { background: color-mix(in oklab, var(--door) 15%, var(--surface)); }
.rates-grid td.st-none { background: transparent; }

/* Guest inbox */
.inbox-list li.unread strong { color: var(--ink); }
.inbox-list li a { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; color: inherit; min-width: 0; }
.inbox-preview { color: var(--ink-2); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread { display: flex; flex-direction: column; gap: .7rem; }
.thread .msg { display: flex; flex-direction: column; max-width: 78%; }
.thread .msg.in { align-self: flex-start; }
.thread .msg.out { align-self: flex-end; align-items: flex-end; }
.thread .bubble { white-space: pre-wrap; overflow-wrap: anywhere; padding: .6rem .85rem; border-radius: 16px; background: var(--surface-2, #F4EEE3); border: 1px solid var(--line); font-size: .93rem; line-height: 1.4; }
.thread .msg.out .bubble { background: color-mix(in oklab, var(--door) 22%, var(--surface)); border-color: color-mix(in oklab, var(--door) 40%, var(--line)); }
.thread .meta { font-size: .75rem; margin-top: .2rem; }
/* A plain, readable list (Settings → Where your information is kept). */
.plainlist { margin: .2rem 0 .4rem; padding-left: 1.1rem; display: grid; gap: .45rem; line-height: 1.5; }
.plainlist li::marker { color: var(--door, #D9A32E); }

/* Polish 2 Nov 2026: office daily screens */
/* Desktop: the side menu's column runs the full height of a long page (the menu itself stays put). */
@media (min-width: 861px) {
  .admin { background: linear-gradient(to right, color-mix(in oklab, var(--surface) 55%, transparent) 235px, var(--line) 235px 236px, transparent 236px); }
  .admin > .side { background: none; border-right-color: transparent; }
  .plan-save .btn.big { width: auto; flex: 0 1 340px; }
}
/* Jobs and Calendar: the kind-of-work switch fills one row on a phone; on Jobs (four kinds) the
   icon sits over the word so "Maintenance" never drops to a second line. */
@media (max-width: 560px) {
  .areabar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .areabar a { justify-content: center; min-height: 44px; padding: .4rem .3rem; }
  .areabar:has(> a:nth-child(4)) a { flex-direction: column; gap: .15rem; padding: .4rem .1rem; font-size: .78rem; line-height: 1.15; text-align: center; }
  .areabar:has(> a:nth-child(4)) a > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The status tabs: one row that scrolls sideways (fading at the edge) instead of five rows. */
  .jobtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 1px 2.2rem 2px 0; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent); }
  .jobtabs::-webkit-scrollbar { display: none; }
  .jobtabs a { flex: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
}
/* Jobs list: "10 AM →" / "Thu Nov 5, 4 PM" (the end never splits); the "N asked" chip is a link without an underline. */
.jobtbl .nowrap { white-space: nowrap; }
.jobtbl a.chip { text-decoration: none; }
/* Job page: Helpers right after "Who's doing it" on a phone (it came first, above who's doing the job). */
@media (max-width: 960px) { #jobgrid .jc-crew { order: 1; } }
/* "N people asked": the name gets room; the two buttons go under it when the box is narrow. */
.ask-row > .grow { flex: 1 1 220px; }
/* Today's board: the status and "same day" chips together, top right. */
.t-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
@media (max-width: 380px) { .areabar:has(> a:nth-child(4)) a { font-size: .7rem; letter-spacing: -.01em; padding-inline: 0; } }
.t-board .list a.grow > .row.between { flex-wrap: nowrap; align-items: flex-start; }
.t-board .list a.grow > .row.between > .title { min-width: 0; }
.t-chips { flex: none; max-width: 50%; }
.asks h3 { display: flex; align-items: center; gap: .4rem; }
/* Polish 2 Nov 2026: problems, guests, public pages */
/* A problem on a phone: every card full width (the grid's align-items:start shrank Details and History). */
@media (max-width: 960px) { .issuegrid { align-items: stretch !important; } }
.issuelist .sub .i { width: 14px; height: 14px; vertical-align: -2px; }
.mkjob { margin-top: .2rem; }
.mkjob-lbl { font-size: .85rem; margin-bottom: .35rem; }
/* Inbox: the house's color as a small mark, not a tall bar; a long name wraps beside the time. */
.inbox-list .swatch { min-height: 0; align-self: auto; vertical-align: -1px; margin-right: .1rem; }
.inbox-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.inbox-top strong { min-width: 0; overflow-wrap: anywhere; }
/* Prices: earlier / later are a finger wide. */
.rates-nav .btn { min-width: 44px; justify-content: center; }
/* Guest page: the icon and the words of a card's title on one line. */
.guest-page .card > strong:has(> .ic-tile:first-child) { display: flex; align-items: center; gap: .6rem; }
/* Guest and team pages: language links and "Work here?" are easy to tap. */
.guest-langs a, .g-team a { display: inline-block; padding: .55rem .35rem; }
/* Sign-in pages on a phone: the words stay clear of the yellow door. */
@media (max-width: 860px) { .auth .panel p { max-width: min(34ch, calc(100% - 6.5rem)); } }
/* Polish 2 Nov 2026: setup screens */
/* Houses list on a phone: two slimmer cards a row, so names and "next guests" don't wrap word by word. */
@media (max-width: 520px) {
  .grid.houses > .card { padding: .8rem .85rem; margin-bottom: 0; }
  .grid.houses > .card > .house-cover.top { width: calc(100% + 1.7rem); margin: -.8rem -.85rem .6rem; }
  .grid.houses > .card h3 { font-size: 1.02rem; line-height: 1.2; }
  .grid.houses > .card .row { gap: .3rem; }
}
/* House page: "What's missing" count sits by the arrow, not in the middle of the bar. */
.ready-card > summary .ready-count { margin-left: auto; }
/* "Today at this house": on a phone the chips and buttons go under the name, which keeps the width. */
@media (max-width: 640px) {
  .list > li.here-row { flex-wrap: wrap; }
  .list > li.here-row > .grow { flex: 1 1 100%; }
  .list > li.here-row > .here-acts { justify-content: flex-start !important; }
}
/* Out → in times: one line in a small tile. */
.kpi.kpi-times .n { font-size: clamp(1.15rem, 5vw, 2.2rem); white-space: nowrap; }
/* House and person forms on a phone: short boxes two to a row (type + bedrooms, check-in + checkout). */
@media (max-width: 520px) {
  form .grid.g4.pf-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .7rem; }
  .areapick, .kindpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Calendar colors: a bigger target for a finger. */
.colorpick { padding: .35rem .2rem; cursor: pointer; }
@media (pointer: coarse) { .colorpick { padding: .55rem .35rem; } .colorpick input { width: 20px; height: 20px; } }
/* Seasonal: the title takes the room; "Turn off" stays top right. */
.sched-head { flex-wrap: nowrap; align-items: flex-start; }
.sched-head > .grow { min-width: 0; }
.sched-head > form { flex: none; }
/* Who usually cleans, on a phone: the two pickers share the row instead of three skinny columns. */
@media (max-width: 640px) {
  .tbl.cards.usualtbl tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbl.cards.usualtbl select { min-height: 44px; }
}
/* Add several people: long emails wrap inside their column. */
.bulktbl td { overflow-wrap: anywhere; }
/* "What's missing", QR sign row: two buttons don't fit beside the words on a phone, so they go under. */
@media (max-width: 520px) { .ready-list > li.ready-sign:has(.btn.primary) > .grow { flex: 1 1 calc(100% - 2.5rem); } .ready-list > li.ready-sign:has(.btn.primary) > a.btn { margin-left: 1.75rem; } }
/* Polish 2 Nov 2026: staff screens */
.nw { white-space: nowrap; }
/* Board card: the main action(s), then "Details" + "Not for me" kept together (they wrap as one). */
.board-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .6rem; }
.board-acts > .main { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; min-width: 0; }
.board-acts > .more { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex: 1 1 auto; }
/* Report tabs: room between the icon and the word. */
.tabsbar a { display: inline-flex; align-items: center; gap: .35rem; }
/* "Waiting for the office" on My jobs: the whole row is the link, like the other lists. */
.waitlist > li > a { text-decoration: none; color: inherit; }
/* Me: three small tiles; a time like "25h 46m" stays on one line. */
.staff .grid.kpis3 { gap: .6rem; }
.staff .grid.kpis3 .kpi { padding: .85rem .75rem .75rem; }
.staff .grid.kpis3 .kpi .n { font-size: clamp(1.05rem, 5vw, 1.6rem); white-space: nowrap; }
/* Side menu on a laptop (2 Nov 2026): at the usual laptop heights the whole menu, Settings and Sign
   out included, fits without scrolling the menu. Taller screens keep the roomier spacing. */
@media (min-width: 861px) and (max-height: 1040px) {
  .side { padding: .7rem .7rem .6rem; }
  .side a { padding: .26rem .6rem; font-size: .92rem; }
  .side a > span:first-child { width: 26px; height: 26px; }
  .side .group { margin: .7rem .6rem .2rem; }
  .side form { padding-top: .4rem; }
  .side .me-row { padding: .5rem .6rem .1rem; }
}
@media (min-width: 861px) and (max-height: 860px) {
  .side a { padding: .22rem .55rem; font-size: .9rem; }
  .side a > span:first-child { width: 24px; height: 24px; border-radius: 7px; }
  .side .group { margin: .5rem .6rem .15rem; font-size: .64rem; }
  .side a { padding-top: .13rem; padding-bottom: .13rem; }
  .side .searchbox { margin: 0 .2rem .3rem; }
  .side .searchbox input { padding-top: .45rem; padding-bottom: .45rem; }
  .side .me-row { padding: .3rem .6rem 0; }
  .side .me-row .who { width: 28px; height: 28px; font-size: .75rem; }
}
/* Guest reviews (inbox → Reviews). */
.review-text { margin: .3rem 0 .5rem; padding: .1rem 0 .1rem .8rem; border-left: 3px solid var(--door); font-style: italic; color: var(--ink); white-space: pre-line; }
.review-private { margin: .3rem 0; padding: .5rem .7rem; border-radius: 10px; background: var(--surface-2); font-size: .9rem; }
.review-reply { margin-top: .5rem; padding: .55rem .75rem; border-radius: 10px; background: color-mix(in oklab, var(--door) 12%, var(--surface)); }
.review-answer > summary { list-style: none; display: inline-flex; cursor: pointer; }
.review-answer > summary::-webkit-details-marker { display: none; }
.review-answer[open] > summary { display: none; }
.review-card .swatch { min-height: 0; align-self: auto; }