/* HKGuru back office, PMS Light look. Tokens and shared classes are lifted from design/mock-v2.html; keep them in step with it. Light theme only: the PMS runs white. */
:root{
  color-scheme:light;
  --surface:#fff; --paper:#f7f8fa; --recessed:#f1f2f5; --field:#fff;
  --line:#e2e4e8; --line-2:#cdd0d6; --muted:#70747c; --muted-2:#52565e;
  --ink:#17171b; --ink-2:#3c3e46;
  --accent:#2563eb; --accent-deep:#1d4ed8; --accent-tint:#e8f0fe;
  --pine:#2f6b4f; --pine-tint:#e0ebe2; --amber:#c8801f; --amber-tint:#f6e8ce; --danger:#ae3a30;
  --st-dirty:234 88 12; --st-progress:37 99 235; --st-clean:202 138 4; --st-ready:15 118 110; --st-cleaned:21 128 61; --st-dueout:253 233 221; --st-dueout-ink:#9a3a08; --st-occupied:55 65 108; --st-ooo:100 116 139; --st-none:203 213 225;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Hanken Grotesk",system-ui,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:22px;font-weight:500;font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.t-display{font-family:var(--display);font-size:28px;line-height:34px;font-weight:800}
.t-title{font-family:var(--display);font-size:20px;line-height:26px;font-weight:700}
.t-subtitle{font-size:16px;line-height:22px;font-weight:650}
.t-strong{font-weight:700}
.t-label{font-size:12.5px;line-height:16px;font-weight:600;color:var(--muted)}
.t-caption{font-size:12px;line-height:16px;font-weight:500;color:var(--muted)}


/* ---------- app top bar (PMS AppTopBar) ---------- */
.top{height:64px;display:flex;align-items:center;gap:10px;padding:0 20px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.pill{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:10px;background:var(--paper);border:1px solid var(--line);max-width:260px}
.pill:hover{border-color:var(--accent)}
.pill .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill svg{color:var(--muted);flex:none}
.tabs{display:flex;gap:4px;align-items:center;margin-left:4px}
.tab{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.tab:hover{background:var(--paper)}
.tab[aria-current=page]{background:rgba(37,99,235,.12);color:var(--accent)}
.tab svg{width:18px;height:18px}
.top .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.icobtn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r);color:var(--ink-2)}
.icobtn:hover{background:var(--paper)}
.who{font-size:12px;color:var(--muted-2)}
.signout,.acct summary.who{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;font-size:13px;color:var(--ink);list-style:none;cursor:pointer}
.acct summary::-webkit-details-marker{display:none}.acct .initials{display:none}.acct .caret{font-size:11px;color:var(--muted-2)}
.menu.acctmenu{left:auto;right:0;width:220px}.acctname{display:flex;flex-direction:column;gap:2px;padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.acctmenu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink);font-weight:600;font-size:14px}.acctmenu a:hover{background:var(--recessed)}
.signout:hover,.acctlink:hover{color:var(--ink);border-color:var(--accent)}
.top .pmsbtn{min-height:40px;padding:0 14px;font-size:14px}
.menu{position:absolute;top:calc(100% + 6px);left:0;width:240px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:50}
.menu a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-2)}
.menu a:hover{background:var(--paper)}
.menu a[aria-current=page]{background:rgba(37,99,235,.12);color:var(--accent)}
.launcher{width:400px;left:auto;right:0}
.launcher h4{margin:6px 10px 2px;font-size:12.5px;color:var(--muted);font-weight:600}
.launcher .grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.launcher .grid2 a{min-height:52px;align-items:flex-start;flex-direction:column;justify-content:center;gap:0;line-height:16px}
.launcher .grid2 a small{font-weight:500;color:var(--muted);font-size:12px}
.hasmenu{position:relative}
.tag{font-size:12px;font-weight:600;background:var(--line);color:var(--ink-2);border-radius:999px;padding:1px 7px}
.tab[aria-disabled=true],.menu .soon{color:var(--muted);cursor:default}
.tab[aria-disabled=true]:hover{background:transparent}
.menu form{margin:0}
.menu button,.menu .cur{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border-radius:9px;font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);text-align:left}
.menu button:hover{background:var(--paper)}
.menu .cur[aria-current=true]{background:rgba(37,99,235,.12);color:var(--accent)}
.menu small{font-weight:500;color:var(--muted);font-size:12px}
.menu .soon{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;font-size:14px;font-weight:600}
.launcher .grid2 .soon{min-height:52px;align-items:flex-start;flex-direction:column;justify-content:center;gap:0;line-height:16px}
.launcher .grid2 .soon small{display:block}

