/* Plus Jakarta Sans + Unbounded — same fonts the landing uses */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Unbounded:wght@500;700;800&display=swap');

/* Pull landing tokens + components (real components from the landing) */
@import url('css/tokens.css?v=6');
/* base.css carries the iOS-grade tap polish (no tap-highlight, no 300ms
   delay, link-press dim, slim scrollbars, tabular-nums). It was loading
   on the landing only; wireframes need it too. */
@import url('css/base.css?v=1');
@import url('css/layout.css');
@import url('css/components/header.css?v=6');
@import url('css/components/header-service.css?v=8');
@import url('css/components/footer.css');
@import url('css/components/store-badges.css');
@import url('css/components/breadcrumbs.css?v=2');
@import url('css/components/page-title.css');
@import url('css/components/buttons.css?v=4');
@import url('css/components/radio.css');
@import url('css/components/checkbox.css');
@import url('css/components/form-field.css?v=6');
@import url('css/components/datepicker.css');
@import url('css/components/segmented-filter.css?v=2');
@import url('css/components/role-segments.css?v=5');
@import url('css/components/dropdown.css?v=3');
@import url('css/components/account-sidebar.css?v=9');
@import url('css/components/avatar-upload.css');
@import url('css/components/file-upload.css?v=2');
@import url('css/components/auth-shell.css?v=4');
@import url('css/components/settings-form.css?v=3');
@import url('css/components/icon-tile.css?v=2');
@import url('css/components/list-row.css?v=2');
@import url('css/components/mini-pill.css?v=3');
@import url('css/components/alert-panel.css?v=5');
@import url('css/components/toggle.css?v=2');
@import url('css/components/reason-card.css?v=2');
@import url('css/components/status-pill.css?v=1');
@import url('css/components/empty-state.css?v=3');
@import url('css/components/otp-input.css?v=4');
@import url('css/components/wizard-shell.css?v=2');
@import url('css/components/stat-card.css?v=1');
@import url('css/components/stepper.css?v=6');
@import url('css/components/section-head.css?v=2');
@import url('css/components/calendar.css?v=1');
@import url('css/components/slot-picker.css?v=1');
@import url('css/components/qty-stepper.css?v=3');
@import url('css/components/choice-card.css?v=3');
@import url('css/components/booking-wizard.css?v=31');
@import url('css/components/booking-confirm.css?v=24');
@import url('css/components/offer-card.css?v=1');
@import url('css/components/create-offer-panel.css?v=1');
@import url('css/components/inbox.css?v=7');
@import url('css/components/session-detail.css?v=13');
@import url('css/components/card-session.css?v=3');
@import url('css/components/booking-row.css?v=5');
@import url('css/components/search-results.css?v=1');
@import url('css/components/balance-card.css?v=1');
@import url('css/components/rewards.css?v=1');
@import url('css/components/tx-table.css?v=1');
@import url('css/components/request-trainer.css?v=1');
@import url('css/components/payment-row.css?v=1');
@import url('css/components/profile-head.css?v=1');
@import url('css/components/waiver-explainer.css?v=1');

/* Icon-load stability: the <i data-lucide> placeholder is inline (0 box) until
   icon-loader.js swaps in the SVG, so any element whose height rests on an icon
   collapses for that frame ("height disappears"). Give the placeholder a real
   inline-flex box that honours the per-context width/height rules, so space is
   reserved up front and nothing reflows. After swap the <svg class="lucide">
   takes over (existing component sizing applies). */
i[data-lucide]{ display:inline-flex; flex:none; width:1em; height:1em; }

/* wireframe-local layout constants (not landing tokens) */
:root{
  --wf-max:var(--container-max);
  --wf-content-gap:var(--space-24);   /* breadcrumb's top + bottom padding (equal), single source of truth */
}

/* Big page-title tokens scale down on tablet and mobile across every
   wireframes page. Redefining the tokens at the breakpoint means every
   component that uses var(--fs-h1) or var(--fs-h2) automatically gets the
   smaller size — no per-page edits required. Pages that hard-code a size
   (literal px) are unaffected by design. */
