/* The app layer: iPhone-style controls, tab bar material, collection sheet */
/* ============ iOS app layer ============ */
:root{ --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --tabh:54px; }
html{ -webkit-text-size-adjust:100%; }
html,body{ overscroll-behavior-y:none; }
body{ -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
button,a,label,.tag{ touch-action:manipulation; }
.rail,.appbar,.tabbar,.nav,.seg,.tag{ -webkit-user-select:none; user-select:none; }
input,select,textarea{ font-size:16px; border-radius:9px; }
.btn{ border-radius:9px; transition:transform .12s ease, background .12s ease; }
.btn:active{ transform:scale(.97); }
.ucard{ border-radius:13px; }
.nav button:active,.tabbar button:active{ opacity:.6; }

/* app bar with large title */
.appbar{
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line); padding:calc(var(--safe-t) + 10px) 16px 9px;
}
.appbar .mark{ height:30px; width:auto; vertical-align:-4px; margin-inline-end:9px; display:none }
@media(max-width:900px){ .appbar .mark{ display:inline-block } }
.appbar .big{ font-size:26px; font-weight:700; letter-spacing:-.022em; line-height:1.15;
  transition:font-size .18s ease, margin .18s ease; }
.appbar.compact .big{ font-size:17px; }
.appbar .row{ display:flex; gap:8px; align-items:center; margin-top:9px; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; }
.appbar .row::-webkit-scrollbar{ display:none }
.appbar.compact .row{ margin-top:7px }
.appbar .row > *{ flex:0 0 auto }
.appbar select{ padding:6px 9px; font-size:14px; border-radius:100px; }

/* bottom tab bar */
.tabbar{
  position:fixed; inset-inline:0; bottom:0; z-index:40; display:none;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid var(--line); padding-bottom:var(--safe-b);
}
.tabbar button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 2px 6px; font-size:10.5px; color:var(--muted); line-height:1.2 }
.tabbar button[aria-current="true"]{ color:var(--nile-ink); font-weight:700 }
.tabbar svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round }
.morelist{ display:flex; flex-direction:column; gap:10px; padding:2px 0 12px }
.morerow{ display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:12px 16px; text-align:start; font:inherit; font-size:16.5px; font-weight:600;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:16px; cursor:pointer; -webkit-tap-highlight-color:transparent }
.morerow:active{ background:var(--line-soft) }
.morerow-ic{ flex:0 0 44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--nile-tint); color:var(--nile-ink) }
.morerow-ic svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.morerow-ic img, .morerow-ic .menu-logo{ max-width:36px; max-height:36px }
.morerow-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px } .morerow-t small{ font-weight:500; font-size:12.5px; color:var(--muted) }
.morerow-go{ flex:0 0 auto; font-size:26px; color:var(--muted); line-height:1 }
html[dir="rtl"] .morerow-go{ transform:scaleX(-1) }
.tabbar .badge{ position:absolute; transform:translate(14px,-4px); background:var(--clay); color:#fff;
  border-radius:100px; font-size:9.5px; padding:1px 5px; font-weight:700 }

@media(max-width:900px){
  .rail{ display:none }
  .tabbar{ display:flex }
  .content{ padding:14px 14px calc(var(--tabh) + var(--safe-b) + 18px) }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .ucards{ grid-template-columns:1fr }
}
@media(min-width:901px){
  .appbar{ padding-top:12px }
}

/* bottom-sheet modal on phones */
@media(max-width:900px){
  .scrim{ align-items:flex-end; padding:0 }
  .modal{ width:100%; border-radius:18px 18px 0 0; max-height:92vh;
    padding-bottom:calc(var(--safe-b) + 8px); animation:sheetUp .28s cubic-bezier(.32,.72,0,1) }
  .modal .grab{ width:38px; height:4px; border-radius:2px; background:var(--line); margin:9px auto 0 }
  .modal .foot .btn{ flex:1; padding:12px }
  .choice button{ padding:11px 12px }
}
@keyframes sheetUp{ from{ transform:translateY(100%) } to{ transform:none } }
@media(prefers-reduced-motion:reduce){ .modal{ animation:none } .btn{ transition:none } }

/* filters on phones */
@media(max-width:900px){
  .tools{ gap:8px }
  .tools #fQ{ order:-1; flex:1 1 100%; min-width:0 }
  .tools select{ flex:1 1 44%; min-width:0 }
  .tools .pill{ flex:1 1 100%; justify-content:center }
  #btnSet{ display:none }
  .ucard{ cursor:pointer }
}

/* install hint */
.install{ margin:0; padding:11px 16px; background:var(--ink); color:#E8ECEF; font-size:13px;
  display:flex; gap:10px; align-items:center }
