/* MyBills Resort — STAFF tool theme.
   Pulled verbatim from Claude Design project 84d3ac2e (MyBills Resort — Design
   System v2), staff/staff.css. Do not hand-edit: re-pull instead, or the app
   and the design drift again.

   Shares Manrope, the 4px space scale and the asymmetric corner; drops glass,
   gradients, dark mode and volt. Everything is scoped to .st so it can never
   leak into the guest system. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{ --mb-font:'Manrope',-apple-system,'Helvetica Neue',Helvetica,sans-serif; }
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}

.st{
/* Accent — a calm deep blue for eight-hour use */
--st-accent:#1E4BA6;--st-accent-hover:#173C85;--st-accent-active:#12306B;--st-accent-soft:#EDF2FC;--st-accent-border:#C6D8F6;--st-accent-ink:#1A4092;--st-on-accent:#FFFFFF;

/* Neutrals — cool grey, print-flat */
--st-ink:#15181D;--st-ink-2:#333A45;--st-muted:#5C6572;--st-subtle:#828B99;--st-line:#E1E5EB;--st-line-strong:#CBD2DB;
--st-bg:#F4F6F9;--st-surface:#FFFFFF;--st-surface-2:#F8FAFC;--st-surface-3:#EDF0F4;

/* Semantic */
--st-good:#146B48;--st-good-bg:#E3F2EA;--st-good-line:#B4DCC6;
--st-warn:#8A4B00;--st-warn-bg:#FDF0D9;--st-warn-line:#F0D5A4;
--st-bad:#A6301F;--st-bad-bg:#FBEBE8;--st-bad-line:#EFC3BB;
--st-info:#1A4092;--st-info-bg:#E7EEFB;--st-info-line:#C6D8F6;
--st-hold:#5B3A9E;--st-hold-bg:#F1ECFB;--st-hold-line:#D8CBF1;

/* Today marker — deliberately neutral so it never reads as a status */
--st-today:#15181D;

/* Type — Manrope, shared with the guest system */
--st-font:var(--mb-font);
--st-fs-1:11px;--st-lh-1:15px;
--st-fs-2:12px;--st-lh-2:17px;
--st-fs-3:13px;--st-lh-3:18px;
--st-fs-4:15px;--st-lh-4:21px;
--st-fs-5:17px;--st-lh-5:23px;
--st-fs-6:20px;--st-lh-6:26px;
--st-fs-7:26px;--st-lh-7:31px;
--st-fs-8:33px;--st-lh-8:37px;

/* Space — shared 4px scale */
--st-s1:4px;--st-s2:8px;--st-s3:12px;--st-s4:16px;--st-s5:20px;--st-s6:24px;--st-s8:32px;--st-s10:40px;

/* Shape — square-cut, one asymmetric corner kept as the shared signature */
--st-r-xs:4px;--st-r-sm:6px;--st-r-md:10px;--st-r-lg:14px;--st-r-pill:999px;
--st-r-asym:2px var(--st-r-lg) var(--st-r-lg) var(--st-r-lg);
--st-tap:44px;
--st-e1:0 1px 2px rgba(21,24,29,.07);
--st-e2:0 2px 6px rgba(21,24,29,.09);
--st-focus:0 0 0 3px rgba(30,75,166,.28);
}

.st{font-family:var(--st-font);font-size:var(--st-fs-4);line-height:var(--st-lh-4);color:var(--st-ink);background:var(--st-bg);-webkit-font-smoothing:antialiased}
.st *,.st *::before,.st *::after{box-sizing:border-box}
.st a{color:var(--st-accent-ink)}
.st a:hover{color:var(--st-accent-hover)}
.st-num{font-variant-numeric:tabular-nums}
.st-eyebrow{font-size:var(--st-fs-1);line-height:var(--st-lh-1);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--st-subtle)}
.st-h1{font-size:var(--st-fs-7);line-height:var(--st-lh-7);font-weight:800;letter-spacing:-.025em;margin:0}
.st-h2{font-size:var(--st-fs-6);line-height:var(--st-lh-6);font-weight:800;letter-spacing:-.02em;margin:0}
.st-h3{font-size:var(--st-fs-5);line-height:var(--st-lh-5);font-weight:700;letter-spacing:-.01em;margin:0}
.st-sm{font-size:var(--st-fs-3);line-height:var(--st-lh-3)}
.st-xs{font-size:var(--st-fs-2);line-height:var(--st-lh-2)}
.st-muted{color:var(--st-muted)}
.st-subtle{color:var(--st-subtle)}

/* ---------- Button ---------- */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--st-s2);min-height:var(--st-tap);padding:0 var(--st-s5);border:1px solid transparent;border-radius:var(--st-r-md);font:inherit;font-weight:700;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background 120ms,border-color 120ms,color 120ms}
.st-btn:focus-visible{outline:none;box-shadow:var(--st-focus)}
.st-btn--sm{min-height:34px;padding:0 var(--st-s3);font-size:var(--st-fs-3)}
.st-btn--md{min-height:38px;padding:0 var(--st-s4);font-size:var(--st-fs-3)}
.st-btn--block{width:100%}
.st-btn--commit{background:var(--st-accent);color:var(--st-on-accent)}
.st-btn--commit:hover{background:var(--st-accent-hover)}
.st-btn--commit:active{background:var(--st-accent-active)}
.st-btn--alt{background:var(--st-surface);color:var(--st-accent-ink);border-color:var(--st-line-strong)}
.st-btn--alt:hover{background:var(--st-accent-soft);border-color:var(--st-accent-border)}
.st-btn--quiet{background:transparent;color:var(--st-ink-2)}
.st-btn--quiet:hover{background:var(--st-surface-3)}
.st-btn--danger{background:var(--st-surface);color:var(--st-bad);border-color:var(--st-bad-line)}
.st-btn--danger:hover{background:var(--st-bad-bg)}
/* A blocked control is never greyed silently — it stays pressable and says what is missing */
.st-btn--blocked{background:var(--st-surface-3);color:var(--st-muted);border-color:var(--st-line-strong)}
.st-btn--blocked:hover{background:var(--st-surface-3)}
.st-btn__why{display:block;margin-top:var(--st-s1);font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-warn);font-weight:600}

.st-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--st-tap);height:var(--st-tap);border:1px solid transparent;border-radius:var(--st-r-md);background:transparent;color:var(--st-ink-2);cursor:pointer}
.st-iconbtn:hover{background:var(--st-surface-3)}
.st-iconbtn--outline{border-color:var(--st-line-strong);background:var(--st-surface)}
.st-iconbtn--round{border-radius:var(--st-r-pill)}