@media (max-width: 980px){
  :root{
    --fs-h1: var(--fs-h1-md);  /* 48 → 42 */
    --fs-h2: var(--fs-h2-md);  /* 38 → 36 */
  }
}
@media (max-width: 720px){
  :root{
    --fs-h1: var(--fs-h1-sm);  /* 42 → 28 */
    --fs-h2: var(--fs-h2-sm);  /* 36 → 24 */
    --fs-h2-md: var(--fs-h2-sm);  /* keep tablet token in sync at mobile */
    --fs-h1-md: var(--fs-h1-sm);
  }
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
/* page background = landing's --bg-3 token (subtle gray surface, used under hero) */
body{font:13px/1.4 var(--font-base);font-variant-numeric:tabular-nums;background:#f4f6fa;color:#000;display:flex;flex-direction:column;min-height:100vh}
a{color:inherit;text-decoration:none}
/* Wireframe-chrome anchor hover.
   Exclusions:
   - .btn / .account-nav-link own their own hover styling
   - .card (session card) hover is handled by card-session.css
   - .bk-row__link is a stretched/hidden link covering a styled card surface;
     a brand-soft background flood would tint the whole card on hover.
   - .lpub-preview is a card-shaped link with its own hover treatment. */
/* No hover fill on any anchor — the brand-soft hover-bg flood used to tint
   anchors that don't own their own hover treatment. Now they're transparent.
   The exclusion list keeps button-, card-, and stretched-link surfaces from
   being affected (they handle hover themselves). */
a:hover:not(.btn):not(.account-nav-link):not(.card):not(.bk-row__link):not(.lpub-preview){
  background:transparent;
}

/* Real inline text-links (anchors INSIDE running text — paragraphs, list
   items, definition descriptions, blockquotes) read as links: primary
   colour by default, brand-tinted underline on hover. Anchors that wrap a
   whole component, card, or row do NOT match this selector and keep their
   component-defined styling. .btn is excluded for forms-as-text edge cases.
   Footer copy is overridden by footer.css higher specificity. */
main :is(p, li, dd, blockquote) a:not(.btn){
  color:var(--brand-ink);
}
main :is(p, li, dd, blockquote) a:not(.btn):hover{
  background:transparent;
  text-decoration:underline;
  text-decoration-color:rgba(var(--brand-rgb), .25);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

/* shell */
.wf-header{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #000;flex-wrap:wrap;background:#fff}

/* ── Header v2 (proposal, currently used only on client search) ───────── */
.hd2{background:#fff;border-bottom:1px solid #000;position:sticky;top:0;z-index:5}
.hd2-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;
  height:64px;
}
.hd2-logo{
  display:inline-flex;align-items:center;gap:8px;
  font:600 16px/1 -apple-system,system-ui,sans-serif;letter-spacing:-.01em;
  text-decoration:none;color:#000;
}
.hd2-logo:hover{background:transparent;color:#000}
.hd2-mark{
  display:inline-grid;place-items:center;width:24px;height:24px;
  border:1.5px solid #000;font:10px monospace;
}
.hd2-nav{display:flex;gap:4px;justify-self:start}
.hd2-nav a{
  position:relative;
  padding:8px 14px;text-decoration:none;color:#000;
  font:500 13px/1 -apple-system,system-ui,sans-serif;
  border-radius:6px;
}
.hd2-nav a:hover{background:var(--hover-bg);color:var(--hover-text)}
.hd2-nav a[aria-current="page"]{
  font-weight:700;
}
.hd2-nav a[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-21px;
  height:2px;background:#000;
}
.hd2-right{display:flex;align-items:center;gap:8px}
.hd2-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border:1px solid #000;border-radius:999px;
  font:500 11px/1 monospace;text-transform:uppercase;letter-spacing:.5px;
  text-decoration:none;color:#000;
}
.hd2-chip:hover{background:var(--hover-bg);color:var(--hover-text)}
.hd2-warn{display:inline-block;width:14px;text-align:center}
.hd2-bell{
  position:relative;display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:50%;border:1px solid #000;
  text-decoration:none;color:#000;
}
.hd2-bell:hover{background:var(--hover-bg);color:var(--hover-text)}
.hd2-bell-i{font-size:14px;line-height:1}
.hd2-bell-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;padding:0 4px;
  background:#000;color:#fff;border-radius:999px;
  font:600 9px/18px monospace;text-align:center;
}
.hd2-user{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px 4px 4px;border:1px solid #000;border-radius:999px;
  text-decoration:none;color:#000;
}
.hd2-user:hover{background:var(--hover-bg);color:var(--hover-text)}
.hd2-avatar{
  display:inline-grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  background:#000;color:#fff;
  font:700 10px monospace;letter-spacing:.5px;
}
.hd2-user:hover .hd2-avatar{background:#fff;color:#000}
.hd2-name{font:500 13px/1 -apple-system,system-ui,sans-serif}

@media (max-width:720px){
  .hd2-inner{padding:0 16px;gap:16px;height:56px}
  .hd2-nav{display:none}
  .hd2-name{display:none}
  .hd2-chip{padding:6px 8px}
  .hd2-chip span:last-child{display:none}
}
.wf-logo{font-weight:700;text-decoration:none}
.wf-nav{display:flex;gap:6px;flex:1}
.wf-nav a{padding:4px 8px;text-decoration:none}
.wf-chip,.wf-bell,.wf-cta,.wf-user{padding:4px 10px;border:1px solid #000;text-decoration:none;font-size:11px}
.wf-cta{background:#000;color:#fff}

/* Breadcrumbs component lives in redesign/assets/css/components/breadcrumbs.css.
   In the wireframe shell we override the inner container to match wf-shell
   (--wf-max wide, --space-18 content edge) so crumbs align with main below.
   container pad (--space-10) + .bc-link pad (--space-8) = 18 = wf-shell pad.
   The component owns its own vertical gap symmetrically (top == bottom) so
   the breadcrumb row sits with equal breathing room above and below. */
.breadcrumbs .container{
  max-width:var(--wf-max);
  padding:0 var(--space-10);
}
.breadcrumbs{padding:var(--wf-content-gap) 0}

.wf-shell{--shell-pad:var(--space-18);flex:1;max-width:var(--wf-max);width:100%;margin:0 auto;padding:0 var(--shell-pad) var(--space-18)}
.wf-shell--sidebar{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:start}
main{min-width:0}

/* Tablet collapse — drop the 240px sidebar column so the (now collapsed)
   account-nav trigger sits as a full-width row above main content, matching
   the mobile behaviour. The trigger itself swaps in via account-sidebar.css
   at the same breakpoint. */
@media (max-width:980px){
  .wf-shell--sidebar{grid-template-columns:1fr}
}

.wf-sidebar{border:1px solid #000;background:#fff}
.wf-sidebar ul{list-style:none;margin:0;padding:0}
.wf-sidebar a{display:block;padding:8px 12px;text-decoration:none;border-bottom:1px solid #000}
.wf-sidebar li:last-child a{border-bottom:0}
.wf-sidebar a[aria-current="page"]{background:#000;color:#fff}

.wf-footer{margin-top:auto;border-top:1px solid #000;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;font-size:11px}
.wf-footer h4{margin:0 0 6px;font-size:11px;text-transform:uppercase}
.wf-footer ul{list-style:none;padding:0;margin:0}
.wf-footer li{margin:2px 0}
.wf-footer a{text-decoration:none}

/* boxes — card-surface for content sections (token-driven) */
.box{
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  padding:var(--space-24) var(--space-20) var(--space-20);
  position:relative;
  margin-bottom:var(--space-12);
  background:var(--bg);
}
.box.dash{
  border-style:dashed;
  border-color:var(--line-strong);
  color:var(--muted);
  font:var(--fw-medium) var(--fs-meta)/1.4 var(--font-base);
  text-align:center;
  min-height:80px;
  display:grid;
  place-items:center;
  background:transparent;
}
/* Wireframe annotation label — small uppercase tag in the top-left corner */
.box .label,.label{
  position:absolute;
  top:var(--space-8);
  left:var(--space-12);
  font:var(--fw-semibold) var(--fs-kicker)/1 var(--font-base);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:var(--ls-wider);
}

/* layout helpers */
.col{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px}
.row>*{flex:1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
.aside-2col{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
/* Generic sticky helper — clears the app header strip + 24px buffer. */
.sticky{position:sticky;top:var(--sticky-offset)}

/* steps */
.steps{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #000;flex-wrap:wrap;margin-bottom:12px;background:#fff}
.steps span{padding:4px 10px;border:1px solid #000;font:11px monospace}
.steps span[aria-current="step"]{background:#000;color:#fff}
.steps em{color:#999;font-style:normal}

/* tabs / chips */
.tabs{display:flex;border-bottom:1px solid #000;margin:0 0 12px}
.tabs a{padding:8px 14px;text-decoration:none}
.tabs a[aria-current="page"]{border:1px solid #000;border-bottom-color:#fff;font-weight:700;margin-bottom:-1px}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0}
.chips a{padding:4px 12px;border:1px solid #000;text-decoration:none;font-size:11px;border-radius:999px}
.chips a[aria-current="page"]{background:#000;color:#fff}

/* card — legacy lo-fi placeholder card (with .media child).
   Scoped via :has() so it doesn't override card-session.css for real
   session cards (which use a .photo child). */
.card:has(> .media){border:1px solid #000;display:flex;flex-direction:column;background:#fff}
.card:has(> .media) .media{border-bottom:1px solid #000;border-style:dashed;min-height:120px;display:grid;place-items:center;color:#666;font:10px monospace}
.card:has(> .media) .body{padding:8px;font-size:12px}

/* chat-bubble — message bubble in chat threads */
.chat-bubble{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font-size:13px;max-width:80%}
.chat-bubble.is-self{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* legacy .slot-chip retired — use .slot from components/slot-picker.css */

/* full-width modifier for the real .btn component (used in cards, auth, wizards) */
.btn.btn-block{display:flex;width:100%}

/* Inside the wireframes settings shell the account-nav sits in the same
   surface as a row of settings cards; the production component's outer
   border becomes a redundant double-line, so suppress it. */
body[data-shell="settings"] .account-nav{border:none}

/* titles */
h1.wf-title{font-size:16px;margin:8px 0 12px}
h2.wf-title{font-size:14px;margin:8px 0 10px}

/* sitemap (index) */
.sitemap{padding:24px;max-width:960px;margin:0 auto;flex:1}
.sitemap h1{font-size:18px}
.sitemap h2{font-size:13px;text-transform:uppercase;margin-top:20px;border-bottom:1px solid #000;padding-bottom:4px}
.sitemap ul{padding-left:16px}
.sitemap li{margin:2px 0}

/* auth split (no shell pages) — full-viewport, no page scroll */
body[data-shell="auth"]{height:100vh;overflow:hidden}
.auth-split{height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-split>*{display:grid;place-items:center;padding:32px}
.auth-split .right{overflow-y:auto}
.auth-split .left{border-right:1px solid #000;font:18px/1 monospace;color:#999}

/* media (full row image/video block) */
.media-block{border:1px dashed #000;min-height:280px;display:grid;place-items:center;color:#666;font:11px monospace}

/* ── modal / popover overlays (wireframe stub) ──────────────────────── */
.wf-overlay{position:fixed;inset:0;display:grid;place-items:center;padding:24px;z-index:50}
.wf-overlay__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.wf-overlay__panel{
  position:relative;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  width:100%;max-width:520px;max-height:calc(100vh - 48px);overflow:auto;
  box-shadow:0 20px 60px rgba(15,23,42,.20);
  padding:var(--space-24);
}
.wf-overlay__panel--lg{max-width:720px}
.wf-overlay__panel--sm{max-width:420px}
.wf-overlay__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-12);margin-bottom:var(--space-16)}
.wf-overlay__title{margin:0;font:var(--fw-semibold) var(--fs-h3)/1.25 var(--font-base);color:var(--ink)}
.wf-overlay__sub{margin:4px 0 0;color:var(--muted);font:var(--fw-regular) var(--fs-meta)/1.4 var(--font-base)}
.wf-overlay__close{
  background:transparent;border:0;width:32px;height:32px;border-radius:var(--radius-sm);cursor:pointer;
  display:inline-grid;place-items:center;color:var(--muted);
}
.wf-overlay__close:hover{background:var(--brand-soft);color:var(--brand-ink)}
.wf-overlay__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);margin-top:var(--space-20);padding-top:var(--space-16);border-top:1px solid var(--line);flex-wrap:wrap}
.wf-overlay__foot--end{justify-content:flex-end}
.wf-overlay__foot-left{display:flex;gap:var(--space-8);flex-wrap:wrap}
.wf-overlay__foot-right{display:flex;gap:var(--space-8);margin-left:auto;flex-wrap:wrap}

/* Mobile: stack the modal foot vertically and full-width the actions so a
   3-button foot (e.g. Reschedule / Keep / Cancel & refund) doesn't overflow
   the 390 px viewport. */
@media (max-width:560px){
  .wf-overlay__foot{flex-direction:column;align-items:stretch}
  .wf-overlay__foot-left,
  .wf-overlay__foot-right{margin:0;width:100%;flex-direction:column}
  .wf-overlay__foot .btn{width:100%;justify-content:center}
}

/* notifications popover — global, anchored under the header bell.
   Open/close state is driven by .is-open; CSS handles the fade + lift animation
   without using layout properties (transform/opacity only, per anti-slop rules). */
.wf-popover{
  position:fixed;
  top:calc(var(--app-header-h) + 8px);
  right:16px;
  width:400px;
  max-height:min(70vh, 640px);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:0 1px 3px rgba(15,23,42,.05),0 12px 32px -8px rgba(15,23,42,.16),0 24px 60px -16px rgba(15,23,42,.18);
  z-index:60;
  display:flex;flex-direction:column;
  overflow:hidden;
  visibility:hidden;opacity:0;transform:translateY(-4px) scale(.985);transform-origin:top right;
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;
}
.wf-popover.is-open{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .14s ease,transform .14s ease;
}
@media (max-width:640px){
  .wf-popover{top:calc(var(--app-header-h) + 4px);right:8px;left:8px;width:auto;max-height:80vh}
}

/* head */
.wf-popover__head{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);
  padding:var(--space-14) var(--space-16) var(--space-12);
  border-bottom:1px solid var(--line);
}
.wf-popover__title-wrap{display:flex;align-items:center;gap:var(--space-8)}
.wf-popover__title{margin:0;font:var(--fw-bold) var(--fs-md)/1.2 var(--font-base);color:var(--ink);letter-spacing:-.005em}
.wf-popover__count{
  display:inline-grid;place-items:center;
  min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);
  font:var(--fw-bold) var(--fs-kicker)/1 var(--font-base);
}
.wf-popover__head-actions{display:flex;align-items:center;gap:var(--space-4)}
.wf-popover__action{
  appearance:none;background:transparent;border:0;
  padding:6px 10px;border-radius:var(--radius-sm);
  font:var(--fw-semibold) var(--fs-meta)/1 var(--font-base);
  color:var(--brand-ink);cursor:pointer;
  transition:background .12s ease;
}
.wf-popover__action:hover{background:var(--brand-soft-2)}

/* filter tabs */
.wf-popover__tabs{
  flex:0 0 auto;
  display:flex;gap:var(--space-2);
  padding:var(--space-8) var(--space-12) 0;
  border-bottom:1px solid var(--line);
}
.wf-popover__tab{
  appearance:none;background:transparent;border:0;
  padding:8px 12px 10px;margin-bottom:-1px;
  font:var(--fw-semibold) var(--fs-meta)/1 var(--font-base);
  color:var(--muted);
  border-bottom:2px solid transparent;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .12s,border-color .12s;
}
.wf-popover__tab:hover{color:var(--ink);background:transparent}
.wf-popover__tab.is-active{color:var(--ink);border-bottom-color:var(--ink)}
.wf-popover__tab-count{
  font:var(--fw-bold) 10px/1 var(--font-base);
  color:var(--muted);
  padding:1px 5px;border-radius:999px;background:var(--bg-3);
}
.wf-popover__tab.is-active .wf-popover__tab-count{color:var(--brand-ink);background:var(--brand-soft)}

/* body — scroll area with non-default scrollbar */
.wf-popover__list{
  flex:1 1 auto;
  overflow-y:auto;overscroll-behavior:contain;
  padding:0 0 4px;
  display:flex;flex-direction:column;
  scrollbar-width:thin;
  scrollbar-color:rgba(15,23,42,.18) transparent;
}
.wf-popover__list::-webkit-scrollbar{width:8px}
.wf-popover__list::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.wf-popover__list::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.16);
  border-radius:999px;
  border:2px solid var(--bg);
  background-clip:padding-box;
}
.wf-popover__list::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.32);border:2px solid var(--bg);background-clip:padding-box}

/* group label */
.wf-popover__group{
  display:flex;align-items:center;
  padding:14px 16px 6px;
  font:var(--fw-bold) var(--fs-kicker)/1 var(--font-base);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}

/* item */
.wf-popover__item{
  position:relative;
  display:grid;grid-template-columns:36px 1fr auto;
  gap:var(--space-12);
  padding:10px 16px 12px;
  align-items:start;
  cursor:pointer;
  transition:background .12s ease;
}
.wf-popover__item + .wf-popover__item::before{
  content:"";position:absolute;left:64px;right:16px;top:0;height:1px;background:var(--line-2);
}
.wf-popover__item:hover{background:var(--bg-3)}
.wf-popover__item--unread{background:rgba(var(--brand-rgb), .045)}
.wf-popover__item--unread:hover{background:rgba(var(--brand-rgb), .08)}

/* category icon — Solar Bold-Duotone in tinted tile */
.wf-popover__icon{
  width:36px;height:36px;border-radius:10px;
  display:inline-grid;place-items:center;
  flex:0 0 36px;
}
.wf-popover__icon svg{width:18px;height:18px;display:block}
.wf-popover__icon--money    {background:var(--brand-soft);  color:var(--brand-ink)}
.wf-popover__icon--schedule {background:#fef3c7;             color:#92400e}
.wf-popover__icon--system   {background:#dcfce7;             color:#166534}
.wf-popover__icon--marketing{background:#ede9fe;             color:#6d28d9}
.wf-popover__icon--review   {background:var(--star-soft);    color:#92400e}

.wf-popover__body{
  font:var(--fw-medium) var(--fs-sm)/1.45 var(--font-base);
  color:var(--ink);
  min-width:0;
  word-wrap:break-word;
}
.wf-popover__body b{font-weight:var(--fw-bold)}
.wf-popover__body a{color:var(--brand-ink);font-weight:var(--fw-semibold)}
.wf-popover__body a:hover{background:transparent;text-decoration:underline}
.wf-popover__time{
  display:block;margin-top:4px;
  color:var(--muted);
  font:var(--fw-medium) var(--fs-meta)/1 var(--font-base);
}

/* unread dot at right edge of an unread row */
.wf-popover__dot{
  display:none;
  width:8px;height:8px;border-radius:50%;
  background:var(--brand);
  margin:14px 4px 0 0;
}
.wf-popover__item--unread .wf-popover__dot{display:block}
.wf-popover__item--unread .wf-popover__kebab{display:none}
.wf-popover__item:not(.wf-popover__item--unread):hover .wf-popover__dot{display:none}

/* kebab — visible on hover */
.wf-popover__kebab{
  appearance:none;background:transparent;border:0;
  width:26px;height:26px;border-radius:6px;
  color:var(--muted);cursor:pointer;
  display:inline-grid;place-items:center;
  font:600 14px/1 var(--font-base);
  opacity:0;
  transition:opacity .12s,background .12s,color .12s;
}
.wf-popover__item:hover .wf-popover__kebab,
.wf-popover__kebab:focus-visible{opacity:1}
.wf-popover__kebab:hover{background:var(--ink);color:#fff}

/* empty state */
.wf-popover__empty{
  padding:48px 24px;
  text-align:center;color:var(--muted);
  font:var(--fw-medium) var(--fs-sm)/1.5 var(--font-base);
  display:none;
}
.wf-popover__list:not(:has(.wf-popover__item:not([hidden]))) .wf-popover__empty{display:block}

/* foot */
.wf-popover__foot{
  flex:0 0 auto;
  padding:10px 16px;
  border-top:1px solid var(--line);
  background:var(--bg-3);
  text-align:center;
}
.wf-popover__foot a{
  font:var(--fw-semibold) var(--fs-meta)/1 var(--font-base);
  color:var(--ink-2);
}
.wf-popover__foot a:hover{background:transparent;color:var(--brand-ink)}

/* contextual dropdown (used by listing kebab, etc.) */
.wf-pop-menu{position:absolute;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(15,23,42,.15);min-width:180px;padding:6px;z-index:30}
.wf-pop-menu__item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);
  font:var(--fw-medium) var(--fs-sm)/1 var(--font-base);color:var(--ink);cursor:pointer;text-decoration:none}
.wf-pop-menu__item:hover{background:var(--brand-soft);color:var(--brand-ink)}
.wf-pop-menu__item--danger{color:#b91c1c}
.wf-pop-menu__item--danger:hover{background:#fee2e2;color:#b91c1c}
.wf-pop-menu__divider{height:1px;background:var(--line);margin:4px 0}

/* mobile */
@media (max-width:720px){
  /* 16px content gutter from screen edges (left + right). The desktop 18px
     padding becomes the mobile-floor 16px per the project rule. Breadcrumbs
     align to the same gutter so chrome and content share one edge column. */
  .wf-shell{--shell-pad:var(--space-16);padding-left:var(--shell-pad);padding-right:var(--shell-pad)}
  .breadcrumbs .container{padding-left:var(--space-16);padding-right:var(--space-16)}

  .wf-shell--sidebar{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .aside-2col{grid-template-columns:1fr}
  .wf-footer{grid-template-columns:1fr 1fr}
  .wf-nav{display:none}
  .auth-split{grid-template-columns:1fr}
  .auth-split .left{display:none}
}