/* ---------- page shell ---------- */
.shell{max-width:2400px;margin:0 auto;padding:20px 24px 40px}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.ph p{margin:8px 0 0;color:var(--muted-2);max-width:62ch}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* The day picker in a page header: a native date input and "Today" beside it, each 44 px tall */
.daypick{display:flex;gap:8px;align-items:center}
.daypick input[type=date]{height:44px;min-height:44px;padding:0 10px;border:1.5px solid var(--line-2);border-radius:10px;font:inherit;font-size:14px;font-weight:600;background:var(--field);color:var(--ink)}
.daypick input[type=date]:hover{border-color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r);font-size:14px;font-weight:700;background:var(--ink);color:#fff}
.btn:hover:not(:disabled){background:var(--ink-2)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--muted-2)}
.btn.ghost:hover:not(:disabled){background:var(--recessed);border-color:var(--ink)}
.newstep td{vertical-align:bottom}.newstep .t-caption{display:block;margin-bottom:4px}
tr.dim td{opacity:.55}tr.dim td:last-child{opacity:1}th .t-caption{display:block;font-weight:400}
.preset.custom{border-style:dashed}.preset.custom span{white-space:normal}
.fullrule{display:flex;flex-direction:column;gap:10px}.seg{display:inline-flex;border:1.5px solid var(--muted-2);border-radius:var(--r);overflow:hidden;align-self:flex-start}
.seg button{min-height:40px;padding:0 14px;font-weight:700;background:var(--surface);color:var(--ink)}.seg button.on{background:var(--ink);color:#fff}.seg button+button{border-left:1.5px solid var(--muted-2)}
.weekdays{display:flex;gap:6px;flex-wrap:wrap}.weekdays .wd{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border:1.5px solid var(--muted-2);border-radius:var(--r);font-weight:700;cursor:pointer;background:var(--surface)}
.weekdays .wd.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.accent{background:var(--accent)}.btn.accent:hover:not(:disabled){background:var(--accent-deep)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- filter pills (PMS FilterPills) ---------- */
.filters{display:inline-flex;gap:4px;background:var(--recessed);border:1px solid var(--line);border-radius:var(--r);padding:4px;flex-wrap:wrap;margin-bottom:20px}
.filters button{min-height:36px;padding:0 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted-2);display:inline-flex;align-items:center;gap:8px}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.filters .n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.filters button[aria-pressed=true] .n{color:var(--ink)}
.dot{width:10px;height:10px;border-radius:999px;flex:none}

/* ---------- board ---------- */
.floor{margin-top:22px}
.floorhead{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--line);padding-bottom:6px;margin-bottom:14px}
.floorhead .sq{width:28px;height:28px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:14px}
.floorhead .cnt{margin-left:auto}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.tile{height:138px;display:flex;flex-direction:column;text-align:left;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);transition:transform .12s,border-color .12s,box-shadow .12s;width:100%}
.tile:hover{transform:translateY(-2px);border-color:#3b82f6;box-shadow:0 8px 20px rgba(0,0,0,.1)}
/* The Board's tile is a box: the link (band and body) opens the room, and the desk's button sits under it, outside the link, on a row of its
   own at the right, so it covers none of the tile's text; a tile with a button grows to hold it. The tile hides what overflows, so the
   link's keyboard ring is drawn inside it. */
.tile.acts{height:auto;min-height:138px}
.tile .tilelink{display:flex;flex-direction:column;flex:1;min-width:0;color:inherit;text-decoration:none}
.tile .tilelink:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.tile .tileact{flex:none;align-self:flex-end;min-height:44px;margin:0 8px 8px;padding:0 14px}
.band{height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;flex:none}
.band svg{width:14px;height:14px;stroke-width:2.2}
.band .lab{display:flex;align-items:center;gap:6px;white-space:nowrap}
.band .at{font-weight:600;opacity:.9;letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.band .ic-star{color:var(--amber);fill:currentColor;stroke:#fff;stroke-width:1.5}
/* A DND, double locked or could-not-enter room due to be checked again: its check times in the warning look (amber tint, ink), on any band colour */
.band .at.late{background:var(--amber-tint);color:var(--ink);opacity:1;border-radius:999px;padding:1px 7px}
.tile .body{padding:10px 12px 10px;display:flex;flex-direction:column;flex:1;min-width:0}
.tile .num{font-family:var(--display);font-size:24px;line-height:28px;font-weight:800}
.tile .loc{color:var(--muted);font-size:12.5px;line-height:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.tile .foot{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.ava{width:22px;height:22px;border-radius:999px;background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;font-size:10px;font-weight:700;flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:600}
.chip.dash{border:1px dashed var(--line-2);color:var(--muted)}
.chip.warn{background:var(--amber-tint);color:var(--amber)}
.b-dirty{background:rgb(var(--st-dirty))}.b-progress{background:rgb(var(--st-progress))}.b-clean,.b-hold{background:rgb(var(--st-clean))}.b-ready{background:rgb(var(--st-ready))}.b-cleaned{background:rgb(var(--st-cleaned))}.b-dueout{background:rgb(var(--st-dueout));color:var(--st-dueout-ink)}.b-occupied{background:rgb(var(--st-occupied))}.b-ooo{background:rgb(var(--st-ooo))}.b-notserviced{background:rgb(var(--st-occupied))}
.b-none{background:var(--line-2);color:var(--ink-2)}
.d-dirty{background:rgb(var(--st-dirty))}.d-progress{background:rgb(var(--st-progress))}.d-clean,.d-hold{background:rgb(var(--st-clean))}.d-ready{background:rgb(var(--st-ready))}.d-cleaned{background:rgb(var(--st-cleaned))}.d-dueout{background:rgb(var(--st-dueout));border:1px solid var(--st-dueout-ink)}.d-occupied{background:rgb(var(--st-occupied))}
.pmsbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 14px}.d-ooo{background:rgb(var(--st-ooo))}.d-none{background:rgb(var(--st-none))}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px;color:var(--muted);font-size:12.5px;font-weight:600}
.legend span{display:inline-flex;align-items:center;gap:6px}

/* ---------- setup: rail + section page (PMS LeftRail / SectionPage) ---------- */
.setup{display:flex;min-height:calc(100vh - 64px)}
.rail{width:264px;flex:none;background:var(--recessed);border-right:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:4px}
.rail .back{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:10px;background:var(--pine);color:#fff;font-size:14px;font-weight:600;margin-bottom:8px}
.rail .home{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-2)}
.rail .home[aria-current=page]{background:var(--accent-tint);color:var(--accent-deep)}
.group{margin-top:12px}
.group>button{width:100%;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border-radius:10px;background:var(--accent-tint);border:1px solid rgba(37,99,235,.25);color:var(--accent-deep);font-size:12.5px;font-weight:700;text-align:left}
.group>button .n{margin-left:auto;opacity:.7;font-variant-numeric:tabular-nums}
.group ul{list-style:none;margin:4px 0 0 12px;padding:0 0 0 8px;border-left:2px solid rgba(205,208,214,.8)}
.group li a{display:flex;align-items:center;min-height:40px;padding:0 10px 0 12px;border-radius:10px;font-size:14px;color:var(--ink-2)}
.group li a:hover{background:rgba(37,99,235,.05)}
.group li a[aria-current=page]{background:var(--accent);color:#fff;font-weight:600}
.section{flex:1;min-width:0;padding:28px 24px 48px;max-width:1760px}
.section.narrow{max-width:1120px;padding:28px 40px 48px}
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--muted-2);font-weight:700;padding:6px 10px;margin-left:-10px;border-radius:10px;border:1px solid transparent;margin-bottom:14px;min-height:40px}
.backlink:hover{color:var(--ink);border-color:var(--line);background:var(--surface)}

/* ---------- data table (Syncfusion grid re-skin look) ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:640px}
th{background:var(--recessed);color:var(--muted-2);font-size:12.5px;font-weight:600;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tfoot td{border-top:1px solid var(--line)}
tr:hover td{background:var(--accent-tint)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.active{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--pine)}
.active::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--pine)}
.inactive{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted-2)}
.inactive::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--muted)}
.rowact{display:flex;gap:4px}
.toolbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.search{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--field);color:var(--muted);font-size:14px;min-width:220px}
.search:hover{border-color:var(--accent)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit}
.rowact button{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;border-radius:9px;font-size:14px;font-weight:600;color:var(--accent);background:transparent}
.rowact button:hover:not(:disabled){background:rgba(37,99,235,.1)}
.rowact button.danger{color:var(--danger)}
.rowact button:disabled{color:var(--muted);cursor:not-allowed}
.card td input,.card td select{min-height:44px;width:100%;border:1.5px solid var(--line-2);border-radius:10px;padding:0 10px;font:inherit;background:var(--field);color:var(--ink)}
tr.retired{opacity:.6}
.card td input[type=checkbox]{width:22px;height:22px;min-height:0;padding:0;accent-color:var(--accent)}
.card td .rowact input{width:104px}
.chkcell{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px}
.card td input::placeholder{color:var(--muted)}
th.credit,td.credit{width:112px;min-width:96px}
.toolbar input.field{flex:1;min-width:200px;max-width:420px;min-height:44px;border:1.5px solid var(--line-2);border-radius:10px;padding:0 10px;font:inherit;background:var(--field);color:var(--ink)}
.confirm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line);background:var(--amber-tint);font-weight:600}

/* ---------- setup home (PMS SetupHome) ---------- */
.hero{padding:36px 24px 28px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#edf2fb,#fff)}
.hero p{color:var(--muted-2);margin:8px 0 0;max-width:62ch}
.hub{padding:32px 24px 64px;max-width:1760px}
.hub h2{margin:28px 0 12px}
.hub h2:first-child{margin-top:0}
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.scard{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;min-height:96px}
.scard:hover{border-color:#3b82f6;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.scard .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent);flex:none}
.scard .ic svg{width:21px;height:21px}
.scard .d{color:var(--muted);font-size:13.5px;line-height:18px;margin-top:3px}
.scard .att{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--amber);font-size:12.5px;font-weight:600}
.scard .att::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--amber)}

/* ---------- form (property / housekeeping rules) ---------- */
.form{display:grid;gap:18px;padding:22px 24px}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.f label{display:block;margin-bottom:6px}
.toggle{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.sw{width:44px;height:26px;border-radius:999px;background:var(--line-2);position:relative;flex:none;margin-top:2px}
.sw.on{background:var(--accent)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw.on::after{left:21px}
.toggle .d{color:var(--muted);font-size:13.5px;margin-top:2px}
/* the kinds of room the inspection gate holds: under the gate's switch, lined up with its words, one 44 px box a row */
.kinds{border:0;margin:-12px 0 0 58px;padding:0 0 4px;min-width:0;display:grid;justify-items:start}
.kinds legend{padding:0}
.kinds .d{color:var(--muted);font-size:13.5px;margin:2px 0 2px}
.formfoot{display:flex;justify-content:flex-end;gap:8px;padding:14px 24px;border-top:1px solid var(--line);background:var(--recessed)}

/* ---------- service program (presets and the six rules) ---------- */
.card>.hd{padding:16px 22px 0}
.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:16px 22px}
.preset{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;min-height:96px;background:var(--surface)}
.preset:hover{border-color:var(--accent)}
.preset.on{border-color:var(--accent);background:var(--accent-tint)}
.preset b{display:block;margin-bottom:4px}
.preset span{font-size:12.5px;color:var(--muted-2)}
.rules{padding:6px 22px 18px;display:grid;gap:0}
.rule{display:grid;grid-template-columns:1fr minmax(180px,280px);gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.rule .d{font-size:13px;color:var(--muted)}
.rule select{font:inherit;font-weight:600;width:100%;min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--field);color:var(--ink)}
.rule select:focus-visible{border-color:var(--accent)}
@media (max-width:640px){.rule{grid-template-columns:1fr}}
td.credit input.ov{font-weight:700}
.svc-name{font-weight:700}
td .chip.plain{margin-left:4px}

/* ---------- day pages: tap tiles, summary chips, assignment columns, timeline ---------- */
button.tile{cursor:pointer;font:inherit;color:inherit}
/* Room list tile: the state tap is the body; rush, note and task sit in a 44 px foot row, with the note or task picker opening under it. */
.tile.tap{height:auto;min-height:138px}
.tile.tap.rushed{border-color:var(--amber)}
.tile.tap:focus-within{transform:none}
.tile>button.tap{display:flex;flex-direction:column;flex:1;width:100%;text-align:left;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit}
.tile .task{font-size:13px;line-height:18px;font-weight:700;color:var(--ink-2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tnote{font-size:12.5px;line-height:16px;color:var(--muted-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.tap>.foot{padding:0 8px 8px;gap:6px;flex-wrap:wrap}
.ibtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ibtn:hover{border-color:var(--line-2);background:var(--paper)}
.ibtn.on{border-color:var(--line-2);background:var(--recessed)}
.ibtn.rush{color:var(--amber)}
.ibtn.rush.on{background:var(--amber-tint);border-color:var(--amber)}
.ibtn.rush.on svg{fill:currentColor}
.tilextra{display:grid;gap:6px;padding:0 8px 8px}
.tilextra input,.tilextra select{font:inherit;width:100%;min-height:44px;padding:0 10px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--field);color:var(--ink)}
.tilextra .acts{display:flex;gap:6px;justify-content:flex-end}
.tile .nm{font-family:var(--display);font-size:18px;line-height:24px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.plain{background:var(--recessed);color:var(--ink-2)}
.sub.hint{margin-top:12px}
.tline{list-style:none;margin:0;padding:4px 0}
.tline li{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line)}
.tline li:last-child{border-bottom:0}
.tline.vlist li{grid-template-columns:112px 1fr}

/* ---------- assignments (mock v3 #s-assign): stats, the fixed-height filter panel, the Unassigned pool first and one card per attendant, chips
   with a state strip, and the action bar stuck to the bottom of the screen. The bar is the last thing in the page's flow (sticky, not fixed), so it
   takes its own room under the last row of chips however many rows it wraps to. Sized to fit 60 rooms and 4 attendants in 1920x1080 without a
   page scroll: 56 px stat tiles and card headers, 24 px block headings, 44 px chip rows 6 px apart, and the filter panel at the mock's density
   (36 px rows; each box's whole label, at least 44 px wide, is its target). ---------- */
/* The page is at least one screen tall, so a short day still has its bar on the bottom edge. */
.shell:has(.actbar){padding-bottom:0;display:flex;flex-direction:column;min-height:calc(100vh - 64px)}
.shell:has(.actbar) .assign{flex:1 0 auto;display:flex;flex-direction:column}
.assign>.cols{margin-bottom:12px}
.assign .stats{margin-bottom:12px}
.assign .stat{min-height:56px;padding:6px 14px}.assign .stat b{line-height:24px}.assign .stat span{display:block;line-height:16px}
.stat.warn{border-color:var(--amber);background:var(--amber-tint)}
.assign .stale:empty{margin:0}
.fpanel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:2px 12px 6px;margin-bottom:12px}
.fcol{position:relative;min-width:0}
.fcol h4{margin:0 6px;min-height:32px;font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;justify-content:space-between}
.fcol h4 .all{min-height:44px;min-width:44px;margin:-6px -8px;padding:0 8px;color:var(--accent);font-size:12.5px;font-weight:600}
.fcol .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows,4),36px);gap:2px 8px;height:calc(var(--rows,4) * 36px + (var(--rows,4) - 1) * 2px);overflow:hidden}
.fcol label{display:flex;align-items:center;gap:8px;min-height:36px;min-width:44px;padding:0 8px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer}
.fcol label:hover{background:var(--paper)}.fcol label.on{background:var(--accent-tint);color:var(--accent-deep)}
.fcol input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--accent)}
.fcol .lb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcol .n{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted)}
.fcol .more{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 8px;font-size:13px;font-weight:600;color:var(--accent);border-top:1px solid var(--line);margin-top:2px}
.fcol details.more{display:block;padding:0}
.fcol details.more>summary{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 8px;list-style:none;cursor:pointer}
.fcol details.more>summary::-webkit-details-marker{display:none}
.fcol .more .dd{margin-left:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:2px 10px;color:var(--ink-2)}
.fcol .ddlist{position:absolute;left:0;right:0;top:100%;z-index:30;display:grid;gap:2px;max-height:320px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;align-items:start}
.acol{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-height:240px;min-width:0;display:flex;flex-direction:column}
.acol.pool{border:2px dashed var(--line-2);background:var(--recessed)}
.ahead{min-height:56px;padding:8px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.ahead .ava{width:34px;height:34px;font-size:12px}
.aname{min-width:0}
.ahead .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ahead .sub{font-size:12px;line-height:16px;color:var(--muted);margin:0}
.ahead .cr{margin-left:auto;text-align:right;white-space:nowrap}.ahead .cr b{display:block;font-family:var(--display);font-size:20px;line-height:22px;font-variant-numeric:tabular-nums}
.cbar{height:6px;background:var(--recessed)}.cbar i{display:block;height:100%;background:var(--accent);border-radius:0 3px 3px 0}.cbar i.over{background:var(--amber)}
.block{padding:4px 10px 8px}.block h5{margin:0 2px;min-height:24px;font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;justify-content:space-between}
.chips{display:flex;flex-wrap:wrap;gap:6px;min-height:52px;border-radius:10px;padding:4px}
.block.drop .chips{outline:2px dashed var(--accent);background:var(--accent-tint)}
.chips .empty{align-self:center;padding:0 4px}
.rchip{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:0 12px 0 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line-2);font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.05);cursor:pointer}
.rchip::before{content:"";flex:none;width:5px;height:60%;border-radius:3px;background:rgb(var(--st-dirty))}.rchip.so::before{background:rgb(var(--st-occupied))}.rchip.vac::before{background:rgb(var(--st-ready))}
.rchip small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--body);font-weight:600;font-size:11px;color:var(--muted)}.rchip .pin{color:var(--accent)}.rchip .star{color:var(--amber);fill:currentColor}.rchip svg{width:14px;height:14px;stroke-width:2.2;flex:none}
.rchip .ndot{width:6px;height:6px;border-radius:999px;background:var(--accent);flex:none}
.rchip:hover{border-color:#3b82f6}
.rchip.sel{outline:2px solid var(--accent)}
.rchip.dragging{opacity:.4}
.rchip.before{box-shadow:-3px 0 0 var(--accent)}
.rchip.after{box-shadow:3px 0 0 var(--accent)}
.acol.pool .rchip{min-width:120px;justify-content:flex-start}
.btn.danger{background:var(--surface);color:var(--danger);border:1px solid var(--line-2)}
.btn.danger:hover:not(:disabled){background:var(--surface);border-color:var(--danger)}
.actbar{position:sticky;bottom:0;z-index:50;margin:auto -24px 0;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 24px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.actbar .grow{flex:1 1 320px;min-width:0;color:var(--muted-2);font-size:14px}.actbar .grow b{color:var(--ink)}
.actbar .moves,.actbar .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.actbar .confirm{border:0;border-radius:10px;padding:0 12px;min-height:44px;color:var(--ink)}
.actbar .hint{display:inline-flex;align-items:center;min-height:44px}
/* The toast rises above the bar instead of covering Publish. */
.assign ~ .toast{bottom:auto;top:80px}
/* Tablet: one column of boxes per group and narrower cards at 1280; the panel stacks and cards go two across at 1024; one card per row at 900. */
@media (max-width:1280px){.cols{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.fcol .opts{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:36px;height:auto}}
@media (max-width:1024px){.fpanel{grid-template-columns:minmax(0,1fr)}.fcol .opts{grid-template-columns:repeat(2,minmax(0,1fr))}.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- chart wizard: step rail with Back and the blue Next beside it, published note; the Chart tab's unpublished dot ---------- */
.steprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.steprow .steps{flex:1;margin:0}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.steps a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:650;color:var(--ink-2)}
.steps a:hover{border-color:var(--line-2)}
.steps .n{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--recessed);font-size:13px;font-weight:700}
.steps a[aria-current=step]{border-color:var(--accent);background:var(--accent-tint);color:var(--accent)}
.steps a[aria-current=step] .n{background:var(--accent);color:#fff}
.steps .step.done .n{background:var(--pine-tint);color:var(--pine)}
.steps .step small{font-weight:600}
.note{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;padding:6px 16px;margin:0 0 16px;border-radius:var(--r);background:var(--pine-tint);color:var(--pine);font-weight:650}
.note a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
.note.info{background:var(--accent-tint);border:1px solid #c7d7fb;color:var(--ink-2)}
.note.warn{background:var(--amber-tint);border:1px solid var(--amber);color:var(--ink);padding:10px 16px}
.importbar{justify-content:space-between;margin-bottom:8px}
.importact{margin:0 0 16px}
.importnext{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:0 0 16px}
.importnext a:not(.btn){display:inline-flex;align-items:center;min-height:44px;font-weight:650}
.importcard{padding:16px 16px 0}
.card>.hd + .importcard{padding-bottom:16px}
.filebtn{cursor:pointer;background:var(--surface)}
.filebtn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.steplead{margin:0 0 16px}
/* Step 3: the eyebrow and title on one row, the step rail beside them. */
.charthead.compact{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;margin-bottom:12px}
.charthead.compact .ph{margin:0;flex-wrap:nowrap}
.charthead.compact .ph>div{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.charthead.compact .ph .actions:empty{display:none}
.charthead.compact .steprow{flex:1 1 560px;margin:0}

/* ---------- chart step 2: stats and room tiles with the guest, the stay, service chips and the total ---------- */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:150px}
.stat b{font-family:var(--display);font-size:22px;line-height:26px;display:block}
.stat span{color:var(--muted);font-size:12.5px}
.grid.rooms{grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}
.b-vac{background:rgb(var(--st-ready))}
.rtile:hover{transform:none}
button.band{width:100%;height:44px;border:0;cursor:pointer;font-family:inherit;text-align:left}
button.band:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rtile .body{gap:8px;flex:none}
.rtile .num{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rtile .num .no{display:inline-flex;align-items:center;gap:8px}
.rtile .num small{font-family:var(--body);font-size:12.5px;line-height:16px;color:var(--muted);font-weight:600;text-align:right}
.rtile .tnote{margin-top:0;white-space:normal}
.stay{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted-2)}
.stay b{color:var(--ink)}
.stay .ed{border:1px dashed var(--line-2);border-radius:6px;padding:0 6px;min-height:28px;display:inline-flex;align-items:center;gap:4px}
.stay input[type=date]{min-height:44px;border:0;background:transparent;font:inherit;color:var(--ink);padding:0 2px}
.svcs{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.svc{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px 0 10px;border-radius:999px;background:var(--accent-tint);color:var(--accent-deep);font-size:12.5px;font-weight:600;border:0;font-family:inherit}
.svc.sys{background:var(--recessed);color:var(--ink-2)}
.svc .x{width:44px;height:44px;margin:-6px -10px -6px -8px;display:grid;place-items:center;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.svc .x span{width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:rgba(0,0,0,.08)}
.svc.add{min-height:44px;background:transparent;border:1px dashed var(--line-2);color:var(--muted-2);cursor:pointer}
/* A room's day set by hand (RoomDayControls): on the room page's Today card and the Board's room panel */
.roomday{display:grid;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.rdrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rdrow>.t-label{min-width:110px}
.roomday .seg button{min-height:44px}
.roomday select.svc.add{min-height:44px;padding:0 10px;font:inherit;font-size:12.5px;font-weight:600}
.roomday .total{font-size:12.5px;color:var(--ink-2)}
.rdnote{display:grid;gap:6px}
.rdnote textarea{font:inherit;min-height:44px;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--field);color:var(--ink);resize:vertical}
.rdact{display:flex;align-items:center;gap:10px}
.rdact .btn{margin-left:auto}
.rdpms{margin:0}
/* The guest's request for the stay (GuestRequestSection), last in the room's day controls */
.gr{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.gr p{margin:0}
.gr .note.warn{margin:0}
.grpick{display:flex;flex-wrap:wrap;gap:6px}
.grpick button{min-height:44px;padding:0 12px;border:1.5px solid var(--muted-2);border-radius:var(--r);background:var(--surface);color:var(--ink);font-weight:700}
.grpick button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grrules{display:grid;gap:10px}
.grwho{display:flex;flex-wrap:wrap;gap:0 16px;color:var(--ink-2)}
.grwho label{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.grwho input{width:20px;height:20px;margin:0;accent-color:var(--ink)}
.grprev{color:var(--ink-2);font-weight:650}
.gract{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gract select{min-height:44px;padding:0 10px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--field);color:var(--ink);font:inherit}
/* The guest requests to review (GuestRequestReview), at the top of the Chart's rooms step */
.grbox{display:grid;gap:10px;padding:14px 16px;margin:0 0 16px}
.grbox h2,.grbox .error{margin:0}
.grlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.grrow{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.grrow p{margin:0}
.grline.warn{padding:8px 12px;border-radius:var(--r);background:var(--amber-tint);border:1px solid var(--amber);color:var(--ink);font-weight:650}
/* "Needs you" (NeedsYou) at the top of today's Board, above the count tiles: a line per thing waiting, each a link or a button; one quiet line when none */
.needs{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.needline{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--amber);background:var(--amber-tint);color:var(--ink);font-size:14px;font-weight:650;text-align:left}
.needline:hover{border-color:var(--accent);color:var(--accent-deep)}
.needs.none{align-items:center;min-height:44px;color:var(--muted);font-size:13.5px;font-weight:600}
.rtile .total{font-size:12.5px;color:var(--muted)}
.rtile .total b{color:var(--ink)}
.tab .dot{width:8px;height:8px}
.tab .count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;line-height:20px;font-weight:700}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- the same habit on every room screen: count tiles that filter, one count line, the rooms with nothing to do folded at the bottom ---------- */
button.stat{min-height:44px;text-align:left;cursor:pointer}
button.stat:hover{border-color:var(--line-2)}
.stat[aria-pressed=true]{border-color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
.stat[aria-pressed=true] span{color:var(--accent-deep)}
.countline{margin:0 0 12px;font-size:16px;line-height:22px;font-weight:650;color:var(--ink-2)}
.stats+.t-caption{margin:-6px 0 0}
.foldgroup{margin-top:28px}
.fold{width:100%;min-height:44px;display:flex;align-items:center;gap:12px;padding:6px 16px;border-radius:var(--r);background:var(--recessed);border:1px solid var(--line);color:var(--muted-2);text-align:left}
.fold:hover{border-color:var(--line-2);color:var(--ink)}
.fold .ft{display:flex;flex-direction:column;flex:1;min-width:0}
.fold .fl{font-weight:650}
.fold .chev{flex:none;transition:transform .12s}
.fold[aria-expanded=true] .chev{transform:rotate(180deg)}
.folded .tile{opacity:.85}
.folded .tile:focus-within,.folded .tile.open{opacity:1}
/* Today's rooms: a tap on the body opens the tile (Rush, Note and "+ add" on a room with nothing to do); closed, the chips keep to one line. */
.rtile .body{cursor:pointer}
.rtile button.num{width:100%;min-height:44px;align-items:center;text-align:left;cursor:pointer}
.rtile.quiet{min-height:0}
.rtile.open{border-color:var(--line-2);box-shadow:0 8px 20px rgba(0,0,0,.1)}
.rtile:not(.open) .svcs{flex-wrap:nowrap;overflow:hidden}
.rtile .svc{flex:none}
/* Assignments: the filter boxes fold behind one 44 px "Filters" row; the unassigned tile rings the pool. */
.fpanel-wrap{margin-bottom:12px}
.fpanel-wrap>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:650;cursor:pointer;list-style:none}
.fpanel-wrap>summary::-webkit-details-marker{display:none}
.fpanel-wrap>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.fpanel-wrap[open]>summary{margin-bottom:8px}
.fpanel-wrap[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.acol.pool.focus{border:2px solid var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}

/* ---------- tablet width: the top bar fits from 1100 px down to the phone layout (the property pill gives way first, tabs pack tighter) ---------- */
@media (max-width:1100px){.top .pill,.top>.hasmenu{min-width:0;flex-shrink:1}.tabs{min-width:0}.tab{padding:0 10px}}

/* ---------- phone width ---------- */
@media (max-width:900px){.rail{display:none}.section,.section.narrow{padding:20px 16px 40px}.cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .top{height:auto;flex-wrap:wrap;padding:8px 16px;gap:8px}
  .tabs{order:3;width:100%;overflow-x:auto}
  .tabs .hasmenu{position:static}
  .tabs .menu{top:calc(100% + 6px);left:16px;right:16px;width:auto}
  .top .right .hasmenu{position:static}
  .launcher{left:16px;right:16px;width:auto}
  .top>.hasmenu{position:static}
  .top .hasmenu .menu{left:16px;right:16px;width:auto}
  .top .right{margin-left:auto}
  .top .pmsbtn{min-height:44px}
  .acct .name{display:none}.acct .initials{display:inline}
  .top .right .menu.acctmenu{left:auto;right:16px;width:220px}
  .shell{padding:16px 16px 40px}
  .actbar{margin-left:-16px;margin-right:-16px;padding:10px 16px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .hero,.hub{padding-left:16px;padding-right:16px}
  .tab,.pill,.menu a,.menu button,.menu .cur,.filters button,.signout,.acctlink,.rowact button,.rail .home,.group>button,.group li a,.backlink,.search,.icobtn{min-height:44px}
}

/* ---------- keyboard focus ---------- */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1:focus{outline:none}

/* ---------- details menus (More, property picker): a native <details> stands in for the mock's script-driven popover ---------- */
details.hasmenu>summary{list-style:none;cursor:pointer}
details.hasmenu>summary::-webkit-details-marker{display:none}
details.hasmenu>summary.tab{display:flex}
details.hasmenu>summary.pill{display:flex}
.menu{display:none}
details[open]>.menu{display:block}

/* ---------- form fields on real inputs (the mock draws .in as a div) ---------- */
.f input:not([type=checkbox]),.f select,.f textarea{font:inherit;width:100%;min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--field);color:var(--ink)}
.f textarea{padding:10px 12px}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{border-color:var(--accent)}
.f input:disabled,.f select:disabled{background:var(--recessed);border-color:var(--line);color:var(--ink-2);-webkit-text-fill-color:var(--ink-2);opacity:1;cursor:not-allowed} /* shown, not changed here (General's INNGuru settings) */

/* ---------- carried over from the old sheet ---------- */
.sub{color:var(--muted-2);margin:4px 0 0}
.error{color:var(--danger);font-weight:700;margin:4px 0}
.ok{color:var(--pine);font-weight:700;margin:4px 0}
.validation-message{color:var(--danger);font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r);font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:90}
.blazor-error-boundary{background:var(--danger);color:#fff;padding:1rem}
.blazor-error-boundary::after{content:"Something went wrong."}
#blazor-error-ui{display:none;position:fixed;left:0;bottom:0;width:100%;z-index:1000;padding:.6rem 1.25rem .7rem;background:var(--amber-tint);color:var(--ink);box-shadow:0 -1px 2px rgba(0,0,0,.2)}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem}

/* ---------- sign in and choose a property ---------- */
.login{max-width:420px;margin:12vh auto 48px;padding:24px 20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);display:grid;gap:10px}
.login h1{font-size:26px;line-height:32px;font-weight:800}
.login .sub{margin:0 0 6px}
.login form{display:grid;gap:8px}
.login label{font-weight:700;font-size:14px}
.login input{font:inherit;min-height:44px;padding:0 12px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--field);color:var(--ink);width:100%}
.login input:focus-visible{border-color:var(--accent)}
.login .btn{width:100%;margin-top:6px}
.choose form{display:block}
.pwcard{max-width:520px}
@media (max-width:440px){.login{margin-top:24px}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- setup pages: flush rail, hints, real switch buttons ---------- */
main.shell:has(.setup-shell){padding:0;max-width:none}
.f .hint{display:block;margin-top:6px;color:var(--muted);font-size:13px}
button.sw{border:0;padding:0;cursor:pointer}
button.sw::before{content:"";position:absolute;inset:-9px 0}
button.sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sw[aria-disabled=true]{opacity:.45;cursor:not-allowed}
/* Staff and PINs: a switch shown greyed on a row nobody here changes, the PIN's state above its controls, and the email and first password a
   row's web access switch asks for */
span.sw{display:inline-block;vertical-align:middle}
.pinstate{display:block;margin-bottom:6px}
.webask{display:grid;gap:6px;margin-top:8px;min-width:220px}

/* ---------- today's chart (the Chart after publish): the People line with Add someone, progress on chips and cards, Send home, the away card ---------- */
.people{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:0 0 12px;font-size:14px;color:var(--muted-2)}
.people b{color:var(--ink)}
.people details.add{position:relative}
.people details.add>summary{list-style:none;padding:0 12px}
.people details.add>summary::-webkit-details-marker{display:none}
.people .ddlist{position:absolute;left:0;top:calc(100% + 4px);z-index:30;min-width:240px;display:grid;gap:2px;max-height:320px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.people .ddlist button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;border-radius:8px;text-align:left;font-weight:700;color:var(--ink)}
.people .ddlist button:hover{background:var(--recessed)}
.people .ddlist button small{font-weight:600;color:var(--muted)}
.people .ddlist a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-top:1px solid var(--line);color:var(--accent-deep);font-weight:600}
.btn.sm{padding:0 10px;font-size:13px}
.ahead .btn.sm{flex:none;margin-left:4px}
.rchip.p-prog{border-color:rgb(var(--st-progress));box-shadow:inset 0 0 0 1px rgb(var(--st-progress))}
.rchip.p-insp{border-color:rgb(var(--st-clean));box-shadow:inset 0 0 0 1px rgb(var(--st-clean))}
.rchip.p-done{background:var(--recessed);color:var(--muted-2);border-color:var(--line)}
.rchip.p-done::before{opacity:.35}
/* not serviced today (her finish closed a stayover she could not clean): her part is over but it is not done, the Board's slate, dashed */
.rchip.p-notserv{background:var(--recessed);border-style:dashed;border-color:rgb(var(--st-occupied))}
.rchip .tick{color:rgb(var(--st-ready))}
.acol.away{opacity:.75;background:var(--recessed)}
/* ---------- the room page's Today card: the state line and one row of visit buttons; Can't clean is a dropdown of four reasons ---------- */
.card.today,.card.problems{overflow:visible} /* the Can't clean dropdown hangs below the card */
.visitrow,.probrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:4px 0 2px}
.visitrow .vstate,.probrow .vstate{flex:1 1 220px;min-width:0;font-size:16px}
.visitrow details.cant{position:relative}
.visitrow details.cant>summary{list-style:none;padding:0 12px}
.visitrow details.cant>summary::-webkit-details-marker{display:none}
.visitrow .ddlist{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:220px;display:grid;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.visitrow .ddlist button{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;text-align:left;font-weight:700;color:var(--ink)}
.visitrow .ddlist button:hover{background:var(--recessed)}
/* ---------- work orders: the list rows, the open row's actions and timeline, the report form, the room page's problems card ---------- */
.wofilters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px}
.wofilters .search{flex:1 1 260px;max-width:420px}
.wolist{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.worow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.worow.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.worow.hot{border-color:var(--danger)}
.wohead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;width:100%;min-height:52px;padding:8px 14px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;border-radius:var(--r)}
.wohead:hover{background:var(--recessed)}
.wohead .num{font-family:var(--display);font-weight:800;color:var(--muted-2)}
.wohead .where{font-family:var(--display);font-weight:800;font-size:16px}
.wohead .cat{font-weight:700}
.wohead .note{flex:1 1 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted-2)}
.wohead .who{font-weight:600;white-space:nowrap}
.wohead .state{color:var(--muted-2);white-space:nowrap}
.wohead .age{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.chip.hot{background:var(--danger);color:#fff;border-color:var(--danger)}
.wobody{border-top:1px solid var(--line);padding:12px 14px 14px}
.woacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:12px}
.woacts select,.woacts input{font:inherit;min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--field);color:var(--ink)}
.woacts input{flex:1 1 260px;min-width:0}
.wotl{margin:0 0 12px}
.wocomment{display:flex;gap:8px;align-items:center}
.wocomment input{flex:1 1 auto;min-width:0;font:inherit;min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--field);color:var(--ink)}
.woform{margin:0 0 16px}
.woform .checks{display:flex;gap:18px;flex-wrap:wrap}
.chk{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--accent)}
.warnline{padding:8px 12px;border-radius:10px;background:var(--amber-tint);color:var(--ink)}
.downform{margin:12px 0 0}
.wohistory{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.wohistory li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:44px}
.wohistory a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.chartlinks{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0 0 12px;font-size:14px;color:var(--muted-2)}
.chartlinks a{color:var(--accent);font-weight:700}
/* ---------- recurring jobs: the list (off rows quiet), the form's "every N units" pair, the rooms grid ---------- */
table.jobs tr.off td{color:var(--muted-2)}
table.jobs tr.jobedit>td{background:var(--recessed);padding:12px}
.jobform{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.f .pair{display:flex;align-items:center;gap:8px}
.f .pair input{width:84px;flex:none}
.f .pair select{flex:1 1 auto;min-width:0}
.f.wide{grid-column:1/-1}
.jgrid{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.jgrid li{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-variant-numeric:tabular-nums}
.jgrid li b{font-family:var(--display);font-weight:800}
.jgrid li span{font-size:12.5px;color:var(--muted-2)}
.jgrid li.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.jgrid li.wait{background:var(--amber-tint);border-color:var(--amber)}
.roomjobs{border-top:1px solid var(--line);padding-top:8px}
/* ---------- photos: the room page's strip (an empty frame for a missing step), the earlier days, the full view, the Board's camera chip ---------- */
.pstrip{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pstrip.small{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.pthumb{display:flex;flex-direction:column;gap:4px;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.pthumb img{display:block;width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--recessed);border:1px solid var(--line)}
.pthumb:hover img{border-color:var(--accent)}
.pthumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
.pstrip .cap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:13px;color:var(--muted-2)}
.pstrip .cap .t-strong{color:var(--ink)}
.pmissing{display:flex;flex-direction:column;gap:4px}
.pmissing .frame{display:grid;place-items:center;aspect-ratio:4/3;max-width:100%;border:1.5px dashed var(--amber);border-radius:10px;background:var(--amber-tint);color:var(--amber)}
.pby{margin:8px 0 0}
.pday{display:grid;gap:6px;padding:8px 0}
.devup{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.devup select{font:inherit;min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--field);color:var(--ink)}
.pview{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:rgba(15,16,20,.92);padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 12px)}
.pview:focus{outline:none}
.pviewbar,.pviewnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--surface);border-radius:var(--r);padding:8px 12px}
.pviewbar .ptitle{display:flex;flex-direction:column;flex:1 1 200px;min-width:0}
.pview img{flex:1 1 auto;min-height:0;width:100%;max-width:100%;object-fit:contain;margin:12px 0}
.pviewnav{justify-content:space-between}
.wophotos{display:grid;gap:10px;margin:0 0 12px}
.wophotos .pick{justify-self:start;position:relative;cursor:pointer}
.chip.camera{background:var(--recessed);color:var(--muted-2)}
.chip.notes{background:var(--accent-tint);color:var(--accent-deep)}

/* ---------- INNGuru admin: brand chip, hotel page cards, model options, change list ---------- */
.brand{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;white-space:nowrap}
.brand small{font-weight:600;opacity:.75}
/* The HKGuru logo (design/make_logos.py): the top bar's way home, the admin's chip and the sign-in pages. On a phone the top bar keeps its room for the hotel and the menus. */
.top .logo{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-6px;border-radius:10px}
.top .logo img{width:34px;height:34px;display:block}
.brand img{width:26px;height:26px;display:block;margin-left:-6px}
.login .logo{width:72px;height:72px;display:block;margin-bottom:4px}
@media (max-width:720px){.top .logo{display:none}}
.two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1100px){.two{grid-template-columns:1fr}}
.stack{display:grid;gap:18px}
.card.adm .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 22px;border-bottom:1px solid var(--line)}
.card.adm .hd p{margin:2px 0 0;color:var(--muted);font-size:13px}
.card.adm .note,.card.adm .cardmsg{margin:0;padding:12px 22px;color:var(--muted-2);font-size:13.5px}
.card.adm .error.cardmsg{color:var(--danger)}
.card.adm .ok.cardmsg{color:var(--pine)}
.model{display:grid;gap:8px;padding:16px 22px}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;min-height:64px;background:var(--surface);cursor:pointer}
.opt:hover{border-color:var(--accent)}
.opt.on{border-color:var(--accent);background:var(--accent-tint)}
.opt .rd{width:20px;height:20px;border-radius:999px;border:2px solid var(--line-2);flex:none;margin-top:2px;background:#fff}
.opt.on .rd{border:6px solid var(--accent)}
.opt .optbody{display:block}
.opt .d{display:block;color:var(--muted-2);font-size:13px}
.flexopt{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:0 22px 16px}
.flexopt .check{display:flex;gap:12px;align-items:flex-start;min-height:44px;cursor:pointer}
.flexopt .check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}
.flexopt .check .d{display:block;color:var(--muted-2);font-size:13px}
.pill-ok,.pill-off,.pill-paid{font-size:12px;font-weight:600;border-radius:999px;padding:1px 8px;margin-left:6px}
.pill-ok{color:var(--pine);background:var(--pine-tint)}
.pill-off{color:var(--muted-2);background:var(--recessed)}
.pill-paid{color:var(--amber);background:var(--amber-tint)}
.loglist{list-style:none;margin:0;padding:0}
.loglist li{display:grid;grid-template-columns:128px 1fr;gap:12px;padding:11px 22px;border-bottom:1px solid var(--line);font-size:14px}
.loglist li:last-child{border-bottom:0}
.loglist .t-caption{display:block}
.dangerbtn{color:var(--danger)!important}
.rowact a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:9px;font-size:14px;font-weight:600;color:var(--accent)}
.rowact a:hover{background:rgba(37,99,235,.1)}
.nowrap{white-space:nowrap}
.filterform{margin:0}
.toolbar .btn{min-height:44px}
.offconfirm{border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px}
.top form{margin:0}