/* ---------- Card ---------- */
.st-card{background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym);box-shadow:var(--st-e1)}
.st-card--flat{box-shadow:none;background:var(--st-surface-2)}
.st-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--st-s3);padding:var(--st-s4) var(--st-s4) 0}
.st-card__body{padding:var(--st-s4)}
.st-card__foot{padding:var(--st-s3) var(--st-s4);border-top:1px solid var(--st-line)}

/* ---------- Status pills — nine states, always a pill ---------- */
.st-pill{display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:2px 9px;border-radius:var(--st-r-pill);border:1px solid transparent;font-size:var(--st-fs-2);line-height:var(--st-lh-2);font-weight:700;white-space:nowrap;letter-spacing:-.005em;max-width:100%;overflow:hidden}
.st-pill__note{overflow:hidden;text-overflow:ellipsis;font-weight:600;opacity:.85}
.st-pill__dot{width:6px;height:6px;border-radius:999px;background:currentColor;flex:none}
.st-pill--held{background:var(--st-hold-bg);color:var(--st-hold);border-color:var(--st-hold-line)}
.st-pill--confirmed{background:var(--st-info-bg);color:var(--st-info);border-color:var(--st-info-line)}
.st-pill--checked_in{background:var(--st-good-bg);color:var(--st-good);border-color:var(--st-good-line)}
.st-pill--pending{background:var(--st-warn-bg);color:var(--st-warn);border-color:var(--st-warn-line)}
.st-pill--checked_out{background:var(--st-surface-3);color:var(--st-ink-2);border-color:var(--st-line-strong)}
.st-pill--cancelled{background:transparent;color:var(--st-bad);border-color:var(--st-bad-line)}
.st-pill--no_show{background:var(--st-bad);color:#fff;border-color:var(--st-bad)}
.st-pill--expired{background:transparent;color:var(--st-muted);border-style:dashed;border-color:var(--st-line-strong)}
.st-pill--blocked{color:var(--st-ink-2);border-color:var(--st-line-strong);background-color:var(--st-surface-3);background-image:repeating-linear-gradient(135deg,rgba(21,24,29,.16) 0 3px,transparent 3px 7px)}

/* ---------- Money ---------- */
.st-money{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em;color:var(--st-ink);white-space:nowrap}
.st-money--xl{font-size:var(--st-fs-8);line-height:var(--st-lh-8);font-weight:800}
.st-money--lg{font-size:var(--st-fs-7);line-height:var(--st-lh-7);font-weight:800}
.st-money--md{font-size:var(--st-fs-5);line-height:var(--st-lh-5)}
.st-money--sm{font-size:var(--st-fs-3);line-height:var(--st-lh-3)}
.st-money--neg{color:var(--st-bad)}

/* ---------- Metric card ---------- */
.st-metric{display:flex;flex-direction:column;gap:var(--st-s1);padding:var(--st-s4);background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym)}
.st-metric--emph{background:var(--st-accent);border-color:var(--st-accent)}
.st-metric--emph .st-metric__label,.st-metric--emph .st-metric__sub{color:rgba(255,255,255,.78)}
.st-metric--emph .st-money{color:#fff}
.st-metric__label{font-size:var(--st-fs-1);line-height:var(--st-lh-1);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--st-subtle)}
.st-metric__sub{font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-muted)}
.st-metric__row{display:flex;align-items:baseline;gap:var(--st-s2)}

/* ---------- Stale stamp — five freshness states ---------- */
.st-stale{display:inline-flex;align-items:center;gap:6px;font-size:var(--st-fs-2);line-height:var(--st-lh-2);font-weight:600;color:var(--st-muted)}
.st-stale__dot{width:7px;height:7px;border-radius:999px;flex:none;background:currentColor}
.st-stale--fresh{color:var(--st-good)}
.st-stale--offline{color:var(--st-warn)}
.st-stale--syncing{color:var(--st-accent-ink)}
.st-stale--queued{color:var(--st-accent-ink)}
.st-stale--failed{color:var(--st-bad)}
.st-stale--syncing .st-stale__dot{animation:st-pulse 1.1s ease-in-out infinite}
@keyframes st-pulse{0%,100%{opacity:1}50%{opacity:.28}}
.st-stale__retry{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--st-bad);text-decoration:underline;cursor:pointer}

/* ---------- List row ---------- */
.st-row{display:flex;align-items:center;gap:var(--st-s3);width:100%;min-height:56px;padding:var(--st-s3) var(--st-s4);border:0;background:var(--st-surface);text-align:left;font:inherit;color:inherit;cursor:pointer}
.st-row__avatar{margin-right:-2px}
.st-row+.st-row{border-top:1px solid var(--st-line)}
.st-row:hover{background:var(--st-surface-2)}
.st-row__main{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.st-row__title{font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-row__sub{font-size:var(--st-fs-3);line-height:var(--st-lh-3);color:var(--st-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-row__end{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto;max-width:47%}
.st-row--stacked{align-items:flex-start;padding-top:var(--st-s3);padding-bottom:var(--st-s3)}
.st-row--stacked .st-row__title{white-space:normal;overflow:visible;text-wrap:pretty}
.st-row--stacked .st-row__sub{white-space:normal;overflow:visible}
.st-row__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--st-s2);margin-top:5px}
.st-row__avatar{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:var(--st-r-pill);background:var(--st-accent-soft);color:var(--st-accent-ink);font-size:var(--st-fs-3);font-weight:800}

/* ---------- Segmented control ---------- */
.st-seg{display:inline-flex;padding:2px;background:var(--st-surface-3);border-radius:var(--st-r-md);gap:2px}
.st-seg__item{min-height:36px;padding:0 var(--st-s4);border:0;border-radius:8px;background:transparent;font:inherit;font-size:var(--st-fs-3);font-weight:700;color:var(--st-muted);cursor:pointer;white-space:nowrap}
.st-seg__item.is-active{background:var(--st-surface);color:var(--st-ink);box-shadow:var(--st-e1)}

/* ---------- Top bar ---------- */
.st-topbar{display:flex;align-items:center;gap:var(--st-s3);min-height:60px;padding:var(--st-s2) var(--st-s4);background:var(--st-surface);border-bottom:1px solid var(--st-line)}
.st-topbar__main{display:flex;flex-direction:column;flex:1;min-width:0}
.st-topbar__title{font-size:var(--st-fs-6);line-height:var(--st-lh-6);font-weight:800;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-topbar__end{display:flex;align-items:center;gap:var(--st-s2);flex:none}

/* ---------- Tab bar ---------- */
.st-tabbar{display:flex;background:var(--st-surface);border-top:1px solid var(--st-line)}
.st-tabbar__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;min-height:56px;border:0;background:none;font:inherit;color:var(--st-muted);cursor:pointer;padding:6px 2px}
.st-tabbar__item.is-active{color:var(--st-accent-ink);box-shadow:inset 0 -3px 0 var(--st-accent)}
.st-tabbar__label{font-size:var(--st-fs-1);line-height:var(--st-lh-1);font-weight:700}
.st-tabbar--side{flex-direction:column;border-top:0;border-right:1px solid var(--st-line);width:212px;padding:var(--st-s3)}
.st-tabbar--side .st-tabbar__item{flex-direction:row;justify-content:flex-start;gap:var(--st-s3);min-height:44px;padding:0 var(--st-s3);border-radius:var(--st-r-md);flex:none}
.st-tabbar--side .st-tabbar__item.is-active{background:var(--st-accent-soft);box-shadow:none}
.st-tabbar--side .st-tabbar__label{font-size:var(--st-fs-3);line-height:var(--st-lh-3)}

/* ---------- Unit type filter ---------- */
.st-unitfilter{display:flex;gap:var(--st-s2);overflow-x:auto;scrollbar-width:none;padding:1px}
.st-unitfilter::-webkit-scrollbar{display:none}
.st-unitchip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--st-s3);border:1px solid var(--st-line-strong);border-radius:var(--st-r-md);background:var(--st-surface);font:inherit;font-size:var(--st-fs-3);font-weight:700;color:var(--st-ink-2);cursor:pointer;white-space:nowrap;flex:none;transition:background 120ms,border-color 120ms,color 120ms}
.st-unitchip:hover{border-color:var(--st-accent-border);background:var(--st-accent-soft)}
.st-unitchip:focus-visible{outline:none;box-shadow:var(--st-focus)}
.st-unitchip__n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--st-subtle)}
.st-unitchip.is-active{background:var(--st-accent);border-color:var(--st-accent);color:var(--st-on-accent)}
.st-unitchip.is-active .st-unitchip__n{color:rgba(255,255,255,.75)}

