/* =====================================================================
   holipass for business — the owner dashboard on the holipass system.
   Values mirror css/bookbask.css (the system source of truth); this file
   restates them because dashboard pages never load that file and dist
   fingerprints it. Keep the two in step.
   Same materials as the marketplace: white page and cards, cool hairlines
   doing the separating work shadows do in SaaS, Journey Blue as the one
   accent. Numbers first — density is what a dashboard is for; the system
   supplies the finish. Palette moved onto the holipass / Journey Atlas set
   with css/bookbask.css on 2026-09-10 (it had stayed on the 2026-08-24 warm
   Bask export after the marketplace moved on).
   ===================================================================== */

/* DM Sans, self-hosted — a copy of the rules in css/bookbask.css, restated
   here because the dashboard never loads that file. Keep in step. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../assets/fonts/DMSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../assets/fonts/DMSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* canvas & surfaces — bb-page / bb-surface / bb-hairline */
  /* Surfaces follow the landing page: white canvas, white cards, structure
     drawn in cool hairlines (bb-page / bb-surface / bb-hairline). Quiet
     panels and hover rows use the mist the marketplace uses (--hp-mist). */
  --canvas:#FFFFFF;
  --card:#FFFFFF;
  --line:#DFE6F1;
  --line-strong:#C9D2E3;

  /* ink — the marketplace's navy-black and its quieter steps (bb-ink,
     bb-ink-mid, bb-ink-soft). Cool, never warm brown. */
  --ink:#14203A;
  --ink-2:#3F4A63;
  --muted:#6B7590;
  --faint:#97A0B5;

  /* the one working accent — Journey Blue, the logo's own blue and the
     landing page's buttons and links (bb-primary), plus a data-viz ramp
     derived from it (charts need a resting series colour the system's
     job colours can't lend without lying about trust or urgency). The
     logo's coral dot stays in the logo: it is a discovery accent on the
     marketplace, not a dashboard state. */
  --blue:#4655F6;
  --blue-deep:#2F3FD4;
  --blue-soft:#EEF2FF;
  --blue-200:#8F9AF9;
  --blue-100:#C9CEF9;

  /* semantics on the system's jobs: green is trust (confirmed, live),
     the urgency orange is pending action, heat and failure. Never
     green-red. */
  /* Green splits the way it does in the system: --good is the fill (bars,
     dots, seals), --good-text is the deeper green words are written in,
     because the brighter fill is under AA at label sizes. */
  --good:#0F9F7D;
  --good-text:#08785F;
  --good-soft:#DFF8F2;
  --bad:#D95735;
  --bad-text:#D95735;
  --bad-soft:#FFE8E1;
  --amber:#D95735;
  --amber-text:#D95735;
  --amber-soft:#FFE8E1;
  --gray-soft:#F5F7FB;

  /* radii — the export softens these: containers 9, controls 7. This is the
     one place the dashboard does NOT follow the marketplace all the way — the
     export makes buttons and chips fully round, which is right for a travel
     page and wrong for a dense operations table, where a row of pills reads
     as decoration on top of data. Buttons here keep --r-sm. */
  --r-lg:9px;
  --r-md:9px;
  --r-sm:7px;
  --shadow:none;
  --shadow-pop:0 4px 16px rgba(25,42,79,.10);

  --sans:"DM Sans","Noto Sans Lao","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lao:"Noto Sans Lao","DM Sans",sans-serif;

  /* weight — matches the system after the export raised its display tier:
     --w-semibold stays the emphasis step, --w-bold is headings, titles and
     numbers. Nothing goes to 800: Noto Sans Lao and Thai ship 400-700. */
  --w-regular:400;
  --w-medium:500;
  --w-semibold:600;
  --w-bold:700;
}

/* Transfer-slip review is a legacy tool. Keep it out of navigation unless the
   signed-in venue actually has an older QR-transfer booking to settle. */
a[href="payments.html"],a[href^="payments.html?"]{display:none!important}
body.has-legacy-transfers a[href="payments.html"],
body.has-legacy-transfers a[href^="payments.html?"]{display:flex!important}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--canvas);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;width:18px;height:18px}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
b,strong,h1,h2,h3{font-weight:var(--w-semibold)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
::placeholder{color:var(--faint)}
::selection{background:var(--blue-soft)}

/* =================== app shell =================== */
.app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}

/* ---- sidebar ---- */
.side{
  background:var(--canvas);
  border-right:1px solid var(--line);
  padding:20px 14px;
  display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.logo{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:8px 8px 18px;
  text-decoration:none;color:inherit;
}
.logo:hover{text-decoration:none}
/* the marketplace lockup, referenced not inlined — its own on-light
   colours (navy arcs, rust dot) are the brand set, nothing to theme */
.logo-lockup{width:128px;height:auto}
.logo-text{display:flex;flex-direction:column;gap:1px}
.logo-name{font-weight:var(--w-semibold);font-size:15px;letter-spacing:-.01em;line-height:1.15}
.logo-sub{font-size:11.5px;color:var(--muted);font-weight:var(--w-medium)}

.navgroup{margin-top:14px}
.navgroup>span{
  display:block;padding:0 10px 6px;
  font-size:11.5px;font-weight:var(--w-medium);
  color:var(--faint);
}
.navitem{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;margin:1px 0;border-radius:var(--r-sm);
  color:var(--ink-2);font-weight:var(--w-medium);font-size:13.5px;
  text-decoration:none;position:relative;
  transition:background .12s ease,color .12s ease;
}
.navitem:hover{background:var(--gray-soft);text-decoration:none;color:var(--ink)}
.navitem .ic{width:18px;height:18px;flex:none;color:var(--faint)}
.navitem:hover .ic{color:var(--ink-2)}
.navitem.active{background:var(--blue-soft);color:var(--blue);font-weight:var(--w-semibold)}
.navitem.active .ic{color:var(--blue)}
.navitem.active::before{
  content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--blue);
}
.navbadge{
  margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--blue);color:#fff;font-size:11px;font-weight:var(--w-semibold);
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.navitem:not(.active) .navbadge{background:var(--blue-soft);color:var(--blue)}
/* Every hidden attribute means hidden. The old selector list missed .pill, so
   the Website page showed "Published" and "Not published yet" together. */
[hidden]{display:none!important}

/* venue switcher — owner sees only their venues; nav follows the one in hand */
.vk-switch{padding:0 8px 12px;border-bottom:1px solid var(--line);margin:0 0 4px}
.vk-lbl{
  display:block;padding:0 2px 6px;
  font-size:11.5px;font-weight:var(--w-medium);color:var(--faint);
}
.vk-v{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:8px 10px;margin:2px 0;border-radius:var(--r-sm);
  color:var(--ink-2);
}
.vk-v:hover{background:var(--gray-soft)}
.vk-v.on{background:var(--blue-soft);color:var(--blue)}
.vk-mark{
  width:8px;height:8px;border-radius:50%;flex:none;background:var(--amber);
}
.vk-v[data-kind="stay"] .vk-mark{background:var(--blue)}
.vk-v[data-kind="ticket"] .vk-mark{background:var(--good)}
.vk-v[data-kind="slot"] .vk-mark{background:var(--amber)}
.vk-v-txt{min-width:0}
.vk-v-txt b{display:block;font-size:13px;line-height:1.2;font-weight:var(--w-semibold)}
.vk-v-txt span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vk-v.on .vk-v-txt span{color:var(--blue)}
.vk-add{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 10px;margin-top:4px;border-radius:var(--r-sm);
  color:var(--blue);font-size:13px;font-weight:var(--w-medium);
}
.vk-add:hover{background:var(--blue-soft);text-decoration:none}
.vk-top{
  display:none;max-width:200px;height:32px;padding:0 8px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;
}