/* ---------- INNGuru admin: new hotel lookup, ClientHub marks, refresh card ---------- */
.lookup{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.lookup .found{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--pine);font-weight:650}
.src{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--accent-tint);color:var(--ink-2);font-size:11px;font-weight:650;text-transform:none;letter-spacing:0}
.chk{display:inline-flex;align-items:center;gap:8px;min-height:44px}

/* ---------- the support view: INNGuru support in a hotel's own back office gets this amber strip above the top bar ---------- */
.strip{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:4px 20px;background:var(--amber-tint);border-bottom:1px solid var(--amber);color:var(--ink);font-size:13.5px;font-weight:600}
.strip.closed{background:var(--line-2);border-bottom:1px solid var(--line)}
.strip .what{flex:1;min-width:0}
.strip b{font-weight:700}
.strip .back{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--amber);background:var(--surface);font-size:14px;font-weight:700;white-space:nowrap}
.strip .back:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:720px){.strip{padding:4px 16px}}

/* ---------- damage: the Damage page's sections, the damage card (the room page's Damage card shows the same), its folds ---------- */
.dmgsec{margin:0 0 28px}
.dmgsec>h2{margin:0 0 12px}
.dmgsec h3.t-subtitle{margin:16px 0 8px}
.dmglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;align-items:start}
.dmghist>summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 16px;border-radius:var(--r);background:var(--recessed);border:1px solid var(--line);cursor:pointer;list-style:none}
.dmghist>summary::-webkit-details-marker{display:none}
.dmghist>summary:hover{border-color:var(--line-2)}
.dmghist>summary .chev{margin-left:auto;flex:none;transition:transform .12s}
.dmghist[open]>summary{margin-bottom:12px}
.dmghist[open]>summary .chev{transform:rotate(180deg)}
.dmgcard{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px}
.dmgcard .pstrip{margin:0}
.dmgcard p{margin:0}
.dmgnophoto{display:flex;align-items:center;justify-content:center;gap:8px;min-height:88px;border:1.5px dashed var(--line-2);border-radius:10px;background:var(--recessed);color:var(--muted-2);font-weight:600}
.dmghead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.dmghead .room{font-family:var(--display);font-weight:800;font-size:16px}
.dmghead .spot{font-weight:700}
.dmghead .num,.dmghead .sep{color:var(--muted-2)}
.dmgclosed{color:var(--ink-2)}
.dmgknown{display:grid;gap:6px;padding-top:8px;border-top:1px solid var(--line)}
.dmgknown ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dmgknown li{display:flex;align-items:center;gap:10px;font-size:14px}
.kthumb{flex:none;width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer}
.kthumb img{display:block;width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--recessed)}
.kthumb:hover img{border-color:var(--accent)}
.dmgacts{display:flex;flex-wrap:wrap;gap:8px}
.dmgfold{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px;border-radius:10px;background:var(--recessed)}
.dmgfold select,.dmgfold input[type=text]{font:inherit;min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--field);color:var(--ink)}
.dmgfold input[type=text]{flex:1 1 220px;min-width:0}
.dmgfold input:disabled{opacity:.55}
.dmgchoice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;flex:1 1 100%}
.dmgfold .pick{position:relative;cursor:pointer}
/* ---------- damage on the room page (the Damage card, Add damage) and on the Work orders page (the damage an order came from, the room's known damage) ---------- */
.dmgbody{display:grid;gap:12px;padding:12px 14px 14px}
.dmgaddrow{display:flex;flex-wrap:wrap;gap:8px}
.dmgadd{margin:0}
.dmgpick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.dmgpick .pick{position:relative;cursor:pointer}
.wohead .fromdmg{white-space:nowrap}
.wodmg{display:grid;gap:4px;margin:0 0 12px}
.wodmg a{display:inline-flex;align-items:center;justify-self:start;min-height:44px;color:var(--accent);font-weight:700}
.knowndmg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0}
.knowndmg span{display:inline-flex;align-items:center;gap:8px}
.knowndmg img{flex:none;width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--recessed)}