/* ---------- Month calendar ---------- */
.st-cal{background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym);overflow:hidden}
.st-cal__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--st-s3);padding:var(--st-s3) var(--st-s4);border-bottom:1px solid var(--st-line)}
.st-cal__title{display:flex;flex-direction:column;gap:1px;text-align:center;flex:1;min-width:0}
.st-cal__summary{font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-muted);font-weight:600}
.st-cal__dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--st-line);background:var(--st-surface-2)}
.st-cal__dow span{padding:7px 0;text-align:center;font-size:var(--st-fs-1);font-weight:700;letter-spacing:.06em;color:var(--st-subtle)}
.st-cal__dow span:nth-child(6),.st-cal__dow span:nth-child(7){color:var(--st-ink-2)}
.st-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.st-cal__cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;padding:7px 3px;border:0;border-bottom:1px solid var(--st-line);background:var(--st-surface);font:inherit;color:inherit;cursor:pointer;text-align:center}
.st-cal__grid>.st-cal__cell:nth-last-child(-n+7){border-bottom:0}
.st-cal__cell.is-weekend{background:var(--st-surface-2)}
.st-cal__cell.is-past{color:var(--st-subtle)}
.st-cal__cell.is-past .st-cal__free{color:var(--st-subtle);font-weight:600}
.st-cal__cell.is-selected{background:var(--st-accent-soft);box-shadow:inset 0 0 0 2px var(--st-accent);z-index:1}
.st-cal__legend{display:flex;flex-wrap:wrap;gap:var(--st-s2) var(--st-s4);padding:var(--st-s3) var(--st-s4);border-top:1px solid var(--st-line);background:var(--st-surface)}
.st-cal__key{display:inline-flex;align-items:center;gap:6px;font-size:var(--st-fs-2);line-height:var(--st-lh-2);font-weight:700;color:var(--st-muted)}
.st-cal__key i{width:14px;height:6px;border-radius:2px;flex:none;display:block}
.st-cal__cell:hover{background:var(--st-surface-2)}
.st-cal__num{font-size:var(--st-fs-3);line-height:1;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.st-cal__free{font-size:10px;line-height:1.1;font-weight:700;color:var(--st-good);white-space:nowrap;overflow:hidden;max-width:100%}
.st-cal__free--tight{color:var(--st-warn)}
.st-cal__free--none{color:var(--st-bad)}
.st-cal__free--blocked{color:var(--st-ink-2)}
.st-cal__cell.is-out{background:var(--st-surface-2);color:var(--st-subtle)}
.st-cal__cell.is-out .st-cal__free{display:none}
.st-cal__cell.is-today{box-shadow:inset 0 0 0 2px var(--st-today);z-index:2}
.st-cal__cell.is-today.is-selected{background:var(--st-accent-soft);box-shadow:inset 0 0 0 2px var(--st-today)}
.st-cal__cell.is-today .st-cal__num::after{content:'';position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:999px;background:var(--st-today)}
.st-cal__cell.is-blocked{background-color:var(--st-surface-3);background-image:repeating-linear-gradient(135deg,rgba(21,24,29,.13) 0 3px,transparent 3px 7px)}

/* ---------- Timeline grid ---------- */
.st-tl{position:relative;background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym);overflow:hidden}
.st-tl__scroll{overflow:auto;position:relative}
.st-tl__inner{position:relative;display:grid}
.st-tl__cell,.st-tl__unit,.st-tl__date,.st-tl__corner{border-right:1px solid var(--st-line);border-bottom:1px solid var(--st-line)}
.st-tl__corner{position:sticky;left:0;top:0;z-index:4;background:var(--st-surface-2)}
.st-tl__date{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 0;background:var(--st-surface-2);font-size:var(--st-fs-1);line-height:1.15}
.st-tl__date b{font-size:var(--st-fs-3);font-weight:800;font-variant-numeric:tabular-nums}
.st-tl__date span{color:var(--st-subtle);font-weight:700;letter-spacing:.04em}
.st-tl__date.is-weekend{background:var(--st-surface-3)}
.st-tl__unit{position:sticky;left:0;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 var(--st-s3);background:var(--st-surface)}
.st-tl__unit b{font-size:var(--st-fs-3);font-weight:800;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.st-tl__unit span{font-size:var(--st-fs-1);color:var(--st-subtle);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-tl__cell{background:var(--st-surface)}
.st-tl__cell.is-weekend{background:var(--st-surface-2)}
.st-tl__bar{position:absolute;display:flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:var(--st-r-pill);border:1px solid transparent;font-size:var(--st-fs-2);font-weight:700;overflow:hidden;white-space:nowrap;cursor:pointer;z-index:1}
.st-tl__bar b{overflow:hidden;text-overflow:ellipsis;font-weight:800}
.st-tl__bar--held{background:var(--st-hold-bg);color:var(--st-hold);border-color:var(--st-hold)}
.st-tl__bar--confirmed{background:var(--st-info-bg);color:var(--st-info);border-color:var(--st-info)}
.st-tl__bar--checked_in{background:var(--st-good-bg);color:var(--st-good);border-color:var(--st-good)}
.st-tl__bar--pending{background:var(--st-warn-bg);color:var(--st-warn);border-color:var(--st-warn)}
.st-tl__bar--checked_out{background:var(--st-surface-3);color:var(--st-ink-2);border-color:var(--st-line-strong)}
.st-tl__bar--blocked{color:var(--st-ink-2);border-color:var(--st-line-strong);border-style:dashed;background-color:var(--st-surface-3);background-image:repeating-linear-gradient(135deg,rgba(21,24,29,.18) 0 3px,transparent 3px 7px)}
/* one today line over the whole grid, never per cell */
.st-tl__today{position:absolute;top:0;bottom:0;width:2px;background:var(--st-today);z-index:5;pointer-events:none}
.st-tl__date.is-today{background:var(--st-today);color:#fff}
.st-tl__date.is-today span{color:rgba(255,255,255,.72)}
.st-tl__legend{display:flex;flex-wrap:wrap;gap:var(--st-s3);padding:var(--st-s3) var(--st-s4);border-top:1px solid var(--st-line);background:var(--st-surface-2)}

/* ---------- Layout shells ---------- */
.st-phone{width:360px;flex:none;display:flex;flex-direction:column;height:740px;background:var(--st-bg);border:1px solid var(--st-line-strong);border-radius:var(--st-r-lg);overflow:hidden}
.st-phone__body{flex:1;overflow:auto;padding:var(--st-s4);display:flex;flex-direction:column;gap:var(--st-s4)}
.st-phone__body>*{flex:none}
.st-desk{flex:1;min-width:0;display:flex;height:740px;background:var(--st-bg);border:1px solid var(--st-line-strong);border-radius:var(--st-r-lg);overflow:hidden}
.st-desk__main{flex:1;min-width:0;display:flex;flex-direction:column}
.st-desk__body{flex:1;overflow:auto;padding:var(--st-s5);display:flex;flex-direction:column;gap:var(--st-s5)}
.st-desk__body>*{flex:none}
.st-grid{display:grid;gap:var(--st-s3)}
.st-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-grid--4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.st-note{padding:var(--st-s3) var(--st-s4);border:1px solid var(--st-accent-border);border-left:3px solid var(--st-accent);border-radius:var(--st-r-sm);background:var(--st-accent-soft);font-size:var(--st-fs-3);line-height:var(--st-lh-3);color:var(--st-accent-ink)}

/* ---------- Search + booking filters ---------- */
.st-bfilters{display:flex;flex-direction:column;gap:var(--st-s3)}
.st-search{display:flex;align-items:center;gap:var(--st-s3);min-height:var(--st-tap);padding:0 var(--st-s4);background:var(--st-surface);border:1px solid var(--st-line-strong);border-radius:var(--st-r-md)}
.st-search:focus-within{border-color:var(--st-accent);box-shadow:var(--st-focus)}
.st-search__input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;color:var(--st-ink);padding:11px 0}
.st-search__input::placeholder{color:var(--st-subtle)}

/* ---------- Detail block ---------- */
.st-detail{display:flex;flex-direction:column;gap:var(--st-s2)}
.st-detail__title{margin:0;font-size:var(--st-fs-1);line-height:var(--st-lh-1);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--st-subtle)}
.st-detail__rows{margin:0;display:flex;flex-direction:column;background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym);overflow:hidden}
.st-detail__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--st-s4);padding:11px var(--st-s4)}
.st-detail__row+.st-detail__row{border-top:1px solid var(--st-line)}
.st-detail__row dt{flex:none;font-size:var(--st-fs-3);line-height:var(--st-lh-3);color:var(--st-muted);font-weight:600}
.st-detail__row dd{margin:0;text-align:right;font-size:var(--st-fs-3);line-height:var(--st-lh-3);font-weight:700;min-width:0;overflow-wrap:anywhere}
.st-detail__absent{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--st-r-pill);background:var(--st-warn-bg);border:1px solid var(--st-warn-line);color:var(--st-warn);font-size:var(--st-fs-1);font-weight:700}
.st-detail__note{margin:0;font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-muted);text-wrap:pretty}