.install b{ color:#fff }
.install button{ margin-inline-start:auto; color:#9FB0C0; text-decoration:underline; font-size:12.5px }

/* guided tour */
.tour-block{ position:fixed; inset:0; z-index:89 }
.tour-hl{ position:fixed; border-radius:12px; pointer-events:none; z-index:90;
  box-shadow:0 0 0 9999px rgba(20,36,59,.62), 0 0 0 3px var(--brass); transition:top .25s,left .25s,width .25s,height .25s }
.tour-hl.none{ box-shadow:0 0 0 9999px rgba(20,36,59,.62); width:0;height:0 }
.tour-card{ position:fixed; z-index:91; background:var(--card); border-radius:14px; padding:16px 18px;
  width:min(380px, calc(100vw - 24px)); box-shadow:0 18px 48px rgba(20,36,59,.35) }
.tour-card .n{ font-size:12px; color:var(--muted); margin-bottom:6px }
.tour-card h4{ margin:0 0 6px; font-size:16px }
.tour-card p{ margin:0 0 14px; font-size:14px; line-height:1.6; color:var(--ink-soft) }
.tour-card .row{ display:flex; gap:8px; align-items:center }
.tour-card .row .spacer{ flex:1 }
.tour-dots{ display:flex; gap:4px }
.tour-dots i{ width:6px;height:6px;border-radius:50%;background:var(--line) }
.tour-dots i.on{ background:var(--ink) }

/* tenant name links */
.linkish{ color:var(--ink); font:inherit; font-weight:inherit; text-decoration:underline dotted var(--muted); text-underline-offset:3px; padding:0 }
.linkish:hover{ color:var(--nile-ink) }

/* country chips */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px }
.chip{ border:1px solid var(--line); border-radius:100px; padding:7px 13px; font-size:13.5px; background:var(--card);
  display:inline-flex; gap:6px; align-items:center }
.chip.on{ background:var(--ink); color:#fff; border-color:var(--ink) }
.chip.on .muted{ color:#B9C7D4 }

/* checkbox group */
.checks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px }
.check{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:9px;
  padding:10px 12px; font-size:14px; cursor:pointer }
.check:has(input:checked){ border-color:var(--ink); background:#F7F8F5; font-weight:600 }
.check input{ width:18px; height:18px; accent-color:var(--nile); margin:0 }

/* settings */
.setrow{ display:flex; gap:10px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line-soft); font-size:14px }
.setrow:last-child{ border-bottom:none }
.setrow .k{ color:var(--muted); flex:1 }
.dotstate{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-inline-end:7px }
.dot-ok{ background:var(--nile) } .dot-warn{ background:var(--brass) } .dot-off{ background:var(--muted) }
.code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; background:#F3F5F1; color:#14243B;   /* explicit: the box stays light in dark theme, so its text must stay dark */
 
  border:1px solid var(--line); border-radius:8px; padding:10px 12px; overflow-x:auto; white-space:pre; direction:ltr; text-align:left }
/* ============ fluid layer: tab bar material + collection sheet ============ */

/* tab bar: a translucent material the content scrolls under; the press shows on touch-down */
.tabbar{
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.55);
  box-shadow:0 -1px 0 rgba(20,36,59,.09);
}
.tabbar button{ position:relative; font-weight:500; letter-spacing:.012em; color:#55607A; transition:color .16s ease }
.tabbar button[aria-current="true"]{ font-weight:700 }
.tabbar button svg{ transition:transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s ease; will-change:transform }
.tabbar button:active{ opacity:1 }
.tabbar button.pressed svg{ transform:scale(.84); opacity:.55; transition:none }

/* collection sheet: tracks the finger 1:1, settles on a spring, the scrim follows the sheet */
.scrim.fluid .modal{ will-change:transform; animation:none }
.scrim.fluid .grabzone{ display:none }
.scrim.fluid header h3{ font-size:20px; letter-spacing:-.02em; line-height:1.15 }
.scrim.fluid header p{ font-size:13.5px; letter-spacing:0 }
.scrim.fluid .btn, .scrim.fluid .choice button{ transition:transform .16s cubic-bezier(.2,.8,.2,1), background .16s ease }
.scrim.fluid .btn.pressed{ transform:scale(.97); transition:none }
.scrim.fluid .choice button.pressed{ transform:scale(.96); background:var(--line-soft); transition:none }
.scrim.fluid .choice button[aria-pressed="true"].pressed{ background:var(--ink-soft) }
@media(max-width:900px){
  .scrim.fluid .modal{ background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
    box-shadow:0 -10px 40px rgba(20,36,59,.2), inset 0 .5px 0 rgba(255,255,255,.7);
    border-radius:20px 20px 0 0; overscroll-behavior:contain }
  .scrim.fluid .grabzone{ display:block; padding:8px 0 2px; touch-action:none; cursor:grab }
  .scrim.fluid .grab{ width:36px; height:5px; border-radius:3px; background:rgba(20,36,59,.22); margin:0 auto }
  .scrim.fluid header{ touch-action:none; cursor:grab }
}
@media(prefers-reduced-transparency:reduce){
  .tabbar{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none }
  .scrim.fluid .modal{ background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none }
}
@media(prefers-contrast:more){
  .tabbar{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; border-top:1px solid var(--ink) }
  .scrim.fluid .modal{ background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid var(--ink) }
}
@media(prefers-reduced-motion:reduce){
  .tabbar button, .tabbar button svg, .scrim.fluid .btn, .scrim.fluid .choice button{ transition:none }
}