/* ---------- lost and found: the Lost and found page's toolbar and sections, the item card, its folds and timeline (as the damage rules) ---------- */
.lfpills{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px}
.lfpills .search{flex:1 1 260px;max-width:420px;min-height:44px}
.lfpills .filters{margin:0}
.lfpills .filters button{min-height:44px}
.lfsec{margin:0 0 28px}
.lfsec>h2{margin:0 0 12px}
.lflist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;align-items:start}
.lflist+.lflist{margin-top:12px}
.lfhist>summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 16px;border-radius:var(--r);background:var(--recessed);border:1px solid var(--line);cursor:pointer;list-style:none}
.lfhist>summary::-webkit-details-marker{display:none}
.lfhist>summary:hover{border-color:var(--line-2)}
.lfhist>summary .chev{margin-left:auto;flex:none;transition:transform .12s}
.lfhist[open]>summary{margin-bottom:12px}
.lfhist[open]>summary .chev{transform:rotate(180deg)}
.lfmore{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.lfcard{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px}
.lfcard .pstrip{margin:0}
.lfcard p{margin:0}
.lfnophoto{display:flex;align-items:center;justify-content:center;gap:8px;min-height:88px;border:1.5px dashed var(--line-2);border-radius:10px;background:var(--recessed);color:var(--muted-2);font-weight:600}
.lfhead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.lfhead .num{font-family:var(--display);font-weight:800;font-size:16px}
.lfhead .kind{font-weight:700}
.lfhead .room,.lfhead .sep{color:var(--muted-2)}
.lfdue{color:var(--danger)}
.lfsoon,.lfamber{color:var(--amber);font-weight:600}
.lfclosed{color:var(--ink-2)}
.lfasks{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--line);display:grid;gap:6px}
.lfasks li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;font-size:14px}
.lfacts{display:flex;flex-wrap:wrap;gap:8px}
.lffold{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px;border-radius:10px;background:var(--recessed)}
.lffold select,.lffold input[type=text],.lffold input[type=date],.lfcomment input{font:inherit;min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--field);color:var(--ink)}
.lffold input[type=text],.lfcomment input{flex:1 1 220px;min-width:0}
.lffold .warnline{flex:1 1 100%}
.lfchoice{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;flex:1 1 100%}
.lfcomment{display:flex;flex-wrap:wrap;gap:8px}
.lftimeline>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none}
.lftimeline>summary::-webkit-details-marker{display:none}
.lftimeline>summary .chev{margin-left:auto;flex:none;transition:transform .12s}
.lftimeline[open]>summary .chev{transform:rotate(180deg)}
.lftimeline ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--ink-2)}
/* ---------- lost and found: guest requests, the office's Add, the room page's card ---------- */
.lfreq{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px}
.lfreq p{margin:0}
.lfreach{font-weight:600}
.lfsec h3.t-subtitle{margin:16px 0 8px}
.lfadd,.lfreqform{margin:0 0 16px}
.lfroombody{display:grid;gap:12px;padding:12px 14px 14px}
.lfroomlist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.lfroomlist a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:700}
.lfroomasks{display:grid;gap:4px}
.lfroomasks li{padding:4px 0;font-size:14px}
.lfroompast>summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 16px;border-radius:var(--r);background:var(--recessed);border:1px solid var(--line);cursor:pointer;list-style:none}
.lfroompast>summary::-webkit-details-marker{display:none}
.lfroompast>summary:hover{border-color:var(--line-2)}
.lfroompast>summary .chev{margin-left:auto;flex:none;transition:transform .12s}
.lfroompast[open]>summary{margin-bottom:8px}
.lfroompast[open]>summary .chev{transform:rotate(180deg)}
/* ---------- Setup › Lost and found: the hold periods and the kinds ---------- */
.lfhold .formfoot{align-items:center}
.lfliable,.lfsentence{margin:0}
.lfsentence{padding:10px 12px;border-radius:10px;background:var(--recessed)}
table.lfkinds tr.off td{color:var(--muted-2)}
table.lfkinds .inactive{margin-left:10px}
table.lfkinds .lfkept{display:block;margin-top:4px}
table.lfkinds .kname-es.same{color:var(--muted)}
table.lfkinds .rowact{flex-wrap:wrap}
table.lfkinds .rowact button{min-height:44px}
/* ---------- Setup › Housekeeping rules: the extras and the ready-made notes, each card with its own Save ---------- */
form.rlextras,form.rlnotes{margin-top:16px}
.rlcarderror{margin:12px 14px 0}
table.rlextras tr.off td{color:var(--muted-2)}
table.rlextras select{min-width:140px}
table.rlextras .rowact{flex-wrap:wrap}
.rlextras .rowact button,.rlnotes .rowact button,.rlextras .formfoot button,.rlnotes .formfoot button{min-height:44px}
#rl-extra-add,#rl-note-add{margin-right:auto}
.rlnotelist{list-style:none;margin:0;padding:14px;display:grid;gap:10px}
.rlnotelist li{display:flex;gap:10px;align-items:center}
.rlnotelist input{flex:1}
/* The Board's room panel (RoomPanel): beside the Board, over its right side, full height; the whole width on a narrow screen */
.roompanel{position:fixed;top:64px;right:0;bottom:0;width:min(460px,100vw);z-index:39;overflow-y:auto;display:grid;align-content:start;gap:14px;padding:20px;background:var(--surface);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.12)}
.roompanel .rphead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.roompanel h2{margin:0;font-size:28px}
.roompanel h2:focus{outline:none}
.rpwho{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.rpwho a{color:var(--accent-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.card.today .rpwho{margin:10px 0}
.roompanel .visitrow{flex-wrap:wrap}
@media (max-width:900px){.roompanel{width:100vw;border-left:0}}
/* On a phone the top bar wraps to two rows of its own height: the panel is a full-screen sheet over it, with Close at its top. */
@media (max-width:720px){.roompanel{top:0;z-index:45}}
/* The support view's amber strip sits above the top bar, so 64 px would leave the panel's heading and Close under the bar: there the panel
   is a sheet over both, with Close at its top. */
html:has(.strip[role=note]) .roompanel{top:0;z-index:45}
/* Where the row is narrow (the panel, a phone) Can't clean has a row of its own, so opening it moves nothing, and its reasons open in
   the row under it: a menu hung from the button would open past the edge and be cut off. */
.roompanel .visitrow details.cant{flex-basis:100%}
.roompanel .visitrow .ddlist{position:static;margin-top:6px;box-shadow:none}
@media (max-width:720px){.visitrow details.cant{flex-basis:100%}.visitrow .ddlist{position:static;margin-top:6px;box-shadow:none}}
.roompanel .rpnotes{display:flex;flex-direction:column;gap:8px}
.rpnotes .rpmore{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* The panel, one job at a time (the room panel spec): what is set in a light grey box, the blue tile, the guest's tiles two to a row and
   Something broken apart under a thin line, then the small links. Tiles are tall buttons with a picture, a name and a small line. */
.rpset{background:var(--recessed);border-radius:12px;padding:10px 14px}
.rpset ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rpset li:first-child{font-weight:700}
.rpset .rpline{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--accent-deep);font-weight:700;text-align:left;text-decoration:underline;text-underline-offset:2px}
.roompanel .rpask{margin:4px 0 -4px}
.ptiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ptiles.apart{grid-template-columns:1fr;border-top:1px solid var(--line);padding-top:12px}
.ptile{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:68px;padding:12px;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink);text-align:left;line-height:20px}
.ptile:hover{border-color:var(--ink-2)}
.ptile:focus-visible,.jobback:focus-visible,.job-pick button:focus-visible,.job-go:focus-visible,.job-no:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ptile svg{flex:none;color:var(--accent-deep)}
.ptile b{display:block;font-weight:700}
.ptile small{display:block;margin-top:2px;font-size:12.5px;line-height:16px;font-weight:500;color:var(--muted-2);overflow-wrap:anywhere}
.ptile.on{border-color:var(--amber);background:var(--amber-tint)}
.ptile.blue{align-items:center;background:var(--accent);border-color:var(--accent);color:#fff}
.ptile.blue:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.ptile.blue svg{color:#fff}
.ptile.amber{background:var(--amber-tint);border-color:var(--amber)}
.ptile.amber svg{color:var(--ink-2)}
.rpfoot{display:flex;flex-wrap:wrap;gap:0 20px}
.rpfoot a,.rpfoot button{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:14px;font-weight:700;color:var(--accent-deep)}
/* A job's screen slides in over the panel: the way back, the job's name, one question, big picture buttons (.job-pick, pressed shows
   blue), the green box that says what will happen (.job-say), one green button (.job-go) and the grey way back (.job-no). */
.jobhost{display:grid;gap:12px;animation:jobin .16s ease-out}
@keyframes jobin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.jobhost{animation:none}}
.jobback{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-weight:700;color:var(--accent-deep)}
.jobback span{font-size:22px;line-height:1}
.jobtitle{font-size:24px;line-height:30px}
.job{display:grid;gap:12px}
.job-q{margin:4px 0 0;font-size:17px;line-height:24px;font-weight:700}
.job-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.job-pick.one{grid-template-columns:1fr}
.job-pick button{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);font-weight:700;text-align:left}
.job-pick button:hover{border-color:var(--ink-2)}
.job-pick button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-tint)}
.job-pick button small{display:block;font-weight:500;font-size:12.5px;color:var(--muted-2)}
.job-say{margin:0;padding:10px 12px;border:1px solid var(--pine);border-radius:12px;background:var(--pine-tint);color:var(--ink)}
.job-go{min-height:52px;padding:0 16px;border-radius:12px;background:var(--pine);color:#fff;font-size:16px;font-weight:800}
.job-go:hover:not(:disabled){background:#24563f}
.job-go:disabled{opacity:.45;cursor:not-allowed}
.job-no{min-height:44px;color:var(--muted-2);font-weight:700}
.job-no:hover{color:var(--ink)}
.rnotes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rnotes li{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.rnotes .rntext{flex-basis:100%;overflow-wrap:anywhere}
.card.notes .more{min-height:44px;margin-top:10px}
/* Something extra: the picture tiles with their count (.job-item), what the room was given today (.job-today); the note's chips (.job-chips). */
.job-items{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.job-item{display:grid;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface)}
.job-item.on{border-color:var(--accent);background:var(--accent-tint)}
.job-item-pick{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;font-weight:700;text-align:left}
.job-item-pick:focus-visible,.job-qty button:focus-visible,.job-chips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.job-qty{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 8px 8px}
.job-qty button{min-width:44px;min-height:44px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--surface);font-size:20px;font-weight:800}
.job-qty button:disabled{opacity:.4}
.job-qty b{min-width:20px;text-align:center;font-size:18px}
.job-today ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.job-today li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.job-chips{display:flex;flex-wrap:wrap;gap:8px}
.job-chips button{min-height:44px;padding:0 14px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--surface);font-weight:600}
.job-chips button:hover{border-color:var(--ink-2)}
.job-yours{margin:0;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px}
.job-yours small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted-2)}
.job-row{display:flex;gap:8px}
/* Service for the stay's days of the week (.job-days) and its amber line; Something broken's tiles (b the name, small what is open) and its
   few words. A category already open on the room is amber until it is picked. */
.job-days{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.job-days button{min-height:52px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);font-weight:700}
.job-days button:hover{border-color:var(--ink-2)}
.job-days button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-tint)}
.job-days button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.job .note.warn{margin:0}
.job-pick button b{display:block;font-weight:700}
.job-pick button.amber:not([aria-pressed=true]){border-color:var(--amber);background:var(--amber-tint)}
.job-pick button.amber small{color:var(--ink)}
.job label.job-q{display:block}
.job input[type=text],.job select{min-height:44px}