/* =============================================================
   HotelSuite ERP - design system
   Palette borrowed from hotel interiors: deep green lacquer rail,
   warm paper canvas, brass used only where money is shown.
   ============================================================= */
:root{
  --rail:#0E211C; --rail-2:#16302a; --rail-text:#9FB5AE; --rail-active:#E8F0ED;
  --canvas:#F6F7F5; --surface:#FFFFFF; --surface-2:#FBFBF9;
  --ink:#16221E; --ink-2:#4C5A55; --ink-3:#7C8A85;
  --line:#E2E7E4; --line-2:#EEF1EF;
  --brand:#1F6F5C; --brand-soft:#E7F1ED; --brand-dark:#164F42;
  --brass:#A87A32; --brass-soft:#F6EFE2;
  --danger:#B4372F; --danger-soft:#FBEAE8;
  --warn:#9A6B12; --warn-soft:#FBF1DE;
  --ok:#1F6F5C; --ok-soft:#E7F1ED;
  --info:#2B5C88; --info-soft:#E8F0F7;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --shadow:0 1px 2px rgba(20,34,30,.06), 0 8px 24px -12px rgba(20,34,30,.18);
  --rail-w:248px;
  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem; --fs-20:1.25rem; --fs-26:1.625rem; --fs-32:2rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-14);line-height:1.5;
}
h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:-.012em;color:var(--ink)}
h1{font-size:var(--fs-26)} h2{font-size:var(--fs-20)} h3{font-size:var(--fs-16)}
p{margin:0 0 .75rem}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
table{border-collapse:collapse;width:100%}
.num,td.num,.kpi__value,.money{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.rail{
  width:var(--rail-w);flex:0 0 var(--rail-w);background:var(--rail);color:var(--rail-text);
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:60;
  transition:width .18s ease;
}
.rail__brand{display:flex;align-items:center;gap:.625rem;padding:1.1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.07)}
.rail__mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(150deg,var(--brand),#2E8F76);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:.8rem;flex:0 0 auto}
.rail__name{color:#fff;font-weight:640;font-size:.95rem;white-space:nowrap;overflow:hidden}
.rail__org{display:block;font-size:var(--fs-12);color:var(--rail-text);font-weight:400}
.rail__nav{flex:1;overflow-y:auto;padding:.5rem .625rem 2rem}
.rail__nav::-webkit-scrollbar{width:6px}
.rail__nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.rail__heading{padding:1rem .625rem .375rem;font-size:var(--fs-12);color:#6E8780;letter-spacing:.02em}
.rail__link{
  display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;border-radius:var(--r-sm);
  color:var(--rail-text);font-size:var(--fs-14);white-space:nowrap;margin-bottom:1px;
}
.rail__link:hover{background:var(--rail-2);color:var(--rail-active);text-decoration:none}
.rail__link.is-active{background:var(--rail-2);color:#fff;box-shadow:inset 2px 0 0 var(--brand)}
.rail__link svg{flex:0 0 18px;width:18px;height:18px;opacity:.85}
.rail__link.is-soon{opacity:.45;cursor:not-allowed}
.rail__soon{margin-left:auto;font-size:10px;padding:1px 5px;border-radius:999px;background:rgba(255,255,255,.09);color:#C3D4CE}
.rail__foot{padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.07);font-size:var(--fs-12)}

.main{flex:1;min-width:0;margin-left:var(--rail-w)}
body.rail-collapsed .rail{width:68px;flex-basis:68px}
body.rail-collapsed .rail__name,body.rail-collapsed .rail__link span,
body.rail-collapsed .rail__heading,body.rail-collapsed .rail__soon,body.rail-collapsed .rail__foot{display:none}
body.rail-collapsed .rail__link{justify-content:center}
body.rail-collapsed .main{margin-left:68px}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.75rem;padding:.625rem 1.25rem;
}
.iconbtn{
  width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer;flex:0 0 auto;position:relative;
}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.search{position:relative;flex:1;max-width:460px}
.search input{
  width:100%;height:36px;padding:0 .75rem 0 2.1rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font-size:var(--fs-14);color:var(--ink);
}
.search svg{position:absolute;left:.6rem;top:9px;width:18px;height:18px;color:var(--ink-3)}
.search__results{
  position:absolute;top:42px;left:0;right:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);max-height:60vh;overflow:auto;display:none;z-index:70;
}
.search__results.is-open{display:block}
.search__group{padding:.4rem .75rem;font-size:var(--fs-12);color:var(--ink-3);background:var(--surface-2);
  border-bottom:1px solid var(--line-2)}
.search__item{display:block;padding:.55rem .75rem;border-bottom:1px solid var(--line-2);color:var(--ink)}
.search__item:hover{background:var(--brand-soft);text-decoration:none}
.search__item small{display:block;color:var(--ink-3)}
.topbar__spacer{flex:1}

.hotelpick{position:relative}
.hotelpick__btn{
  display:flex;align-items:center;gap:.5rem;height:36px;padding:0 .7rem;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-14);color:var(--ink);max-width:230px
}
.hotelpick__btn b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto}