/* ---------- Event trail ---------- */
.st-events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.st-events__item{position:relative;display:flex;gap:var(--st-s3);padding:0 0 var(--st-s4) var(--st-s4)}
.st-events__item::before{content:'';position:absolute;left:4px;top:12px;bottom:0;width:1px;background:var(--st-line)}
.st-events__item:last-child{padding-bottom:0}
.st-events__item:last-child::before{display:none}
.st-events__dot{position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:999px;background:var(--st-line-strong);border:2px solid var(--st-surface);box-sizing:content-box}
.st-events__item.is-good .st-events__dot{background:var(--st-good)}
.st-events__item.is-warn .st-events__dot{background:var(--st-warn)}
.st-events__item.is-bad .st-events__dot{background:var(--st-bad)}
.st-events__body{display:flex;flex-direction:column;gap:1px;min-width:0}
.st-events__what{font-size:var(--st-fs-3);line-height:var(--st-lh-3);font-weight:700}
.st-events__when{font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-muted);font-variant-numeric:tabular-nums}

/* ---------- Hold timer ---------- */
.st-hold{display:flex;flex-direction:column;gap:var(--st-s2);padding:var(--st-s3) var(--st-s4);background:var(--st-hold-bg);border:1px solid var(--st-hold-line);border-left:3px solid var(--st-hold);border-radius:var(--st-r-sm)}
.st-hold.is-urgent{background:var(--st-bad-bg);border-color:var(--st-bad-line);border-left-color:var(--st-bad)}
.st-hold__top{display:flex;align-items:center;justify-content:space-between;gap:var(--st-s3)}
.st-hold__label{display:inline-flex;align-items:center;gap:6px;font-size:var(--st-fs-2);font-weight:700;color:var(--st-hold)}
.st-hold.is-urgent .st-hold__label,.st-hold.is-urgent .st-hold__time{color:var(--st-bad)}
.st-hold__time{font-size:var(--st-fs-6);line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--st-hold)}
.st-hold__track{display:block;height:4px;border-radius:2px;background:rgba(91,58,158,.2);overflow:hidden}
.st-hold.is-urgent .st-hold__track{background:rgba(166,48,31,.2)}
.st-hold__fill{display:block;height:100%;border-radius:2px;background:var(--st-hold)}
.st-hold.is-urgent .st-hold__fill{background:var(--st-bad)}
.st-hold__note{margin:0;font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-hold);text-wrap:pretty}
.st-hold.is-urgent .st-hold__note{color:var(--st-bad)}