.inv-row{
  display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line);
}
.inv-row:last-child{border-bottom:0}
.inv-row b{display:block;font-size:14px}
.inv-row .inv-meta{font-size:12.5px;color:var(--muted)}
.inv-row .inv-price{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.inv-row .inv-price span{display:block;font-size:12px;color:var(--muted);font-weight:var(--w-regular)}
.inv-row .inv-edit{margin-left:8px;flex:none}
.li-card-ed{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
}
.li-card-ed h3{font-size:15px;margin:0 0 10px}
.li-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.li-card-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.li-card-grid label.wide{grid-column:1/-1}
.li-card-grid input,.li-card-grid textarea{
  font:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:7px 9px;
}
.li-card-grid textarea{min-height:72px;resize:vertical}
.li-card-preview{
  margin-top:14px;overflow:auto;max-width:100%;
}
.li-card-preview .bookrow{min-width:720px;transform-origin:top left}
.li-card-actions{display:flex;gap:8px;margin-top:12px;align-items:center}
@media (max-width:720px){
  .li-card-grid{grid-template-columns:1fr}
  .li-card-preview .bookrow{min-width:0}
}

.side-bottom{margin-top:auto;padding-top:14px}
.usercard{
  display:flex;align-items:center;gap:10px;
  border-top:1px solid var(--line);
  padding:14px 8px 4px;margin-top:8px;
}
.usercard b{display:block;font-size:13px;line-height:1.2}
.usercard span{font-size:11.5px;color:var(--muted)}

/* ---- main column ---- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
  padding:12px 28px;
}
.search{
  flex:1;max-width:420px;position:relative;
}
.search input{
  width:100%;height:38px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--card);
  padding:0 14px 0 38px;font:inherit;font-size:13.5px;color:var(--ink);
}
.search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(70,85,246,.14)}
.search .ic{position:absolute;left:13px;top:10px;width:17px;height:17px;color:var(--faint)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
/* The language switcher matches the marketplace nav's quiet treatment: plain
   muted text, no border, no white pill (same override as css/home.css).
   js/i18n.js ships its own default styling for pages that have no opinion. */
.topbar-right .ji-sw__btn{
  border-color:transparent;
  background:transparent;
  padding:7px 2px;
  color:var(--muted);
  font-family:var(--sans);
  font-weight:var(--w-medium);
}
.topbar-right .ji-sw__btn:hover{border-color:transparent;color:var(--ink)}
.iconbtn{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--canvas);
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:background .12s ease,border-color .12s ease;
}
.iconbtn:hover{background:var(--gray-soft);border-color:var(--line-strong)}
.iconbtn .ic{width:18px;height:18px;color:var(--ink-2)}
.iconbtn .dot{
  position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
  background:var(--bad);border:2px solid var(--canvas);
}
.avatar{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--blue-soft);color:var(--blue);
  font-weight:var(--w-semibold);font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.avatar.dark{background:var(--blue);color:#fff}

/* mobile module nav (hidden on desktop) */
.mobilebar{display:none;gap:8px;overflow-x:auto;padding:10px 20px;background:var(--canvas);border-bottom:1px solid var(--line)}
.mobilebar a{
  flex:none;padding:7px 14px;border-radius:4px;border:1px solid var(--line);
  font-size:12.5px;font-weight:var(--w-semibold);color:var(--ink-2);text-decoration:none;background:var(--canvas);
}
.mobilebar a.active{background:var(--blue);border-color:var(--blue);color:#fff}

.content{padding:26px clamp(20px,3vw,48px) 56px;width:100%}

/* Waiting on the 30-day history (Overview, Analytics). The page's own markup
   stays in the document - paint() addresses those nodes by id - so this dims
   and shimmers real structure rather than replacing it with placeholder boxes. */
.content.dl-skel{position:relative;pointer-events:none}
.content.dl-skel>*{opacity:.35;filter:saturate(.35)}
.content.dl-skel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.6) 50%,transparent 80%);
  background-size:220% 100%;animation:dl-shimmer 1.15s linear infinite}
@keyframes dl-shimmer{from{background-position:130% 0}to{background-position:-130% 0}}
@media (prefers-reduced-motion:reduce){.content.dl-skel::after{animation:none}}

/* ---- page head ---- */
.pagehead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.eyebrow{
  font-family:var(--lao);font-size:12.5px;font-weight:var(--w-semibold);color:var(--blue);
  letter-spacing:.02em;margin-bottom:2px;
}
.pagehead h1{font-size:25px;font-weight:var(--w-semibold);letter-spacing:-.022em;line-height:1.15}
.pagehead .sub{color:var(--muted);font-size:13.5px;margin-top:4px;max-width:52ch}
.pagehead .actions{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* =================== primitives =================== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 16px;border-radius:var(--r-sm);
  background:var(--blue);color:#fff;font-weight:var(--w-semibold);font-size:13.5px;
  border:1px solid var(--blue);
  transition:background .12s ease,border-color .12s ease;text-decoration:none;
}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);text-decoration:none}
.btn .ic{width:16px;height:16px}
.btn.ghost{background:var(--canvas);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--canvas);border-color:var(--blue)}
.btn.subtle{background:var(--blue-soft);color:var(--blue);border-color:transparent}
.btn.subtle:hover{background:var(--blue-100)}
.btn.danger{background:var(--canvas);color:var(--bad-text);border-color:var(--line)}
.btn.danger:hover{background:var(--bad-soft);border-color:var(--bad)}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:var(--r-sm)}
.btn.bad{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.bad:hover{background:#BF4A2C;border-color:#BF4A2C}

.rangepick{
  display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--canvas);
  font-weight:var(--w-medium);font-size:13px;color:var(--ink-2);
}
.rangepick .ic{width:16px;height:16px;color:var(--faint)}
/* Window label, not a picker — the 30-day range is the page's actual query. */
.rangehint{
  font-size:12.5px;font-weight:var(--w-medium);color:var(--muted);
  white-space:nowrap;
}
.ov-rev{display:flex;align-items:flex-start;gap:14px}
.ov-rev-score{
  font-size:28px;font-weight:var(--w-semibold);letter-spacing:-.03em;
  color:var(--good);line-height:1;font-variant-numeric:tabular-nums;
}
.ov-rev b{display:block;font-size:13.5px}
.ov-rev-quote{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-2);line-height:1.45}

/* No resting shadow — separation is the hairline. */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;min-width:0;
}
.card-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.card-head h2{font-size:15px;font-weight:var(--w-semibold);letter-spacing:-.01em}
.card-head .hint{font-size:12px;color:var(--muted)}
.card-head .link{margin-left:auto;font-size:12.5px;font-weight:var(--w-semibold);white-space:nowrap}

/* pills — jade is earned (confirmed, live), rust carries what needs a hand
   (pending) and what fell through (cancelled — hollow, so it reads inert
   next to pending's filled tint). Never green-red. */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:4px;font-size:11.5px;font-weight:var(--w-semibold);white-space:nowrap;
}
.pill.info{background:var(--blue-soft);color:var(--blue)}
.pill.good{background:var(--good-soft);color:var(--good-text)}
.pill.warn{background:var(--amber-soft);color:var(--amber-text)}
.pill.bad{background:transparent;color:var(--bad-text);box-shadow:inset 0 0 0 1px var(--line)}
.pill.gray{background:var(--gray-soft);color:var(--muted)}
.pill .ic{width:12px;height:12px}

