/*
 * Squidb stylesheet — production design system (see UI-SYSTEM.md).
 * Clean-SaaS aesthetic on a slate + accent token system. Built in core so every
 * module inherits it. Hand-written, CSP-safe (no inline styles), escape-by-default
 * templates. Tokens layer primitive -> semantic -> component; per-tenant theming
 * overrides only --primary / --accent (validated #rrggbb, injected with the nonce).
 */

/* Nunito — self-hosted (SIL OFL), latin subset. Google Fonts CDN is blocked by our
 * font-src 'self' CSP, so the woff2 files live under /assets/fonts. Paces admin look. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/nunito-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/nunito-500.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/nunito-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/nunito-800.woff2") format("woff2"); }

:root {
    /* ── primitive ramps ─────────────────────────────────────────────────── */
    --slate-50: #f8fafc;  --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1;
    --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155;
    --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #0b1220;
    --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8;

    /* ── Paces brand hues (pure — for icon chips, charts, sparklines) ──────── */
    --c-primary: #236dc9; --c-secondary: #7b70ef; --c-success: #02bc9c;
    --c-info: #5bc3e1; --c-warning: #f9bf59; --c-danger: #f7577e; --c-dark: #313a46;

    /* ── semantic (themeable surface) — Paces (CoderThemes) palette ────────── */
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #eef2f7;
    --surface-hover: #f6f7fb;
    --sidebar: #1e1f27;                 /* Paces dark sidenav */
    --sidebar-2: #22232c;               /* active item bg */
    --sidebar-text: #8495ab;            /* item text (AA ~5:1 on #1e1f27) */
    --sidebar-muted: #8896a8;           /* section-title dividers */
    --sidebar-hover-bg: #2f3742;
    --sidebar-hover-text: #bccee4;
    --sidebar-active-text: #ced6df;
    --border: #e7e9eb;
    --border-strong: #d7dce2;
    --text: #313a46;                    /* Paces headings/dark */
    --muted: #5b636b;                   /* AA: ~5.4:1 on white */
    --subtle: #656d75;                  /* AA on white AND the #f6f7fb hover row (>=4.9) */
    --primary: var(--c-primary);
    --primary-hover: #1e5dab;
    --primary-soft: #e9f1fb;
    --accent: var(--c-primary);
    --ring: rgba(35, 109, 201, .35);
    --ring-soft: rgba(35, 109, 201, .15);

    /* status — AA-safe text on Paces soft tints (badge bg = hue @ ~15%) */
    --ok-bg: #e3f7f2; --ok-text: #05674c; --ok-border: #b6ece0;
    --warn-bg: #fdf4e3; --warn-text: #8a5e0f; --warn-border: #f7e4b8;
    --err-bg: #fde8ee; --err-text: #c2334f; --err-border: #f8c6d3;
    --info-bg: #e7f5fb; --info-text: #0e7490; --info-border: #c2e7f3;

    /* ── spacing (4px base, 8pt rhythm) ──────────────────────────────────── */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-8: 48px;

    /* ── radii (Paces: 4px base, tight) ──────────────────────────────────── */
    --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-full: 999px;

    /* ── elevation (Paces soft cool-gray shadow) ─────────────────────────── */
    --card-shadow: 0 1px 4px 0 rgba(130, 143, 163, .15);
    --shadow-sm: var(--card-shadow);
    --shadow: 0 1px 4px 0 rgba(130, 143, 163, .15);
    --shadow-md: 0 3px 10px 0 rgba(130, 143, 163, .2), 0 1px 3px rgba(130, 143, 163, .12);
    --shadow-lg: 0 10px 30px 0 rgba(48, 58, 70, .16), 0 4px 8px rgba(130, 143, 163, .1);

    /* ── motion ──────────────────────────────────────────────────────────── */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: 120ms; --t-base: 180ms; --t-slow: 240ms;

    /* ── type ────────────────────────────────────────────────────────────── */
    --font: 14px/1.5 "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ── safe-area (notch / home indicator) ──────────────────────────────── */
    --sa-top: env(safe-area-inset-top, 0px);
    --sa-bottom: env(safe-area-inset-bottom, 0px);
    --sa-left: env(safe-area-inset-left, 0px);
    --sa-right: env(safe-area-inset-right, 0px);
    --bottomnav-h: 60px;
}

/* Note: cross-document @view-transition was trialled for page-swap animation but
   removed — Chrome fires an uncaught "Transition was skipped" pageerror and leaves the
   page in a non-stable paint state (breaks click/snapshot stability) for marginal gain.
   Native feel is carried by the bottom nav, PWA shell, safe-area, and element motion. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: var(--font); color: var(--text); background: var(--bg);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Native-app feel: stop the page rubber-banding/scroll-chaining (bg keeps any residual
   bounce from flashing white). See the mobile block for type + touch-target sizing. */
html, body { overscroll-behavior-y: none; }
/* Kill the "this is a website" tells on CHROME only (never body content, so real text
   stays selectable): no tap-highlight flash, no long-press callout, no accidental
   selection, and no ~300ms double-tap click delay. A real :active press replaces the
   highlight so taps still feel responsive. */
.btn, .nav-link, .bottomnav-item, .dash-tab, .icon-btn, .roster-row, .cell-link, .page-link, .badge {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
.btn:active, .nav-link:active, .bottomnav-item:active, .roster-row:active {
    transform: scale(.97);
    transition: transform var(--t-fast) var(--ease-out);
}
[x-cloak] { display: none !important; }
a { color: inherit; text-decoration: none; }
/* Inline content link (emails, cross-references): accent colour, never underlined. */
.link { color: var(--primary); font-weight: 500; }
.link:hover { color: var(--primary-hover); }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.muted { color: var(--muted); }
code { font: var(--mono); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* Accessible focus ring — visible only for keyboard users. */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- brand ---------- */
/* The gradient is derived from the brand, not blended with the platform's blue. It used to read
   `linear-gradient(--blue-500, --primary)`, so a rebranded surface got a mark that faded from Squidb
   blue into the tenant's colour — most visible on a vertical's login page, where the mark is the
   largest thing on screen. The flat background is the fallback where color-mix is unsupported. */
.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
    background: var(--primary);
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 72%, white), var(--primary));
    color: #fff; font-weight: 700; font-size: 16px; }
.brand-name { font-weight: 650; font-size: 15px; letter-spacing: -.01em; }

/* ---------- app shell ---------- */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }
/* Sidebar is pinned to the viewport so it never scrolls with the page. */
.sidebar { width: 245px; background: var(--sidebar); color: var(--sidebar-text);
    display: flex; flex-direction: column; padding: 14px 12px;
    padding-top: calc(14px + var(--sa-top)); padding-left: calc(12px + var(--sa-left));
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; overflow-y: auto;
    border-right: 1px solid var(--sidebar-border, #2c2d38);
    transition: transform var(--t-base) var(--ease);
    /* Paces: scrollbar hidden by default, a thin styled thumb reveals on hover. */
    scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sidebar:hover { scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; transition: background var(--t-base) var(--ease); }
.sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); }
.sidebar-brand { display: flex; align-items: center; gap: 10px; color: #fff; padding: 8px 8px 18px; }
.nav { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; }
/* Paces uppercase section-title divider (non-clickable) */
.menu-title { padding: 16px 10px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--sidebar-muted); pointer-events: none; user-select: none; }
.nav-group { margin-top: 2px; }
/* collapsible parent — Paces submenu-parent look (sentence case, item-styled) */
.nav-section-btn { display: flex; align-items: center; gap: 11px; width: 100%;
    background: none; border: none; cursor: pointer; padding: 9px 10px; border-radius: var(--r-md);
    font-size: 14px; font-weight: 600; color: var(--sidebar-text); font-family: inherit;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nav-section-btn > span { flex: 1 1 auto; text-align: left; }
.nav-section-btn:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-hover-text); }
.nav-chev { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; transition: transform var(--t-base) var(--ease); }
.nav-chev.is-open { transform: rotate(180deg); }
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 2px; }
.nav-sub .nav-link { padding-left: 40px; font-size: 13px; font-weight: 500; }
.nav-link { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-md);
    color: var(--sidebar-text); text-decoration: none; font-weight: 600; position: relative;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nav-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-hover-text); }
.nav-link.is-active { background: var(--sidebar-2); color: var(--sidebar-active-text); }
.nav-link.is-active::before { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 3px; background: var(--primary); }
.nav-link.is-active .nav-icon { color: var(--primary); opacity: 1; }
.nav-icon { width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px; margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .08); }
a.sidebar-user { text-decoration: none; border-radius: 8px; transition: background var(--t-fast); }
a.sidebar-user:hover { background: rgba(255, 255, 255, .05); }
.sidebar-user-meta { display: flex; flex-direction: column; min-width: 0; }
.sidebar-user-name { color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { color: var(--sidebar-muted); font-size: 12px; }

.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; flex: 0 0 auto; }

.main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; margin-left: 248px; }
.topbar { height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 24px;
    padding-top: var(--sa-top); padding-right: calc(24px + var(--sa-right));
    background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
/* Keep scrollIntoView / anchor jumps clear of the sticky topbar, so a scrolled-to control (e.g. the
   Gutenberg toolbar's "Add block" on a narrow/mobile viewport) isn't hidden behind — and clickable. */
html { scroll-padding-top: calc(60px + var(--sa-top, 0px) + 10px); }
.topbar-title { font-size: 16px; font-weight: 650; margin: 0; flex: 1 1 auto; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.nav-toggle { display: none; }

.lang { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 8px; padding: 3px; }
.lang-link { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
    text-decoration: none; padding: 4px 8px; border-radius: 5px; font-weight: 600; }
.lang-link.is-active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

.user-menu { position: relative; }
.avatar-btn { background: none; border: none; padding: 0; cursor: pointer; }
.menu { position: absolute; right: 0; top: 48px; min-width: 210px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; }
.menu-head { padding: 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu-name { font-weight: 600; font-size: 13px; }
.menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border-radius: 7px;
    background: none; border: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; text-decoration: none; transition: background var(--t-fast); }
.menu-item:hover { background: var(--surface-2); }
.menu-icon { width: 17px; height: 17px; color: var(--muted); }

.content { padding: 28px 24px 40px; max-width: 1180px; width: 100%; }

/* scrim behind the mobile drawer — never intercepts clicks unless the drawer is open
   (it covers the viewport at opacity 0, so without pointer-events:none it would swallow
   every click, including on desktop where the drawer is never shown). */
.scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 35;
    opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease); }

/* ---------- mobile bottom navigation (phones) ---------- */
.bottomnav { display: none; }
.bottomnav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    flex: 1 1 0; min-width: 0; padding: 6px 4px; color: var(--muted); text-decoration: none;
    background: none; border: none; font: inherit; cursor: pointer; min-height: 48px; transition: color var(--t-fast); }