/* ---------- Share card ---------- */
.st-share{display:flex;flex-direction:column;gap:var(--st-s3);padding:var(--st-s4);background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym)}
.st-share__head{display:flex;flex-direction:column;gap:2px}
.st-share__to{font-size:var(--st-fs-3);line-height:var(--st-lh-3);font-weight:700;font-variant-numeric:tabular-nums}
.st-share__msg{margin:0;padding:var(--st-s3) var(--st-s4);background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:var(--st-r-sm);font-family:var(--st-font);font-size:var(--st-fs-3);line-height:19px;white-space:pre-wrap;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.st-share__note{margin:0;font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-muted);text-wrap:pretty}

/* ---------- Money ledger ---------- */
.st-ledger{display:flex;flex-direction:column;background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym);overflow:hidden}
.st-ledger__row{display:flex;align-items:center;justify-content:space-between;gap:var(--st-s4);padding:11px var(--st-s4);font-size:var(--st-fs-3);line-height:var(--st-lh-3)}
.st-ledger__row+.st-ledger__row{border-top:1px solid var(--st-line)}
.st-ledger__row--total{background:var(--st-surface-2);font-weight:800}
.st-ledger__row--due{background:var(--st-warn-bg);color:var(--st-warn);font-weight:800}
.st-ledger__k{color:var(--st-muted);font-weight:600;min-width:0}
.st-ledger__row--total .st-ledger__k,.st-ledger__row--due .st-ledger__k{color:inherit;font-weight:800}

/* ---------- Step progress ---------- */
.st-steps{list-style:none;display:flex;align-items:center;gap:var(--st-s2);margin:0;padding:0;flex-wrap:wrap}
.st-steps__i{display:flex;align-items:center;gap:7px;font-size:var(--st-fs-3);line-height:var(--st-lh-3);font-weight:700;color:var(--st-subtle)}
.st-steps__i+.st-steps__i::before{content:'';width:18px;height:1px;background:var(--st-line-strong);flex:none}
.st-steps__dot{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:999px;border:1px solid var(--st-line-strong);background:var(--st-surface);font-size:var(--st-fs-2);font-weight:800;font-variant-numeric:tabular-nums}
.st-steps__i.is-done{color:var(--st-accent-ink)}
.st-steps__i.is-done .st-steps__dot{background:var(--st-accent-soft);border-color:var(--st-accent-border);color:var(--st-accent-ink)}
.st-steps__i.is-now{color:var(--st-ink)}
.st-steps__i.is-now .st-steps__dot{background:var(--st-accent);border-color:var(--st-accent);color:var(--st-on-accent)}
.st-steps--compact{gap:6px}
.st-steps--compact .st-steps__i+.st-steps__i::before{width:12px}

/* ---------- Occupancy ---------- */
.st-occ{display:flex;flex-direction:column;padding:var(--st-s2) var(--st-s4) var(--st-s4);background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym)}
.st-occ__ages{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:var(--st-s3);padding-top:var(--st-s3);margin-top:var(--st-s2);border-top:1px solid var(--st-line)}
.st-occ__age{display:flex;flex-direction:column;gap:5px}
.st-occ .mb-stepper-row{padding:var(--st-s3) 0}
.st-occ .mb-stepper-row+.mb-stepper-row{border-top:1px solid var(--st-line)}

/* ---------- Payment claim ---------- */
.st-claim{display:flex;flex-direction:column;gap:var(--st-s3);padding:var(--st-s4);background:var(--st-surface);border:1px solid var(--st-warn-line);border-left:3px solid var(--st-warn);border-radius:var(--st-r-sm)}
.st-claim.is-verified{border-color:var(--st-good-line);border-left-color:var(--st-good)}
.st-claim__head{display:flex;align-items:center;justify-content:space-between;gap:var(--st-s3);flex-wrap:wrap}
.st-claim__figures{display:grid;grid-template-columns:1fr 1fr;gap:var(--st-s3)}
.st-claim__fig{display:flex;flex-direction:column;gap:2px;padding:var(--st-s3);background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:var(--st-r-sm)}
.st-claim__k{font-size:var(--st-fs-1);line-height:var(--st-lh-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--st-subtle)}
.st-claim__note{margin:0;font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-warn);font-weight:600;text-wrap:pretty}
.st-claim__actions{display:flex;gap:var(--st-s2);flex-wrap:wrap}

/* ---------- Date suggestion ---------- */
.st-suggest{display:flex;flex-direction:column;gap:var(--st-s3);padding:var(--st-s4);background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym)}
.st-suggest__list{display:flex;flex-direction:column;border:1px solid var(--st-line);border-radius:var(--st-r-sm);overflow:hidden}
.st-suggest__row{display:flex;align-items:center;justify-content:space-between;gap:var(--st-s3);min-height:var(--st-tap);padding:var(--st-s2) var(--st-s4);border:0;background:var(--st-surface);font:inherit;color:inherit;text-align:left;cursor:pointer}
.st-suggest__row+.st-suggest__row{border-top:1px solid var(--st-line)}
.st-suggest__row:hover{background:var(--st-accent-soft)}
.st-suggest__body{display:flex;flex-direction:column;gap:1px;min-width:0}
.st-suggest__dates{font-size:var(--st-fs-3);line-height:var(--st-lh-3);font-weight:700}
.st-suggest__meta{font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-muted)}