/* toggle switch — has to be round, stays round */
.switch{position:relative;width:38px;height:22px;flex:none;display:inline-block}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.switch i{
  position:absolute;inset:0;border-radius:11px;background:var(--line-strong);
  transition:background .15s ease;
}
.switch i::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(20,32,58,.25);transition:left .15s ease;
}
.switch input:checked+i{background:var(--good)}
.switch input:checked+i::after{left:19px}
.switch input:focus-visible+i{outline:2px solid var(--blue);outline-offset:2px}

/* =================== stat tiles =================== */
/* The stat tiles and the content below share one four-column grid, so the
   right-hand rail's edge lands exactly on the fourth tile's edge. They used to
   be sized independently, which left a vertical seam that missed by ~70px.
   Only rows of exactly four take the fixed grid; any other count keeps the
   old auto-fit behaviour, and browsers without :has() fall back to it too. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:14px}
.tiles:has(>:nth-child(4)):not(:has(>:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;min-width:0;
}
.tile .t-label{font-size:12.5px;font-weight:var(--w-medium);color:var(--muted)}
.tile .t-row{display:flex;align-items:flex-end;gap:10px;margin-top:6px}
.tile .t-value{font-size:27px;font-weight:var(--w-semibold);letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.tile .t-value small{font-size:15px;font-weight:var(--w-medium);color:var(--ink-2)}
.tile .t-spark{margin-left:auto;flex:none}
.tile .t-foot{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--muted)}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:var(--w-semibold)}
.delta.up{color:var(--good-text)}
.delta.down{color:var(--bad-text)}
.delta .ic{width:12px;height:12px}
.meter{height:6px;border-radius:3px;background:var(--blue-100);overflow:hidden;margin-top:12px}
.meter>i{display:block;height:100%;border-radius:3px;background:var(--blue)}
/* ratings are trust — jade, not amber */
.stars{color:var(--good);font-size:15px;letter-spacing:2px;line-height:1}
.stars .off{color:var(--line-strong)}