.dropdown{
  position:absolute;right:0;top:44px;min-width:260px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:.375rem;display:none;z-index:70;
}
.dropdown.is-open{display:block}
.dropdown--wide{min-width:340px;max-height:70vh;overflow:auto}
.dropdown__item{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;padding:.5rem .625rem;
  border:0;background:none;border-radius:var(--r-sm);color:var(--ink);font-size:var(--fs-14);cursor:pointer}
.dropdown__item:hover{background:var(--surface-2);text-decoration:none}
.dropdown__item.is-active{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.dropdown__sep{height:1px;background:var(--line-2);margin:.375rem 0}
.dropdown__head{padding:.5rem .625rem;font-size:var(--fs-12);color:var(--ink-3)}

.badge-count{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--danger);color:#fff;font-size:10px;display:grid;place-items:center;font-weight:600}

.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);
  display:grid;place-items:center;font-weight:650;font-size:var(--fs-13)}

/* ---------- page ---------- */
.page{padding:1.5rem 1.25rem 3rem;max-width:1520px;margin:0 auto}
.page__head{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.page__head p{color:var(--ink-2);margin:.25rem 0 0}
.page__actions{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.crumb{font-size:var(--fs-13);color:var(--ink-3);margin-bottom:.35rem}
.crumb a{color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:36px;padding:0 .9rem;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:var(--fs-14);font-weight:550;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn--danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn--danger:hover{background:#93291f;color:#fff}
.btn--ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn--ghost:hover{background:var(--line-2)}
.btn--sm{height:30px;padding:0 .65rem;font-size:var(--fs-13)}
.btn[disabled],.btn.is-loading{opacity:.6;pointer-events:none}
.btn svg{width:16px;height:16px}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card__head{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border-bottom:1px solid var(--line-2)}
.card__head h3{font-size:var(--fs-14);font-weight:640}
.card__head .btn{margin-left:auto}
.card__body{padding:1rem}
.card__body--flush{padding:0}
.card__foot{padding:.65rem 1rem;border-top:1px solid var(--line-2);font-size:var(--fs-13);color:var(--ink-2)}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem;margin-bottom:1rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.85rem .95rem;display:block;color:inherit}
.kpi:hover{text-decoration:none;border-color:#CFD8D4}
.kpi__label{font-size:var(--fs-12);color:var(--ink-3);display:flex;align-items:center;gap:.35rem}
.kpi__value{font-size:var(--fs-26);font-weight:650;letter-spacing:-.02em;margin-top:.2rem;line-height:1.15}
.kpi__meta{font-size:var(--fs-12);color:var(--ink-2);margin-top:.15rem}
.kpi--money .kpi__value{color:var(--brass)}
.kpi--alert .kpi__value{color:var(--danger)}
.kpi--head{background:linear-gradient(160deg,#123B32,#0E211C);border-color:#123B32}
.kpi--head .kpi__label{color:#9FB5AE}
.kpi--head .kpi__value{color:#fff}
.kpi--head .kpi__meta{color:#B8CCC5}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto}
.table{font-size:var(--fs-13);min-width:100%}
.table th{
  text-align:left;font-weight:600;color:var(--ink-3);font-size:var(--fs-12);
  padding:.55rem .75rem;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap;
}
.table td{padding:.6rem .75rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tbody tr:hover{background:var(--surface-2)}
.table td.num,.table th.num{text-align:right}
.table--sticky th{position:sticky;top:0;z-index:2}
.table a{font-weight:550}
.t-muted{color:var(--ink-3)}
.t-right{text-align:right}

.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:var(--fs-12);font-weight:550;line-height:1.45}
.badge--ok{background:var(--ok-soft);color:var(--ok)}
.badge--info{background:var(--info-soft);color:var(--info)}
.badge--warn{background:var(--warn-soft);color:var(--warn)}
.badge--danger{background:var(--danger-soft);color:var(--danger)}
.badge--muted{background:var(--line-2);color:var(--ink-2)}
.badge--brass{background:var(--brass-soft);color:var(--brass)}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field--full{grid-column:1/-1}
.field label{font-size:var(--fs-13);color:var(--ink-2);font-weight:550}
.field .hint{font-size:var(--fs-12);color:var(--ink-3)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=time],input[type=search],input[type=tel],select,textarea{
  width:100%;min-height:36px;padding:.4rem .6rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-14);
}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
input[disabled],select[disabled]{background:var(--line-2);color:var(--ink-3)}
.checkline{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-14);color:var(--ink-2)}
.checkline input{width:16px;height:16px;min-height:0;accent-color:var(--brand)}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin:0 0 1rem}
legend{font-size:var(--fs-13);font-weight:640;padding:0 .4rem;color:var(--ink-2)}
.form-actions{display:flex;gap:.5rem;justify-content:flex-end;padding-top:.5rem}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;margin-bottom:1rem}
.filters .field{min-width:150px}
.chipbar{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:var(--fs-13);color:var(--ink-2);cursor:pointer}
.chip:hover{background:var(--surface-2);text-decoration:none}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- grid helpers ---------- */
.grid{display:grid;gap:1rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.split{display:grid;grid-template-columns:2fr 1fr;gap:1rem}
@media (max-width:1100px){.split{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:1rem}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}

/* ---------- charts ---------- */
.chartbox{position:relative;width:100%;height:260px}
.chartbox canvas{width:100%;height:100%;display:block}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:var(--fs-12);color:var(--ink-2);margin-top:.5rem}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.35rem}

/* ---------- states ---------- */
.empty{padding:2.25rem 1rem;text-align:center;color:var(--ink-3)}
.empty h4{color:var(--ink-2);margin-bottom:.35rem}
.skeleton{background:linear-gradient(90deg,var(--line-2),#F6F7F5,var(--line-2));background-size:200% 100%;
  animation:sk 1.2s linear infinite;border-radius:var(--r-sm);height:14px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- toast ---------- */
.toasts{position:fixed;right:1rem;bottom:1rem;z-index:200;display:flex;flex-direction:column;gap:.5rem;max-width:360px}
.toast{background:var(--ink);color:#fff;padding:.7rem .9rem;border-radius:var(--r);box-shadow:var(--shadow);
  font-size:var(--fs-14);display:flex;gap:.5rem;align-items:flex-start}
.toast--success{background:var(--brand-dark)}
.toast--danger{background:var(--danger)}
.toast--warning{background:var(--warn)}
.toast button{margin-left:auto;background:none;border:0;color:inherit;opacity:.7;cursor:pointer}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(14,33,28,.5);display:none;z-index:150;
  align-items:center;justify-content:center;padding:1rem}
.modal.is-open{display:flex}
.modal__box{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);width:100%;max-width:440px;overflow:hidden}
.modal__head{padding:1rem 1.1rem .25rem}
.modal__body{padding:.5rem 1.1rem 1rem;color:var(--ink-2)}
.modal__foot{display:flex;gap:.5rem;justify-content:flex-end;padding:.85rem 1.1rem;background:var(--surface-2);
  border-top:1px solid var(--line-2)}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth__aside{background:linear-gradient(170deg,#0E211C 30%,#16302a);color:#DDE7E3;padding:3rem;
  display:flex;flex-direction:column;justify-content:space-between}
.auth__aside h2{color:#fff;font-size:1.9rem;max-width:16ch;line-height:1.25}
.auth__aside p{color:#A9BEB8;max-width:44ch}
.auth__stats{display:flex;gap:2rem;flex-wrap:wrap}
.auth__stat b{display:block;color:#fff;font-size:1.35rem}
.auth__stat span{font-size:var(--fs-12);color:#8FA9A2}
.auth__panel{display:grid;place-items:center;padding:2rem;background:var(--surface);overflow-y:auto}
.auth__form{width:100%;max-width:360px}
.auth__form h1{margin-bottom:.35rem}
.auth__form .field{margin-bottom:.85rem}
@media (max-width:900px){.auth{grid-template-columns:1fr}.auth__aside{display:none}}

/* ---------- alerts ---------- */
.alert{padding:.7rem .9rem;border-radius:var(--r-sm);font-size:var(--fs-14);margin-bottom:.75rem;border:1px solid transparent}
.alert--success{background:var(--ok-soft);color:var(--brand-dark);border-color:#CBE3DA}
.alert--danger{background:var(--danger-soft);color:var(--danger);border-color:#F2CFCB}
.alert--warning{background:var(--warn-soft);color:var(--warn);border-color:#EEDCB6}
.alert--info{background:var(--info-soft);color:var(--info);border-color:#CFE0EE}

/* ---------- pagination ---------- */
.pager{display:flex;gap:.3rem;align-items:center;justify-content:flex-end;padding:.75rem 1rem}
.pager a,.pager span{padding:.3rem .6rem;border-radius:var(--r-sm);border:1px solid var(--line);
  font-size:var(--fs-13);color:var(--ink-2);background:var(--surface)}
.pager .is-current{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- permission matrix ---------- */
.matrix{width:100%;font-size:var(--fs-13)}
.matrix th{text-align:center;padding:.5rem}
.matrix th:first-child{text-align:left}
.matrix td{text-align:center;padding:.4rem .5rem;border-bottom:1px solid var(--line-2)}
.matrix td:first-child{text-align:left;font-weight:550}
.matrix input{width:16px;height:16px;accent-color:var(--brand)}

/* ---------- mobile ---------- */
.rail__scrim{display:none}
@media (max-width:960px){
  .rail{transform:translateX(-100%);transition:transform .2s ease;width:260px;flex-basis:260px}
  body.rail-open .rail{transform:none}
  body.rail-open .rail__scrim{display:block;position:fixed;inset:0;background:rgba(14,33,28,.45);z-index:55}
  .main{margin-left:0}
  body.rail-collapsed .main{margin-left:0}
  .page{padding:1rem .75rem 3rem}
  .search{max-width:none}
  .hotelpick__btn b{max-width:90px}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .kpis{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .kpi__value{font-size:var(--fs-20)}
  .page__actions{width:100%}
}

/* ---------- print ---------- */
@media print{
  .rail,.topbar,.page__actions,.filters,.btn,.pager,.toasts{display:none!important}
  .main{margin:0}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  body{background:#fff}
  .page{padding:0;max-width:none}
  a[href]::after{content:""}
}

/* ==========================================================================
   Phase 2 — rooms, calendar, front desk, folio
   ========================================================================== */

/* --- room grid ----------------------------------------------------------- */
.roomgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: .6rem;
}
.roomtile {
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-3);
  border-radius: 10px;
  padding: .6rem .7rem;
  background: var(--surface);
  display: flex; flex-direction: column; gap: .15rem;
  min-height: 108px;
}
.roomtile__top { display: flex; align-items: center; justify-content: space-between; }
.roomtile__top b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.roomtile__type { font-size: var(--fs-12); color: var(--ink-2); }
.roomtile__guest { font-size: var(--fs-13); font-weight: 600; margin-top: .15rem; }
.roomtile__meta { font-size: var(--fs-12); color: var(--ink-3); }
.roomtile__foot {
  margin-top: auto; display: flex; gap: .5rem; align-items: center;
  font-size: var(--fs-12); padding-top: .35rem;
}
.roomtile--available    { border-left-color: var(--ok); }
.roomtile--occupied     { border-left-color: var(--brand); background: var(--surface-2); }
.roomtile--reserved     { border-left-color: var(--warn); }
.roomtile--blocked      { border-left-color: var(--ink-3); }
.roomtile--out_of_order,
.roomtile--out_of_service { border-left-color: var(--danger); background: #FDF3F2; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--ink-3); }
.dot--clean     { background: var(--ok); }
.dot--dirty     { background: var(--danger); }
.dot--cleaning  { background: var(--warn); }
.dot--inspected { background: var(--brand); }

.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--brand); font: inherit; font-size: var(--fs-12); text-decoration: underline;
}
.linkish:hover { color: var(--brand-ink); }

/* --- tape chart (reservation calendar) ----------------------------------- */
.tape { overflow-x: auto; }
.tape table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.tape th, .tape td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-soft); }
.tape thead th {
  position: sticky; top: 0; z-index: 3; background: var(--surface-2);
  font-size: var(--fs-12); font-weight: 600; color: var(--ink-2);
  padding: .35rem .3rem; text-align: center; white-space: nowrap; min-width: 46px;
}
.tape thead th.is-weekend { background: #EFEFEA; }
.tape thead th.is-today { background: var(--brand); color: #fff; }
.tape .tape__room {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  min-width: 150px; padding: .35rem .6rem; text-align: left; font-weight: 600;
}
.tape thead .tape__room { z-index: 4; background: var(--surface-2); }
.tape .tape__room small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-12); }
.tape td.cell { height: 38px; padding: 0; position: relative; }
.tape td.cell.is-weekend { background: #FAFAF7; }
.tape td.cell.is-blocked { background: repeating-linear-gradient(45deg, #F1EEE9, #F1EEE9 4px, #E6E2DB 4px, #E6E2DB 8px); }
.stay {
  position: absolute; inset: 3px 2px; border-radius: 6px;
  font-size: var(--fs-12); line-height: 1.5; padding: 0 .4rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: #fff; background: var(--brand); text-decoration: none; display: block;
}
.stay:hover { filter: brightness(1.08); color: #fff; }
.stay--reserved   { background: #6E7E8F; }
.stay--checked_in { background: var(--brand); }
.stay--checked_out{ background: #A9AFA6; }
.stay--due        { box-shadow: inset 0 0 0 2px var(--brass); }
.tape-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--fs-12); color: var(--ink-2); }
.tape-legend span::before {
  content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: .35rem; vertical-align: -1px; background: var(--brand);
}
.tape-legend .lg-reserved::before { background: #6E7E8F; }
.tape-legend .lg-out::before      { background: #A9AFA6; }
.tape-legend .lg-block::before    { background: #E6E2DB; }

/* --- booking form room lines --------------------------------------------- */
.linerow {
  display: grid; gap: .5rem; align-items: end;
  grid-template-columns: 2fr 2fr 80px 80px 1.2fr 40px;
  padding: .6rem 0; border-bottom: 1px dashed var(--line);
}
.linerow:last-of-type { border-bottom: 0; }
.linerow .field { margin: 0; }
@media (max-width: 800px) { .linerow { grid-template-columns: 1fr 1fr; } }

.quote { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.quote div { min-width: 110px; }
.quote .kpi__value { font-size: 1.15rem; }

/* --- guest picker --------------------------------------------------------- */
.picker { position: relative; }
.picker__results {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); max-height: 300px; overflow: auto; display: none;
}
.picker__results.is-open { display: block; }
.picker__item { padding: .5rem .75rem; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.picker__item:hover, .picker__item.is-active { background: var(--surface-2); }
.picker__item small { display: block; color: var(--ink-3); font-size: var(--fs-12); }
.chosen {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}

/* --- tabs ----------------------------------------------------------------- */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; flex-wrap: wrap; }
.tabs a {
  padding: .55rem .9rem; border-radius: 8px 8px 0 0; color: var(--ink-2);
  text-decoration: none; font-size: var(--fs-13); font-weight: 600; border: 1px solid transparent;
  border-bottom: 0; margin-bottom: -1px;
}
.tabs a:hover { background: var(--surface-2); }
.tabs a.is-active { background: var(--surface); border-color: var(--line); color: var(--brand-ink); }
.tabs .count { color: var(--ink-3); font-weight: 400; }

/* --- printable documents --------------------------------------------------- */
.doc {
  max-width: 820px; margin: 1.5rem auto; background: #fff; color: #111;
  padding: 2.2rem 2.4rem; border: 1px solid var(--line); border-radius: 12px;
}
.doc__head { display: flex; justify-content: space-between; gap: 2rem; border-bottom: 2px solid #111; padding-bottom: 1rem; }
.doc__head h1 { font-size: 1.4rem; margin: 0; }
.doc__meta { text-align: right; font-size: var(--fs-13); }
.doc h2 { font-size: 1rem; margin: 1.5rem 0 .5rem; text-transform: uppercase; letter-spacing: .04em; }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.doc th, .doc td { padding: .45rem .5rem; border-bottom: 1px solid #E3E3DE; text-align: left; }
.doc th { background: #F4F4F0; font-weight: 600; }
.doc td.num, .doc th.num { text-align: right; font-variant-numeric: tabular-nums; }
.doc__totals { margin-left: auto; width: 320px; }
.doc__totals tr:last-child td { border-top: 2px solid #111; font-weight: 700; font-size: 1rem; }
.doc__foot { margin-top: 2rem; font-size: var(--fs-12); color: #555; border-top: 1px solid #E3E3DE; padding-top: .75rem; }
.doc__sign { display: flex; justify-content: space-between; margin-top: 3rem; font-size: var(--fs-12); }
.doc__sign div { border-top: 1px solid #111; padding-top: .35rem; width: 200px; text-align: center; }
.printbar { max-width: 820px; margin: 1rem auto 0; display: flex; gap: .5rem; justify-content: flex-end; }

@media print {
  .printbar, .toasts { display: none !important; }
  .doc { border: 0; margin: 0; max-width: none; padding: 0; }
  body { background: #fff; }
}

/* ==========================================================================
   Phase 3 — housekeeping board, maintenance
   ========================================================================== */

.board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: .75rem; align-items: start; }
@media (max-width: 1200px) { .board { grid-template-columns: repeat(3, minmax(210px, 1fr)); } }
@media (max-width: 760px)  { .board { grid-template-columns: 1fr; } }

.board__col { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: .6rem; }
.board__head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-2); padding: .1rem .2rem .5rem;
}
.board__head .n {
  background: var(--ink); color: #fff; border-radius: 999px;
  padding: .05rem .45rem; font-size: var(--fs-12); letter-spacing: 0;
}
.board__empty { font-size: var(--fs-12); color: var(--ink-3); padding: .75rem .3rem; text-align: center; }

.task {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ink-3);
  border-radius: 9px; padding: .55rem .6rem; margin-bottom: .5rem;
}
.task--urgent   { border-left-color: var(--danger); }
.task--high     { border-left-color: var(--warn); }
.task--normal   { border-left-color: var(--brand); }
.task--low      { border-left-color: var(--ink-3); }
.task__top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.task__room { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.task__type { font-size: var(--fs-12); color: var(--ink-2); }
.task__meta { font-size: var(--fs-12); color: var(--ink-3); margin-top: .15rem; }
.task__actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.task__actions form { display: inline; }
.task select { font-size: var(--fs-12); padding: .2rem .3rem; width: 100%; margin-top: .35rem; }

.chip--prio { font-size: var(--fs-12); padding: .05rem .4rem; border-radius: 999px; border: 1px solid var(--line); }
.chip--urgent, .chip--critical { background: #FDECEA; border-color: #F3C4BE; color: #8C2F22; }
.chip--high   { background: #FDF3E2; border-color: #EBD4A6; color: #7A5314; }
.chip--medium, .chip--normal { background: var(--surface-2); }
.chip--low    { color: var(--ink-3); }

/* ==========================================================================
   Phase 4 — point of sale, kitchen display
   ========================================================================== */

.pos { display: grid; grid-template-columns: 1fr 360px; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .pos { grid-template-columns: 1fr; } }

.menugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.menutile {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: .55rem .6rem; text-align: left; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: .15rem; min-height: 84px;
}
.menutile:hover { border-color: var(--brand); background: var(--surface-2); }
.menutile:disabled { opacity: .45; cursor: not-allowed; }
.menutile__name { font-weight: 600; font-size: var(--fs-13); line-height: 1.3; }
.menutile__price { margin-top: auto; font-variant-numeric: tabular-nums; color: var(--brass); font-weight: 600; }
.menutile__meta { font-size: var(--fs-12); color: var(--ink-3); }
.veg, .nonveg {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px;
  border: 1.5px solid var(--ok); position: relative;
}
.nonveg { border-color: #A33; }
.veg::after, .nonveg::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--ok);
}
.nonveg::after { background: #A33; }

.cart { }
.cartline {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem .5rem;
  padding: .45rem 0; border-bottom: 1px solid var(--line-soft);
}
.cartline__name { font-size: var(--fs-13); font-weight: 600; }
.cartline__meta { font-size: var(--fs-12); color: var(--ink-3); }
.cartline__amt { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.cartline--cancelled { opacity: .45; text-decoration: line-through; }
.cartline__qty { display: flex; gap: .2rem; align-items: center; margin-top: .2rem; }
.cartline__qty button {
  width: 24px; height: 24px; border: 1px solid var(--line); background: var(--surface);
  border-radius: 6px; cursor: pointer; font: inherit; line-height: 1;
}
.cartline__qty button:hover { border-color: var(--brand); }
.carttotals { font-variant-numeric: tabular-nums; }
.carttotals tr td:last-child { text-align: right; }
.carttotals tr:last-child { font-weight: 700; font-size: 1.05rem; }

.tablemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: .6rem; }
.tabletile {
  border: 1px solid var(--line); border-top: 4px solid var(--ok); border-radius: 10px;
  background: var(--surface); padding: .6rem; text-align: center; min-height: 96px;
  display: flex; flex-direction: column; gap: .15rem; align-items: center; justify-content: center;
}
.tabletile--occupied { border-top-color: var(--brand); background: var(--surface-2); }
.tabletile--reserved { border-top-color: var(--warn); }
.tabletile--blocked  { border-top-color: var(--ink-3); opacity: .6; }
.tabletile__no { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.tabletile__meta { font-size: var(--fs-12); color: var(--ink-3); }

.kotboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-items: start; }
@media (max-width: 900px) { .kotboard { grid-template-columns: 1fr; } }
.kotcard {
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--brand);
  border-radius: 10px; padding: .6rem .7rem; margin-bottom: .6rem;
}
.kotcard--late { border-left-color: var(--danger); }
.kotcard__head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.kotcard__no { font-weight: 700; font-variant-numeric: tabular-nums; }
.kotcard__where { font-size: var(--fs-12); color: var(--ink-2); }
.kotcard__age { font-size: var(--fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kotcard ul { list-style: none; margin: .45rem 0 0; padding: 0; }
.kotcard li {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .2rem 0; font-size: var(--fs-14); border-bottom: 1px dashed var(--line-soft);
}
.kotcard li:last-child { border-bottom: 0; }
.kotcard li .q { font-weight: 700; font-variant-numeric: tabular-nums; }
.kotcard li small { display: block; color: var(--ink-3); font-size: var(--fs-12); }
.kotcard li.is-done { opacity: .5; text-decoration: line-through; }
.kotcard__actions { display: flex; gap: .35rem; margin-top: .5rem; flex-wrap: wrap; }
.kotcard__actions form { display: inline; }

.ticket { max-width: 320px; margin: 1rem auto; background: #fff; color: #111;
  padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 8px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; }
.ticket h1 { font-size: 15px; margin: 0 0 .2rem; text-align: center; }
.ticket .c { text-align: center; }
.ticket hr { border: 0; border-top: 1px dashed #999; margin: .5rem 0; }
.ticket table { width: 100%; border-collapse: collapse; }
.ticket td { padding: .12rem 0; vertical-align: top; }
.ticket td.r { text-align: right; white-space: nowrap; }
@media print { .ticket { border: 0; margin: 0; max-width: none; } }

/* ------------------------------------------------------------------ *
 * Demo sign-in panel (login page only, and only while demo.enabled)
 * ------------------------------------------------------------------ */
.auth__note {
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  border-left: 2px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.auth__note b { color: #fff; font-size: var(--fs-13); }
.auth__note p { margin: .4rem 0 0; font-size: var(--fs-13); line-height: 1.6; }

.auth__form--wide { max-width: 440px; }

.demo {
  margin-top: 1.75rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.demo__title {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.demo__title span { font-size: var(--fs-14); font-weight: 600; color: var(--ink); }
.demo__title small { font-size: var(--fs-12); color: var(--ink-3); }

.demo__row {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
}
.demo__row .field { margin: 0; min-width: 0; }
.demo__row .field label {
  display: block;
  margin-bottom: .2rem;
  font-size: var(--fs-12);
  color: var(--ink-3);
}
.demo__row .field select { width: 100%; }
.demo__row .btn { flex: 0 0 auto; height: 38px; }

.demo__note {
  margin: .35rem 0 0;
  min-height: 1.1em;
  font-size: var(--fs-12);
  color: var(--ink-3);
}

.demo__sep {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1rem 0 .85rem;
  color: var(--ink-3);
  font-size: var(--fs-12);
}
.demo__sep::before,
.demo__sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.demo__warn {
  margin: 1rem 0 0;
  padding: .6rem .7rem;
  background: var(--warn-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  line-height: 1.55;
  color: var(--ink-2);
}
.demo__warn code {
  background: rgba(0,0,0,.06);
  padding: .05rem .25rem;
  border-radius: 3px;
}

@media (max-width: 620px) {
  .demo__row { flex-wrap: wrap; }
  .demo__row .field { flex: 1 1 100%; }
  .demo__row .btn { width: 100%; }
}

/* =====================================================================
   Upgrade phase 1 · housekeeping colours, day lock, approvals, room move
   Dirty = red · Cleaning = yellow · Clean / inspected = green
   ===================================================================== */
:root {
  --hk-dirty: #C0392B;    --hk-dirty-soft: #FBE3E0;
  --hk-cleaning: #B8860B; --hk-cleaning-soft: #FFF3C4;
  --hk-clean: #1E7B4F;    --hk-clean-soft: #DFF3E7;
  --hk-ooo: #5B6770;      --hk-ooo-soft: #E9ECEE;
}
.hk { display:inline-flex; align-items:center; gap:.3rem; padding:.12rem .5rem; border-radius:999px;
      font-size:var(--fs-12); font-weight:600; line-height:1.5; white-space:nowrap; }
.hk::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.hk--dirty     { background:var(--hk-dirty-soft);    color:var(--hk-dirty); }
.hk--cleaning  { background:var(--hk-cleaning-soft); color:var(--hk-cleaning); }
.hk--clean,
.hk--inspected { background:var(--hk-clean-soft);    color:var(--hk-clean); }

.dot--clean     { background: var(--hk-clean); }
.dot--inspected { background: var(--hk-clean); box-shadow: 0 0 0 2px var(--hk-clean-soft); }
.dot--dirty     { background: var(--hk-dirty); }
.dot--cleaning  { background: var(--hk-cleaning); }

/* room grid: the tile is tinted by housekeeping status */
.roomtile.hkbg--dirty    { background: var(--hk-dirty-soft); }
.roomtile.hkbg--cleaning { background: var(--hk-cleaning-soft); }

.hk-legend { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-size:var(--fs-12); color:var(--ink-2); margin:0 0 .75rem; }

/* housekeeping colour board */
.hkboard { display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:.6rem; }
.hkroom { border-radius:10px; padding:.6rem .7rem; border:1px solid transparent; display:flex; flex-direction:column;
          gap:.1rem; min-height:92px; color:var(--ink); }
.hkroom b { font-size:1.15rem; font-variant-numeric:tabular-nums; }
.hkroom small { font-size:var(--fs-12); color:var(--ink-2); }
.hkroom__state { font-size:var(--fs-12); font-weight:700; margin-top:auto; }
.hkroom--dirty     { background:var(--hk-dirty-soft);    border-color:#F0B8B1; }
.hkroom--dirty .hkroom__state { color:var(--hk-dirty); }
.hkroom--cleaning  { background:var(--hk-cleaning-soft); border-color:#EED477; }
.hkroom--cleaning .hkroom__state { color:var(--hk-cleaning); }
.hkroom--clean,
.hkroom--inspected { background:var(--hk-clean-soft);    border-color:#B5DEC6; }
.hkroom--clean .hkroom__state,
.hkroom--inspected .hkroom__state { color:var(--hk-clean); }
.hkroom--ooo       { background:var(--hk-ooo-soft);      border-color:#CDD3D7; }
.hkroom--ooo .hkroom__state { color:var(--hk-ooo); }
.hkroom__flag { font-size:10px; font-weight:700; border-radius:4px; padding:0 .3rem; background:var(--surface);
                color:var(--ink-2); align-self:flex-start; }

/* closed day marker on folio lines and elsewhere */
.lockchip { display:inline-flex; align-items:center; gap:.25rem; font-size:var(--fs-12); color:var(--info);
            background:var(--info-soft); border-radius:999px; padding:.05rem .45rem; white-space:nowrap; }
.pendingchip { display:inline-flex; font-size:var(--fs-12); color:var(--warn); background:var(--warn-soft);
               border-radius:999px; padding:.05rem .45rem; white-space:nowrap; font-weight:600; }

.rail__count { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--danger);
               color:#fff; font-size:10px; font-weight:700; display:inline-grid; place-items:center; }

.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg label { display:flex; align-items:center; gap:.3rem; padding:.35rem .6rem; font-size:var(--fs-13); cursor:pointer; margin:0; }
.seg label + label { border-left:1px solid var(--line); }
.seg input { margin:0; }
.table td.num, .table th.num { white-space: nowrap; }
.table td.desc-cell { min-width: 190px; }
/* grid children must be allowed to shrink, or a wide table pushes the side column off screen */
.split > *, .stack > * { min-width: 0; }

/* =====================================================================
   Upgrade phase 5 · text size, department menu, org chart
   ===================================================================== */
html[data-font="large"]  { font-size: 112.5%; }
html[data-font="xlarge"] { font-size: 125%; }
.fontpick { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.fontpick button { background:var(--surface); border:0; padding:.3rem .5rem; cursor:pointer; color:var(--ink-2); line-height:1; }
.fontpick button + button { border-left:1px solid var(--line); }
.fontpick button.is-active { background:var(--brand); color:#fff; }
.rail__more { margin-top:.35rem; }
.rail__more > summary { list-style:none; cursor:pointer; }
.rail__more > summary::-webkit-details-marker { display:none; }
.rail__more[open] > summary { opacity:.8; }
.orgnode { padding:.4rem .6rem; border-left:3px solid var(--brand); background:var(--surface-2); border-radius:6px; margin-bottom:.35rem; }

/* Right-hand column that stays in view while the form scrolls.
   The whole column sticks (not one card inside it), so cards never slide over each other,
   and it sits below the sticky top bar. */
@media (min-width:1101px){
  .aside-sticky{
    position:sticky; top:calc(var(--topbar-h, 64px) + 1rem); align-self:start;
    max-height:calc(100vh - var(--topbar-h, 64px) - 2rem); overflow-y:auto; overscroll-behavior:contain;
    padding-right:2px;
  }
}

/* Booking form: ID upload row under each guest */
.idrow { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.45rem 0 .2rem; }
.idrow select { width:auto; min-width:120px; padding:.3rem .5rem; }
.idrow > .t-muted { flex:1 1 180px; font-size:var(--fs-12); }
.filebtn { position:relative; display:inline-flex; align-items:center; gap:.3rem; border:1px dashed var(--line); border-radius:8px;
  padding:.3rem .6rem; font-size:var(--fs-12); cursor:pointer; background:var(--surface); white-space:nowrap; }
.filebtn input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.filebtn.is-set { border-style:solid; border-color:var(--brand); color:var(--brand); font-weight:600; }
.extraguest { border-top:1px solid var(--line); padding-top:.5rem; margin-top:.5rem; }
.extraguest:first-child { border-top:0; margin-top:0; padding-top:0; }

/* Guest ID uploads and document thumbnails */
.idupload { margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--line); }
.docthumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:.5rem; margin-top:.6rem; }
.docthumb { display:flex; flex-direction:column; gap:.25rem; border:1px solid var(--line); border-radius:8px; padding:.35rem; background:var(--surface); color:var(--ink); text-decoration:none; }
.docthumb img { width:100%; height:80px; object-fit:cover; border-radius:6px; background:var(--surface-2); }
.docthumb__pdf { height:80px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:var(--surface-2); font-weight:700; color:var(--ink-2); }
.docthumb small { font-size:var(--fs-12); color:var(--ink-2); line-height:1.2; }
.docthumb:hover { border-color:var(--brand); }
.idupload .hint { display:block; font-size:var(--fs-12); color:var(--ink-2); margin-top:.3rem; }

/* Filter bar check boxes: same height as the inputs and buttons beside them */
.filtercheck { display:inline-flex; align-items:center; gap:.45rem; min-height:36px; padding:0 .75rem;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
  font-size:var(--fs-14); color:var(--ink-2); cursor:pointer; white-space:nowrap; user-select:none; }
.filtercheck input { width:16px; height:16px; min-height:0; margin:0; accent-color:var(--brand); }
.filtercheck:hover { background:var(--surface-2); }
.filtercheck:has(input:checked) { border-color:var(--brand); color:var(--brand); font-weight:600; }
.filters > .btn { min-height:36px; }

/* Help & FAQs */
.help { display:grid; grid-template-columns:270px 1fr; gap:1rem; align-items:start; }
@media (max-width:1000px){ .help { grid-template-columns:1fr; } .help-toc { position:static !important; max-height:none !important; } }
.help-toc { position:sticky; top:calc(var(--topbar-h, 64px) + 1rem); max-height:calc(100vh - var(--topbar-h, 64px) - 2rem); overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.75rem; }
.help-search { position:relative; }
.help-search svg { position:absolute; left:.6rem; top:50%; transform:translateY(-50%); color:var(--ink-3, #888); }
.help-search input { padding-left:2rem; }
.help-count { font-size:var(--fs-12); margin:.35rem 0; min-height:1em; }
.help-toc__list { display:flex; flex-direction:column; gap:1px; }
.help-toc__list a { display:block; padding:.25rem .45rem; border-radius:6px; color:var(--ink-2); font-size:var(--fs-13); text-decoration:none; line-height:1.3; }
.help-toc__list a:hover { background:var(--surface-2); color:var(--ink); }
.help-toc__l2 { font-weight:650; color:var(--ink) !important; margin-top:.5rem; }
.help-toc__l3 { padding-left:1rem !important; }
.help-lang { display:inline-flex; gap:.25rem; }
.help-doc { font-size:var(--fs-14); line-height:1.6; color:var(--ink); max-width:100%; }
.help-doc h2 { font-size:1.35rem; margin:1.6rem 0 .6rem; padding-top:.6rem; border-top:1px solid var(--line); scroll-margin-top:calc(var(--topbar-h, 64px) + 1rem); }
.help-doc .help-sec:first-child h2, .help-doc .help-intro + .help-h2 h2 { border-top:0; margin-top:.4rem; }
.help-doc h3 { font-size:1.05rem; margin:1.2rem 0 .45rem; scroll-margin-top:calc(var(--topbar-h, 64px) + 1rem); }
.help-doc p { margin:.4rem 0 .6rem; }
.help-doc ol, .help-doc ul { margin:.3rem 0 .8rem 1.3rem; padding:0; }
.help-doc li { margin:.2rem 0; }
.help-doc code { background:var(--surface-2); padding:.05rem .3rem; border-radius:4px; font-size:.92em; }
.help-doc .tablewrap { margin:.5rem 0 1rem; border:1px solid var(--line); border-radius:var(--r-sm); overflow-x:auto; }
.help-doc table td, .help-doc table th { vertical-align:top; font-size:var(--fs-13); }
.help-doc tr.is-mine td { background:var(--hk-clean-soft, #e7f6ee); font-weight:600; }
.help-doc mark.help-hit { background:#ffe58a; color:inherit; padding:0 1px; border-radius:2px; }
.flow { display:flex; flex-direction:column; gap:.4rem; margin:.5rem 0 1rem; padding:.75rem; background:var(--surface-2); border-radius:var(--r-sm); }
.flow__row { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.flow__node { display:inline-block; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.15rem .6rem; font-size:var(--fs-13); }
.flow__node--from { border-color:var(--brand); color:var(--brand); font-weight:600; }
.flow__arrow { color:var(--ink-2); }
.flow__if { font-size:var(--fs-12); color:var(--ink-2); font-style:italic; }
.flow__to { display:inline-flex; flex-wrap:wrap; gap:.3rem; }
.help-role { margin-bottom:1rem; }
@media print { .help-toc, .help-role, .page__actions { display:none !important; } .help { display:block; } .help-doc[hidden] { display:none !important; } }