/* ---------- Unit offer ---------- */
.st-offer{display:flex;gap:var(--st-s4);padding:var(--st-s4);background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym)}
.st-offer.is-selected{border-color:var(--st-accent);box-shadow:inset 0 0 0 1px var(--st-accent)}
.st-offer.is-out{background:var(--st-surface-2)}
.st-offer__main{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.st-offer__top{display:flex;align-items:baseline;gap:var(--st-s2);flex-wrap:wrap}
.st-offer__name{font-size:var(--st-fs-4);line-height:var(--st-lh-4);font-weight:800;letter-spacing:-.015em}
.st-offer__kind{font-size:var(--st-fs-2);line-height:var(--st-lh-2);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--st-subtle)}
.st-offer__facts{display:flex;flex-wrap:wrap;gap:var(--st-s2) var(--st-s4);font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-muted);font-weight:600}
.st-offer__facts span{display:inline-flex;align-items:center;gap:5px}
.st-offer__meals{font-size:var(--st-fs-2);line-height:var(--st-lh-2);font-weight:700;color:var(--st-good)}
.st-offer__rail{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto;max-width:46%;text-align:right}
.st-offer__unit{font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-muted);font-weight:600}
.st-offer__blocked{font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-warn);font-weight:700;text-wrap:pretty}
@media (max-width:560px){
.st-offer{flex-direction:column;gap:var(--st-s3)}
.st-offer__rail{max-width:100%;align-items:stretch;text-align:left;padding-top:var(--st-s3);border-top:1px solid var(--st-line)}
.st-offer__rail .st-money{align-self:flex-start}
.st-claim__figures{grid-template-columns:1fr}
}

/* ---------- IdCaptureCard — the one screen that handles a legal document ---------- */
.st-id{display:flex;flex-direction:column;gap:var(--st-s3);padding:var(--st-s4);background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym)}
.st-id.is-captured{border-color:var(--st-good-line)}
.st-id__head{display:flex;align-items:center;justify-content:space-between;gap:var(--st-s3);flex-wrap:wrap}
.st-id__why{margin:0;font-size:var(--st-fs-3);line-height:var(--st-lh-3);color:var(--st-muted);text-wrap:pretty}
.st-id__consent{display:flex;flex-direction:column;gap:var(--st-s2);padding:var(--st-s3);background:var(--st-accent-soft);border:1px solid var(--st-accent-border);border-radius:var(--st-r-sm)}
.st-id__consent-k{display:flex;align-items:center;gap:6px;font-size:var(--st-fs-1);line-height:var(--st-lh-1);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--st-accent-ink)}
.st-id__consent p{margin:0;font-size:var(--st-fs-4);line-height:var(--st-lh-4);color:var(--st-ink);font-weight:600;text-wrap:pretty}
.st-id__check{display:flex;align-items:flex-start;gap:var(--st-s2);min-height:var(--st-tap);align-items:center;font-size:var(--st-fs-3);line-height:var(--st-lh-3);color:var(--st-ink-2);cursor:pointer}
.st-id__box{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;border:1.5px solid var(--st-line-strong);border-radius:var(--st-r-xs);background:var(--st-surface);color:var(--st-on-accent)}
.st-id__box.on{background:var(--st-accent);border-color:var(--st-accent)}
.st-id__slots{display:flex;gap:var(--st-s2);flex-wrap:wrap}
.st-id__slot{padding:5px 10px;font-size:var(--st-fs-2);line-height:var(--st-lh-2);font-weight:600;color:var(--st-muted);background:var(--st-surface-3);border:1px solid var(--st-line);border-radius:var(--st-r-pill)}
.st-id__slot.on{color:var(--st-accent-ink);background:var(--st-accent-soft);border-color:var(--st-accent-border)}
.st-id__val{display:flex;flex-direction:column;gap:2px}
.st-id__k{font-size:var(--st-fs-1);line-height:var(--st-lh-1);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--st-subtle)}
.st-id__num{font-size:var(--st-fs-6);line-height:var(--st-lh-6);font-weight:800;letter-spacing:.04em}
.st-id__note{margin:0;font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-muted);text-wrap:pretty}
.st-id__ret{display:flex;align-items:flex-start;gap:6px;margin:0;padding:10px 12px;font-size:var(--st-fs-3);line-height:var(--st-lh-3);font-weight:600;color:var(--st-good);background:var(--st-good-bg);border:1px solid var(--st-good-line);border-radius:var(--st-r-sm);text-wrap:pretty}
.st-id__ret svg{flex:none;margin-top:2px}

/* ---------- BillLines ---------- */
.st-bill{display:flex;flex-direction:column;background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-r-asym);overflow:hidden}
.st-bill__title{padding:12px 16px 10px;border-bottom:1px solid var(--st-line);background:var(--st-surface-2)}
.st-bill__r{display:flex;align-items:baseline;justify-content:space-between;gap:var(--st-s4);padding:11px var(--st-s4);font-size:var(--st-fs-3);line-height:var(--st-lh-3)}
.st-bill__r+.st-bill__r{border-top:1px solid var(--st-line)}
.st-bill__r>span:last-child{font-weight:600;white-space:nowrap}
.st-bill__r em{display:block;font-style:normal;font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-subtle)}
.st-bill__r.is-sub{background:var(--st-surface-2);font-weight:700}
.st-bill__r.is-credit>span:last-child{color:var(--st-good)}
.st-bill__r.is-due{background:var(--st-bad-bg);color:var(--st-bad);font-weight:800;font-size:var(--st-fs-4)}
.st-bill__r.is-due.is-settled{background:var(--st-good-bg);color:var(--st-good)}

/* ---------- StaffToggle ---------- */
.st-tog{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--st-s4);padding:14px var(--st-s4);background:var(--st-surface);border:1px solid var(--st-line)}
.st-tog+.st-tog{border-top:0}
.st-tog__b{display:flex;flex-direction:column;gap:2px;min-width:0}
.st-tog__label{font-size:var(--st-fs-4);line-height:var(--st-lh-4);font-weight:700}
.st-tog__sub{font-size:var(--st-fs-2);line-height:var(--st-lh-2);color:var(--st-muted);text-wrap:pretty}
.st-tog__why{margin-top:4px;font-size:var(--st-fs-2);line-height:var(--st-lh-2);font-weight:600;color:var(--st-warn);text-wrap:pretty}
.st-tog__sw{flex:none;position:relative;width:52px;height:32px;margin-top:2px;padding:0;border:1px solid var(--st-line-strong);border-radius:var(--st-r-pill);background:var(--st-surface-3);cursor:pointer;transition:background var(--st-t,120ms) ease,border-color 120ms ease}
.st-tog__sw:focus-visible{outline:none;box-shadow:var(--st-focus)}
.st-tog__sw.is-on{background:var(--st-accent);border-color:var(--st-accent)}
.st-tog__knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:var(--st-r-pill);background:#fff;box-shadow:var(--st-e1);transition:transform 120ms ease}
.st-tog__sw.is-on .st-tog__knob{transform:translateX(20px)}