/* =================== layout grids =================== */
.grid-main{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.grid-main>*{grid-column:span 3}
.grid-main>*+*{grid-column:span 1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.stack{display:grid;gap:14px}

/* =================== schedule list =================== */
.sched{display:flex;flex-direction:column}
.sched-row{
  display:flex;align-items:center;gap:14px;padding:11px 2px;
  border-top:1px solid var(--line);
}
.sched-row:first-child{border-top:0}

/* The resource chip hugs its own text, so as a flex item it pushed the guest
   name to a different x on every row. Above 520px this list becomes one grid and
   each row a subgrid of it, so the chip still hugs its label while the name and
   the amount line up down the list. Browsers without subgrid keep the flex
   layout above. Scoped to #ov-sched on purpose: the payments and pricing lists
   reuse .sched-row with three children and no chip, so a shared four-track
   grid would misplace them. */
@supports (grid-template-columns:subgrid){
  @media (min-width:521px){
    #ov-sched{display:grid;grid-template-columns:88px auto minmax(0,1fr) auto}
    #ov-sched .sched-row{display:grid;grid-template-columns:subgrid;grid-column:1/-1}
    #ov-sched .sched-time{width:auto}
    /* the chip keeps hugging its own text rather than filling the track */
    #ov-sched .restag{justify-self:start}
    #ov-sched .sched-end{margin-left:0;justify-content:flex-end}
  }
}
.sched-time{
  font-weight:var(--w-semibold);font-size:13px;font-variant-numeric:tabular-nums;
  width:88px;flex:none;color:var(--ink);
}
.sched-time span{display:block;font-weight:var(--w-medium);font-size:11px;color:var(--faint)}
.restag{
  flex:none;padding:3px 8px;border-radius:4px;background:var(--gray-soft);
  font-size:11px;font-weight:var(--w-semibold);color:var(--ink-2);
}
.sched-who{min-width:0}
.sched-who b{display:block;font-size:13.5px;font-weight:var(--w-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-who span{font-size:12px;color:var(--muted)}
.sched-end{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.sched-amt{font-weight:var(--w-semibold);font-size:13px;font-variant-numeric:tabular-nums}
.sched-row.now{
  background:var(--blue-soft);border-radius:var(--r-sm);border-top-color:transparent;
  padding-left:12px;padding-right:12px;margin:2px -10px;
}
.sched-row.now+.sched-row{border-top:0}

/* =================== tables =================== */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{
  text-align:left;font-size:11.5px;font-weight:var(--w-medium);
  color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#F5F7FB}
.tbl .num{font-variant-numeric:tabular-nums;font-weight:var(--w-semibold)}
.tbl .r{text-align:right}

/* =================== calendar =================== */
.cal-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cal-month{font-size:16px;font-weight:var(--w-semibold);letter-spacing:-.01em;min-width:150px}
.cal-navbtns{display:flex;gap:6px}
.cal-navbtns .iconbtn{width:32px;height:32px}
.viewseg{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-left:auto}
.viewseg button{padding:7px 14px;font-size:12.5px;font-weight:var(--w-semibold);color:var(--muted);background:var(--canvas)}
.viewseg button.on{background:var(--blue-soft);color:var(--blue)}
.viewseg button+button{border-left:1px solid var(--line)}

.cal{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--line)}
.cal-head,.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.cal-head span{
  background:var(--canvas);padding:8px 10px;
  font-size:11px;font-weight:var(--w-medium);color:var(--muted);
}
.cal-cell{background:var(--canvas);min-height:96px;padding:7px 7px 9px;min-width:0}
.cal-cell .d{font-size:12px;font-weight:var(--w-semibold);color:var(--ink-2);margin-bottom:5px}
.cal-cell.dim{background:#F9FAFD}
.cal-cell.dim .d{color:var(--faint);font-weight:var(--w-medium)}
.cal-cell.today .d{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;
}
.chip{
  display:block;font-size:11px;font-weight:var(--w-medium);line-height:1.3;
  padding:3px 6px 3px 8px;border-radius:4px;margin-top:3px;position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink);border-left:3px solid transparent;
}
.chip b{font-weight:var(--w-semibold)}
.chip.ok{background:var(--blue-soft);border-left-color:var(--blue)}
.chip.pend{background:var(--amber-soft);border-left-color:var(--amber)}
.chip.block{background:var(--gray-soft);border-left-color:var(--faint);color:var(--muted)}
.chip.more{background:none;color:var(--blue);font-weight:var(--w-semibold);padding-left:6px}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
.legend i{
  display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;
}
.legend .l-ok i{background:var(--blue)}
.legend .l-pend i{background:var(--amber)}
.legend .l-block i{background:var(--faint)}

/* =================== charts =================== */
/* Chart type sits below the 15px card title on purpose: ticks are reference
   marks, so they stay small, unbolded and grey, and only the labelled value on
   the current bar is allowed any weight. The renderer maps one user unit to one
   pixel, so these sizes are what actually reaches the screen. */
.chart{width:100%;display:block}
.chart text{font-family:var(--sans)}
.chart .gridline{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.chart .axis{fill:var(--muted);font-size:11px;font-weight:var(--w-medium);font-variant-numeric:tabular-nums}
.chart .xlab{fill:var(--muted);font-size:11px;font-weight:var(--w-medium)}
.chart .xlab.cur{fill:var(--ink);font-weight:var(--w-semibold)}
.chart .bar{fill:var(--blue-200);cursor:pointer}
.chart .bar.cur{fill:var(--blue)}
.chart .bar:hover{fill:var(--blue)}
/* every bar is labelled; the past weeks stay unbolded reference values and the
   current week is the one figure allowed any weight */
.chart .dlabel{fill:var(--muted);font-size:11px;font-weight:var(--w-medium);font-variant-numeric:tabular-nums}
.chart .dlabel.cur{fill:var(--ink);font-size:12px;font-weight:var(--w-semibold)}
.tipbox{
  position:fixed;z-index:99;pointer-events:none;opacity:0;
  background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:7px 10px;
  font-size:12px;font-weight:var(--w-medium);line-height:1.45;
  transform:translate(-50%,calc(-100% - 10px));transition:opacity .1s ease;
  white-space:nowrap;box-shadow:var(--shadow-pop);
}
.tipbox small{display:block;color:#A8B0C4;font-weight:var(--w-medium)}
.tbl-twin{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.tbl-twin summary{
  font-size:12px;font-weight:var(--w-semibold);color:var(--muted);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:6px;
}
.tbl-twin summary::before{content:"▸";font-size:10px;transition:transform .12s ease}
.tbl-twin[open] summary::before{transform:rotate(90deg)}
.tbl-twin table{margin-top:8px}

/* rating distribution — trust, so jade */
.ratedist{display:grid;gap:8px}
.ratedist .row{display:grid;grid-template-columns:14px 1fr 42px;gap:10px;align-items:center}
.ratedist .row>span:first-child{font-size:12px;font-weight:var(--w-semibold);color:var(--ink-2)}
.ratedist .track{height:8px;border-radius:4px;background:var(--good-soft);overflow:hidden}
.ratedist .track i{display:block;height:100%;border-radius:4px;background:var(--good)}
.ratedist .row>span:last-child{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.bigscore{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.bigscore .n{font-size:44px;font-weight:var(--w-semibold);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.bigscore .of{font-size:12.5px;color:var(--muted)}

/* =================== services / pricing =================== */
.svc-row{display:flex;align-items:center;gap:14px;padding:14px 2px;border-top:1px solid var(--line)}
.svc-row:first-child{border-top:0}
.svc-ic{
  width:38px;height:38px;border-radius:50%;background:var(--blue-soft);flex:none;
  display:flex;align-items:center;justify-content:center;
}
.svc-ic .ic{width:18px;height:18px;color:var(--blue)}
.svc-ic.off{background:var(--gray-soft)}
.svc-ic.off .ic{color:var(--faint)}
.svc-name b{display:block;font-size:14px;font-weight:var(--w-semibold)}
.svc-name span{font-size:12px;color:var(--muted)}
.svc-price{margin-left:auto;text-align:right;flex:none}
.svc-price b{display:block;font-size:15px;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}
.svc-price span{font-size:11.5px;color:var(--muted)}
.svc-end{display:flex;align-items:center;gap:14px;flex:none;margin-left:18px}

/* rate matrix - the floodlight card */
.ratematrix{width:100%;border-collapse:separate;border-spacing:0}
.ratematrix th,.ratematrix td{padding:14px 16px;text-align:left}
.ratematrix thead th{
  font-size:11.5px;font-weight:var(--w-medium);color:var(--muted);
  border-bottom:1px solid var(--line);
}
.ratematrix tbody th{
  font-size:13px;font-weight:var(--w-semibold);color:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap;
}
.ratematrix tbody th small{display:block;font-weight:var(--w-medium);font-size:11.5px;color:var(--muted)}
.ratematrix td{border-bottom:1px solid var(--line)}
.ratematrix tr:last-child th,.ratematrix tr:last-child td{border-bottom:0}
.rate{font-size:17px;font-weight:var(--w-semibold);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rate small{font-size:11.5px;font-weight:var(--w-medium);color:var(--muted);letter-spacing:0}
.ratehead{display:inline-flex;align-items:center;gap:7px}
.ratehead .ic{width:15px;height:15px}
/* floodlit evening hours — heat is rust's job */
.ratehead.lit{color:var(--bad-text)}
.ratehead.unlit{color:var(--faint)}

/* =================== payments =================== */
.proof{
  display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--r-md);padding:14px;
}
.proof+.proof{margin-top:10px}
.proof-thumb{
  width:64px;height:80px;border-radius:var(--r-sm);flex:none;overflow:hidden;position:relative;
  background:
    linear-gradient(160deg,#E9EEF7 0%,#F7F9FC 60%),
    var(--gray-soft);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.proof-thumb .ic{width:20px;height:20px;color:var(--faint)}
.proof-body{min-width:0;flex:1}
.proof-body b{font-size:13.5px}
.proof-body .ref{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.proof-meta{font-size:12px;color:var(--muted);margin-top:2px}
.proof-amt{font-weight:var(--w-semibold);font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.proof-actions{display:flex;gap:8px;margin-top:10px}
.qrbox{
  border:1px dashed var(--line-strong);border-radius:var(--r-md);
  padding:18px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
}
.qrbox .qr{
  width:150px;height:150px;border-radius:var(--r-sm);background:
    repeating-linear-gradient(0deg,var(--ink) 0 6px,transparent 6px 12px),
    repeating-linear-gradient(90deg,var(--ink) 0 6px,#fff 6px 12px);
  opacity:.85;border:6px solid #fff;outline:1px solid var(--line);
}
.moneyrow{display:flex;justify-content:space-between;align-items:baseline;padding:10px 2px;border-top:1px solid var(--line);font-size:13px}
.moneyrow:first-child{border-top:0}
.moneyrow b{font-variant-numeric:tabular-nums;font-size:14px}

/* =================== website editor =================== */
.blockrow{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;background:var(--card);
}
.blockrow+.blockrow{margin-top:8px}
.blockrow .drag{color:var(--faint);cursor:grab;flex:none;letter-spacing:1px;font-size:14px}
.blockrow b{font-size:13.5px}
.blockrow span.desc{font-size:12px;color:var(--muted);display:block}
.blockrow .end{margin-left:auto;display:flex;align-items:center;gap:8px}
.blockrow.off{opacity:.55;background:#F9FAFD}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.theme{
  border:1px solid var(--line);border-radius:var(--r-md);padding:10px;cursor:pointer;text-align:center;
}
.theme .sw{height:44px;border-radius:var(--r-sm);margin-bottom:8px}
.theme b{font-size:12px;font-weight:var(--w-semibold)}
.theme span{display:block;font-size:10.5px;color:var(--muted)}
.theme.on{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.sitestatus{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sitestatus .url{
  font-size:14px;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:8px;
}
.livedot{width:9px;height:9px;border-radius:50%;background:var(--good);flex:none;
  box-shadow:0 0 0 3px var(--good-soft)}

/* =================== reviews =================== */
.review{border-top:1px solid var(--line);padding:16px 2px}
.review:first-child{border-top:0}
.review-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.review-head .avatar{width:34px;height:34px;font-size:12px}
.review-head b{font-size:13.5px;display:block;line-height:1.2}
.review-head span{font-size:11.5px;color:var(--muted)}
.review-head .stars{margin-left:auto;font-size:13px}
.review p{font-size:13.5px;color:var(--ink-2);max-width:70ch}
.review .lao{font-family:var(--lao)}
.reply{
  margin-top:10px;margin-left:14px;padding:10px 14px;border-left:3px solid var(--blue-100);
  background:#F5F7FB;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13px;color:var(--ink-2);
}
.reply b{color:var(--ink);font-size:12px;display:block;margin-bottom:2px}

/* =================== forms / settings =================== */
.field{display:grid;gap:6px;margin-bottom:14px}
.field>label{font-size:12.5px;font-weight:var(--w-semibold);color:var(--ink-2)}
.field .help{font-size:11.5px;color:var(--muted)}
.input,select.input,textarea.input{
  width:100%;height:40px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:0 12px;font:inherit;font-size:13.5px;color:var(--ink);background:var(--canvas);
}
textarea.input{height:auto;padding:10px 12px;resize:vertical}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(70,85,246,.14)}
.acc-qr{width:168px;height:168px;display:block;margin:12px 0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm)}
.acc-codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:6px 16px;margin:12px 0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.field.span2{grid-column:1/-1}
.li-pin-find{display:flex;gap:8px;align-items:center;margin-top:4px}
.li-pin-find .input{flex:1}
.li-map{
  height:260px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  margin-top:8px;background:var(--gray-soft,#F5F7FB);z-index:0;
}
.li-pin-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.hoursrow{display:grid;grid-template-columns:130px 1fr auto 1fr;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.hoursrow:first-of-type{border-top:0}
.hoursrow .day{font-size:13px;font-weight:var(--w-semibold)}
.hoursrow .to{color:var(--faint);font-size:12px;text-align:center}
.hoursrow.closed .day{color:var(--faint)}
.resrow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-top:1px solid var(--line)}
.resrow:first-child{border-top:0}
.savebar{
  display:flex;align-items:center;gap:12px;justify-content:flex-end;
  margin-top:6px;padding-top:16px;border-top:1px solid var(--line);
}
.savebar .note{margin-right:auto;font-size:12px;color:var(--muted)}

/* notice card */
.notice{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--blue-soft);border:1px solid var(--blue-100);
  border-radius:var(--r-md);padding:14px 16px;font-size:13px;color:var(--blue);
}
.notice .ic{width:17px;height:17px;flex:none;margin-top:1px}
.notice b{font-weight:var(--w-semibold)}
.notice.amber{background:var(--amber-soft);border-color:#F5C9B8;color:var(--amber-text)}

/* Private listing status belongs to the shell, between topbar and page. */
.dl-onboarding-banner{margin:20px clamp(20px,3vw,48px) 0;align-items:center;justify-content:space-between}
.dl-onboarding-copy{min-width:0;max-width:72ch}
.dl-onboarding-copy b{display:block;font-size:14px}
.dl-onboarding-copy p{margin-top:3px}
.dl-onboarding-actions{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.dl-onboarding-actions .btn{white-space:nowrap}
.dl-onboarding-error{color:var(--bad-text)}
.dl-onboarding-progress{color:var(--ink-2)}
.dl-onboarding-locale-status{margin:10px clamp(20px,3vw,48px) 0;font-size:13px;color:var(--ink-2)}
.dl-onboarding-locale-status.dl-onboarding-error{color:var(--bad-text)}
.dl-onboarding-locale-status[hidden]{display:none}
[data-dl-site][aria-disabled="true"]{opacity:.55;cursor:default}
@media(max-width:900px){.dl-onboarding-banner{margin:16px 18px 0}.dl-onboarding-locale-status{margin:10px 18px 0}}
@media(max-width:600px){.dl-onboarding-banner{align-items:stretch;flex-direction:column;gap:12px}.dl-onboarding-actions{align-self:flex-start}}

/* attention list (overview) */
.attn{display:flex;flex-direction:column}
.attn a{
  display:flex;align-items:center;gap:12px;padding:11px 2px;
  border-top:1px solid var(--line);color:inherit;text-decoration:none;
}
.attn a:first-child{border-top:0}
.attn a:hover b{color:var(--blue)}
.attn .n{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:var(--w-semibold);font-size:13px;
  font-variant-numeric:tabular-nums;
}
.attn .n.warn{background:var(--amber-soft);color:var(--amber-text)}
.attn .n.info{background:var(--blue-soft);color:var(--blue)}
.attn a>span:nth-child(2){flex:1;min-width:0}
.attn b{font-size:13.5px;display:block;line-height:1.25}
.attn span{font-size:12px;color:var(--muted)}
.attn .go{margin-left:auto;width:16px;height:16px;color:var(--faint)}

/* =================== day schedule grid (courts as columns) =================== */
.dg-head{
  display:grid;grid-template-columns:64px repeat(2,1fr);
  border:1px solid var(--line);border-bottom:0;border-radius:var(--r-md) var(--r-md) 0 0;
  overflow:hidden;background:var(--canvas);
}
.dg-head>div{padding:10px 14px;border-left:1px solid var(--line)}
.dg-head>div:first-child{border-left:0}
.dg-head b{font-size:13px;font-weight:var(--w-semibold);display:block}
.dg-head small{font-size:11px;color:var(--muted);font-weight:var(--w-medium)}
.dg-body{
  position:relative;display:grid;grid-template-columns:64px repeat(2,1fr);
  border:1px solid var(--line);border-radius:0 0 var(--r-md) var(--r-md);background:var(--canvas);overflow:hidden;
}
.dg-times span{
  display:block;height:56px;font-size:10.5px;color:var(--faint);font-weight:var(--w-medium);
  text-align:right;padding:2px 8px 0 0;font-variant-numeric:tabular-nums;
}
.dg-lane{
  position:relative;border-left:1px solid var(--line);
  background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 56px);
}
.evt{
  position:absolute;left:6px;right:6px;border-radius:var(--r-sm);padding:6px 9px 6px 10px;
  font-size:11px;line-height:1.35;border-left:3px solid transparent;overflow:hidden;color:var(--ink);
}
.evt b{display:block;font-weight:var(--w-semibold);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt span{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt.ok{background:var(--blue-soft);border-left-color:var(--blue)}
.evt.pend{background:var(--amber-soft);border-left-color:var(--amber)}
.evt.block{background:var(--gray-soft);border-left-color:var(--faint);color:var(--muted)}
.nowline{position:absolute;left:64px;right:0;height:0;border-top:2px solid var(--bad);z-index:5}
.nowline::before{
  content:attr(data-t);position:absolute;left:-52px;top:-9px;
  background:var(--bad);color:#fff;font-size:9.5px;font-weight:var(--w-semibold);
  padding:1px 6px;border-radius:4px;font-variant-numeric:tabular-nums;
}

/* =================== occupancy heatmap =================== */
.heat{display:grid;gap:2px}
.heat .hrow{display:grid;grid-template-columns:52px repeat(7,1fr) 46px;gap:2px;align-items:center}
.heat .hlab{font-size:10.5px;color:var(--faint);font-weight:var(--w-medium);text-align:right;padding-right:6px;font-variant-numeric:tabular-nums}
.heat .dlab{font-size:10.5px;color:var(--faint);text-align:center;font-weight:var(--w-medium);padding-bottom:2px}
.heat .cell{height:21px;border-radius:4px;background:var(--gray-soft);cursor:default}
.heat .avg{font-size:10.5px;color:var(--muted);text-align:left;padding-left:8px;font-variant-numeric:tabular-nums}
.heatlegend{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:11.5px;color:var(--muted)}
.heatlegend .bar{flex:0 0 150px;height:8px;border-radius:4px;background:linear-gradient(90deg,#EEF2FF,#8F9AF9,#4655F6,#2A36B8)}

/* filter chips row */
.filterrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.fchip{
  padding:7px 14px;border-radius:4px;border:1px solid var(--line);
  font-size:12.5px;font-weight:var(--w-semibold);color:var(--ink-2);background:var(--canvas);cursor:pointer;
}
.fchip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.fchip:hover:not(.on){background:var(--gray-soft)}

/* =================== doc / brief pages =================== */
.doc{max-width:920px;margin:0 auto;padding:48px 28px 80px}
.doc-hero{margin-bottom:40px}
.doc-hero .eyebrow{font-size:13px}
.doc-hero h1{font-size:38px;font-weight:var(--w-semibold);letter-spacing:-.03em;line-height:1.08;margin:6px 0 12px}
.doc-hero p{font-size:15.5px;color:var(--ink-2);max-width:62ch}
.doc h2{font-size:19px;font-weight:var(--w-semibold);letter-spacing:-.015em;margin:44px 0 6px}
.doc h2 .lao{font-family:var(--lao);color:var(--blue);font-size:13px;font-weight:var(--w-semibold);display:block;margin-bottom:2px}
.doc p{color:var(--ink-2);max-width:68ch;margin:8px 0}
.doc ul{margin:8px 0 8px 18px;color:var(--ink-2)}
.doc li{margin:4px 0;max-width:64ch}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:14px 0}
.swatch{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--card)}
.swatch .c{height:56px}
.swatch .m{padding:8px 10px}
.swatch b{font-size:12px;display:block}
.swatch span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.spec{display:grid;grid-template-columns:150px 1fr;gap:6px 18px;margin:12px 0;font-size:13.5px}
.spec dt{font-weight:var(--w-medium);color:var(--faint);font-size:12px;padding-top:2px}
.spec dd{color:var(--ink-2)}
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:20px}
.hubcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;text-decoration:none;color:inherit;
  transition:box-shadow .18s ease-out,border-color .12s ease;
  display:block;
}
.hubcard:hover{text-decoration:none;box-shadow:var(--shadow-pop);border-color:var(--blue-200)}
.hubcard .k{
  width:38px;height:38px;border-radius:50%;background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.hubcard .k .ic{width:18px;height:18px;color:var(--blue)}
.hubcard b{font-size:14.5px;display:block;letter-spacing:-.01em}
.hubcard span{font-size:12.5px;color:var(--muted);display:block;margin-top:4px;line-height:1.45}
.hubcard .tag{margin-top:10px}

.proto-note{margin-top:30px;font-size:11.5px;color:var(--faint);text-align:center}

/* =================== listing editor =================== */
.jumpnav{
  position:sticky;top:63px;z-index:30;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:10px 0 14px;margin-bottom:8px;background:var(--canvas);
}
.jumpnav a{
  padding:7px 14px;border-radius:4px;border:1px solid var(--line);
  font-size:12.5px;font-weight:var(--w-semibold);color:var(--ink-2);
  background:var(--canvas);text-decoration:none;
}
.jumpnav a:hover{background:var(--gray-soft);text-decoration:none}

.listing-onboarding{padding:20px 22px;margin-bottom:16px;border-left:3px solid var(--blue)}
.onboarding-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.onboarding-head h2{font-size:18px;font-weight:var(--w-semibold);letter-spacing:-.015em;margin:0}
.onboarding-head p{font-size:12.5px;color:var(--muted);margin:3px 0 0}
.onboarding-score{font-size:19px;font-weight:var(--w-semibold);color:var(--blue);font-variant-numeric:tabular-nums}
.onboarding-progress{height:4px;margin:14px 0 18px;border-radius:2px;background:var(--gray-soft);overflow:hidden}
.onboarding-progress i{display:block;height:100%;background:var(--good)}
.onboarding-needed>h3,.onboarding-done summary{font-size:11.5px;font-weight:var(--w-semibold);color:var(--muted)}
.onboarding-group{margin-top:13px}
.onboarding-group h3{font-size:12px;font-weight:var(--w-semibold);color:var(--ink-2);margin:0 0 3px}
.onboarding-action{display:flex;align-items:center;gap:14px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.onboarding-action span{min-width:0;flex:1}
.onboarding-action a{font-size:12px;font-weight:var(--w-semibold);white-space:nowrap}
.onboarding-done{margin-top:17px;padding-top:12px;border-top:1px solid var(--line)}
.onboarding-done summary{cursor:pointer}
.onboarding-done ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 18px;margin:10px 0 0;padding:0;list-style:none}
.onboarding-done li{font-size:11.5px;color:var(--muted)}
.onboarding-done li::first-letter{color:var(--good)}
.onboarding-support{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.onboarding-publish-row{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.onboarding-publish-error{min-width:0;margin-right:auto;color:var(--bad-text);font-size:12px;line-height:1.45}
.onboarding-delivery{margin-top:9px;color:var(--ink-2);font-size:12.5px}
.onboarding-prereq{scroll-margin-top:120px}
.stack>section,.onboarding-support,#li-pin-q,#li-confirm-mode{scroll-margin-top:145px}
.onboarding-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.contact-intro{max-width:72ch;margin:0 0 16px;line-height:1.55}
.contact-grid{display:grid;grid-template-columns:minmax(220px,1.35fr) minmax(180px,.8fr) minmax(220px,1fr);gap:0 14px;align-items:start}
.contact-grid .field{margin-bottom:10px}
.contact-field-error{min-height:17px;color:var(--bad-text);font-size:11.5px;line-height:1.4}
.contact-status{margin-right:auto;font-size:12px;color:var(--good-text)}
.contact-status.contact-error{color:var(--bad-text)}
.contact-status.contact-neutral{color:var(--muted)}
#sec-onboarding-contact .input[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px rgba(150,48,45,.08)}
.onboarding-session-list{display:grid;gap:6px;margin-bottom:14px}
.onboarding-session{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}
.onboarding-session b{min-width:0;flex:1;font-size:13px}
.onboarding-session span{color:var(--muted);white-space:nowrap}

.listing-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lp-tile{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--canvas);min-width:0}
.lp-tile img{width:100%;height:110px;object-fit:cover;display:block;background:var(--gray-soft)}
.lp-meta{display:flex;align-items:center;gap:4px;padding:7px 8px}
.lp-meta .iconbtn{width:26px;height:26px;flex:none}
.lp-meta .iconbtn .ic{width:13px;height:13px}
.lp-cover-pick{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  font-size:11px;font-weight:var(--w-medium);color:var(--muted);cursor:pointer;
}
.lp-cover-pick input{accent-color:var(--blue)}

/* locale segment: a dot marks tabs whose field already has text */
.viewseg button .segdot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--good);margin-left:5px;vertical-align:2px;
}

.chiprow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chiprow .pill button{
  display:inline-flex;border:0;background:none;cursor:pointer;padding:0 0 0 2px;
  color:inherit;font-size:12px;line-height:1;
}

/* =================== responsive =================== */
@media (max-width:1060px){
  .tiles,.tiles:has(>:nth-child(4)):not(:has(>:nth-child(5))){grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-main{grid-template-columns:1fr}
  .grid-main>*,.grid-main>*+*{grid-column:auto}
  .themes{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .tiles,.tiles:has(>:nth-child(4)):not(:has(>:nth-child(5))){grid-template-columns:1fr}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .vk-top{display:inline-flex}
  .mobilebar{display:flex}
  .content{padding:20px 18px 48px;overflow-x:hidden}
  .topbar{padding:10px 18px}
  .grid-2{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr}
  .onboarding-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:1fr 1fr}.contact-email{grid-column:1/-1}
  .cal-cell{min-height:64px;padding:5px}
  .chip{font-size:10px;padding:2px 4px 2px 6px}
  .cal-cell .chip:nth-child(n+4){display:none}
}
@media (max-width:520px){
  .pagehead h1{font-size:21px}
  .themes{grid-template-columns:1fr 1fr}
  .hoursrow{grid-template-columns:96px 1fr auto 1fr}
  .search{display:none}
  .topbar-right>.avatar{display:none}
  .sched-row{flex-wrap:wrap;row-gap:4px}
  .sched-who{flex:1 1 55%;min-width:0}
  .sched-who b{white-space:normal}
  .sched-end{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .sched-time{width:64px}
  .proof{flex-wrap:wrap}
  .listing-onboarding{padding:17px 16px}
  .onboarding-done ul,.onboarding-form{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}.contact-email{grid-column:auto}
  #sec-onboarding-contact .savebar{align-items:flex-start;flex-wrap:wrap}
  #sec-onboarding-contact .savebar .contact-status{flex:1 1 130px}
  #sec-onboarding-contact .savebar .btn{flex:none;min-width:180px;min-height:36px;height:auto;white-space:normal}
  .onboarding-publish-row{align-items:stretch;flex-direction:column}
  .onboarding-publish-row .btn{align-self:flex-start}
  .onboarding-session{align-items:flex-start;flex-wrap:wrap}
  .stack>section,.onboarding-support,#li-pin-q,#li-confirm-mode{scroll-margin-top:180px}
  .blk-svc-head{align-items:flex-start;flex-wrap:wrap}
  .blk-svc-actions{width:100%;margin-left:0;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- listing: time-block editor (024) ----------
   The bar spans open->close; blocks are absolutely positioned percentages.
   Suspended-today blocks hatch in amber; unsaved geometry is dashed. */
.blk-svc+.blk-svc{margin-top:16px}
.blk-svc-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.blk-svc-head b{font-size:13px}
.blk-svc-actions{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.blk-bar{position:relative;height:58px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.blk-bar--open{background:var(--good-soft)}
.blk-tick{position:absolute;top:0;bottom:16px;border-left:1px solid var(--line)}
.blk-tick i{position:absolute;left:3px;bottom:-14px;font-style:normal;font-size:9.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.blk-none{position:absolute;inset:0 0 16px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--faint);padding:0 14px;text-align:center}
.blk{position:absolute;top:7px;bottom:23px;background:var(--blue-100);border:1px solid var(--blue-200);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:var(--w-semibold);color:var(--blue-deep);cursor:grab;user-select:none;touch-action:none;font-variant-numeric:tabular-nums}
.blk.drag{cursor:grabbing;border-color:var(--blue);box-shadow:0 2px 8px rgba(70,85,246,.25);z-index:2}
.blk--new{border-style:dashed}
.blk--close{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(217,87,53,.12) 5px,rgba(217,87,53,.12) 10px)}
.blk--susp{background:var(--amber-soft);border-color:var(--amber);color:var(--amber);background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(217,87,53,.12) 5px,rgba(217,87,53,.12) 10px)}
.blk-lbl{pointer-events:none;overflow:hidden;white-space:nowrap;padding:0 3px}
.blk-h{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize}
.blk-h-l{left:-3px}
.blk-h-r{right:-3px}
.blk-menu{position:fixed;z-index:60;background:var(--canvas);border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:0 10px 28px rgba(0,0,0,.14);padding:4px;min-width:190px}
.blk-menu button{display:block;width:100%;text-align:left;padding:8px 11px;border:0;background:none;font:inherit;font-size:12.5px;color:var(--ink);border-radius:6px;cursor:pointer}
.blk-menu button:hover:not(:disabled){background:var(--card)}
.blk-menu button:disabled{color:var(--faint);cursor:default}

/* ---------- listing: house-rules editor (024) ---------- */
.rule-badge{width:34px;height:34px;flex:none;border-radius:8px;background:var(--blue-100);color:var(--blue-deep);display:inline-flex;align-items:center;justify-content:center;margin-top:5px}
.rule-badge svg{width:18px;height:18px}
.rule-icons{display:flex;gap:4px;flex-wrap:wrap}
.rule-icons button{width:30px;height:30px;border:1px solid var(--line);border-radius:6px;background:var(--canvas);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);padding:0}
.rule-icons button.on{border-color:var(--blue);background:var(--blue-100);color:var(--blue-deep)}
.rule-icons svg{width:16px;height:16px}

/* =================== team access =================== */
.team-owner{display:flex;align-items:center;gap:13px;margin-bottom:18px;padding:16px 18px}
.team-owner>div{min-width:0;flex:1}
.team-owner h2,.team-card-head h2{font-size:16px;font-weight:var(--w-semibold);letter-spacing:-.01em}
.team-owner p,.team-link-box p{font-size:12.5px;color:var(--muted);margin-top:2px}
.team-avatar{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--blue);color:#fff;font-size:13px;font-weight:var(--w-semibold)}
.team-avatar.pending{background:var(--amber-soft);color:var(--amber-text)}
.team-kicker{display:block;margin-bottom:2px;color:var(--muted);font-size:10.5px;font-weight:var(--w-semibold);letter-spacing:.08em;text-transform:uppercase}
.team-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.72fr);gap:18px;align-items:start}
.team-list-panel{min-width:0}
.team-tabs{padding:3px;border-bottom:1px solid var(--line);margin-bottom:0}
.team-tabs .fchip{border:0;background:transparent;border-radius:0;border-bottom:2px solid transparent;padding:8px 11px}
.team-tabs .fchip.on{background:transparent;border-color:var(--blue);color:var(--blue)}
.team-list{background:var(--canvas);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);overflow:hidden}
.team-list .dl-empty{padding:36px 18px;text-align:center;color:var(--muted);font-size:13px}
.team-invite-card{position:sticky;top:82px;padding:18px}
.team-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.team-close{width:28px;height:28px;display:none;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--muted);font:400 22px/1 var(--sans);cursor:pointer}
#tm-open-invite{display:none}
.team-close:hover{background:var(--gray-soft);color:var(--ink)}
.f-label{display:block;margin:13px 0 6px;font-size:12.5px;font-weight:var(--w-semibold);color:var(--ink-2)}
.f-in,.team-link-row input{width:100%;height:40px;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:0 11px;background:var(--canvas);color:var(--ink);font:inherit;font-size:13px}
.f-in:focus,.team-link-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.team-form-hint{font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:6px}
.team-perm-head{display:flex;justify-content:space-between;align-items:center;margin:17px 0 7px;font-size:12.5px;font-weight:var(--w-semibold)}
.team-perm-head button{border:0;background:none;padding:3px 0;color:var(--blue);font:inherit;font-size:11.5px;font-weight:var(--w-semibold);cursor:pointer}
.team-permissions{display:grid;gap:9px}
.team-perm-group{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 11px 8px}
.team-perm-group legend{padding:0 4px;color:var(--muted);font-size:10.5px;font-weight:var(--w-semibold);letter-spacing:.03em}
.team-switch{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.team-switch input{width:15px;height:15px;accent-color:var(--blue);flex:none}
.team-error{min-height:18px;margin-top:8px;color:var(--bad-text);font-size:12px;line-height:1.4}
.team-submit{width:100%;margin-top:5px}
.team-link-box{padding-top:2px}
.team-link-row{display:flex;gap:7px;margin:13px 0 8px}
.team-link-row input{min-width:0;font-variant-numeric:tabular-nums}
.team-link-box small{color:var(--muted);font-size:11.5px}
.team-another{width:100%;margin-top:16px}
.team-member{display:flex;align-items:center;gap:13px;padding:14px 16px;border-top:1px solid var(--line)}
.team-member:first-child{border-top:0}
.team-member-main{min-width:0;flex:1}
.team-member-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.team-member-title h3{font-size:13.5px;font-weight:var(--w-semibold)}
.team-member-main p{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.team-member-main small{font-size:11px;color:var(--faint)}
.team-member-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.team-text-danger{border:0;background:none;color:var(--bad-text);font:inherit;font-size:12px;font-weight:var(--w-semibold);cursor:pointer;padding:7px 3px}
/* ask card — in-app confirm. Replaces window.confirm so a status change
   does not surface as "localhost says". Hairline card, not browser chrome.
   The status shift (Waiting → Confirmed) is the one loud thing. */
.ask{
  display:none;
  position:fixed;inset:0;
  width:100%;max-width:none;height:100%;max-height:none;
  margin:0;padding:24px 16px;border:0;
  background:transparent;color:var(--ink);
  place-items:center;
}
.ask[open]{display:grid;animation:ask-in .16s ease-out}
.ask::backdrop{background:rgba(20,32,58,.34)}
@keyframes ask-in{
  from{opacity:0}
  to{opacity:1}
}
.ask-card{
  width:min(392px,100%);
  padding:22px 22px 18px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);
  animation:ask-card-in .16s ease-out;
}
.ask-top[hidden],.ask-shift[hidden],.ask-detail[hidden],.ask-body[hidden]{display:none}
@keyframes ask-card-in{
  from{transform:translateY(10px)}
  to{transform:none}
}
.ask-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:14px;
}
.ask-ref{
  display:inline-flex;align-items:center;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--canvas);
  font-size:12px;font-weight:var(--w-semibold);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.ask-title{
  font-size:20px;font-weight:var(--w-bold);
  letter-spacing:-.022em;line-height:1.2;
  margin:0 0 6px;
}
.ask-detail{
  margin:0 0 10px;font-size:13px;color:var(--muted);line-height:1.45;
}
.ask-body{
  margin:0 0 16px;font-size:13.5px;color:var(--ink-2);line-height:1.5;
}
.ask-shift{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:10px 12px;margin:0 0 18px;
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.ask-arrow{width:16px;height:16px;color:var(--faint);flex:none}
.ask-actions{
  display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;
}
.ask-actions .btn{min-width:108px;justify-content:center}
@media (max-width:520px){
  .ask-actions{flex-direction:column-reverse}
  .ask-actions .btn{width:100%}
}

.team-dialog{width:min(560px,calc(100% - 28px));max-height:calc(100vh - 40px);overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;background:var(--canvas);color:var(--ink);box-shadow:var(--shadow-pop)}
.team-dialog::backdrop{background:rgba(10,22,36,.38)}
.team-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}

@media (max-width:760px){
  .team-layout{grid-template-columns:1fr}
  .team-invite-card{position:static;display:none}
  .team-invite-card.team-invite-open{display:block}
  .team-close,#tm-open-invite{display:inline-flex}
  .team-member{align-items:flex-start;flex-wrap:wrap}
  .team-member-main{min-width:calc(100% - 52px)}
  .team-member-actions{width:100%;justify-content:flex-start;padding-left:51px}
}

/* =================== venue-created booking =================== */
.nb-back{margin-bottom:15px}
.nb-back a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;font-weight:var(--w-semibold)}
.nb-back .ic{width:15px;height:15px}
.nb-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(285px,.62fr);gap:18px;align-items:start}
.nb-main{display:grid;gap:14px;min-width:0}
.nb-card{padding:20px}
.nb-section-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:17px}
.nb-section-head>span{width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:var(--w-semibold)}
.nb-section-head h2,.nb-payment h2,.nb-summary h2,.nb-success h2{font-size:16px;font-weight:var(--w-semibold);letter-spacing:-.01em}
.nb-section-head p,.nb-payment p{font-size:12px;color:var(--muted);margin-top:2px}
.nb-phone{display:grid;grid-template-columns:minmax(190px,.75fr) minmax(180px,1fr);gap:8px}
.nb-products{display:grid;gap:8px;margin-top:4px}
.nb-product{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--canvas)}
.nb-product>span:first-child{min-width:0;flex:1}
.nb-product b{display:block;font-size:13px;font-weight:var(--w-semibold)}
.nb-product small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
.nb-qty{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11.5px}
.nb-qty .input{width:68px;text-align:center;padding:0 6px}
.nb-availability{min-height:18px;font-size:12px;color:var(--muted)}
.nb-payment{display:flex;align-items:center;gap:12px;background:var(--good-soft);border-color:rgba(15,159,125,.25)}
.nb-pay-mark,.nb-success-mark{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;background:var(--good);color:#fff;font-size:15px;font-weight:var(--w-semibold)}
.nb-error{margin:0;min-height:21px}
.nb-summary{position:sticky;top:82px;background:var(--canvas)}
.nb-summary>h2{margin:2px 0 15px}
.nb-summary dl{margin:0}
.nb-summary dl>div{display:grid;gap:3px;padding:11px 0;border-top:1px solid var(--line)}
.nb-summary dt{font-size:10.5px;color:var(--muted);font-weight:var(--w-semibold);text-transform:uppercase;letter-spacing:.045em}
.nb-summary dd{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.nb-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:16px 0;border-top:1px solid var(--line);font-size:13px;font-weight:var(--w-semibold)}
.nb-total strong{font-size:20px;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}
.nb-confirm{width:100%;justify-content:center}
.nb-summary>p{margin-top:10px;color:var(--muted);font-size:10.5px;line-height:1.45}
.nb-success{display:flex;align-items:flex-start;gap:15px;max-width:660px;padding:24px}
.nb-success p{margin:4px 0 17px;color:var(--muted);font-size:13px}
.nb-success>div>div{display:flex;gap:8px;flex-wrap:wrap}
.bk-source-row{margin-top:-7px;padding-top:11px;border-top:1px solid var(--line)}
.bk-filter-label{margin-right:3px;color:var(--muted);font-size:11.5px;font-weight:var(--w-semibold)}
.bk-created{white-space:nowrap;font-size:11.5px;color:var(--ink-2)}
.bk-created-by{min-width:112px;font-size:12px}

@media (max-width:760px){
  .nb-layout{grid-template-columns:1fr}
  .nb-summary{position:static;order:2}
  .nb-phone{grid-template-columns:1fr}
}

[hidden]{display:none!important}

.bk-detail{display:none}
@media(min-width:721px){
 .bk-table{min-width:0;width:100%;table-layout:auto}
 .bk-table th,.bk-table td{white-space:normal;padding:12px 10px;font-size:12px;vertical-align:top}
 .bk-table :is(th,td):is(:nth-child(1),:nth-child(3),:nth-child(8),:nth-child(9)){display:none}
 .bk-table :is(th,td):last-child{position:sticky;right:0;background:var(--canvas);min-width:120px;box-shadow:-5px 0 8px rgba(20,35,60,.04)}
 .bk-table :is(th,td):nth-last-child(2){min-width:90px}
 .bk-table td:nth-child(2){min-width:120px}.bk-table select{max-width:150px;width:100%}
 .bk-detail{display:block;color:var(--muted);font-size:11px;margin-top:5px}.bk-detail summary{cursor:pointer;color:var(--blue)}.bk-detail p{margin-top:6px}
 #py-queue .svc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;padding:20px}
 #py-queue .svc-name{min-width:0}#py-queue .svc-end{grid-column:1/-1;justify-content:flex-end}
 .home-nav__face{background-position:center;background-repeat:no-repeat;background-size:20px}
}
:where(a,button,input,select,summary):focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.dl-loading{display:grid;gap:14px;margin:28px 0}.dl-loading i{display:block;height:48px;border-radius:8px;background:linear-gradient(100deg,#e9edf5,#f8f9fc,#e9edf5);background-size:220% 100%;animation:dl-shimmer 1.5s linear infinite}.dl-loading i:first-child{height:90px}.content.dl-skel .tile-val,.content.dl-skel .chart,.content.dl-skel .attn{color:transparent;background:#e9edf5;border-radius:8px;min-height:30px}.content.dl-skel{user-select:none}@media(prefers-reduced-motion:reduce){.dl-loading i{animation:none}}

@media(min-width:721px) and (max-width:1250px){.overview-content .grid-main{grid-template-columns:1fr}.overview-content .grid-main>*,.overview-content .grid-main>*+*{grid-column:auto}.overview-content .grid-main>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:16px}.overview-content .grid-main>div:last-child>section:first-child{grid-column:1/-1}.overview-content .card-head{flex-wrap:wrap}}