.bottomnav-item .icon, .bottomnav-item .nav-icon { width: 23px; height: 23px; }
.bottomnav-label { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottomnav-item.is-active { color: var(--primary); }

/* ---------- page heading ---------- */
.page-head { margin-bottom: 22px; }
.page-head.with-action { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: nowrap; }
.page-head.with-action > div:first-child { flex: 1 1 auto; min-width: 0; }
.page-head.with-action .btn { flex: none; align-self: flex-start; }
/* "New X" buttons (they link to …/new) get a leading + and collapse to an icon-only button on phones. */
.page-head.with-action .btn-primary[href$="/new"]::before { content: "+"; font-weight: 600; margin-right: 7px; }
@media (max-width: 640px) {
    .page-head.with-action .btn-primary[href$="/new"] { font-size: 0; width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 12px; position: relative; }
    /* Draw the "+" from two centered bars — pixel-perfect regardless of font glyph metrics
       (the text "+" glyph rendered off-centre up-and-left). */
    .page-head.with-action .btn-primary[href$="/new"]::before,
    .page-head.with-action .btn-primary[href$="/new"]::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 2px; margin: 0; }
    .page-head.with-action .btn-primary[href$="/new"]::before { width: 15px; height: 2.5px; transform: translate(-50%, -50%); }
    .page-head.with-action .btn-primary[href$="/new"]::after { width: 2.5px; height: 15px; transform: translate(-50%, -50%); }
}
.page-title { font-size: 22px; font-weight: 680; letter-spacing: -.02em; margin: 0; }
.page-sub { color: var(--muted); margin: 4px 0 0; }
.page-back { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.page-back:hover { color: var(--primary); }

/* utilities */
.narrow { max-width: 560px; }
.text-right { text-align: right; }
.search-bar { margin-bottom: 16px; }
.search-bar .input { max-width: 280px; }
.confirm-input { max-width: 280px; }
.mt-2 { margin-top: 12px; }

/* ---------- empty state ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
    padding: 48px 24px; color: var(--muted); }
.empty-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-full);
    background: var(--surface-2); color: var(--subtle); }
.empty-icon .icon { width: 28px; height: 28px; }
.empty-title { font-size: 16px; font-weight: 650; color: var(--text); margin: 4px 0 0; }
.empty-text { font-size: 13.5px; max-width: 360px; margin: 0; }
.empty .btn { margin-top: 6px; }

/* ---------- toasts (transient feedback; ARIA live) ---------- */
.toasts { position: fixed; z-index: 80; right: 16px; bottom: calc(16px + var(--sa-bottom));
    display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: 13.5px;
    animation: toast-in var(--t-slow) var(--ease-out); }
.toast.ok { border-left-color: var(--ok-text); }
.toast.err { border-left-color: var(--err-text); }
.toast-icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.toast.ok .toast-icon { color: var(--ok-text); }
.toast.err .toast-icon { color: var(--err-text); }
.toast-body { flex: 1 1 auto; min-width: 0; }
.toast-close { background: none; border: none; color: var(--subtle); font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px; margin: -2px -2px 0 4px; flex: 0 0 auto; }
.toast-close:hover { color: var(--text); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- KPI stat cards (Paces) ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; background: var(--surface);
    border: 0; border-radius: var(--r-lg); padding: 20px; box-shadow: var(--card-shadow); transition: box-shadow var(--t-base); }
.stat:hover { box-shadow: var(--shadow-md); }
.stat-body { display: flex; flex-direction: column; min-width: 0; }
.stat-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--subtle); }
.stat-value { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 12px 0 10px; color: var(--text); overflow-wrap: anywhere; }
.stat-foot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--subtle); flex-wrap: wrap; }
.stat-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.stat-delta svg { width: 15px; height: 15px; }
.stat-delta.up { color: var(--c-success); }
.stat-delta.down { color: var(--c-danger); }
.stat-hint, .stat-since { font-size: 12.5px; color: var(--subtle); }
.stat-spark { width: 100%; height: 34px; margin-top: 12px; }
.stat-spark svg { width: 100%; height: 100%; display: block; }
/* icon chip: 36px circle, hue @ 15% bg + solid hue icon */
.stat-chip { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-full); flex: 0 0 auto; }
.stat-chip .icon { width: 20px; height: 20px; }
.tone-blue,   .tone-primary   { background: rgba(35, 109, 201, .15);  color: var(--c-primary); }
.tone-violet, .tone-secondary { background: rgba(123, 112, 239, .15); color: var(--c-secondary); }
.tone-emerald,.tone-success   { background: rgba(2, 188, 156, .16);   color: #069e83; }
.tone-amber,  .tone-warning   { background: rgba(249, 191, 89, .2);   color: #c68a1f; }
.tone-info                    { background: rgba(91, 195, 225, .18);  color: #2f9dbf; }
.tone-danger                  { background: rgba(247, 87, 126, .15);  color: var(--c-danger); }
/* sparkline colour follows the card tone */
.spark.tone-blue, .spark.tone-primary { color: var(--c-primary); }
.spark.tone-success, .spark.tone-emerald { color: var(--c-success); }
.spark.tone-danger { color: var(--c-danger); }
.spark.tone-info { color: var(--c-info); }
.spark.tone-warning, .spark.tone-amber { color: var(--c-warning); }
.spark.tone-secondary, .spark.tone-violet { color: var(--c-secondary); }

/* ---------- customizable dashboard board (widget grid) ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; align-items: stretch; }
.dash-cell { min-width: 0; display: flex; }
.dash-cell > * { flex: 1 1 auto; min-width: 0; }
.dash-cell > .stat, .dash-cell > .card { height: 100%; }
.dash-actions { display: flex; align-items: center; gap: 8px; }
/* multiple dashboards: switcher tabs + manage bar */
.dash-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border-subtle, #eef2f7); }
.dash-tab { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; margin-bottom: -1px; border-radius: var(--r-md) var(--r-md) 0 0; font-size: 14px; font-weight: 600; color: var(--muted); border: 0; border-bottom: 2px solid transparent; text-decoration: none; cursor: pointer; background: none; }
.dash-tab:hover { color: var(--text); background: var(--surface-2, #f1f5f9); }
.dash-tab.is-active { color: var(--primary, #236dc9); border-bottom-color: var(--primary, #236dc9); }
.dash-tab-star { color: #f5b301; }
.dash-tab-new { color: var(--muted); border: 1px dashed var(--border); border-radius: var(--r-md); margin: 0 0 4px 6px; }
.dash-tab-new:hover { color: var(--text); border-color: var(--border-strong, #cbd5e1); background: none; }
.dash-manage { display: none; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; padding: 10px 12px; background: var(--surface-2, #f1f5f9); border: 1px solid var(--border-subtle, #eef2f7); border-radius: var(--r-md); }
body:has(.dash-edit-toggle:checked) .dash-manage { display: flex; }
.dash-rename { display: flex; gap: 6px; align-items: center; }
.dash-rename .input { height: 34px; min-width: 200px; }
.dash-delete { color: var(--err-text, #b91c1c); }
.dash-edit-on { display: none; }
body:has(.dash-edit-toggle:checked) .dash-edit-off { display: none; }
body:has(.dash-edit-toggle:checked) .dash-edit-on { display: inline; }
/* per-widget remove (revealed in edit mode) */
.dash-cell { position: relative; }
.dash-remove { position: absolute; top: -8px; right: -8px; z-index: 3; margin: 0; display: none; }
.dash-remove button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface, #fff); color: var(--err-text, #b91c1c); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.dash-remove button:hover { background: var(--err-soft, #fee2e2); }
.dash-remove button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
body:has(.dash-edit-toggle:checked) .dash-remove { display: block; }
body:has(.dash-edit-toggle:checked) .dash-cell > *:not(.dash-remove):not(.dash-move) { outline: 1px dashed var(--border-strong, #cbd5e1); outline-offset: 2px; border-radius: var(--r-lg); }
/* move controls (keyboard reorder) + drag state */
.dash-move { position: absolute; top: -8px; left: -8px; z-index: 3; display: none; gap: 3px; }
body:has(.dash-edit-toggle:checked) .dash-move { display: inline-flex; }
.dash-move button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.dash-move button:hover { background: var(--surface-2, #f1f5f9); }
.dash-move button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.dash-move .icon, .dash-remove .icon { width: 14px; height: 14px; }
.dash-move [data-resize] { font-size: 16px; font-weight: 700; line-height: 1; }
/* drag-to-resize handle (right edge, edit mode) */
.dash-resize-handle { position: absolute; top: 28%; bottom: 28%; right: -4px; width: 8px; z-index: 3; display: none; cursor: ew-resize; border-radius: 5px; background: var(--primary, #236dc9); opacity: .55; touch-action: none; }
body:has(.dash-edit-toggle:checked) .dash-resize-handle { display: block; }
.dash-resize-handle:hover { opacity: 1; }
/* render-based "list" widget (e.g. commerce recent orders) */
.list-card { display: flex; flex-direction: column; height: 100%; }
.list-card .card-body { padding-top: .25rem; }
.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mini-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--border, #e6e8ec); }
.mini-row:first-child { border-top: 0; }
.mini-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mini-sub { font-size: 12px; }
.mini-side { display: flex; align-items: center; gap: .6rem; flex: none; }
.mini-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.dash-cell.is-dragging { opacity: .92; box-shadow: 0 10px 28px rgba(0,0,0,.20); }
.dash-cell.is-dragging > *:not(.dash-move):not(.dash-remove) { pointer-events: none; }
body.dash-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
body:has(.dash-edit-toggle:checked) .dash-cell { cursor: grab; touch-action: none; }

/* add-widget library */
.widget-library { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wl-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle, #eef2f7); }
.wl-item:last-child { border-bottom: 0; }
.wl-title { font-weight: 600; color: var(--text); }
.wl-type { text-transform: capitalize; }
.wl-item form, .wl-added { margin-left: auto; }
.wl-added { display: inline-flex; align-items: center; gap: 4px; color: var(--success, #15803d); font-size: 13px; font-weight: 600; }

.dash-span-1 { grid-column: span 1; }
.dash-span-2 { grid-column: span 2; }
.dash-span-3 { grid-column: span 3; }
.dash-span-4 { grid-column: span 4; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-span-3, .dash-span-4 { grid-column: span 2; } }
@media (max-width: 640px) { .dash-grid { grid-template-columns: 1fr; } .dash-cell, .dash-span-1, .dash-span-2, .dash-span-3, .dash-span-4 { grid-column: span 1; } }

/* ---------- dashboard chart cards ---------- */
.chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 22px; align-items: start; }
.chart-card { overflow: hidden; }
.chart-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.chart-sub { margin: 2px 0 0; font-size: 12.5px; }
.chart-value { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1; }
.chart-area { width: 100%; height: 180px; }
.chart-area svg { width: 100%; height: 100%; display: block; }
.area-chart .chart-gridline { stroke: var(--border); stroke-width: 1; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--subtle); }
.chart-donut-wrap { display: flex; align-items: center; gap: 18px; }
.chart-donut { width: 128px; height: 128px; flex: 0 0 auto; }
.chart-donut svg { width: 100%; height: 100%; display: block; }
.donut-track { color: var(--surface-2); }
.donut-center { font-size: 9px; font-weight: 700; fill: var(--text); }
.chart-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.chart-legend li { display: flex; align-items: center; gap: 8px; }
.legend-dot { width: 10px; height: 10px; border-radius: var(--r-full); flex: 0 0 auto; background: currentColor; }
/* chart tone → currentColor (area line/fill, donut segments, legend dots) — no background */
.chart-tone-primary, .chart-tone-blue { color: var(--c-primary); }
.chart-tone-success, .chart-tone-emerald { color: #069e83; }
.chart-tone-warning, .chart-tone-amber { color: #c68a1f; }
.chart-tone-danger { color: var(--c-danger); }
.chart-tone-info { color: var(--c-info); }
.chart-tone-secondary, .chart-tone-violet { color: var(--c-secondary); }
@media (max-width: 820px) { .chart-grid { grid-template-columns: 1fr; } }

/* ---------- cards ---------- */
.cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.card { background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: var(--card-shadow); }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.card-title { margin: 0; font-size: 15px; font-weight: 650; }
.card-body { padding: 20px; }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; align-items: center; gap: 10px; color: var(--text); }
.check-icon { width: 18px; height: 18px; color: #059669; flex: 0 0 auto; }

.kv { margin: 0; }
.kv > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.kv > div:first-child { border-top: none; }
.kv dt { color: var(--muted); margin: 0; }
.kv dd { margin: 0; font-weight: 500; }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.badge-ok { background: var(--ok-bg); color: var(--ok-text); }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-weight: 600; font-size: 13px; }
.label .req { color: var(--err-text); margin-left: 2px; }
.help { font-size: 12px; color: var(--subtle); }
.input { font: var(--font); height: 42px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast); width: 100%; }
.input::placeholder { color: var(--subtle); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring-soft); }
.input:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.input.has-error { border-color: var(--err-border); }
.input.has-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
textarea.textarea { font: var(--font); height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; }
/* A textarea using the .input class must not inherit the fixed input height. */
textarea.input { height: auto; min-height: 104px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
textarea.input[rows="2"] { min-height: 60px; }

/* filter pills (chips on top of a list) */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 500;
    background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast); min-height: 36px; }
.pill:hover { border-color: var(--border-strong); }
.pill.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pill-count { font-size: 11px; opacity: .7; font-weight: 600; }

/* filter bar (faceted filters with explicit Apply) */
.filter-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.filter-bar .field { min-width: 160px; }

/* segmented control */
.segmented { display: inline-flex; background: var(--surface-2); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.segmented-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 13px;
    font-weight: 600; color: var(--muted); text-decoration: none; border: none; background: none; cursor: pointer; font-family: inherit; }
.segmented-item.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* modules admin */
.module-head { display: flex; align-items: center; gap: 14px; }
.module-icon { display: inline-flex; width: 38px; height: 38px; border-radius: 9px; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--muted); flex: none; }
.module-meta { flex: 1 1 auto; min-width: 0; }
.module-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.module-sub { font-size: 13px; margin-top: 2px; }
.module-actions { flex: none; }
.module-danger { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; }
.module-danger .input { max-width: 220px; }

.select-wrap { display: inline-flex; position: relative; }
.select { appearance: none; -webkit-appearance: none; font: var(--font); height: 42px; padding: 0 38px 0 12px;
    border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); cursor: pointer; min-width: 220px; }
.select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring-soft); }
.select-wrap::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px;
    border-right: 2px solid var(--subtle); border-bottom: 2px solid var(--subtle); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select-block { display: block; }
.select-block .select { width: 100%; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mail-test { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.mail-test .input { max-width: 300px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* translation manager */
.tr-toolbar { margin-bottom: 14px; }
.coverage-meta { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.coverage-track { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.coverage-fill { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .3s var(--ease); }
.cov-0 { width: 0; } .cov-10 { width: 10%; } .cov-20 { width: 20%; } .cov-30 { width: 30%; }
.cov-40 { width: 40%; } .cov-50 { width: 50%; } .cov-60 { width: 60%; } .cov-70 { width: 70%; }
.cov-80 { width: 80%; } .cov-90 { width: 90%; } .cov-100 { width: 100%; }
.tr-table td { vertical-align: middle; }
.tr-key { white-space: nowrap; } .tr-key code { font-size: 12px; }
.tr-source { max-width: 280px; }
.tr-save { position: sticky; bottom: 0; padding: 14px 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: var(--font); font-weight: 600;
    height: 42px; padding: 0 18px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.notice { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: var(--r-md); margin-bottom: 16px; font-size: 13px; border: 1px solid transparent; }
.notice.ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.notice.err { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); }

/* error summary (top of form on submit) */
.error-summary { border: 1px solid var(--err-border); background: var(--err-bg); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px; }
.error-summary-title { font-weight: 650; color: var(--err-text); font-size: 14px; margin: 0 0 6px; }
.error-summary ul { margin: 0; padding-left: 18px; color: var(--err-text); font-size: 13px; }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.table td { padding: 12px; border-bottom: 1px solid var(--border); }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: none; }
.cell-link { color: var(--text); font-weight: 600; text-decoration: none; }
.cell-link:hover { color: var(--primary); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.badge-violet { background: #f5f3ff; color: #7c3aed; }
.badge-muted { background: var(--surface-2); color: var(--muted); }
.badge-blue { background: #eff6ff; color: #2563eb; }
.badge-danger { background: #fef2f2; color: #dc2626; }
.badge-warn { background: var(--warn-bg); color: var(--warn-text); }

/*
 * Responsive data-list: a .table.data-list collapses to stacked cards on phones.
 * Markup contract: each <td> carries data-label="Column name". The label shows
 * on mobile (NN/g: don't shrink a wide table; restructure it). Desktop unchanged.
 */
@media (max-width: 768px) {
    .table.data-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .table.data-list, .table.data-list tbody, .table.data-list tr, .table.data-list td { display: block; width: 100%; }
    .table.data-list tr { border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 12px; padding: 4px 14px; background: var(--surface); }
    .table.data-list tr:hover { background: var(--surface); }
    .table.data-list td { border-bottom: 1px solid var(--border); padding: 9px 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: right; }
    .table.data-list td:last-child { border-bottom: none; }
    .table.data-list td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; text-align: left; flex: 0 0 auto; }
    .table.data-list td:empty { display: none; }
    .table.data-list .cell-user, .table.data-list .cell-actions { justify-content: flex-end; }
}

/*
 * Roster — a native phone "contacts list": avatar + name + one muted subtitle per row,
 * edge-to-edge on mobile with hairline dividers, sticky A–Z section headers, a press
 * state, and a trailing chevron. Replaces the responsive-table look for people-like
 * lists (horses, people). Comfortable on desktop too (inset inside a .card).
 */
.roster { list-style: none; margin: 0; padding: 0; }
.roster-row {
    display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px;
    text-decoration: none; color: inherit; border-bottom: 1px solid var(--border);
    -webkit-tap-highlight-color: transparent; transition: background var(--t-fast, 120ms) ease;
}
.roster li:last-child .roster-row { border-bottom: 0; }
.roster-row:active { background: var(--surface-2); }
@media (hover: hover) { .roster-row:hover { background: var(--surface-hover); } }
.roster-av { flex: none; width: 44px; height: 44px; font-size: 16px; }
.roster-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.roster-name { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-meta { flex: none; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.roster-chev { flex: none; width: 18px; height: 18px; color: var(--slate-300); }
.roster-search { position: relative; margin: 0 0 14px; }
.roster-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.roster-search input {
    width: 100%; height: 44px; padding: 0 14px 0 40px; border-radius: var(--r-full);
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 16px;
    appearance: none; -webkit-appearance: none; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.roster-search input::placeholder { color: var(--subtle); }
.roster-search input:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--ring-soft); }
.roster-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.roster-section {
    position: sticky; top: 0; z-index: 1;
    padding: 6px 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border);
}
/* Edge-to-edge on phones: drop the card chrome so the list runs wall-to-wall like iOS. */
@media (max-width: 768px) {
    .card.roster-card { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
    .card.roster-card > .card-body { padding: 0; }
}

/*
 * Commerce line/data tables: a normal table on desktop; on phones each row becomes a
 * COMPACT card — a bold primary line (the first cell) + one inline muted meta line
 * (the rest) — instead of the verbose one-label-per-row stack. Feels like a native list.
 * Scoped to commerce views; the core .data-list is deliberately left untouched.
 */
@media (max-width: 768px) {
    .table.commerce-lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .table.commerce-lines, .table.commerce-lines tbody, .table.commerce-lines tr, .table.commerce-lines td { display: block; width: 100%; }
    .table.commerce-lines tr { border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 10px; padding: 12px 14px; background: var(--surface); }
    .table.commerce-lines tr:hover { background: var(--surface); }
    .table.commerce-lines td { border: none; padding: 0; text-align: left; }
    .table.commerce-lines td:first-child { font-weight: 600; font-size: 15px; margin-bottom: 5px; }
    .table.commerce-lines td:not(:first-child) { display: inline; font-size: 13px; color: var(--muted); }
    .table.commerce-lines td:not(:first-child)::before { content: attr(data-label) " "; font-weight: 500; }
    .table.commerce-lines td:not(:first-child, :last-child)::after { content: " · "; color: var(--subtle); }
    .table.commerce-lines td:last-child { color: var(--text); font-weight: 600; }
    .table.commerce-lines td:empty { display: none; }
}

/* Draft purchase-order line editor: a compact native list of added lines + an inline
   add-line row (variant + qty + cost + Add). Commerce-scoped. */
.po-lines { list-style: none; margin: 0 0 4px; padding: 0; }
.po-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.po-line:first-child { border-top: none; }
.po-line-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.po-line-title { font-weight: 600; }
.po-line-meta { color: var(--muted); font-size: 13px; }
.po-line-amount { font-weight: 600; white-space: nowrap; }
.po-line-remove { flex: 0 0 auto; margin: 0; }
.po-add-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.po-add-line .po-add-variant { flex: 1 1 200px; }
.po-add-line .input-narrow { width: 92px; }
.ship-address { font-style: normal; line-height: 1.55; color: var(--text); }
/* Custom-fields form section (any module form) + inline field-label icon. */
.custom-fields { display: grid; gap: 12px; }
.icon-sm { width: 15px; height: 15px; vertical-align: -2px; }
.cf-icon { font-size: 15px; line-height: 1; }
.product-thumb-lg { width: 56px; height: 56px; border-radius: var(--r-md); object-fit: cover; border: 1px solid var(--border); flex: 0 0 auto; color: var(--subtle); }
.stat-link { text-decoration: none; transition: background var(--t-fast); }
.stat-link:hover { background: var(--surface-2); }
.preset-list { display: grid; gap: 8px; }
.preset-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); margin: 0; }

/* api docs */
.codeblock { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 12px 14px; font-size: 12.5px; overflow-x: auto; margin: 10px 0; white-space: pre; color: var(--text); }
.endpoint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.endpoint-path { font-size: 13px; font-weight: 600; }
.endpoint-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.field-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.field-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; }

.pagination { display: flex; gap: 4px; margin-top: 16px; flex-wrap: wrap; }
.page-link { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-size: 13px; transition: background var(--t-fast); }
.page-link:hover { background: var(--surface-2); }
.page-link.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- checkboxes / overrides ---------- */
.checks { display: flex; flex-direction: column; gap: 9px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.check input { width: 16px; height: 16px; accent-color: var(--primary); }
/* The auth pages have their own checkbox and were never given the token, so "keep me signed in" was
   drawn in the browser's default blue on an otherwise fully branded page. */
.auth-remember input { accent-color: var(--primary); }

/* A picker of checkbox rows (e.g. products in a collection): no list bullets, laid out in
   responsive columns, scrollable when the list is long. */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; max-height: 340px; overflow-y: auto; }
.check-list li { margin: 0; }
/* Checkbox grid for pickers (e.g. a vertical's module set) — responsive columns. */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 16px; }
.check-grid .check { align-items: flex-start; }

.ov-group { margin-bottom: 16px; }
.ov-group-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.ov-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); }
.ov-name { font-size: 13px; }
.ov-pills { display: inline-flex; background: var(--surface-2); border-radius: 8px; padding: 3px; gap: 2px; flex: 0 0 auto; }
.ov-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ov-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
/* reactive without JS via :has() — also covers the server-rendered checked state */
.ov-pill.ov-none:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.ov-pill.ov-grant:has(input:checked) { background: #16a34a; color: #fff; }
.ov-pill.ov-deny:has(input:checked) { background: #dc2626; color: #fff; }

.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.danger-zone { border-color: #fecaca; margin-top: 16px; }
.danger-zone .card-head { border-color: #fecaca; }

/* ---------- auth (login) ---------- */
.auth { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh;
    background: radial-gradient(1200px 500px at 50% -10%, #e0e7ff 0%, var(--bg) 55%);
    padding: calc(24px + var(--sa-top)) calc(24px + var(--sa-right)) calc(24px + var(--sa-bottom)) calc(24px + var(--sa-left)); }
.auth-wrap { width: 100%; max-width: 400px; }
.auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 18px; }

/* ── Public stall care-card (ranch-facilities QR scan target) ─────────────── */
.auth-wrap:has(.care-page) { max-width: 440px; }
body.auth:has(.care-page) { align-items: start; }
body.auth:has(.care-page) .auth-brand { display: none; } /* the card carries its own ranch identity */
/* Facilities — grouped card list with a type-iconed tile (ranch-facilities). */
.fac-group { margin-bottom: 18px; }
.fac-group-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.fac-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.fac-av svg { width: 22px; height: 22px; }
.fac-av--barn { background: #dbeafe; color: #1e40af; }
.fac-av--arena { background: #ede9fe; color: #5b21b6; }
.fac-av--outdoor { background: #dcfce7; color: #15803d; }
.fac-av--util { background: var(--surface-2); color: var(--muted); }
.fac-indoor { flex: none; align-self: center; }
@media (prefers-color-scheme: dark) {
    .fac-av--barn { background: rgba(37, 99, 235, .18); color: #93c5fd; }
    .fac-av--arena { background: rgba(124, 58, 237, .18); color: #c4b5fd; }
    .fac-av--outdoor { background: rgba(21, 128, 61, .2); color: #86efac; }
}

/* Ranch scheduling — week calendar + agenda (ranch-scheduling). */
.cal-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.cal-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-range { font-weight: 600; color: var(--text); margin-left: 4px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); min-height: 120px; display: flex; flex-direction: column; overflow: hidden; }
.cal-day.is-today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.cal-day-head { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.cal-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.cal-dnum { font-size: 15px; font-weight: 700; color: var(--text); }
.cal-day.is-today .cal-dnum { color: var(--primary); }
.cal-day-add { margin-left: auto; color: var(--muted); text-decoration: none; font-size: 18px; line-height: 1; padding: 0 2px; }
.cal-day-add:hover { color: var(--primary); }
.cal-day-body { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.cal-event { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--slate-400, #94a3b8); border-radius: 7px; padding: 6px 8px; color: var(--text); }
.cal-event:hover { background: var(--surface-2); }
.cal-event-time { font-size: 11px; font-weight: 700; color: var(--muted); margin-right: 5px; }
.cal-event-title { font-size: 13px; font-weight: 600; }
.cal-event-sub { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.cal-event--lesson { border-left-color: #2563eb; }
.cal-event--vet { border-left-color: #7c3aed; }
.cal-event--farrier { border-left-color: #d97706; }
.cal-event--turnout { border-left-color: #0d9488; }
.cal-event--other { border-left-color: #64748b; }
.cal-group { margin-bottom: 18px; }
.cal-group-date { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.cal-agenda { display: flex; flex-direction: column; gap: 8px; }
.cal-agenda .cal-event { padding: 12px 14px; }
.cal-agenda .cal-event-title { font-size: 15px; }
.cal-badge--lesson { background: #dbeafe; color: #1e40af; }
.cal-badge--vet { background: #ede9fe; color: #5b21b6; }
.cal-badge--farrier { background: #fef3c7; color: #92400e; }
.cal-badge--turnout { background: #ccfbf1; color: #115e59; }
.cal-badge--other { background: var(--surface-2); color: var(--muted); }
@media (max-width: 768px) {
    .cal-week { grid-template-columns: 1fr; }
    .cal-day { min-height: 0; }
    .cal-day:not(.is-today) .cal-day-body:empty { display: none; }
}

/* Horse feeding schedule — the time (AM/Noon/PM/Night) as an accent chip; each feeding on its own line. */
.feed-when { display: inline-block; flex: none; min-width: 34px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 5px; padding: 2px 6px; }
.roster-sub-dim { color: var(--subtle, #94a3b8); font-style: italic; }
/* roster subtitle: stack feedings, one per line (overrides the single-line ellipsis) */
.roster-sub.feed-sub { white-space: normal; overflow: visible; display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.feed-sub .feed-line { display: flex; align-items: baseline; gap: 6px; line-height: 1.35; }
.feed-sub .feed-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* public care-card feed rows */
.care-feed-line { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.care-feed-line:last-child { margin-bottom: 0; }
/* horse form — repeatable feeding rows */
.feed-editor { display: flex; flex-direction: column; gap: 8px; }
.feed-erow { display: flex; gap: 8px; align-items: center; }
.feed-erow .feed-when-in { flex: 0 0 96px; }
.feed-erow .feed-what-in { flex: 1 1 auto; min-width: 0; }
.feed-erow-del { flex: none; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.feed-erow-del:hover { color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }
.feed-add { margin-top: 10px; }

.care-page { width: 100%; }
.care-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 14px 44px -14px rgba(48, 58, 70, .30), 0 2px 8px rgba(130, 143, 163, .12);
    overflow: hidden;
}
.care-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 20px;
    background: linear-gradient(180deg, #fbfcfe, #f2f5f9);
    border-bottom: 1px solid var(--border);
}
.care-stall { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
.care-stall b { color: var(--text); font-size: 15px; letter-spacing: 0; margin-left: 3px; }
.care-ranch { font-size: 13px; font-weight: 700; color: var(--primary); text-align: right; }
.care-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 22px 22px; }
.care-photo {
    width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--border), 0 10px 24px -10px rgba(48, 58, 70, .45);
}
.care-photo--mono { font-size: 42px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.care-name { font-size: 30px; font-weight: 800; letter-spacing: -.025em; color: var(--text); margin: 15px 0 12px; line-height: 1.05; }
.care-status {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 14px 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
.care-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.care-status.is-occupied { background: var(--ok-bg); color: var(--ok-text); }
.care-status.is-reserved { background: var(--warn-bg); color: var(--warn-text); }
.care-status.is-vacated { background: var(--surface-2); color: var(--muted); }
.care-info { padding: 4px 10px 10px; margin: 0; }
.care-row { display: flex; gap: 14px; align-items: flex-start; padding: 15px 10px; border-top: 1px solid var(--border); }
.care-info > .care-row:first-child { border-top: 0; }
.care-ico {
    flex: none; width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center; background: var(--surface-2); color: var(--slate-500);
}
.care-ico svg { width: 21px; height: 21px; }
.care-ico--info { background: var(--info-bg); color: var(--info-text); }
.care-ico--warn { background: var(--warn-bg); color: var(--warn-text); }
.care-row--warn { background: linear-gradient(90deg, rgba(249, 191, 89, .10), transparent 60%); border-radius: 12px; }
.care-field { min-width: 0; padding-top: 1px; }
.care-field dt { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--subtle); margin-bottom: 3px; }
.care-field dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--text); font-weight: 500; }
.care-foot {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px; border-top: 1px solid var(--border); background: var(--surface-2);
    font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
}
.care-foot-sep { opacity: .5; }
.care-card--msg, .care-empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center; padding: 46px 26px;
}
.care-glyph { width: 54px; height: 54px; margin-bottom: 14px; color: var(--slate-300); }
.care-glyph svg { width: 100%; height: 100%; }
.care-msg-title { font-size: 16px; font-weight: 600; color: var(--muted); margin: 0; }

/* ── Owner portal (ranch-people P-2) — reuses the care-card look in the auth shell ──────────── */
.auth-wrap:has(.portal), .auth-wrap:has(.care-page) { max-width: 460px; }
body.auth:has(.portal) { align-items: start; }
.portal { width: 100%; }
.portal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.portal-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin: 0; }
.portal-greet { font-size: 13px; color: var(--muted); margin: 3px 0 0; }
.portal-horses { display: flex; flex-direction: column; gap: 10px; }
.portal-horse {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 2px 8px rgba(130, 143, 163, .10); text-decoration: none; transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.portal-horse:hover { box-shadow: 0 8px 22px -8px rgba(48, 58, 70, .28); transform: translateY(-1px); }
.portal-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; }
.portal-avatar--mono { font-size: 20px; font-weight: 700; color: #fff; }
.portal-horse-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.portal-horse-name { font-size: 17px; font-weight: 700; color: var(--text); }
.portal-horse-loc { font-size: 13px; color: var(--muted); }
.portal-back { display: inline-block; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--primary); text-decoration: none; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 28px; }
.auth-title { font-size: 20px; font-weight: 680; margin: 0; letter-spacing: -.02em; }
.auth-sub { color: var(--muted); margin: 6px 0 20px; }
.auth-alt { margin: 16px 0 0; text-align: center; font-size: 13px; }
.auth-demo { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.auth-demo-title { font-size: 12px; color: var(--muted); font-weight: 600; }
.auth-demo ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.auth-demo li { font-size: 12px; color: var(--subtle); }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
    .cols { grid-template-columns: 1fr; }
}
/* Phone/tablet: hide the persistent sidebar; show top-bar toggle + bottom nav.
   The sidebar becomes an off-canvas drawer opened by the top-bar button or "More". */
@media (max-width: 768px) {
    /* The off-canvas drawer parks at translateX(-100%); clamp the root scrollers so its
     * off-screen box can't add horizontal scroll (sticky topbar unaffected — it sticks to
     * the body scroller vertically). */
    html, body.app { overflow-x: hidden; }
    .nav-toggle { display: inline-grid; }
    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(86vw, 320px); transform: translateX(-100%); box-shadow: none; }
    .shell.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .shell.nav-open .scrim { opacity: 1; pointer-events: auto; }
    .main { margin-left: 0; }
    .content { padding: 18px 16px calc(18px + var(--bottomnav-h) + var(--sa-bottom)); }
    .bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        background: var(--surface); border-top: 1px solid var(--border); padding-bottom: var(--sa-bottom);
        box-shadow: 0 -1px 3px rgba(16, 24, 40, .05); }
    .topbar { padding-left: 16px; padding-right: calc(16px + var(--sa-right)); }
    /* keep toasts above the bottom tab bar */
    .toasts { left: 16px; right: 16px; max-width: none; bottom: calc(12px + var(--bottomnav-h) + var(--sa-bottom)); }
    /* Let a page heading's action group drop to its own row when it can't fit beside the
       title (e.g. the calendar's ← / This week / → / + cluster overran the "Schedule" title). */
    .page-head.with-action { flex-wrap: wrap; }
    .page-actions { flex-wrap: wrap; }
    /* The line-item editor is a fixed-width table; on phones let the card that holds it
       scroll horizontally instead of clipping QTY/PRICE/TAX/AMOUNT off the card edge. */
    .card-body:has(> .line-items) { overflow-x: auto; }
    .line-items { min-width: 560px; }
    /* Native-app typography + touch targets on phones. Base/nav were 14px with ~39px
       nav rows — below iOS 17pt / Material 16sp and the 44pt/48dp tap-target minimums.
       Bump to a 16px floor (also stops iOS zoom-on-focus for inputs) and 48px rows. */
    body { font-size: 16px; }
    .nav-link { font-size: 16px; min-height: 48px; }
    .nav-sub .nav-link { font-size: 15px; min-height: 44px; }
    .menu-title { font-size: 11px; }
    .page-title { font-size: 24px; }
    .btn { min-height: 44px; }
    .input, input, select, textarea { font-size: 16px; }
    .roster-row, .cell-link, .data-list td a { min-height: 44px; }
}
html[dir="rtl"] .sidebar { transform: none; }
@media (max-width: 768px) { html[dir="rtl"] .sidebar { transform: translateX(100%); }
    html[dir="rtl"] .shell.nav-open .sidebar { transform: translateX(0); } }

/* ── CRM activities timeline ───────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.timeline-time { margin-left: auto; font-size: 12px; }
.timeline-meta { font-size: 13px; margin: 2px 0 0; }
.timeline-body { margin: 6px 0 0; white-space: pre-wrap; }
.timeline-actions { margin-top: 6px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 12.5px; }
.cell-actions { text-align: right; white-space: nowrap; }

/* ── Customer-360 profile ──────────────────────────────────────────────── */
.profile-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-side { display: flex; flex-direction: column; gap: 16px; }
.profile-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.detail-list { display: grid; grid-template-columns: 1fr; gap: 2px 0; margin: 0 0 14px; }
.detail-list dt { font-size: 12px; color: var(--muted); margin-top: 8px; }
.detail-list dd { margin: 0; font-size: 14px; }
/* key/value variant: label + value on the same row (label left, value right) */
.detail-list--kv { grid-template-columns: minmax(5rem, 42%) 1fr; gap: 10px 10px; align-items: baseline; }
.detail-list--kv dt { margin-top: 0; }
.detail-list--kv dd { font-size: 13px; overflow-wrap: anywhere; }
.stat-strong { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 2px; letter-spacing: -.01em; }
.profile-badges { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; font-size: 13px; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.plain-list li:last-child { border-bottom: 0; }

/* Avatars — monogram circles (reuses .avatar; adds size + colour tones) */
.avatar-lg { width: 48px; height: 48px; font-size: 17px; }
.avatar-sm { width: 26px; height: 26px; font-size: 11px; }
.avatar--blue { background: var(--primary); }
.avatar--emerald { background: #047857; }
.avatar--violet { background: #7c3aed; }
.avatar--amber { background: #b45309; }
.avatar--rose { background: #e11d48; }
.avatar--slate { background: #475569; }
.avatar--cyan { background: #0e7490; }
.avatar--fuchsia { background: #c026d3; }
.profile-head { display: flex; align-items: center; gap: 14px; }
.cell-user { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }

/* ── Custom fields ─────────────────────────────────────────────────────── */
.field-error { color: var(--err-text); font-size: 12px; margin-top: 4px; }

/* ── Tenants admin (utilities) ─────────────────────────────────────────── */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form { display: inline-block; margin: 0; }
.confirm-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.confirm-inline-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.input-narrow { max-width: 140px; }
.ta-right { text-align: right; }
.dns-table code { font-size: 12.5px; }
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } }

/* ── Tenant branding ───────────────────────────────────────────────────── */
.brand-logo { height: 30px; width: auto; max-width: 170px; object-fit: contain; display: block; }

/* ── File inputs (logo/document upload) ────────────────────────────────────── */
.input[type="file"] { padding: .4rem .55rem; color: var(--muted); cursor: pointer; line-height: 1.6; height: auto; }
.input[type="file"]::file-selector-button {
    margin-right: .75rem; padding: .4rem .85rem; border: 1px solid var(--border-strong);
    border-radius: var(--r-sm); background: var(--surface-2); color: var(--text);
    font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
}
.input[type="file"]::file-selector-button:hover { background: var(--border); border-color: var(--subtle); }

/* ── Documents preview (CSP-safe: classes, not inline styles) ───────────────── */
.doc-thumb { height: 28px; width: 28px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: .5rem; }
.doc-preview-img { max-width: 100%; max-height: 540px; border-radius: 8px; }
.doc-preview-frame { width: 100%; height: 600px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }

/* ── Commerce product media (CSP-safe: classes, not inline styles) ──────────── */
.media-grid { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.media-thumb { width: 120px; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.media-thumb img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.media-upload { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cell-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }
.cell-thumb.is-empty { display: inline-flex; align-items: center; justify-content: center; background: var(--border); color: var(--subtle); }
.cell-thumb-icon { width: 18px; height: 18px; }

/* ── Paces ecommerce product table (thumb + name/vendor, sku, stock, price, actions) ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.table-wrap { overflow-x: auto; }
.ecom-table th.num, .ecom-table td.num { text-align: right; }
.ecom-table td.money { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.ecom-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.cell-product { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; max-width: 100%; }
.cell-thumb-lg { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border); flex: 0 0 auto; }
.cell-thumb-lg.is-empty { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--subtle); }
.cell-product-meta { display: flex; flex-direction: column; min-width: 0; }
.cell-product-meta .cell-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-sub { font-size: 12.5px; color: var(--subtle); }
.stock { font-variant-numeric: tabular-nums; font-weight: 600; }
.stock-low { color: var(--warn-text); }
.stock-out { color: var(--err-text); font-weight: 600; font-size: 12.5px; }
.col-actions { text-align: right; width: 1%; white-space: nowrap; }
.row-actions { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }
.row-confirm { display: inline-flex; align-items: center; gap: 2px; }
.row-confirm .inline-form { display: inline-flex; margin: 0; }
.icon-action { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); color: var(--subtle); background: none; border: 0; cursor: pointer; text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.icon-action:hover { background: var(--surface-2); color: var(--primary); }
.icon-action--danger:hover { background: var(--err-bg); color: var(--err-text); }
.icon-action .icon { width: 17px; height: 17px; }
@media (max-width: 768px) {
    /* keep the product cell left-aligned when the row collapses to a card */
    .table.data-list .cell-product { justify-content: flex-start; }
}

/* ── Professional product form: two-column + drag-drop uploader ────────────── */
.product-form .form-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.form-main, .form-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.form-side { position: sticky; top: 78px; }
.product-form .field { margin-bottom: 14px; }
.product-form .field:last-child { margin-bottom: 0; }
.input-affix { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.input-affix:focus-within { outline: 2px solid var(--ring); outline-offset: 0; border-color: var(--primary); }
.input-affix .affix { display: inline-grid; place-items: center; padding: 0 10px; background: var(--surface-2); color: var(--subtle); font-weight: 600; }
.input-affix .input { border: 0; border-radius: 0; }
.input-affix .input:focus-visible { outline: none; }
.check-row { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); cursor: pointer; }
.check-row input { width: 16px; height: 16px; flex: 0 0 auto; }

.card-head--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head-link { font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; }
.card-head-link:hover { text-decoration: underline; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* custom-field set groups (admin) */
.cf-set { margin-bottom: 20px; }
.cf-set:last-child { margin-bottom: 0; }
.cf-set-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.cf-set-title { font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.cf-set-title code { text-transform: none; font-weight: 400; }
.cf-set-empty { padding: 4px 0; }
.check-field { justify-content: flex-end; }

/* Lightweight rich-text editor */
.rte { border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.rte:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring-soft); }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.rte-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.rte-btn:hover { background: var(--surface); color: var(--primary); }
.rte-btn b, .rte-btn i, .rte-btn u { font-size: 14px; }
.rte-sep { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--border); }
.rte-editor { min-height: 140px; padding: 12px 14px; font: var(--font); color: var(--text); line-height: 1.6; outline: none; overflow-wrap: anywhere; }
.rte-editor:empty::before { content: attr(data-placeholder); color: var(--subtle); pointer-events: none; }
.rte-editor h2 { font-size: 18px; font-weight: 700; margin: 12px 0 6px; }
.rte-editor h3 { font-size: 15px; font-weight: 700; margin: 10px 0 4px; }
.rte-editor p { margin: 0 0 8px; }
.rte-editor ul, .rte-editor ol { margin: 0 0 8px; padding-left: 22px; }
.rte-editor a { color: var(--primary); text-decoration: underline; }

/* Drag & drop dropzone */
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2);
    padding: 26px 18px; text-align: center; cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.dropzone:hover { border-color: var(--primary); background: var(--primary-soft); }
.dropzone:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.dropzone.is-dragging { border-color: var(--primary); background: var(--primary-soft); }
.dropzone-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-full); background: rgba(35, 109, 201, .12); color: var(--primary); margin-bottom: 8px; }
.dropzone-icon .icon { width: 22px; height: 22px; }
.dropzone-title { font-weight: 600; margin: 0 0 2px; color: var(--text); }
.dropzone-hint { font-size: 13px; color: var(--subtle); margin: 0; }
.dropzone-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.dz-thumb { margin: 0; }
.dz-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border); display: block; background: var(--surface); }
.dz-thumb figcaption { font-size: 11px; color: var(--subtle); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropzone-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.dropzone-count { font-size: 13px; font-weight: 600; color: var(--muted); }

/* Media management grid (edit) */
.media-manage { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-bottom: 16px; }
.media-thumb--managed { position: relative; margin: 0; }
.media-thumb--managed img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border); display: block; }
.media-thumb--managed form { position: absolute; top: 6px; right: 6px; margin: 0; }
.media-del { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--r-full); background: rgba(15, 23, 42, .6); color: #fff; cursor: pointer; }
.media-del:hover { background: var(--err-text); }
.media-del .icon { width: 15px; height: 15px; }

/* Media Library (MEDIA-LIBRARY.md) — WordPress-style grid + detail */
.media-lib-upload { padding: 14px; margin-bottom: 1rem; }
.media-lib-upload .dropzone { display: flex; flex-direction: column; align-items: center; width: 100%; }
.media-lib-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.media-lib-tile { margin: 0; position: relative; }
/* Bulk-select (M-C): a checkbox overlay on each tile + the action bar above the grid. */
.media-bulk-bar { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; }
.media-bulk-all { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.media-lib-check { position: absolute; top: 7px; left: 7px; z-index: 2; display: inline-flex; padding: 3px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: 0 1px 2px rgba(0,0,0,.12); cursor: pointer; }
.media-lib-check input { cursor: pointer; margin: 0; }
.media-lib-tile-link { display: block; text-decoration: none; color: inherit; border-radius: var(--r-md); }
.media-lib-tile-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.media-lib-thumb { display: block; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.media-lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-fast) var(--ease); }
.media-lib-tile-link:hover .media-lib-thumb { border-color: var(--primary); }
.media-lib-tile-link:hover .media-lib-thumb img { transform: scale(1.03); }
.media-lib-tile-name { display: block; font-size: 12px; color: var(--subtle); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Non-image tiles (video/audio/pdf): a monochrome icon badge in place of a thumbnail. */
.media-lib-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 100%; color: var(--muted); }
.media-lib-badge-ic { width: 34px; height: 34px; }
.media-lib-badge-kind { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--subtle); }

/* Media Library type filter (WordPress-style tabs; monochrome, count chips). */
.media-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.media-filter-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600;
    text-decoration: none; transition: border-color .12s, color .12s, background .12s; }
.media-filter-tab:hover { border-color: var(--fg); color: var(--fg); }
.media-filter-tab.is-active { border-color: var(--fg); color: var(--fg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--fg); }
.media-filter-ic { width: 16px; height: 16px; }
.media-filter-count { font-size: 11px; font-weight: 700; color: var(--subtle); background: var(--surface-2);
    border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }
.media-filter-tab.is-active .media-filter-count { background: var(--surface); }

/* Detail-page previews for non-image assets. */
.media-detail-video, .media-detail-audio { width: 100%; display: block; border-radius: var(--r-md); background: #0f172a; }
.media-detail-audio { background: var(--surface-2); }
.media-detail-pdf { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }

/* Entry 360 preview: render media as media + rich text as an article (not a raw field dump). */
.cms-preview dd { min-width: 0; }
.cms-preview-img { max-width: 320px; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border); display: block; }
.cms-preview-media { max-width: 100%; border-radius: var(--r-md); display: block; background: #0f172a; }
.cms-preview-audio { width: 100%; max-width: 420px; display: block; }
.cms-richtext-preview { font-size: 15px; line-height: 1.65; color: var(--fg); }
.cms-richtext-preview > :first-child { margin-top: 0; }
.cms-richtext-preview > :last-child { margin-bottom: 0; }
.cms-richtext-preview p { margin: 0 0 12px; }
.cms-richtext-preview h2 { font-size: 20px; font-weight: 700; margin: 20px 0 8px; }
.cms-richtext-preview h3 { font-size: 17px; font-weight: 700; margin: 16px 0 6px; }
.cms-richtext-preview ul, .cms-richtext-preview ol { margin: 0 0 12px; padding-left: 22px; }
.cms-richtext-preview li { margin: 3px 0; }
.cms-richtext-preview blockquote { margin: 0 0 12px; padding: 4px 14px; border-left: 3px solid var(--border); color: var(--muted); }
.cms-richtext-preview img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 4px 0; }
.cms-richtext-preview a { color: var(--primary); }
.cms-richtext-preview pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; overflow-x: auto; font-size: 13px; }
.cms-richtext-preview table { border-collapse: collapse; width: 100%; margin: 0 0 12px; font-size: 14px; }
.cms-richtext-preview th, .cms-richtext-preview td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.cms-richtext-preview figure { margin: 0 0 12px; }

.media-detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.media-detail-img { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border); display: block; background: var(--surface-2); }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row .input { flex: 1 1 auto; min-width: 0; }

/* Media image editor (MEDIA-LIBRARY.md M-A) — CSP-safe <canvas> cropper + tools. */
.media-edit-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.media-editor { display: flex; flex-direction: column; gap: 12px; }
.media-editor-stage { display: flex; justify-content: center; align-items: center; padding: 12px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.media-editor-canvas { max-width: 100%; height: auto; touch-action: none; cursor: crosshair;
    border-radius: var(--r-sm); background: #0f172a; }
.media-editor-hint { margin: 0; }
.media-editor-tools { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.media-tool-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.media-tool-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.media-tool-field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.media-tool-field .select-wrap { display: inline-flex; }
.media-range { width: 180px; max-width: 100%; accent-color: var(--fg); }
.media-tool-group .btn.is-active { border-color: var(--fg); color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.media-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px;
    border-top: 1px solid var(--border); }
.media-editor-status { margin-left: 4px; }
.toolbar-spacer { flex: 1 1 auto; }
.stack { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 720px) { .media-detail { grid-template-columns: 1fr; } }

/* Media picker (MEDIA-LIBRARY.md M-3) — reusable chooser embedded in a media field */
.media-field-body { display: flex; gap: 12px; align-items: flex-start; }
.media-field-preview { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); overflow: hidden; flex: 0 0 auto; }
.media-field-preview .cms-media-preview { max-width: 96px; max-height: 96px; margin: 0; border: 0; border-radius: 0; }
.media-field-placeholder { display: inline-grid; place-items: center; color: var(--subtle); }
.media-field-placeholder .icon { width: 28px; height: 28px; }
.media-field-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.media-picker-panel { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 12px; }
.media-picker-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.media-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; }
.media-pick-empty { grid-column: 1 / -1; margin: 8px 0; }
.media-pick-tile { padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; overflow: hidden; aspect-ratio: 1; transition: border-color var(--t-fast) var(--ease); }
.media-pick-tile:hover, .media-pick-tile:focus-visible { border-color: var(--primary); outline: none; }
.media-pick-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Image picker embedded in the rich-text editor: sit flush between toolbar and text area */
.rte-imgpanel { margin: 0; border-left: 0; border-right: 0; border-radius: 0; border-top: 0; }
.rte-area img { max-width: 100%; height: auto; border-radius: var(--r-sm, 6px); }
/* Taxonomy field (TAXONOMIES.md) — category checkboxes + tags input */
.cms-taxonomy .tax-checks { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.cms-taxonomy .check { font-weight: 400; }
.cms-taxonomy .check.tax-child { padding-left: 20px; }
/* Term management (Categories/Tags) — WordPress-style two-column screen */
.terms-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.terms-layout .num { text-align: right; }
.terms-layout .term-child { color: var(--muted); }
@media (max-width: 820px) { .terms-layout { grid-template-columns: 1fr; } }
.form-actions--left { justify-content: flex-start; margin-top: 12px; }
.form-actions--sticky { display: flex; justify-content: flex-end; padding: 16px 0 4px; margin-top: 4px; }
@media (max-width: 900px) {
    .product-form .form-cols { grid-template-columns: 1fr; }
    .form-side { position: static; order: -1; }
}

/* ── Barcodes & QR (codes module) ──────────────────────────────────────────── */
.codes-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.code-qr { margin: 0; text-align: center; }
.code-qr svg { width: 140px; height: 140px; display: block; }
.code-qr figcaption, .code-bc figcaption { font-size: 12px; color: var(--subtle); margin-top: 4px; }
.code-barcodes { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.code-bc { margin: 0; }
.code-bc svg { width: 100%; max-width: 260px; height: 44px; display: block; }
@media (max-width: 640px) { .codes-grid { grid-template-columns: 1fr; } }

/* QR tools */
.qr-form { max-width: 640px; }
.qr-show { text-align: center; }
.qr-show-code svg { width: 240px; height: 240px; max-width: 100%; display: block; margin: 0 auto 16px; }
.qr-summary, .qr-dest { overflow-wrap: anywhere; }
.qr-dest.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* printable label sheet */
.label-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.label-sheet .label { margin: 0; border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; text-align: center; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.label-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-bc svg { width: 100%; max-width: 100%; height: 46px; display: block; }
.label-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.label-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); }
.label-price { font-weight: 700; color: var(--text); }

@media print {
    .sidebar, .topbar, .bottomnav, .scrim, .no-print, .toasts { display: none !important; }
    .main { margin: 0 !important; }
    .content { padding: 0 !important; }
    body, body.app { background: #fff; overflow: visible; }
    .label-sheet { gap: 6px; }
    .label-sheet .label { border-color: #ccc; break-inside: avoid; }
}

/* ── Customer 360 profile (subtle destructive action, not a big danger card) ── */
.profile-stats { margin-bottom: 1rem; }
.profile-danger { margin-top: 1.5rem; display: flex; align-items: center; gap: .5rem; }
.btn-subtle-danger { background: transparent; border: 0; color: #dc2626; font-size: 13px; font-weight: 500; padding: .35rem .5rem; border-radius: 6px; cursor: pointer; }
.btn-subtle-danger:hover { background: rgba(220, 38, 38, .08); }

/* ── Orders ─────────────────────────────────────────────────────────────────── */
.order-totals { display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; margin: 1rem 0 0; border-top: 1px solid var(--border); padding-top: .75rem; }
.order-totals dt { color: var(--muted); font-size: 14px; }
.order-totals dd { margin: 0; text-align: right; }
.order-actions { display: flex; flex-direction: column; gap: .6rem; }
.stack-sm { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }

/* ── Layout utilities (CSP-safe replacements for inline style attributes) ───── */
.mt-1 { margin-top: 1rem; }
.mt-sm { margin-top: .5rem; }
.mb-1 { margin-bottom: 1rem; }
.flex-1 { flex: 1; }
.gap-1 { gap: 1rem; }
.gap-sm { gap: .5rem; }
.wrap { flex-wrap: wrap; }
.w-full { width: 100%; }
.min-180 { min-width: 180px; }
.items-start { align-items: flex-start; }
.row-start { justify-content: flex-start; }
.ta-center { text-align: center; }
.brand-mark-lg { width: 48px; height: 48px; font-size: 20px; }
.brand-logo-preview { height: 48px; width: auto; border-radius: 8px; }

/* CMS Delivery API settings */
.endpoint-list { list-style: none; padding: 0; margin: .25rem 0 1rem; display: flex; flex-direction: column; gap: .4rem; }
.endpoint-list li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.endpoint-list code { word-break: break-all; }
.detail-sub { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #64748b); margin: 1rem 0 .25rem; }
.detail-sub:first-child { margin-top: 0; }
code.token { word-break: break-all; }

/* CMS media preview + version list */
.cms-media-preview { display: block; max-width: 220px; max-height: 160px; border-radius: 8px; margin-bottom: .5rem; border: 1px solid var(--border, #e2e8f0); object-fit: cover; }
.version-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.version-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.version-when { font-size: .85rem; }

/* CMS group (nested field set) */
.cms-group { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: .75rem 1rem 1rem; margin: 0 0 1rem; }
.cms-group > legend { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #64748b); padding: 0 .4rem; }
.detail-list.nested { margin-top: .25rem; padding-left: .75rem; border-left: 2px solid var(--border, #e2e8f0); }

/* CMS blocks (dynamic zone) builder */
.cms-blocks { margin: 0 0 1rem; }
.cms-blocks > .label { display: block; margin-bottom: .4rem; }
.cms-block { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; margin-bottom: .6rem; overflow: hidden; }
.cms-block-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .6rem; background: var(--surface-2, #f8fafc); border-bottom: 1px solid var(--border, #e2e8f0); }
.cms-block-type { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #64748b); }
.cms-block-ctrls { display: flex; gap: .25rem; }
.cms-block-body { padding: .75rem .8rem; }
.cms-block-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .25rem; }
.cms-block-list { display: flex; flex-direction: column; gap: .6rem; }
.cms-block-display { border-left: 2px solid var(--border, #e2e8f0); padding-left: .75rem; }

/* CMS schedule card spacing */
.version-list.mb { margin-bottom: 1rem; }

/* Notification bell + dropdown */
.notif { position: relative; }
.notif-btn { position: relative; }
.notif-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
    background: var(--primary, #2563eb); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700;
    line-height: 15px; text-align: center; }
.notif-menu { width: min(92vw, 340px); max-height: 70vh; overflow-y: auto; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notif-readall { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 12px;
    color: var(--primary, #2563eb); }
.notif-empty { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 13px; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { border-radius: 7px; }
.notif-item.is-unread { background: color-mix(in srgb, var(--primary, #2563eb) 8%, transparent); }
.notif-link { display: grid; gap: 2px; padding: 9px 10px; text-decoration: none; color: var(--text); }
.notif-link:hover { background: var(--surface-2); border-radius: 7px; }
.notif-item-title { font-weight: 600; font-size: 13px; }
.notif-item-body { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item-time { font-size: 11px; color: var(--muted); }

/* Menus (MENUS.md) — list + no-JS builder */
.menu-new { display: grid; gap: 14px; max-width: 34rem; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.menu-list-row:first-child { border-top: 0; }
.menu-list-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 600; }
.menu-builder { display: grid; gap: 16px; }
.menu-rows { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.menu-row { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--surface, #fff); }
.menu-row.is-child { margin-left: 24px; border-left: 3px solid var(--primary); }
.menu-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.menu-row-ops { display: flex; gap: 6px; }
.menu-row-remove { color: var(--err-text, #a3341f); }
.menu-builder-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.menu-locations { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 4px; }
/* Payment gateways settings (PAYMENTS.md) */
.pay-settings { display: grid; gap: 16px; }
.pay-gateway { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 0 0 12px; }
.pay-gateway.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.pay-gateway:last-of-type { margin-bottom: 0; }
.pay-gateway-pick { font-weight: 600; gap: 10px; }
.pay-gateway-name { margin-right: 4px; }
.pay-gateway-fields { display: grid; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); max-width: 40rem; }
.pay-gateway-note { margin: 8px 0 0; font-size: 13px; }
/* CMS content-first home (CMS-UX.md): browse content by section, not by schema */
.content-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.content-tile { position: relative; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px;
    box-shadow: var(--card-shadow); transition: box-shadow var(--t-base, .15s), border-color var(--t-base, .15s), transform var(--t-base, .15s); }
.content-tile:hover { box-shadow: var(--shadow-md); border-color: var(--primary); transform: translateY(-1px); }
.content-tile-top { display: flex; align-items: center; gap: 12px; }
.content-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
    border-radius: var(--r-md); background: var(--surface-2); color: var(--muted); font-size: 20px; line-height: 1; }
.content-tile-name { font-size: 15px; font-weight: 650; }
.content-tile-kind { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.content-tile-count { font-size: 13px; color: var(--muted); margin-top: auto; }
.content-tile-new { align-self: flex-start; margin-top: 4px; font-weight: 600; font-size: 13px; color: var(--primary);
    display: inline-flex; align-items: center; gap: 4px; }

/* Content-type icon picker (CSP-safe radio grid of inline-SVG Heroicons; no emoji). */
.icon-picker-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.icon-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.icon-opt { position: relative; display: inline-flex; cursor: pointer; }
.icon-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.icon-opt-box { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--muted);
    transition: border-color .12s, background .12s, color .12s; }
.icon-opt-svg { width: 20px; height: 20px; }
.icon-opt:hover .icon-opt-box { border-color: var(--fg); color: var(--fg); }
/* Selected state is monochrome (no accent colour): the icon simply darkens to the
   foreground and sits on a solid surface with a stronger border + subtle ring. */
.icon-opt input:checked + .icon-opt-box { border-color: var(--fg); color: var(--fg);
    background: var(--surface); box-shadow: 0 0 0 1px var(--fg); }
.icon-opt input:focus-visible + .icon-opt-box { outline: 2px solid var(--fg); outline-offset: 2px; }
.cms-advanced { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center;
    flex-wrap: wrap; gap: 8px 18px; }
.cms-advanced-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-right: 4px; }
.cms-advanced a { font-weight: 600; font-size: 13px; text-decoration: none; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.cms-advanced a:hover { color: var(--text); }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.crumb { margin: 0 0 8px; font-size: 13px; }
.crumb .link { color: var(--muted); text-decoration: none; font-weight: 600; }
.crumb .link:hover { color: var(--text); }
/* WordPress-style list table: bold title + hover-revealed row actions (cms_mimic_wordpress) */
.cell-strong { font-weight: 650; }
.list-row-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px;
    opacity: 0; transition: opacity var(--t-fast, .12s); }
tr:hover .list-row-actions, tr:focus-within .list-row-actions { opacity: 1; }
@media (hover: none) { .list-row-actions { opacity: 1; } }
.list-row-actions a, .list-row-actions .link-btn { color: var(--primary); text-decoration: none; }
.list-row-actions a:hover, .list-row-actions .link-btn:hover { text-decoration: underline; }
.list-row-actions .sep { color: var(--subtle, #9aa1ad); }
.list-row-actions .inline-form { display: inline; margin: 0; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.link-btn.danger { color: var(--err-text, #a3341f); }
.list-row-actions .link-btn.danger { color: var(--err-text, #a3341f); }
/* WordPress-style entry editor: content + settings sidebar with the Publish box (cms_mimic_wordpress) */
.wp-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .wp-editor { grid-template-columns: 1fr; } }
.wp-editor-main { min-width: 0; }
.wp-editor-side { position: sticky; top: 16px; display: grid; gap: 12px; }
@media (max-width: 1000px) { .wp-editor-side { position: static; } }
.publish-box .card-head { display: flex; align-items: center; }
.publish-status { margin: 0 0 12px; font-size: 14px; }
.publish-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.publish-primary { display: flex; gap: 8px; align-items: center; justify-content: space-between;
    padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.publish-primary .btn-primary { margin-left: auto; }
.wp-more-options { display: inline-block; font-size: 13px; padding: 2px 4px; }
/* WP editor polish: prominent title + sidebar field panels (cms_mimic_wordpress) */
.wp-title-wrap { margin-bottom: 18px; }
.wp-title-input { width: 100%; font-size: 1.55rem; font-weight: 650; line-height: 1.3; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.wp-title-input::placeholder { color: var(--muted); font-weight: 500; }
.wp-title-input:focus { outline: none; border-color: var(--primary); }
.wp-title-input.input-error { border-color: var(--err-text, #a3341f); }
.wp-side-panel .card-body { padding: 14px 16px; }
/* Rich-text (WYSIWYG) editor for richtext fields (cms_mimic_wordpress, Phase C) */
.rte { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.rte-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.rte-btn { min-width: 30px; height: 28px; padding: 0 8px; border: 0; background: none; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text); display: inline-grid; place-items: center; }
.rte-btn:hover { background: var(--surface); }
.rte-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.rte-area { min-height: 220px; padding: 12px 14px; outline: none; line-height: 1.65; font-size: 15px; }
.rte-area h2 { font-size: 1.4rem; font-weight: 650; margin: .6em 0 .3em; }
.rte-area h3 { font-size: 1.15rem; font-weight: 650; margin: .6em 0 .3em; }
.rte-area p { margin: 0 0 .8em; }
.rte-area ul, .rte-area ol { margin: 0 0 .8em; padding-left: 1.5em; }
.rte-area blockquote { margin: 0 0 .8em; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted); }
.rte-area a { color: var(--primary); text-decoration: underline; }

/* Block editor (GUTENBERG.md) — a WordPress-Gutenberg-style block list over Portable Text. */
.ge { position: relative; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ge-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.ge-toolbar-hint { font-size: 12px; color: var(--muted); }
.ge-al svg, .ge-btoolbar svg { fill: currentColor; display: block; }
/* Per-block floating toolbar (Gutenberg-style): pinned above the active block. */
.ge-blocks { padding-top: 34px; }
.ge-btoolbar { position: absolute; bottom: 100%; left: 44px; margin-bottom: 4px; z-index: 12; display: none; align-items: center; gap: 1px; padding: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.14)); }
.ge-block:focus-within .ge-btoolbar { display: flex; }
.ge-btoolbar .rte-btn { min-width: 28px; height: 26px; }
.ge-btoolbar .rte-btn.is-active { background: var(--primary); color: var(--on-primary, #fff); }
.ge-btoolbar .rte-btn.is-active svg { fill: var(--on-primary, #fff); }
/* Link popover (Gutenberg-style): appears above the active block, over the floating toolbar. */
.ge-linkpop { position: absolute; bottom: 100%; left: 44px; margin-bottom: 4px; z-index: 20; width: 280px; max-width: calc(100% - 52px); display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.16)); }
.ge-linkpop-url { height: 32px; font-size: 13px; }
.ge-linkpop-nt { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ge-linkpop-row { display: flex; align-items: center; gap: 10px; }
.ge-blocks { padding: 8px 6px; min-height: 220px; }
.ge-block { position: relative; padding: 4px 10px 4px 44px; border-radius: 8px; }
.ge-block:hover, .ge-block:focus-within { background: var(--surface-2); z-index: 5; }
.ge-block:hover .ge-ctl, .ge-block:focus-within .ge-ctl { opacity: 1; }
.ge-ctl { position: absolute; left: 4px; top: 4px; z-index: 6; display: flex; flex-direction: row; flex-wrap: wrap; width: 36px; gap: 1px; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.ge-ctl-btn { width: 16px; height: 16px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; border-radius: 3px; }
.ge-ctl-btn:hover { background: var(--border); color: var(--primary); }
.ge-drag { cursor: grab; }
.ge-drag:active { cursor: grabbing; }
.ge-block.ge-drop-before { box-shadow: inset 0 3px 0 -1px var(--primary); }
.ge-block.ge-drop-after { box-shadow: inset 0 -3px 0 -1px var(--primary); }
.ge-ce { outline: none; line-height: 1.65; font-size: 15px; min-height: 1.4em; }
.ge-ce:empty::before { content: attr(data-ph); color: var(--muted); pointer-events: none; }
.ge-ce.ge-al-center { text-align: center; }
.ge-ce.ge-al-right { text-align: right; }
.ge-ce.ge-al-justify { text-align: justify; }
.ge-h2 .ge-ce { font-size: 1.4rem; font-weight: 650; margin: .3em 0; }
.ge-h3 .ge-ce { font-size: 1.15rem; font-weight: 650; margin: .3em 0; }
.ge-p .ge-ce { margin: .2em 0; }
.ge-quote .ge-ce { padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted); font-style: italic; }
.ge-ul .ge-ce, .ge-ol .ge-ce { padding-left: 1.5em; margin: .2em 0; }
.ge-ce ul, .ge-ce ol { padding-left: 1.5em; margin: 0; }
.ge-ul .ge-ce { list-style: disc; }
.ge-ol .ge-ce { list-style: decimal; }
.ge-ce a { color: var(--primary); text-decoration: underline; }
.ge-separator hr { border: 0; border-top: 2px solid var(--border); margin: 10px 0; }
.ge-img img { max-width: 100%; height: auto; border-radius: var(--r-sm, 6px); }
/* Cover block: image with a centered editable text overlay. */
.ge-cover-box { position: relative; border-radius: 8px; overflow: hidden; }
.ge-cover-box img { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.ge-cover-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.5); background: rgba(0,0,0,.28); outline: none; }
.ge-cover-text:empty::before { content: attr(data-ph); color: #fff; opacity: .85; }
.ge-cover-change { margin-top: 6px; display: inline-block; }
/* Gallery block: grid of images with per-image remove. */
.ge-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 8px; }
.ge-gallery-cell { position: relative; }
.ge-gallery-cell img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; display: block; }
.ge-gallery-rm { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.ge-gallery-rm:hover { background: var(--danger, #c0392b); }
/* Embed block: URL form + provider preview card (the live iframe renders on the storefront only). */
.ge-embed-form { display: flex; gap: 8px; align-items: center; }
.ge-embed-form .input { flex: 1; }
.ge-embed-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.ge-embed-thumb { width: 120px; height: 68px; object-fit: cover; border-radius: 6px; flex: none; }
.ge-embed-play { position: absolute; left: 46px; top: 26px; color: #fff; font-size: 18px; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
.ge-embed-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ge-embed-prov { font-weight: 600; font-size: 13px; }
.ge-embed-url { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.ge-embed-edit { align-self: flex-start; margin-top: 2px; }
/* Table block: editable cells + row/col controls. */
.ge-table-scroll { overflow-x: auto; }
.ge-table table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.ge-table .ge-td { position: relative; border: 1px solid var(--border); padding: 6px 10px; outline: none; vertical-align: top; word-break: break-word; }
.ge-table .ge-td:focus { box-shadow: inset 0 0 0 2px var(--primary); }
.ge-table-ctl { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ge-col-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 3; }
.ge-col-resize:hover { background: var(--primary); opacity: .35; }
.ge-tw-5{width:5%}.ge-tw-10{width:10%}.ge-tw-15{width:15%}.ge-tw-20{width:20%}.ge-tw-25{width:25%}.ge-tw-30{width:30%}.ge-tw-35{width:35%}.ge-tw-40{width:40%}.ge-tw-45{width:45%}.ge-tw-50{width:50%}.ge-tw-55{width:55%}.ge-tw-60{width:60%}.ge-tw-65{width:65%}.ge-tw-70{width:70%}.ge-tw-75{width:75%}.ge-tw-80{width:80%}.ge-tw-85{width:85%}.ge-tw-90{width:90%}.ge-tw-95{width:95%}

/* Columns block: side-by-side editable columns. */
.ge-cols-edit { display: flex; gap: 12px; align-items: stretch; }
.ge-col { position: relative; border: 1px dashed var(--border); border-radius: 6px; padding: 8px 10px; min-height: 60px; outline: none; }
.ge-col:focus { border-style: solid; border-color: var(--primary); }
.ge-col:empty::before { content: attr(data-ph); color: var(--muted); pointer-events: none; }
.ge-cw-5{flex:0 1 5%}.ge-cw-10{flex:0 1 10%}.ge-cw-15{flex:0 1 15%}.ge-cw-20{flex:0 1 20%}.ge-cw-25{flex:0 1 25%}.ge-cw-30{flex:0 1 30%}.ge-cw-35{flex:0 1 35%}.ge-cw-40{flex:0 1 40%}.ge-cw-45{flex:0 1 45%}.ge-cw-50{flex:0 1 50%}.ge-cw-55{flex:0 1 55%}.ge-cw-60{flex:0 1 60%}.ge-cw-65{flex:0 1 65%}.ge-cw-70{flex:0 1 70%}.ge-cw-75{flex:0 1 75%}.ge-cw-80{flex:0 1 80%}.ge-cw-85{flex:0 1 85%}.ge-cw-90{flex:0 1 90%}.ge-cw-95{flex:0 1 95%}

/* Code block: editable monospace <pre>. */
.ge-codearea { display: block; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; outline: none; resize: vertical; box-sizing: border-box; }
.ge-codearea:focus { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
/* Button block: styled label + set-link control. */
.ge-button-box { position: relative; display: flex; align-items: center; gap: 12px; }
.ge-btn-label { display: inline-block; padding: 8px 18px; background: var(--primary); color: var(--on-primary, #fff); border-radius: 8px; font-weight: 600; font-size: 14px; outline: none; min-width: 40px; }
.ge-btn-label:empty::before { content: attr(data-ph); color: var(--on-primary, #fff); opacity: .8; }
.ge-button-link { font-size: 12px; }
.ge-menu { position: absolute; z-index: 20; left: 22px; top: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.12)); padding: 4px; min-width: 150px; }
.ge-menu.ge-menu-top { left: 8px; top: 44px; }
.ge-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 6px 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; border-radius: 6px; cursor: pointer; }
.ge-menu-item:hover, .ge-menu-item.is-active { background: var(--surface-2); }
.ge-menu-ic { display: inline-flex; color: var(--muted); flex: none; }
.ge-menu-ic svg { display: block; }
.ge-menu-item:hover .ge-menu-ic, .ge-menu-item.is-active .ge-menu-ic { color: var(--primary); }
/* "/" slash inserter menu — anchored below the block's text (CSS, not CSSOM). */
.ge-menu.ge-slash { left: 44px; top: 100%; margin-top: 2px; }
/* Image block: alt-text input under the picked image, + the Media Library picker overlay. */
.ge-img-alt { margin-top: 6px; max-width: 480px; font-size: 13px; }
.ge-picker { position: absolute; z-index: 25; left: 8px; right: 8px; top: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md, 0 8px 28px rgba(0,0,0,.16)); padding: 10px; max-height: 60vh; overflow: auto; }
.ge-picker-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ge-picker-title { font-weight: 600; font-size: 14px; white-space: nowrap; }
.ge-picker-search { flex: 1; min-width: 80px; height: 30px; font-size: 13px; padding: 0 8px; }
.ge-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ge-picker-empty { grid-column: 1 / -1; margin: 8px 0; }

/* ============ Forms drag-and-drop builder (FORMS-MODULE.md F-3) ============ */
.form-builder { display: block; }
.fb-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.fb-title { font-size: 18px; font-weight: 650; max-width: 420px; }

/* ============ Storefront theme editor (STOREFRONT-THEMING.md T-3) ============ */
.theme-kinds { display: flex; gap: 8px; margin-bottom: 16px; }
.theme-cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .theme-cols { grid-template-columns: 1fr; } }
.theme-canvas { display: flex; flex-direction: column; gap: 12px; }

/* In-admin live builder (B-4): section list on the left, live storefront preview iframe on the right.
   `.theme-build-side` is display:contents by default so the non-preview layout is unchanged; in build mode
   it becomes a flex column holding the canvas + palette, and the iframe takes the second grid column. */
.theme-build-side { display: contents; }
.theme-cols.theme-build { grid-template-columns: 380px minmax(0, 1fr); }
.theme-cols.theme-build .theme-build-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.theme-cols.theme-build .theme-palette { position: static; }
.theme-build-preview { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; }
.theme-preview-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 2px; }
.theme-preview-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); flex: none; }
.theme-vw { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2, rgba(0,0,0,.05)); border-radius: 8px; }
.theme-vw-btn { border: 0; background: none; cursor: pointer; width: 26px; height: 22px; border-radius: 6px; color: var(--muted); font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.theme-vw-btn:hover { color: var(--fg); }
.theme-vw-btn.is-active { background: var(--bg, #fff); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.theme-preview-stage { width: 100%; max-width: none; margin: 0 auto; transition: max-width .22s var(--ease, ease); }
.theme-preview-frame { width: 100%; height: calc(100vh - 210px); min-height: 460px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.theme-cols.theme-build .theme-section-head { cursor: pointer; }
.theme-cols.theme-build .theme-section-head:hover .card-title { color: var(--primary, #2563eb); }
.theme-section.is-sq-selected { outline: 2px solid var(--primary, #2563eb); outline-offset: 1px; }
@media (max-width: 1100px) { .theme-cols.theme-build { grid-template-columns: 1fr; } .theme-build-preview { position: static; } .theme-preview-frame { height: 70vh; } }
.theme-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.theme-section-ops { display: flex; gap: 4px; flex: none; }
/* Drag-to-reorder (B-4) */
.theme-drag { flex: none; cursor: grab; color: var(--muted); font-size: 12px; letter-spacing: -3px; line-height: 1;
  padding: 4px 4px; border-radius: 6px; user-select: none; opacity: .55; }
.theme-drag:hover { opacity: 1; background: var(--surface-2, rgba(0,0,0,.04)); }
.theme-drag:active { cursor: grabbing; }
.theme-section-head .card-title { flex: 1 1 auto; min-width: 0; }
.theme-section.is-dragging { opacity: .45; }
.theme-section.is-drop-before { box-shadow: 0 -3px 0 0 var(--primary, #2563eb); }
.theme-section.is-drop-after { box-shadow: 0 3px 0 0 var(--primary, #2563eb); }
.theme-section.is-unknown { border-color: #fecaca; }
.theme-unknown { color: #b45309; margin: 0; }
.theme-palette { position: sticky; top: 12px; }
.theme-palette-group { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }
.theme-palette-group:first-child { margin-top: 0; }
.theme-add-btn { display: block; width: 100%; text-align: left; margin-bottom: 6px; }
@media (max-width: 900px) { .theme-palette { position: static; } }
.theme-dirty { font-size: 12px; font-weight: 600; color: #b45309; white-space: nowrap; }
.theme-publish { margin-top: 16px; }
.theme-publish-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.theme-publish-title { font-size: 14px; font-weight: 700; color: var(--fg); margin: 0 0 2px; }
.theme-publish-lead .help { margin: 0; }
.theme-history { border-top: 1px solid var(--border); }
.theme-history-list { list-style: none; margin: 6px 0 0; padding: 0; }
.theme-history-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.theme-history-list li:last-child { border-bottom: 0; }
.theme-history-label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.theme-history-list .inline-form { margin: 0; }

/* Password show/hide toggle */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { width: 100%; padding-right: 44px; }
.pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex;
  align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0;
  background: none; color: var(--muted); cursor: pointer; border-radius: 7px; }
.pw-toggle:hover { color: var(--fg); background: var(--surface-2, rgba(0,0,0,.05)); }
.pw-toggle svg { width: 19px; height: 19px; display: block; }
.pw-toggle .pw-eye-off { display: none; }
.pw-wrap.is-visible .pw-toggle .pw-eye { display: none; }
.pw-wrap.is-visible .pw-toggle .pw-eye-off { display: block; }

/* Login "keep me signed in" (SESSION-POLICY.md P5) */
.auth-remember { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin: 2px 0; cursor: pointer; user-select: none; }
.auth-remember input { width: 16px; height: 16px; margin: 0; }

/* Security → Sessions (SESSION-POLICY.md P3) */
.sess-scroll { overflow-x: auto; }
.sess-legend td, .sess-legend th { vertical-align: top; }
.sess-legend .help { font-size: 12px; }
.sess-realm { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .sess-realm { grid-template-columns: 1fr; gap: 12px; } }
.sess-realm .field { margin: 0; }
.sess-effective { padding-top: 4px; }
.sess-dials { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; }
.sess-dials span { font-size: 13px; color: var(--muted); }
.sess-dials code { font-variant-numeric: tabular-nums; color: var(--fg); background: var(--surface-2, rgba(0,0,0,.05)); padding: 1px 7px; border-radius: 6px; margin-left: 4px; }

/* Design tokens (B-2b) */
.fb-title-static { font-size: 15px; font-weight: 600; color: var(--fg); }
.theme-token-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 16px; }
.theme-token { margin: 0; }
.theme-color-row { display: flex; align-items: center; gap: 8px; }
.theme-color { width: 44px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
.theme-color-hex { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.theme-preset-form { margin: 0 0 6px; }
.theme-preset-btn { width: 100%; justify-content: flex-start; gap: 10px; }
.theme-preset-swatch { display: inline-flex; }
.theme-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); margin-left: -4px; }
.theme-dot:first-child { margin-left: 0; }
.theme-preview-label { margin-top: 16px; }
.theme-swatches { display: flex; flex-direction: column; gap: 8px; }
.theme-swatch { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.theme-swatch-chip { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border); flex: 0 0 auto; }
.theme-reset-form { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.theme-reset-btn { color: var(--muted); }

/* Live preview card (B-2b polish) — scoped by --tp-* vars set server-side + live via JS. */
.tp-card { overflow: hidden; }
.tp-preview { background: var(--tp-bg); color: var(--tp-ink); border-radius: 12px; padding: 22px; transition: background .15s ease, color .15s ease; }
.tp-preview .tp-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tp-accent); }
.tp-preview .tp-h { margin: 0 0 8px; font-family: var(--tp-font-h); font-size: 24px; line-height: 1.12; font-weight: 600; color: var(--tp-ink); letter-spacing: -.01em; }
.tp-preview .tp-body { margin: 0 0 18px; font-family: var(--tp-font-b); font-size: 14px; line-height: 1.55; color: var(--tp-ink); opacity: .78; max-width: 46ch; }
.tp-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.tp-mini { display: flex; align-items: center; gap: 12px; background: var(--tp-card); border-radius: var(--tp-radius); padding: 10px 14px 10px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tp-mini-media { width: 46px; height: 56px; border-radius: calc(var(--tp-radius) * .7); background: color-mix(in srgb, var(--tp-accent) 14%, var(--tp-bg)); color: color-mix(in srgb, var(--tp-accent) 60%, var(--tp-ink)); display: flex; align-items: center; justify-content: center; font-family: var(--tp-font-h); font-size: 20px; }
.tp-mini-body { display: flex; flex-direction: column; gap: 2px; font-family: var(--tp-font-b); }
.tp-mini-title { font-size: 13px; font-weight: 600; color: var(--tp-ink); }
.tp-mini-price { font-size: 13px; color: var(--tp-ink); opacity: .7; font-variant-numeric: tabular-nums; }
.tp-actions { display: flex; align-items: center; gap: 14px; }
.tp-btn { font-family: var(--tp-font-b); background: var(--tp-accent); color: #fff; border: 0; border-radius: var(--tp-radius); padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: default; }
.tp-link { font-family: var(--tp-font-b); color: var(--tp-accent); font-size: 13px; font-weight: 600; }
.fb-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .fb-grid { grid-template-columns: 180px minmax(0, 1fr); } .fb-config { grid-column: 1 / -1; } }
/* Single column on phones: the palette + config are side rails on desktop (sticky), but stacked in
   one column that sticky makes overlap the canvas cards — so let them flow normally here. */
@media (max-width: 760px) {
    .fb-grid { grid-template-columns: 1fr; }
    .fb-grid .fb-palette, .fb-grid .fb-config { position: static; }
    /* Stack the cramped single-row toolbar: title on its own full-width line, actions wrap below. */
    .fb-topbar { flex-wrap: wrap; }
    .fb-topbar .fb-title { flex: 1 1 100%; max-width: none; order: -1; }
    .fb-topbar .toolbar-spacer { display: none; }
    .fb-topbar .btn-primary { margin-left: auto; }
}

/* Palette */
.fb-palette { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.fb-palette-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 8px 2px 2px; }
.fb-palette-title:first-child { margin-top: 0; }
.fb-palette-btn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 12px; font-size: 13px; font-weight: 600;
    color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer;
    transition: border-color .12s, background .12s, transform .06s; }
.fb-palette-btn:hover { border-color: var(--fg); background: var(--surface-2); }
.fb-palette-btn:active { transform: translateY(1px); }
.fb-palette-icon { width: 16px; height: 16px; flex: none; color: var(--muted); }
.fb-palette-btn:hover .fb-palette-icon { color: var(--accent); }

/* Canvas */
.fb-canvas { min-height: 320px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
    min-height: 280px; border: 1.5px dashed var(--border); border-radius: var(--r-md); color: var(--muted); }
.fb-empty-title { font-weight: 650; color: var(--subtle); }
.fb-field { transition: transform 180ms ease; will-change: transform; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.fb-field:hover { border-color: var(--fg); }
.fb-field.is-selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.fb-field.is-dragging { transition: none; position: relative; z-index: 10; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.fb-canvas.is-reordering { user-select: none; -webkit-user-select: none; }
.fb-field-handle { cursor: grab; color: var(--subtle); font-size: 12px; letter-spacing: -2px; user-select: none; -webkit-user-select: none; line-height: 1; touch-action: none; padding: 4px 2px; }
.fb-field-handle:active { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .fb-field { transition: none; } .fb-field.is-dragging { box-shadow: none; } }
.fb-field-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fb-field-label { font-size: 14px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-field-type { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.fb-field-actions { display: flex; gap: 4px; }
.fb-icon-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; }
.fb-icon-btn:hover { color: var(--fg); background: var(--surface-2); border-color: var(--border); }
.fb-icon-btn.danger:hover { color: var(--danger, #dc2626); }

/* Config panel */
.fb-config { position: sticky; top: 12px; padding: 14px; }
.fb-cfg { display: flex; flex-direction: column; gap: 12px; }
.fb-cfg-row { display: flex; flex-direction: column; gap: 5px; }
.fb-cfg-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.fb-cfg-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--fg); cursor: pointer; }
.fb-cfg-empty { padding: 20px 4px; text-align: center; }

/* Live preview */
.fb-preview-card { margin-top: 16px; }
.fb-preview { display: flex; flex-wrap: wrap; gap: 14px; }
.fb-pv-field { display: flex; flex-direction: column; gap: 5px; }
.fb-pv-full { flex: 1 1 100%; }
.fb-pv-half { flex: 1 1 calc(50% - 7px); min-width: 200px; }
.fb-pv-label { font-size: 13px; font-weight: 600; color: var(--fg); }
.fb-pv-req { color: var(--danger, #dc2626); }
.fb-pv-h { flex: 1 1 100%; font-size: 18px; font-weight: 700; margin: 6px 0 0; }
.fb-pv-p { flex: 1 1 100%; color: var(--muted); margin: 0; }
.fb-pv-choices { display: flex; flex-direction: column; gap: 6px; }
.fb-pv-choice { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg); }
.fb-preview .input:disabled, .fb-preview .select:disabled { background: var(--surface-2); opacity: .9; cursor: default; }
.fb-meta { margin-top: 18px; }

/* ============ Public form runtime (FORMS-MODULE.md F-2) ============ */
.sf-body { margin: 0; padding: 24px 16px; background: var(--surface-2, #f1f5f9); color: var(--fg, #0f172a);
    font-family: var(--font, system-ui, -apple-system, Segoe UI, Roboto, sans-serif); min-height: 100vh; box-sizing: border-box; }
.sf-shell { max-width: 640px; margin: 0 auto; }
/* Admin preview shell: a slim top bar over the real form so drafts can be filled in + tested. */
.sf-body.sf-preview { padding-top: 76px; }
.sf-preview-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center;
    gap: 14px; padding: 12px 18px; background: var(--surface, #fff); border-bottom: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.sf-preview-back { font-size: 14px; font-weight: 600; color: var(--fg, #0f172a); text-decoration: none;
    padding: 6px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; white-space: nowrap; }
.sf-preview-back:hover { background: var(--surface-2, #f1f5f9); }
.sf-preview-tag { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.sf-preview-tag.is-live { color: #047857; background: rgba(16,185,129,.14); }
.sf-preview-tag.is-draft { color: #b45309; background: rgba(245,158,11,.16); }
.sf-form { background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 28px; }
.sf-title { font-size: 22px; font-weight: 700; margin: 0 0 18px; }
.sf-fields { display: flex; flex-wrap: wrap; gap: 16px; }
.sf-field { display: flex; flex-direction: column; gap: 6px; }
.sf-full { flex: 1 1 100%; }
.sf-half { flex: 1 1 calc(50% - 8px); min-width: 200px; }
.sf-label { font-size: 14px; font-weight: 600; }
.sf-req { color: #dc2626; }
.sf-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px 12px; color: var(--fg, #0f172a);
    background: var(--surface, #fff); border: 1px solid var(--border, #cbd5e1); border-radius: 9px; transition: border-color .12s, box-shadow .12s; }
.sf-input:focus { outline: none; border-color: var(--primary, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2563eb) 18%, transparent); }
textarea.sf-input { resize: vertical; min-height: 96px; }
.sf-select { appearance: auto; }
.sf-help { font-size: 12.5px; color: var(--muted, #64748b); }
.sf-error { font-size: 12.5px; color: #dc2626; font-weight: 600; }
.sf-field.has-error .sf-input { border-color: #dc2626; }
.sf-choices { display: flex; flex-direction: column; gap: 8px; }
.sf-choice { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; cursor: pointer; }
.sf-h { font-size: 18px; font-weight: 700; margin: 6px 0 0; flex: 1 1 100%; }
.sf-p { color: var(--muted, #64748b); margin: 0; flex: 1 1 100%; }
.sf-actions { margin-top: 20px; }
.sf-submit { font-size: 15px; padding: 11px 22px; }
.sf-formerror { color: #dc2626; font-weight: 600; margin: 12px 0 0; }
.sf-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-done { background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 44px 28px; text-align: center; }
.sf-done-icon { width: 52px; height: 52px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff; background: #16a34a; border-radius: 50%; }
.sf-done-msg { font-size: 17px; font-weight: 600; margin: 0; }
.sf-missing { color: var(--muted, #64748b); text-align: center; margin: 8px 0; }
.sf-mt { margin-top: 14px; }

.sf-hidden { display: none !important; }

/* Conditional-logic editor in the field config panel (FORMS-MODULE.md F-4). */
.fb-logic { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 10px; }
.fb-logic-title { margin: 0; }
.fb-logic-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.fb-logic-head .select-wrap { display: inline-flex; }
.fb-logic-head .select { height: 30px; padding: 0 26px 0 8px; font-size: 13px; }
.fb-logic-conds { display: flex; flex-direction: column; gap: 8px; }
.fb-logic-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fb-logic-cond .select-wrap { flex: 1 1 auto; }
.fb-logic-cond .select { width: 100%; height: 32px; padding: 0 26px 0 8px; font-size: 13px; }
.fb-logic-val { flex: 1 1 90px; min-width: 80px; height: 32px; font-size: 13px; }
.fb-logic-add { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--primary); background: none; border: 0; cursor: pointer; padding: 2px 0; }
.fb-logic-add:hover { text-decoration: underline; }

/* Forms confirmation + notifications settings (FORMS-MODULE.md F-6). */
.fb-settings-card { margin-top: 16px; }
.fb-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .fb-settings { grid-template-columns: 1fr; } }
.fb-settings-col { display: flex; flex-direction: column; gap: 12px; }
.fb-settings-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* ============ Multi-step wizard (FORMS-MODULE.md F-4b) ============ */
/* Public: a numbered progress rail + one visible step at a time. */
.sf-progress { list-style: none; display: flex; gap: 0; margin: 0 0 24px; padding: 0; }
.sf-progress-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative;
    font-size: 12px; color: var(--muted, #64748b); cursor: default; }
.sf-progress-num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; background: var(--surface, #fff); border: 2px solid var(--border, #cbd5e1);
    color: var(--muted, #64748b); z-index: 1; transition: border-color .15s, background .15s, color .15s, box-shadow .15s; }
.sf-progress-label { font-weight: 600; text-align: center; max-width: 130px; line-height: 1.3; }
.sf-progress-step::before { content: ''; position: absolute; top: 14px; right: 50%; width: 100%; height: 2px;
    background: var(--border, #e2e8f0); z-index: 0; }
.sf-progress-step:first-child::before { display: none; }
.sf-progress-step.is-active { color: var(--fg, #0f172a); }
.sf-progress-step.is-active .sf-progress-num { border-color: var(--primary, #2563eb); color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2563eb) 15%, transparent); }
.sf-progress-step.is-done { color: var(--fg, #0f172a); cursor: pointer; }
.sf-progress-step.is-done .sf-progress-num { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff; }
.sf-progress-step.is-active::before, .sf-progress-step.is-done::before { background: var(--primary, #2563eb); }
.sf-step[hidden] { display: none; }
.sf-step-title { font-size: 17px; font-weight: 700; margin: 0 0 16px; }
.sf-step-fields { display: flex; flex-wrap: wrap; gap: 16px; }
.sf-stepnav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.sf-back { margin-right: auto; } /* pin Back left; Next/Submit sit right */
.sf-next { font-size: 15px; padding: 11px 22px; }
.sf-submit-slot { display: contents; } /* the runtime moves .sf-submit in here on the last step */

/* Builder: a page break renders as a labelled divider card + a preview divider. */
.fb-field.fb-pagebreak { background: color-mix(in srgb, var(--primary, #2563eb) 6%, var(--surface, #fff)); border-style: dashed; }
.fb-pagebreak-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.fb-pagebreak-tag { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--primary, #2563eb); }
.fb-pagebreak-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.fb-pv-pagebreak { flex: 1 1 100%; display: flex; align-items: center; gap: 12px; margin: 4px 0;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary, #2563eb); }
.fb-pv-pagebreak::before, .fb-pv-pagebreak::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Form analytics (F-9): stat cards + a CSP-safe inline-SVG trend chart + <progress> fill rates. */
.page-actions { display: flex; gap: 8px; align-items: center; }
.fa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.fa-stat { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 18px; }
.fa-stat-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--subtle, var(--muted)); }
.fa-stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--text, var(--fg)); }
.fa-chart { display: block; width: 100%; height: 200px; }
.fa-chart .fa-bar { fill: var(--primary, #2563eb); }
.fa-chart .fa-axis { stroke: var(--border, #e2e8f0); stroke-width: 1; }
.fa-axislabels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.fa-fill { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fa-fill-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 12px; align-items: center; }
.fa-fill-label { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.fa-fill-pct { font-size: 13px; font-weight: 700; color: var(--muted); min-width: 40px; text-align: right; }
.fa-fill-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2, #f1f5f9); }
.fa-fill-bar::-webkit-progress-bar { background: var(--surface-2, #f1f5f9); border-radius: 999px; }
.fa-fill-bar::-webkit-progress-value { background: var(--primary, #2563eb); border-radius: 999px; }
.fa-fill-bar::-moz-progress-bar { background: var(--primary, #2563eb); border-radius: 999px; }
@media (max-width: 640px) { .fa-fill-row { grid-template-columns: 1fr auto; } .fa-fill-bar { grid-column: 1 / -1; } }

/* Submission ops (SO-1): search + review filter + bulk bar. */
.sub-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sub-search { display: flex; gap: 8px; }
.sub-search .input { min-width: 200px; }
.sub-reviewbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; transition: .12s; }
.chip:hover { border-color: var(--muted); }
.chip.is-active { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff; }
.chip-count { font-size: 11px; font-weight: 700; background: color-mix(in srgb, currentColor 18%, transparent); border-radius: 999px; padding: 0 6px; }
.bulk-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin: 12px 0 6px;
    background: var(--surface-2, #f1f5f9); border: 1px solid var(--border); border-radius: 10px; }
.bulk-count { font-weight: 700; font-size: 13px; min-width: 18px; }
.sub-check { width: 34px; text-align: center; }
.rv-form { display: flex; gap: 8px; align-items: center; }
.rv-form .select-wrap { flex: 1 1 auto; }

/* Payments (P-1): the Stripe Payment Element slot on the public form + a paid badge. */
.sf-payment { margin-top: 18px; }
.sf-payment-el { min-height: 40px; }
.sf-payment-err { color: #dc2626; font-weight: 600; font-size: 13px; margin: 8px 0 0; }
.sf-paid { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #166534;
    background: #e7f5ec; border: 1px solid #bbf7d0; border-radius: 999px; padding: 2px 9px; }

/* Turnstile widget + the editor's spam sub-section (F-7). */
.sf-captcha { margin-top: 18px; }
.fb-settings-sub { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }

/* Calculated field (F-9c): read-only, visually distinct from an editable input. */
.sf-calc { background: var(--surface-2, #f1f5f9); font-weight: 600; cursor: default; }
.sf-calc:focus { outline: none; box-shadow: none; border-color: var(--border, #cbd5e1); }

/* File-upload field (F-7): tidy the native control + its picker button. */
.sf-file { padding: 8px 12px; cursor: pointer; }
.sf-file::file-selector-button { font: inherit; font-size: 13px; font-weight: 600; margin-right: 12px; padding: 7px 12px;
    color: var(--fg, #0f172a); background: var(--surface-2, #f1f5f9); border: 1px solid var(--border, #cbd5e1);
    border-radius: 7px; cursor: pointer; transition: background .12s; }
.sf-file::file-selector-button:hover { background: color-mix(in srgb, var(--primary, #2563eb) 10%, var(--surface-2, #f1f5f9)); }

/* forms F-5 embed */

/* Subscriptions native pages (SUBSCRIPTIONS.md S-3..S-5) + list-first admin helpers (UX pass). */
/* Subscribe page (SUBSCRIPTIONS.md S-3). */
.subs-plan-head { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border, #e2e8f0); }
.subs-plan-head .sf-title { margin: 0 0 6px; }
.subs-price { font-size: 18px; font-weight: 700; color: var(--fg, #0f172a); margin: 0; }
.subs-trial { font-size: 13px; font-weight: 700; color: #166534; background: #e7f5ec; border: 1px solid #bbf7d0; border-radius: 999px; padding: 1px 9px; }
.subs-desc { color: var(--muted, #64748b); margin: 8px 0 0; font-size: 14px; }
.subs-securenote { text-align: center; margin-top: 14px; }
.sf-input[readonly] { background: var(--surface-2, #f1f5f9); }

/* Native manage page (SUBSCRIPTIONS.md S-5a). */
.sf-center { text-align: center; }
.sf-center .sf-done-icon { margin: 0 auto 10px; }
.sf-flash { border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; font-size: 14px; }
.sf-flash--ok { background: #e7f5ec; border: 1px solid #bbf7d0; color: #166534; }
.sf-flash--err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.subs-manage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.subs-manage-head .sf-title { margin: 0; }
.subs-badge { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.subs-badge--ok { color: #166534; background: #e7f5ec; border: 1px solid #bbf7d0; }
.subs-badge--warn { color: #92400e; background: #fef3c7; border: 1px solid #fde68a; }
.subs-badge--off { color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; }
.subs-meta { margin: 0 0 20px; padding: 0; }
.subs-meta-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border, #e2e8f0); }
.subs-meta-row:last-child { border-bottom: 0; }
.subs-meta-row dt { color: var(--muted, #64748b); font-size: 14px; margin: 0; }
.subs-meta-row dd { color: var(--fg, #0f172a); font-size: 14px; font-weight: 600; margin: 0; text-align: right; }
.subs-cancelnote { background: var(--surface-2, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 16px; }
.subs-cancelnote p { margin: 0 0 12px; color: var(--fg, #0f172a); font-size: 14px; }
.subs-danger-form { margin-top: 4px; }
.subs-cancel-btn { color: #b91c1c; }
.subs-signout { margin-top: 18px; text-align: center; }
.sf-linkbtn { background: none; border: 0; color: var(--muted, #64748b); font-size: 13px; cursor: pointer; text-decoration: underline; padding: 4px; }
.sf-linkbtn:hover { color: var(--fg, #0f172a); }
.sf-flash--warn { background: #fef3c7; border: 1px solid #fde68a; color: #92400e; }
/* Payment method row + update-card page (S-5b). */
.subs-meta-row--action dd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.subs-card { color: var(--fg, #0f172a); font-size: 14px; font-weight: 600; }
.subs-card--none { color: var(--muted, #64748b); font-weight: 500; }
.subs-metalink { font-size: 13px; font-weight: 600; color: var(--accent, #2563eb); text-decoration: none; }
.subs-metalink:hover { text-decoration: underline; }
.sf-actions .sf-linkbtn { align-self: center; }
/* Change plan (S-5c). */
.subs-switch { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border, #e2e8f0); }
.subs-switch-title { font-size: 14px; font-weight: 700; color: var(--fg, #0f172a); margin: 0 0 10px; }
.subs-switch-list { list-style: none; margin: 0; padding: 0; }
.subs-switch-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border, #e2e8f0); }
.subs-switch-item:last-child { border-bottom: 0; }
.subs-switch-info { display: flex; flex-direction: column; gap: 1px; }
.subs-switch-name { font-size: 14px; font-weight: 600; color: var(--fg, #0f172a); }
.subs-switch-price { font-size: 13px; color: var(--muted, #64748b); }
.subs-switch-btn { flex: none; padding: 6px 14px; }
.subs-proration-note { margin: 14px 0 4px; }
.subs-confirm-form { margin-top: 8px; }
.subs-history-link { margin: 18px 0 0; text-align: center; }
/* Billing history (S-5d). */
.subs-inv-list { list-style: none; margin: 4px 0 0; padding: 0; }
.subs-inv-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border, #e2e8f0); }
.subs-inv-item:last-child { border-bottom: 0; }
.subs-inv-main { display: flex; flex-direction: column; gap: 2px; }
.subs-inv-date { font-size: 14px; color: var(--muted, #64748b); }
.subs-inv-amount { font-size: 15px; font-weight: 700; color: var(--fg, #0f172a); }
.subs-inv-meta { display: flex; align-items: center; gap: 12px; }
/* List-first admin helpers (UX pass). */
.head-actions { display: flex; gap: 8px; align-items: center; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 16px; text-align: center; }
.form-page { max-width: 720px; }
.sf-mb { margin-bottom: 12px; }
.subs-user { display: flex; align-items: center; gap: 10px; }
.subs-user-text { display: flex; flex-direction: column; min-width: 0; }
.subs-user-email { font-size: 12px; margin-top: 1px; }

/* First-run onboarding checklist (VERTICALS-V5) */
.onboarding-card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checklist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.checklist-item { display: flex; align-items: center; gap: 10px; }
.checklist-toggle { margin: 0; }
.checklist-check { width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--border); background: var(--card); color: var(--accent); font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.checklist-item.is-done .checklist-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.checklist-item.is-done .checklist-label { color: var(--subtle); text-decoration: line-through; }
.checklist-label { color: var(--ink); }

/* ── Field Service: line-item builder + document sheet ───────────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:720px){.grid-3{grid-template-columns:1fr}}
.field-hint{font-size:12px;color:var(--muted);margin-top:4px}
.input-prefix{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--r-lg,10px);background:#fff;overflow:hidden}
.input-prefix .prefix{padding:0 10px;color:var(--muted);font-weight:600;background:var(--bg,#f6f7f9);align-self:stretch;display:flex;align-items:center}
.input-prefix .input{border:0;border-radius:0;flex:1;min-width:0;background:transparent}
.input-prefix .input:focus{box-shadow:none}
.input-sm{padding:6px 8px;font-size:14px}
.is-muted-row{opacity:.55}
.line-items{width:100%}
.line-items th,.line-items td{vertical-align:middle}
.line-items .li-pick{width:200px}.line-items .li-qty{width:78px}.line-items .li-price{width:128px}
.line-items .li-total{width:104px}.line-items .li-tax{width:50px;text-align:center}.line-items .li-rm{width:42px;text-align:right}
.line-items input.num,.line-items .num input{text-align:right}
.doc-totals{margin-top:16px;margin-left:auto;max-width:330px;display:flex;flex-direction:column;gap:6px}
.doc-total-row{display:flex;justify-content:space-between;gap:24px;font-size:15px;color:var(--muted)}
.doc-total-row .num{color:inherit;font-variant-numeric:tabular-nums}
.doc-total-grand{border-top:1px solid var(--border);margin-top:6px;padding-top:8px;font-size:18px;font-weight:700;color:inherit}
.doc-sheet .card-body{padding:28px}
.doc-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:20px}
.doc-parties{display:flex;gap:40px;flex-wrap:wrap}
.doc-party{display:flex;flex-direction:column;gap:2px}
.doc-party strong{font-size:15px}
.doc-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:2px}
.doc-meta{text-align:right;display:flex;flex-direction:column;gap:8px}
.doc-meta>div{display:flex;flex-direction:column}
.doc-lines{width:100%;margin-top:8px}
.doc-notes{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.doc-notes p{margin:2px 0 0;color:var(--muted);font-size:14px}
.tax-mark{color:var(--primary);font-weight:700}
@media(max-width:720px){.doc-notes{grid-template-columns:1fr}.doc-meta{text-align:left}}

/* Field Service — job schedule row (avoids inline styles under strict CSP) */
.fs-schedule{align-items:flex-end}
.fs-schedule .field{margin:0}

/* Field Service — week calendar (scheduled jobs) */
.fs-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:8px}
.fs-cal-day{background:var(--card,#fff);border:1px solid var(--border);border-radius:var(--r-lg,10px);min-height:180px;display:flex;flex-direction:column;overflow:hidden}
.fs-cal-day.is-today{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.fs-cal-head{display:flex;align-items:baseline;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--border)}
.fs-cal-dow{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.fs-cal-date{font-size:16px;font-weight:700}
.is-today .fs-cal-date{color:var(--primary)}
.fs-cal-body{display:flex;flex-direction:column;gap:6px;padding:8px;flex:1}
.fs-cal-empty{color:var(--border-strong,#cbd0d8);text-align:center;margin-top:8px}
.fs-cal-job{display:flex;flex-direction:column;gap:2px;padding:7px 8px;border-radius:8px;background:var(--bg,#f6f7f9);text-decoration:none;color:inherit;border:1px solid var(--border)}
.fs-cal-job:hover{border-color:var(--primary)}
.fs-cal-time{font-size:12px;font-weight:700;color:var(--primary)}
.fs-cal-cust{font-size:13px;font-weight:600}
.fs-cal-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}
@media(max-width:900px){.fs-cal{grid-template-columns:1fr;gap:6px}.fs-cal-day{min-height:auto}.fs-cal-empty{display:none}}

/* ---- Client portal (CLIENT-PORTAL.md P1): customer-facing invoices + pay + history ---- */
.auth-wrap:has(.doc-sheet){max-width:600px}
.portal-nav{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.portal-tab{padding:9px 14px;font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.portal-tab:hover{color:var(--text)}
.portal-tab.is-active{color:var(--primary);border-bottom-color:var(--primary)}
.portal-balance{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.portal-balance.is-due{border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.portal-balance-label{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.portal-balance-amount{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.portal-balance-note{font-size:14px;color:var(--ok,#16a34a);font-weight:600}
.portal-section{margin-bottom:20px}
.portal-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.portal-section-title{font-size:15px;font-weight:700;color:var(--text);margin:0}
.portal-link{font-size:14px;font-weight:600;color:var(--primary);text-decoration:none}
.portal-empty{padding:28px;text-align:center;color:var(--muted);font-size:14px;background:var(--surface);border:1px dashed var(--border);border-radius:var(--r-xl)}
.portal-list{display:flex;flex-direction:column;gap:8px}
.portal-row{display:flex;align-items:center;gap:12px;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg,12px);padding:14px 16px;text-decoration:none;min-height:56px}
a.portal-row:hover{box-shadow:0 8px 22px -8px rgba(48,58,70,.28);transform:translateY(-1px)}
.portal-row.is-static{cursor:default}
.portal-row-main{display:flex;flex-direction:column;min-width:0;gap:2px}
.portal-row-title{font-size:16px;font-weight:700;color:var(--text)}
.portal-row-sub{font-size:13px;color:var(--muted)}
.portal-row-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.portal-row-amount{font-size:16px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.portal-doc-head{margin-bottom:16px}
.portal-doc-head .portal-title{margin-top:6px}
.portal-pay-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid color-mix(in srgb,var(--primary) 40%,var(--border));border-radius:var(--r-xl);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.portal-pay-cta .portal-balance-label{display:block}
.portal-pay-amount{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.btn-lg{padding:13px 22px;font-size:16px;border-radius:12px}
.portal-signin-hint{margin:18px 0 0;text-align:center;font-size:14px}
.portal-signin-hint a{color:var(--primary);font-weight:600;text-decoration:none}
.input-code{font-size:24px;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:520px){.portal-pay-cta{flex-direction:column;align-items:stretch}.portal-pay-cta form{width:100%}.portal-pay-cta .btn{width:100%}}
.portal-decide{background:var(--surface);border:1px solid color-mix(in srgb,var(--primary) 40%,var(--border));border-radius:var(--r-xl);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.portal-decide-q{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--text)}
.portal-decide-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:520px){.portal-decide-actions{flex-direction:column}.portal-decide-actions form,.portal-decide-actions .btn{width:100%}}
.portal-request-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg,12px);padding:14px 18px;margin-bottom:20px;text-decoration:none;font-size:15px;font-weight:600;color:var(--text);min-height:52px}
.portal-request-cta:hover{box-shadow:0 8px 22px -8px rgba(48,58,70,.28);transform:translateY(-1px)}
.portal-request-cta-go{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--primary);color:#fff;font-size:18px;line-height:1}
.portal-lead{margin:0 0 16px;font-size:15px;color:var(--muted)}
.form textarea.input{resize:vertical;min-height:96px;font-family:inherit}

/* ---- Native app shell for the signed-in client portal (portal/app layout) ---- */
body.portal-app{height:100dvh;overflow:hidden;margin:0;background:#e9e3d6}
/* Warm neutral palette scoped to the client-portal shell so it sits seamlessly next to a warm brand site
   (e.g. valleytask.com's sand/ink): white cards on a soft sand ground, warm borders + ink text. Cards/bars use
   var(--surface); rows/badges use var(--border)/var(--text)/var(--muted) — overriding them here restyles the
   whole portal without touching the platform or other tenants. --primary/--accent still come from the tenant. */
.pa-app{display:flex;flex-direction:column;height:100dvh;max-width:540px;margin:0 auto;background:#f6f3ec;position:relative;--surface:#ffffff;--border:#e7e2d6;--text:#14231c;--muted:#5c6a62}
@media(min-width:560px){.pa-app{box-shadow:0 0 0 1px var(--border),0 30px 70px -30px rgba(15,23,42,.32)}}
.pa-topbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;background:var(--surface);border-bottom:1px solid var(--border)}
.pa-brand{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0}
.pa-brand-logo{height:30px;width:auto;max-width:160px;object-fit:contain}
.pa-brand-mark{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--primary);color:#fff;font-weight:800;font-size:16px}
.pa-brand-name{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-icon-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border:0;background:transparent;color:var(--muted);border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pa-icon-btn:active{background:#eef2f7;transform:scale(.94)}
.pa-ic{width:22px;height:22px}
/* scroll-padding-bottom keeps a focused input clear of the tab bar / keyboard edge when the browser
   scrolls it into view (works with the viewport's interactive-widget=resizes-content in the shell). */
.pa-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 15px 22px;scroll-padding-bottom:28px}
.pa-tabbar{flex:none;display:flex;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.pa-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 2px 7px;min-height:56px;text-decoration:none;color:var(--muted);font-size:10.5px;font-weight:600;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color .12s}
.pa-tab-ic{width:23px;height:23px}
.pa-tab.is-active{color:var(--primary)}
.pa-tab.is-active .pa-tab-ic{stroke-width:1.9}
.pa-tab:active{transform:scale(.95)}
.pa-tab-label{letter-spacing:-.02em;white-space:nowrap}
/* Unread count on the Messages tab — anchored to the icon, not the tab, so it doesn't shift the label. */
.pa-tab-icwrap{position:relative;display:inline-flex}
.pa-tab-badge{position:absolute;top:-4px;left:13px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger,#dc2626);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--surface)}
/* Content tweaks inside the app shell: cards go edge-to-edge-ish + the old page-head/greeting is gone */
.pa-scroll .portal{width:100%}
.pa-greet{margin:0 0 16px}
.pa-greet-hi{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:0}
.pa-greet-sub{font-size:13px;color:var(--muted);margin:3px 0 0}
.pa-page-title{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:0 0 14px}
/* Admin invoice: shareable no-login customer link */
.share-title{font-size:15px;font-weight:700;margin:0 0 4px}
.share-hint{font-size:13px;margin:0 0 12px}
.share-row{display:flex;gap:8px;align-items:center}
.share-row .input{flex:1;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.share-gen{margin-top:10px}
/* Job checklist (housekeeping rooms/tasks; generic punch list) */
.chk-bar{height:6px;border-radius:4px;background:var(--border);overflow:hidden;margin-bottom:14px}
.chk-bar-fill{display:block;height:100%;background:var(--primary);border-radius:4px;transition:width .25s}
.chk-bar-fill.is-full{background:var(--ok,#16a34a)}
.chk-list{list-style:none;margin:0 0 14px;padding:0}
.chk-item{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid var(--border)}
.chk-item:last-child{border-bottom:0}
.chk-toggle{display:flex;margin:0}
.chk-box{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;border:2px solid var(--border);border-radius:7px;background:var(--surface);color:#fff;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.chk-box.is-checked{background:var(--primary);border-color:var(--primary)}
.chk-box svg{width:15px;height:15px}
.chk-label{flex:1;font-size:15px;color:var(--text);min-width:0}
.chk-item.is-done .chk-label{text-decoration:line-through;color:var(--muted)}
.chk-del{margin-left:auto}
.chk-add{display:flex;gap:8px;align-items:center;margin-top:4px}
.chk-add .input{flex:1}
/* Support messaging (portal + admin inbox) — chat bubbles */
.portal-support-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.chat{display:flex;flex-direction:column;gap:10px;margin:4px 0 16px}
.chat-msg{max-width:82%;display:flex;flex-direction:column;gap:3px}
.chat-msg.is-me{align-self:flex-end;align-items:flex-end}
.chat-msg.is-them{align-self:flex-start;align-items:flex-start}
.chat-bubble{padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.42;word-break:break-word}
.chat-msg.is-me .chat-bubble{background:var(--primary);color:#fff;border-bottom-right-radius:5px}
.chat-msg.is-them .chat-bubble{background:var(--surface);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:5px}
.chat-meta{font-size:11px;color:var(--muted)}
.chat-compose{display:flex;gap:8px;align-items:flex-end}
.chat-compose .input{flex:1;resize:vertical;min-height:46px;font-family:inherit}
.support-inbox .support-row-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);padding:6px 0;min-height:44px}
.support-row-name{font-weight:600}
.support-row.is-unread .support-row-name{font-weight:800}
.support-row-when{margin-left:auto;font-size:12px}
.pa-scroll .portal-doc-head{margin-bottom:14px}

/* ---- ValleyKeep month tape chart (vk-bookings) -------------------------------
   Stays are table cells with a colspan, not positioned boxes: the strict nonce-CSP
   forbids inline style=, so there is no way to place a bar with grid-column or
   left/width. A wide chart scrolls inside .tape-wrap so the page body never does. */
.tape-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tape{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-size:12px}
.tape th,.tape td{border-bottom:1px solid var(--line,#e6e9ef);padding:0}
.tape-unit{position:sticky;left:0;z-index:2;background:var(--surface,#fff);text-align:left;
  padding:6px 10px;min-width:150px;border-right:1px solid var(--line,#e6e9ef)}
.tape-unit-name{display:block;font-weight:700;white-space:nowrap}
.tape-unit-sub{display:block;font-size:11px;color:var(--muted,#6b7280);white-space:nowrap}
.tape-day{width:28px;padding:4px 0;text-align:center;font-weight:600;color:var(--muted,#6b7280)}
.tape-dow{display:block;font-size:10px;text-transform:uppercase}
.tape-dnum{display:block;font-size:11px}
.tape-day.is-weekend,.tape-free.is-weekend{background:var(--surface-2,#f6f7f9)}
.tape-day.is-today,.tape-free.is-today{background:#eef4ff;box-shadow:inset 0 -2px 0 #2563eb}
.tape-free{height:32px;text-align:center}
.tape-add{display:block;line-height:32px;color:transparent;text-decoration:none;font-weight:700}
.tape-free:hover .tape-add{color:#2563eb}
.tape-add:focus{color:#2563eb;outline:2px solid #2563eb;outline-offset:-2px}
.tape-stay{padding:3px 2px}
.tape-bar{display:flex;align-items:center;gap:4px;justify-content:center;height:26px;padding:0 6px;
  border-radius:6px;font-weight:700;text-decoration:none;overflow:hidden;white-space:nowrap}
.tape-guest{overflow:hidden;text-overflow:ellipsis}
.tape-cont{opacity:.75;font-weight:400}
.tape-stay.is-confirmed .tape-bar{background:#dbeafe;color:#1e40af}
.tape-stay.is-hold .tape-bar{background:#fef3c7;color:#92400e}
.tape-stay.is-in .tape-bar{background:#d1fae5;color:#065f46}
.tape-stay.is-out .tape-bar{background:#eef1f5;color:#4b5563}
.tape-stay.is-inquiry .tape-bar{background:#f3f4f6;color:#6b7280}
.tape-key{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px}
.tape-swatch{display:inline-block;width:12px;height:12px;border-radius:3px}
.tape-swatch.is-confirmed{background:#dbeafe}
.tape-swatch.is-hold{background:#fef3c7}
.tape-swatch.is-in{background:#d1fae5}
.tape-swatch.is-out{background:#eef1f5}

/* ---- ValleyKeep mobile (vk-bookings) ---------------------------------------
   A month tape chart is a desktop idiom: on a phone it showed 7 of 31 days behind a
   sideways scroll, with the unit column eating half the width. Both presentations are
   rendered server-side and CSS picks one, so there is no JavaScript and no second request. */
.only-wide{display:none}
.only-narrow{display:block}
@media (min-width:768px){
  .only-wide{display:block}
  .only-narrow{display:none}
}

/* Status filters as one scrolling row of chips rather than a wrapping wall of links.
   Bare `.btn` has a transparent border and no background, so these read as plain text
   until they are given real chrome. */
.chiprow{display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chiprow .chip-sm{flex:0 0 auto; height:36px; padding:0 14px; font-size:.9rem; border-radius:999px}
.chiprow .chip-sm.is-active{background:var(--primary); border-color:var(--primary); color:#fff}