/* ============================================================
   APP SHELL — not from the design system.
   The DS ships .st-phone / .st-desk as fixed-size specimen frames for the
   gallery. A real app is fluid, so the shell below reuses the same parts at
   whatever size the browser gives it: bottom tab bar under 900px, side rail
   at or above. Everything visual still comes from the tokens above.
   ============================================================ */
.app{display:flex;flex-direction:column;height:100dvh;background:var(--st-bg)}
.app__body{flex:1;min-height:0;display:flex}
.app__main{flex:1;min-width:0;display:flex;flex-direction:column}
.app__scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
/* 920, not 1180. At 1180 a settings row was 1140px wide — the title at one
   end, a chevron at the other, and a hand's width of nothing between them.
   Screen width is not reading width, and every screen here is a list or a
   form. The Flutter shell caps at 1080 for the same reason and this is the
   same judgement at the density these cards actually want.
   Anything genuinely wide (the timeline) scrolls inside its own card, so it
   is unaffected by the column being narrower. */
.app__pad{padding:var(--st-s4);display:flex;flex-direction:column;gap:var(--st-s4);max-width:920px;margin:0 auto;width:100%}
/* The top bar stays full-bleed — it is the surface the screen sits on — but
   its CONTENT lines up with the column beneath it. Constraining the bar itself
   left it floating as a card with canvas either side of it, which reads as a
   second panel rather than a header. */
@media (min-width:900px){
  .app__main>.st-topbar{
    padding-left:max(var(--st-s4), calc((100% - 920px) / 2));
    padding-right:max(var(--st-s4), calc((100% - 920px) / 2));
  }
}
.app__pad>*{flex:none}
.app .st-tabbar{flex:none}
.app .st-tabbar--side{display:none}
@media (min-width:900px){
  .app .st-tabbar:not(.st-tabbar--side){display:none}
  .app .st-tabbar--side{display:flex}
  .app__pad{padding:var(--st-s5)}
}
.sec{display:flex;flex-direction:column;gap:var(--st-s2)}
.sec>h3{margin:0;font-size:var(--st-fs-1);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--st-subtle)}
.list{border:1px solid var(--st-line);border-radius:var(--st-r-asym);overflow:hidden;background:var(--st-surface)}
/* From the design's own screen scaffolding (staff/screens/screen.css). The
   system's .st-grid--4 is minmax(180px), which needs 372px for two columns and
   so renders one-up on a 390dp phone; the screens use 160px, which fits two.
   Metric rows take this one. */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--st-s3)}
/* The four callout tones from the design's screen scaffolding. Used where a
   screen states a fact that decides what happens next — "still free" versus
   "nothing is free" on a booking request — rather than as decoration. */
/* The occupancy gauge on the booking wizard's unit step. Reuses the four
   callout tones above for its ground, so a state reads the same here as
   anywhere else in this app — only the layout is new. Local: it is not in
   the design system. */
.occ{display:flex;align-items:center;gap:10px}
.occ__t{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 8px}
.occ__h{font-size:var(--st-fs-3);line-height:var(--st-lh-3);font-weight:700}
.occ__s{font-size:var(--st-fs-2);line-height:var(--st-lh-2);font-weight:500}
/* Narrow and fixed: a glance, not a chart. The words carry the figures. */
.occ__bar{flex:none;width:64px;height:6px;border-radius:3px;background:var(--st-line);overflow:hidden}
.occ__bar>span{display:block;height:100%;border-radius:3px;background:currentColor;transition:width .18s ease}
@media (prefers-reduced-motion:reduce){.occ__bar>span{transition:none}}

.warn,.bad,.good,.info{padding:12px 16px;border-radius:var(--st-r-sm);font-size:var(--st-fs-3);line-height:var(--st-lh-3);font-weight:600;text-wrap:pretty}
.warn{background:var(--st-warn-bg);border:1px solid var(--st-warn-line);border-left:3px solid var(--st-warn);color:var(--st-warn)}
.bad{background:var(--st-bad-bg);border:1px solid var(--st-bad-line);border-left:3px solid var(--st-bad);color:var(--st-bad)}
.good{background:var(--st-good-bg);border:1px solid var(--st-good-line);border-left:3px solid var(--st-good);color:var(--st-good)}
.info{background:var(--st-info-bg);border:1px solid var(--st-info-line);border-left:3px solid var(--st-info);color:var(--st-info)}
.row-actions{display:flex;gap:var(--st-s2);flex-wrap:wrap}
.spread{display:flex;gap:var(--st-s4);align-items:flex-start;flex-wrap:wrap}
.spread>*{flex:1 1 340px;min-width:0}
.center-pad{max-width:420px;margin:0 auto;width:100%;padding:var(--st-s6) var(--st-s4);display:flex;flex-direction:column;gap:var(--st-s4)}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:var(--st-fs-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--st-subtle)}
.field input,.field select,.field textarea{width:100%;min-height:var(--st-tap);padding:11px var(--st-s4);border:1px solid var(--st-line-strong);border-radius:var(--st-r-md);background:var(--st-surface);font:inherit;color:var(--st-ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--st-accent);box-shadow:var(--st-focus)}
.field__err{font-size:var(--st-fs-2);font-weight:600;color:var(--st-bad)}
.err{padding:var(--st-s3) var(--st-s4);border:1px solid var(--st-bad-line);border-left:3px solid var(--st-bad);border-radius:var(--st-r-sm);background:var(--st-bad-bg);color:var(--st-bad);font-size:var(--st-fs-3);font-weight:600}
.spin{width:22px;height:22px;border:2.5px solid var(--st-line);border-top-color:var(--st-accent);border-radius:50%;animation:sp .7s linear infinite;margin:var(--st-s8) auto}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{padding:var(--st-s8) var(--st-s4);text-align:center;color:var(--st-muted);font-size:var(--st-fs-3)}

/* ---- Form grouping ------------------------------------------------------
   Fields are grouped in a card like every other block on these screens. They
   used to sit bare on the canvas while notes, rows and lists all had a
   hairline card, so the inputs floated on grey and the vertical rhythm broke.
   Reported as "the spacing is broken". */
.fieldset{display:flex;flex-direction:column;gap:var(--st-s4)}

/* ---- Reveal a password --------------------------------------------------
   A password field with no way to see what you typed is a field people get
   wrong twice and then give up on — worse on a phone keyboard, which is where
   this product lives. The control sits inside the field, is a real button, and
   says which state it is in. */
.field--pw{position:relative}
.field--pw input{padding-right:64px}
.field__eye{position:absolute;right:6px;bottom:4px;height:40px;min-width:52px;padding:0 10px;
  border:0;background:none;cursor:pointer;font:inherit;font-size:var(--st-fs-2);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--st-accent);border-radius:var(--st-r-sm)}
.field__eye:hover{background:var(--st-accent-soft)}
.field__eye:focus-visible{outline:none;box-shadow:var(--st-focus)}

/* ---- Photograph thumbnails ---------------------------------------------
   The remove control used to sit ON the image and overflow its right edge.
   It belongs under the thumbnail, where it cannot obscure what it removes. */
.shot{display:flex;flex-direction:column;gap:6px;flex:none;width:96px}
.shot__img{width:96px;height:72px;object-fit:cover;border-radius:var(--st-r-sm);
  border:1px solid var(--st-line);background:var(--st-surface-2);display:block}
.shot__banner{width:100%;max-width:320px;height:120px;object-fit:cover;
  border-radius:var(--st-r-sm);border:1px solid var(--st-line);display:block;margin-bottom:12px}

/* ---- Rich text ----------------------------------------------------------
   Terms are the resort's own words, and they are shown to a guest as a
   document — so they need headings, lists, emphasis and the occasional
   photograph, not a plain textarea. */
.rt{display:flex;flex-direction:column;gap:0}
.rt__bar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;
  border:1px solid var(--st-line-strong);border-bottom:0;
  border-radius:var(--st-r-md) var(--st-r-md) 0 0;background:var(--st-surface-2)}
.rt__b{min-height:34px;min-width:34px;padding:0 9px;border:1px solid transparent;
  border-radius:var(--st-r-sm);background:none;cursor:pointer;font:inherit;
  font-size:var(--st-fs-2);font-weight:700;color:var(--st-ink)}
.rt__b:hover{background:var(--st-surface);border-color:var(--st-line)}
.rt__b:focus-visible{outline:none;box-shadow:var(--st-focus)}
.rt__b i{font-style:italic}
.rt__doc{min-height:240px;max-height:60vh;overflow-y:auto;padding:var(--st-s4);
  border:1px solid var(--st-line-strong);border-radius:0 0 var(--st-r-md) var(--st-r-md);
  background:var(--st-surface);font:inherit;color:var(--st-ink);line-height:1.55}
.rt__doc:focus{outline:none;border-color:var(--st-accent);box-shadow:var(--st-focus)}
.rt__doc:empty::before{content:attr(data-placeholder);color:var(--st-subtle)}
.rt__doc h2{font-size:var(--st-fs-5);font-weight:800;margin:18px 0 6px}
.rt__doc h2:first-child{margin-top:0}
.rt__doc p{margin:0 0 10px}
.rt__doc ul,.rt__doc ol{margin:0 0 10px;padding-left:22px}
.rt__doc li{margin:0 0 4px}
.rt__doc img{max-width:100%;height:auto;border-radius:var(--st-r-sm);margin:8px 0;display:block}

/* ---- Date range picker --------------------------------------------------
   One calendar, two ends. Two `<input type=date>` boxes made the guest's
   actual question — "how many nights, and is any of it free" — something you
   had to answer in your head between two dropdowns. */
.drp{border:1px solid var(--st-line-strong);border-radius:var(--st-r-md);
  background:var(--st-surface);overflow:hidden}
.drp__head{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:10px 12px;border-bottom:1px solid var(--st-line)}
.drp__title{font-weight:800;font-size:var(--st-fs-4)}
.drp__nav{display:flex;gap:4px}
.drp__nav button{width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--st-line);border-radius:var(--st-r-sm);
  background:var(--st-surface);cursor:pointer;color:var(--st-ink)}
.drp__nav button:disabled{opacity:.35;cursor:default}
.drp__dow,.drp__grid{display:grid;grid-template-columns:repeat(7,1fr)}
.drp__dow{padding:8px 8px 0}
.drp__dow span{text-align:center;font-size:var(--st-fs-1);font-weight:700;
  letter-spacing:.06em;color:var(--st-subtle)}
.drp__grid{padding:6px 8px 10px;gap:2px 0}
/* 44, not 42. The floor this product sets for a touch target, and the date
   picker is used on the same phones as everything else. The guest calendar
   was measured at 36 and raised; this was two under and would have been the
   same defect one surface over. No `aspect-ratio` here, so the height floor
   does not derive a width floor the way it does on `.mb-cal__day`. */
.drp__d{position:relative;min-height:44px;border:0;background:none;cursor:pointer;
  font:inherit;font-variant-numeric:tabular-nums;font-weight:600;color:var(--st-ink);
  border-radius:var(--st-r-sm)}
.drp__d:disabled{color:var(--st-subtle);cursor:default}
.drp__d.is-out{visibility:hidden}
.drp__d.is-today{box-shadow:inset 0 0 0 1px var(--st-accent)}
.drp__d.is-in{background:var(--st-accent-soft);border-radius:0}
.drp__d.is-end{background:var(--st-accent);color:#fff}
.drp__d.is-start{border-radius:var(--st-r-sm) 0 0 var(--st-r-sm)}
.drp__d.is-stop{border-radius:0 var(--st-r-sm) var(--st-r-sm) 0}
.drp__d.is-only{border-radius:var(--st-r-sm)}
/* 10.5px in `--st-muted`, not 9px in `--st-subtle`. The count under a date is
   what the picker exists to show, and it shipped at 3.44:1 — the same defect
   as the guest calendar's 8.5px at 3.42, on the same phones. `--st-subtle` is
   for icons; this is text, and `--st-muted` is 5.90:1. */
.drp__d small{display:block;font-size:10.5px;font-weight:600;line-height:1;
  letter-spacing:-.01em;margin-top:2px;color:var(--st-muted)}
.drp__d.is-end small{color:rgba(255,255,255,.85)}
.drp__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-top:1px solid var(--st-line);background:var(--st-surface-2);
  font-size:var(--st-fs-2);color:var(--st-muted)}
.drp__foot b{color:var(--st-ink)}
@media (min-width:760px){ .drp--two .drp__months{display:grid;grid-template-columns:1fr 1fr} }

/* ---- Section rhythm -----------------------------------------------------
   `.app__pad` is a flex column with a single 16px gap, so a section header and
   the card above it sat exactly as far apart as two cards in the same group.
   A section is a new subject and needs more room than a sibling — the same
   correction M01 needed, one screen out.

   Descendant rather than child: every screen's body is a `display: contents`
   wrapper, so `.sec` is a flex ITEM of the pad but not a DOM child of it, and
   `>` follows the DOM. Nested sections reset, or the extra margin compounds. */
.app__pad .sec { margin-top: 12px; }
.app__pad .sec:first-child { margin-top: 0; }
.sec .sec, .st-card .sec { margin-top: 0; }