/* =====================================================================
 * Valley Studio — back-office skin. Lifted from the Claude Design export
 * "Valley Studio — Productions", scoped under body.vf-studio so it can't
 * collide with the public site or the existing kp-/adb- admin classes.
 *
 * Theming: the design is the existing Valley token system with the light
 * NEUTRALS warmed (paper). We override just those raw --vf-* neutrals under
 * body.vf-studio; the semantic tokens (--bg/--fg/--line/--accent) map to them
 * automatically, and body.vf-admin-dark (kit-tech-portal.css) already flips the
 * raw tokens for dark — so the design classes theme in both modes for free.
 * app.jsx toggles body.vf-studio on every /admin page (the onAdmin set).
 * ===================================================================== */
/* Studio uses the brand's standard light tokens — the off-white page bg
   (--vf-bg #F7F8FA) + white cards (--vf-surface), NOT the design export's warm
   cream. So we DON'T override the neutrals here; the default colors_and_type.css
   light values apply in light mode and body.vf-admin-dark flips them for dark. */

/* Restore sticky chrome: the global `html, body { overflow-x: hidden }` makes
   body a scroll container, which silently breaks `position: sticky` on the
   navbar. `overflow-x: clip` clips the full-bleed hero the same way WITHOUT
   establishing a scroll container, so the sticky nav sticks to the viewport. */
body.vf-studio { overflow-x: clip; }

/* ---- Shell helpers + containers (base rules the design relies on) ---- */
body.vf-studio .view { display: none; }
body.vf-studio .view.active { display: block; }
body.vf-studio .kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
body.vf-studio .row { display: flex; }
body.vf-studio .row.ic, body.vf-studio .ic { align-items: center; }
body.vf-studio .row.between, body.vf-studio .between { justify-content: space-between; }
body.vf-studio .row.wrap, body.vf-studio .wrap { flex-wrap: wrap; }
body.vf-studio .g1 { gap: 4px; }
body.vf-studio .g2 { gap: 8px; }
body.vf-studio .mt-1 { margin-top: 4px; }
body.vf-studio .mute { color: var(--fg3); }
body.vf-studio .text-xs { font-size: 11px; }
body.vf-studio .semi { font-weight: 600; }
body.vf-studio .still { position: relative; border-radius: 8px; overflow: hidden; }
body.vf-studio .seg { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 10px; }
body.vf-studio .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
body.vf-studio .page-head h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--fg1); }
body.vf-studio .page-head .sub { color: var(--fg3); font-size: 13px; margin-top: 4px; }
body.vf-studio .av.photo { background-size: cover; background-position: center; color: transparent; }
body.vf-studio .more { width: 100%; text-align: center; padding: 6px; font-size: 11px; color: var(--vf-ink-4); background: none; border: 0; cursor: pointer; border-radius: 8px; }
body.vf-studio .more:hover { background: var(--bg-elev); }

/* ---- Lifted, scoped design rules ---- */
body.vf-studio .navbar-row { display: flex; align-items: center; gap: 12px; padding: 0 32px; }
body.vf-studio .navbar-row-top { height: 73px; }
body.vf-studio .navbar-row-bottom { height: 48px; border-top: 1px solid rgba(230,232,238,0.7); }
body.vf-studio .navbar-spacer { flex: 1; min-width: 16px; }
/* Global "request a feature" button — sits just left of the nav pill so it's
   reachable from any admin page. */
body.vf-studio .navbar-feat { flex: none; width: 40px; height: 40px; margin-right: 10px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg2); cursor: pointer; box-shadow: 0 4px 14px rgba(10,15,26,0.10); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
body.vf-studio .navbar-feat:hover { color: var(--vf-blue); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10,15,26,0.16); }
/* Hamburger button (mobile only) + slide-in drawer. Desktop keeps the pill nav. */
body.vf-studio .navbar-burger { display: none; position: relative; flex: none; width: 42px; height: 42px; margin-left: auto; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg1); cursor: pointer; }
body.vf-studio .navbar-burger:active { transform: scale(0.96); }
body.vf-studio .navbar-burger-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 999px; background: var(--vf-blue); border: 1.5px solid var(--bg-elev); }
@media (max-width: 760px) {
  body.vf-studio .navbar-row { padding: 0 14px; gap: 8px; }
  body.vf-studio .navbar-spacer { display: none; }
  /* Collapse the whole pill nav into the hamburger drawer. */
  body.vf-studio .navbar-row .navbar-pill { display: none; }
  body.vf-studio .navbar-burger { display: inline-flex; }
}
body.vf-nav-open { overflow: hidden; }
body.vf-studio .navbar-drawer-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(10,15,26,0.42); animation: vf-drawer-fade 180ms var(--ease-out); }
@keyframes vf-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
body.vf-studio .navbar-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; background: var(--bg-elev); padding: 16px 18px calc(24px + env(safe-area-inset-bottom)); padding-top: calc(56px + env(safe-area-inset-top)); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 3px; animation: vf-drawer-in 200ms cubic-bezier(0.22,0.61,0.36,1); }
body.vf-studio .navbar-drawer-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: var(--bg-tint); color: var(--fg2); border-radius: 999px; cursor: pointer; }
body.vf-studio .navbar-drawer-close:hover { background: var(--line); color: var(--fg1); }
@keyframes vf-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
/* Mobile "simple mode" toggle at the top of the drawer + its switch. */
body.vf-studio .navbar-drawer-simple { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 2px 0 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-tint); font: inherit; cursor: pointer; }
body.vf-studio .navbar-drawer-simple-label { font-size: 14px; font-weight: 600; color: var(--fg1); }
body.vf-studio .navbar-drawer-switch { flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--line-strong, #cfd5df); position: relative; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .navbar-drawer-switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(8,12,22,0.3); transition: transform 160ms var(--st-ease); }
body.vf-studio .navbar-drawer-simple.is-on .navbar-drawer-switch { background: var(--vf-blue); }
body.vf-studio .navbar-drawer-simple.is-on .navbar-drawer-switch-knob { transform: translateX(18px); }
/* Full-page notepad (/admin/notepad) — the card + textarea fill the content area. */
body.vf-studio .notepad-page-card { display: flex; flex-direction: column; min-height: min(70vh, 640px); }
body.vf-studio .notepad-page-card .dash-notepad-ta { min-height: 280px; }
body.vf-studio .navbar-drawer-actions { display: flex; gap: 8px; margin-bottom: 10px; }
body.vf-studio .navbar-drawer-actions button { flex: 1; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-tint); font: inherit; font-size: 13px; font-weight: 600; color: var(--fg1); cursor: pointer; }
body.vf-studio .navbar-drawer-actions button:active { transform: scale(0.97); }
body.vf-studio .navbar-drawer-link { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--fg1); text-decoration: none; }
body.vf-studio .navbar-drawer-link:active { background: var(--bg-tint); }
body.vf-studio .navbar-drawer-link.active { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .navbar-drawer-subs { display: flex; flex-direction: column; margin: -1px 0 4px; padding-left: 12px; border-left: 2px solid var(--line); margin-left: 12px; }
body.vf-studio .navbar-drawer-sub { padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--fg2); text-decoration: none; }
body.vf-studio .navbar-drawer-sub:active { background: var(--bg-tint); }
body.vf-studio .navbar-drawer-sub.active { color: var(--vf-blue); font-weight: 600; }
body.vf-studio .navbar-brand img { height: 32px; width: auto; display: block; }
body.vf-studio .navbar-brand-divider { width: 1px; height: 18px; background: var(--line-strong); }
/* "Studio" suffix is static — no hover expand/colour shift; the brand stays clickable to the dashboard. */
body.vf-studio .navbar-brand-suffix { font-size: 16px; font-weight: 600; color: var(--fg2); letter-spacing: -0.01em; }
body.vf-studio .navbar-search:hover { border-color: var(--line-strong); }
body.vf-studio .navbar-search .ico { width: 14px; height: 14px; display: inline-flex; color: var(--fg4); }
body.vf-studio .navbar-search .ico svg { width: 14px; height: 14px; display: block; }
body.vf-studio .navbar-search-label { flex: 1; text-align: left; color: var(--fg4); }
body.vf-studio .navbar-search kbd { font-family: var(--font-mono); font-size: 10px; color: var(--fg3); background: var(--bg-elev); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); line-height: 1; }
body.vf-studio .navbar-icon:hover { background: var(--bg-tint); }
body.vf-studio .navbar-icon-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 999px; background: var(--vf-blue); border: 1.5px solid var(--bg-elev); }
body.vf-studio .navbar-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--vf-blue); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; flex: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.85), 0 1px 2px rgba(9,94,223,0.25); }
body.vf-studio .navbar-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--fg2); text-decoration: none; white-space: nowrap; transition: color 140ms, background 140ms; }
body.vf-studio .navbar-link:hover { color: var(--fg1); }
body.vf-studio .navbar-link.active { color: var(--fg1); font-weight: 600; background: #fff; box-shadow: 0 1px 3px rgba(10,15,26,0.08); }
/* Messages = the blue CTA in the pill (was :last-child, but the bell now sits
   last, so target it explicitly). Slight blue tint at rest, full blue active. */
body.vf-studio .navbar-pill .navbar-cta { background: rgba(9,94,223,0.10); color: var(--vf-blue); display: inline-flex; align-items: center; gap: 6px; }
body.vf-studio .navbar-cta-ico { flex: none; display: block; }
body.vf-studio .navbar-pill .navbar-cta:hover { background: rgba(9,94,223,0.16); color: var(--vf-blue); }
body.vf-studio .navbar-pill .navbar-cta.active { background: var(--vf-blue); color: #fff; box-shadow: 0 1px 2px rgba(9,94,223,0.3), inset 0 1px 0 rgba(255,255,255,0.25); }
body.vf-studio .navbar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px; background: rgba(10,15,26,0.08); color: var(--fg2); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
body.vf-studio .navbar-link.active .navbar-badge { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .navbar-pill .navbar-cta .navbar-badge { background: rgba(9,94,223,0.18); color: var(--vf-blue); }
body.vf-studio .navbar-pill .navbar-cta.active .navbar-badge { background: rgba(255,255,255,0.25); color: #fff; }
body.vf-studio .navbar-crumb b { color: var(--fg1); font-weight: 600; }
body.vf-studio .navbar-crumb a:hover { color: var(--vf-blue); }
body.vf-studio .navbar-title { flex: 1; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--fg1); }
body.vf-studio .navbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
body.vf-studio .btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
body.vf-studio .btn.lg { padding: 11px 18px; font-size: 14px; border-radius: 10px; }
body.vf-studio .btn.primary { background: var(--vf-blue); color: #fff; border-color: var(--vf-blue); box-shadow: 0 1px 2px rgba(9,94,223,0.2); }
body.vf-studio .btn.primary:hover { background: var(--vf-blue-600); box-shadow: 0 2px 8px rgba(9,94,223,0.28); }
/* Dark: --vf-blue-600 now resolves to the lighter vf-blue-400, which would make
   the primary hover paler + lower-contrast than its resting state (inverted
   affordance). Darken the hover instead so white text stays legible. */
body.vf-studio.vf-admin-dark .btn.primary:hover { background: #1F66C9; }
body.vf-studio .btn.secondary { background: var(--bg-elev); border-color: var(--line-strong); color: var(--fg1); }
body.vf-studio .btn.secondary:hover { background: var(--bg-tint); }
body.vf-studio .btn.ghost { color: var(--fg2); }
body.vf-studio .btn.ghost:hover { background: var(--bg-tint); }
body.vf-studio .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--bg-tint); color: var(--fg2); white-space: nowrap; cursor: default; }
body.vf-studio .chip.outline { background: transparent; border: 1px solid var(--line); color: var(--fg2); }
body.vf-studio .chip.blue { background: var(--accent-soft); color: var(--vf-blue); font-weight: 600; }
body.vf-studio .chip.solid-blue { background: var(--vf-blue); color: #fff; font-weight: 600; }
body.vf-studio .chip.success { background: var(--success-soft); color: var(--success); font-weight: 600; }
body.vf-studio .chip.warn { background: var(--warning-soft); color: var(--warning-text); font-weight: 600; }
body.vf-studio .chip.danger { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
body.vf-studio .status .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: 0.85; }
/* Single source of truth for .status.* tones — a later duplicate block used to
   shadow these with drifted values; these are the live values, consolidated. */
body.vf-studio .status.todo-pre { background: #F4ECE0; color: #876234; }
body.vf-studio .status.todo-prod { background: #F0E0D2; color: #874A24; }
body.vf-studio .status.ip-blue { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .status.ip-green { background: #E2EFE8; color: #1B6E3A; }
body.vf-studio .status.complete-green { background: #1F8E4D; color: #fff; }
body.vf-studio .status.complete-gray { background: #DEDCD7; color: #4A4742; }
body.vf-studio .status.complete-red { background: var(--danger-soft); color: var(--danger-text); }
body.vf-studio .av.sm { width: 24px; height: 24px; font-size: 10px; border-width: 1.5px; }
body.vf-studio .av.lg { width: 44px; height: 44px; font-size: 14px; }
body.vf-studio .av.xl { width: 72px; height: 72px; font-size: 22px; }
body.vf-studio .av.blue { background: var(--vf-blue); color: #fff; }
body.vf-studio .av.bg-1 { background: #E1ECFB; color: #0850BF; }
body.vf-studio .av.bg-2 { background: #FBEFD8; color: #C97A0A; }
body.vf-studio .av.bg-3 { background: #E4F4EC; color: #1F7D44; }
body.vf-studio .av.bg-4 { background: #F5E2D6; color: #A0552A; }
body.vf-studio .av.bg-5 { background: #ECE3F6; color: #6E3DBF; }
/* Dark: the bright pastels glare as light circles — use low-alpha tints + lighter text. */
body.vf-studio.vf-admin-dark .av.bg-1 { background: rgba(42,120,234,0.22); color: #9BBEF5; }
body.vf-studio.vf-admin-dark .av.bg-2 { background: rgba(224,176,33,0.20); color: #E8C766; }
body.vf-studio.vf-admin-dark .av.bg-3 { background: rgba(47,162,91,0.22); color: #7AD3A0; }
body.vf-studio.vf-admin-dark .av.bg-4 { background: rgba(200,90,48,0.22); color: #E0A07F; }
body.vf-studio.vf-admin-dark .av.bg-5 { background: rgba(124,77,224,0.24); color: #C3A8F0; }
body.vf-studio .av-stack { display: inline-flex; }
body.vf-studio .av-stack > * + * { margin-left: -6px; }
body.vf-studio .av.photo { color: transparent; background-size: cover; background-position: center; background-repeat: no-repeat; text-indent: -9999px; }
body.vf-studio .av.photo.mp { background-image: url("bde4d973-a8b4-4a2d-a89f-283560372375"); }
body.vf-studio .av.photo.pd { background-image: url("b4763a6b-54a2-44db-9812-0f7b60a82183"); }
body.vf-studio .av.photo.vp { background-image: url("871ffcad-64a9-45e8-ac06-476c411eea9e"); }
body.vf-studio .card.tight { padding: 14px; border-radius: 12px; }
body.vf-studio .card.flush { padding: 0; overflow: hidden; }
body.vf-studio .tabs.pill .tab { padding: 7px 14px; border-radius: 8px; border-bottom: none; margin-bottom: 0; color: var(--fg3); white-space: nowrap; }
body.vf-studio .tabs.pill .tab.active { background: var(--bg-elev); color: var(--fg1); box-shadow: 0 1px 2px rgba(10,15,26,0.06), inset 0 0 0 1px rgba(10,15,26,0.04); border-bottom: none; }
body.vf-studio .icn svg { display: block; }
body.vf-studio .tab { padding: 8px 14px; font-size: 13px; color: var(--fg3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-fast) var(--ease-soft), border-bottom-color var(--dur-fast) var(--ease-soft); }
body.vf-studio .tab:hover { color: var(--fg1); }
body.vf-studio .tab.active { color: var(--vf-blue); border-bottom-color: var(--vf-blue); font-weight: 600; }
body.vf-studio .tab .count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; background: var(--bg-tint); color: var(--fg3); font-size: 10px; padding: 1px 7px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.vf-studio .tab.active .count { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .bar > div { height: 100%; border-radius: 999px; background: var(--vf-blue); }
body.vf-studio .seg .btn { background: transparent; border: 0; }
body.vf-studio .seg .btn.active { background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
body.vf-studio .mute { color: var(--fg3); }
body.vf-studio .text-xs { font-size: 11px; }
body.vf-studio .semi { font-weight: 600; }
body.vf-studio .ic { align-items: center; }
body.vf-studio .between { justify-content: space-between; }
body.vf-studio .g1 { gap: 4px; }
body.vf-studio .g2 { gap: 8px; }
body.vf-studio .mt-1 { margin-top: 4px; }
body.vf-studio .page-head h2 { margin: 0; }
body.vf-studio .page-head .sub { color: var(--fg3); font-size: 13px; margin-top: 4px; }
body.vf-studio .table-row { display: grid; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: center; font-size: 13px; }
body.vf-studio .table-row:hover { background: var(--bg-tint); }
body.vf-studio .table-row:last-child { border-bottom: none; }
body.vf-studio .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
body.vf-studio .dot-ok { background: #1f9d55; box-shadow: 0 0 0 3px rgba(31,157,85,0.15); }
body.vf-studio body[data-density="compact"] .table-row { padding-top: 8px; padding-bottom: 8px; font-size: 12px; }
body.vf-studio .view-pill.on .ct, body.vf-studio .space-row.active .ct, body.vf-studio .cd-tabs button.on .count { display: inline-flex; margin-left: 6px; }
body.vf-studio .still::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.7; pointer-events: none; }
body.vf-studio .still.warm { background: linear-gradient(135deg, oklch(0.34 0.05 50), oklch(0.18 0.04 30)); }
body.vf-studio .still.cool { background: linear-gradient(135deg, oklch(0.36 0.06 240), oklch(0.18 0.04 250)); }
body.vf-studio .still.green { background: linear-gradient(135deg, oklch(0.38 0.05 150), oklch(0.20 0.03 150)); }
body.vf-studio.vf-admin-dark .navbar-row-bottom { border-top-color: rgba(255,255,255,0.05); }
body.vf-studio.vf-admin-dark .navbar-brand-divider { background: rgba(255,255,255,0.14); }
body.vf-studio.vf-admin-dark .navbar-brand img { filter: brightness(0) invert(1); }
body.vf-studio.vf-admin-dark .navbar-pill { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
body.vf-studio.vf-admin-dark .navbar-link { color: var(--vf-snow-2); }
body.vf-studio.vf-admin-dark .navbar-link:hover { color: #fff; }
body.vf-studio.vf-admin-dark .navbar-link.active { background: rgba(255,255,255,0.10); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06); }
body.vf-studio.vf-admin-dark .navbar-badge { background: rgba(255,255,255,0.10); color: var(--vf-snow-2); }
body.vf-studio.vf-admin-dark .navbar-pill .navbar-link:last-child { background: rgba(9,94,223,0.20); color: var(--vf-blue-300); }
body.vf-studio.vf-admin-dark .navbar-pill .navbar-link:last-child:hover { background: rgba(9,94,223,0.28); }
body.vf-studio.vf-admin-dark .navbar-icon:hover { background: rgba(255,255,255,0.06); }
body.vf-studio.vf-admin-dark .navbar-search { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: var(--vf-snow-3); }
body.vf-studio.vf-admin-dark .navbar-search kbd { background: rgba(255,255,255,0.06); color: var(--vf-snow-2); border-color: rgba(255,255,255,0.08); }
body.vf-studio.vf-admin-dark .seg .btn.active { background: var(--vf-night-3); border-color: var(--vf-line-dark-2); }
body.vf-studio.vf-admin-dark .table-head { background: var(--vf-night-3); color: var(--vf-snow-3); }
body.vf-studio.vf-admin-dark .table-row:hover { background: rgba(255,255,255,0.03); }
body.vf-studio.vf-admin-dark .bar { background: rgba(255,255,255,0.08); }
body.vf-studio.vf-admin-dark .chip.outline { background: transparent; border-color: rgba(255,255,255,0.12); color: var(--vf-snow-2); }
body.vf-studio.vf-admin-dark .chip.blue { background: rgba(9,94,223,0.20); color: var(--vf-blue-300); }
body.vf-studio.vf-admin-dark .chip.success { background: rgba(31,142,77,0.18); color: #6BD394; }
body.vf-studio.vf-admin-dark .chip.warn { background: rgba(201,122,10,0.18); color: #E8B864; }
body.vf-studio.vf-admin-dark .chip.danger { background: rgba(215,38,61,0.18); color: #F08A95; }
body.vf-studio.vf-admin-dark .status { background: rgba(255,255,255,0.06); color: var(--vf-snow-2); }
body.vf-studio.vf-admin-dark .status.todo-pre { background: rgba(201,122,10,0.18); color: #E5BC74; }
body.vf-studio.vf-admin-dark .status.todo-prod { background: rgba(160,85,42,0.22); color: #F0A985; }
body.vf-studio.vf-admin-dark .status.ip-blue { background: rgba(9,94,223,0.20); color: var(--vf-blue-300); }
body.vf-studio.vf-admin-dark .status.ip-green { background: rgba(31,142,77,0.18); color: #6BD394; }
body.vf-studio.vf-admin-dark .status.complete-green { background: #1F8E4D; color: #fff; }
body.vf-studio.vf-admin-dark .status.complete-gray { background: rgba(255,255,255,0.10); color: var(--vf-snow-3); }
body.vf-studio.vf-admin-dark .status.complete-red { background: rgba(215,38,61,0.20); color: #F08A95; }
body.vf-studio.vf-admin-dark .btn.secondary:hover { background: var(--vf-night-3); }
body.vf-studio.vf-admin-dark .btn.ghost { color: var(--vf-snow-2); }
body.vf-studio.vf-admin-dark .btn.ghost:hover { background: rgba(255,255,255,0.06); }
body.vf-studio .view.active { display: block; }
body.vf-studio .kcol { min-width: 280px; width: 280px; background: var(--bg-tint); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
body.vf-studio .kcol-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
body.vf-studio .kcard { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; box-shadow: var(--shadow-xs); text-decoration: none; color: inherit; transition: box-shadow 140ms, transform 140ms; }
body.vf-studio .kcard:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
body.vf-studio .kcard .still { height: 80px; padding: 8px; }
body.vf-studio .kcol .more { text-align: center; font-size: 11px; color: var(--fg4); padding: 6px; cursor: pointer; border-radius: 8px; }
body.vf-studio .kcol .more:hover { background: var(--bg-elev); color: var(--fg2); }
body.vf-studio .prod-list-head { display: grid; grid-template-columns: 60px 1.7fr 1fr 1.1fr 0.9fr 130px 130px; gap: 14px; padding: 10px 16px; background: var(--bg-tint); border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg4); }
body.vf-studio .prod-list-row { display: grid; grid-template-columns: 60px 1.7fr 1fr 1.1fr 0.9fr 130px 130px; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: center; font-size: 13px; text-decoration: none; color: inherit; cursor: pointer; transition: background 100ms; }
body.vf-studio .prod-list-row:hover { background: var(--bg-tint); }
body.vf-studio .prod-list-row:last-child { border-bottom: none; }
body.vf-studio .prod-list-row .thumb { width: 60px; height: 36px; border-radius: 6px; overflow: hidden; }
body.vf-studio .prod-list-row .ttl { font-weight: 600; }
body.vf-studio .prod-list-row .sub { font-size: 11px; color: var(--fg4); margin-top: 2px; }
body.vf-studio .prod-list-row .stage-cell { color: var(--fg2); font-size: 12px; }
body.vf-studio .prod-list-row .dates { font-family: var(--font-mono); font-size: 11px; color: var(--fg3); }
body.vf-studio .prod-list-row .crew { display: inline-flex; }
body.vf-studio .prod-list-row .crew .av { width: 22px; height: 22px; font-size: 9px; }
body.vf-studio .prod-list-group:first-of-type { border-top: 0; padding-top: 14px; }
body.vf-studio .prod-list-group .ct { font-weight: 500; color: var(--fg4); }
body.vf-studio .yg-months { display: grid; grid-template-columns: repeat(12, 1fr); height: 28px; background: var(--bg-tint); border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg3); grid-column: 2; }
body.vf-studio .yg-months > div { padding: 7px 0; text-align: center; border-right: 1px solid var(--line); }
body.vf-studio .yg-months > div:last-child { border-right: 0; }
body.vf-studio .yg-corner { background: var(--bg-tint); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 28px; }
body.vf-studio .yg-year { height: 56px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-tint); display: flex; align-items: center; justify-content: center; font: 600 13px var(--font-mono); color: var(--fg3); letter-spacing: 0.06em; }
body.vf-studio .yg-row { position: relative; height: 56px; border-bottom: 1px solid var(--line); background: linear-gradient(to right, transparent calc(100%/12 - 1px), var(--line) calc(100%/12 - 1px), var(--line) calc(100%/12), transparent calc(100%/12)); background-size: calc(100%*1/12) 100%; }
body.vf-studio .yg-row:last-child { border-bottom: 0; }
body.vf-studio .yg-bar { position: absolute; top: 12px; height: 32px; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-decoration: none; transition: transform 140ms, box-shadow 140ms; }
body.vf-studio .yg-bar:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10,15,26,0.18); z-index: 3; }
body.vf-studio .yg-bar.prod { background:#A0552A; }
body.vf-studio .yg-bar.ingest { background: var(--vf-blue); opacity:0.88; }
body.vf-studio .yg-bar.revs { background: var(--vf-blue); }
body.vf-studio .yg-bar.signoff { background:#1F8E4D; }
body.vf-studio .yg-bar.live { background:#DEDCD7; color: var(--fg1); border:1px solid var(--line-strong); }
body.vf-studio .yg-bar.archive { background: var(--fg4); }
body.vf-studio .yg-bar.cancelled { background: transparent; color: var(--danger); border:1px dashed var(--danger); }
body.vf-studio .yg-today::after { content: "TODAY"; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font: 700 9px var(--font-mono); letter-spacing: 0.1em; background: var(--danger); color: #fff; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }

/* The Studio navbar is sticky (in normal flow), unlike the old fixed kp-topbar
   — so drop the 84px top clearance the admin mains reserved for the fixed bar. */
body.vf-studio .kit-portal { padding-top: 0; }
body.vf-studio .kit-portal.kit-portal-dashboard { padding-top: 0; }
/* Search pill icon sizing (the design's .navbar-search .ico). */
body.vf-studio .navbar-search .ico { display: inline-flex; }
body.vf-studio .navbar-search .ico svg { display: block; }

/* ---- Page width: standard (1080 centred, default) vs full (account setting) --
 * Every back-office page shares the kp-content → kp-content-inner wrapper, so
 * unsetting the inner max-width here makes them all fill the viewport uniformly.
 * Side padding lifts to 32px in full mode so content lines up under the nav. */
body.vf-studio.vf-admin-wide .kp-content-inner,
body.vf-studio.vf-admin-wide .dash-hero-inner { max-width: none; }
body.vf-studio.vf-admin-wide .kp-content { padding-left: 32px; padding-right: 32px; }
body.vf-studio.vf-admin-wide .dash-hero-inner { padding-left: 32px; padding-right: 32px; }
@media (max-width: 760px) {
  body.vf-studio.vf-admin-wide .kp-content { padding-left: 16px; padding-right: 16px; }
}
/* Productions now wears the shared Studio chrome (sticky topbar + kp-content),
   so neutralise its legacy standalone padding (styles.css .quotes-admin had a
   120px top + 28px inline gutter for an old fixed bar) — otherwise it double-
   gutters and sits wider than every other page. */
body.vf-studio .quotes-admin { padding-top: 0; padding-inline: 0; }

/* ---- Productions screen extras (page-head, board drop-state, timeline) ---- */
body.vf-studio .content { padding: 24px 32px 64px; }
body.vf-studio .h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.06; color: var(--fg1); margin: 0; }
body.vf-studio .text-sm { font-size: 13px; }
body.vf-studio .mt-2 { margin-top: 8px; }
body.vf-studio .kcol.is-over { outline: 2px dashed var(--accent); outline-offset: -3px; background: var(--accent-soft-2); }
body.vf-studio .kcard.is-dragging { opacity: 0.5; }
/* initial-avatar fallback (no headshot yet) reads on the neutral chip */
body.vf-studio .av.photo { color: transparent; }

body.vf-studio .st-timeline { display: flex; flex-direction: column; gap: 20px; }
body.vf-studio .st-tl-month { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg4); margin-bottom: 8px; }
body.vf-studio .st-tl-rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-elev); }
body.vf-studio .st-tl-row { display: grid; grid-template-columns: 168px minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
body.vf-studio .st-tl-row:last-child { border-bottom: 0; }
body.vf-studio .st-tl-row:hover { background: var(--bg-tint); }
body.vf-studio .st-tl-title { font-size: 13px; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .st-tl-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .st-tl-date { justify-self: end; white-space: nowrap; }
@media (max-width: 760px) {
  body.vf-studio .content { padding: 18px 16px 56px; }
  body.vf-studio .st-tl-row { grid-template-columns: 1fr auto; }
  body.vf-studio .st-tl-sub { display: none; }
}

/* ---- Base rules dropped during the design lift (modifiers survived, bases didn't) ---- */
body.vf-studio .av { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--bg-tint); color: var(--fg1); font-size: 11px; font-weight: 600; flex-shrink: 0; border: 1.5px solid var(--bg-elev); overflow: hidden; }
body.vf-studio .status { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--bg-tint); color: var(--fg2); }
body.vf-studio .ver-tag { display: inline-flex; align-items: center; font: 600 10.5px var(--font-mono); letter-spacing: 0.04em; padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio.vf-admin-dark .av { background: rgba(255,255,255,0.08); color: var(--vf-snow-2); border-color: var(--vf-ink-1); }

/* ===================================================================
 * Navbar container bases (dropped during the design lift) + the
 * hover-reveal sub-menus (Rentals → Equipment/Kit Tech/Purchase/
 * Consignments; Resources → CRM/Crew). The link/row/brand-suffix/badge
 * rules survived the lift; the single-class container bases below did not.
 * =================================================================== */
/* Bar matches the public rentals nav (.nav.is-light) + the portal .kp-topbar exactly. */
body.vf-studio .navbar { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, rgba(247,248,250,0.74) 0%, rgba(247,248,250,0.58) 100%); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid rgba(10,15,26,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 6px 20px rgba(10,15,26,0.06); }
body.vf-studio .navbar-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; padding: 4px 0; color: inherit; }
body.vf-studio .navbar-search { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 12px; border-radius: 999px; background: var(--bg-tint); border: 1px solid var(--line); font: inherit; font-size: 13px; color: var(--fg4); width: 280px; cursor: text; transition: border-color 140ms, background 140ms; }
/* Pill matches .kp-portaltabs — flat, no inner highlight / blur. */
body.vf-studio .navbar-pill { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px; border-radius: 999px; background: rgba(10,15,26,0.06); border: 1px solid rgba(10,15,26,0.10); }
/* Quick-action icon buttons inside the pill (+Task, Request a feature) — sit at the left of Dashboard, styled like the notification bell. */
body.vf-studio .navbar-pillbtn { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; border: 0; background: transparent; color: var(--fg2); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .navbar-pillbtn:hover { background: rgba(10,15,26,0.07); color: var(--vf-blue); }
body.vf-studio.vf-admin-dark .navbar-pillbtn:hover { background: rgba(255,255,255,0.08); }
body.vf-studio .navbar-pillbtn:active { transform: scale(0.92); }
/* Dashboard home icon lives in the pill beside +Task / +Feature; it's a link, so
   kill the underline and give it an active tint when you're on /admin. */
body.vf-studio .navbar-pillbtn-home { text-decoration: none; }
body.vf-studio .navbar-pillbtn.is-active { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio.vf-admin-dark .navbar-pillbtn.is-active { background: rgba(80,150,240,0.18); color: #8FB8F5; }
body.vf-studio .navbar-feat-plus { position: absolute; top: 2px; right: 2px; min-width: 12px; height: 12px; padding: 0 1px; display: grid; place-items: center; border-radius: 999px; background: var(--vf-blue); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; pointer-events: none; }
body.vf-studio .navbar-pilldiv { flex: none; width: 1px; height: 18px; background: rgba(10,15,26,0.12); margin: 0 3px; }
body.vf-studio.vf-admin-dark .navbar-pilldiv { background: rgba(255,255,255,0.14); }
/* Messages (last pill) gets the resting blue-CTA tint. */
body.vf-studio .navbar-pill > .navbar-link:last-child { background: var(--accent-soft); color: var(--vf-blue); font-weight: 600; }

/* Hover-reveal sub-menu. Parent pills with subs wrap in .navbar-item; on hover
 * a frosted menu card (same glass + radii as the bar) fades + lifts in. Anchored
 * to the item's right edge so right-side pills (Resources) stay on screen. */
body.vf-studio .navbar-item { position: relative; display: inline-flex; }
body.vf-studio .navbar-flyout { position: absolute; top: calc(100% + 9px); right: 0; left: auto; transform-origin: top right; display: flex; flex-direction: column; gap: 1px; min-width: 186px; padding: 6px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.93) 0%, rgba(247,248,250,0.86) 100%); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid rgba(10,15,26,0.08); box-shadow: 0 20px 46px rgba(10,15,26,0.16), inset 0 1px 0 rgba(255,255,255,0.75); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px) scale(0.97); transition: opacity 180ms var(--ease-out), transform 260ms var(--st-ease), visibility 0s linear 180ms; z-index: 40; }
body.vf-studio .navbar-item:hover > .navbar-flyout,
body.vf-studio .navbar-item:focus-within > .navbar-flyout { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
/* invisible hover bridge across the gap so the flyout doesn't drop */
body.vf-studio .navbar-flyout::before { content: ''; position: absolute; left: 0; right: 0; top: -11px; height: 11px; }
body.vf-studio .navbar-sublink { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--fg2); background: transparent; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .navbar-sublink:hover { background: var(--bg-tint); color: var(--fg1); }
body.vf-studio .navbar-sublink.active { background: var(--accent-soft); color: var(--vf-blue); font-weight: 600; }

/* ── Dark mode, refined (Studio-scoped) ──────────────────────────────────────
   The shared dark palette bottoms out near pure black (--vf-night #07080C) with
   cards only a hair lighter (#0E1118), which reads flat and murky. Lift the base
   off black and open a clear elevation ladder — page < card < hover — with
   crisper hairlines, so surfaces separate cleanly. Overrides both the semantic
   (--bg/--fg/--line) and raw (--vf-*) tokens, so every Studio class follows. */
body.vf-studio.vf-admin-dark {
  --bg: #0B0D12;            --vf-bg: #0B0D12;
  --bg-elev: #14171E;       --vf-surface: #14171E;      --surface: #14171E;
  --bg-tint: #1C212B;       --vf-bg-tint: #1C212B;
  --line: #272D39;          --vf-line: #272D39;
  --line-strong: #353D4C;   --vf-line-strong: #353D4C;
  --fg1: #F4F6FA;           --vf-ink: #F4F6FA;
  --fg2: #C8CFDB;           --vf-ink-2: #C8CFDB;
  --fg3: #AAB3C4;           --vf-ink-3: #AAB3C4;
  --fg4: #8E97AB;           --vf-ink-4: #8E97AB;
  --accent-soft: rgba(58,124,233,0.18);
  /* Lift the raw brand blue in dark mode so the ~260 var(--vf-blue) surfaces
     brighten in lockstep with --accent (which already lifts to vf-blue-500),
     killing the two-tone-blue split between tokenised + raw-blue elements. */
  --vf-blue: var(--vf-blue-500);
  --vf-blue-600: var(--vf-blue-400);
  --vf-blue-700: var(--vf-blue-300);
  background: #0B0D12;
}

/* Dark mode: frosted-dark glass bar (more translucent so the wallpaper blurs
   through) + sub-pills that inherit the new tokens. */
body.vf-studio.vf-admin-dark .navbar { background: linear-gradient(180deg, rgba(19,23,30,0.78) 0%, rgba(13,16,22,0.64) 100%); border-bottom-color: rgba(255,255,255,0.07); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 26px rgba(0,0,0,0.5); }
body.vf-studio.vf-admin-dark .navbar-search { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
body.vf-studio.vf-admin-dark .navbar-flyout { background: linear-gradient(180deg, rgba(26,31,42,0.94) 0%, rgba(18,22,30,0.9) 100%); border-color: rgba(255,255,255,0.1); box-shadow: 0 20px 46px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); }
body.vf-studio.vf-admin-dark .navbar-sublink { background: transparent; color: var(--vf-snow-2); box-shadow: none; }
body.vf-studio.vf-admin-dark .navbar-sublink:hover { background: rgba(255,255,255,0.08); color: #fff; }
body.vf-studio.vf-admin-dark .navbar-sublink.active { background: rgba(9,94,223,0.24); color: var(--vf-blue-300); }

/* ---- ⌘K command palette ---- */
body.vf-studio .kp-cmdk-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; background: rgba(10,15,26,0.34); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
body.vf-studio .kp-cmdk { width: min(560px, 100%); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 64px rgba(10,15,26,0.28); overflow: hidden; }
body.vf-studio .kp-cmdk-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
body.vf-studio .kp-cmdk-search svg { color: var(--fg4); flex: none; }
body.vf-studio .kp-cmdk-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--fg1); outline: none; }
body.vf-studio .kp-cmdk-search kbd { font-family: var(--font-mono); font-size: 10px; color: var(--fg3); background: var(--bg-tint); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); line-height: 1; flex: none; }
body.vf-studio .kp-cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
body.vf-studio .kp-cmdk-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 10px; cursor: pointer; color: var(--fg1); font: inherit; font-size: 14px; }
body.vf-studio .kp-cmdk-item.active { background: var(--accent-soft); }
body.vf-studio .kp-cmdk-item-ic { flex: none; display: inline-flex; color: var(--fg3); }
body.vf-studio .kp-cmdk-item-ic svg { width: 17px; height: 17px; }
body.vf-studio .kp-cmdk-item.active .kp-cmdk-item-ic { color: var(--vf-blue); }
body.vf-studio .kp-cmdk-item-label { font-weight: 500; flex: 1 1 auto; }
body.vf-studio .kp-cmdk-item-hint { font-size: 11px; color: var(--fg4); white-space: nowrap; }
body.vf-studio .kp-cmdk-item.active .kp-cmdk-item-hint { color: var(--vf-blue); }
body.vf-studio .kp-cmdk-empty { padding: 22px; text-align: center; color: var(--fg4); font-size: 13px; }

/* ===================================================================
 * Studio footer (drafts.valley.rentals style) — brand block + 4 link
 * columns + a bottom bar with the light/dark toggle and signed-in name.
 * =================================================================== */
/* Sticky footer: make the admin page a full-height flex column so the footer
   sits at the bottom of the viewport even when a page is light on content
   (instead of floating up with the same 64px gap above it). */
body.vf-studio main.page.active { display: flex; flex-direction: column; min-height: 100vh; }
body.vf-studio main.page.active > .vf-footer { margin-top: auto; }
body.vf-studio .vf-footer { background: var(--bg-elev); border-top: 1px solid var(--line); margin-top: 64px; padding: 56px 32px 24px; }
body.vf-studio .vf-footer-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; gap: 64px; }
body.vf-studio .vf-footer-tag { margin: 16px 0 0; color: var(--fg2); font-size: 13px; max-width: 240px; line-height: 1.5; }
body.vf-studio .vf-footer-meta { margin-top: 20px; display: flex; align-items: center; gap: 8px; color: var(--fg3); font-size: 11px; font-family: var(--font-mono); }
body.vf-studio .vf-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
body.vf-studio .vf-footer-col { display: flex; flex-direction: column; gap: 10px; }
body.vf-studio .vf-footer-h { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); margin-bottom: 4px; }
body.vf-studio .vf-footer-col a { font-size: 13px; color: var(--fg2); text-decoration: none; transition: color 140ms; display: inline-flex; align-items: center; gap: 4px; }
body.vf-studio .vf-footer-col a:hover { color: var(--vf-blue); }
body.vf-studio .vf-footer-soon { font-size: 13px; color: var(--fg4); cursor: default; }
body.vf-studio .vf-footer-signout { color: var(--fg3) !important; }
body.vf-studio .vf-footer-signout:hover { color: var(--danger-text) !important; }
body.vf-studio .vf-footer-bottom { max-width: 1080px; margin: 48px auto 0; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--fg3); flex-wrap: wrap; }
body.vf-studio .vf-footer-spacer { flex: 1; min-width: 12px; }
body.vf-studio .vf-footer-loggedin strong { color: var(--fg1); font-weight: 600; }
body.vf-studio .vf-footer-appearance { color: var(--fg3); text-decoration: none; transition: color 140ms; }
body.vf-studio .vf-footer-appearance:hover { color: var(--vf-blue); }

/* WeWork gallery (Resources → WeWork) */
body.vf-studio .ww-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
/* WeWork desk access — codes + monthly usage + book button */
body.vf-studio .ww-access { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); }
body.vf-studio .ww-access-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body.vf-studio .ww-access-headright { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
/* Monthly-reset countdown — calm black by default, escalating as it nears. */
body.vf-studio .ww-reset { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--fg2); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.vf-studio .ww-reset svg { opacity: 0.7; }
body.vf-studio .ww-reset-yellow { color: #B26A00; }
body.vf-studio .ww-reset-orange { color: #C2410C; }
body.vf-studio .ww-reset-red { color: #DC2626; animation: ww-reset-pulse 1s ease-in-out infinite; }
@keyframes ww-reset-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
body.vf-studio .ww-access-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--fg1); }
body.vf-studio .ww-book-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; background: var(--vf-blue); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .ww-book-btn:hover { filter: brightness(1.07); }
body.vf-studio .ww-book-btn:active { transform: translateY(1px); }
body.vf-studio .ww-access-sub { margin: 6px 0 12px; font-size: 12px; color: var(--fg4); }
body.vf-studio .ww-code-rows { display: flex; flex-direction: column; gap: 2px; }
body.vf-studio .ww-code-empty { font-size: 13px; color: var(--fg4); padding: 8px 0; }
body.vf-studio .ww-code-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
body.vf-studio .ww-code-row:first-child { border-top: 0; }
body.vf-studio .ww-code-name { flex: 0 0 96px; font-size: 14px; font-weight: 700; color: var(--fg1); line-height: 1.2; }
body.vf-studio .ww-code-val { flex: 1 1 auto; min-width: 0; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--fg1); background: none; border: 0; padding: 4px 6px; margin-left: -6px; border-radius: 8px; cursor: pointer; }
body.vf-studio .ww-code-val:hover { background: var(--bg-tint); }
body.vf-studio .ww-code-val.is-empty { color: var(--vf-blue); font-family: inherit; font-weight: 600; }
body.vf-studio .ww-code-input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; padding: 6px 9px; border: 1px solid var(--vf-blue); border-radius: 8px; background: var(--bg); color: var(--fg1); }
body.vf-studio .ww-code-uses { flex: none; font-size: 12px; font-weight: 600; color: var(--fg3); font-variant-numeric: tabular-nums; }
body.vf-studio .ww-code-uses.is-spent { color: var(--danger-text); }
/* Circular usage meter — fills as monthly visits are logged. */
body.vf-studio .ww-ring { flex: none; position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; }
body.vf-studio .ww-ring-track { stroke: var(--line); }
body.vf-studio .ww-ring-fill { stroke: var(--vf-blue); transition: stroke-dashoffset 360ms ease, stroke 200ms ease; }
body.vf-studio .ww-ring.is-near .ww-ring-fill { stroke: #E08A1E; }
body.vf-studio .ww-ring.is-full .ww-ring-fill { stroke: #C42038; }
/* Hover the ring to reveal an undo control in its centre (replaces the count +
   the old separate Undo button). */
body.vf-studio .ww-ring-undo { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: none; color: var(--fg3); cursor: pointer; opacity: 0; transition: opacity 0.12s ease, color 0.12s ease; }
body.vf-studio .ww-ring.has-undo:hover .ww-ring-undo, body.vf-studio .ww-ring-undo:focus-visible { opacity: 1; }
body.vf-studio .ww-ring-undo:hover { color: var(--vf-blue); }
body.vf-studio .ww-ring-undo:disabled { cursor: default; opacity: 0.4; }
body.vf-studio .ww-code-use { flex: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong, #c8cdd6); background: var(--bg); color: var(--fg1); font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .ww-code-use:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .ww-code-use:disabled { opacity: 0.5; cursor: default; }
body.vf-studio .ww-code-use.is-copied { background: rgba(31,157,85,0.12); border-color: #1F9D55; color: #1F9D55; opacity: 1; }
/* Desk codes as profile-pic avatars ringed by monthly usage. Code stays hidden:
   hover the face to copy, right-click to reveal. */
body.vf-studio .ww-code-avatars { position: relative; display: flex; flex-wrap: wrap; gap: 22px; padding: 6px 0 2px; }
body.vf-studio .ww-av { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 72px; }
/* Undo control — reveals on hover once a visit has been logged. */
body.vf-studio .ww-av-undo { position: absolute; top: 30px; right: 5px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg2); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: scale(0.8); transition: opacity 0.12s ease, transform 0.12s ease, color 0.12s ease, border-color 0.12s ease; box-shadow: 0 1px 4px rgba(10,15,26,0.2); }
body.vf-studio .ww-av:hover .ww-av-undo, body.vf-studio .ww-av-undo:focus-visible { opacity: 1; transform: scale(1); }
body.vf-studio .ww-av-undo:hover { color: var(--vf-blue); border-color: var(--vf-blue); }
body.vf-studio .ww-av-undo:disabled { opacity: 0.4; cursor: default; }
body.vf-studio .ww-av-tempundo .ww-av-addtemp-plus { border-style: solid; color: var(--vf-blue); border-color: var(--vf-blue); }
body.vf-studio .ww-av-btn { position: relative; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
body.vf-studio .ww-av-ring { position: absolute; inset: 0; }
body.vf-studio .ww-av-ring circle:last-child { transition: stroke-dashoffset 360ms ease, stroke 200ms ease; }
body.vf-studio .ww-av-face { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-tint) center/cover no-repeat; display: grid; place-items: center; color: var(--fg3); overflow: hidden; box-shadow: 0 0 0 2px var(--bg-elev); transition: transform var(--dur-fast) var(--ease-out); }
body.vf-studio .ww-av-btn:hover .ww-av-face { transform: scale(1.06); }
body.vf-studio .ww-av-btn.is-full .ww-av-face { filter: grayscale(0.7); opacity: 0.7; }
body.vf-studio .ww-av-btn.is-empty .ww-av-face { border: 1.5px dashed var(--line-strong, #c8cdd6); background: none; }
body.vf-studio .ww-av-init { font-size: 15px; font-weight: 700; color: var(--fg2); }
/* Dwell progress: the face pulses while the hover-to-copy timer runs. */
body.vf-studio .ww-av-btn.is-dwell .ww-av-face { animation: ww-av-dwell 0.55s ease forwards; }
@keyframes ww-av-dwell { from { box-shadow: 0 0 0 2px var(--bg-elev); } to { box-shadow: 0 0 0 3px var(--vf-blue); } }
/* Copied flash: a green tick sweeps over the face. */
/* Copy-action overlay: previews on hover (blue "you'll copy this") and turns
   solid green the moment the code is copied. Makes it clear the gesture copies
   the code (not just marks a visit). */
body.vf-studio .ww-av-flash { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(9,94,223,0.86); color: #fff; opacity: 0; transform: scale(0.6); pointer-events: none; transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease; }
body.vf-studio .ww-av-btn:hover .ww-av-flash { opacity: 0.9; transform: scale(1); }
body.vf-studio .ww-av-btn.is-empty:hover .ww-av-flash { opacity: 0; }
body.vf-studio .ww-av-btn.is-copied .ww-av-flash { opacity: 1; transform: scale(1); background: rgba(31,157,85,0.94); }
body.vf-studio .ww-av-name { font-size: 12px; font-weight: 600; color: var(--fg1); line-height: 1.1; text-align: center; }
body.vf-studio .ww-av-left { font-size: 10.5px; font-weight: 600; color: var(--fg4); }
body.vf-studio .ww-av-left.is-spent { color: var(--danger-text); }
body.vf-studio .ww-av-editing { width: auto; align-items: flex-start; }
body.vf-studio .ww-av-editing .ww-code-input { width: 140px; }
body.vf-studio .ww-av-addtemp { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 72px; border: 0; background: none; cursor: pointer; font: inherit; }
body.vf-studio .ww-av-addtemp-plus { width: 48px; height: 48px; border-radius: 50%; border: 1.5px dashed var(--line-strong, #c8cdd6); display: grid; place-items: center; font-size: 22px; color: var(--fg3); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .ww-av-addtemp:hover .ww-av-addtemp-plus { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .ww-av-out { animation: ww-av-out 0.4s ease forwards; }
@keyframes ww-av-out { to { opacity: 0; transform: scale(0.8); } }
/* Right-click reveal popover — the one place the code shows as text. */
body.vf-studio .ww-reveal-backdrop { position: fixed; inset: 0; z-index: 120; background: rgba(10,15,26,0.28); display: grid; place-items: center; }
body.vf-studio .ww-reveal { min-width: 220px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(10,15,26,0.28); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
body.vf-studio .ww-reveal-who { font-size: 12px; font-weight: 700; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.04em; }
body.vf-studio .ww-reveal-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; font-weight: 700; letter-spacing: 0.03em; color: var(--fg1); user-select: all; }
body.vf-studio .ww-reveal-actions { display: flex; gap: 8px; margin-top: 4px; }
body.vf-studio .ww-reveal-actions button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong, #c8cdd6); background: var(--bg); color: var(--fg1); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
body.vf-studio .ww-reveal-actions button:hover { background: var(--accent-soft); border-color: var(--vf-blue); color: var(--vf-blue); }
/* VF (Revolut) sub-label, and the temporary single-use code row + its animation. */
body.vf-studio .ww-code-sub { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--fg4); }
body.vf-studio .ww-code-once { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #B26B00; background: rgba(214,158,46,0.16); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
body.vf-studio .ww-code-addtemp { align-self: flex-start; margin-top: 5px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--vf-blue); cursor: pointer; }
body.vf-studio .ww-code-addtemp:hover { text-decoration: underline; }
body.vf-studio .ww-code-temp { max-height: 60px; }
@keyframes ww-temp-out { to { opacity: 0; transform: translateX(16px); max-height: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; } }
body.vf-studio .ww-code-temp.is-out { animation: ww-temp-out 440ms var(--ease-out) forwards; overflow: hidden; pointer-events: none; }
body.vf-studio .ww-code-undo { flex: none; border: 0; background: none; padding: 6px 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--fg4); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
body.vf-studio .ww-code-undo:hover:not(:disabled) { color: var(--vf-blue); }
body.vf-studio .ww-code-undo:disabled { opacity: 0.5; cursor: default; }
/* /admin/api-usage — Gemini / Google Cloud audit + live spend */
body.vf-studio .apu-card { margin: 0 0 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); }
body.vf-studio .apu-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
body.vf-studio .apu-card-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg1); }
body.vf-studio .apu-card-sub { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--fg4); }
body.vf-studio .apu-refresh { position: static; }
body.vf-studio .apu-loading { font-size: 13px; color: var(--fg4); padding: 8px 0; }
body.vf-studio .apu-total { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
body.vf-studio .apu-total-num { font-size: 30px; font-weight: 800; color: var(--fg1); font-variant-numeric: tabular-nums; }
body.vf-studio .apu-total-lbl { font-size: 13px; color: var(--fg4); }
body.vf-studio .apu-svc-rows { display: flex; flex-direction: column; }
body.vf-studio .apu-svc-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
body.vf-studio .apu-svc-name { color: var(--fg2); }
body.vf-studio .apu-svc-cost { font-weight: 700; color: var(--fg1); font-variant-numeric: tabular-nums; }
body.vf-studio .apu-svc-empty { color: var(--fg4); }
body.vf-studio .apu-connect-lead { margin: 0 0 10px; font-size: 13px; color: var(--fg2); }
body.vf-studio .apu-steps { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--fg2); line-height: 1.5; }
body.vf-studio .apu-steps code { font-size: 12px; background: var(--bg-tint); padding: 1px 5px; border-radius: 6px; font-family: ui-monospace, Menlo, monospace; }
body.vf-studio .apu-console-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; background: var(--vf-blue); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
body.vf-studio .apu-console-link:hover { filter: brightness(1.07); }
body.vf-studio .apu-connect-err { margin: 10px 0 0; font-size: 12px; color: var(--danger-text); }
body.vf-studio .apu-note { margin: 0 0 14px; font-size: 13px; color: var(--fg2); line-height: 1.55; }
body.vf-studio .apu-table-wrap { overflow-x: auto; }
body.vf-studio .apu-table { width: 100%; border-collapse: collapse; font-size: 13px; }
body.vf-studio .apu-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg4); padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); }
body.vf-studio .apu-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); color: var(--fg2); vertical-align: top; }
body.vf-studio .apu-task { display: block; font-weight: 600; color: var(--fg1); }
body.vf-studio .apu-file { display: block; font-size: 11px; color: var(--fg4); font-family: ui-monospace, Menlo, monospace; margin-top: 2px; }
body.vf-studio .apu-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.vf-studio .apu-findings { display: flex; flex-direction: column; gap: 14px; }
body.vf-studio .apu-finding-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
body.vf-studio .apu-sev { flex: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; }
body.vf-studio .apu-sev-critical { color: #fff; background: #C42038; }
body.vf-studio .apu-sev-high { color: #fff; background: #D64054; }
body.vf-studio .apu-sev-medium { color: #7a4a10; background: rgba(205,132,40,0.18); }
body.vf-studio .apu-sev-low { color: var(--fg3); background: var(--bg-tint); }
body.vf-studio .apu-finding-title { font-size: 14px; font-weight: 700; color: var(--fg1); }
body.vf-studio .apu-finding-body { margin: 0; font-size: 13px; color: var(--fg3); line-height: 1.5; }
body.vf-studio .apu-recs { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--fg2); line-height: 1.5; }
/* WeWork map view */
body.vf-studio .ww-viewtoggle { flex: none; }
/* z-index:0 makes the map its own stacking context, so its recenter button +
   bottom fade (z-index:600 inside) stay above the tiles but never bleed over the
   feature-request modal (z-index:220) or any other overlay at the page level. */
body.vf-studio .ww-mapwrap { position: relative; z-index: 0; }
body.vf-studio .ww-map { height: min(620px, 70vh); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-tint); z-index: 0; }
body.vf-studio .ww-map .leaflet-container { font: inherit; background: var(--bg-tint); }
body.vf-studio .ww-map-missing { margin-top: 9px; font-size: 12px; color: var(--fg4); }
/* Hide Leaflet's default attribution box; show a tidy chin instead (credit kept). */
body.vf-studio .ww-map .leaflet-control-attribution { display: none; }
body.vf-studio .ww-map-chin { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 24px; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; background: linear-gradient(to top, var(--bg-elev) 55%, rgba(255,255,255,0)); border-radius: 0 0 16px 16px; pointer-events: none; z-index: 600; }
body.vf-studio .ww-map-chin span { font-size: 10px; letter-spacing: 0.01em; color: var(--fg4); }
/* Floating "recentre" control — re-fits the view so the pins just fill the frame.
   z-index sits above Leaflet's panes (max 700) but below its controls (~1000). */
body.vf-studio .ww-recenter { position: absolute; top: 12px; right: 12px; z-index: 600; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--fg1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(10,15,26,0.16); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
body.vf-studio .ww-recenter svg { flex: none; color: var(--vf-blue); }
body.vf-studio .ww-recenter:hover { background: var(--vf-blue); color: #fff; box-shadow: 0 6px 18px rgba(9,94,223,0.30); }
body.vf-studio .ww-recenter:hover svg { color: #fff; }
body.vf-studio .ww-recenter:active { transform: scale(0.96); }
/* Tube/rail overlay toggle — mirrors the recenter pill, top-left, fills blue when on. */
body.vf-studio .ww-tubetoggle { position: absolute; top: 12px; left: 12px; z-index: 600; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--fg1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(10,15,26,0.16); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .ww-tubetoggle svg { flex: none; color: var(--vf-blue); }
body.vf-studio .ww-tubetoggle:hover { border-color: var(--vf-blue); }
body.vf-studio .ww-tubetoggle.is-on { background: var(--vf-blue); color: #fff; border-color: var(--vf-blue); }
body.vf-studio .ww-tubetoggle.is-on svg { color: #fff; }
body.vf-studio .ww-tubetoggle:active { transform: scale(0.96); }
/* Map controls sit together, top-right (Tube left of Recentre) — clear of the
   ± zoom control which Leaflet puts top-left. */
body.vf-studio .ww-mapctrls { position: absolute; top: 12px; right: 12px; z-index: 600; display: flex; align-items: center; gap: 8px; }
body.vf-studio .ww-mapctrls .ww-recenter, body.vf-studio .ww-mapctrls .ww-tubetoggle { position: static; top: auto; right: auto; left: auto; }
/* Numbered cluster bubble (dense cities collapse to this; click to zoom in). */
.ww-cluster { background: none; border: 0; cursor: pointer; }
.ww-cluster span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #6D5AE6, #4B31D6); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -0.02em; border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(75,49,214,0.45); transition: transform 120ms ease; }
.ww-cluster:hover span { transform: scale(1.08); }
.ww-pin-badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0A0F1A; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: -0.03em; border: 2px solid #fff; box-shadow: 0 2px 7px rgba(10,15,26,0.4); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.ww-pin:hover .ww-pin-badge { transform: scale(1.12); }
/* Teardrop map pin (replaces the round "we" badge). */
.ww-pin-svg { display: block; cursor: pointer; filter: drop-shadow(0 2px 4px rgba(10,15,26,0.35)); transform-origin: 50% 100%; transition: transform var(--dur-fast) var(--ease-out); }
.ww-pin:hover .ww-pin-svg { transform: scale(1.12); }
.leaflet-tooltip.ww-tip { font-size: 12px; line-height: 1.45; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(10,15,26,0.1); box-shadow: 0 6px 18px rgba(10,15,26,0.16); }
.leaflet-tooltip.ww-tip span { display: block; }
.leaflet-tooltip.ww-tip .ww-tip-stars { color: #F5A623; letter-spacing: 1px; font-size: 13px; }
.leaflet-tooltip.ww-tip .ww-tip-komb { color: #2EA043; font-weight: 700; font-size: 11px; }
.leaflet-tooltip.ww-tip .ww-tip-net { font-weight: 600; color: #0A0F1A; }
.leaflet-tooltip.ww-tip .ww-tip-feat { color: #4B5468; font-size: 11px; margin-top: 2px; }
.leaflet-tooltip.ww-tip .ww-tip-none { color: #8A9099; }
.leaflet-tooltip.ww-tip .ww-tip-reflabel { font-weight: 700; color: #0A0F1A; }
.leaflet-tooltip.ww-tip .ww-tip-refaddr { color: #4B5468; font-size: 11px; margin-top: 1px; }
.leaflet-tooltip.ww-tip .ww-tip-title { font-weight: 700; color: #0A0F1A; font-size: 12.5px; }
.leaflet-tooltip.ww-tip .ww-tip-amens { display: flex !important; align-items: center; gap: 6px; margin-top: 3px; }
.leaflet-tooltip.ww-tip .ww-tip-amens svg { display: block; }
/* "You are here" live-location dot */
.ww-me-pin { background: none; border: none; }
.ww-me-dot { position: relative; display: block; width: 16px; height: 16px; border-radius: 50%; background: #095EDF; border: 2.5px solid #fff; box-shadow: 0 1px 5px rgba(9,94,223,0.5); }
.ww-me-pulse { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: rgba(9,94,223,0.35); transform: translate(-50%,-50%); animation: ww-me-pulse 2s ease-out infinite; }
@keyframes ww-me-pulse { 0% { transform: translate(-50%,-50%) scale(1); opacity: 0.7; } 100% { transform: translate(-50%,-50%) scale(3.4); opacity: 0; } }
body.vf-studio .ww-card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left; padding: 16px 18px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font: inherit; transition: border-color 140ms, box-shadow 140ms, transform 140ms; }
body.vf-studio .ww-card:hover { border-color: var(--vf-blue); box-shadow: 0 6px 20px rgba(10,15,26,0.08); transform: translateY(-1px); }
body.vf-studio .ww-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
body.vf-studio .ww-card-name { font-size: 14px; font-weight: 600; color: var(--fg1); }
body.vf-studio .ww-stars { color: #e0a224; font-size: 14px; letter-spacing: 1.5px; line-height: 1; }
body.vf-studio .ww-stars-na { color: var(--fg4); font-size: 12px; letter-spacing: 0; }
body.vf-studio .ww-card-meta { font-size: 12px; color: var(--fg3); }
body.vf-studio .ww-komb { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; color: var(--success-text); }
/* WeWork detail modal (reuses .kte-backdrop / .kte-modal chrome) */
body.vf-studio .ww-detail-rating { display: flex; align-items: center; gap: 12px; }
/* Travel time from home (TfL): cycling + public transport chips. */
body.vf-studio .ww-travel.ww-detail-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; margin: 0; }
body.vf-studio .ww-travel-times { display: inline-flex; gap: 8px; }
body.vf-studio .ww-travel-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--bg-tint); font-size: 13px; font-weight: 600; color: var(--fg1); }
body.vf-studio .ww-travel-chip svg { flex: none; color: var(--vf-blue); }
body.vf-studio .ww-travel-note { font-size: 13px; color: var(--fg4); }
body.vf-studio .ww-travel-link { color: var(--vf-blue); text-decoration: none; font-weight: 600; }
body.vf-studio .ww-travel-link:hover { text-decoration: underline; }
body.vf-studio .ww-stars-lg { font-size: 22px; letter-spacing: 3px; }
body.vf-studio .ww-komb-pill { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--bg-tint); color: var(--fg3); }
body.vf-studio .ww-komb-pill.is-on { background: rgba(46,160,67,0.14); color: var(--success-text); }
body.vf-studio .ww-detail-rows { display: flex; flex-direction: column; gap: 0; }
body.vf-studio .ww-detail-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
body.vf-studio .ww-detail-row:last-child { border-bottom: 0; }
body.vf-studio .ww-detail-k { color: var(--fg3); }
body.vf-studio .ww-detail-v { color: var(--fg1); }
body.vf-studio .ww-detail-open { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--vf-blue); font-size: 13px; font-weight: 600; text-decoration: none; }
body.vf-studio .ww-detail-open:hover { background: var(--vf-blue); color: #fff; }
/* WeWork — editable card + modal */
body.vf-studio .ww-card-addr { font-size: 11px; color: var(--fg4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .ww-card .ww-card-addr-link { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; max-width: 100%; }
body.vf-studio .ww-card-addr-link svg { flex: none; }
body.vf-studio .ww-card-addr-link:hover { color: var(--vf-blue); text-decoration: underline; }
/* WeWork location row — editable input + Google Maps link */
body.vf-studio .ww-loc-row { align-items: center; }
body.vf-studio .ww-loc-edit { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.vf-studio .ww-loc-edit .ww-edit-in { flex: 1 1 auto; }
body.vf-studio .ww-loc-maps { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--vf-blue); text-decoration: none; white-space: nowrap; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); }
body.vf-studio .ww-loc-maps:hover { background: var(--vf-blue); color: #fff; }
body.vf-studio .ww-edit-name { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 18px; font-weight: 700; color: var(--fg1); border: 0; background: transparent; padding: 2px 4px; margin: -2px -4px; border-radius: 8px; }
body.vf-studio .ww-edit-name:hover { background: var(--bg-tint); }
body.vf-studio .ww-edit-name:focus { outline: none; background: var(--bg-tint); box-shadow: inset 0 0 0 1px var(--vf-blue); }
body.vf-studio .ww-edit-status { font-size: 11px; color: var(--fg4); margin-left: auto; padding: 0 10px; }
body.vf-studio .ww-edit-status.is-error { color: var(--danger-text); }
body.vf-studio .ww-edit-status.is-saved { color: var(--success-text); }
/* Precise fractional star row — grey base + gold overlay clipped to value/5. */
body.vf-studio .ww-stars5 { position: relative; display: inline-block; line-height: 1; font-size: 14px; letter-spacing: 1.5px; white-space: nowrap; }
body.vf-studio .ww-stars5-bg { color: var(--line-strong, #c7ccd6); }
body.vf-studio .ww-stars5-fg { position: absolute; left: 0; top: 0; overflow: hidden; color: #E0A224; }
body.vf-studio .ww-card-stars { margin-top: 1px; }
body.vf-studio.vf-admin-dark .ww-stars5-bg { color: rgba(255,255,255,0.22); }
/* Half-step star EDITOR: the fractional display + 10 invisible half-click zones. */
body.vf-studio .ww-edit-stars { position: relative; display: inline-block; }
body.vf-studio .ww-edit-stars5 { font-size: 22px; letter-spacing: 3px; }
body.vf-studio .ww-edit-starhits { position: absolute; inset: 0; display: flex; }
body.vf-studio .ww-edit-starhit { flex: 1 1 0; min-width: 0; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
body.vf-studio .ww-detail-amens { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Amenity toggles in the detail modal — beer/shower icon that colours on. */
body.vf-studio button.ww-amen-toggle { border: 1px solid var(--line); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--bg-tint); color: var(--fg3); font-size: 12px; font-weight: 600; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio button.ww-amen-toggle svg { flex: none; }
body.vf-studio button.ww-amen-toggle.is-on { color: var(--fg1); border-color: var(--line-strong, #c8cdd6); background: var(--bg-elev); }
/* Run-speed-test control in the detail peek */
body.vf-studio .ww-speedtest-row { align-items: center; }
body.vf-studio .ww-speedtest { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.vf-studio .ww-speedtest-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong, #c8cdd6); background: var(--bg); color: var(--fg1); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .ww-speedtest-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .ww-speedtest-btn.is-busy { cursor: default; border-color: var(--vf-blue); color: var(--vf-blue); background: var(--accent-soft); }
body.vf-studio .ww-speedtest-btn svg { flex: none; }
/* Spin the gauge while a test runs, so it's clearly working. */
body.vf-studio .ww-speedtest-btn.is-busy svg { animation: ww-gauge-spin 0.8s linear infinite; }
@keyframes ww-gauge-spin { to { transform: rotate(360deg); } }
body.vf-studio .ww-speedtest-live { display: inline-flex; gap: 12px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fg3); }
body.vf-studio .ww-speedtest-live .is-active { color: var(--vf-blue); font-weight: 700; animation: ww-speedtest-throb 0.9s ease-in-out infinite; }
@keyframes ww-speedtest-throb { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
body.vf-studio .ww-speedtest-err { color: var(--danger-text); }
body.vf-studio .ww-speedtest-gate { font-size: 11.5px; color: var(--fg4); font-style: italic; }
/* Maps button in the modal header (replaces the old Close link) */
body.vf-studio .ww-detail-maps { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--vf-blue); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
body.vf-studio .ww-detail-maps svg { flex: none; }
body.vf-studio .ww-detail-maps:hover { background: var(--vf-blue); color: #fff; }
/* Copy-icon variant of the code Use button */
body.vf-studio .ww-code-copy { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 6px 12px; }
body.vf-studio .ww-code-copy svg { display: block; }
body.vf-studio .ww-code-copy .ww-code-spent { font-size: 12px; font-weight: 600; }
/* Tube toggle switch inside the cog panel */
body.vf-studio .tk-cog-divider { height: 1px; background: var(--line); margin: 8px 0; }
body.vf-studio .ww-cog-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 4px 2px; border: 0; background: none; cursor: pointer; font: inherit; }
body.vf-studio .ww-cog-switch-label { font-size: 13px; font-weight: 600; color: var(--fg1); white-space: nowrap; }
/* Amenity glyphs on the list card (showers + kombucha) */
body.vf-studio .ww-card-amen { display: inline-flex; align-items: center; gap: 6px; flex: none; }
body.vf-studio .ww-amen { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; color: var(--vf-blue); }
.leaflet-tooltip.ww-tip .ww-tip-shower { color: #2D6BFF; }
body.vf-studio .ww-edit-in { width: 100%; font: inherit; font-size: 13px; color: var(--fg1); border: 1px solid transparent; background: transparent; padding: 4px 7px; margin: -4px -7px; border-radius: 8px; }
body.vf-studio .ww-edit-in:hover { background: var(--bg-tint); }
body.vf-studio .ww-edit-in:focus { outline: none; background: var(--bg-elev); border-color: var(--vf-blue); }
body.vf-studio .ww-edit-ta { width: 100%; min-height: 56px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.45; color: var(--fg1); border: 1px solid var(--line); background: var(--bg); padding: 7px 9px; border-radius: 8px; }
body.vf-studio .ww-edit-ta:focus { outline: none; border-color: var(--vf-blue); }

/* Light/dark toggle (footer bottom row) */
body.vf-studio .vf-theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; }
body.vf-studio .vf-theme-toggle .opt { display: inline-flex; align-items: center; gap: 5px; justify-content: center; padding: 5px 12px; border: 0; background: none; border-radius: 999px; color: var(--fg3); font: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: background 140ms, color 140ms; }
body.vf-studio .vf-theme-toggle .opt.on { background: var(--bg-elev); color: var(--fg1); box-shadow: 0 1px 2px rgba(10,15,26,0.08); font-weight: 600; }

/* Dark mode */
body.vf-studio.vf-admin-dark .vf-footer { background: var(--vf-night); border-top-color: var(--vf-line-dark); }
body.vf-studio.vf-admin-dark .vf-footer-brand .navbar-brand-divider { background: rgba(255,255,255,0.14); }
body.vf-studio.vf-admin-dark .vf-footer-brand img { filter: brightness(0) invert(1); }
body.vf-studio.vf-admin-dark .vf-footer-bottom { border-top-color: var(--vf-line-dark); }
body.vf-studio.vf-admin-dark .vf-theme-toggle .opt.on { box-shadow: none; }

@media (max-width: 900px) {
  body.vf-studio .vf-footer-inner { grid-template-columns: 1fr; gap: 40px; }
  body.vf-studio .vf-footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* Dark: invert the blue logomark to white in the topbar brand (footer handled above). */
body.vf-studio.vf-admin-dark .navbar-brand img { filter: brightness(0) invert(1); }
body.vf-studio.vf-admin-dark .navbar-brand-divider { background: rgba(255,255,255,0.14); }

/* Base .btn (dropped during the lift; modifiers .sm/.primary/.secondary survived). */
body.vf-studio .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-family: inherit; background: transparent; color: var(--fg1); white-space: nowrap; transition: background 140ms, transform 140ms, box-shadow 140ms; }
body.vf-studio .btn:disabled { opacity: 0.6; cursor: default; }

/* Force-refresh buttons (Productions toolbar + AdminTableViewer toolbar). */
body.vf-studio .vf-refresh { gap: 7px; }
body.vf-studio .vf-refresh svg { display: block; }
@keyframes vf-spin { to { transform: rotate(360deg); } }
body.vf-studio .vf-spin { animation: vf-spin 0.8s linear infinite; transform-origin: 50% 50%; }

/* ===================================================================
 * Tasks board (.tk-*) — priority bands, status/location pills, assignee
 * avatars, and the date/status/location/assignee filter toolbar.
 * =================================================================== */
body.vf-studio .tk-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
body.vf-studio .tk-refresh { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--fg2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 140ms, color 140ms; }
body.vf-studio .tk-refresh:hover { background: var(--bg-tint); color: var(--fg1); }
body.vf-studio .tk-refresh:disabled { opacity: 0.6; cursor: default; }
body.vf-studio .tk-refresh.is-spinning svg { animation: vf-spin 0.8s linear infinite; transform-origin: 50% 50%; }
body.vf-studio .tk-search { flex: 1; min-width: 160px; height: 38px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 16px; background: var(--bg-elev); font: inherit; font-size: 14px; color: var(--fg1); outline: none; }
body.vf-studio .tk-search:focus { border-color: var(--vf-blue); }
/* Kit Tech admin reuses the portal's .kp-shift-search — align it to the
   standard Studio search pill (no leading magnifier, same border/font as
   .tk-search). Scoped to .vf-studio so the public portal keeps its own look. */
body.vf-studio .kp-shift-searchico { display: none; }
body.vf-studio .kp-shift-search { padding-left: 16px; font-size: 14px; border-color: var(--line-strong); background: var(--bg-elev); color: var(--fg1); }
body.vf-studio .tk-filter { position: relative; flex: none; }
/* Chiplet showing the current selection; grey when it's the default, blue tint
   when a filter is set. Options reveal on hover / keyboard focus. */
body.vf-studio .tk-chip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; border-radius: 999px; background: rgba(10,15,26,0.06); color: var(--fg2); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: default; outline: none; }
/* Keyboard focus ring — the admin had no visible focus state anywhere. Applies to
   the interactive surfaces that are reachable by Tab (filter chips, listbox
   options, command-palette items, clickable cards, production rows). */
body.vf-studio .tk-chip:focus-visible,
body.vf-studio .kit-rank-opt:focus-visible,
body.vf-studio .kp-cmdk-item:focus-visible,
body.vf-studio [role="option"]:focus-visible,
body.vf-studio .tk-addtask:focus-visible,
body.vf-studio .adb-create-hint:focus-visible,
body.vf-studio .prod-li:focus-visible { outline: 2px solid var(--vf-blue); outline-offset: 2px; }
/* Global keyboard-focus default for any interactive control that doesn't define
   its own. :focus-visible only matches keyboard focus, so mouse users see no
   change — it just lets Tab users see where they are across the Studio. */
body.vf-studio button:focus-visible, body.vf-studio a[href]:focus-visible, body.vf-studio [role="button"]:focus-visible, body.vf-studio [role="tab"]:focus-visible, body.vf-studio [role="option"]:focus-visible, body.vf-studio summary:focus-visible { outline: 2px solid var(--vf-blue); outline-offset: 2px; }
body.vf-studio .tk-chip-k { color: var(--fg4); font-weight: 500; }
body.vf-studio .tk-chip.is-set { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .tk-chip.is-set .tk-chip-k { color: var(--vf-blue); opacity: 0.7; }
body.vf-studio.vf-admin-dark .tk-chip { background: rgba(255,255,255,0.08); color: var(--vf-snow-2); }
/* Hover bridge ABOVE the chip (the menu opens upward) so the cursor doesn't drop the hover. */
body.vf-studio .tk-filter::after { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 11px; }
/* Opens UPWARD out of the toolbar (so it never covers the board below), with a smooth fade + rise. */
/* Anchored to the chip's RIGHT edge so it expands up-and-left and stays on
   screen (left:0 overflowed the viewport and got clipped by overflow-x:clip). */
body.vf-studio .tk-filter-menu { position: absolute; bottom: calc(100% + 10px); right: 0; left: auto; min-width: 168px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(10,15,26,0.20); padding: 6px; z-index: 40; display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.96); transform-origin: bottom right; pointer-events: none; transition: opacity 240ms ease, transform 380ms var(--st-ease), visibility 0s linear 280ms; }
body.vf-studio .tk-filter:hover .tk-filter-menu, body.vf-studio .tk-filter:focus-within .tk-filter-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; transition: opacity 200ms ease, transform 380ms var(--st-ease), visibility 0s; }
body.vf-studio .tk-filter-opt { text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 13px; color: var(--fg1); cursor: pointer; white-space: nowrap; }
body.vf-studio .tk-filter-opt:hover { background: var(--bg-tint); }
body.vf-studio .tk-filter-opt.active { background: var(--accent-soft); color: var(--vf-blue); font-weight: 600; }

body.vf-studio .tk-people { display: inline-flex; align-items: center; flex: none; padding-left: 2px; }
body.vf-studio .tk-av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; border: 2px solid var(--bg-elev); cursor: pointer; flex: none; overflow: hidden; background-position: center; background-repeat: no-repeat; transition: opacity 140ms, box-shadow 140ms; }
/* Toolbar assignee filter: avatars stack/overlap (like the row stacks), then
   fan apart on hover/focus so you can pick one out. */
body.vf-studio .tk-people .tk-av { position: relative; transition: margin-left 180ms var(--ease-out), transform 140ms, opacity 140ms, box-shadow 140ms; }
body.vf-studio .tk-people .tk-av + .tk-av { margin-left: -10px; }
body.vf-studio .tk-people:hover .tk-av + .tk-av,
body.vf-studio .tk-people:focus-within .tk-av + .tk-av { margin-left: 5px; }
body.vf-studio .tk-people .tk-av:hover { transform: translateY(-1px); z-index: 3; }
body.vf-studio .tk-people .tk-av.is-on { box-shadow: 0 0 0 2px var(--vf-blue); z-index: 2; }
body.vf-studio .tk-people .tk-av.is-dim { opacity: 0.4; }

body.vf-studio .tk-bands { display: flex; flex-direction: column; gap: 8px; }
body.vf-studio .tk-band { position: relative; border-radius: 16px; padding: 4px 16px; }
body.vf-studio .tk-band-label { position: absolute; left: 0; top: 0; bottom: 0; width: 46px; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(10,15,26,0.5); }
/* Clean colour-only bands (no left rail) — proper red / orange / yellow tints
   per priority, mirroring the dashboard's conditional formatting. */
body.vf-studio .tk-band-immediate { background: rgba(229,57,70,0.14); }
body.vf-studio .tk-band-high      { background: rgba(231,122,40,0.14); }
body.vf-studio .tk-band-medium    { background: rgba(233,186,40,0.17); }
body.vf-studio .tk-band-low       { background: rgba(120,135,160,0.11); }
body.vf-studio .tk-band-none      { background: rgba(10,15,26,0.045); }

body.vf-studio .tk-rows { display: flex; flex-direction: column; }
body.vf-studio .tk-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px 96px 40px 150px; align-items: center; gap: 12px; padding: 7px 14px; text-decoration: none; color: inherit; border-radius: 8px; transition: background 120ms; }
/* Straight full-width divider (a border-bottom would curve at the rounded corners). */
body.vf-studio .tk-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(10,15,26,0.09); }
body.vf-studio .tk-rows .tk-row:last-child::after { display: none; }
body.vf-studio .tk-row:hover { background: rgba(255,255,255,0.4); }
body.vf-studio .tk-row-title { font-weight: 700; font-size: 15px; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .tk-row-date { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--fg3); }
body.vf-studio .tk-row-people { justify-self: end; display: inline-flex; }
body.vf-studio .tk-row-people .tk-av { cursor: default; }
body.vf-studio .tk-row-people .tk-av + .tk-av { margin-left: -8px; }

body.vf-studio .tk-pill { display: inline-flex; align-items: center; justify-content: center; justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); }
body.vf-studio .tk-pill-yellow { background: rgba(208,156,32,0.18); color: #876512; }
body.vf-studio .tk-pill-blue   { background: rgba(42,120,234,0.13); color: #2860C2; }
body.vf-studio .tk-pill-amber  { background: rgba(201,122,20,0.16); color: #95600F; }
body.vf-studio .tk-pill-green  { background: rgba(31,157,85,0.15); color: var(--success-text); }
body.vf-studio .tk-pill-purple { background: rgba(124,77,224,0.13); color: #6A3EB6; }
body.vf-studio .tk-pill-indigo { background: rgba(42,107,224,0.13); color: #2E63CC; }
body.vf-studio .tk-pill-red    { background: rgba(216,52,74,0.12); color: #C12F46; }
body.vf-studio .tk-pill-grey   { background: rgba(10,15,26,0.07); color: var(--fg2); }

/* Dark mode — tinted bands, light dividers, neutral grey pill. */
body.vf-studio.vf-admin-dark .tk-band-immediate { background: rgba(229,57,70,0.17); }
body.vf-studio.vf-admin-dark .tk-band-high      { background: rgba(231,122,40,0.15); }
body.vf-studio.vf-admin-dark .tk-band-medium    { background: rgba(233,186,40,0.15); }
body.vf-studio.vf-admin-dark .tk-band-low       { background: rgba(140,155,180,0.13); }
body.vf-studio.vf-admin-dark .tk-band-none      { background: rgba(255,255,255,0.05); }
body.vf-studio.vf-admin-dark .tk-band-label { color: rgba(255,255,255,0.45); }
body.vf-studio.vf-admin-dark .tk-row::after { background: rgba(255,255,255,0.10); }
body.vf-studio.vf-admin-dark .tk-row:hover { background: rgba(255,255,255,0.05); }
body.vf-studio.vf-admin-dark .tk-row-date { color: var(--vf-snow-3); }
body.vf-studio.vf-admin-dark .tk-pill-grey   { background: rgba(255,255,255,0.10); color: var(--vf-snow-2); }
body.vf-studio.vf-admin-dark .tk-pill-yellow { background: rgba(214,168,50,0.20); color: #E3C074; }
body.vf-studio.vf-admin-dark .tk-pill-blue   { background: rgba(80,150,240,0.20); color: #8FB8F5; }
body.vf-studio.vf-admin-dark .tk-pill-amber  { background: rgba(201,130,40,0.22); color: #E8B274; }
body.vf-studio.vf-admin-dark .tk-pill-green  { background: rgba(40,170,100,0.20); color: #74D29B; }
body.vf-studio.vf-admin-dark .tk-pill-purple { background: rgba(140,100,230,0.22); color: #C0A6F0; }
body.vf-studio.vf-admin-dark .tk-pill-indigo { background: rgba(80,140,240,0.20); color: #9CC0F5; }
body.vf-studio.vf-admin-dark .tk-pill-red    { background: rgba(230,80,100,0.20); color: #F0A0AC; }

@media (max-width: 760px) {
  /* Give the task title room: drop the date column + let the name wrap to 2 lines. */
  body.vf-studio .tk-row { grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 8px; }
  body.vf-studio .tk-row-date { display: none; }
  body.vf-studio .tk-row-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
}

/* Location sub-group (inside each priority band) */
body.vf-studio .tk-locgroup + .tk-locgroup { margin-top: 0; border-top: 1px solid rgba(10,15,26,0.12); padding-top: 8px; }
body.vf-studio .tk-locgroup-head { display: inline-flex; align-items: center; gap: 7px; padding: 4px 4px 5px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--fg3); }
body.vf-studio .tk-locgroup-head .tk-locgroup-ic { opacity: 0.6; }
body.vf-studio .tk-locgroup-ic { flex: none; opacity: 0.85; }

/* Status cell holds the pill; on row hover it cross-fades to a green "Mark Complete"
   (the button is absolutely positioned over the pill, so nothing reflows). */
body.vf-studio .tk-row-statuswrap { position: relative; justify-self: end; display: inline-flex; align-items: center; min-height: 30px; }
/* Location chip on each row (between the assignees and the status). */
body.vf-studio .tk-row-loc { justify-self: center; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 24px; border-radius: 8px; background: var(--bg-tint); color: var(--fg3); flex: none; }
body.vf-studio .tk-row-loc svg { width: 15px; height: 15px; opacity: 0.85; }
body.vf-studio.vf-admin-dark .tk-row-loc { background: rgba(255,255,255,0.08); }
/* (Removed: the first-gen hover-to-complete rules. They hid every .tk-status
   in a row on :hover/:focus-within — which made the status pill vanish when
   you clicked location, and blanked the expanded status chiplets. The
   .tk-complete pill they revealed no longer exists in the JSX.) */
body.vf-studio.vf-admin-dark .tk-locgroup-head { color: var(--vf-snow-3); }
body.vf-studio.vf-admin-dark .tk-locgroup + .tk-locgroup { border-top-color: rgba(255,255,255,0.12); }

/* ---- Tasks: clickable rows + small avatar + centre-peek modal ---- */
body.vf-studio .tk-row { cursor: pointer; }
body.vf-studio .tk-av.sm { width: 26px; height: 26px; font-size: 10px; }
body.vf-studio .tk-pill-tan { background: rgba(150,110,56,0.15); color: #6E4B22; }
body.vf-studio.vf-admin-dark .tk-pill-tan { background: rgba(190,150,90,0.18); color: #DCC196; }

/* Perfectly centred (flex-column + margin:auto centers when it fits, and falls
   back to top-aligned + scrollable when the content is taller than the screen). */
body.vf-studio .tk-peek-overlay { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 28px 20px; background: rgba(10,15,26,0.44); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); overflow-y: auto; }
body.vf-studio .tk-peek { position: relative; margin: auto; width: min(760px, 100%); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 32px 80px rgba(10,15,26,0.34); padding: 36px 40px 32px; }
body.vf-studio .tk-peek-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 8px; color: var(--fg3); cursor: pointer; }
body.vf-studio .tk-peek-close:hover { background: var(--bg-tint); color: var(--fg1); }
body.vf-studio .tk-peek-title { font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--fg1); margin: 0 32px 22px 0; }
body.vf-studio .tk-peek-props { display: flex; flex-wrap: wrap; gap: 20px 34px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
body.vf-studio .tk-peek-prop { display: flex; flex-direction: column; gap: 9px; }
body.vf-studio .tk-peek-k { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg4); }
body.vf-studio .tk-peek-assign { display: inline-flex; flex-direction: column; gap: 6px; }
body.vf-studio .tk-peek-person { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--fg1); }
body.vf-studio .tk-peek-empty { font-size: 13px; color: var(--fg4); }
body.vf-studio .tk-peek-section { margin-bottom: 22px; }
body.vf-studio .tk-peek-h { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg4); margin-bottom: 9px; }
body.vf-studio .tk-peek-brief { font-size: 14px; line-height: 1.55; color: var(--fg1); white-space: pre-wrap; word-break: break-word; }
body.vf-studio .tk-peek-brief a, body.vf-studio .tk-peek-v a { color: var(--vf-blue); text-decoration: none; word-break: break-all; }
body.vf-studio .tk-peek-brief a:hover, body.vf-studio .tk-peek-v a:hover { text-decoration: underline; }
body.vf-studio .tk-peek-attrs { display: flex; flex-direction: column; gap: 13px; }
body.vf-studio .tk-peek-attr { display: grid; grid-template-columns: 130px 1fr; align-items: start; gap: 12px; }
body.vf-studio .tk-peek-attr .tk-peek-k { padding-top: 4px; }
body.vf-studio .tk-peek-v { font-size: 14px; color: var(--fg1); min-width: 0; }
body.vf-studio .tk-peek-files { display: inline-flex; flex-wrap: wrap; gap: 8px; }
body.vf-studio .tk-peek-file { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--line); background-size: cover; background-position: center; background-color: var(--bg-tint); display: block; }
body.vf-studio .tk-peek-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
body.vf-studio .tk-peek-tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--bg-tint); color: var(--fg2); font-size: 12px; font-weight: 500; }
body.vf-studio .tk-peek-open { margin-top: 24px; }
@media (max-width: 600px) {
  body.vf-studio .tk-peek { padding: 28px 22px 24px; }
  body.vf-studio .tk-peek-attr { grid-template-columns: 110px 1fr; }
}

/* ---- Editable peek controls (in-place edit → writes back to Notion) ---- */
body.vf-studio .tk-peek-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: -10px -12px 4px 0; min-height: 22px; }
body.vf-studio .tk-peek-save { font-size: 12px; color: var(--fg4); }
body.vf-studio .tk-peek-save.is-saving { color: var(--fg3); }
body.vf-studio .tk-peek-save.is-saved { color: #1F9D55; }
body.vf-studio .tk-peek-save.is-error { color: var(--danger-text); }
body.vf-studio .tk-peek .tk-peek-close { position: static; }
body.vf-studio .tk-peek-title-input { width: 100%; border: 0; border-bottom: 2px solid transparent; background: none; font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--fg1); margin: 0 0 22px; padding: 2px 0; outline: none; }
body.vf-studio .tk-peek-title-input:focus { border-bottom-color: var(--accent-soft); }
body.vf-studio .tk-pill.tk-pill-edit { padding: 0; position: relative; }
body.vf-studio .tk-pill-edit select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: 12px; padding: 5px 26px 5px 12px; border-radius: 999px; cursor: pointer; outline: none; }
body.vf-studio .tk-pill-edit::after { content: '▾'; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 9px; opacity: 0.55; }
body.vf-studio .tk-peek-assignedit { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* Unselected = a faded avatar-only pill; hover expands the name. Selected = full pill. */
body.vf-studio .tk-assign-chip { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; opacity: 0.55; transition: opacity 180ms var(--ease-out), background 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out), padding 200ms cubic-bezier(.4,0,.2,1); }
body.vf-studio .tk-assign-name { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; padding-left: 0; transition: max-width 220ms cubic-bezier(.4,0,.2,1), opacity var(--dur-fast) var(--ease-out), padding-left 220ms cubic-bezier(.4,0,.2,1); }
body.vf-studio .tk-assign-chip:not(.is-on):hover { opacity: 0.92; padding-right: 12px; }
body.vf-studio .tk-assign-chip:not(.is-on):hover .tk-assign-name { max-width: 130px; opacity: 1; padding-left: 6px; }
body.vf-studio .tk-assign-chip.is-on { opacity: 1; background: var(--accent-soft); border-color: transparent; color: var(--vf-blue); padding-right: 12px; }
body.vf-studio .tk-assign-chip.is-on .tk-assign-name { max-width: 130px; opacity: 1; padding-left: 6px; }
body.vf-studio .tk-peek-briefedit { width: 100%; min-height: 72px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.55; color: var(--fg1); background: var(--bg); outline: none; }
body.vf-studio .tk-peek-briefedit:focus { border-color: var(--vf-blue); }
body.vf-studio .tk-peek-dateedit { border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 13px; color: var(--fg1); background: var(--bg-elev); outline: none; }
body.vf-studio .tk-peek-dateedit:focus { border-color: var(--vf-blue); }
body.vf-studio.vf-admin-dark .tk-peek-dateedit, body.vf-studio.vf-admin-dark .tk-pill-edit select { color-scheme: dark; }

/* ---- Task delete (peek footer) ---- */
body.vf-studio .tk-peek-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
body.vf-studio .tk-peek-delete { border: 0; background: none; color: var(--danger-text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px 0; }
body.vf-studio .tk-peek-delete:hover { text-decoration: underline; }
body.vf-studio .tk-peek-delconfirm { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--fg2); }
body.vf-studio .tk-peek-delcancel { border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--fg1); font: inherit; font-size: 12px; padding: 5px 12px; border-radius: 8px; cursor: pointer; }
body.vf-studio .tk-peek-delcancel:hover { background: var(--bg-tint); }
body.vf-studio .tk-peek-delyes { border: 0; background: #C8324A; color: #fff; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
body.vf-studio .tk-peek-delyes:hover { background: #B12A40; }

/* ===== Filter rework: chip-stacks + cog "more filters" panel ===== */
/* Date/Status reveal a vertical stack of colour chips (no menu box). */
body.vf-studio .tk-filter-menu.tk-chipstack { min-width: 152px; gap: 5px; }
body.vf-studio .tk-chipopt { border: 0; cursor: pointer; justify-content: center; white-space: nowrap; }
body.vf-studio .tk-chipopt.is-sel { box-shadow: 0 0 0 2px var(--vf-blue); }
/* Teal date chips (Month/Week/Day); Overdue uses tk-pill-red. */
body.vf-studio .tk-pill-teal { background: rgba(38,166,154,0.16); color: #1A726A; }
body.vf-studio.vf-admin-dark .tk-pill-teal { background: rgba(60,190,178,0.20); color: #7FD6CC; }

/* Search + cog */
body.vf-studio .tk-searchwrap { flex: 1; min-width: 180px; position: relative; display: flex; align-items: center; }
body.vf-studio .tk-searchwrap .tk-search { flex: 1; min-width: 0; padding-right: 70px; }
/* Refresh sits inside the search bar, just left of the grouping cog. */
body.vf-studio .tk-refresh.tk-inwrap { position: absolute; right: 37px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; background: none; color: var(--fg4); border-radius: 50%; }
body.vf-studio .tk-refresh.tk-inwrap:hover { background: var(--bg-tint); color: var(--fg1); }
body.vf-studio .tk-refresh.tk-inwrap:disabled { opacity: 0.55; }
/* No grouping cog on this page: refresh becomes the rightmost control, flush like the cog would be.
   Reserve the zone on the wrap so the create-hint pill can't slide under the refresh either. */
body.vf-studio .tk-searchwrap.no-cog { padding-right: 34px; }
body.vf-studio .tk-searchwrap.no-cog .tk-search { padding-right: 12px; }
body.vf-studio .tk-searchwrap.no-cog .tk-refresh.tk-inwrap { right: 6px; }
body.vf-studio .tk-cog { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 0; background: none; color: var(--fg4); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 140ms, color 140ms; }
body.vf-studio .tk-cog:hover, body.vf-studio .tk-cog.is-on { background: var(--bg-tint); color: var(--fg1); }
body.vf-studio .tk-cog.has-active::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--vf-blue); border: 1.5px solid var(--bg-elev); }
body.vf-studio .tk-cog-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 300px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(10,15,26,0.18); padding: 16px; z-index: 50; display: flex; flex-direction: column; gap: 16px; }
body.vf-studio .tk-cog-group { display: flex; flex-direction: column; gap: 9px; }
body.vf-studio .tk-cog-h { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg4); }
body.vf-studio .tk-cog-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.vf-studio .tk-cog-chip { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--fg2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 140ms, color 140ms, border-color 140ms; }
body.vf-studio .tk-cog-chip:hover { background: var(--bg-tint); }
body.vf-studio .tk-cog-chip.is-on { background: var(--accent-soft); border-color: transparent; color: var(--vf-blue); font-weight: 600; }
body.vf-studio .tk-cog-chip-sort { display: inline-flex; align-items: center; gap: 8px; }
body.vf-studio .tk-cog-chip-ico { display: inline-flex; align-items: center; gap: 2px; color: var(--fg4); }
body.vf-studio .tk-cog-chip-sort.is-on .tk-cog-chip-ico { color: var(--vf-blue); }

/* ---- Undo snackbar (after delete) ---- */
body.vf-studio .tk-undo { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 120; display: inline-flex; align-items: center; gap: 16px; padding: 11px 14px 11px 20px; background: #1A1F2A; color: #fff; border-radius: 12px; box-shadow: 0 14px 36px rgba(10,15,26,0.36); font-size: 13px; }
body.vf-studio .tk-undo-btn { border: 0; background: rgba(255,255,255,0.16); color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
body.vf-studio .tk-undo-btn:hover { background: rgba(255,255,255,0.26); }

/* Grouping options stacked vertically in the cog panel */
body.vf-studio .tk-cog-chips-col { flex-direction: column; align-items: stretch; }
body.vf-studio .tk-cog-chips-col .tk-cog-chip { text-align: left; }

/* + New task — same dimensions as the filter chiplets, in primary blue */
body.vf-studio .tk-addtask { margin-left: 0; margin-right: 2px; flex: none; height: 38px; padding: 0 17px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-addtask:hover { filter: brightness(1.08); transform: translateY(-1px); }
body.vf-studio .tk-addtask:disabled { opacity: 0.6; cursor: default; transform: none; }
body.vf-studio .tk-newbtn { margin-right: 8px; }
/* "Recurring" toolbar button — secondary (outline) so it's distinct from + New. */
body.vf-studio .tk-recurbtn { margin-right: 8px; background: var(--bg-elev); color: var(--fg1); border: 1px solid var(--line-strong); }
body.vf-studio .tk-recurbtn:hover { filter: none; border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .tk-recurbtn svg { color: var(--vf-blue); }
/* Max's-view status pill: one click toggles it, so show it's clickable. */
body.vf-studio .tk-row-statuswrap-toggle { cursor: pointer; }
/* Recurring tasks manager modal. */
body.vf-studio .recur-modal { max-width: 520px; }
body.vf-studio .recur-sub { margin: 0 0 16px; font-size: 13px; color: var(--fg3); line-height: 1.5; }
body.vf-studio .recur-add { background: var(--bg-tint); border-radius: 12px; padding: 12px; margin: 0 0 16px; }
body.vf-studio .recur-name { width: 100%; margin: 0 0 10px; box-sizing: border-box; }
body.vf-studio .recur-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.vf-studio .recur-daysel { height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-elev); color: var(--fg1); font: inherit; font-size: 13px; padding: 0 8px; cursor: pointer; }
body.vf-studio .recur-addbtn { margin-left: auto; height: 34px; }
body.vf-studio .recur-err { margin-top: 8px; font-size: 12.5px; color: var(--danger-text); font-weight: 600; }
body.vf-studio .recur-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
body.vf-studio .recur-empty { padding: 22px 8px; text-align: center; color: var(--fg4); font-size: 13px; }
body.vf-studio .recur-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line); }
body.vf-studio .recur-item:first-child { border-top: 0; }
body.vf-studio .recur-item-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .recur-item-cad { flex: none; font-size: 12px; color: var(--fg3); }
body.vf-studio .recur-item-del { flex: none; width: 26px; height: 26px; border: 0; background: none; color: var(--fg4); font-size: 20px; line-height: 1; border-radius: 6px; cursor: pointer; }
body.vf-studio .recur-item-del:hover { background: var(--danger-soft); color: var(--danger-text); }

/* Band header (primary group label) + the small group dot for priority/status */
body.vf-studio .tk-band-head { display: inline-flex; align-items: center; gap: 8px; padding: 7px 4px 5px; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--fg1); }
body.vf-studio .tk-band-head svg { opacity: 0.85; }
body.vf-studio.vf-admin-dark .tk-band-head { color: var(--vf-snow-1); }
/* Collapsible band: the head label is a button; the chevron points down when
   open and rotates to point right when the band is folded shut. */
body.vf-studio .tk-band-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; }
body.vf-studio .tk-band-chev { flex: none; opacity: 0.55; transition: transform var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-band-toggle:hover .tk-band-chev { opacity: 0.9; }
body.vf-studio .is-collapsed .tk-band-chev { transform: rotate(-90deg); }
body.vf-studio .adb-table-bandhead { cursor: pointer; }
body.vf-studio .adb-table-bandhead td { user-select: none; }
body.vf-studio .tk-grp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--fg4); }
body.vf-studio .tk-grp-dot.tk-pill-red { background: #D64054; }
body.vf-studio .tk-grp-dot.tk-pill-amber { background: #CD8428; }
body.vf-studio .tk-grp-dot.tk-pill-yellow { background: #B6A11E; }
body.vf-studio .tk-grp-dot.tk-pill-green { background: #3FA862; }
body.vf-studio .tk-grp-dot.tk-pill-blue { background: #2A78EA; }
body.vf-studio .tk-grp-dot.tk-pill-purple { background: #8B5CF6; }
body.vf-studio .tk-grp-dot.tk-pill-teal { background: #14B8A6; }
body.vf-studio .tk-grp-dot.tk-pill-indigo { background: #6366F1; }

/* PortalShifts "Suggested from upcoming shoots" card is shared with the light
   kit-tech portal (its --vf-* tokens are light). When embedded in the dark
   admin Kit Tech page, repaint it with the studio dark tokens so it isn't a
   light slab on a dark page. */
body.vf-studio.vf-admin-dark .kp-shift-suggest { background: var(--bg-tint); border-color: var(--line); }
body.vf-studio.vf-admin-dark .kp-shift-suggest-title { color: var(--fg1); }
body.vf-studio.vf-admin-dark .kp-shift-suggest-sub { color: var(--fg4); }
body.vf-studio.vf-admin-dark .kp-suggest-card { background: var(--bg-elev); border-color: var(--line); }
body.vf-studio.vf-admin-dark .kp-suggest-name { color: var(--fg1); }
body.vf-studio.vf-admin-dark .kp-suggest-meta { color: var(--fg4); }
body.vf-studio.vf-admin-dark .kp-suggest-ignore { border-color: var(--line); color: var(--fg2); }
body.vf-studio.vf-admin-dark .kp-suggest-ignore:hover { background: var(--bg-tint); color: var(--fg1); }
body.vf-studio.vf-admin-dark .kp-suggest-empty { color: var(--fg3); }

/* ---- Tasks loading mini-game ---- */
body.vf-studio .tk-game { padding: 22px 0 8px; }
body.vf-studio .tk-game-label { font-size: 14px; color: var(--fg2); margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
body.vf-studio .tk-game-label span { font-size: 11px; color: var(--fg4); }
body.vf-studio .tk-game-canvas { width: 100%; height: 168px; display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); cursor: pointer; touch-action: manipulation; }
/* Memory-match variant (DOM cards, not canvas) — same 168px footprint */
body.vf-studio .tk-mem { min-height: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); padding: 14px 12px; }
body.vf-studio .tk-mem-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: 100%; max-width: 372px; }
body.vf-studio .tk-mem-card { position: relative; aspect-ratio: 1; border: 0; background: transparent; padding: 0; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-mem-card:hover { transform: translateY(-1px); }
body.vf-studio .tk-mem-card.is-done { cursor: default; }
body.vf-studio .tk-mem-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: opacity 180ms var(--ease-out); }
body.vf-studio .tk-mem-back { background: linear-gradient(155deg, var(--accent), color-mix(in srgb, var(--accent) 64%, #0b1a3f)); color: rgba(255,255,255,0.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); opacity: 1; }
body.vf-studio .tk-mem-front { background: var(--bg-tint); border: 1px solid var(--line); font-size: 22px; line-height: 1; opacity: 0; }
body.vf-studio .tk-mem-card.is-up .tk-mem-back { opacity: 0; }
body.vf-studio .tk-mem-card.is-up .tk-mem-front { opacity: 1; }
body.vf-studio .tk-mem-card.is-done .tk-mem-front { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent); }
body.vf-studio .tk-mem-card.is-done { opacity: 0.6; }
body.vf-studio .tk-mem-foot { font: 600 11px var(--font-mono, ui-monospace), Menlo, monospace; letter-spacing: 0.04em; color: var(--fg4); }
body.vf-studio .tk-mem.is-won .tk-mem-foot { color: var(--accent); }

/* ---- Task peek: batched Attachments / Links + Production ---- */
body.vf-studio .tk-peek-linkwrap { display: flex; flex-direction: column; gap: 8px; width: 100%; }
body.vf-studio .tk-peek-linkrow { display: flex; align-items: center; gap: 6px; }
body.vf-studio .tk-peek-linkedit { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; color: var(--fg1); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
body.vf-studio .tk-peek-linkedit::placeholder { color: var(--fg4); }
body.vf-studio .tk-peek-linkedit:focus { outline: none; border-color: var(--accent); background: var(--bg-elev); }
body.vf-studio .tk-peek-linkopen { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--accent); text-decoration: none; border: 1px solid var(--line); }
body.vf-studio .tk-peek-linkopen:hover { background: var(--bg-tint); }
body.vf-studio .tk-peek-prods { display: flex; flex-wrap: wrap; gap: 6px; }
body.vf-studio .tk-peek-prod { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); border-radius: 999px; padding: 3px 11px; }

/* ---- Inline row editing: date picker + assignee popover ---- */
body.vf-studio .tk-row-date { position: relative; cursor: pointer; }
body.vf-studio .tk-row-datelabel { display: inline-block; }
body.vf-studio .tk-row-date:hover .tk-row-datelabel { color: var(--accent); }
/* Empty-date cell: a faint "+ Add date" that fades + slides in on row hover. */
body.vf-studio .tk-row-adddate { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; opacity: 0; transform: translateX(4px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-row:hover .tk-row-adddate,
body.vf-studio .tk-row:focus-within .tk-row-adddate { opacity: 0.85; transform: translateX(0); }
body.vf-studio .tk-row-adddate:hover { opacity: 1 !important; }
body.vf-studio .tk-row-adddate svg { flex: none; }
/* Native date input fills the cell but is invisible — we trigger showPicker() on click. */
body.vf-studio .tk-row-datenative { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; pointer-events: none; }

body.vf-studio .tk-row-people { position: relative; justify-self: end; display: inline-flex; }
body.vf-studio .tk-row-peoplebtn { display: inline-flex; align-items: center; background: none; border: 0; padding: 2px; margin: -2px; cursor: pointer; border-radius: 999px; transition: background 120ms; }
body.vf-studio .tk-row-peoplebtn:hover, body.vf-studio .tk-row-peoplebtn.is-open { background: rgba(10,15,26,0.06); }
body.vf-studio.vf-admin-dark .tk-row-peoplebtn:hover, body.vf-studio.vf-admin-dark .tk-row-peoplebtn.is-open { background: rgba(255,255,255,0.08); }
body.vf-studio .tk-row-peoplebtn .tk-av + .tk-av { margin-left: -8px; }
body.vf-studio .tk-av-add { background: transparent !important; color: var(--accent) !important; border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); font-weight: 700; opacity: 0.5; transition: opacity 120ms; }
body.vf-studio .tk-row:hover .tk-av-add, body.vf-studio .tk-row-peoplebtn:hover .tk-av-add { opacity: 1; }

/* Assignee popover */
body.vf-studio .tk-assignpop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 188px; padding: 6px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(10,15,26,0.18); display: flex; flex-direction: column; gap: 1px; }
body.vf-studio .tk-assignpop-h { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg4); padding: 4px 8px 5px; }
body.vf-studio .tk-assignpop-opt { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg2); transition: background 110ms; }
body.vf-studio .tk-assignpop-opt:hover { background: var(--bg-tint); }
body.vf-studio .tk-assignpop-opt.is-on { color: var(--fg1); }
body.vf-studio .tk-assignpop-name { flex: 1 1 auto; }
body.vf-studio .tk-assignpop-check { flex: none; color: var(--accent); }

/* ---- Pixelated waiting game (greyscale, low-res upscaled) ---- */
body.vf-studio .tk-game-pixel .tk-game-canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---- Purchasing board: tasks-style banded rows ---- */
body.vf-studio .pur-bands { margin-top: 4px; }
body.vf-studio .pur-row { display: flex; align-items: center; gap: 14px; grid-template-columns: none; cursor: default; }
body.vf-studio .pur-row.is-busy { opacity: 0.55; pointer-events: none; }
body.vf-studio .pur-row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
body.vf-studio .pur-row-thumb { flex: none; width: 40px; height: 40px; border-radius: 8px; background-size: cover; background-position: center; background-color: var(--bg-tint); border: 1px solid var(--line); }
body.vf-studio .pur-row-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.vf-studio .pur-row-sub { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--fg3); }
body.vf-studio .pur-row-notes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 440px; }
body.vf-studio .pur-row-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; font-weight: 600; }
body.vf-studio .pur-row-link:hover { text-decoration: underline; }
body.vf-studio .pur-row-actions { flex: none; display: inline-flex; align-items: center; gap: 10px; }
body.vf-studio .pur-band-count { margin-left: 7px; opacity: 0.55; font-variant-numeric: tabular-nums; font-weight: 700; }
body.vf-studio .pur-band-archive { opacity: 0.72; }

/* ============================================================ */
/* Studio dashboard (/admin landing)                            */
/* ============================================================ */
body.vf-studio .dash { display: block; }

/* Full-bleed brand-blue hero banner (breaks out of the padded content column to
   the viewport edges). Pulled up the full nav(74) + content-padding(32) so the
   wallpaper runs to the very top BEHIND the frosted nav — the glass overlays the
   blue, matching the public rentals hero. Inner content is padded down to clear
   the bar. */
body.vf-studio .dash-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: -106px; border-radius: 0; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--vf-blue-500, #2A78EA) 0%, var(--vf-blue-800, #052E6E) 100%); }
body.vf-studio.vf-admin-dark .dash-hero { background: linear-gradient(135deg, var(--vf-blue-800, #052E6E) 0%, var(--vf-blue-900, #03204C) 100%); }
/* Inner content stays aligned to the dashboard's content column */
body.vf-studio .dash-hero-inner { max-width: 1080px; margin: 0 auto; padding: 98px 24px 88px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* Floating utility pills (space toggle + refresh) that bridge the hero/content
   edge in the titlebar, beside the Valley Films button. A solid card-coloured
   pill + shadow so they read over both the blue banner and the page below. */
body.vf-studio .dash-tool { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg2); cursor: pointer; box-shadow: 0 6px 18px rgba(10,15,26,0.14); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
/* Dashboard "edit layout" mode — toggle button + inline editor panel. */
body.vf-studio .dash-editbtn.is-on, body.vf-studio .dash-editbtn.is-on:hover { background: var(--accent-soft); color: var(--vf-blue); border-color: transparent; }
body.vf-studio .dash-editpanel { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-card, 12px); padding: 16px 18px; margin: 0 0 16px; box-shadow: var(--shadow-sm); animation: cal-magic-grow 180ms var(--ease-out); }
body.vf-studio .dash-editpanel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
body.vf-studio .dash-editpanel-title { display: block; font-size: 15px; font-weight: 700; color: var(--fg1); }
body.vf-studio .dash-editpanel-sub { display: block; font-size: var(--fs-meta); color: var(--fg3); margin-top: 2px; max-width: 62ch; line-height: 1.45; }
body.vf-studio .dash-editdone { flex: none; }
body.vf-studio .set-inline-link { color: var(--vf-blue); font-weight: 600; text-decoration: none; }
body.vf-studio .set-inline-link:hover { text-decoration: underline; }
body.vf-studio .dash-tool:hover { color: var(--fg1); transform: translateY(-1px); box-shadow: 0 9px 24px rgba(10,15,26,0.18); }
body.vf-studio .dash-tool svg { width: 17px; height: 17px; }

/* Feature-request popup (dashboard idea button) */
body.vf-studio .feat-backdrop { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10,15,26,0.44); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.vf-studio .feat-modal { width: min(460px, 100%); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 32px 80px rgba(10,15,26,0.34); padding: 22px 24px 20px; }
body.vf-studio .feat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
body.vf-studio .feat-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--fg1); }
body.vf-studio .feat-head-acts { display: inline-flex; align-items: center; gap: 4px; }
body.vf-studio .feat-refresh { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: none; border-radius: 999px; color: var(--fg3); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-refresh:hover { color: var(--vf-blue); background: var(--bg-tint); }
/* Recently shipped recap (bottom of the Features board) */
body.vf-studio .feat-shipped { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
body.vf-studio .feat-shipped-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg4); margin-bottom: 12px; }
body.vf-studio .feat-shipped-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
body.vf-studio .feat-shipped-item { display: flex; align-items: center; gap: 9px; padding: 6px 7px; font-size: 13px; color: var(--fg2); cursor: pointer; border-radius: 8px; transition: background 120ms; }
body.vf-studio .feat-shipped-item:hover { background: var(--bg-tint); }
body.vf-studio .feat-shipped-item:focus-visible { outline: 2px solid var(--vf-blue); outline-offset: -2px; }
/* Clicked open → read the whole request (no crop); chips ride the top line. */
body.vf-studio .feat-shipped-item.is-open { align-items: flex-start; }
body.vf-studio .feat-shipped-item.is-open .feat-shipped-check, body.vf-studio .feat-shipped-item.is-open .feat-shipped-page, body.vf-studio .feat-shipped-item.is-open .feat-shipped-when { margin-top: 1px; }
body.vf-studio .feat-shipped-item.is-open .feat-shipped-text { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
body.vf-studio .feat-shipped-check { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #1F8A47; color: #fff; }
body.vf-studio .feat-shipped-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.vf-studio .feat-shipped-page { flex: none; font-size: 11px; font-weight: 600; color: var(--fg4); background: var(--bg-tint); border-radius: 999px; padding: 2px 9px; }
body.vf-studio .feat-shipped-when { flex: none; font-size: 11px; color: var(--fg4); min-width: 46px; text-align: right; }
body.vf-studio .feat-close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--fg4); cursor: pointer; padding: 0 2px; }
body.vf-studio .feat-close:hover { color: var(--fg1); }
body.vf-studio .feat-lead { margin: 8px 0 16px; font-size: 13px; color: var(--fg3); line-height: 1.5; }
body.vf-studio .feat-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
body.vf-studio .feat-field > span { font-size: 12px; font-weight: 600; color: var(--fg2); }
body.vf-studio .feat-opt { font-weight: 500; color: var(--fg4); }
body.vf-studio .feat-field input, body.vf-studio .feat-field textarea { border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; background: var(--bg-tint); font: inherit; font-size: 14px; color: var(--fg1); outline: none; resize: vertical; }
body.vf-studio .feat-select { width: 100%; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 32px 10px 12px; background-color: var(--bg-tint); font: inherit; font-size: 14px; color: var(--fg1); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238892A6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
body.vf-studio .feat-select:focus { border-color: var(--vf-blue); }
body.vf-studio .feat-modal { position: relative; }
/* Page combobox (type to filter, or add a new page). */
body.vf-studio .feat-combo { position: relative; }
body.vf-studio .feat-comboinput { width: 100%; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; background: var(--bg-tint); font: inherit; font-size: 14px; color: var(--fg1); outline: none; }
body.vf-studio .feat-comboinput:focus { border-color: var(--vf-blue); }
body.vf-studio .feat-combopop { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 6; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 14px 40px rgba(10,15,26,0.18); padding: 5px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
body.vf-studio .feat-comboopt { text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 13px; color: var(--fg1); cursor: pointer; }
body.vf-studio .feat-comboopt:hover { background: var(--bg-tint); }
body.vf-studio .feat-comboadd { color: var(--vf-blue); font-weight: 600; }
body.vf-studio .feat-combonone { padding: 8px 10px; font-size: 12px; color: var(--fg4); }
/* View Requests — secondary button (opens the board in a new tab). */
body.vf-studio .feat-viewbtn { margin-right: auto; display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-tint); font: inherit; font-size: 13px; font-weight: 600; color: var(--fg1); text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-viewbtn:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .feat-viewbtn:active { transform: scale(0.97); }
/* OTT sparkle burst on Request Feature. */
body.vf-studio .feat-sparkles { position: absolute; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; z-index: 5; }
body.vf-studio .feat-spark { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; animation: feat-spark-burst 950ms cubic-bezier(0.2,0.7,0.3,1) forwards; filter: drop-shadow(0 0 5px currentColor); }
@keyframes feat-spark-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--sc)) rotate(var(--rot)); }
}
body.vf-studio .feat-confetti { display: block; border-radius: 2px; }
body.vf-studio .feat-dot { display: block; border-radius: 50%; }
body.vf-studio .feat-pop { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 6px solid #FFD45E; opacity: 0; animation: feat-pop-ring 620ms ease-out forwards; }
@keyframes feat-pop-ring {
  0%   { opacity: 0.9; transform: scale(0.2); border-width: 7px; }
  100% { opacity: 0; transform: scale(5); border-width: 0.5px; }
}
@media (prefers-reduced-motion: reduce) { body.vf-studio .feat-sparkles { display: none; } }
body.vf-studio .feat-field input:focus, body.vf-studio .feat-field textarea:focus { border-color: var(--vf-blue); }
body.vf-studio .feat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 2px; }
body.vf-studio .feat-err { margin-right: auto; font-size: 12px; color: var(--danger-text); font-weight: 600; }
body.vf-studio .feat-ok { margin-right: auto; font-size: 12px; color: var(--success-text); font-weight: 600; }
/* Priority + Status segmented pickers */
body.vf-studio .feat-segrow { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
body.vf-studio .feat-segfield { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
body.vf-studio .feat-seglabel { font-size: 12px; font-weight: 600; color: var(--fg2); }
/* Feature board priority picker — standard segmented control, buttons fill the field width. */
body.vf-studio .feat-seg { display: flex; }
body.vf-studio .feat-seg .seg-btn { flex: 1; justify-content: center; }
/* "Requested so far" list — comment-style block at the foot of the modal */
body.vf-studio .feat-listblob { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; max-height: 240px; overflow-y: auto; }
body.vf-studio .feat-listh { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg4); margin-bottom: 10px; }
body.vf-studio .feat-liststate { font-size: 13px; color: var(--fg3); padding: 6px 0; }
body.vf-studio .feat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
body.vf-studio .feat-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 12px; }
body.vf-studio .feat-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
body.vf-studio .feat-item-title { font-size: 13px; font-weight: 650; color: var(--fg1); line-height: 1.35; }
body.vf-studio .feat-item-pills { display: inline-flex; align-items: center; gap: 5px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
body.vf-studio .feat-item-copy { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elev); color: var(--fg3); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-item-copy:hover { color: var(--vf-blue); border-color: var(--vf-blue); }
body.vf-studio .feat-item-copy.is-copied { color: var(--success-text); border-color: var(--success-text); background: rgba(47,158,84,0.1); }
body.vf-studio .feat-item-details { font-size: 12px; color: var(--fg2); line-height: 1.45; white-space: pre-wrap; }
body.vf-studio .feat-item-when { font-size: 11px; color: var(--fg4); }

/* ── /admin/features — the Feature Requests board (full page) ── */
body.vf-studio .feat-alllink { margin-right: auto; }
body.vf-studio .feat-page { display: flex; flex-direction: column; gap: 18px; }
/* Area tabs (Films / Rentals / Studio) — internal triage, top of the board. */
body.vf-studio .feat-areatabs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; }
body.vf-studio .feat-areatab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border: 0; background: none; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg3); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-areatab:hover { color: var(--fg1); }
body.vf-studio .feat-areatab.is-on { background: var(--bg-elev); color: var(--fg1); box-shadow: 0 1px 3px rgba(10,15,26,0.12); }
body.vf-studio .feat-areacode { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--fg4); }
body.vf-studio .feat-areatab.is-on .feat-areacode { color: var(--vf-blue); }
body.vf-studio .feat-arean { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--line-strong); color: var(--fg2); font-size: 11px; font-weight: 700; }
body.vf-studio .feat-areatab.is-on .feat-arean { background: var(--vf-blue); color: #fff; }
body.vf-studio .feat-page-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
body.vf-studio .feat-page-stats { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.vf-studio .feat-page-stat { font-size: 13px; color: var(--fg3); }
body.vf-studio .feat-page-stat strong { font-size: 15px; font-weight: 700; color: var(--fg1); margin-right: 3px; }
body.vf-studio .feat-page-baracts { display: inline-flex; align-items: center; gap: 12px; }
body.vf-studio .feat-page-refreshing { font-size: 12px; color: var(--fg4); }
body.vf-studio .feat-bands { display: flex; flex-direction: column; gap: 22px; }
body.vf-studio .feat-band-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
body.vf-studio .feat-band-name { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg2); }
body.vf-studio .feat-band-ip .feat-band-name { color: var(--vf-blue); }
body.vf-studio .feat-band-done .feat-band-name { color: var(--success-text); }
body.vf-studio .feat-band-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg-tint); border: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--fg3); }
body.vf-studio .feat-page-list { gap: 10px; }
body.vf-studio .feat-page-list .feat-item { padding: 13px 15px; }
body.vf-studio .feat-page-list .feat-item.is-done { opacity: 0.6; }
body.vf-studio .feat-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
body.vf-studio .feat-statusseg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 10px; }
body.vf-studio .feat-status-btn { padding: 5px 11px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--fg3); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-status-btn:hover { color: var(--fg1); }
body.vf-studio .feat-status-btn.is-on.feat-st-ns { background: var(--bg-elev); color: var(--fg1); box-shadow: 0 1px 4px rgba(10,15,26,0.12); }
body.vf-studio .feat-status-btn.is-on.feat-st-ip { background: rgba(58,122,212,0.16); color: var(--vf-blue); }
body.vf-studio .feat-status-btn.is-on.feat-st-done { background: rgba(47,158,84,0.16); color: var(--success-text); }
body.vf-studio .feat-status-btn:active { transform: scale(0.96); }

/* /admin/features — page groups with bulleted features + group-level actions. */
body.vf-studio .feat-groups { display: flex; flex-direction: column; gap: 16px; }
body.vf-studio .feat-group { border: 0; border-radius: 16px; background: var(--bg-tint); padding: 8px 16px 12px; }
/* Group tint by priority — High = red, Medium = orange, Low = yellow (consistent). */
body.vf-studio .feat-grp-high { background: rgba(216,52,74,0.11); }
body.vf-studio .feat-grp-medium { background: rgba(231,122,40,0.13); }
body.vf-studio .feat-grp-low { background: rgba(208,156,32,0.14); }
body.vf-studio.vf-admin-dark .feat-grp-high { background: rgba(216,72,92,0.15); }
body.vf-studio.vf-admin-dark .feat-grp-medium { background: rgba(231,122,40,0.15); }
body.vf-studio.vf-admin-dark .feat-grp-low { background: rgba(214,168,50,0.14); }
body.vf-studio .feat-bullet-edit { cursor: pointer; border-radius: 8px; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-bullet-edit:hover { background: rgba(10,15,26,0.05); }
body.vf-studio.vf-admin-dark .feat-bullet-edit:hover { background: rgba(255,255,255,0.06); }
body.vf-studio .feat-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
body.vf-studio .feat-group-headl { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
body.vf-studio .feat-group-name { font-size: 15px; font-weight: 700; color: var(--fg1); }
body.vf-studio .feat-group-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg-tint); border: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--fg3); }
body.vf-studio .feat-group-acts { display: inline-flex; align-items: center; gap: 8px; }
body.vf-studio .feat-copyall, body.vf-studio .feat-shipall { flex: none; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-tint); font: inherit; font-size: 12px; font-weight: 600; color: var(--fg1); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-copyall:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .feat-copyall.is-copied { border-color: var(--success-text); color: var(--success-text); background: rgba(47,158,84,0.1); }
body.vf-studio .feat-shipall { border-color: transparent; background: var(--vf-blue); color: #fff; }
body.vf-studio .feat-shipall:hover { filter: brightness(1.05); }
body.vf-studio .feat-shipall.is-confirm { background: #C42038; }
body.vf-studio .feat-copyall:disabled, body.vf-studio .feat-shipall:disabled { opacity: 0.6; cursor: default; }
body.vf-studio .feat-copyall:active, body.vf-studio .feat-shipall:active { transform: scale(0.97); }
/* Icon-only "Changes shipped" — a compact circular checkmark button. */
body.vf-studio .feat-shipall-ico { width: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
body.vf-studio .feat-grouplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
body.vf-studio .feat-bullet { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(10,15,26,0.04); transition: box-shadow var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-bullet:hover { box-shadow: 0 3px 10px rgba(10,15,26,0.08); }
body.vf-studio .feat-bullet-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fg4); }
body.vf-studio .feat-bullet.is-ip .feat-bullet-dot { background: var(--vf-blue); }
body.vf-studio .feat-bullet-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--fg1); }
body.vf-studio .feat-bullet-ip { flex: none; font-size: 11px; font-weight: 700; color: var(--vf-blue); text-transform: uppercase; letter-spacing: 0.04em; }
body.vf-studio .feat-bullet-prio { flex: none; }
body.vf-studio .feat-bullet.is-done { opacity: 0.55; }
body.vf-studio .feat-bullet-shipped { color: var(--success-text); }
/* Page icon in the group header — glanceable per-section marker. */
body.vf-studio .feat-group-ico { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--bg-tint); border: 1px solid var(--line); color: var(--fg2); }
/* Element-reference + screenshot chips on a request row. */
body.vf-studio .feat-bullet-el, body.vf-studio .feat-bullet-att { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-tint); color: var(--fg3); }
body.vf-studio .feat-bullet-att:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
/* Organise button — sits left of the triage toggle. */
body.vf-studio .feat-organise { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-elev); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg1); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-organise:hover:not(:disabled) { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .feat-organise:disabled { opacity: 0.65; cursor: default; }
body.vf-studio .feat-organise.is-busy svg { animation: featOrganiseSpin 1.1s linear infinite; }
@keyframes featOrganiseSpin { to { transform: rotate(360deg); } }
body.vf-studio .feat-organise-err { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 230; background: var(--bg-elev); border: 1px solid var(--danger-text); color: var(--danger-text); border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 600; box-shadow: 0 12px 36px rgba(10,15,26,0.2); }
/* Dispatch-plan modal. */
body.vf-studio .feat-plan-backdrop { position: fixed; inset: 0; z-index: 230; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10,15,26,0.44); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.vf-studio .feat-plan { width: min(720px, 100%); max-height: min(82vh, 900px); display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 32px 80px rgba(10,15,26,0.34); overflow: hidden; }
body.vf-studio .feat-plan-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
body.vf-studio .feat-plan-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--fg1); }
body.vf-studio .feat-plan-meta { font-size: 12px; color: var(--fg3); font-weight: 600; }
body.vf-studio .feat-plan-est-note { color: var(--fg4); font-weight: 500; }
body.vf-studio .feat-plan-head .feat-close { margin-left: auto; }
body.vf-studio .feat-plan-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 14px; }
body.vf-studio .feat-plan-batch { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); }
body.vf-studio .feat-plan-batchhead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
body.vf-studio .feat-plan-batchpage { font-size: 14px; font-weight: 700; color: var(--fg1); }
body.vf-studio .feat-plan-batchtitle { font-size: 12.5px; color: var(--fg3); }
body.vf-studio .feat-plan-est { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 700; color: var(--vf-blue); background: rgba(9,94,223,0.09); border-radius: 999px; padding: 3px 10px; }
body.vf-studio .feat-plan-instructions { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.5; color: var(--fg1); }
body.vf-studio .feat-plan-merged { margin-top: 8px; font-size: 11.5px; font-style: italic; color: var(--fg4); }
body.vf-studio .feat-plan-uncovered { font-size: 12px; color: var(--warn-text, #B26A00); font-weight: 600; }
body.vf-studio .feat-plan-foot { flex: none; padding: 10px 20px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--fg4); }
/* Bottom-docked request modal (create + edit) — page stays visible above for
   the element picker + screenshot tools. */
body.vf-studio .feat-backdrop.feat-backdrop-dock { align-items: flex-end; justify-content: center; padding: 0 16px 18px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.vf-studio .feat-backdrop-dock .feat-modal { width: min(430px, 100%); box-shadow: 0 18px 60px rgba(10,15,26,0.4); }
/* Annotate toolbar inside the Studio modal. */
body.vf-studio .feat-annotate { margin-bottom: 14px; }
body.vf-studio .feat-annotate-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.vf-studio .feat-annotate-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--line-strong); background: var(--bg-tint); color: var(--fg2); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-annotate-btn:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .feat-annotate-err { font-size: 11.5px; color: var(--danger-text); font-weight: 600; }
body.vf-studio .feat-annotate-chips { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
body.vf-studio .feat-annotate-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--line-strong); background: var(--bg-elev); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--fg2); }
body.vf-studio .feat-annotate-chiptext { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .feat-annotate-imgchip { padding: 3px; border-radius: 8px; }
body.vf-studio .feat-annotate-imgchip img { display: block; height: 42px; border-radius: 6px; }
body.vf-studio .feat-annotate-x { border: 0; background: none; color: var(--fg4); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 4px; }
body.vf-studio .feat-annotate-x:hover { color: var(--danger-text); }
/* Triage toggle sits hard-right of the search row. */
body.vf-studio .feat-triage { margin-left: auto; }
/* Per-item Approve (Suggested lane) — compact green pill that promotes to Queued. */
body.vf-studio .feat-approve { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid #1F8A47; background: rgba(47,158,84,0.1); color: var(--success-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-approve:hover { background: #1F8A47; color: #fff; }
body.vf-studio .feat-approve:active { transform: scale(0.96); }
/* Per-item delete — quiet ghost icon that reddens on hover (sits at the row end). */
body.vf-studio .feat-del { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; border: 0; background: none; color: var(--fg4); cursor: pointer; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-bullet:hover .feat-del, body.vf-studio .feat-del:focus-visible { opacity: 1; }
body.vf-studio .feat-del:hover { background: rgba(196,32,56,0.12); color: var(--danger-text); }
body.vf-studio .feat-del:active { transform: scale(0.92); }
/* Respond-in-chat: same hover-revealed shell as .feat-del, blue on hover. */
body.vf-studio .feat-respondbtn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; border: 0; background: none; color: var(--fg4); cursor: pointer; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-bullet:hover .feat-respondbtn, body.vf-studio .feat-respondbtn:focus-visible, body.vf-studio .feat-respondbtn.is-on { opacity: 1; }
body.vf-studio .feat-respondbtn:hover, body.vf-studio .feat-respondbtn.is-on { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .feat-respondbtn:active { transform: scale(0.92); }
/* The inline composer row under a request. */
body.vf-studio .feat-respond { list-style: none; margin: 2px 0 8px 26px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; }
body.vf-studio .feat-respond-quote { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg3); margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .feat-respond-quotebar { flex: none; width: 3px; height: 16px; border-radius: 2px; background: var(--vf-blue); }
body.vf-studio .feat-respond-ta { width: 100%; min-height: 64px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13.5px; color: var(--fg1); background: var(--bg-elev); outline: none; box-sizing: border-box; }
body.vf-studio .feat-respond-ta:focus { border-color: var(--vf-blue); }
body.vf-studio .feat-respond-actions { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
body.vf-studio .feat-respond-send { border: 1px solid var(--vf-blue); background: var(--vf-blue); color: #fff; border-radius: 999px; height: 30px; padding: 0 14px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: filter var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-respond-send:hover { filter: brightness(1.06); }
body.vf-studio .feat-respond-send:disabled { opacity: 0.55; cursor: default; }
body.vf-studio .feat-respond-cancel { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg3); cursor: pointer; }
body.vf-studio .feat-respond-cancel:hover { color: var(--fg1); }
body.vf-studio .feat-respond-err { font-size: 12px; font-weight: 600; color: var(--danger-text); }
body.vf-studio .feat-respond-sent { font-size: 13px; font-weight: 600; color: var(--success-text, #1F8A47); }
/* Approve-all (group head, Suggested lane) reuses the copy-all shell, green-tinted. */
body.vf-studio .feat-approveall { flex: none; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid #1F8A47; background: rgba(47,158,84,0.1); font: inherit; font-size: 12px; font-weight: 600; color: var(--success-text); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
body.vf-studio .feat-approveall:hover { background: #1F8A47; color: #fff; }
body.vf-studio .feat-approveall:disabled { opacity: 0.6; cursor: default; }
body.vf-studio .feat-approveall:active { transform: scale(0.97); }

/* Notifications guide (Resources → Notifications) — catalogue of notif types. */
/* macOS-style notification cards: app icon + title/body + chips beneath, soft float. */
body.vf-studio .ntf-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 470px; }
/* Notifications settings: one row per notification, with an Off/In-app/Desktop/Both selector. */
body.vf-studio .ntf-prefs { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-width: 760px; }
body.vf-studio .ntf-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
body.vf-studio .ntf-pref-row:last-child { border-bottom: 0; }
body.vf-studio .ntf-pref-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.vf-studio .ntf-pref-name { font-size: 13px; font-weight: 600; color: var(--fg1); }
body.vf-studio .ntf-pref-desc { font-size: 12px; color: var(--fg4); line-height: 1.45; }
body.vf-studio .ntf-pref-seg { flex: none; }
body.vf-studio .ntf-pref-seg .seg-btn { font-size: 12px; padding: 5px 11px; }
body.vf-studio .ntf-pref-seg .seg-btn.is-off { color: var(--fg2); background: var(--vf-bg, #fff); }
@media (max-width: 760px) { body.vf-studio .ntf-pref-row { flex-direction: column; align-items: flex-start; gap: 9px; } body.vf-studio .ntf-pref-seg { align-self: stretch; } body.vf-studio .ntf-pref-seg .seg-btn { flex: 1; } }
/* In-app cues: shown as plain description rows, not notification cards. */
body.vf-studio .ntf-prevlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-width: 560px; }
body.vf-studio .ntf-prev { display: flex; flex-direction: column; gap: 3px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
body.vf-studio .ntf-prev:last-child { border-bottom: 0; }
body.vf-studio .ntf-prev-head { display: flex; align-items: center; gap: 9px; }
body.vf-studio .ntf-prev-name { font-size: 13px; font-weight: 600; color: var(--fg1); }
body.vf-studio .ntf-prev-desc { font-size: 12px; color: var(--fg3); line-height: 1.5; }
/* Each catalogue entry = the notification card on top, then its trigger + chips
   below it (so the card reads as a real notification on its own). */
body.vf-studio .ntf-item { display: flex; flex-direction: column; gap: 8px; }
body.vf-studio .ntf-card { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 26px rgba(10,15,26,0.10), 0 1px 2px rgba(10,15,26,0.06); }
body.vf-studio.vf-admin-dark .ntf-card { box-shadow: 0 10px 26px rgba(0,0,0,0.4); }
body.vf-studio .ntf-item-detail { font-size: 12px; color: var(--fg3); line-height: 1.4; }
body.vf-studio .ntf-item-meta { display: flex; flex-direction: column; gap: 7px; padding: 0 4px; }
body.vf-studio .ntf-item-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--vf-blue); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(9,94,223,0.3); }
body.vf-studio .ntf-item-ico img { width: 24px; height: 24px; object-fit: contain; }
body.vf-studio .ntf-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.vf-studio .ntf-item-toprow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
body.vf-studio .ntf-item-name { font-size: 13px; font-weight: 700; color: var(--fg1); }
body.vf-studio .ntf-item-time { flex: none; font-size: 11px; color: var(--fg4); }
body.vf-studio .ntf-item-trigger { font-size: 12px; color: var(--fg3); line-height: 1.45; }
body.vf-studio .ntf-item-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
body.vf-studio .ntf-chip { font-size: 11px; font-weight: 600; color: var(--fg2); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
body.vf-studio .ntf-foot { font-size: 12px; color: var(--fg3); margin: 4px 2px 0; }
@media (max-width: 640px) {
  body.vf-studio .ntf-list { max-width: none; }
}

/* Icon-only segmented toggle (Settings → Appearance / Page width) */
body.vf-studio .set-theme .kp-eq-cat-icon { width: 52px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
body.vf-studio .set-theme .kp-eq-cat-icon svg { display: block; width: 18px; height: 18px; }

/* Dashboard agenda (1-day / 3-day) */
body.vf-studio .dash-agenda-toggle { display: inline-flex; gap: 2px; background: var(--bg-tint); border-radius: 999px; padding: 2px; }
body.vf-studio .dash-agenda-toggle button { border: 0; background: none; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; color: var(--fg3); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .dash-agenda-toggle button.is-on { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .dash-agenda { display: flex; flex-direction: column; gap: 8px; }
body.vf-studio .dash-agenda-daylabel { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg4); padding: 6px 0 1px; }
body.vf-studio .dash-agenda-empty { font-size: 13px; color: var(--fg4); padding: 4px 2px; }
body.vf-studio .dash-agenda-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--fg1); transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .dash-agenda-item:hover { background: var(--bg-tint); }
body.vf-studio .dash-agenda-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
body.vf-studio .dash-agenda-tag { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vf-blue); }
body.vf-studio .dash-tool.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
body.vf-studio .dash-tool.is-on:hover { color: #fff; }
body.vf-studio .dash-tool.is-spinning svg { animation: dash-refresh-spin 0.8s linear infinite; }
body.vf-studio .dash-hero-clocks { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }
/* Clocks now live in a dashboard card (the old Notepad slot). */
body.vf-studio .d-clocks { grid-area: clocks; }
body.vf-studio .dash-clocks-date { font-size: 12px; font-weight: 600; color: var(--fg3); }
body.vf-studio .dash-clocks-row { display: flex; align-items: flex-start; justify-content: space-around; gap: 16px; flex: 1 1 auto; padding: 10px 0 4px; }
body.vf-studio .dash-clock { display: flex; flex-direction: column; align-items: center; gap: 7px; }
body.vf-studio .dash-clock-face { width: 116px; height: 116px; transition: none; }
/* The full-bleed dash-hero is `width:100vw`, which includes the scrollbar gutter
   and so overflows the page by the scrollbar width when a vertical scrollbar is
   present — that nudged the dashboard off-centre vs other pages. Clip the
   dashboard's own overflow-x (clip, not hidden, so the sticky topbar still works). */
body.vf-studio .admin-dashboard { overflow-x: clip; }
/* Rentals hub — "Force sync from Booqable" button */
body.vf-studio .rentals-sync { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
body.vf-studio .rentals-hub-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
body.vf-studio .rentals-hub-actions .rentals-sync { margin: 0; }
body.vf-studio .resources-hub-actions { margin: 0 0 16px; }
/* NotebookLM (Insurance Questions) — a pill button in the WhatsApp-button vein,
   white with the colourful NotebookLM spark mark. */
body.vf-studio .resources-nblm { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--fg1); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .resources-nblm:hover { border-color: #4285F4; box-shadow: 0 2px 12px rgba(66,133,244,0.18); transform: translateY(-1px); }
body.vf-studio .resources-nblm:active { transform: scale(0.98); }
body.vf-studio .resources-nblm-mark { display: inline-flex; align-items: center; }
body.vf-studio .resources-nblm-ext { color: var(--fg4); }
/* Document-examples card — same size as the hub cards, but holds 3 open links. */
body.vf-studio .res-docs-card { cursor: default; }
body.vf-studio .res-docs-card:hover { transform: none; }
body.vf-studio .res-docs-links { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
body.vf-studio .res-docs-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-tint); text-decoration: none; color: var(--fg1); font-size: 13px; font-weight: 600; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
body.vf-studio .res-docs-link:hover { border-color: var(--vf-blue); background: var(--bg-elev); }
body.vf-studio .res-docs-open { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--vf-blue); }
/* Resources → Document examples: one block holding the three example links. */
body.vf-studio .quotes-docblock { margin-top: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); padding: 18px 20px; }
body.vf-studio .quotes-docblock-head { margin-bottom: 14px; }
body.vf-studio .quotes-docblock-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg1); margin: 4px 0 3px; }
body.vf-studio .quotes-docblock-lead { margin: 0; font-size: 13px; color: var(--fg3); }
body.vf-studio .quotes-docblock-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
body.vf-studio .quotes-docblock-link { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-tint); text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .quotes-docblock-link:hover { border-color: var(--vf-blue); background: var(--bg-elev); transform: translateY(-1px); }
body.vf-studio .quotes-docblock-link-t { font-size: 13px; font-weight: 600; color: var(--fg1); }
body.vf-studio .quotes-docblock-link-s { font-size: 12px; color: var(--fg3); }
body.vf-studio .quotes-docblock-link-go { font-size: 12px; font-weight: 600; color: var(--vf-blue); margin-top: 4px; }
@media (max-width: 760px) { body.vf-studio .quotes-docblock-links { grid-template-columns: 1fr; } }
/* Hub action pills — one language across the row (mirrors .resources-nblm):
   neutral white pills with the brand colour confined to the icon, plus a single
   solid-blue primary (the sync button). Replaces the old five-colour row
   (black / light-blue / green / navy / blue). */
body.vf-studio .rentals-whatsapp { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--fg1); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .rentals-whatsapp:hover { border-color: #25D366; box-shadow: 0 2px 12px rgba(37,211,102,0.18); transform: translateY(-1px); }
body.vf-studio .rentals-whatsapp:active { transform: scale(0.97); }
body.vf-studio .rentals-whatsapp-ico { color: #25D366; }
body.vf-studio .rentals-hub-actions .kit-tech-admin-open { border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--fg1); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .rentals-hub-actions .kit-tech-admin-open:hover, body.vf-studio .rentals-hub-actions .kit-tech-admin-open:focus-visible { border-color: var(--vf-blue); box-shadow: 0 2px 12px rgba(9,94,223,0.16); filter: none; transform: translateY(-1px); }
body.vf-studio .rentals-sync-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--vf-blue); background: var(--vf-blue); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .rentals-sync-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
body.vf-studio .rentals-sync-btn:disabled { cursor: default; opacity: 0.8; transform: none; }
body.vf-studio .rentals-sync-btn.is-done { background: #1F8A47; border-color: #1F8A47; }
body.vf-studio .rentals-sync-btn.is-error { background: #C42038; border-color: #C42038; }
body.vf-studio .rentals-sync-btn.is-working .rentals-sync-ico { animation: dash-refresh-spin 0.8s linear infinite; }
body.vf-studio .rentals-sync-msg { font-size: 12px; color: var(--fg2); }
body.vf-studio .rentals-sync-msg.is-error { color: var(--danger-text); }
body.vf-studio .rentals-sync-hint { font-size: 12px; color: var(--fg4); }
/* Quote public-URL chip disabled while a regen is rebuilding the baked HTML */
body.vf-studio .tk-peek-sumpill.is-pending,
body.vf-studio .tk-row-chip.is-pending { opacity: 0.6; cursor: default; }
body.vf-studio .tk-chip-spin { animation: dash-refresh-spin 0.8s linear infinite; }

/* ── Studio notifications bell + dropdown ─────────────────────────────────── */
/* Bell lives INSIDE the nav pill (the menu) as its last item, so it reads as
   part of the menu rather than a separate floating circle. */
body.vf-studio .studio-bell { position: relative; display: inline-flex; align-items: center; margin-left: 2px; }
body.vf-studio .studio-bell-btn { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; border: 0; background: rgba(9,94,223,0.10); color: var(--vf-blue); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .studio-bell-btn:hover, body.vf-studio .studio-bell-btn.is-open { color: var(--vf-blue); background: rgba(9,94,223,0.16); }
body.vf-studio.vf-admin-dark .studio-bell-btn { background: rgba(90,140,235,0.18); color: var(--vf-blue-300); }
body.vf-studio.vf-admin-dark .studio-bell-btn:hover, body.vf-studio.vf-admin-dark .studio-bell-btn.is-open { background: rgba(90,140,235,0.26); color: var(--vf-blue-300); }
body.vf-studio .studio-bell-dot { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #E0604F; color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
body.vf-studio .studio-bell-pop { position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: calc(100vw - 32px); max-height: 460px; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 44px rgba(10,15,26,0.22); z-index: 90; }
body.vf-studio .studio-bell-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px 9px; font-size: 13px; font-weight: 700; color: var(--fg1); position: sticky; top: 0; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
body.vf-studio .studio-bell-head a { font-size: 12px; font-weight: 600; color: var(--vf-blue); text-decoration: none; }
body.vf-studio .studio-bell-state { padding: 22px 16px; text-align: center; font-size: 13px; color: var(--fg4); }
body.vf-studio .studio-bell-list { display: flex; flex-direction: column; }
/* rows — shared by the dropdown + the full page */
body.vf-studio .studio-notif-row { position: relative; width: 100%; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; padding: 11px 15px; text-decoration: none; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .studio-notif-row:hover { background: var(--bg-tint); }
/* Unread — soft tint + blue left accent + bold title + a dot */
body.vf-studio .studio-notif-row.is-unread { background: var(--accent-soft); box-shadow: inset 3px 0 0 #2A78EA; }
body.vf-studio .studio-notif-row.is-unread:hover { background: var(--accent-soft); }
body.vf-studio .studio-notif-row.is-unread .studio-notif-title { font-weight: 700; }
body.vf-studio .studio-notif-unread { flex: none; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #2A78EA; }
body.vf-studio .studio-notif-dot { flex: none; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: #8A93A3; }
body.vf-studio .studio-notif-dot.tk-pill-purple { background: #7C4DE0; }
body.vf-studio .studio-notif-dot.tk-pill-blue { background: #2F7FD8; }
body.vf-studio .studio-notif-dot.tk-pill-green { background: #2FA25B; }
body.vf-studio .studio-notif-dot.tk-pill-amber { background: #E07A2E; }
body.vf-studio .studio-notif-dot.tk-pill-red { background: #C42038; }
body.vf-studio .studio-notif-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body.vf-studio .studio-notif-title { font-size: 13px; font-weight: 600; color: var(--fg1); }
body.vf-studio .studio-notif-detail { font-size: 12px; color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .studio-notif-time { flex: none; font-size: 11px; color: var(--fg4); white-space: nowrap; padding-top: 1px; }
/* mark-all + head actions */
body.vf-studio .studio-bell-headactions { display: inline-flex; align-items: center; gap: 12px; }
body.vf-studio .studio-bell-markall { background: none; border: 0; padding: 0; font-size: 12px; font-weight: 600; color: var(--vf-blue); cursor: pointer; }
body.vf-studio .studio-bell-markall:hover { text-decoration: underline; }
/* full page */
body.vf-studio .studio-notif-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
body.vf-studio .studio-notif-bar-count { font-size: 13px; font-weight: 600; color: var(--fg2); }
body.vf-studio .studio-notif-bar-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body.vf-studio .studio-notif-page { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-elev); }
/* Settings → Default views: per-area rows of label + seg-toggle/dropdown. */
body.vf-studio .set-prefs { display: flex; flex-direction: column; gap: 20px; }
body.vf-studio .set-pref-area { display: flex; flex-direction: column; gap: 9px; }
body.vf-studio .set-pref-area-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg4); }
body.vf-studio .set-pref-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; }
body.vf-studio .set-pref-label { font-size: 13px; font-weight: 600; color: var(--fg2); }
body.vf-studio .set-pref-control { min-width: 0; max-width: 360px; }
body.vf-studio .set-pref-control .seg-toggle { display: flex; }
body.vf-studio .set-pref-control .seg-toggle .seg-btn { flex: 1; justify-content: center; }
@media (max-width: 600px) { body.vf-studio .set-pref-row { grid-template-columns: 1fr; gap: 6px; } }
/* Breathing room between the notification list and the settings blocks below,
   and between consecutive settings blocks (preferences → message sound). */
body.vf-studio .notif-settings-top { margin-top: 30px; }
body.vf-studio .set-block + .set-block { margin-top: 30px; }
body.vf-studio .set-block-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
body.vf-studio .set-shortcut-req { flex: none; white-space: nowrap; }
/* Settings: Sign out tucked to the right of the identity card; theme/width
   render as compact segmented toggles (matching the rest of the admin). */
body.vf-studio .set-id-signout { margin-left: auto; flex: none; align-self: center; }
/* Account bar: avatar + name grow, then a compact password control, then Sign
   out tucked to the far right. */
body.vf-studio .set-id-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
body.vf-studio .set-id-pw { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; flex: 0 1 auto; margin: 0; }
body.vf-studio .set-id-pw .set-pw-input { flex: 0 1 180px; width: 180px; max-width: 38vw; padding: 8px 11px; }
body.vf-studio .set-id-pw .set-pw-msg { font-size: 12px; white-space: nowrap; }
@media (max-width: 760px) { body.vf-studio .set-id-pw { flex: 1 1 100%; order: 3; } body.vf-studio .set-id-pw .set-pw-input { flex: 1 1 auto; width: auto; max-width: none; } }
/* Password: a small text affordance on a second row inside the account card,
   tucked directly under the Sign out button (right-aligned). */
/* Working-hours editor (Settings → System). */
body.vf-studio .set-wh { display: flex; flex-direction: column; gap: 18px; }
body.vf-studio .set-wh-person { display: flex; flex-direction: column; gap: 8px; }
body.vf-studio .set-wh-name { font-size: 14px; font-weight: 700; color: var(--fg1); display: flex; align-items: center; gap: 8px; }
body.vf-studio .set-wh-tz { font-size: 11px; font-weight: 600; color: var(--fg4); background: var(--bg-tint); border-radius: 6px; padding: 1px 7px; }
body.vf-studio .set-wh-days { display: flex; flex-direction: column; gap: 5px; }
body.vf-studio .set-wh-day { display: flex; align-items: center; gap: 8px; min-height: 32px; }
body.vf-studio .set-wh-dow { flex: 0 0 38px; font-size: 12px; font-weight: 700; color: var(--fg3); }
body.vf-studio .set-wh-day.is-off .set-wh-dow { color: var(--fg4); }
body.vf-studio .set-wh-time { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg1); }
body.vf-studio .set-wh-time:focus { outline: none; border-color: var(--vf-blue); }
body.vf-studio .set-wh-dash { color: var(--fg4); }
body.vf-studio .set-wh-off, body.vf-studio .set-wh-on { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--fg4); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
body.vf-studio .set-wh-off:hover { color: var(--danger-text); background: rgba(196,32,56,0.08); }
body.vf-studio .set-wh-on:hover { color: var(--vf-blue); background: var(--accent-soft); }
body.vf-studio .set-id { flex-wrap: wrap; }
body.vf-studio .set-id-pwline { flex: 1 0 100%; display: flex; justify-content: flex-end; margin-top: 4px; }
body.vf-studio .set-pw-link { border: 0; background: none; padding: 1px 2px; font: inherit; font-size: 12px; font-weight: 500; color: var(--fg4); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
body.vf-studio .set-pw-link:hover { color: var(--vf-blue); }
body.vf-studio .set-id-pwline .set-id-pw { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { body.vf-studio .set-id-pwline { justify-content: flex-start; } }
/* Select/deselect chiplets (e.g. sidebar-button picker) — pill row with an icon. */
body.vf-studio .set-chips { flex-wrap: wrap; gap: 8px; }
body.vf-studio .set-chip { display: inline-flex; align-items: center; gap: 7px; }
body.vf-studio .set-chip-ic { display: inline-flex; }
body.vf-studio .set-chip-ic svg { width: 15px; height: 15px; }
body.vf-studio .set-chip:disabled { opacity: 0.42; cursor: default; }
/* Unified multi-select pill (sidebar buttons, team access). Matches the segmented
   control's selected tint when on, so single- and multi-select read as one family. */
body.vf-studio .set-mchips { display: flex; flex-wrap: wrap; gap: 8px; }
body.vf-studio .set-mpill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--bg); color: var(--fg3); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .set-mpill:hover { border-color: var(--line-strong); color: var(--fg1); }
body.vf-studio .set-mpill.is-on { background: var(--accent-soft, rgba(9,94,223,0.12)); border-color: transparent; color: var(--vf-blue); }
body.vf-studio .set-mpill:disabled { opacity: 0.42; cursor: default; }
/* Read-only algorithm breakdown (Settings → Pages → Magic sort). */
body.vf-studio .set-algo { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; max-width: 620px; }
body.vf-studio .set-algo li { font-size: 13px; color: var(--fg2); line-height: 1.5; padding-left: 4px; }
body.vf-studio .set-algo strong { color: var(--fg1); font-weight: 600; }
/* Magic-sort explainer, regrouped into labelled chunks for readability. */
body.vf-studio .set-algo-groups { margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; max-width: 760px; }
body.vf-studio .set-algo-grp h3 { margin: 0 0 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vf-blue); }
body.vf-studio .set-algo-grp ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
body.vf-studio .set-algo-grp li { font-size: 13px; color: var(--fg2); line-height: 1.5; padding-left: 2px; }
body.vf-studio .set-algo-grp strong { color: var(--fg1); font-weight: 600; }
@media (max-width: 760px) { body.vf-studio .set-algo-groups { grid-template-columns: 1fr; gap: 16px; } }
/* A sub-row tucked under a setting (e.g. side-peek left/right under the toggle). */
body.vf-studio .set-subrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
body.vf-studio .set-dash-row.is-dim { opacity: 0.5; }
body.vf-studio .set-seg { align-self: flex-start; }
body.vf-studio .set-seg .seg-btn { flex: 0 0 auto; }
@media (max-width: 760px) { body.vf-studio .set-id { flex-wrap: wrap; } body.vf-studio .set-id-signout { margin-left: 0; width: 100%; } }
/* Settings section tabs (System / Notifications / Dashboard / Shortcuts) */
body.vf-studio .set-tabs { align-self: flex-start; margin: 2px 0 0; flex-wrap: wrap; position: relative; z-index: 1; }
/* Sub-list inside a tab (Pages / Notifications) reads as a drawer pulled out from
   under the tab bar above: same frosted surface, tucked directly beneath (its top
   slips under the bar's rounded edge), only its bottom corners rounded. */
body.vf-studio .set-subtabs { align-self: flex-start; margin: -13px 0 18px; padding: 19px 9px 9px; flex-wrap: wrap; gap: 6px; background: var(--bg-tint); border-radius: 0 0 16px 16px; }
body.vf-studio .set-subtabs .seg-btn { font-size: 12px; padding: 6px 13px; border-radius: 999px; }
/* Connected sub-filter chiplets (mirrors /rentals/equipment): white pill when on,
   light bordered pill when off, no track — reads as a drawer of the main tab bar. */
body.vf-studio .set-subtabs .seg-btn:not(.is-on) { background: var(--bg-elev); border: 1px solid var(--line); }
body.vf-studio .set-subtabs .seg-btn.is-on { background: var(--accent-soft); color: var(--vf-blue); border: 1px solid transparent; }
body.vf-studio .set-tabs .seg-btn { flex: 0 0 auto; }
/* Dashboard widget editor + toggle switch */
body.vf-studio .set-dash { display: flex; flex-direction: column; }
body.vf-studio .set-dash-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
body.vf-studio .set-dash-row:last-child { border-bottom: 0; }
/* Drag-to-reorder dashboard widgets. */
body.vf-studio .set-dash-row.is-draggable { padding-left: 4px; }
body.vf-studio .set-dash-grip { flex: none; display: grid; place-items: center; width: 22px; color: var(--fg4); cursor: grab; }
body.vf-studio .set-dash-row.is-draggable:active .set-dash-grip { cursor: grabbing; }
body.vf-studio .set-dash-row.is-dragging { opacity: 0.4; }
body.vf-studio .set-dash-row.is-over { box-shadow: inset 0 2px 0 var(--vf-blue); }
body.vf-studio .set-dash-row .set-dash-meta { flex: 1 1 auto; min-width: 0; }
body.vf-studio .set-dash-reset { border: 0; background: none; padding: 0 0 0 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--vf-blue); cursor: pointer; text-decoration: underline; }
body.vf-studio .set-dash-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.vf-studio .set-dash-label { font-size: 14px; font-weight: 600; color: var(--fg1); }
body.vf-studio .set-dash-desc { font-size: 12px; color: var(--fg4); }
body.vf-studio .set-switch { flex: none; width: 42px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong, #c8cdd6); cursor: pointer; position: relative; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .set-switch.is-on { background: var(--vf-blue); }
body.vf-studio .set-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10,15,26,0.3); transition: transform var(--dur-fast) var(--ease-out); }
body.vf-studio .set-switch.is-on .set-switch-knob { transform: translateX(18px); }
/* Locked-on switch — "always on" automations: reads as on, but visibly not togglable. */
body.vf-studio .set-switch.is-locked { cursor: default; opacity: 0.6; }
body.vf-studio .set-switch:disabled:not(.is-locked) { cursor: default; opacity: 0.5; }
body.vf-studio .set-dash-subhead { margin: 18px 0 4px; font-size: 13px; font-weight: 600; color: var(--fg2); }
/* Settings → Automations catalogue */
body.vf-studio .set-autos { display: flex; flex-direction: column; }
body.vf-studio .set-auto-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
body.vf-studio .set-auto-row:last-child { border-bottom: 0; }
body.vf-studio .set-auto-row.is-paused .set-auto-main { opacity: 0.5; }
body.vf-studio .set-auto-meta { display: flex; align-items: center; gap: 12px; }
body.vf-studio .set-auto-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.vf-studio .set-auto-name { font-size: 14px; font-weight: 600; color: var(--fg1); }
body.vf-studio .set-auto-desc { font-size: 12px; color: var(--fg4); line-height: 1.45; max-width: 62ch; }
body.vf-studio .set-auto-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
body.vf-studio .set-auto-when { font-size: 12px; color: var(--fg3); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.vf-studio .set-auto-status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 9px; border-radius: 999px; }
body.vf-studio .set-auto-status.is-on { color: var(--success-text); background: rgba(47,158,84,0.14); }
body.vf-studio .set-auto-status.is-off { color: var(--fg4); background: var(--bg-tint); }
@media (max-width: 760px) { body.vf-studio .set-auto-row { flex-direction: column; } body.vf-studio .set-auto-meta { flex-direction: row; align-items: center; } }
/* Dashboard quick-action button bar (configured in Settings → Dashboard). */
body.vf-studio .dash-btnbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
body.vf-studio .dash-actbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong, #c8cdd6); background: var(--bg-elev); color: var(--fg1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .dash-actbtn:hover { background: var(--accent-soft); border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .dash-actbtn:active { transform: translateY(1px); }
body.vf-studio .studio-notif-page .studio-notif-row:last-child { border-bottom: 0; }
/* Swipeable rows (Gmail-style): the row sits opaque over coloured action backings */
body.vf-studio .studio-notif-swipe { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-elev); touch-action: pan-y; }
body.vf-studio .studio-bell-list .studio-notif-swipe:last-child, body.vf-studio .studio-notif-page .studio-notif-swipe:last-child { border-bottom: 0; }
body.vf-studio .studio-notif-swipe .studio-notif-row { border-bottom: 0; background: var(--bg-elev); }
body.vf-studio .studio-notif-swipe .studio-notif-row.is-unread { background: var(--accent-soft); }
body.vf-studio .studio-notif-behind { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; opacity: 0; }
body.vf-studio .studio-notif-behind.left { justify-content: flex-start; background: #2A78EA; }
body.vf-studio .studio-notif-behind.right { justify-content: flex-end; background: #C24A2E; }
body.vf-studio .studio-notif-swipe.is-reading .studio-notif-behind.left { opacity: 1; }
body.vf-studio .studio-notif-swipe.is-dismissing .studio-notif-behind.right { opacity: 1; }
/* Hover action buttons (trackpad/mouse click path; mirror the swipe actions) */
body.vf-studio .studio-notif-actions { position: absolute; top: 50%; right: 9px; transform: translateY(-50%); display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--bg-elev); box-shadow: -10px 0 14px 2px var(--bg-elev); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .studio-notif-row.is-unread .studio-notif-actions { background: #EAF1FE; box-shadow: -10px 0 14px 2px #EAF1FE; }
body.vf-studio .studio-notif-row:hover .studio-notif-actions, body.vf-studio .studio-notif-row:focus-within .studio-notif-actions { opacity: 1; pointer-events: auto; }
body.vf-studio .studio-notif-act { display: grid; place-items: center; width: 27px; height: 27px; border: 0; border-radius: 8px; background: transparent; color: var(--fg3); cursor: pointer; }
body.vf-studio .studio-notif-act:hover { background: var(--bg-tint); color: var(--fg1); }
/* Dark mode: the actions strip used a hardcoded light-blue (#EAF1FE) fade that
   read as a glow over dark rows. Use the dark popup surface for the fade instead. */
body.vf-studio.vf-admin-dark .studio-notif-actions,
body.vf-studio.vf-admin-dark .studio-notif-row.is-unread .studio-notif-actions { background: var(--bg-elev); box-shadow: -10px 0 14px 2px var(--bg-elev); }
body.vf-studio.vf-admin-dark .studio-notif-act:hover { background: rgba(255,255,255,0.10); }
@media (max-width: 760px) { body.vf-studio .studio-bell-pop { width: 320px; } body.vf-studio .studio-notif-actions { opacity: 1; pointer-events: auto; } }

/* ── Claude usage countdown (Max's dashboard) ────────────────────────────── */
body.vf-studio .claude-win { margin: 18px 0 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); }
body.vf-studio .claude-win-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
body.vf-studio .claude-win-spark { color: #C96442; display: inline-flex; align-items: center; flex: none; }
body.vf-studio .claude-win-title { font-size: 13px; font-weight: 700; color: var(--fg1); }
body.vf-studio .claude-win-reset { margin-left: auto; font-size: 12px; color: var(--fg4); font-variant-numeric: tabular-nums; }
body.vf-studio .claude-win-empty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.vf-studio .claude-win-hint { font-size: 12px; color: var(--fg3); }
body.vf-studio .claude-win-hint.claude-win-done { color: var(--success-text); font-weight: 600; }
body.vf-studio .claude-win-btn { padding: 7px 14px; border-radius: 999px; border: 1px solid #C96442; background: #C96442; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: filter var(--dur-fast) var(--ease-out); }
body.vf-studio .claude-win-btn:hover { filter: brightness(1.06); }
body.vf-studio .claude-win-row { display: flex; align-items: center; gap: 9px; }
body.vf-studio .claude-win-count { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--fg1); }
body.vf-studio .claude-win-left { font-size: 12px; color: var(--fg4); }
body.vf-studio .claude-win-resetline { margin: 2px 0 10px; font-size: 12px; color: var(--fg4); font-variant-numeric: tabular-nums; }
body.vf-studio .claude-win-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .claude-win:hover .claude-win-actions, body.vf-studio .claude-win-actions:focus-within { opacity: 1; }
body.vf-studio .claude-win-link { background: none; border: 0; padding: 0; font-size: 12px; font-weight: 600; color: var(--vf-blue); cursor: pointer; }
body.vf-studio .claude-win-time { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg1); }
/* Original style: a clean rounded track with a single terracotta→orange fill. */
body.vf-studio .claude-win-bar { margin-top: 9px; height: 7px; border-radius: 999px; background: rgba(10,15,26,0.08); overflow: hidden; }
body.vf-studio.vf-admin-dark .claude-win-bar { background: rgba(255,255,255,0.10); }
body.vf-studio .claude-win-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #C96442, #E0844F); transition: width 1s linear; }
/* Pace label beside "left in window" */
body.vf-studio .claude-win-pace { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
body.vf-studio .claude-win-pace.is-over { color: #C0431F; background: rgba(224,97,47,0.12); }
body.vf-studio .claude-win-pace.is-under { color: var(--success-text); background: rgba(47,158,84,0.12); }
body.vf-studio .claude-win-pace.is-onpace { color: var(--fg4); background: var(--bg-tint); }
/* Usage ring — click to add 20%; fills the circle to show allowance used */
body.vf-studio .claude-win.has-circle { position: relative; padding-right: 80px; }
body.vf-studio .claude-win-circle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; transition: transform var(--dur-fast) var(--ease-out); }
body.vf-studio .claude-win-circle:hover { transform: translateY(-50%) scale(1.06); }
body.vf-studio .claude-win-circle:focus-visible { outline: 2px solid var(--vf-blue); outline-offset: 2px; }
body.vf-studio .claude-win-circle-pct { font-size: 10px; font-weight: 800; fill: var(--fg1); font-variant-numeric: tabular-nums; }
/* clickable dashboard clock → person's 1-day view */
body.vf-studio .dash-clock.is-clickable { cursor: pointer; border-radius: 12px; transition: transform var(--dur-fast) var(--ease-out); }
body.vf-studio .dash-clock.is-clickable:hover { transform: translateY(-2px); }

/* Password sign-in (login alt link + Settings) */
body.vf-studio .kp-login-altlink { display: block; margin: 10px auto 0; background: none; border: 0; font-size: 13px; font-weight: 600; color: var(--vf-blue); cursor: pointer; }
body.vf-studio .kp-login-altlink:hover { text-decoration: underline; }
body.vf-studio .set-pw { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.vf-studio .set-pw-input { flex: 1 1 240px; min-width: 0; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg1); }
body.vf-studio .set-pw-input:focus { outline: none; border-color: var(--vf-blue); box-shadow: 0 0 0 3px var(--accent-soft); }
body.vf-studio .set-account-email { width: 100%; max-width: 340px; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-tint); color: var(--fg2); cursor: default; }
body.vf-studio .set-home { display: flex; align-items: center; gap: 12px; }
body.vf-studio .set-home-input { max-width: 420px; color: var(--fg1); background: var(--bg-elev); cursor: text; }
body.vf-studio .set-home-input:focus { border-color: var(--vf-blue); outline: none; }
body.vf-studio .set-home-status { flex: none; font-size: 12px; font-weight: 600; color: var(--fg4); }
body.vf-studio .set-home-status.is-saved { color: var(--presence-online, #1F9D55); }
body.vf-studio .set-home-status.is-error { color: var(--danger-text); }
body.vf-studio .set-pw-btn { align-self: flex-start; width: auto; padding: 8px 16px; font-size: 13px; }
body.vf-studio .set-pw-save { flex: none; }
body.vf-studio .set-pw-msg { font-size: 12px; color: var(--fg4); }
body.vf-studio .set-pw-msg.is-saved { color: var(--success-text); }
body.vf-studio .set-pw-msg.is-error, body.vf-studio .set-pw-msg.is-short { color: var(--danger-text); }

/* Dashboard: drop the blue hero banner — flat light dashboard. The titlebar now
   sits at the standard kp-content top padding (32px) below the sticky menu bar,
   like every other admin page (no negative pull tucking the avatar under it). */
body.vf-studio .dash-hero { display: none; }
/* Production board cards: the cover image filled edge-to-edge (the 8px padding
   let the tone gradient show as a "border" around the still). */
body.vf-studio .kcard .still { padding: 0; }
/* Group-by control → a segmented switch with the blue-ish selected style
   (applies to every group-by that uses .tk-cog-bigpills). */
body.vf-studio .tk-cog-bigpills { gap: 3px; background: var(--bg-tint); border-radius: 999px; padding: 3px; }
/* Location filter rendered as a 3-segment toggle (All · Warehouse · Online),
   matching the Sort-By-Group switch but with a leading icon on the two spaces. */
body.vf-studio .tk-loc-bigpills .tk-cog-bigpill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
body.vf-studio .tk-loc-bigpills .tk-cog-bigpill svg { width: 13px; height: 13px; flex: none; }
body.vf-studio .tk-cog-bigpill { background: transparent; }
body.vf-studio .tk-cog-bigpill:not(.is-on):hover { background: rgba(10,15,26,0.06); }
body.vf-studio .tk-cog-bigpill.is-on,
body.vf-studio .tk-cog-bigpill.is-on.is-prio,
body.vf-studio .tk-cog-bigpill.is-on.is-status { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio.vf-admin-dark .tk-cog-bigpill.is-on,
body.vf-studio.vf-admin-dark .tk-cog-bigpill.is-on.is-prio,
body.vf-studio.vf-admin-dark .tk-cog-bigpill.is-on.is-status { background: rgba(80,150,240,0.22); color: #8FB8F5; }
/* Flip-calendar day page beside the clocks — clickable through to the Productions calendar */
/* Compact tear-off calendar — sits to the LEFT of the clocks, small but clickable. */
body.vf-studio .dash-flipcal { align-self: center; width: 40px; flex: 0 0 auto; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: var(--bg-elev); border: 1px solid var(--line); box-shadow: 0 4px 11px rgba(10,15,26,0.12); text-decoration: none; cursor: pointer; transition: transform 160ms var(--st-ease), box-shadow 180ms var(--ease-out); }
body.vf-studio a.dash-flipcal:hover { transform: translateY(-2px); box-shadow: 0 9px 18px rgba(10,15,26,0.18); }
body.vf-studio a.dash-flipcal:focus-visible { outline: 2px solid var(--vf-blue); outline-offset: 2px; }
body.vf-studio .dash-flipcal-month { background: #d8443a; color: #fff; font-size: 6.5px; font-weight: 800; letter-spacing: 0.08em; text-align: center; padding: 2px 0; }
body.vf-studio .dash-flipcal-day { position: relative; font-size: 20px; font-weight: 800; line-height: 1; color: var(--fg1); text-align: center; padding: 5px 0 4px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
body.vf-studio .dash-flipcal-crease { position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: var(--line); box-shadow: 0 1px 0 rgba(255,255,255,0.6); }
body.vf-studio .dash-flipcal-weekday { font-size: 6px; font-weight: 700; letter-spacing: 0.08em; color: var(--fg3); text-align: center; padding: 0 0 5px; }
body.vf-studio.vf-admin-dark .dash-flipcal-crease { box-shadow: 0 1px 0 rgba(0,0,0,0.45); }
/* Compact date chip — sits in the dashboard titlebar tools (left of the space
   selector). Just the day number + 3-letter weekday, as a rounded tool pill. */
body.vf-studio .dash-datechip { width: auto; padding: 0 15px; display: inline-flex; flex-direction: row; align-items: center; gap: 7px; text-decoration: none; }
body.vf-studio .dash-datechip-day { font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--fg1); font-variant-numeric: tabular-nums; }
body.vf-studio .dash-datechip-wd { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--fg4); }
body.vf-studio a.dash-datechip:hover .dash-datechip-day { color: var(--fg1); }
/* Apple-style day/night faces — driven by the CITY's local time, not the app
   theme: white face + dark hands by day, black face + white hands by night. */
body.vf-studio .dash-clock.is-day .dash-clock-rim { fill: #fff; stroke: rgba(10,15,26,0.14); stroke-width: 1.5; }
body.vf-studio .dash-clock.is-day .dash-clock-tick { stroke: rgba(10,30,70,0.40); }
body.vf-studio .dash-clock.is-day .dash-clock-h, body.vf-studio .dash-clock.is-day .dash-clock-m { stroke: #0A1C40; }
body.vf-studio .dash-clock.is-day .dash-clock-pin { fill: #0A1C40; }
body.vf-studio .dash-clock.is-night .dash-clock-rim { fill: #0B1322; stroke: rgba(255,255,255,0.20); stroke-width: 1.5; }
body.vf-studio .dash-clock.is-night .dash-clock-tick { stroke: rgba(255,255,255,0.45); }
body.vf-studio .dash-clock.is-night .dash-clock-h, body.vf-studio .dash-clock.is-night .dash-clock-m { stroke: #fff; }
body.vf-studio .dash-clock.is-night .dash-clock-pin { fill: #fff; }
body.vf-studio .dash-clock-tick { stroke-width: 1.5; }
/* Hour numerals (Apple-clock style) — invert with the day/night face */
body.vf-studio .dash-clock-num { font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.vf-studio .dash-clock.is-day .dash-clock-num { fill: #1A2030; }
body.vf-studio .dash-clock.is-night .dash-clock-num { fill: rgba(255,255,255,0.82); }
body.vf-studio .dash-clock-h { stroke-width: 4; stroke-linecap: round; }
body.vf-studio .dash-clock-m { stroke-width: 3; stroke-linecap: round; }
body.vf-studio .dash-clock-s { stroke: #E0604F; stroke-width: 1.5; stroke-linecap: round; }
body.vf-studio .dash-clock-label { font-size: 11px; font-weight: 600; color: var(--fg3); letter-spacing: 0.03em; }
body.vf-studio .dash-clock { position: relative; }
/* Live "online" presence — sits under the clock label and names whoever has the
   Studio open right now (e.g. "Max online"). Always visible when on; no hover card. */
body.vf-studio .dash-clock-online { display: inline-flex; align-items: center; gap: 5px; max-width: 130px; font-size: 11px; font-weight: 600; color: var(--success-text, #1A7A43); letter-spacing: 0.02em; line-height: 1; white-space: nowrap; }
body.vf-studio .dash-clock-onlinedot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--presence-online, #1F9D55); box-shadow: 0 0 0 2px var(--bg-elev), 0 0 7px rgba(31,157,85,0.5); }

/* Profile + title + action buttons, straddling the hero's lower edge */
body.vf-studio .dash-titlebar { position: relative; z-index: 2; margin: 44px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 760px) { body.vf-studio .dash-titlebar { margin-top: 24px; } }
body.vf-studio .dash-titlebar-id { display: flex; align-items: center; gap: 16px; }
body.vf-studio .dash-hello { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
body.vf-studio .dash-hello-eyebrow { font-size: 12px; font-weight: 600; color: var(--fg4); }
body.vf-studio .dash-hello-name { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; color: var(--fg1); }
body.vf-studio .dash-avatar { width: 76px; height: 76px; border-radius: 999px; display: grid; place-items: center; background-size: cover; background-position: center; color: #fff; font-size: 24px; font-weight: 700; box-shadow: 0 6px 18px rgba(10,15,26,0.18); border: 3px solid var(--bg); }
body.vf-studio .dash-title { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--fg1); margin: 0; }
body.vf-studio .dash-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
body.vf-studio .dash-action { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; text-align: center; transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .dash-action:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* Card grid */
/* minmax(0, …) so the fr tracks can shrink below their content's min-content
   width. Without it, nowrap content in the right column (clocks row, production
   meta) forced that track wider than the 1080 grid box, overflowing the cards
   ~146px past the content column on the right while the grid box stayed 1080 —
   the dashboard looked wider than every other admin page. */
body.vf-studio .dash-grid { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 18px; align-items: stretch;
  grid-template-areas:
    "toptasks clocks"
    "toptasks current"
    "second   current"
    "wide     wide"
    "purchase last"
    "notepad  notepad"; }
body.vf-studio .d-toptasks { grid-area: toptasks; }
body.vf-studio .d-second   { grid-area: second; }
body.vf-studio .d-current  { grid-area: current; }
body.vf-studio .d-wide     { grid-area: wide; }
body.vf-studio .d-purchase { grid-area: purchase; }
body.vf-studio .d-last     { grid-area: last; }
body.vf-studio .d-notepad  { grid-area: notepad; }
/* When the user hides any dashboard widget (Settings → Dashboard), drop the fixed
   named-area template and let the remaining cards flow into the 2-col grid with no
   gaps. The full-width Agenda + Notepad keep their span. */
body.vf-studio .dash-grid.is-trimmed { grid-template-areas: none; grid-auto-flow: row dense; grid-auto-rows: minmax(0, auto); }
body.vf-studio .dash-grid.is-trimmed > .dash-card { grid-area: auto; grid-column: span 1; }
body.vf-studio .dash-grid.is-trimmed > .d-wide { grid-column: 1 / -1; }
body.vf-studio .dash-grid.is-trimmed > .d-notepad { grid-column: 1 / -1; }
/* Notepad card: textarea fills the card; reminder banner sits above it. */
body.vf-studio .d-notepad { min-height: 200px; }
body.vf-studio .dash-notepad-clear { background: none; border: 0; cursor: pointer; }
body.vf-studio .dash-notepad-remind { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line, rgba(9,94,223,0.18)); color: var(--fg2); font-size: 13px; font-weight: 500; animation: cal-magic-grow 180ms var(--ease-out); }
body.vf-studio .dash-notepad-remind-acts { display: inline-flex; align-items: center; gap: 7px; flex: none; }
body.vf-studio .dash-notepad-remind-acts button { border: 0; border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: filter var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .dash-notepad-remind-acts button:active { transform: scale(0.96); }
body.vf-studio .dash-notepad-remind-clear { background: var(--vf-blue); color: #fff; }
body.vf-studio .dash-notepad-remind-clear:hover { filter: brightness(1.06); }
body.vf-studio .dash-notepad-remind-keep { background: var(--bg-tint); color: var(--fg2); }
body.vf-studio .dash-notepad-remind-keep:hover { background: var(--line); }

body.vf-studio .dash-card { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; min-height: 0; }
body.vf-studio .dash-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
body.vf-studio .dash-card-head h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--fg1); }
body.vf-studio .dash-card-link { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; flex: none; }
/* Text links cross-fade colour instead of snapping. */
body.vf-studio .dash-card-link, body.vf-studio .pur-row-link, body.vf-studio .ww-card-addr-link, body.vf-studio .studio-bell-markall, body.vf-studio .hours-notion-link { transition: color var(--dur-fast) var(--ease-soft); }
body.vf-studio .dash-card-link:hover { text-decoration: underline; }
body.vf-studio .dash-card-state { font-size: 13px; color: var(--fg4); padding: 14px 2px; }

body.vf-studio .dash-list { display: flex; flex-direction: column; }
body.vf-studio .dash-li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; text-decoration: none; color: inherit; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); transition: background var(--dur-fast) var(--ease-soft); }
body.vf-studio .dash-li:last-child { border-bottom: 0; }
body.vf-studio .dash-li:hover { background: var(--bg-tint); border-radius: 8px; }
body.vf-studio .dash-li-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .dash-li-date { flex: none; font-size: 12px; color: var(--fg3); font-variant-numeric: tabular-nums; }
body.vf-studio .dash-li-meta { flex: none; max-width: 45%; font-size: 12px; color: var(--fg4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .dash-li .tk-pill { flex: none; }
body.vf-studio .dash-li-prod .dash-li-date { order: -1; min-width: 52px; }

/* Task rows: the whole row background tints by priority — no left rail —
   Immediate vivid red, High red, Medium orange, Low yellow. Location chip +
   status pill on the right. */
body.vf-studio .dash-li-task { --prio: rgba(10,15,26,0.18); border-bottom: 0; border-radius: 8px; padding: 8px 11px; margin-bottom: 3px; cursor: pointer; background: color-mix(in srgb, var(--prio) 13%, transparent); }
body.vf-studio .dash-li-task:last-child { margin-bottom: 0; }
body.vf-studio .dash-li-task:hover { background: color-mix(in srgb, var(--prio) 20%, transparent); }
body.vf-studio .dash-li--immediate { --prio: #F20D2E; }
body.vf-studio .dash-li--high      { --prio: #C42038; }
body.vf-studio .dash-li--medium    { --prio: #E07A2E; }
body.vf-studio .dash-li--low       { --prio: #E0B021; }
body.vf-studio .dash-li--none      { --prio: #94A1B5; }
body.vf-studio .dash-li-loc { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; border-radius: 6px; background: rgba(10,15,26,0.06); color: var(--fg3); }
body.vf-studio .dash-li-loc svg { width: 14px; height: 14px; opacity: 0.85; }
body.vf-studio.vf-admin-dark .dash-li-task { background: color-mix(in srgb, var(--prio) 19%, transparent); }
body.vf-studio.vf-admin-dark .dash-li-task:hover { background: color-mix(in srgb, var(--prio) 27%, transparent); }
body.vf-studio.vf-admin-dark .dash-li--none { --prio: #8C99AE; }
body.vf-studio.vf-admin-dark .dash-li-loc { background: rgba(255,255,255,0.08); }
/* Refresh tool spins while a background stale-while-revalidate is in flight. */
@keyframes dash-refresh-spin { to { transform: rotate(360deg); } }

/* padding-top (+ a hair of left) keeps the first line off the content-box edge —
   without it the caret and tall glyphs/accents on the first row clip at the
   top-left as you start typing (the reset zeroes the textarea's default padding). */
body.vf-studio .dash-notepad-ta { flex: 1 1 auto; width: 100%; min-height: 120px; resize: vertical; border: 0; padding: 3px 1px 0; background: transparent; font: inherit; font-size: 13px; line-height: 1.5; color: var(--fg1); outline: none; }
body.vf-studio .dash-notepad-ta::placeholder { color: var(--fg4); }

@media (max-width: 900px) {
  /* minmax(0,1fr) (not 1fr) so a wide task row can't force the card past the
     viewport — the row shrinks/truncates instead of the card overflowing. */
  body.vf-studio .dash-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toptasks" "clocks" "second" "current" "wide" "purchase" "last" "notepad"; }
  body.vf-studio .dash-clock-face { width: 72px; height: 72px; }
  body.vf-studio .dash-title { font-size: 27px; }
}
@media (max-width: 760px) {
  /* Keep dashboard card contents inside the card on phones — but not the clocks
     card, whose tap/focus popover drops below the clock face and must escape. */
  body.vf-studio .dash-card:not(.d-clocks) { overflow: hidden; }
  body.vf-studio .dash-card { padding: 14px 14px; }
  body.vf-studio .dash-li { gap: 7px; padding: 8px 8px; }
  body.vf-studio .dash-li-meta { max-width: 30%; }
  body.vf-studio .dash-clocks-row { gap: 8px; }
  /* Dashboard task rows: let the title wrap to 2 lines so it reads in full. */
  body.vf-studio .dash-li-task .dash-li-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
}

/* Day / night glyph in the dashboard hero */
body.vf-studio .dash-daynight { display: flex; align-items: center; justify-content: center; margin-right: 4px; }
body.vf-studio .dash-daynight.is-day { color: #FFE08A; }
body.vf-studio .dash-daynight.is-night { color: #DCE6FF; }

/* ---- Peek: production picker, file upload, comments ---- */
body.vf-studio .tk-peek-prodselect { font: inherit; font-size: 13px; color: var(--fg1); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; max-width: 280px; cursor: pointer; }
body.vf-studio .tk-peek-prodselect:focus { outline: none; border-color: var(--accent); background: var(--bg-elev); }
body.vf-studio .tk-peek-upload { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-tint); color: var(--fg2); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-upload:hover { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .tk-peek-upload:disabled { opacity: 0.6; cursor: default; }
body.vf-studio .tk-peek-filechip { display: inline-flex; align-items: center; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 11px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 12px; font-weight: 600; }
body.vf-studio .tk-peek-comments { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; }
body.vf-studio .tk-peek-clist { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 10px; }
body.vf-studio .tk-peek-comment { font-size: 13px; line-height: 1.45; color: var(--fg1); background: var(--bg-tint); border-radius: 8px; padding: 8px 11px; }
body.vf-studio .tk-peek-cstate { font-size: 12px; color: var(--fg4); padding: 6px 0 8px; }
/* Comment author name tag (parsed from the "Name: …" prefix) + @mentions. */
body.vf-studio .tk-peek-cauthor { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; }
body.vf-studio .tk-peek-cauthor .tk-av.sm { width: 18px; height: 18px; font-size: 8px; }
body.vf-studio .tk-peek-cname { font-size: 12px; font-weight: 700; color: var(--fg2); }
body.vf-studio .tk-peek-ctext { display: block; }
body.vf-studio .tk-peek-cmention { color: var(--vf-blue); font-weight: 600; background: var(--accent-soft); border-radius: 6px; padding: 0 4px; }
/* "edited" tag + own-comment edit/delete controls (revealed on hover). */
body.vf-studio .tk-peek-cedited { font-size: 10px; font-weight: 600; color: var(--fg4); letter-spacing: 0.02em; }
body.vf-studio .tk-peek-comment.is-mine { position: relative; }
body.vf-studio .tk-peek-cactions { display: inline-flex; gap: 4px; align-items: center; margin-top: 5px; opacity: 0; transition: opacity 0.12s ease; }
body.vf-studio .tk-peek-comment.is-mine:hover .tk-peek-cactions,
body.vf-studio .tk-peek-comment.is-mine:focus-within .tk-peek-cactions { opacity: 1; }
body.vf-studio .tk-peek-clink { border: 0; background: none; padding: 1px 4px; font: inherit; font-size: 11px; font-weight: 600; color: var(--fg3); cursor: pointer; border-radius: 6px; }
body.vf-studio .tk-peek-clink:hover { background: var(--bg-elev); color: var(--fg1); }
body.vf-studio .tk-peek-clink.danger:hover { color: #d3453b; background: rgba(211,69,59,0.1); }
body.vf-studio .tk-peek-cdelq { font-size: 11px; color: var(--fg3); }
body.vf-studio .tk-peek-cedit { display: flex; flex-direction: column; gap: 6px; }
body.vf-studio .tk-peek-ceditarea { width: 100%; box-sizing: border-box; min-height: 54px; resize: vertical; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg1); font: inherit; font-size: 13px; line-height: 1.4; }
body.vf-studio .tk-peek-ceditarea:focus { outline: none; border-color: var(--accent); }
body.vf-studio .tk-peek-ceditbtns { display: flex; gap: 7px; align-items: center; }
body.vf-studio .tk-peek-ceditbtns .tk-peek-cbtn { padding: 5px 13px; }
body.vf-studio .tk-peek-cghost { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--fg3); cursor: pointer; padding: 5px 6px; }
body.vf-studio .tk-peek-cghost:hover { color: var(--fg1); }
/* @mention picker under the comment box. */
body.vf-studio .tk-peek-caddwrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
body.vf-studio .tk-peek-caddwrap .tk-peek-cadd { flex: 1 1 auto; }
body.vf-studio .tk-peek-mentions { position: absolute; left: 0; right: 0; bottom: calc(100% + 5px); z-index: 40; display: flex; flex-direction: column; gap: 1px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-elev); box-shadow: 0 12px 32px rgba(10,15,26,0.20); }
body.vf-studio .tk-peek-mention-opt { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--fg1); cursor: pointer; }
body.vf-studio .tk-peek-mention-opt:hover { background: var(--bg-tint); }
body.vf-studio .tk-peek-caddrow { display: flex; gap: 8px; }
body.vf-studio .tk-peek-cerr { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--danger-text); }
body.vf-studio .tk-peek-cadd { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; color: var(--fg1); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; }
body.vf-studio .tk-peek-cadd:focus { outline: none; border-color: var(--accent); background: var(--bg-elev); }
body.vf-studio .tk-peek-cadd::placeholder { color: var(--fg4); }
body.vf-studio .tk-peek-cbtn { flex: none; padding: 8px 16px; border-radius: 8px; border: 0; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
body.vf-studio .tk-peek-cbtn:disabled { opacity: 0.5; cursor: default; }

/* ============================================================ */
/* Task peek v2 — wallpaper-header card                         */
/* ============================================================ */
body.vf-studio .tk-peek-v2 { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 88vh; width: min(680px, 100%); }

/* Hero / wallpaper */
body.vf-studio .tk-peek-hero { position: relative; flex: none; padding: 16px 26px 58px; color: #fff; background-size: cover; background-position: center; }
body.vf-studio .tk-peek-hero.is-gradient { background: linear-gradient(140deg, var(--vf-blue-500, #2A78EA) 0%, var(--vf-blue-800, #052E6E) 100%); }
body.vf-studio .tk-peek-hero .tk-peek-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.18); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-hero .tk-peek-close:hover { background: rgba(255,255,255,0.34); }
body.vf-studio .tk-peek-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; padding-right: 40px; }
body.vf-studio .tk-peek-hero-date { position: relative; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; font-variant-numeric: tabular-nums; }
body.vf-studio .tk-peek-hero-adddate { opacity: 0.85; font-weight: 500; }
body.vf-studio .tk-peek-hero-date .tk-row-datenative { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; }
body.vf-studio .tk-peek-hero-pills { display: inline-flex; align-items: center; gap: 8px; }
body.vf-studio .tk-pill-sm select { font-size: 11px; padding: 4px 22px 4px 10px; }
body.vf-studio .tk-peek-hero-main { margin-top: 16px; }
body.vf-studio .tk-peek-v2 .tk-peek-title-input { color: #fff; font-size: 30px; font-weight: 800; margin: 0; padding: 0; border-bottom: 0; text-shadow: 0 1px 14px rgba(0,0,0,0.28); }
body.vf-studio .tk-peek-v2 .tk-peek-title-input::placeholder { color: rgba(255,255,255,0.72); }
body.vf-studio .tk-peek-hero-prod { display: block; margin-top: 3px; }
body.vf-studio .tk-peek-hero-prod .tk-peek-prodselect { background: transparent; border: 0; color: rgba(255,255,255,0.92); font-size: 15px; font-weight: 500; padding: 2px 0; max-width: 100%; cursor: pointer; }
body.vf-studio .tk-peek-hero-prod .tk-peek-prodselect option { color: #1A1F2A; }
/* Location + assignee straddle the hero/body boundary */
body.vf-studio .tk-peek-hero-meta { position: absolute; right: 22px; bottom: -19px; display: inline-flex; align-items: center; gap: 12px; z-index: 2; }
body.vf-studio .tk-peek-loc { width: 46px; height: 36px; border-radius: 12px; border: 0; background: #8A9099; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 5px 14px rgba(10,15,26,0.24); }
body.vf-studio .tk-peek-loc svg { width: 18px; height: 18px; }
body.vf-studio .tk-peek-assign { position: relative; display: inline-flex; }
body.vf-studio .tk-peek-assignbtn { display: inline-flex; align-items: center; border: 0; background: none; padding: 0; cursor: pointer; }
body.vf-studio .tk-peek-assignbtn .tk-av { width: 36px; height: 36px; font-size: 12px; box-shadow: 0 0 0 2px var(--bg-elev); }
body.vf-studio .tk-peek-assignbtn .tk-av + .tk-av { margin-left: -13px; }
body.vf-studio .tk-peek-assign .tk-assignpop { top: calc(100% + 10px); right: 0; }

/* Body */
body.vf-studio .tk-peek-body { flex: 1 1 auto; overflow-y: auto; padding: 30px 26px 22px; background: var(--bg-elev); display: flex; flex-direction: column; gap: 14px; }
body.vf-studio .tk-peek-pills { display: flex; align-items: center; gap: 8px; }
body.vf-studio .tk-peek-pill { padding: 7px 16px; border-radius: 999px; border: 0; background: var(--bg-tint); color: var(--fg2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-pill:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-tint)); }
body.vf-studio .tk-peek-pill.is-on { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .tk-peek-pilladd { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; font-size: 18px; line-height: 1; }
body.vf-studio .tk-peek-pills .tk-peek-save { margin-left: auto; font-size: 12px; color: var(--fg4); }
body.vf-studio .tk-peek-panel { padding: 2px 0; }
body.vf-studio .tk-peek-uploadbtn { margin-top: 10px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-tint); color: var(--fg2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
body.vf-studio .tk-peek-uploadbtn:hover { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .tk-peek-uploadbtn:disabled { opacity: 0.6; cursor: default; }
body.vf-studio .tk-peek-v2 .tk-peek-briefedit { min-height: 92px; background: var(--bg); }
body.vf-studio .tk-peek-v2 .tk-peek-comments { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 14px; }
body.vf-studio .tk-peek-v2 .tk-peek-foot { margin-top: 2px; display: flex; justify-content: flex-end; }

/* ===== Task peek v2 — adjustments (titles, typeahead, footer, comments) ===== */
body.vf-studio .tk-peek-hero-top { padding-right: 0; }
/* Title block shifts down; project subtitle sits ABOVE the task title */
body.vf-studio .tk-peek-hero-main { margin-top: 26px; }
body.vf-studio .tk-peek-hero-prod { display: block; margin: 0 0 2px; position: relative; }
body.vf-studio .tk-peek-prodbtn { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border: 0; background: none; color: rgba(255,255,255,0.9); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; }
body.vf-studio .tk-peek-prodbtn:hover { color: #fff; }
body.vf-studio .tk-peek-prodlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .tk-peek-proddrop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 330px; max-width: 80vw; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(10,15,26,0.24); padding: 8px; }
body.vf-studio .tk-peek-prodsearch { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--fg1); background: var(--bg-tint); outline: none; margin-bottom: 6px; }
body.vf-studio .tk-peek-prodsearch:focus { border-color: var(--accent); background: var(--bg-elev); }
body.vf-studio .tk-peek-prodlist { display: flex; flex-direction: column; gap: 1px; max-height: 244px; overflow-y: auto; }
body.vf-studio .tk-peek-prodopt { flex: 0 0 auto; text-align: left; border: 0; background: none; border-radius: 8px; padding: 8px 10px; line-height: 1.45; font: inherit; font-size: 13px; color: var(--fg1); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .tk-peek-prodopt:hover { background: var(--bg-tint); }
body.vf-studio .tk-peek-prodopt.is-on { background: var(--accent-soft); color: var(--vf-blue); font-weight: 600; }
body.vf-studio .tk-peek-prodnew { color: var(--accent); font-weight: 600; }
body.vf-studio .tk-peek-produnlink { color: var(--fg4); }
/* Picker group headers — the dropdown lists Productions, then Spaces */
body.vf-studio .tk-peek-prodgroup { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg4); padding: 9px 10px 3px; }

/* ===== Production code (Project Name) — copy chip + peek row + details ===== */
body.vf-studio .prod-code-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border: 1px solid var(--line); background: var(--bg-tint); border-radius: 8px; padding: 3px 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em; color: var(--fg2); cursor: copy; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
body.vf-studio .prod-code-chip:hover { color: var(--vf-blue); border-color: var(--vf-blue); background: var(--bg-elev); }
body.vf-studio .prod-code-chip.is-copied { color: #fff; background: var(--vf-blue); border-color: var(--vf-blue); }
body.vf-studio .prod-code-chip.sm { padding: 1px 6px; font-size: 10px; gap: 4px; }
body.vf-studio .prod-code-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .tk-row-title .prod-code-chip { margin-left: 8px; vertical-align: 1px; }
/* Peek code row — locked chip, or the auto-filled template + Set button */
body.vf-studio .prod-peek-docmsg { margin: 9px 2px 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--success-text); }
body.vf-studio .prod-peek-docmsg.is-err { color: var(--danger-text); }
/* Client selector (production peek) — a quote can't be generated without one. */
body.vf-studio .prod-peek-client { position: relative; display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; }
body.vf-studio .prod-peek-client-h { flex: none; font-size: 12px; font-weight: 700; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.04em; }
body.vf-studio .prod-peek-client-cur { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong, #c8cdd6); background: var(--bg-elev); color: var(--fg1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
body.vf-studio .prod-peek-client-cur:hover { border-color: var(--vf-blue); }
body.vf-studio .prod-peek-client-cur svg { flex: none; opacity: 0.6; }
body.vf-studio .prod-peek-client-add { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 11px; border-radius: 999px; border: 1px dashed var(--vf-blue); background: var(--accent-soft); color: var(--vf-blue); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
body.vf-studio .prod-peek-client-add:hover { background: var(--vf-blue); color: #fff; }
body.vf-studio .prod-peek-client.is-empty .prod-peek-client-add { animation: prod-client-nudge 1.8s ease-in-out 2; }
@keyframes prod-client-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(9,94,223,0); } 50% { box-shadow: 0 0 0 4px rgba(9,94,223,0.16); } }
body.vf-studio .prod-peek-client-pop { position: absolute; top: calc(100% + 6px); left: 58px; z-index: 20; width: 280px; max-width: calc(100vw - 60px); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 44px rgba(10,15,26,0.24); padding: 8px; }
body.vf-studio .prod-peek-client-search { width: 100%; font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg1); margin-bottom: 6px; }
body.vf-studio .prod-peek-client-search:focus { outline: none; border-color: var(--vf-blue); }
body.vf-studio .prod-peek-client-list { max-height: 230px; overflow-y: auto; display: flex; flex-direction: column; }
body.vf-studio .prod-peek-client-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--fg1); }
body.vf-studio .prod-peek-client-opt:hover { background: var(--accent-soft); }
body.vf-studio .prod-peek-client-optname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .prod-peek-client-code { flex: none; font-size: 11px; font-weight: 700; color: var(--fg4); font-variant-numeric: tabular-nums; }
body.vf-studio .prod-peek-client-opt.is-clear { color: var(--danger-text); border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; }
body.vf-studio .prod-peek-client-optsub { color: var(--fg4); font-weight: 400; font-size: 12px; }
body.vf-studio .prod-peek-client-empty { padding: 10px; font-size: 12.5px; color: var(--fg4); text-align: center; line-height: 1.4; }
body.vf-studio .prod-peek-client-empty.is-err { color: var(--danger-text); }
/* Quote add-pill nudges blue when it's blocked on picking a client. */
body.vf-studio .tk-peek-addpill.needs-client { border-color: var(--vf-blue); color: var(--vf-blue); }
/* In-Studio full-screen quote editor — fills the content area, sidebar stays. */
body.vf-studio .quote-embed { position: fixed; left: var(--sidebar-w, 248px); top: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-direction: column; background: var(--bg); }
body.vf-studio .quote-embed-bar { flex: none; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg-elev); }
body.vf-studio .quote-embed-back { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-strong, #c8cdd6); background: var(--bg); color: var(--fg1); border-radius: 999px; padding: 6px 13px 6px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .quote-embed-back:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .quote-embed-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--fg1); }
/* Proxied editor controls — the iframe's own toolbar is hidden and its buttons
   surfaced here so the embed has a single clean bar. */
body.vf-studio .quote-embed-actions { flex: none; display: inline-flex; align-items: center; gap: 8px; }
body.vf-studio .quote-embed-autosave { font-size: 11.5px; color: var(--fg4); white-space: nowrap; }
body.vf-studio .quote-embed-act { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-strong, #c8cdd6); background: var(--bg); color: var(--fg1); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
body.vf-studio .quote-embed-act:hover:not(:disabled) { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .quote-embed-act:disabled { opacity: 0.55; cursor: default; }
body.vf-studio .quote-embed-act.is-primary { background: var(--vf-blue); border-color: var(--vf-blue); color: #fff; }
body.vf-studio .quote-embed-act.is-primary:hover:not(:disabled) { filter: brightness(1.07); color: #fff; }
/* Send button: envelope icon + short "Send" label (tooltip carries the full
   "Approve & Send") */
body.vf-studio .quote-embed-send { padding: 6px 14px 6px 11px; }
body.vf-studio .quote-embed-send svg { display: block; }
body.vf-studio .quote-embed-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
body.vf-studio .prod-peek-coderow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
body.vf-studio .prod-peek-codeinput { flex: 1 1 220px; min-width: 0; border: 1px dashed var(--line); border-radius: 8px; padding: 7px 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.01em; color: var(--fg1); background: var(--bg-tint); outline: none; }
body.vf-studio .prod-peek-codeinput:focus { border-color: var(--accent); border-style: solid; background: var(--bg-elev); }
body.vf-studio .prod-peek-codesave { border: 0; border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: var(--vf-blue); cursor: pointer; }
body.vf-studio .prod-peek-codesave:disabled { opacity: 0.55; cursor: default; }
body.vf-studio .prod-peek-codeerr { font-size: 12px; color: var(--danger-text); flex-basis: 100%; }
/* Details grid — label/value rows straight off the Notion production row */
/* Crew editor in the production peek (add/remove the VF team + drop freelancers) */
/* New-production peek: shoot-date fields surfaced on first add. */
body.vf-studio .prod-new-fields { margin-bottom: 6px; }
/* Video type — required, surfaced prominently at the top of the create form. */
body.vf-studio .prod-new-jobtype { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--vf-blue); border-radius: 12px; background: var(--accent-soft); }
body.vf-studio .prod-new-jtlabel { display: block; font-size: 12px; font-weight: 700; color: var(--fg1); margin-bottom: 7px; }
body.vf-studio .prod-new-req { color: var(--vf-blue); font-weight: 600; }
body.vf-studio .prod-new-jtinput { width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--vf-bg, #fff); color: var(--fg1); }
body.vf-studio .prod-new-jtinput:focus { outline: none; border-color: var(--vf-blue); box-shadow: 0 0 0 3px var(--accent-soft); }
body.vf-studio .prod-new-jtchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
body.vf-studio .prod-new-jtchip { border: 1px solid var(--line); background: var(--vf-bg, #fff); color: var(--fg2); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .prod-new-jtchip:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .prod-new-jtchip.is-on { background: var(--vf-blue); border-color: var(--vf-blue); color: #fff; }
/* Job-type pill surfaced on each production row, next to the title. */
body.vf-studio .prod-li-type { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--bg-tint); color: var(--fg3); font-size: 11px; font-weight: 600; vertical-align: middle; white-space: nowrap; }
body.vf-studio .prod-new-hint { margin: 2px 0 12px; font-size: 13px; color: var(--fg3); line-height: 1.5; }
body.vf-studio .prod-new-dates { display: flex; gap: 12px; flex-wrap: wrap; }
body.vf-studio .prod-new-datefield { flex: 1 1 160px; display: flex; flex-direction: column; gap: 5px; }
body.vf-studio .prod-new-datefield > span { font-size: 12px; font-weight: 600; color: var(--fg2); }
body.vf-studio .prod-new-opt { font-weight: 500; color: var(--fg4); }
body.vf-studio .prod-new-datefield input { border: 1px solid var(--line-strong); border-radius: 12px; padding: 9px 12px; background: var(--bg-tint); font: inherit; font-size: 14px; color: var(--fg1); outline: none; }
body.vf-studio .prod-new-datefield input:focus { border-color: var(--vf-blue); }
body.vf-studio .prod-peek-crewedit { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
body.vf-studio .prod-peek-crewedit-h { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg4); margin-bottom: 8px; }
body.vf-studio .prod-peek-crewedit-saving { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fg3); }
body.vf-studio .prod-peek-crewedit-empty { font-size: 13px; color: var(--fg4); }
body.vf-studio .prod-peek-crewedit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.vf-studio .prod-crewchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 4px; border-radius: 999px; background: var(--bg-tint); border: 1px solid var(--line); }
body.vf-studio .prod-crewchip-name { font-size: 12px; font-weight: 600; color: var(--fg1); }
body.vf-studio .prod-crewchip-x { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 0; border-radius: 999px; background: transparent; color: var(--fg4); font-size: 15px; line-height: 1; cursor: pointer; }
body.vf-studio .prod-crewchip-x:hover { background: rgba(214,64,84,0.14); color: var(--danger-text); }
body.vf-studio .prod-crewadd-wrap { position: relative; display: inline-flex; }
body.vf-studio .prod-crewadd-btn { padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--fg2); font-size: 12px; font-weight: 600; cursor: pointer; }
body.vf-studio .prod-crewadd-btn:hover { color: var(--vf-blue); border-color: var(--vf-blue); }
body.vf-studio .prod-crewadd-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 240px; max-width: 80vw; padding: 5px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--line); box-shadow: 0 14px 38px rgba(10,15,26,0.2); display: flex; flex-direction: column; gap: 1px; }
body.vf-studio .prod-crewadd-sec { font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg4); padding: 7px 8px 3px; }
body.vf-studio .prod-crewadd-search { margin: 2px 4px 4px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg1); font: inherit; font-size: 13px; }
body.vf-studio .prod-crewadd-search:focus { outline: none; border-color: var(--vf-blue); }
body.vf-studio .prod-crewadd-list { display: flex; flex-direction: column; gap: 1px; max-height: 240px; overflow-y: auto; }
body.vf-studio .prod-crewadd-state { padding: 8px; font-size: 12px; color: var(--fg4); }
body.vf-studio .prod-crewadd-opt { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }
body.vf-studio .prod-crewadd-opt:hover { background: var(--bg-tint); }
body.vf-studio .prod-crewadd-optname { font-size: 13px; font-weight: 600; color: var(--fg1); }
body.vf-studio .prod-peek-meta { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
body.vf-studio .prod-peek-metarow { display: flex; align-items: baseline; gap: 12px; }
body.vf-studio .prod-peek-metarow.is-block { flex-direction: column; gap: 3px; align-items: stretch; }
body.vf-studio .prod-peek-metarow.is-block .prod-peek-metak { flex: 0 0 auto; }
body.vf-studio .prod-peek-metak { flex: 0 0 104px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg4); }
body.vf-studio .prod-peek-metav { font-size: 13px; color: var(--fg1); min-width: 0; }
body.vf-studio .prod-peek-deliv { white-space: pre-line; line-height: 1.5; color: var(--fg2); }
body.vf-studio .prod-peek-muted { color: var(--fg4); font-style: italic; }
body.vf-studio .prod-peek-clientlogo { max-height: 40px; max-width: 160px; object-fit: contain; display: block; }
body.vf-studio .prod-peek-metav a { color: var(--accent, #095EDF); text-decoration: none; }
body.vf-studio .prod-peek-metav a:hover { text-decoration: underline; }
/* Publishing details — a separated sub-section, only when Project Status = Review F&F. */
body.vf-studio .prod-peek-publishing { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
body.vf-studio .prod-peek-pubh { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg3); }
body.vf-studio .prod-peek-pubrow { display: flex; flex-direction: column; gap: 4px; }
body.vf-studio .prod-peek-pubtext { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg2); white-space: pre-line; }
body.vf-studio .prod-peek-pubthumbs { display: flex; flex-wrap: wrap; gap: 8px; }
body.vf-studio .prod-peek-pubthumb { max-height: 96px; max-width: 100%; border-radius: 6px; object-fit: cover; }
body.vf-studio .prod-peek-pubvideo { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--fg1); text-decoration: none; }
body.vf-studio .prod-peek-pubvideo:hover { background: var(--hover, rgba(0,0,0,0.04)); }
body.vf-studio .prod-peek-pills { display: inline-flex; align-items: center; gap: 6px; }
/* Production peek status pills — restyled to match the task peek (June 2026):
   financial status sits top-right (where the task Status pill is) and the
   production status is a solid left bridge chip (where the task Priority pill
   is). The base .tk-pill tones are translucent/faint over the blue hero, so we
   give these solid fills like .tk-peek-stat-cur / .tk-peek-prio-cur do. */
body.vf-studio .prod-peek-statwrap { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; }
body.vf-studio .prod-peek-priowrap { position: absolute; left: 26px; bottom: -15px; z-index: 2; display: inline-flex; align-items: center; }
body.vf-studio .prod-peek-pill { font-weight: 700; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 5px 14px rgba(10,15,26,0.24); }
body.vf-studio .prod-peek-pill.tk-pill-blue   { background: #2A72C9; color: #fff; }
body.vf-studio .prod-peek-pill.tk-pill-amber  { background: #E07A2E; color: #fff; }
body.vf-studio .prod-peek-pill.tk-pill-purple { background: #7C4DE0; color: #fff; }
body.vf-studio .prod-peek-pill.tk-pill-yellow { background: #E0B021; color: #2E2100; }
body.vf-studio .prod-peek-pill.tk-pill-green  { background: #1F8A47; color: #fff; }
body.vf-studio .prod-peek-pill.tk-pill-grey   { background: #6E7888; color: #fff; }
body.vf-studio .prod-peek-pill.tk-pill-red    { background: #C42038; color: #fff; }
/* Distribution "Live on website" toggle (production peek body). */
body.vf-studio .prod-peek-live { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-tint); }
body.vf-studio .prod-peek-live-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.vf-studio .prod-peek-live-h { font-size: 13.5px; font-weight: 700; color: var(--fg1); }
body.vf-studio .prod-peek-live-sub { font-size: 12px; color: var(--fg3); }
body.vf-studio .prod-peek-live-switch { flex: none; position: relative; width: 42px; height: 25px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .prod-peek-live-switch.is-on { background: #1F8A47; }
body.vf-studio .prod-peek-live-switch:disabled { opacity: 0.55; cursor: default; }
body.vf-studio .prod-peek-live-switch:focus-visible { outline: 2px solid var(--vf-blue); outline-offset: 2px; }
body.vf-studio .prod-peek-live-knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10,15,26,0.3); transition: transform var(--dur-fast) var(--ease-out); }
body.vf-studio .prod-peek-live-switch.is-on .prod-peek-live-knob { transform: translateX(17px); }
body.vf-studio .prod-peek-pill.tk-pill-teal   { background: #0FA3A3; color: #fff; }
/* Clickable status pickers in the production peek hero (financial + project). */
body.vf-studio .prod-peek-pick { position: relative; display: inline-flex; }
body.vf-studio .prod-peek-pickbtn { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; font: inherit; }
body.vf-studio .prod-peek-pickcaret { font-size: 9px; opacity: 0.85; margin-left: 1px; }
body.vf-studio .prod-peek-pickbtn:hover { filter: brightness(1.06); }
body.vf-studio .prod-peek-pickpop { position: absolute; top: calc(100% + 7px); right: 0; z-index: 30; display: flex; flex-direction: column; gap: 5px; padding: 9px; min-width: 188px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 22px 54px rgba(10,15,26,0.32); }
body.vf-studio .prod-peek-pickpop.is-left { right: auto; left: 0; }
body.vf-studio .prod-peek-pickhead { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg4); padding: 1px 3px 3px; }
body.vf-studio .prod-peek-pickopt { display: inline-flex; align-items: center; justify-content: flex-start; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; text-align: left; }
body.vf-studio .prod-peek-pickopt.is-cur { box-shadow: 0 0 0 2px var(--accent); }
body.vf-studio .prod-peek-pickopt:hover { filter: brightness(1.07); }
/* "Link this task?" nudge — a new task is being closed with nothing attached */
body.vf-studio .tk-nudge-overlay { position: fixed; inset: 0; z-index: 240; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10,15,26,0.38); }
body.vf-studio .tk-nudge { width: 380px; max-width: 92vw; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px rgba(10,15,26,0.32); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
body.vf-studio .tk-nudge-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg1); }
body.vf-studio .tk-nudge-copy { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg3); }
body.vf-studio .tk-nudge-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
body.vf-studio .tk-nudge-link { border: 0; border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--vf-blue); cursor: pointer; }
body.vf-studio .tk-nudge-link:hover { filter: brightness(1.07); }
body.vf-studio .tk-nudge-skip { border: 0; background: none; padding: 7px; font: inherit; font-size: 12px; color: var(--fg4); cursor: pointer; }
body.vf-studio .tk-nudge-skip:hover { color: var(--fg1); text-decoration: underline; }
/* Status pill — boosted legibility on the hero (solid pill, bold colored text) */
body.vf-studio .tk-peek-herostatus { background: rgba(255,255,255,0.94); box-shadow: 0 2px 9px rgba(0,0,0,0.20); }
body.vf-studio .tk-peek-herostatus select { font-weight: 700; }
/* Footer row: priority (left) · saved · delete (right) */
body.vf-studio .tk-peek-footrow { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
body.vf-studio .tk-peek-footrow .tk-peek-save { margin-left: auto; font-size: 12px; color: var(--fg4); }
body.vf-studio .tk-peek-footrow .tk-peek-delete { margin-left: 0; }
/* Brief: no resize handle, auto-grows (height set in JS) */
body.vf-studio .tk-peek-v2 .tk-peek-briefedit { resize: none; overflow: hidden; min-height: 84px; }
/* Comments: a distinct panel at the very bottom */
body.vf-studio .tk-peek-v2 .tk-peek-comments { margin-top: 12px; border-top: 0; background: var(--bg-tint); border-radius: 12px; padding: 14px 16px; }
body.vf-studio .tk-peek-v2 .tk-peek-comments .tk-peek-comment { background: var(--bg-elev); }

/* ===== Row hover interactions: assignee fan-out · location toggle · status picker ===== */
/* Assignees */
body.vf-studio .tk-row-people { position: relative; justify-self: end; display: inline-flex; }
body.vf-studio .tk-rowppl-cur { display: inline-flex; transition: opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-rowppl-cur .tk-av + .tk-av { margin-left: -8px; }
body.vf-studio .tk-row-people:hover .tk-rowppl-cur { opacity: 0; }
body.vf-studio .tk-rowppl-pop { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 22px rgba(10,15,26,0.18); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); z-index: 16; }
body.vf-studio .tk-row-people:hover .tk-rowppl-pop { opacity: 1; visibility: visible; pointer-events: auto; }
body.vf-studio .tk-rowppl-opt { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; opacity: 0.4; transition: opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-rowppl-opt.is-on { opacity: 1; }
body.vf-studio .tk-rowppl-opt:hover { opacity: 0.85; }
body.vf-studio .tk-rowppl-opt.is-on .tk-av { box-shadow: 0 0 0 2px var(--accent); }

/* Location */
body.vf-studio .tk-row-loc { position: relative; justify-self: center; display: inline-flex; }
body.vf-studio .tk-rowloc-cur { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 24px; border-radius: 8px; background: var(--bg-tint); color: var(--fg3); transition: opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-rowloc-cur svg { width: 15px; height: 15px; opacity: 0.85; }
body.vf-studio .tk-row-loc:hover .tk-rowloc-cur { opacity: 0; }
body.vf-studio .tk-rowloc-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 22px rgba(10,15,26,0.18); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); z-index: 16; }
body.vf-studio .tk-row-loc:hover .tk-rowloc-pop { opacity: 1; visibility: visible; pointer-events: auto; }
body.vf-studio .tk-rowloc-opt { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 24px; border: 0; border-radius: 8px; background: var(--bg-tint); color: var(--fg3); cursor: pointer; opacity: 0.55; transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-rowloc-opt svg { width: 15px; height: 15px; }
body.vf-studio .tk-rowloc-opt.is-on { opacity: 1; background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .tk-rowloc-opt:hover { opacity: 1; }

/* Status — current pill + click-to-expand picker. (The first-gen hover rules
   that hid .tk-rowstat-cur on row :hover/:focus-within, and the hover-only
   quick-complete tick, are gone — they blanked the status when another
   attribute was clicked. The pop's layout lives in the later flex block.) */
body.vf-studio .tk-row-statuswrap { position: relative; justify-self: end; display: inline-flex; align-items: center; min-height: 30px; }
body.vf-studio .tk-rowstat-cur { transition: opacity 180ms var(--ease-out); }
body.vf-studio .tk-rowstat-opt { cursor: pointer; border: 0; font-size: 12px; }
body.vf-studio .tk-rowstat-opt.is-cur { box-shadow: 0 0 0 2px var(--accent); }

/* Priority group headers read from the colour alone — show just the dot */
body.vf-studio .tk-band-head.is-dotonly { padding: 9px 4px 7px; }
body.vf-studio .tk-band-head.is-dotonly .tk-grp-dot { width: 11px; height: 11px; }
body.vf-studio .tk-locgroup-head.is-dotonly .tk-grp-dot { width: 10px; height: 10px; }
/* + New task floats up and out of the filter row */
/* (.tk-newtask-row retired — the + New task button now sits in the toolbar, left of search) */

/* Compact location filter (Warehouse + Online toggle) */
body.vf-studio .tk-locfilter { display: inline-flex; align-items: center; gap: 2px; flex: none; background: rgba(10,15,26,0.06); border-radius: 999px; padding: 2px; }
body.vf-studio .tk-locfilter-opt { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: 0; border-radius: 999px; background: none; color: var(--fg4); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-locfilter-opt svg { width: 15px; height: 15px; }
body.vf-studio .tk-locfilter-opt:hover { color: var(--fg2); }
body.vf-studio .tk-locfilter-opt.is-on { background: var(--bg-elev); color: var(--vf-blue); box-shadow: 0 1px 2px rgba(10,15,26,0.10); }
body.vf-studio.vf-admin-dark .tk-locfilter { background: rgba(255,255,255,0.08); }

/* ===== Dashboard tweaks: space toggle · new-task in card · feature production ===== */
/* Solid-accent action chip (distinct from the soft status-pill tints below it). */
body.vf-studio .dash-card-newtask { font-size: 12px; font-weight: 600; font-family: inherit; color: #fff; text-decoration: none; padding: 5px 13px; border-radius: 999px; background: var(--accent); border: 0; cursor: pointer; flex: none; transition: filter var(--dur-fast) var(--ease-out); }
body.vf-studio .dash-card-newtask:hover { filter: brightness(1.07); }
/* Right-align "+ New task" with the status pills below it (match the row's 11px inset). */
body.vf-studio .d-toptasks .dash-card-head { padding-right: 11px; }
/* Feature production (heavy weight) + compact rest */
body.vf-studio .dash-prod-feature { display: block; text-decoration: none; color: inherit; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 10px; transition: border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .dash-prod-feature:hover { border-color: var(--accent); }
body.vf-studio .dash-prod-feature-img { display: block; height: 124px; background-size: cover; background-position: center; background-color: var(--bg-tint); }
body.vf-studio .dash-prod-feature-img.is-empty { background: linear-gradient(135deg, var(--accent-soft), var(--bg-tint)); }
body.vf-studio .dash-prod-feature-body { display: block; padding: 11px 13px; }
body.vf-studio .dash-prod-feature-date { display: block; font-size: 12px; color: var(--fg3); font-variant-numeric: tabular-nums; }
body.vf-studio .dash-prod-feature-title { display: block; font-size: 15px; font-weight: 700; color: var(--fg1); margin: 2px 0; line-height: 1.25; }
body.vf-studio .dash-prod-feature-meta { display: block; font-size: 12px; color: var(--fg4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────────
   Tasks rows — inline "shift-left" reveal (replaces the absolute popovers).
   The row is a flex line: a flexible title + a tight right cluster (date ·
   assignee · location · status). Hovering an editable control collapses its
   resting chip and expands the choices INLINE; the flex:1 title shrinks to
   make room, so the row slides left to open space — no floating overlay, no
   white box. Leaving collapses it smoothly back. Authoritative: overrides the
   earlier grid + absolute-popover rules by source order.
   ───────────────────────────────────────────────────────────────────────── */
body.vf-studio .tk-row { position: relative; display: flex; align-items: center; gap: 7px; grid-template-columns: none; }
body.vf-studio .tk-row-title { flex: 1 1 auto; min-width: 24px; }
body.vf-studio .tk-row-date { flex: none; }
body.vf-studio .tk-row-people, body.vf-studio .tk-row-loc, body.vf-studio .tk-row-statuswrap { flex: none; }

/* Assignee */
body.vf-studio .tk-row-people { position: static; display: inline-flex; align-items: center; }
body.vf-studio .tk-rowppl-cur { display: inline-flex; align-items: center; max-width: 132px; overflow: hidden; opacity: 1; transition: max-width 260ms var(--st-ease), opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-rowppl-cur .tk-av + .tk-av { margin-left: -8px; }
body.vf-studio .tk-row-people:hover .tk-rowppl-cur { max-width: 0; opacity: 0; }
body.vf-studio .tk-rowppl-pop { position: static; display: inline-flex; align-items: center; gap: 4px; max-width: 0; overflow: hidden; opacity: 0; padding: 0; background: none; border: 0; box-shadow: none; visibility: visible; pointer-events: none; transform: none; transition: max-width 280ms var(--st-ease), opacity 180ms var(--ease-out); }
body.vf-studio .tk-row-people:hover .tk-rowppl-pop { max-width: 280px; opacity: 1; pointer-events: auto; }
body.vf-studio .tk-rowppl-opt { flex: none; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; opacity: 0.5; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-rowppl-opt:hover { opacity: 1; transform: translateY(-1px); }
body.vf-studio .tk-rowppl-opt.is-on { opacity: 1; }
body.vf-studio .tk-rowppl-opt.is-on .tk-av { box-shadow: 0 0 0 2px var(--accent); }

/* Location */
body.vf-studio .tk-row-loc { position: static; display: inline-flex; align-items: center; width: auto; height: auto; background: none; border-radius: 0; }
body.vf-studio .tk-rowloc-cur { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 24px; border-radius: 8px; background: var(--bg-tint); color: var(--fg3); max-width: 34px; overflow: hidden; opacity: 1; transition: max-width 240ms var(--st-ease), opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-rowloc-cur svg { width: 15px; height: 15px; opacity: 0.85; }
body.vf-studio .tk-row-loc:hover .tk-rowloc-cur { max-width: 0; opacity: 0; }
body.vf-studio .tk-rowloc-pop { position: static; display: inline-flex; align-items: center; gap: 4px; max-width: 0; overflow: hidden; opacity: 0; padding: 0; background: none; border: 0; box-shadow: none; visibility: visible; pointer-events: none; transform: none; transition: max-width 240ms var(--st-ease), opacity 180ms var(--ease-out); }
body.vf-studio .tk-row-loc:hover .tk-rowloc-pop { max-width: 88px; opacity: 1; pointer-events: auto; }
body.vf-studio .tk-rowloc-opt { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 24px; border: 0; border-radius: 8px; background: var(--bg-tint); color: var(--fg3); cursor: pointer; opacity: 0.6; transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-rowloc-opt svg { width: 15px; height: 15px; }
body.vf-studio .tk-rowloc-opt.is-on, body.vf-studio .tk-rowloc-opt:hover { opacity: 1; background: var(--accent-soft); color: var(--vf-blue); }

/* Status */
body.vf-studio .tk-row-statuswrap { position: static; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; justify-content: flex-end; }
body.vf-studio .tk-rowstat-cur { display: inline-flex; max-width: 170px; overflow: hidden; white-space: nowrap; opacity: 1; transition: max-width 240ms var(--st-ease), opacity 180ms var(--ease-out); }
body.vf-studio .tk-row-statuswrap:hover .tk-rowstat-cur { max-width: 0; opacity: 0; }
body.vf-studio .tk-rowstat-done { position: static; transform: none; flex: none; width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #4FB06A; background: #C8F0CF; color: #1A6B33; border-radius: 999px; cursor: pointer; max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-width 220ms var(--st-ease), opacity 180ms var(--ease-out); }
body.vf-studio .tk-row:hover .tk-rowstat-done { max-width: 34px; opacity: 1; pointer-events: auto; }
body.vf-studio .tk-row-statuswrap:hover .tk-rowstat-done { max-width: 0; opacity: 0; pointer-events: none; }
body.vf-studio .tk-rowstat-done:hover { background: #B6E9BF; }
body.vf-studio .tk-rowstat-pop { position: static; transform: none; display: inline-flex; align-items: center; gap: 4px; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; padding: 0; background: none; border: 0; box-shadow: none; visibility: visible; pointer-events: none; transition: max-width 300ms var(--st-ease), opacity 180ms var(--ease-out); }
body.vf-studio .tk-row-statuswrap:hover .tk-rowstat-pop { max-width: 440px; opacity: 1; pointer-events: auto; }
body.vf-studio .tk-rowstat-opt { flex: none; cursor: pointer; border: 0; font-size: 11px; padding: 4px 9px; }
body.vf-studio .tk-rowstat-opt.is-cur { box-shadow: 0 0 0 2px var(--accent); }
body.vf-studio.vf-admin-dark .tk-rowstat-done { background: rgba(70,192,125,0.22); border-color: rgba(70,192,125,0.5); color: #7FD89E; }

/* ─────────────────────────────────────────────────────────────────────────
   Centre-peek v2 — icon-first fields + the same inline hover-reveal as rows.
   Date / Production show just an icon that reveals "+ Date" / "+ Production"
   on hover; Status / Location / Assignee collapse their resting chip and fan
   their options out inline. All authoritative (override earlier peek rules).
   ───────────────────────────────────────────────────────────────────────── */
/* Date — calendar icon, "+ Date" slides in on hover when empty */
body.vf-studio .tk-peek-hero-date { display: inline-flex; align-items: center; gap: 6px; position: relative; border: 0; background: none; color: #fff; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; padding: 4px 9px 4px 6px; border-radius: 999px; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-hero-date:hover { background: rgba(255,255,255,0.16); }
body.vf-studio .tk-peek-hero-dateico { flex: none; opacity: 0.92; }
body.vf-studio .tk-peek-hero-datev { font-variant-numeric: tabular-nums; }
body.vf-studio .tk-peek-hero-addlabel { max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; transition: max-width 240ms var(--st-ease), opacity 180ms var(--ease-out); }
body.vf-studio .tk-peek-hero-date:hover .tk-peek-hero-addlabel { max-width: 86px; opacity: 0.96; }

/* Status — inline reveal over the wallpaper. The wrap takes the remaining hero
   width and right-aligns, so the options fan out leftward and stay in the card. */
body.vf-studio .tk-peek-statuswrap { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; }
body.vf-studio .tk-peek-stat-cur { max-width: 180px; overflow: hidden; white-space: nowrap; opacity: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.22); transition: max-width 240ms var(--st-ease), opacity 180ms var(--ease-out); }
/* Click-to-open: the wrapper gets .is-open when the current pill is clicked
   (TkStatPicker). The pill collapses and the options reveal; pick one or click
   away to close. (Was a :hover/:focus-within reveal — now click-driven.) */
body.vf-studio .tk-peek-statuswrap.is-open .tk-peek-stat-cur { max-width: 0; opacity: 0; }
body.vf-studio .tk-peek-stat-pop { display: inline-flex; align-items: center; gap: 5px; max-width: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-width 340ms var(--st-ease), opacity 180ms var(--ease-out); }
body.vf-studio .tk-peek-statuswrap.is-open .tk-peek-stat-pop { max-width: 560px; opacity: 1; pointer-events: auto; }
body.vf-studio .tk-peek-stat-opt { flex: none; cursor: pointer; border: 0; font-size: 11px; padding: 5px 10px; box-shadow: 0 2px 9px rgba(0,0,0,0.2); }
body.vf-studio .tk-peek-stat-opt.is-cur { transform: scale(1.06); box-shadow: 0 4px 13px rgba(0,0,0,0.3); }

/* Production — film-reel icon, "+ Production" slides in on hover when empty */
body.vf-studio .tk-peek-prodbtn { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 0; background: none; color: rgba(255,255,255,0.92); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 3px 8px 3px 5px; border-radius: 999px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-prodbtn:hover { background: rgba(255,255,255,0.16); color: #fff; }
body.vf-studio .tk-peek-prodico { flex: none; opacity: 0.92; }
body.vf-studio .tk-peek-prodlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .tk-peek-prodchev { flex: none; opacity: 0.8; }
body.vf-studio .tk-peek-prodadd { max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; transition: max-width 240ms var(--st-ease), opacity 180ms var(--ease-out); }
body.vf-studio .tk-peek-prodbtn:hover .tk-peek-prodadd { max-width: 130px; opacity: 0.96; }

/* Location — floating chip, inline reveal */
body.vf-studio .tk-peek-locwrap { display: inline-flex; align-items: center; }
body.vf-studio .tk-peek-loc-cur { width: 46px; height: 36px; border-radius: 12px; background: rgba(36,42,54,0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; display: grid; place-items: center; box-shadow: 0 5px 14px rgba(10,15,26,0.26); max-width: 46px; overflow: hidden; transition: max-width 240ms var(--st-ease), opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-loc-cur svg { width: 18px; height: 18px; }
body.vf-studio .tk-peek-locwrap:hover .tk-peek-loc-cur { max-width: 0; opacity: 0; }
body.vf-studio .tk-peek-loc-pop { display: inline-flex; align-items: center; gap: 5px; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 260ms var(--st-ease), opacity 180ms var(--ease-out); }
body.vf-studio .tk-peek-locwrap:hover .tk-peek-loc-pop { max-width: 130px; opacity: 1; }
body.vf-studio .tk-peek-loc-opt { flex: none; width: 44px; height: 36px; border-radius: 12px; border: 0; background: rgba(36,42,54,0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: rgba(255,255,255,0.72); display: grid; place-items: center; cursor: pointer; box-shadow: 0 5px 14px rgba(10,15,26,0.26); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-loc-opt svg { width: 18px; height: 18px; }
body.vf-studio .tk-peek-loc-opt.is-on { background: var(--vf-blue); color: #fff; }
body.vf-studio .tk-peek-loc-opt:hover { background: rgba(9,94,223,0.82); color: #fff; }

/* Assignee — floating avatars, inline reveal */
body.vf-studio .tk-peek-assignwrap { display: inline-flex; align-items: center; }
/* pointer-events:none — the current-assignee avatars are display-only. Without
   this they keep overflowing (max-width:0 on hover) on top of the first popup
   option and swallow the click meant to DESELECT the already-assigned person. */
body.vf-studio .tk-peek-assign-cur { display: inline-flex; align-items: center; max-width: 180px; overflow: visible; opacity: 1; pointer-events: none; transition: max-width 240ms var(--st-ease), opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-assign-cur .tk-av { width: 36px; height: 36px; font-size: 12px; }
body.vf-studio .tk-peek-assign-cur .tk-av + .tk-av { margin-left: -13px; }
body.vf-studio .tk-peek-assignwrap:hover .tk-peek-assign-cur { max-width: 0; opacity: 0; }
body.vf-studio .tk-peek-assign-pop { display: inline-flex; align-items: center; gap: 5px; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 280ms var(--st-ease), opacity 180ms var(--ease-out); }
body.vf-studio .tk-peek-assignwrap:hover .tk-peek-assign-pop { max-width: 280px; opacity: 1; }
body.vf-studio .tk-peek-assign-opt { flex: none; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; opacity: 0.55; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-assign-opt .tk-av { width: 34px; height: 34px; box-shadow: 0 2px 8px rgba(10,15,26,0.3); }
body.vf-studio .tk-peek-assign-opt:hover { opacity: 1; transform: translateY(-1px); }
body.vf-studio .tk-peek-assign-opt.is-on { opacity: 1; }
body.vf-studio .tk-peek-assign-opt.is-on .tk-av { box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(10,15,26,0.3); }

/* Body — link/file summary pills + the hover-expand add */
body.vf-studio .tk-peek-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.vf-studio .tk-peek-sumpill { display: inline-flex; align-items: center; gap: 6px; max-width: 230px; padding: 6px 12px; border-radius: 999px; background: var(--bg-tint); color: var(--fg2); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-sumpill:hover { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .tk-peek-sumlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .tk-peek-sumpill svg { flex: none; opacity: 0.65; }
body.vf-studio .tk-peek-sumpill:hover svg { opacity: 1; }
/* "+ Quote / + Call sheet / + Risk assessment" add buttons in the production peek
   — a dashed, hollow variant so they read as "create" vs the filled doc links. */
body.vf-studio button.tk-peek-addpill { border: 1.5px dashed var(--line); background: transparent; color: var(--fg3); font: inherit; font-size: 12px; font-weight: 600; }
body.vf-studio button.tk-peek-addpill:hover:not(:disabled) { border-color: var(--vf-blue); background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio button.tk-peek-addpill svg { opacity: 1; }
body.vf-studio button.tk-peek-addpill:disabled { opacity: 0.55; cursor: default; }
body.vf-studio .tk-peek-sumpill.is-pending { opacity: 0.55; cursor: default; }
body.vf-studio .tk-peek-add { display: inline-flex; align-items: center; gap: 6px; }
body.vf-studio .tk-peek-add-btn { width: 34px; height: 34px; flex: none; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--bg-tint); color: var(--fg2); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-add:hover .tk-peek-add-btn, body.vf-studio .tk-peek-add:focus-within .tk-peek-add-btn { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .tk-peek-add-opts { display: inline-flex; align-items: center; gap: 6px; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 320ms var(--st-ease), opacity 180ms var(--ease-out); }
body.vf-studio .tk-peek-add:hover .tk-peek-add-opts, body.vf-studio .tk-peek-add:focus-within .tk-peek-add-opts { max-width: 320px; opacity: 1; }
body.vf-studio .tk-peek-add-opt { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--fg2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-peek-add-opt:hover { background: var(--bg-tint); border-color: var(--line-strong); }
body.vf-studio .tk-peek-add-opt svg { flex: none; opacity: 0.7; }
body.vf-studio .tk-peek-linkedit-row { margin-top: 10px; }

/* ─────────────────────────────────────────────────────────────────────────
   Global smoothness pass — unify every hover/transition on one springy ease
   with a touch more duration so the whole back-office glides rather than
   snaps. Scoped to trigger/hover elements; the max-width reveal containers
   keep their own timings but share the easing. Plus soft entrance animations
   for the peek + cog so things ease in.
   ───────────────────────────────────────────────────────────────────────── */
/* One shared S-curve for ALL Studio motion — a gentler in-out than easeInOutCubic
   (softer launch, calmer mid-section) with longer durations, so reveals glide
   rather than snap. Every transition in the portal routes through these vars. */
body.vf-studio { --st-ease: var(--ease-soft); --st-hover: 340ms; --st-rev: 560ms; }

/* =====================================================================
   Shared admin design-system layer — type helpers, state blocks, one
   error banner, one spinner, disabled + scrollbar treatment. Built on
   the colors_and_type.css tokens so the admin stops hand-coding values.
   ===================================================================== */
/* Type roles */
body.vf-studio .st-card-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg1); }
body.vf-studio .st-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg4); }
body.vf-studio .st-eyebrow.is-sm { font-size: 10px; }
body.vf-studio .st-body { font-size: 14px; line-height: 1.5; color: var(--fg2); }
body.vf-studio .st-meta { font-size: var(--fs-meta); color: var(--fg3); }
body.vf-studio .st-mono { font-family: var(--font-mono); }

/* State blocks — distinct loading / empty / error rather than one grey class. */
body.vf-studio .state-empty, body.vf-studio .state-error, body.vf-studio .state-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 44px 16px; color: var(--fg3); }
body.vf-studio .state-empty h3, body.vf-studio .state-error h3 { font-size: 15px; font-weight: 600; color: var(--fg2); margin: 0; }
body.vf-studio .state-empty p, body.vf-studio .state-error p { font-size: var(--fs-meta); color: var(--fg4); margin: 0; max-width: 38ch; }
body.vf-studio .state-error { color: var(--danger-text); }
body.vf-studio .state-error h3 { color: var(--danger-text); }
/* One error banner (replaces adb-flasherr / kp-error-banner / inline reds). */
body.vf-studio .vf-banner-error { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-input); background: var(--danger-soft); color: var(--danger-text); font-size: var(--fs-meta); font-weight: 600; }
body.vf-studio.vf-admin-dark .vf-banner-error { background: rgba(215,38,61,0.16); }
/* Skeleton row — reuses the existing pulse keyframe where present. */
body.vf-studio .state-skel { height: 14px; border-radius: var(--r-xs); background: var(--bg-tint); animation: vf-skel 1.2s var(--ease-soft) infinite; }
@keyframes vf-skel { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }

/* One spinner keyframe (replaces the duplicated 360deg spins). */
@keyframes vf-spin { to { transform: rotate(360deg); } }

/* Consistent disabled treatment for native fields. */
body.vf-studio input:disabled, body.vf-studio textarea:disabled, body.vf-studio select:disabled { opacity: var(--disabled-opacity); cursor: default; }

/* Tokenised custom scrollbars (light + dark via --scroll-thumb). */
body.vf-studio .st-scroll { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
body.vf-studio .st-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
body.vf-studio .st-scroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

/* Press feedback opt-in (gentle, for buttons that want tactile response). */
body.vf-studio .is-pressable { transition: transform var(--dur-fast) var(--ease-soft); }
body.vf-studio .is-pressable:not(:disabled):active { transform: scale(0.97); }
html:has(body.vf-studio) { scroll-behavior: smooth; }
body.vf-studio .navbar-link, body.vf-studio .navbar-badge, body.vf-studio .navbar-sublink,
body.vf-studio .navbar-brand-suffix, body.vf-studio .navbar-icon, body.vf-studio .navbar-avatar,
body.vf-studio .tk-chip, body.vf-studio .tk-chipopt, body.vf-studio .tk-cog-chip,
body.vf-studio .tk-cog, body.vf-studio .tk-refresh, body.vf-studio .tk-addtask,
body.vf-studio .tk-locfilter-opt, body.vf-studio .tk-av, body.vf-studio .tk-pill,
body.vf-studio .tk-row, body.vf-studio .tk-rowloc-opt, body.vf-studio .tk-rowppl-opt,
body.vf-studio .tk-rowstat-done, body.vf-studio .admin-home-card, body.vf-studio .admin-hub-stat,
body.vf-studio .dash-card, body.vf-studio .dash-prod-feature, body.vf-studio .dash-tool,
body.vf-studio .tk-peek-sumpill, body.vf-studio .tk-peek-add-btn,
body.vf-studio .tk-peek-add-opt, body.vf-studio .tk-peek-loc-opt, body.vf-studio .tk-peek-assign-opt,
body.vf-studio .tk-peek-stat-opt, body.vf-studio .tk-peek-hero-date, body.vf-studio .tk-peek-prodbtn,
body.vf-studio .tk-peek-delete, body.vf-studio .tk-peek-cbtn, body.vf-studio .tk-peek-title-input,
body.vf-studio .kp-btn, body.vf-studio .kp-btn-ghost, body.vf-studio .kp-eq-cat,
body.vf-studio .vf-footer-col a, body.vf-studio .vf-footer-appearance, body.vf-studio .set-theme button,
body.vf-studio .tk-row-loc, body.vf-studio .tk-rowloc-now, body.vf-studio .tk-rowloc-next,
body.vf-studio .tk-peek-loc, body.vf-studio .tk-peek-loc-now, body.vf-studio .tk-peek-loc-next {
  transition-timing-function: var(--st-ease);
  transition-duration: var(--st-hover);
}
/* Reveal containers — a long, silky max-width glide so options ease open/closed. */
body.vf-studio .tk-rowppl-cur, body.vf-studio .tk-rowppl-pop,
body.vf-studio .tk-rowstat-cur, body.vf-studio .tk-rowstat-pop,
body.vf-studio .tk-peek-stat-cur, body.vf-studio .tk-peek-stat-pop,
body.vf-studio .tk-peek-assign-cur, body.vf-studio .tk-peek-assign-pop,
body.vf-studio .tk-peek-add-opts, body.vf-studio .tk-peek-hero-addlabel,
body.vf-studio .tk-peek-prodadd, body.vf-studio .tk-rowstat-done {
  transition-property: max-width, opacity, transform;
  transition-duration: var(--st-rev);
  transition-timing-function: var(--st-ease);
}
/* Peek entrance — backdrop fades, card eases up (slower + gentler). */
body.vf-studio .tk-peek-overlay { animation: stPeekFade 300ms var(--st-ease) both; }
body.vf-studio .tk-peek { animation: stPeekPop 500ms var(--st-ease) both; }
@keyframes stPeekFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stPeekPop { from { opacity: 0; transform: translateY(18px) scale(0.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* Cog panel eases in. */
body.vf-studio .tk-cog-panel { animation: stCogIn 380ms var(--st-ease) both; transform-origin: top left; }
@keyframes stCogIn { from { opacity: 0; transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* Undo snackbar slides up. */
body.vf-studio .tk-undo { animation: stUndoIn 440ms var(--st-ease) both; }
@keyframes stUndoIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
/* Nav flyout + filter menu — longer, gentler open/close. */
body.vf-studio .navbar-flyout { transition: opacity 300ms var(--st-ease), transform 480ms var(--st-ease), visibility 0s linear 300ms; }
body.vf-studio .navbar-item:hover > .navbar-flyout, body.vf-studio .navbar-item:focus-within > .navbar-flyout { transition: opacity 260ms var(--st-ease), transform 480ms var(--st-ease), visibility 0s; }
body.vf-studio .tk-filter-menu { transition: opacity 320ms var(--st-ease), transform 500ms var(--st-ease), visibility 0s linear 320ms; }
body.vf-studio .tk-filter:hover .tk-filter-menu, body.vf-studio .tk-filter:focus-within .tk-filter-menu { transition: opacity 260ms var(--st-ease), transform 500ms var(--st-ease), visibility 0s; }
/* Popover menus that mount on open now ease in instead of snapping — matches
   the cog/flyout feel. Downward-opening ones drop in from just above; the
   upward comment @mention picker rises from just below. */
body.vf-studio .cog-select-menu,
body.vf-studio .adb-searchpop,
body.vf-studio .feat-combopop,
body.vf-studio .chat-prodpicker,
body.vf-studio .kit-rank-menu { animation: stMenuIn 200ms var(--st-ease) both; transform-origin: top; }
@keyframes stMenuIn { from { opacity: 0; transform: translateY(-7px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
body.vf-studio .tk-peek-mentions { animation: stMenuUp 200ms var(--st-ease) both; transform-origin: bottom; }
@keyframes stMenuUp { from { opacity: 0; transform: translateY(7px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* Gentle smooth scrolling for the back office (deep-links, focus jumps). */
html:has(body.vf-studio) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  body.vf-studio .tk-peek-overlay, body.vf-studio .tk-peek, body.vf-studio .tk-cog-panel, body.vf-studio .tk-undo { animation: none; }
  html:has(body.vf-studio) { scroll-behavior: auto; }
  /* Honour the OS "reduce motion" preference everywhere in the Studio — kill
     transitions/animations (peek slides, pulses, spins, fades) for users who
     opt out, while keeping the UI fully functional. */
  body.vf-studio *, body.vf-studio *::before, body.vf-studio *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}
/* Tactile press feedback — interactive controls dip slightly on click so the UI
   feels responsive. transform transitions exist on most of these already; a
   crisp press + smooth release reads well. */
body.vf-studio .tk-addtask:active:not(:disabled), body.vf-studio .claude-win-btn:active, body.vf-studio .dash-card-newtask:active, body.vf-studio .kp-btn:active, body.vf-studio .feat-modal .tk-addtask:active { transform: translateY(1px) !important; }
body.vf-studio .dash-tool:active, body.vf-studio .navbar-feat:active, body.vf-studio .chat-side-refresh:active, body.vf-studio .chat-msgsearch-refresh:active, body.vf-studio .msg-peek-btn:active, body.vf-studio .studio-bell-btn:active, body.vf-studio .chat-send:active, body.vf-studio .chat-plus:active { transform: scale(0.92) !important; }
/* The in-search settings (cog) + refresh buttons are vertically centred with
   translateY(-50%); a scale-on-press dropped that centring and made them "bounce
   down". No press animation on these — they keep their centred resting transform. */
body.vf-studio .tk-pill:active, body.vf-studio .feat-seg-btn:active, body.vf-studio .seg-btn:active, body.vf-studio .pur-side-btn:active, body.vf-studio .adb-viewtoggle button:active, body.vf-studio .tk-cog-bigpill:active, body.vf-studio .tk-cog-size:active, body.vf-studio .dash-agenda-toggle button:active { transform: scale(0.96); }
body.vf-studio .chat-chan:active, body.vf-studio .feat-item-copy:active, body.vf-studio .dash-li:active { transform: scale(0.985); }

/* Location preview swap — hovering shows the OTHER location's icon; click switches. */
body.vf-studio .tk-row-loc { position: relative; flex: none; display: inline-grid; place-items: center; width: 34px; height: 24px; border: 0; border-radius: 8px; background: var(--bg-tint); color: var(--fg3); cursor: pointer; padding: 0; overflow: hidden; }
body.vf-studio .tk-row-loc .tk-rowloc-now, body.vf-studio .tk-row-loc .tk-rowloc-next { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; }
body.vf-studio .tk-row-loc svg { width: 15px; height: 15px; }
body.vf-studio .tk-rowloc-next { opacity: 0; color: var(--vf-blue); }
body.vf-studio .tk-row-loc:hover { background: var(--accent-soft); }
body.vf-studio .tk-row-loc:hover .tk-rowloc-now { opacity: 0; }
body.vf-studio .tk-row-loc:hover .tk-rowloc-next { opacity: 1; }
body.vf-studio.vf-admin-dark .tk-row-loc { background: rgba(255,255,255,0.08); }
body.vf-studio .tk-peek-loc { position: relative; display: inline-grid; place-items: center; width: 46px; height: 36px; border: 0; border-radius: 12px; background: rgba(36,42,54,0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; cursor: pointer; box-shadow: 0 5px 14px rgba(10,15,26,0.26); padding: 0; overflow: hidden; }
body.vf-studio .tk-peek-loc .tk-peek-loc-now, body.vf-studio .tk-peek-loc .tk-peek-loc-next { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; }
body.vf-studio .tk-peek-loc svg { width: 18px; height: 18px; }
body.vf-studio .tk-peek-loc-next { opacity: 0; }
body.vf-studio .tk-peek-loc:hover { background: rgba(9,94,223,0.85); }
body.vf-studio .tk-peek-loc:hover .tk-peek-loc-now { opacity: 0; }
body.vf-studio .tk-peek-loc:hover .tk-peek-loc-next { opacity: 1; }

/* Peek status pills — SOLID + high-contrast so they read clearly over the
   wallpaper (the soft tints washed out). Solid colour + white/dark text. */
body.vf-studio .tk-peek-stat-cur, body.vf-studio .tk-peek-stat-opt { font-weight: 700; }
body.vf-studio .tk-peek-stat-cur.tk-pill-yellow, body.vf-studio .tk-peek-stat-opt.tk-pill-yellow { background: #ECB330; color: #2E2100; }
body.vf-studio .tk-peek-stat-cur.tk-pill-blue,   body.vf-studio .tk-peek-stat-opt.tk-pill-blue   { background: #2A72C9; color: #fff; }
body.vf-studio .tk-peek-stat-cur.tk-pill-amber,  body.vf-studio .tk-peek-stat-opt.tk-pill-amber  { background: #E2862E; color: #331F04; }
body.vf-studio .tk-peek-stat-cur.tk-pill-purple, body.vf-studio .tk-peek-stat-opt.tk-pill-purple { background: #7C4DE0; color: #fff; }
body.vf-studio .tk-peek-stat-cur.tk-pill-green,  body.vf-studio .tk-peek-stat-opt.tk-pill-green  { background: #1F8A47; color: #fff; }
body.vf-studio .tk-peek-stat-cur.tk-pill-grey,   body.vf-studio .tk-peek-stat-opt.tk-pill-grey   { background: #6E7888; color: #fff; }
body.vf-studio .tk-peek-stat-opt.is-cur { transform: scale(1.06); box-shadow: 0 5px 14px rgba(0,0,0,0.32); }

/* ─────────────────────────────────────────────────────────────────────────
   Click-to-edit row attributes (no hover). Each attribute opens only when its
   wrap gets .is-open (set on click); hover does nothing. The expand still
   animates on the shared S-curve. Authoritative — overrides the old hover/swap
   rules by source order.
   ───────────────────────────────────────────────────────────────────────── */
/* Hover no longer opens anything (force the closed state on :hover). */
body.vf-studio .tk-row-people:hover .tk-rowppl-cur,
body.vf-studio .tk-row-loc:hover .tk-rowloc-cur,
body.vf-studio .tk-row-statuswrap:hover .tk-rowstat-cur { max-width: 200px; opacity: 1; }
body.vf-studio .tk-row-people:hover .tk-rowppl-pop,
body.vf-studio .tk-row-loc:hover .tk-rowloc-pop,
body.vf-studio .tk-row-statuswrap:hover .tk-rowstat-pop { max-width: 0; opacity: 0; pointer-events: none; }
/* Green quick-complete tick removed entirely. */
body.vf-studio .tk-rowstat-done { display: none !important; }
/* The attributes are click targets. */
body.vf-studio .tk-row-people, body.vf-studio .tk-row-loc, body.vf-studio .tk-row-statuswrap { cursor: pointer; }
body.vf-studio .tk-row-people.is-open, body.vf-studio .tk-row-loc.is-open, body.vf-studio .tk-row-statuswrap.is-open { z-index: 5; }

/* Assignee */
body.vf-studio .tk-row-people { position: static; display: inline-flex; align-items: center; }
body.vf-studio .tk-row-people.is-open .tk-rowppl-cur { max-width: 0; opacity: 0; }
body.vf-studio .tk-row-people.is-open .tk-rowppl-pop { max-width: 280px; opacity: 1; pointer-events: auto; }

/* Location — back to a current icon + a fan-out of both options on click. */
body.vf-studio .tk-row-loc { position: static; display: inline-flex; align-items: center; width: auto; height: auto; background: none; border-radius: 0; padding: 0; overflow: visible; }
body.vf-studio .tk-row-loc:hover { background: none; }
body.vf-studio .tk-rowloc-cur { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 24px; border-radius: 8px; background: var(--bg-tint); color: var(--fg3); max-width: 34px; overflow: hidden; opacity: 1; }
body.vf-studio .tk-rowloc-cur svg { width: 15px; height: 15px; opacity: 0.85; }
body.vf-studio .tk-rowloc-pop { display: inline-flex; align-items: center; gap: 4px; max-width: 0; overflow: hidden; opacity: 0; pointer-events: none; }
body.vf-studio .tk-row-loc.is-open .tk-rowloc-cur { max-width: 0; opacity: 0; }
body.vf-studio .tk-row-loc.is-open .tk-rowloc-pop { max-width: 92px; opacity: 1; pointer-events: auto; }
body.vf-studio .tk-rowloc-opt { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 24px; border: 0; border-radius: 8px; background: var(--bg-tint); color: var(--fg3); cursor: pointer; }
body.vf-studio .tk-rowloc-opt svg { width: 15px; height: 15px; }
body.vf-studio .tk-rowloc-opt.is-on { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio.vf-admin-dark .tk-rowloc-cur, body.vf-studio.vf-admin-dark .tk-rowloc-opt { background: rgba(255,255,255,0.08); }

/* Status */
body.vf-studio .tk-row-statuswrap { position: static; display: inline-flex; align-items: center; justify-content: flex-end; }
body.vf-studio .tk-rowstat-cur { max-width: 170px; opacity: 1; overflow: hidden; }
body.vf-studio .tk-rowstat-pop { max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
body.vf-studio .tk-row-statuswrap.is-open .tk-rowstat-cur { max-width: 0; opacity: 0; }
body.vf-studio .tk-row-statuswrap.is-open .tk-rowstat-pop { max-width: 440px; opacity: 1; pointer-events: auto; }

/* "+ Add date" — always visible, subtle grey by default, blue on hover. */
body.vf-studio .tk-row-adddate { opacity: 1 !important; transform: none !important; color: var(--fg4); }
body.vf-studio .tk-row-date:hover .tk-row-adddate { color: var(--accent); }

/* Left-side complete checkbox — empty rounded square; hover hints green with a
   faint tick; done = solid green + white tick. Click toggles complete. */
body.vf-studio .tk-row-check { flex: none; width: 19px; height: 19px; margin-right: 3px; display: inline-grid; place-items: center; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--bg-elev); color: transparent; cursor: pointer; transition: border-color 200ms var(--st-ease), background 200ms var(--st-ease), color 200ms var(--st-ease); }
body.vf-studio .tk-row-check svg { display: block; }
body.vf-studio .tk-row-check:hover { border-color: var(--success-text); color: var(--success-text); background: rgba(47,162,91,0.12); }
body.vf-studio .tk-row-check.is-done { border-color: #2FA25B; background: #1F8A47; color: #fff; }
body.vf-studio .tk-row-check.is-done:hover { border-color: #258349; background: #258349; }
body.vf-studio.vf-admin-dark .tk-row-check { background: transparent; }
body.vf-studio.vf-admin-dark .tk-row-check:hover { background: rgba(47,162,91,0.16); }
body.vf-studio.vf-admin-dark .tk-row-check.is-done { background: #2FA25B; }

/* ── Fix cropped edges in the inline reveal pickers ──────────────────────────
   The expanded pickers animate max-width with overflow:hidden, so anything
   drawn OUTSIDE an option's own box — outer box-shadow rings, drop shadows,
   scale-ups, hover lifts — gets clipped at the container edge. Draw selection
   rings INSIDE the box (border / inset shadow) and give the pops vertical
   breathing room (padding-block doesn't affect the max-width animation). */
body.vf-studio .tk-rowppl-pop, body.vf-studio .tk-rowloc-pop, body.vf-studio .tk-rowstat-pop,
body.vf-studio .tk-peek-assign-pop, body.vf-studio .tk-peek-loc-pop, body.vf-studio .tk-peek-stat-pop {
  padding-block: 4px; margin-block: -4px;
}
/* Assignee: selected = the avatar's own border turns blue (no outer ring). */
body.vf-studio .tk-rowppl-opt.is-on .tk-av { box-shadow: none; border-color: var(--accent); }
body.vf-studio .tk-rowppl-opt:hover { transform: none; }
body.vf-studio .tk-peek-assign-opt .tk-av { box-shadow: none; }
body.vf-studio .tk-peek-assign-opt.is-on .tk-av { box-shadow: none; border-color: var(--vf-blue); }
body.vf-studio .tk-peek-assign-opt:hover { transform: none; }
/* Status: current = inset ring; no scale-up. */
body.vf-studio .tk-rowstat-opt.is-cur { box-shadow: inset 0 0 0 2px var(--accent); }
body.vf-studio .tk-peek-stat-opt.is-cur { transform: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.95), 0 2px 9px rgba(0,0,0,0.2); }

/* Peek priority — bottom-left of the hero, bridging the wallpaper/body edge
   like the location/assignee chips opposite. Solid colours so it reads over
   both surfaces. */
/* (.tk-pill.tk-pill-edit sets position:relative at 3-class specificity — match it.) */
body.vf-studio .tk-pill.tk-peek-prio { position: absolute; left: 26px; bottom: -15px; z-index: 2; box-shadow: 0 5px 14px rgba(10,15,26,0.24); font-weight: 700; }
body.vf-studio .tk-peek-prio.tk-pill-red   { background: #E0314B; color: #fff; }
body.vf-studio .tk-peek-prio.tk-pill-amber { background: #E07A2E; color: #fff; }
body.vf-studio .tk-peek-prio.tk-pill-tan   { background: #ECB330; color: #2E2100; }
body.vf-studio .tk-peek-prio.tk-pill-grey  { background: #6E7888; color: #fff; }
body.vf-studio .tk-peek-prio select { color: inherit; font-weight: inherit; }

/* ── Peek as two blobs: main card + a quieter comments card below ─────────── */
body.vf-studio .tk-peek-stack { margin: auto; width: min(760px, 100%); display: flex; flex-direction: column; gap: 12px; animation: stPeekPop 500ms var(--st-ease) both; }
body.vf-studio .tk-peek { margin: 0; width: 100%; animation: none; }
/* ── Side-peek option (Settings → System "Detail peeks open as"). When body has
   vf-peek-side, the centre modal re-docks as a right-hand side panel — pure CSS,
   and every peek shares .tk-peek-overlay > .tk-peek-stack > .tk-peek so this covers
   them all. The overlay is click-through so the list behind stays usable; close
   the dock with its × or Escape (outside-click-to-close stays centre-mode only). ── */
body.vf-studio.vf-peek-side .tk-peek-overlay { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; pointer-events: none; animation: none; }
body.vf-studio.vf-peek-side .tk-peek-stack { position: fixed; top: 0; right: 0; bottom: 0; margin: 0; width: min(var(--peek-side-w, 540px), calc(100vw - var(--sidebar-w, 0px))); max-width: 100%; gap: 0; pointer-events: auto; overflow-y: auto; background: var(--bg-elev); border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(10,15,26,0.28); animation: tkPeekSlideIn 280ms var(--st-ease) both; }
body.vf-studio.vf-peek-side .tk-peek { width: 100%; margin: 0; min-height: 100%; border: 0; border-radius: 0; box-shadow: none; }
@keyframes tkPeekSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
/* A 540px dock makes no sense on a phone — fall back to the centred modal there. */
@media (max-width: 760px) {
  body.vf-studio.vf-peek-side .tk-peek-overlay { background: rgba(10,15,26,0.44); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 28px 16px; pointer-events: auto; }
  body.vf-studio.vf-peek-side .tk-peek-stack { position: static; inset: auto; width: min(760px, 100%); max-width: 100%; margin: auto; gap: 12px; background: transparent; border-left: 0; box-shadow: none; animation: stPeekPop 500ms var(--st-ease) both; }
  body.vf-studio.vf-peek-side .tk-peek { border-radius: 16px; min-height: 0; }
}
body.vf-studio .tk-peek-comments-blob { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 16px 28px 18px; box-shadow: 0 16px 44px rgba(10,15,26,0.18); opacity: 0.97; }
body.vf-studio .tk-peek-comments-blob .tk-peek-comments { margin: 0; border: 0; padding: 0; background: none; border-radius: 0; }

/* Peek complete tick — bottom-right of the main card, matching the row checkbox. */
body.vf-studio .tk-peek-check { width: 26px; height: 26px; margin: 0 0 0 4px; border-radius: 8px; flex: none; background: #fff; border-color: rgba(10,15,26,0.14); box-shadow: 0 2px 10px rgba(0,0,0,0.22); }
body.vf-studio .tk-peek-check svg { width: 14px; height: 14px; }

/* ── Circular location buttons (the dashboard style, everywhere) ───────────── */
/* Rows: resting chip + the two options become circles; selected = solid blue. */
body.vf-studio .tk-rowloc-cur, body.vf-studio .tk-rowloc-opt { width: 26px; height: 26px; border-radius: 999px; }
body.vf-studio .tk-rowloc-cur { background: var(--bg-tint); color: var(--fg3); max-width: 26px; }
body.vf-studio .tk-rowloc-opt.is-on { background: var(--vf-blue); color: #fff; }
body.vf-studio .tk-rowloc-cur svg, body.vf-studio .tk-rowloc-opt svg { width: 14px; height: 14px; }
/* Peek bridge chip: solid-blue circle (the style from the dashboard). */
body.vf-studio .tk-peek-loc { width: 40px; height: 40px; border-radius: 999px; background: var(--vf-blue); box-shadow: 0 5px 16px rgba(9,94,223,0.4); }
body.vf-studio .tk-peek-loc:hover { background: var(--vf-blue-800, #052E6E); }
body.vf-studio .tk-peek-loc svg { width: 17px; height: 17px; }
/* Dashboard "both" state: Warehouse + Online side by side in a pill. */
body.vf-studio .dash-spaceboth { display: inline-flex; align-items: center; gap: 4px; }
body.vf-studio .dash-spaceboth svg { width: 14px; height: 14px; }
body.vf-studio .dash-spacebtn { width: 64px; } /* constant width in both states — toggling never shifts the layout */

/* ── Purchasing rows in the tasks language: checkbox · title · notes · link chiplet · status ── */
body.vf-studio .pur-row { gap: 10px; }
body.vf-studio .pur-row .tk-row-title { flex: 1 1 auto; min-width: 60px; }
body.vf-studio .pur-row-notes { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; font-size: 12px; color: var(--fg3); }
body.vf-studio .pur-linkpill { flex: none; padding: 4px 11px; font-size: 12px; }

/* ── Filter dropdowns: chrome-less staggered chip stack ──────────────────────
   The white card around the options is gone — the coloured chips themselves
   stack above the trigger and rise in with a slight bottom-up stagger on the
   shared S-curve, matching the inline reveals elsewhere. */
body.vf-studio .tk-filter-menu.tk-chipstack { background: none; border: 0; box-shadow: none; padding: 0; gap: 6px; min-width: 0; align-items: flex-end; }
body.vf-studio .tk-chipstack .tk-chipopt { box-shadow: 0 4px 16px rgba(10,15,26,0.16); min-width: 100px; opacity: 0; transform: translateY(10px); transition: opacity 240ms var(--st-ease), transform 380ms var(--st-ease), background var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-filter:hover .tk-chipstack .tk-chipopt, body.vf-studio .tk-filter:focus-within .tk-chipstack .tk-chipopt { opacity: 1; transform: translateY(0); }
/* Bottom-up stagger (the option nearest the trigger lands first). */
body.vf-studio .tk-chipstack .tk-chipopt:nth-last-child(1) { transition-delay: 0ms; }
body.vf-studio .tk-chipstack .tk-chipopt:nth-last-child(2) { transition-delay: 30ms; }
body.vf-studio .tk-chipstack .tk-chipopt:nth-last-child(3) { transition-delay: 60ms; }
body.vf-studio .tk-chipstack .tk-chipopt:nth-last-child(4) { transition-delay: 90ms; }
body.vf-studio .tk-chipstack .tk-chipopt:nth-last-child(5) { transition-delay: 120ms; }
body.vf-studio.vf-admin-dark .tk-chipstack .tk-chipopt { box-shadow: 0 4px 16px rgba(0,0,0,0.45); }

/* ── Picker chiplets match the resting pill exactly (same size open/closed) ── */
body.vf-studio .tk-rowstat-opt, body.vf-studio .tk-peek-stat-opt { font-size: 12px; padding: 5px 12px; }

/* ── Priority ramp (matches the dashboard): Immediate vivid red · High red ·
      Medium orange · Low yellow ─────────────────────────────────────────── */
body.vf-studio .tk-pill-vividred { background: rgba(242,13,46,0.14); color: #B00A22; }
body.vf-studio.vf-admin-dark .tk-pill-vividred { background: rgba(242,13,46,0.24); color: #FF8A99; }
body.vf-studio .tk-grp-dot.tk-pill-vividred { background: #F20D2E; }
body.vf-studio .tk-grp-dot.tk-pill-red { background: #C42038; }
body.vf-studio .tk-grp-dot.tk-pill-yellow { background: #E0B021; }
/* Bands */
body.vf-studio .tk-band-immediate { background: rgba(242,13,46,0.11); }
body.vf-studio .tk-band-high      { background: rgba(196,32,56,0.10); }
body.vf-studio .tk-band-medium    { background: rgba(224,122,46,0.13); }
body.vf-studio .tk-band-low       { background: rgba(224,176,33,0.15); }
body.vf-studio.vf-admin-dark .tk-band-immediate { background: rgba(242,13,46,0.17); }
body.vf-studio.vf-admin-dark .tk-band-high      { background: rgba(214,64,84,0.13); }
body.vf-studio.vf-admin-dark .tk-band-medium    { background: rgba(224,122,46,0.14); }
body.vf-studio.vf-admin-dark .tk-band-low       { background: rgba(224,176,33,0.13); }
/* Peek priority chip — solid versions on the bridge */
body.vf-studio .tk-peek-prio.tk-pill-vividred { background: #F20D2E; color: #fff; }
body.vf-studio .tk-peek-prio.tk-pill-red { background: #C42038; color: #fff; }
body.vf-studio .tk-peek-prio.tk-pill-yellow { background: #E0B021; color: #2E2100; }

/* ── Peek priority: hover fan-out on the left bridge (same system as status).
      Replaces the old select chip (.tk-peek-prio). Options expand rightward. ── */
body.vf-studio .tk-peek-priowrap { position: absolute; left: 26px; bottom: -15px; z-index: 2; display: inline-flex; align-items: center; gap: 0; }
body.vf-studio .tk-peek-prio-cur { max-width: 150px; overflow: hidden; white-space: nowrap; font-weight: 700; box-shadow: 0 5px 14px rgba(10,15,26,0.24); transition-property: max-width, opacity, padding; transition-duration: var(--st-rev); transition-timing-function: var(--st-ease); }
/* Collapse the padding too — otherwise an invisible ~29px sliver remains and
   the options land right of the resting chip instead of in its place. */
body.vf-studio .tk-peek-priowrap:hover .tk-peek-prio-cur, body.vf-studio .tk-peek-priowrap:focus-within .tk-peek-prio-cur { max-width: 0; opacity: 0; padding-left: 0; padding-right: 0; }
body.vf-studio .tk-peek-prio-pop { display: inline-flex; align-items: center; gap: 5px; max-width: 0; overflow: hidden; opacity: 0; padding-block: 4px; margin-block: -4px; transition-property: max-width, opacity; transition-duration: var(--st-rev); transition-timing-function: var(--st-ease); }
body.vf-studio .tk-peek-priowrap:hover .tk-peek-prio-pop, body.vf-studio .tk-peek-priowrap:focus-within .tk-peek-prio-pop { max-width: 420px; opacity: 1; }
body.vf-studio .tk-peek-prio-opt { flex: none; cursor: pointer; border: 0; font-weight: 700; box-shadow: 0 2px 9px rgba(0,0,0,0.2); }
body.vf-studio .tk-peek-prio-opt.is-cur { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.95), 0 2px 9px rgba(0,0,0,0.2); }
/* Same sliver fix for the status reveals (peek + rows): collapse padding with
   the width so the options land exactly where the resting pill sat. */
body.vf-studio .tk-peek-stat-cur, body.vf-studio .tk-rowstat-cur { transition-property: max-width, opacity, padding; transition-duration: var(--st-rev); transition-timing-function: var(--st-ease); }
body.vf-studio .tk-peek-statuswrap.is-open .tk-peek-stat-cur { padding-left: 0; padding-right: 0; }
body.vf-studio .tk-row-statuswrap.is-open .tk-rowstat-cur { padding-left: 0; padding-right: 0; }
/* Solid priority colours on the bridge (current + options) */
body.vf-studio .tk-peek-prio-cur.tk-pill-vividred, body.vf-studio .tk-peek-prio-opt.tk-pill-vividred { background: #F20D2E; color: #fff; }
body.vf-studio .tk-peek-prio-cur.tk-pill-red,      body.vf-studio .tk-peek-prio-opt.tk-pill-red      { background: #C42038; color: #fff; }
body.vf-studio .tk-peek-prio-cur.tk-pill-amber,    body.vf-studio .tk-peek-prio-opt.tk-pill-amber    { background: #E07A2E; color: #331F04; }
body.vf-studio .tk-peek-prio-cur.tk-pill-yellow,   body.vf-studio .tk-peek-prio-opt.tk-pill-yellow   { background: #E0B021; color: #2E2100; }
body.vf-studio .tk-peek-prio-cur.tk-pill-grey,     body.vf-studio .tk-peek-prio-opt.tk-pill-grey     { background: #6E7888; color: #fff; }

/* ── Peek hero: left-align the date + production icons with the title ─────── */
body.vf-studio .tk-peek-hero-date { padding: 4px 10px 4px 8px; margin-left: -8px; }
body.vf-studio .tk-peek-prodbtn { padding: 4px 10px 4px 8px; margin-left: -8px; }

/* ── Dashboard row date: clickable, subtle "+ date" when empty ─────────────── */
body.vf-studio .dash-li-dateedit { position: relative; cursor: pointer; }
body.vf-studio .dash-li-dateedit:hover { color: var(--accent); }
body.vf-studio .dash-li-dateedit.is-empty { color: var(--fg4); font-size: 11px; font-weight: 600; }

/* ── Purchasing rows: drop the portal-era white card so they sit on the band
      tint like task rows (kit-tech-portal.css gives .pur-row a white card). ── */
body.vf-studio .pur-row { border: 0; background: none; border-radius: 8px; padding: 7px 14px; box-shadow: none; cursor: pointer; }
body.vf-studio .pur-row:hover { border-color: transparent; box-shadow: none; background: rgba(255,255,255,0.4); }
body.vf-studio.vf-admin-dark .pur-row:hover { background: rgba(255,255,255,0.05); }

/* ── Toolbar assignee filter: selected-only at rest, hover fans out the set ── */
body.vf-studio .tk-people { display: inline-flex; align-items: center; }
body.vf-studio .tk-people-cur { display: inline-flex; align-items: center; max-width: 150px; overflow: hidden; opacity: 1; transition-property: max-width, opacity; transition-duration: var(--st-rev); transition-timing-function: var(--st-ease); }
body.vf-studio .tk-people-cur .tk-av { cursor: default; }
body.vf-studio .tk-people-cur .tk-av + .tk-av { margin-left: -10px; }
/* Click-to-expand (not hover): the .is-open class is toggled in JS. */
body.vf-studio .tk-people.is-open .tk-people-cur { max-width: 0; opacity: 0; }
body.vf-studio .tk-people-curbtn { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
body.vf-studio .tk-people-pop { display: inline-flex; align-items: center; gap: 5px; max-width: 0; overflow: hidden; opacity: 0; padding-block: 4px; margin-block: -4px; pointer-events: none; transition-property: max-width, opacity; transition-duration: var(--st-rev); transition-timing-function: var(--st-ease); }
body.vf-studio .tk-people.is-open .tk-people-pop { max-width: 300px; opacity: 1; pointer-events: auto; }

/* ── Productions list view in the tasks language: tinted bucket bands,
      transparent rows with hairlines (replaces the white cards). ────────── */
body.vf-studio .quotes-dash-groups { gap: 14px; }
body.vf-studio .quotes-dash-group { border-radius: 16px; padding: 8px 16px 10px; gap: 2px; }
body.vf-studio .quotes-dash-group-to-quote  { background: rgba(224,176,33,0.15); }
body.vf-studio .quotes-dash-group-generated { background: rgba(224,122,46,0.12); }
body.vf-studio .quotes-dash-group-sent      { background: rgba(9,94,223,0.08); }
body.vf-studio .quotes-dash-group-viewed    { background: rgba(124,77,224,0.09); }
body.vf-studio .quotes-dash-group-signed    { background: rgba(47,162,91,0.10); }
body.vf-studio .quotes-dash-group-invoiced  { background: rgba(38,166,154,0.10); }
body.vf-studio .quotes-dash-group-paid, body.vf-studio .quotes-dash-group-archive { background: rgba(10,15,26,0.045); }
body.vf-studio .quotes-dash-group-other     { background: rgba(10,15,26,0.045); }
body.vf-studio .quotes-dash-group-head { border-bottom: 0; padding: 4px 2px 2px; }
/* Status sub-headings inside a phase band (Production grouping). */
body.vf-studio .prod-substatus { margin-top: 4px; }
body.vf-studio .prod-substatus:first-of-type { margin-top: 0; }
body.vf-studio .prod-substatus-head { display: flex; align-items: center; gap: 7px; padding: 9px 4px 4px; }
body.vf-studio .prod-substatus-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg3); }
body.vf-studio .prod-substatus-count,
body.vf-studio .quotes-dash-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; padding: 1px 7px; border-radius: 999px; background: var(--bg-tint); color: var(--fg3); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.vf-studio .quotes-dash-list { gap: 0; }
body.vf-studio .quotes-dash-list > li { position: relative; background: none; border: 0; box-shadow: none; border-radius: 8px; }
body.vf-studio .quotes-dash-list > li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(10,15,26,0.09); }
body.vf-studio .quotes-dash-list > li:last-child::after { display: none; }
body.vf-studio .quotes-dash-list > li:hover { background: rgba(255,255,255,0.4); transform: none; }
body.vf-studio.vf-admin-dark .quotes-dash-list > li::after { background: rgba(255,255,255,0.10); }
body.vf-studio.vf-admin-dark .quotes-dash-list > li:hover { background: rgba(255,255,255,0.05); }

/* Toolbar assignee filter: the selection ring was an outer box-shadow, which
   the reveal container's overflow:hidden cropped — draw it as the avatar's own
   border instead (inside the box, can't clip). */
body.vf-studio .tk-people .tk-av.is-on { box-shadow: none; border-color: var(--vf-blue); }

/* ── Row density (cog → Row size): compact / standard / roomy ──────────────
   Compact = tight scanning rows; Standard = comfortable; Roomy = comfortable
   + a 1–2 line brief preview + the task's link/upload chiplets underneath. */
body.vf-studio .tk-row-main { flex: 1 1 auto; min-width: 24px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
body.vf-studio .tk-row-main .tk-row-title { flex: none; }
body.vf-studio .tk-row-brief { display: none; font-size: 12px; line-height: 1.45; color: var(--fg3); overflow: hidden; }
body.vf-studio .tk-row-chips { display: none; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
body.vf-studio .tk-row-chip { padding: 3px 10px; font-size: 11px; background: var(--bg-elev); }
/* Three clearly-stepped densities (shared by Tasks / Productions / Purchasing).
   Compact = tight scan; Standard = comfortable default; Cozy ("roomy") =
   generous, with the brief preview + chips revealed. The old scale was 7/11/12,
   so Standard and Cozy looked identical. */
body.vf-studio .tk-density-compact .tk-row { padding-top: 4px; padding-bottom: 4px; gap: 10px; }
body.vf-studio .tk-density-compact .tk-row-title { font-size: 13px; }
body.vf-studio .tk-density-compact .tk-av { width: 26px; height: 26px; font-size: 10px; }
body.vf-studio .tk-density-standard .tk-row { padding-top: 10px; padding-bottom: 10px; }
body.vf-studio .tk-density-roomy .tk-row { padding-top: 18px; padding-bottom: 18px; gap: 14px; }
body.vf-studio .tk-density-roomy .tk-row-title { font-size: 15px; }
body.vf-studio .tk-density-roomy .tk-row-brief { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.vf-studio .tk-density-roomy .tk-row-chips { display: flex; }

/* Density also drives the Board cards + Calendar chips + Day/3-Day grid blocks,
   so compact/standard/cozy change how much each view shows. The tk-density-*
   wrapper already wraps every view. */
/* Board (kanban) cards */
body.vf-studio .tk-density-compact .tk-card { padding: 7px 9px; gap: 4px; }
body.vf-studio .tk-density-compact .tk-card-title { font-size: 13px; }
body.vf-studio .tk-density-compact .tk-card-brief { display: none; }
body.vf-studio .tk-density-compact .tk-card-date,
body.vf-studio .tk-density-compact .tk-card-people { display: none; }
body.vf-studio .tk-density-standard .tk-card-brief { display: none; }
body.vf-studio .tk-density-roomy .tk-card { padding: 14px 14px; gap: 9px; }
body.vf-studio .tk-density-roomy .tk-card-brief { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Calendar month + week chips */
body.vf-studio .tk-cal-task.is-multiday { border-left: 3px solid rgba(42,120,234,0.45); }
body.vf-studio .tk-density-compact .tk-cal-task { font-size: 11px; padding: 1px 5px; gap: 4px; }
body.vf-studio .tk-density-compact .tk-cal-tasktime { display: none; }
body.vf-studio .tk-density-roomy .tk-cal-task { font-size: 12px; padding: 4px 9px; }
body.vf-studio .tk-density-roomy .tk-cal-col-body, body.vf-studio .tk-density-roomy .tk-cal-tasks { gap: 6px; }
/* Day / 3-Day time-grid blocks */
body.vf-studio .tk-density-compact .tk-tg-block { padding: 1px 6px; }
body.vf-studio .tk-density-compact .tk-tg-blocktime { display: none; }
body.vf-studio .tk-density-compact .tk-tg-blockname { font-size: 11px; -webkit-line-clamp: 1; }
body.vf-studio .tk-density-roomy .tk-tg-block { padding: 5px 9px 7px; }
body.vf-studio .tk-density-roomy .tk-tg-blockname { -webkit-line-clamp: 3; }

/* ── Silkier filter chip-stack: longer rise, deeper stagger ────────────────── */
body.vf-studio .tk-chipstack .tk-chipopt { transition: opacity 360ms var(--st-ease), transform var(--st-rev) var(--st-ease), background var(--dur-fast) var(--ease-out); transform: translateY(14px); }
body.vf-studio .tk-filter-menu { transition: opacity 380ms var(--st-ease), transform 640ms var(--st-ease), visibility 0s linear 380ms; }
body.vf-studio .tk-filter:hover .tk-filter-menu, body.vf-studio .tk-filter:focus-within .tk-filter-menu { transition: opacity 300ms var(--st-ease), transform 640ms var(--st-ease), visibility 0s; }
body.vf-studio .tk-chipstack .tk-chipopt:nth-last-child(1) { transition-delay: 0ms; }
body.vf-studio .tk-chipstack .tk-chipopt:nth-last-child(2) { transition-delay: 45ms; }
body.vf-studio .tk-chipstack .tk-chipopt:nth-last-child(3) { transition-delay: 90ms; }
body.vf-studio .tk-chipstack .tk-chipopt:nth-last-child(4) { transition-delay: 135ms; }
body.vf-studio .tk-chipstack .tk-chipopt:nth-last-child(5) { transition-delay: 180ms; }
body.vf-studio .tk-filter:hover .tk-chipstack .tk-chipopt, body.vf-studio .tk-filter:focus-within .tk-chipstack .tk-chipopt { transform: translateY(0); }

/* People-filter avatars ride the shared curve too (were on fast old easings). */
body.vf-studio .tk-people .tk-av { transition: margin-left var(--st-hover) var(--st-ease), transform var(--st-hover) var(--st-ease), opacity var(--st-hover) var(--st-ease), border-color var(--st-hover) var(--st-ease); }

/* ── Production peek extras ─────────────────────────────────────────────────── */
body.vf-studio .prod-peek-sub { display: block; color: rgba(255,255,255,0.88); font-size: 14px; font-weight: 600; margin-bottom: 2px; text-shadow: 0 1px 10px rgba(0,0,0,0.25); }
body.vf-studio .prod-peek-crew { display: inline-flex; align-items: center; }
body.vf-studio .prod-peek-av { width: 36px; height: 36px; }
body.vf-studio .prod-peek-crew .prod-peek-av + .prod-peek-av { margin-left: -12px; }
/* margin-bottom comes from the base .tk-toolbar rule; only the upward-menu headroom is prod-specific (below). */
/* List rows are click-to-peek now */
body.vf-studio .quotes-dash-list > li { cursor: pointer; }

/* ── Filter stacks vs the sticky nav ────────────────────────────────────────
   (1) Menus always paint above the glass bar (iOS Safari was compositing them
   underneath). (2) Long stacks (6+ options, e.g. the productions status
   filter) fold into two columns so they're half as tall. (3) The productions
   toolbar sits lower to give the stack headroom. */
body.vf-studio .tk-filter-menu { z-index: 60; }
body.vf-studio .tk-filter-menu.tk-chipstack:has(.tk-chipopt:nth-child(6)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 280px; align-items: stretch; }
body.vf-studio .tk-chipstack:has(.tk-chipopt:nth-child(6)) .tk-chipopt { min-width: 0; }
/* The old 64px headroom was for upward-opening filter chip menus; those filters
   now live in the cog, so it's dropped — keeps the Productions toolbar level
   with the F&F toolbar so the in-place toggle doesn't jump. */
body.vf-studio .prod-toolbar { margin-top: 0; }

/* ── Productions: centred content column (like the tasks page) + the
      tasks-style status list rows ─────────────────────────────────────────── */
body.vf-studio .content { max-width: 1128px; margin-left: auto; margin-right: auto; }
body.vf-studio .prod-li { cursor: pointer; }
body.vf-studio .prod-li .tk-row-title { flex: 1 1 auto; min-width: 60px; }
body.vf-studio .prod-li-date { flex: none; font-size: 12px; color: var(--fg3); font-variant-numeric: tabular-nums; }
body.vf-studio .prod-li-crew { flex: none; display: inline-flex; align-items: center; }
body.vf-studio .prod-li-crew .tk-av + .tk-av { margin-left: -8px; }
body.vf-studio .prod-li-chip { flex: none; max-width: 180px; }
/* Production-status band tints (financial buckets reuse the quotes-dash tints) */
/* Production-grouping phase bands: pre = yellow, production = red, post = blue. */
body.vf-studio .quotes-dash-group-draft { background: rgba(10,15,26,0.05); }
body.vf-studio.vf-admin-dark .quotes-dash-group-draft { background: rgba(255,255,255,0.05); }
body.vf-studio .quotes-dash-group-pre { background: rgba(214,158,18,0.10); }
body.vf-studio .quotes-dash-group-production { background: rgba(200,40,52,0.09); }
body.vf-studio .quotes-dash-group-post { background: rgba(9,94,223,0.07); }
body.vf-studio .quotes-dash-group-dist { background: rgba(47,162,91,0.11); }
body.vf-studio .quotes-dash-group-pre-production { background: rgba(214,158,18,0.10); }
body.vf-studio .quotes-dash-group-internal-revisions, body.vf-studio .quotes-dash-group-external-revisions { background: rgba(124,77,224,0.08); }
body.vf-studio .quotes-dash-group-client-sign-off { background: rgba(224,176,33,0.13); }
body.vf-studio .quotes-dash-group-live-on-website { background: rgba(47,162,91,0.10); }
body.vf-studio .quotes-dash-group-completed-offline-, body.vf-studio .quotes-dash-group-cancelled, body.vf-studio .quotes-dash-group-no-status { background: rgba(10,15,26,0.045); }
/* Dark mode: the faint light-rgba band tints wash to invisible on the dark
   panel, so re-tint each at a higher alpha (lighter hue where blue). */
body.vf-studio.vf-admin-dark .quotes-dash-group-to-quote  { background: rgba(224,176,33,0.20); }
body.vf-studio.vf-admin-dark .quotes-dash-group-generated { background: rgba(224,122,46,0.18); }
body.vf-studio.vf-admin-dark .quotes-dash-group-sent      { background: rgba(58,124,233,0.16); }
body.vf-studio.vf-admin-dark .quotes-dash-group-viewed    { background: rgba(124,77,224,0.18); }
body.vf-studio.vf-admin-dark .quotes-dash-group-signed    { background: rgba(47,162,91,0.18); }
body.vf-studio.vf-admin-dark .quotes-dash-group-invoiced  { background: rgba(38,166,154,0.18); }
body.vf-studio.vf-admin-dark .quotes-dash-group-paid, body.vf-studio.vf-admin-dark .quotes-dash-group-archive, body.vf-studio.vf-admin-dark .quotes-dash-group-other { background: rgba(255,255,255,0.045); }
body.vf-studio.vf-admin-dark .quotes-dash-group-pre, body.vf-studio.vf-admin-dark .quotes-dash-group-pre-production { background: rgba(214,158,18,0.16); }
body.vf-studio.vf-admin-dark .quotes-dash-group-production { background: rgba(200,40,52,0.16); }
body.vf-studio.vf-admin-dark .quotes-dash-group-post { background: rgba(58,124,233,0.14); }
body.vf-studio.vf-admin-dark .quotes-dash-group-dist { background: rgba(47,162,91,0.18); }
/* Collapsible production group bands (Draft starts collapsed). */
body.vf-studio .quotes-dash-group-head.is-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
body.vf-studio .quotes-dash-group-chev { flex: none; color: var(--fg3); transform: rotate(90deg); transition: transform 150ms var(--ease-out); }
body.vf-studio .quotes-dash-group.is-collapsed .quotes-dash-group-chev { transform: rotate(0deg); }
body.vf-studio .quotes-dash-group.is-collapsed { padding-bottom: 4px; }
/* Remove-quote button in the production peek. */
/* Remove-quote: a tiny corner badge that reveals on hovering the Quote pill
   (replaces the old full-width red row). Confirm dialog still guards it. */
body.vf-studio .tk-peek-quotewrap { position: relative; display: inline-flex; }
body.vf-studio .tk-peek-quoteremove { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--danger-text, #d23f3f) 45%, transparent); background: var(--bg-elev); color: var(--danger-text, #d23f3f); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: scale(0.8); transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease; box-shadow: 0 1px 4px rgba(10,15,26,0.18); z-index: 2; }
body.vf-studio .tk-peek-quotewrap:hover .tk-peek-quoteremove, body.vf-studio .tk-peek-quoteremove:focus-visible { opacity: 1; transform: scale(1); }
body.vf-studio .tk-peek-quoteremove:hover { background: var(--danger-soft, rgba(210,63,63,0.12)); }
body.vf-studio .tk-peek-quoteremove:disabled { opacity: 0.5; cursor: default; }
/* Production activity log + hours tracker (peek blob, mirrors the comments blob). */
body.vf-studio .tk-peek-log-blob { margin-top: 12px; }
body.vf-studio .tk-peek-log { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
body.vf-studio .prod-log-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
body.vf-studio .prod-log-total { display: inline-flex; align-items: center; padding: 2px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--vf-blue); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.vf-studio .prod-log-add { display: flex; gap: 7px; margin: 0 0 12px; }
body.vf-studio .prod-log-hours { flex: 0 0 62px; width: 62px; }
body.vf-studio .prod-log-note { flex: 1 1 auto; min-width: 0; }
body.vf-studio .prod-log-hours, body.vf-studio .prod-log-note { height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--fg1); font: inherit; font-size: 13px; padding: 0 10px; }
body.vf-studio .prod-log-hours:focus, body.vf-studio .prod-log-note:focus { outline: none; border-color: var(--vf-blue); }
body.vf-studio .prod-log-addbtn { flex: none; height: 34px; padding: 0 15px; border: 0; border-radius: 8px; background: var(--vf-blue); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
body.vf-studio .prod-log-addbtn:disabled { opacity: 0.5; cursor: default; }
body.vf-studio .prod-log-empty { padding: 12px 2px; color: var(--fg4); font-size: 13px; }
body.vf-studio .prod-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
body.vf-studio .prod-log-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line); }
body.vf-studio .prod-log-item:first-child { border-top: 0; }
body.vf-studio .prod-log-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--bg-tint); color: var(--fg3); margin-top: 1px; }
body.vf-studio .prod-log-item.is-hours .prod-log-ic { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .prod-log-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body.vf-studio .prod-log-text { font-size: 13px; font-weight: 500; color: var(--fg1); }
body.vf-studio .prod-log-item.is-hours .prod-log-text { font-weight: 700; }
body.vf-studio .prod-log-meta { font-size: 11px; color: var(--fg4); }
body.vf-studio .prod-log-del { flex: none; width: 22px; height: 22px; border: 0; background: none; color: var(--fg4); font-size: 17px; line-height: 1; border-radius: 6px; cursor: pointer; }
body.vf-studio .prod-log-del:hover { background: var(--danger-soft, rgba(210,63,63,0.1)); color: var(--danger-text, #d23f3f); }
body.vf-studio.vf-admin-dark .quotes-dash-group-internal-revisions, body.vf-studio.vf-admin-dark .quotes-dash-group-external-revisions { background: rgba(124,77,224,0.16); }
body.vf-studio.vf-admin-dark .quotes-dash-group-client-sign-off { background: rgba(224,176,33,0.18); }
body.vf-studio.vf-admin-dark .quotes-dash-group-live-on-website { background: rgba(47,162,91,0.18); }
body.vf-studio.vf-admin-dark .quotes-dash-group-completed-offline-, body.vf-studio.vf-admin-dark .quotes-dash-group-cancelled, body.vf-studio.vf-admin-dark .quotes-dash-group-no-status { background: rgba(255,255,255,0.045); }

/* ── Tasks cog (View thumbnails · group · size) — sized to match the chiplets
   used elsewhere: small uppercase section labels, soft neutral chips that take
   their colour/accent only when selected. ── */
body.vf-studio .tk-cog-panel-v2 { min-width: 288px; padding: 14px 14px 15px; display: flex; flex-direction: column; gap: 8px; }
body.vf-studio .tk-cog-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg4); margin-top: 7px; }
body.vf-studio .tk-cog-title:first-child { margin-top: 0; }
body.vf-studio .tk-cog-divider { height: 1px; background: var(--line); margin: 9px -14px 2px; }
body.vf-studio .tk-cog-views { display: flex; gap: 7px; }
body.vf-studio .tk-cog-view { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 6px 7px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elev); color: var(--fg4); font: inherit; font-size: 11px; cursor: pointer; transition: border-color var(--st-hover) var(--st-ease), color var(--st-hover) var(--st-ease), background var(--st-hover) var(--st-ease); }
body.vf-studio .tk-cog-view svg { width: 100%; height: 34px; }
body.vf-studio .tk-cog-view:hover { border-color: var(--vf-blue); color: var(--fg2); }
body.vf-studio .tk-cog-view.is-on { border-color: var(--vf-blue); background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .tk-cog-view.is-on span { color: var(--vf-blue); font-weight: 600; }
body.vf-studio .tk-cog-bigpills, body.vf-studio .tk-cog-sizes { display: flex; gap: 7px; }
/* Assignee/crew avatar toggles, moved out of the toolbar into the cog panel. */
body.vf-studio .tk-cog-people { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 2px; }
/* Ring + drop shadow so the white-bg avatars (e.g. the Kit Tech logomark) pop off the panel. */
body.vf-studio .tk-cog-people .tk-av { cursor: pointer; box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(10,15,26,0.16); }
body.vf-studio.vf-admin-dark .tk-cog-people .tk-av { box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 1px 4px rgba(0,0,0,0.4); }
/* Named variant: avatar + name rows (used where there's room, e.g. the
   Productions assignee filter). Stacks vertically; click toggles the person. */
body.vf-studio .tk-cog-people-named { flex-direction: row; flex-wrap: wrap; gap: 6px; }
body.vf-studio .tk-cog-person { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--bg-tint); border-radius: 999px; padding: 3px 11px 3px 3px; font: inherit; font-size: 12px; font-weight: 600; color: var(--fg1); text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-cog-person:hover { background: var(--bg-tint); }
body.vf-studio .tk-cog-person.is-on { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .tk-cog-person.is-dim { opacity: 0.5; }
body.vf-studio .tk-cog-person .tk-av { flex: none; box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(10,15,26,0.16); }
body.vf-studio.vf-admin-dark .tk-cog-person .tk-av { box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 1px 4px rgba(0,0,0,0.4); }
body.vf-studio .tk-cog-bigpill, body.vf-studio .tk-cog-size { flex: 1 1 0; border: 0; border-radius: 999px; padding: 6px 0; background: var(--bg-tint); color: var(--fg3); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--st-hover) var(--st-ease), color var(--st-hover) var(--st-ease); }
body.vf-studio .tk-cog-bigpill:not(.is-on):hover, body.vf-studio .tk-cog-size:not(.is-on):hover { color: var(--fg1); background: var(--line); }
/* Group pills stay neutral until chosen, then adopt their priority/status hue. */
body.vf-studio .tk-cog-bigpill.is-on.is-prio { background: rgba(224,122,40,0.18); color: #95600F; }
body.vf-studio .tk-cog-bigpill.is-on.is-status { background: rgba(208,156,32,0.22); color: #876512; }
body.vf-studio.vf-admin-dark .tk-cog-bigpill.is-on.is-prio { background: rgba(224,140,60,0.24); color: #E8B274; }
body.vf-studio.vf-admin-dark .tk-cog-bigpill.is-on.is-status { background: rgba(214,168,50,0.24); color: #E3C074; }
/* Size pills take the blue accent when chosen (matches the panel's View cards). */
body.vf-studio .tk-cog-size { border-radius: 8px; }
body.vf-studio .tk-cog-size.is-on { background: var(--accent-soft); color: var(--vf-blue); }

/* ── Tasks · Board (kanban) view ─────────────────────────────────────────────
   Each grouping band is a column; the coloured header dot carries the priority/
   status identity so the columns themselves stay calm. */
body.vf-studio .tk-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 4px 2px 12px; }
body.vf-studio .tk-board-col { flex: 0 0 262px; width: 262px; display: flex; flex-direction: column; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-tint); transition: outline-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); outline: 2px dashed transparent; outline-offset: -2px; }
/* Drag-and-drop affordances (Board columns + Calendar days as drop targets) */
body.vf-studio .tk-board-col.is-over { outline-color: var(--accent); background: var(--accent-soft-2, var(--accent-soft)); }
body.vf-studio .tk-card[draggable="true"] { cursor: grab; }
body.vf-studio .tk-card.is-drag { opacity: 0.45; }
body.vf-studio .tk-cal-cell.is-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft-2, var(--accent-soft)); }
body.vf-studio .tk-cal-task[draggable="true"] { cursor: grab; }
body.vf-studio .tk-cal-task.is-drag { opacity: 0.45; }
/* Purchasing density: hide notes when Compact, let them wrap when Cozy */
body.vf-studio .tk-density-compact .pur-row-notes { display: none; }
body.vf-studio .tk-density-roomy .pur-row-notes { white-space: normal; max-width: 520px; }

/* Kit Tech applicant cards (Rentals → Applicants) — Crew-styled, no photo, with
   an inline Ranking picker that writes back to Notion. */
body.vf-studio .kit-pcard { display: flex; flex-direction: column; padding: 14px 16px; }
body.vf-studio .kit-pcard .adb-pcard-body { display: flex; flex-direction: column; gap: 7px; }
body.vf-studio .kit-pcard-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
/* Name truncates; the ranking pill keeps its full width (wraps to its own line
   when cramped) so it's never clipped by the card's overflow:hidden. */
body.vf-studio .kit-pcard-top .adb-pcard-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .kit-pcard-top .kit-rank { flex: 0 0 auto; max-width: 100%; }
body.vf-studio .kit-pcard-top .kit-rank-cur { max-width: 100%; }
body.vf-studio .kit-pcard-top .kit-rank-cur > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Grouped status bands (kit-tech, renters) — cards inside coloured bands ── */
body.vf-studio .adb-bands { display: flex; flex-direction: column; gap: 10px; }
/* List layout (AdminTableViewer layout="list") — full-width rows instead of a
   card grid. Each row: name+sub · contact · confidence/status/date; click opens
   the peek. Used by Renters. */
body.vf-studio .adb-cards-list { display: flex; flex-direction: column; gap: 6px; }
body.vf-studio .adb-lrow { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(0, 1.5fr) auto; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); cursor: default; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
body.vf-studio .adb-lrow.is-clickable { cursor: pointer; }
body.vf-studio .adb-lrow.is-clickable:hover { border-color: var(--vf-blue); background: var(--bg-tint); }
body.vf-studio .adb-lrow-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.vf-studio .adb-lrow-name { font-size: 14px; font-weight: 600; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .adb-lrow-sub { font-size: 12px; color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .adb-lrow-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; color: var(--fg3); }
body.vf-studio .adb-lrow-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .adb-lrow-side { display: inline-flex; align-items: center; gap: 12px; justify-self: end; }
body.vf-studio .adb-lrow-conf { font-size: 11px; color: var(--fg4); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.vf-studio .adb-lrow-date { font-size: 11px; color: var(--fg4); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { body.vf-studio .adb-lrow { grid-template-columns: 1fr; gap: 6px; } body.vf-studio .adb-lrow-side { justify-self: start; flex-wrap: wrap; } }
/* Density-aware list rows (renters/crew): a flex column — a head row
   (avatar/name/side) plus optional link chips + a description line beneath.
   Drives the Compact / Standard / Cozy content tiers. */
body.vf-studio .adb-lrow.adb-lrow-stack { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
body.vf-studio .adb-lrow-head { display: flex; align-items: center; gap: 14px; }
body.vf-studio .adb-lrow-head .adb-lrow-main { flex: 1 1 auto; }
body.vf-studio .adb-lrow-head .adb-lrow-side { margin-left: auto; flex: none; }
body.vf-studio .adb-lrow-av { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tint); color: var(--fg3); font-size: 12px; font-weight: 700; }
body.vf-studio .adb-lrow-av img { width: 100%; height: 100%; object-fit: cover; }
body.vf-studio .adb-lrow-desc { font-size: 12px; color: var(--fg3); line-height: 1.5; }
body.vf-studio .adb-links { display: flex; flex-wrap: wrap; gap: 6px; }
body.vf-studio .adb-link { font-size: 11px; font-weight: 600; color: var(--vf-blue); text-decoration: none; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--vf-blue) 30%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--vf-blue) 8%, transparent); white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .adb-link:hover { background: color-mix(in srgb, var(--vf-blue) 18%, transparent); }
body.vf-studio .adb-pcard-desc { font-size: 12px; color: var(--fg3); line-height: 1.45; margin-top: 2px; }
/* Crew driving/transport badges — shown on cards only when the person has them. */
body.vf-studio .crew-drive-badges { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
body.vf-studio .crew-drive-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #1F7A43; background: rgba(47,162,91,0.12); }
body.vf-studio .renter-pcard-photo img { width: 100%; height: 100%; object-fit: cover; }
body.vf-studio .adb-cardband { padding: 8px 14px 14px; }
body.vf-studio .adb-cardband .tk-band-head { margin-bottom: 6px; }
body.vf-studio .tk-band-count { margin-left: 7px; opacity: 0.5; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; }
body.vf-studio .adb-band-green  { background: rgba(70,160,90,0.11); }
body.vf-studio .adb-band-blue   { background: rgba(60,120,230,0.09); }
body.vf-studio .adb-band-yellow { background: rgba(224,176,33,0.15); }
body.vf-studio .adb-band-red    { background: rgba(196,32,56,0.09); }
body.vf-studio .adb-band-grey   { background: rgba(10,15,26,0.06); }
body.vf-studio .adb-band-purple { background: rgba(124,77,224,0.10); }
body.vf-studio .adb-band-amber  { background: rgba(224,122,46,0.12); }
body.vf-studio.vf-admin-dark .adb-band-green  { background: rgba(70,192,125,0.13); }
body.vf-studio.vf-admin-dark .adb-band-blue   { background: rgba(90,140,235,0.13); }
body.vf-studio.vf-admin-dark .adb-band-yellow { background: rgba(224,176,33,0.13); }
body.vf-studio.vf-admin-dark .adb-band-red    { background: rgba(214,64,84,0.13); }
body.vf-studio.vf-admin-dark .adb-band-grey   { background: rgba(255,255,255,0.05); }
body.vf-studio.vf-admin-dark .adb-band-purple { background: rgba(140,100,232,0.16); }
body.vf-studio.vf-admin-dark .adb-band-amber  { background: rgba(224,140,60,0.15); }

/* Grouped table (CRM by Stage): a tinted section-header row spanning all columns. */
body.vf-studio .adb-table-bandhead td { padding: 9px 14px 7px; }
body.vf-studio .adb-table-bandhead td > span:nth-child(2) { font-size: 13px; font-weight: 700; color: var(--fg1); }
body.vf-studio .adb-table-bandhead .tk-grp-dot { margin-right: 8px; vertical-align: middle; }
body.vf-studio .adb-table-bandhead .tk-band-count { vertical-align: middle; }
/* Keep the tinted header readable on hover (don't let the row :hover override it). */
body.vf-studio .adb-table tbody tr.adb-table-bandhead:hover { filter: none; }

/* ── Search-as-create affordances ── */
body.vf-studio .adb-create-hint { flex: none; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--vf-blue); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
body.vf-studio .adb-create-hint:hover { filter: brightness(1.03); }
body.vf-studio .adb-create-hint:disabled { opacity: 0.6; cursor: default; }
/* --vf-blue is fixed (doesn't lighten in dark mode); lift the create-hint text/border so it reads on the dark accent-soft tint, like the nav/chat soft-blue chips. */
body.vf-studio.vf-admin-dark .adb-create-hint { color: var(--vf-blue-300); border-color: var(--vf-blue-400); }

/* Search-results + add popup (AdminTableViewer) — see matches first, then Add. */
body.vf-studio .adb-searchpop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 16px 44px rgba(10,15,26,0.20); padding: 6px; max-height: 340px; overflow-y: auto; }
body.vf-studio .adb-searchpop-results { display: flex; flex-direction: column; gap: 2px; }
body.vf-studio .adb-searchpop-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 13px; color: var(--fg1); cursor: pointer; }
body.vf-studio .adb-searchpop-opt:hover { background: var(--bg-tint); }
body.vf-studio .adb-searchpop-dot { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-tint); font-size: 10px; font-weight: 700; color: var(--fg2); text-transform: uppercase; }
body.vf-studio .adb-searchpop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .adb-searchpop-none, body.vf-studio .adb-searchpop-more { padding: 8px 10px; font-size: 12px; color: var(--fg4); }
body.vf-studio .adb-searchpop-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 6px; padding: 9px 12px; border: 1px dashed var(--accent); border-radius: 10px; background: var(--accent-soft); font: inherit; font-size: 13px; font-weight: 600; color: var(--vf-blue); cursor: pointer; transition: filter var(--dur-fast) var(--ease-out); }
body.vf-studio .adb-searchpop-add:hover { filter: brightness(1.03); }
body.vf-studio .adb-searchpop-add:disabled { opacity: 0.6; cursor: default; }
body.vf-studio.vf-admin-dark .adb-searchpop-add { color: var(--vf-blue-300); border-color: var(--vf-blue-400); }
body.vf-studio .adb-create-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; }
body.vf-studio .adb-create-btn { height: 38px; }

/* ── Renter peek selfie ── */
body.vf-studio .renter-peek-hero-main { display: flex; align-items: center; gap: 16px; }
body.vf-studio .renter-selfie { flex: none; width: 84px; height: 84px; border-radius: 16px; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.7); box-shadow: 0 6px 20px rgba(0,0,0,0.25); display: block; cursor: pointer; }
body.vf-studio .renter-selfie-empty { display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: rgba(255,255,255,0.85); cursor: default; }
body.vf-studio .renter-peek-id { min-width: 0; }
body.vf-studio .renter-scores { display: flex; flex-wrap: wrap; gap: 10px; }
body.vf-studio .renter-score { display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px; background: var(--bg-tint); }
body.vf-studio .renter-score-l { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg4); }
body.vf-studio .renter-score-v { font-size: 17px; font-weight: 800; color: var(--fg1); font-variant-numeric: tabular-nums; }
body.vf-studio .renter-docs { display: flex; flex-wrap: wrap; gap: 7px; }
/* Cozy density — leading selfie thumbnail for a quick photo scan of the list. */
body.vf-studio .renter-lrow-cozy { display: flex; align-items: flex-start; gap: 14px; }
body.vf-studio .renter-lrow-thumb { flex: none; width: 50px; height: 50px; border-radius: 12px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tint); color: var(--fg3); font-size: 18px; font-weight: 700; }
body.vf-studio .renter-lrow-thumb img { width: 100%; height: 100%; object-fit: cover; }
body.vf-studio .renter-lrow-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* Manual verification — admin overrides (references cleared / approve). */
body.vf-studio .renter-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
body.vf-studio .renter-act-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* Size the action + confirm buttons to the peek's own scale — the shared
   .kp-btn-* pills are portal-sized (15px), which reads oversized in the peek. */
body.vf-studio .renter-actions .kp-btn-primary,
body.vf-studio .renter-actions .kp-btn-ghost { font-size: 13px; font-weight: 700; padding: 9px 16px; }
body.vf-studio .renter-actions .kp-btn-ghost { padding: 8px 15px; }
body.vf-studio .renter-act-done { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #1F9D55; background: rgba(31,157,85,0.12); }
body.vf-studio .renter-act-done svg { flex: none; }
body.vf-studio .renter-act-hint { margin: 0; font-size: 12px; color: var(--fg4); line-height: 1.45; }
body.vf-studio .renter-act-err { font-size: 12.5px; font-weight: 600; color: var(--danger-text); }
body.vf-studio .renter-confirm { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--bg-tint); border: 1px solid var(--line); }
body.vf-studio .renter-confirm-q { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg1); font-weight: 600; }
body.vf-studio .renter-confirm-btns { display: flex; justify-content: flex-end; gap: 10px; }
/* Hero status pill — the base .tk-pill tones are translucent/faint over the blue
   peek hero, so give it a solid, high-contrast fill (same treatment as the
   production peek's .prod-peek-pill) for legibility. */
body.vf-studio .renter-peek-pill { font-weight: 700; box-shadow: 0 5px 14px rgba(10,15,26,0.24); }
body.vf-studio .renter-peek-pill.tk-pill-yellow { background: #E0B021; color: #2E2100; }
body.vf-studio .renter-peek-pill.tk-pill-green  { background: #1F8A47; color: #fff; }
body.vf-studio .renter-peek-pill.tk-pill-blue   { background: #2A72C9; color: #fff; }
body.vf-studio .renter-peek-pill.tk-pill-red    { background: #C42038; color: #fff; }
body.vf-studio .renter-peek-pill.tk-pill-grey   { background: #6E7888; color: #fff; }

/* ── Mobile (≤760px): the new grouped/peek/create pieces ── */
@media (max-width: 760px) {
  body.vf-studio .renter-peek-hero-main { gap: 12px; }
  body.vf-studio .renter-selfie { width: 64px; height: 64px; }
  /* Let the search take the full row and keep the count + create hint together below it. */
  body.vf-studio .tk-toolbar .tk-searchwrap { flex-basis: 100%; }
  body.vf-studio .tk-toolbar .adb-count { margin-left: 0; }
}
body.vf-studio .kit-pcard-exp { font-size: 12px; color: var(--fg2); line-height: 1.45; }
/* Account card v2 — icon-left rows, no truncated meta line, click to peek */
body.vf-studio .kit-pcard-v2 { gap: 12px; }
/* One hover/focus language for admin cards: only clickable ones lift (blue) and
   get a keyboard focus ring; static cards (crew/CRM) don't pretend to be tappable. */
body.vf-studio .adb-pcard { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
/* ── "Add to list" crew shortlist: per-card select toggle + selected ring +
      floating cart bar (selectExport on AdminTableViewer). ─────────────────── */
body.vf-studio .adb-selbox { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-strong, #cfd5df); background: var(--bg-elev); color: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .adb-selbox:hover { border-color: var(--vf-blue); }
body.vf-studio .adb-selbox:active { transform: scale(0.92); }
body.vf-studio .adb-selbox.is-on { background: var(--vf-blue); border-color: var(--vf-blue); color: #fff; }
body.vf-studio .adb-pcard { position: relative; }
body.vf-studio .adb-pcard > .adb-selbox { position: absolute; top: 10px; left: 10px; z-index: 2; box-shadow: 0 1px 6px rgba(8,12,22,0.20); }
body.vf-studio .adb-lrow.is-selected, body.vf-studio .adb-pcard.is-selected { box-shadow: 0 0 0 2px var(--vf-blue); border-color: var(--vf-blue); }
body.vf-studio .adb-cart-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: inline-flex; align-items: center; gap: 12px; padding: 9px 9px 9px 18px; border-radius: 999px; background: #0A0F1A; color: #fff; box-shadow: 0 12px 34px rgba(0,0,0,0.34); animation: cal-magic-grow 180ms var(--ease-out); }
body.vf-studio .adb-cart-count { font-size: 13px; font-weight: 600; white-space: nowrap; }
body.vf-studio .adb-cart-n { font-weight: 800; }
body.vf-studio .adb-cart-export { border: 0; border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--vf-blue); cursor: pointer; transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .adb-cart-export:hover { filter: brightness(1.07); }
body.vf-studio .adb-cart-export:active { transform: scale(0.97); }
body.vf-studio .adb-cart-export:disabled { opacity: 0.6; cursor: default; }
body.vf-studio .adb-cart-clear { border: 0; background: none; color: rgba(255,255,255,0.7); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 8px; }
body.vf-studio .adb-cart-clear:hover { color: #fff; }
@media (max-width: 760px) { body.vf-studio .adb-cart-bar { left: 12px; right: 12px; transform: none; justify-content: center; bottom: 16px; } }
body.vf-studio .adb-pcard:hover { border-color: var(--line); box-shadow: none; }
body.vf-studio .adb-pcard.is-clickable { cursor: pointer; }
body.vf-studio .adb-pcard.is-clickable:hover { border-color: var(--vf-blue); box-shadow: 0 4px 16px rgba(10,15,26,0.08); }
body.vf-studio .adb-pcard.is-clickable:focus-visible { outline: none; border-color: var(--vf-blue); box-shadow: 0 0 0 3px var(--accent-soft); }
body.vf-studio .adb-table-row.is-clickable { cursor: pointer; transition: background var(--dur-fast) var(--ease-soft); }
body.vf-studio .adb-table-row.is-clickable:hover { background: var(--bg-tint); }
body.vf-studio .adb-table-row.is-clickable:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
body.vf-studio .kit-pcard-v2.is-clickable { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
body.vf-studio .kit-pcard-v2.is-clickable:hover { border-color: var(--vf-blue); box-shadow: 0 4px 16px rgba(10,15,26,0.08); }
body.vf-studio .kit-pcard-rows, body.vf-studio .kit-peek-rows { display: flex; flex-direction: column; gap: 7px; }
body.vf-studio .kit-row { display: flex; align-items: flex-start; gap: 9px; min-width: 0; font-size: 13px; }
body.vf-studio .kit-row-ic { flex: 0 0 16px; display: grid; place-items: center; color: var(--fg4); margin-top: 1px; }
body.vf-studio .kit-row-v { min-width: 0; color: var(--fg1); overflow-wrap: anywhere; word-break: break-word; }
body.vf-studio a.kit-row-v { color: var(--vf-blue); text-decoration: none; }
body.vf-studio a.kit-row-v:hover { text-decoration: underline; }
/* Phone + email rows: click to copy. Look like the link, confirm in green. */
body.vf-studio button.kit-row-copy { min-width: 0; border: 0; padding: 0; background: none; font: inherit; text-align: left; color: var(--vf-blue); cursor: pointer; overflow-wrap: anywhere; word-break: break-word; transition: color var(--dur-fast) var(--ease-out); }
body.vf-studio button.kit-row-copy:hover { text-decoration: underline; }
body.vf-studio button.kit-row-copy.is-copied { color: #1F9D55; font-weight: 600; text-decoration: none; }
body.vf-studio .kit-pcard-del { display: flex; justify-content: flex-end; margin-top: 2px; }
/* Account peek */
body.vf-studio .kit-peek .tk-peek-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-right: 0; }
/* Role chip on the blue hero — a crisp white chip with dark text reads far better
   than the translucent grey pill did against the gradient. */
body.vf-studio .kit-peek-rolepill { background: rgba(255,255,255,0.94); color: #16203A; font-weight: 700; box-shadow: 0 1px 5px rgba(8,12,22,0.18); }
/* Kit/renter peeks have no bottom-anchored avatar row (unlike TkPeek), so the
   hero doesn't need the 58px clearance — hug the title like the other peeks. */
body.vf-studio .kit-peek .tk-peek-hero { padding-bottom: 22px; }
body.vf-studio .kit-peek-close { flex: none; width: 30px; height: 30px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.16); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
body.vf-studio .kit-peek-close:hover { background: rgba(255,255,255,0.28); }
/* Task peek: an explicit close ×, top-right of the hero (parity with the other
   peeks). Absolute so it doesn't disturb the hero-top control row. */
body.vf-studio .tk-peek-xclose { position: absolute; top: 14px; right: 14px; z-index: 4; }
body.vf-studio .tk-peek-hero-top { padding-right: 40px; }
body.vf-studio .kit-peek-sub { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.82); }
body.vf-studio .kit-peek-rows { margin-bottom: 4px; }
body.vf-studio .kit-peek-desc { border-top: 1px solid var(--line); padding-top: 12px; }
body.vf-studio .kit-peek-h { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg4); margin-bottom: 6px; }
/* Inline single-click toggle pills (crew peek Driving & transport). */
body.vf-studio .kit-peek-hhint { font-size: 10px; font-weight: 600; color: var(--fg4); text-transform: none; letter-spacing: 0; margin-left: 6px; }
body.vf-studio .kit-peek-toggle { appearance: none; border: 0; font: inherit; cursor: pointer; transition: filter var(--dur-fast) var(--ease-out), transform 100ms ease; }
body.vf-studio .kit-peek-toggle:hover { filter: brightness(0.96); }
body.vf-studio .kit-peek-toggle:active { transform: scale(0.97); }
body.vf-studio .kit-peek-toggle.is-busy { opacity: 0.6; cursor: progress; }
body.vf-studio .kit-peek-desc p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg1); white-space: pre-wrap; }
body.vf-studio .kit-pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
body.vf-studio .kit-pcard-date { font-size: 11px; color: var(--fg4); font-variant-numeric: tabular-nums; }
body.vf-studio .kit-pcard-footright { display: inline-flex; align-items: center; gap: 8px; }
body.vf-studio .kit-pcard-footleft { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
body.vf-studio .adb-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }
/* Deep-link landing flash (crew/renters cards that have no peek) */
body.vf-studio .is-focus-flash { animation: vf-focus-flash 2.2s ease; }
@keyframes vf-focus-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(42,120,234,0); }
  12% { box-shadow: 0 0 0 3px rgba(42,120,234,0.55); }
  60% { box-shadow: 0 0 0 3px rgba(42,120,234,0.3); }
}
/* Delete (archive) button on admin cards — two-step confirm */
body.vf-studio .adb-del { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--fg4); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .adb-del:hover { background: rgba(196,32,56,0.08); color: var(--danger-text); border-color: rgba(196,32,56,0.4); }
body.vf-studio .adb-del.is-confirm { background: #C42038; border-color: #C42038; color: #fff; }
body.vf-studio .adb-del svg { display: block; }
/* Dark-mode danger: match the lightened red the other danger surfaces use. */
body.vf-studio.vf-admin-dark .adb-del:hover { background: rgba(214,64,84,0.14); color: #F08A95; border-color: rgba(214,64,84,0.5); }

/* Buy/Sell purchasing: two columns, each priority-grouped */
body.vf-studio .pur-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { body.vf-studio .pur-columns { grid-template-columns: 1fr; } }
body.vf-studio .pur-col { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); overflow: hidden; }
body.vf-studio .pur-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-tint); }
body.vf-studio .pur-col-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--fg1); }
body.vf-studio .pur-col-count { font-size: 12px; color: var(--fg4); font-weight: 600; }
body.vf-studio .pur-col-empty { padding: 20px 16px; font-size: 13px; color: var(--fg4); }
body.vf-studio .pur-col .pur-bands { padding: 8px 10px; }
body.vf-studio .pur-band-head { display: flex; align-items: center; gap: 7px; padding: 9px 8px 4px; }
/* The whole band head is a click target that folds/unfolds the group's rows. */
body.vf-studio .pur-band-toggle { width: 100%; justify-content: flex-start; gap: 7px; border-radius: 8px; padding: 2px 5px; margin: -2px -5px; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .pur-band-toggle:hover { background: rgba(10,15,26,0.05); }
body.vf-studio.vf-admin-dark .pur-band-toggle:hover { background: rgba(255,255,255,0.06); }
/* A folded band keeps its head padding tidy (no rows below to balance it). */
body.vf-studio .tk-band.is-collapsed .pur-band-head { padding-bottom: 9px; }
/* Status group bands get a colour tint too (to-do grey, in-progress blue). */
body.vf-studio .pur-band-todo { background: rgba(120,135,160,0.10); }
body.vf-studio .pur-band-progress { background: rgba(58,122,212,0.12); }
body.vf-studio.vf-admin-dark .pur-band-todo { background: rgba(140,155,180,0.12); }
body.vf-studio.vf-admin-dark .pur-band-progress { background: rgba(58,122,212,0.18); }
/* Row price + the peek's always-ready Link / Price fields. */
body.vf-studio .pur-row-price { flex: none; font-size: 13px; font-weight: 700; color: var(--fg1); margin-left: 6px; white-space: nowrap; }
body.vf-studio .pur-peek-fields { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
body.vf-studio .pur-peek-field { display: flex; flex-direction: column; gap: 5px; }
body.vf-studio .pur-peek-field-link { flex: 1 1 220px; }
body.vf-studio .pur-peek-field-price { flex: 0 0 128px; }
body.vf-studio .pur-peek-fieldlabel { font-size: 12px; font-weight: 600; color: var(--fg2); }
body.vf-studio .pur-peek-linkrow, body.vf-studio .pur-peek-pricerow { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-tint); padding: 0 10px; }
body.vf-studio .pur-peek-linkrow:focus-within, body.vf-studio .pur-peek-pricerow:focus-within { border-color: var(--vf-blue); }
body.vf-studio .pur-peek-linkinput, body.vf-studio .pur-peek-priceinput { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--fg1); outline: none; padding: 9px 0; }
body.vf-studio .pur-peek-pricecur { flex: none; font-size: 14px; color: var(--fg3); }
body.vf-studio .pur-peek-linkopen { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--fg3); text-decoration: none; }
body.vf-studio .pur-peek-linkopen:hover { color: var(--vf-blue); background: var(--bg-elev); }
body.vf-studio .pur-band-title { font-size: 13px; font-weight: 700; color: var(--fg1); }
body.vf-studio .pur-band-count { font-size: 12px; color: var(--fg4); opacity: 0.55; font-variant-numeric: tabular-nums; }
body.vf-studio .pur-row-status { flex: none; margin-left: auto; }
/* Twin status + priority pills in the peek hero (priority now matches the
   Tasks-style hover-pill instead of a static row). */
body.vf-studio .tk-peek-statgroup { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
body.vf-studio .tk-peek-statgroup .tk-peek-statuswrap { flex: 0 0 auto; }
/* Row-level delete (hover-reveal on desktop; always faintly shown on touch). */
body.vf-studio .pur-row-del { flex: none; margin-left: 4px; display: inline-flex; align-items: center; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .pur-row:hover .pur-row-del, body.vf-studio .pur-row-del:focus-within { opacity: 1; }
@media (hover: none) { body.vf-studio .pur-row-del { opacity: 0.55; } }
body.vf-studio .pur-peek-prio { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
body.vf-studio .pur-peek-priolabel { font-size: 12px; font-weight: 600; color: var(--fg3); margin-right: 4px; }
body.vf-studio .pur-peek-priopt { cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease-out); }
body.vf-studio .pur-peek-priopt.is-on { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.95); }
/* Segmented switch — the one shared control across the Studio (Marketplace
   Buy/Sell/List, Frames Review/Edit, Directory Crew/CRM, Kit Tech shift status,
   Consignments type, …). Unscoped on purpose so it looks identical in the admin
   (body.vf-studio) AND the kit-tech / consignor portals (body.is-rentals-portal),
   with hard fallbacks for any context missing the admin tokens. `.pur-*` is the
   legacy alias — both names render the same. */
.seg-toggle, .pur-sidetoggle { display: inline-flex; gap: 3px; background: var(--bg-tint, #eef1f5); border-radius: 999px; padding: 3px; flex: none; }
.seg-btn, .pur-side-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg3, #5b6573); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.seg-btn:hover, .pur-side-btn:hover { color: var(--fg1, #11151c); }
.seg-btn.is-on, .pur-side-btn.is-on { background: var(--accent-soft, rgba(9,94,223,0.12)); color: var(--vf-blue, #095EDF); }
.seg-n, .pur-side-n { font-size: 11px; opacity: 0.7; font-variant-numeric: tabular-nums; }
/* Shared studio checkbox — accent-blue, consistent size. Unscoped so it serves the
   admin (body.vf-studio) and the consignments/portal surfaces alike. */
.vf-check { appearance: auto; accent-color: var(--vf-blue, #095EDF); width: 16px; height: 16px; flex: none; cursor: pointer; }
/* AdminTableViewer toolbar right-slot (a toggle) + per-band action button. */
body.vf-studio .adb-toolbar-right { margin-left: auto; display: inline-flex; align-items: center; flex: none; }
/* In the toolbar right-slot the toggle must drop its legacy head spacing
   (margin: 2px 0 16px) so the flex row centres it against the search pill. */
body.vf-studio .adb-toolbar-right .adb-viewtoggle { margin: 0; }
body.vf-studio .tk-band-act { margin-left: auto; display: inline-flex; align-items: center; }
body.vf-studio .tk-band-emailbtn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-elev); font: inherit; font-size: 12px; font-weight: 600; color: var(--fg2); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-band-emailbtn:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
/* Segmented toggle living inside a cog panel fills the panel width. */
body.vf-studio .tk-cog-panel .seg-toggle { display: flex; }
body.vf-studio .tk-cog-panel .seg-toggle .seg-btn { flex: 1; justify-content: center; }
/* Feature board "Recently shipped" show-all toggle. */
body.vf-studio .feat-shipped-more { margin-top: 8px; border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 12px; font-weight: 600; color: var(--vf-blue); cursor: pointer; }
body.vf-studio .feat-shipped-more:hover { text-decoration: underline; }
/* Footer brand split into two links (logo → valley.film, Studio → dashboard). */
body.vf-studio .vf-footer .navbar-brand { cursor: default; }
body.vf-studio .vf-footer .navbar-brand-logo, body.vf-studio .vf-footer .navbar-brand-suffix { text-decoration: none; color: inherit; cursor: pointer; }
body.vf-studio .vf-footer .navbar-brand-logo { display: inline-flex; }
/* Directory Crew/CRM toggle reuses the segmented Buy/Sell pill; just needs the
   block spacing the old .adb-viewtabs row had. */
body.vf-studio .adb-viewtoggle { margin: 2px 0 16px; }
body.vf-studio .pur-single .pur-col { max-width: 100%; }
/* WeWork cards: keep the location text inside the card (was overflowing) */
body.vf-studio .ww-card { min-width: 0; overflow: hidden; }
body.vf-studio .ww-card-addr { display: block; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .kit-rank { position: relative; display: inline-flex; flex: 0 0 auto; }
body.vf-studio .kit-rank-cur { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border: 0; }
body.vf-studio .kit-rank-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 30; display: flex; flex-direction: column; gap: 1px; min-width: 212px; padding: 6px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(10,15,26,0.22); }
/* Portaled to <body> (escapes the card / peek overflow:hidden); positioned in viewport coords via inline top/left, above the peek overlay (z 200). */
body.vf-studio .kit-rank-menu-fixed { position: fixed; right: auto; z-index: 260; }
body.vf-studio .kit-rank-opt { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none; border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 12px; color: var(--fg1); cursor: pointer; white-space: nowrap; }
body.vf-studio .kit-rank-opt:hover { background: var(--bg-tint); }
body.vf-studio .kit-rank-opt.is-on { background: var(--accent-soft); color: var(--vf-blue); font-weight: 600; }
/* Cog-panel click-to-open selector (used for option groups with 4+ items). */
body.vf-studio .cog-select { position: relative; }
body.vf-studio .cog-select-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg-elev); font: inherit; font-size: 12px; font-weight: 600; color: var(--fg1); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .cog-select-btn:hover, body.vf-studio .cog-select-btn.is-open { border-color: var(--vf-blue); }
body.vf-studio .cog-select-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .cog-select-chev { flex: none; opacity: 0.6; transition: transform var(--dur-fast) var(--ease-out); }
body.vf-studio .cog-select-btn.is-open .cog-select-chev { transform: rotate(180deg); }
body.vf-studio .cog-select-menu { margin-top: 6px; display: flex; flex-direction: column; gap: 1px; max-height: 240px; overflow-y: auto; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-elev); }
body.vf-studio .cog-select-opt { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none; border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 12px; color: var(--fg1); cursor: pointer; white-space: nowrap; }
body.vf-studio .cog-select-opt:hover { background: var(--bg-tint); }
body.vf-studio .cog-select-opt.is-on { background: var(--accent-soft); color: var(--vf-blue); font-weight: 600; }
/* Calendars multi-select dropdown: dot + label + (remove) + check; dimmed when off. */
body.vf-studio .cog-multi-opt { gap: 9px; }
body.vf-studio .cog-multi-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .cog-multi-check { flex: none; color: var(--vf-blue); opacity: 1; transition: opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .cog-multi-opt.is-hidden .cog-multi-check { opacity: 0; }
body.vf-studio .cog-multi-opt.is-hidden .cal-legend-dot { opacity: 0.3; }
body.vf-studio .cog-multi-opt.is-hidden .cog-multi-label { color: var(--fg4); }
body.vf-studio .cog-multi-opt .cal-cog-chipx { margin-left: 2px; }
/* In the peek's blue-gradient hero the translucent rank pill was near-invisible.
   Make it an opaque white pill (the per-rank text colour stays for the colour
   coding) so it reads clearly against the gradient. */
body.vf-studio .tk-peek-hero .kit-rank-cur { background: #fff; box-shadow: 0 1px 3px rgba(10,15,26,0.2); padding: 4px 10px; border-radius: 999px; font-weight: 600; }

/* Kit Tech subview tabs (Shifts | Accounts) */
body.vf-studio .kit-subtabs { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 20px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; }
/* Hours page sub-row: staff tabs on the left, "View in Notion" link on the right. */
body.vf-studio .hours-subrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
body.vf-studio .hours-subrow .kit-subtabs { margin-bottom: 0; }
body.vf-studio .hours-notion-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--vf-blue); text-decoration: none; }
body.vf-studio .hours-notion-link:hover { text-decoration: underline; }
body.vf-studio .kit-subtab { border: 0; background: none; border-radius: 999px; padding: 7px 18px; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg3); cursor: pointer; transition: background 140ms, color 140ms; }
body.vf-studio .kit-subtab:hover { color: var(--fg1); }
body.vf-studio .kit-subtab.is-on { background: var(--bg-elev); color: var(--vf-blue); box-shadow: 0 1px 2px rgba(10,15,26,0.08); }
body.vf-studio.vf-admin-dark .kit-subtab.is-on { box-shadow: none; }
body.vf-studio .kit-tech-email-btn { border: 0; cursor: pointer; font: inherit; }

/* Finance pages (Expenses + Hours) */
body.vf-studio .fin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 4px 0 26px; }
body.vf-studio .fin-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; }
body.vf-studio .fin-stat-lead { background: var(--accent-soft); border-color: transparent; }
body.vf-studio .fin-stat-v { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg1); }
body.vf-studio .fin-stat-lead .fin-stat-v { color: var(--vf-blue); }
body.vf-studio .fin-stat-l { font-size: 12px; color: var(--fg3); }
body.vf-studio .fin-bars { display: flex; flex-direction: column; gap: 9px; margin: 0 0 28px; }
body.vf-studio .fin-bar-row { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: 12px; }
body.vf-studio .fin-bar-label { font-size: 12px; color: var(--fg2); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.vf-studio .fin-bar-track { height: 8px; border-radius: 999px; background: var(--bg-tint); overflow: hidden; }
body.vf-studio .fin-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--vf-blue); }
body.vf-studio .fin-bar-val { font-size: 12px; font-weight: 600; color: var(--fg1); text-align: right; font-variant-numeric: tabular-nums; }
body.vf-studio .fin-groups { display: flex; flex-direction: column; gap: 18px; }
body.vf-studio .fin-group-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
body.vf-studio .fin-group-name { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--fg1); }
body.vf-studio .fin-group-total { font-size: 12px; font-weight: 600; color: var(--fg3); font-variant-numeric: tabular-nums; }
body.vf-studio .fin-rows { display: flex; flex-direction: column; }
/* 5 tracks — name | priority | frequency | due | cost. The cost column was
   missing, so .fin-row-cost wrapped onto its own grid row under the name. */
body.vf-studio .fin-row { display: grid; grid-template-columns: 1fr auto 86px 96px minmax(72px, auto); align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
body.vf-studio .fin-row:last-child { border-bottom: 0; }
body.vf-studio .fin-row-name { font-size: 13px; color: var(--fg1); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .fin-row-supp { color: var(--fg3); font-weight: 400; }
body.vf-studio .fin-row-prio { font-size: 11px; padding: 3px 9px; justify-self: start; }
body.vf-studio .fin-row-freq { font-size: 12px; color: var(--fg3); text-align: right; white-space: nowrap; }
body.vf-studio .fin-row-due { font-size: 12px; color: var(--fg3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.vf-studio .fin-row-due.is-soon { color: #e0a224; font-weight: 600; }
body.vf-studio .fin-row-due.is-overdue { color: var(--danger-text); font-weight: 600; }
body.vf-studio .fin-stat-overdue .fin-stat-v { color: var(--danger-text); }
body.vf-studio .fin-group-note { font-size: 11px; font-weight: 500; color: var(--fg4); text-transform: none; }
body.vf-studio .fin-row-cost { font-size: 13px; font-weight: 600; color: var(--fg1); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.vf-studio .fin-row-permo { font-size: 11px; font-weight: 400; color: var(--fg3); }
body.vf-studio .fin-period { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 22px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; }
/* Same metrics as .kit-subtab — on Hours the two sit stacked, so any size
   drift between them reads as a mistake. */
body.vf-studio .fin-period-opt { border: 0; background: none; border-radius: 999px; padding: 7px 18px; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg3); cursor: pointer; transition: background 140ms, color 140ms; }
body.vf-studio .fin-period-opt:hover { color: var(--fg1); }
body.vf-studio .fin-period-opt.is-on { background: var(--bg-elev); color: var(--vf-blue); box-shadow: 0 1px 2px rgba(10,15,26,0.08); }
body.vf-studio.vf-admin-dark .fin-period-opt.is-on { box-shadow: none; }
body.vf-studio .fin-hours-row { grid-template-columns: 1fr auto 64px auto; }
@media (max-width: 760px) {
  body.vf-studio .fin-stats { grid-template-columns: repeat(2, 1fr); }
  body.vf-studio .fin-bar-row { grid-template-columns: 100px 1fr 70px; }
}

/* Kit Tech email composer modal (.kte-*) */
body.vf-studio .kte-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10,15,26,0.42); backdrop-filter: blur(2px); }
body.vf-studio .kte-modal { width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 64px rgba(10,15,26,0.3); overflow: hidden; }
body.vf-studio .kte-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
body.vf-studio .kte-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg1); }
body.vf-studio .kte-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
/* Two-pane composer: form left, live preview right */
body.vf-studio .kte-modal-wide { max-width: 980px; }
body.vf-studio .kte-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; overflow: hidden; }
body.vf-studio .kte-split .kte-body { border-right: 1px solid var(--line); }
body.vf-studio .kte-preview { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; overflow-y: auto; background: var(--bg-tint); min-height: 0; }
body.vf-studio .kte-preview-head { display: flex; align-items: baseline; justify-content: space-between; }
body.vf-studio .kte-preview-subject { font-size: 13px; color: var(--fg1); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
body.vf-studio .kte-preview-frame { flex: 1 1 auto; min-height: 360px; width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
body.vf-studio .kte-preview-empty { flex: 1 1 auto; display: grid; place-items: center; text-align: center; color: var(--fg4); font-size: 13px; border: 1px dashed var(--line); border-radius: 10px; padding: 24px; }
@media (max-width: 820px) {
  body.vf-studio .kte-split { grid-template-columns: 1fr; }
  body.vf-studio .kte-split .kte-body { border-right: 0; border-bottom: 1px solid var(--line); }
}
body.vf-studio .kte-muted { color: var(--fg3); font-size: 12px; line-height: 1.55; margin: 0; }
body.vf-studio .kte-field { display: flex; flex-direction: column; gap: 5px; }
body.vf-studio .kte-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); }
body.vf-studio .kte-field input, body.vf-studio .kte-field textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-tint); color: var(--fg1); font: inherit; font-size: 14px; resize: vertical; }
body.vf-studio .kte-field input:focus, body.vf-studio .kte-field textarea:focus { outline: none; border-color: var(--vf-blue); }
body.vf-studio .kte-recips { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
body.vf-studio .kte-recips-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bg-tint); border-bottom: 1px solid var(--line); }
body.vf-studio .kte-list { list-style: none; margin: 0; padding: 4px; max-height: 230px; overflow-y: auto; }
body.vf-studio .kte-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
body.vf-studio .kte-row:hover { background: var(--bg-tint); }
body.vf-studio .kte-row input { flex: none; }
body.vf-studio .kte-rank { flex: none; font-size: 11px; padding: 3px 8px; }
body.vf-studio .kte-name { font-size: 13px; color: var(--fg1); font-weight: 500; }
body.vf-studio .kte-email { font-size: 12px; margin-left: auto; }
body.vf-studio .kte-result { padding: 9px 12px; border-radius: 10px; font-size: 13px; background: var(--bg-tint); color: var(--fg2); }
body.vf-studio .kte-result.is-sent { background: rgba(46,160,67,0.12); color: var(--success-text); }
body.vf-studio .kte-result.is-error { background: rgba(200,58,58,0.1); color: var(--danger-text); }
body.vf-studio .kte-failed { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
body.vf-studio .kte-failed li { display: flex; flex-direction: column; gap: 1px; font-size: 12px; padding: 6px 8px; border-radius: 8px; background: rgba(200,58,58,0.07); }
body.vf-studio .kte-failed-who { font-weight: 600; color: var(--fg1); }
body.vf-studio .kte-failed-why { color: var(--danger-text); font-size: 11px; word-break: break-word; }
body.vf-studio .kte-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.vf-studio .kte-btn-primary { border: 0; border-radius: 999px; padding: 9px 18px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--vf-blue); cursor: pointer; }
body.vf-studio .kte-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
body.vf-studio .kte-btn-secondary { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg1); background: var(--bg-tint); cursor: pointer; }
body.vf-studio .kte-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
body.vf-studio .kte-link { border: 0; background: none; font: inherit; font-size: 13px; color: var(--fg3); cursor: pointer; padding: 4px; }
body.vf-studio .kte-link:hover { color: var(--vf-blue); }

/* Directory (Crew/CRM/Applicants) sort cog stacks vertically; count sits muted */
body.vf-studio .tk-cog-sizes-col { flex-direction: column; align-items: stretch; }
body.vf-studio .tk-toolbar .adb-count { margin-left: auto; font-size: 12px; color: var(--fg4); white-space: nowrap; }

/* ===== Studio group chat (/admin/messages) ===== */
/* Messages: channel sidebar (Valley Films / Valley Rentals / Private DMs) + chat */
/* Desktop: single column — a horizontal channel strip sits above the chat
   (iMessage-style) instead of a left sidebar. Mobile (≤760px, the is-mlist /
   is-mconvo two-view below) is unchanged. */
body.vf-studio .chat-shell { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
body.vf-studio .chat-channels { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; align-content: center; padding: 0 2px 12px; border-bottom: 1px solid var(--line); }
body.vf-studio .chat-channels .chat-chan { width: auto; flex: 0 0 auto; }
body.vf-studio .chat-channels .chat-chan-group { padding: 0 4px; align-self: center; }
body.vf-studio .chat-channels .chat-chan-plus-wrap { display: inline-flex; }
/* Toggle to hide/show the channel strip (desktop). Lives in the chat toolbar. */
body.vf-studio .chat-navtoggle { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); background: var(--bg-elev); border-radius: 10px; color: var(--fg3); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-navtoggle:hover { color: var(--vf-blue); border-color: var(--vf-blue); }
body.vf-studio .chat-navtoggle.is-collapsed { background: var(--accent-soft); color: var(--vf-blue); border-color: transparent; }
body.vf-studio .chat-shell.is-navcollapsed .chat-channels { display: none; }
/* Full-screen message search — same pill style as the admin search bars, with a
   refresh icon on the right. Hidden in the compact side-peek. */
body.vf-studio .chat-msgsearch { flex: none; display: flex; align-items: center; gap: 9px; min-height: 38px; margin-bottom: 16px; padding: 0 10px 0 16px; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--fg3); transition: border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-msgsearch:focus-within { border-color: var(--vf-blue); }
body.vf-studio .chat-msgsearch.is-compact { padding: 6px 10px 6px 14px; margin-bottom: 10px; }
body.vf-studio .chat-msgsearch-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.vf-studio .chat-msgsearch-ico { flex: none; color: var(--fg4); }
body.vf-studio .chat-msgsearch-input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--fg1); outline: none; }
body.vf-studio .chat-msgsearch-input::placeholder { color: var(--fg4); }
body.vf-studio .chat-msgsearch-clear { flex: none; border: 0; background: none; color: var(--fg3); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }
body.vf-studio .chat-msgsearch-refresh { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: none; border-radius: 999px; color: var(--fg3); cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-msgsearch-refresh:hover { color: var(--vf-blue); }
body.vf-studio .chat-msgsearch-refresh.is-spin svg { animation: dash-refresh-spin 0.8s linear infinite; }
body.vf-studio .chat-msgsearch-archive { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: none; border-radius: 999px; color: var(--fg3); cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-msgsearch-archive:hover { color: var(--danger-text); }
body.vf-studio .chat-msgsearch-archive:active { transform: scale(0.92); }
body.vf-studio .chat-chan { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 11px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--fg2); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-chan:hover { background: var(--bg-tint); color: var(--fg1); }
body.vf-studio .chat-chan.is-on { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .chat-chan-group { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg4); padding: 13px 11px 4px; }
body.vf-studio .chat-chan-dm { font-weight: 500; }
body.vf-studio .chat-chan-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Online presence — green dot on the avatar of anyone with the Studio open. */
body.vf-studio .chat-av { position: relative; overflow: visible; }
body.vf-studio .chat-online-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 999px; background: var(--presence-online, #1F9D55); box-shadow: 0 0 0 2px var(--bg-elev); }
body.vf-studio .chat-online-txt { color: #22B14C; font-weight: 600; font-size: 0.92em; }
/* Reserve room for the unread dot so it never sits over the channel name. */
body.vf-studio .chat-chan.is-unread .chat-chan-name { padding-right: 15px; }
/* Circle brand logos on the Films/Rentals channels (matches the DM avatars) */
body.vf-studio .chat-chan-logo { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; position: relative; }
body.vf-studio .chat-chan-logo img { width: 62%; height: 62%; object-fit: contain; display: block; }
body.vf-studio .chat-chan-logo.is-films { background: var(--vf-blue, #095EDF); }
body.vf-studio .chat-chan-logo.is-rentals { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 760px) { body.vf-studio .chat-shell { grid-template-columns: 1fr; } body.vf-studio .chat-channels { flex-direction: row; flex-wrap: wrap; } }
/* Mobile full-page Messages: a full-width conversation list, and tapping one opens
   a full-screen conversation with a back button (the two-view phone chat pattern). */
body.vf-studio .chat-mobhead { display: none; }
body.vf-studio .chat-mobback { display: inline-flex; align-items: center; gap: 2px; flex: none; border: 0; background: none; color: var(--vf-blue); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 2px 6px 2px 0; }
body.vf-studio .chat-mobhead-title { min-width: 0; font-size: 16px; font-weight: 700; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  body.vf-studio .chat-shell.is-mlist, body.vf-studio .chat-shell.is-mconvo { display: block; }
  /* List view — clean full-width vertical conversation list, bigger tap targets. */
  body.vf-studio .chat-shell.is-mlist .chat-channels { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 3px; }
  body.vf-studio .chat-shell.is-mlist .chat-pane { display: none; }
  body.vf-studio .chat-shell.is-mlist .chat-chan { padding: 13px 12px; font-size: 15px; border-radius: 12px; }
  body.vf-studio .chat-shell.is-mlist .chat-chan-logo, body.vf-studio .chat-shell.is-mlist .chat-chan-prodav, body.vf-studio .chat-shell.is-mlist .chat-chan-bell { width: 34px; height: 34px; }
  body.vf-studio .chat-shell.is-mlist .chat-chan-bell svg { width: 19px; height: 19px; }
  body.vf-studio .chat-shell.is-mlist .chat-chan-group { font-size: 11px; padding-top: 16px; }
  /* Conversation view — full-screen below the mobile top bar. */
  body.vf-studio .chat-shell.is-mconvo .chat-channels { display: none; }
  body.vf-studio .chat-shell.is-mconvo .chat-pane { position: fixed; inset: var(--mbar-h) 0 0 0; z-index: 18; background: var(--bg); display: flex; flex-direction: column; padding: 0 10px; }
  /* Keep the search/refresh/cog (archive + sound) reachable, just tight. */
  body.vf-studio .chat-shell.is-mconvo .chat-toolbar { flex: none; margin: 8px 0; }
  body.vf-studio .chat-shell.is-mconvo .chat-mobhead { display: flex; align-items: center; gap: 8px; flex: none; padding: 9px 2px; border-bottom: 1px solid var(--line); margin: 0 -10px; padding-left: 12px; padding-right: 12px; background: var(--bg-elev); }
  body.vf-studio .chat-shell.is-mconvo .chat { flex: 1 1 auto; height: auto; min-height: 0; border: 0; border-radius: 0; background: var(--bg); }
  body.vf-studio .chat-shell.is-mconvo .chat-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  /* When impersonating, the sticky "Viewing as" bar (z-19) sits below the mbar —
     drop the conversation pane below it so the back-header isn't covered. */
  body.vf-studio.vf-viewas .chat-shell.is-mconvo .chat-pane { top: var(--mbar-h); }
}
body.vf-studio .chat { display: flex; flex-direction: column; height: min(70vh, 660px); border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elev); overflow: hidden; }
/* Messages page (AdminViewerShell bare): no subhero + full-width column, so the
   chat fills nearly the whole pane. The side-peek + mobile views keep their own
   sizing (those don't use .kp-content-bare). */
/* Messages fills the viewport with NO page scroll — only the chat history (.chat-list)
   scrolls. Footer is skipped on this page (AdminViewerShell bare). */
body.vf-studio .kp-content-bare { padding-top: 14px; padding-bottom: 14px; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
/* Width follows the master Page-width setting: standard keeps the centred
   column; body.vf-admin-wide (Settings → Page width → Full) unlocks it via the
   shared wide rule above — Messages no longer forces full-bleed on its own.
   width:100% because the bare flex column otherwise shrinks the inner to
   fit-content (auto margins disable flex stretch) instead of filling to the
   standard 1080 cap like every other page. */
body.vf-studio .kp-content-bare .kp-content-inner { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.vf-studio .kp-content-bare .chat-shell { flex: 1 1 auto; min-height: 0; }
/* Fill the shell regardless of how many messages the channel has — otherwise a
   near-empty DM (e.g. one you've barely messaged) collapses to content height
   and the whole chat card shrinks. flex:1 here lets the inner .chat fill. */
body.vf-studio .kp-content-bare .chat-pane { flex: 1 1 auto; min-height: 0; }
body.vf-studio .kp-content-bare .chat { flex: 1 1 auto; height: auto; min-height: 0; }
/* Notifications ("Alerts") pseudo-channel: the bell at the right of the channel
   bar + the feed rendered in the chat pane (NotifInbox). Mirrors the .chat box so
   it reads as just another conversation. */
body.vf-studio .chat-chan-notifs { margin-left: auto; }
body.vf-studio .chat-chan-bell { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-tint); color: var(--fg2); }
body.vf-studio .chat-chan-bell svg { width: 15px; height: 15px; }
body.vf-studio .chat-chan-notifs.is-on .chat-chan-bell { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .chat-chan-badge { flex: none; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--vf-blue, #095EDF); color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; margin-left: 2px; }
/* Notifications channel: a plain red unread dot instead of a count. */
body.vf-studio .chat-chan-notifdot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--danger); margin-left: 3px; }
body.vf-studio .chat-notifs { display: flex; flex-direction: column; height: min(70vh, 660px); border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elev); overflow: hidden; }
body.vf-studio .kp-content-bare .chat-notifs { flex: 1 1 auto; height: auto; min-height: 0; }
body.vf-studio .chat-notifs-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
body.vf-studio .chat-notifs-count { font-size: 13px; font-weight: 600; color: var(--fg2); }
body.vf-studio .chat-notifs-acts { display: inline-flex; gap: 6px; }
body.vf-studio .chat-notifs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.vf-studio .chat-notifs-list .studio-notif-swipe { border-bottom: 1px solid var(--line); }
body.vf-studio .chat-notifs-list .studio-notif-swipe:last-child { border-bottom: 0; }
body.vf-studio .chat-notifs-empty { padding: 44px 28px; text-align: center; max-width: 440px; margin: auto; color: var(--fg3); line-height: 1.5; }
@media (max-width: 760px) { body.vf-studio .kp-content-bare { padding-top: 0; height: calc(100vh - var(--mbar-h, 0px)); } }
/* Chat bubble size — cog → Size (compact / standard=default / Cozy). */
body.vf-studio .chat.tk-density-compact .chat-list { padding: 10px 18px 14px; }
body.vf-studio .chat.tk-density-compact .chat-bubble { padding: 5px 11px; font-size: 13px; line-height: 1.34; border-radius: 16px; }
body.vf-studio .chat.tk-density-roomy .chat-list { padding: 20px 26px 26px; }
body.vf-studio .chat.tk-density-roomy .chat-bubble { padding: 11px 16px; font-size: 15px; line-height: 1.46; }
/* Right column = the search toolbar (above) + the bordered message box. */
body.vf-studio .chat-pane { display: flex; flex-direction: column; min-width: 0; }
body.vf-studio .chat-toolbar { margin-bottom: 12px; }
body.vf-studio .msg-peek .chat-pane { flex: 1 1 auto; min-height: 0; }

/* ── Messages side-peek (Messenger-style) ── */
body.vf-studio .msg-peek { position: fixed; top: 94px; right: 14px; bottom: 14px; width: min(var(--msg-peek-w, 440px), calc(100vw - 28px)); z-index: 25; display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 54px rgba(10,15,26,0.18), -10px 0 40px rgba(10,15,26,0.10); animation: msgPeekIn 280ms var(--st-ease) both; }
/* Drag-to-resize handle on the panel's left edge */
body.vf-studio .msg-peek-resize { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; z-index: 6; cursor: ew-resize; }
body.vf-studio .msg-peek-resize::after { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 3px; height: 42px; border-radius: 999px; background: var(--line-strong); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .msg-peek-resize:hover::after, body.vf-studio.is-peek-resizing .msg-peek-resize::after { opacity: 1; background: var(--vf-blue); }
body.vf-studio.is-peek-resizing { cursor: ew-resize; user-select: none; }
body.vf-studio.is-peek-resizing .msg-peek, body.vf-studio.is-peek-resizing .kp-content { transition: none !important; animation: none !important; }
@keyframes msgPeekIn { from { transform: translateX(102%); } to { transform: translateX(0); } }
body.vf-studio .msg-peek-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 4px 8px; border-bottom: 1px solid var(--line); }
/* The whole header bar is the click target → opens full-screen messages. */
body.vf-studio .msg-peek-headlink { flex: 1; display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--fg1); transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .msg-peek-headlink:hover { background: var(--bg-tint); }
body.vf-studio .msg-peek-title { font-size: 15px; font-weight: 700; color: var(--fg1); }
body.vf-studio .msg-peek-actions { display: inline-flex; gap: 4px; }
body.vf-studio .msg-peek-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 8px; color: var(--fg3); cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .msg-peek-btn:hover { background: var(--bg-tint); color: var(--fg1); }
body.vf-studio .msg-peek-body { flex: 1 1 auto; min-height: 0; padding: 12px; display: flex; }
/* Side-peek docked to the LEFT (Settings → Pages). Sits just right of the rail;
   the resize grip + the content shift flip to the other side. */
body.vf-studio.is-msgpeek-left .msg-peek { left: calc(var(--sidebar-w, 0px) + 14px); right: auto; box-shadow: 0 20px 54px rgba(10,15,26,0.18), 10px 0 40px rgba(10,15,26,0.10); }
body.vf-studio.is-msgpeek-left .msg-peek-resize { left: auto; right: 0; }
body.vf-studio.is-msgpeek-left .msg-peek-resize::after { left: auto; right: 3px; }
body.vf-studio.is-msgpeek-left.has-msg-peek .kp-content { padding-right: 0; padding-left: calc(min(var(--msg-peek-w, 440px), calc(100vw - var(--sidebar-w, 0px) - 28px)) + 30px); }
@media (max-width: 760px) { body.vf-studio.is-msgpeek-left.has-msg-peek .kp-content { padding-left: 0; } }
/* Reuse StudioChat, but stack it: channels become an icon-only bubble row across
   the top, with the conversation filling the rest of the panel. */
body.vf-studio .msg-peek .chat-shell { display: flex; flex-direction: column; gap: 10px; height: 100%; width: 100%; }
body.vf-studio .msg-peek .chat-channels { flex: none; flex-direction: row; align-items: center; gap: 9px; padding: 2px 2px 11px; border-bottom: 1px solid var(--line); overflow-x: auto; }
body.vf-studio .msg-peek .chat-chan { width: auto; flex: none; padding: 0; background: none; border-radius: 50%; }
body.vf-studio .msg-peek .chat-chan:hover, body.vf-studio .msg-peek .chat-chan.is-on { background: none; }
body.vf-studio .msg-peek .chat-chan-name, body.vf-studio .msg-peek .chat-chan-group { display: none; }
body.vf-studio .msg-peek .chat-chan-logo, body.vf-studio .msg-peek .chat-chan .tk-av, body.vf-studio .msg-peek .chat-chan-bell { width: 34px; height: 34px; transition: box-shadow var(--dur-fast) var(--ease-out); }
body.vf-studio .msg-peek .chat-chan-bell svg { width: 19px; height: 19px; }
body.vf-studio .msg-peek .chat-chan:hover .chat-chan-logo, body.vf-studio .msg-peek .chat-chan:hover .tk-av, body.vf-studio .msg-peek .chat-chan:hover .chat-chan-bell { box-shadow: 0 0 0 2px var(--line-strong); }
body.vf-studio .msg-peek .chat-chan.is-on .chat-chan-logo, body.vf-studio .msg-peek .chat-chan.is-on .tk-av, body.vf-studio .msg-peek .chat-chan.is-on .chat-chan-bell { box-shadow: 0 0 0 2px var(--vf-blue); }
body.vf-studio .msg-peek .chat { height: 100%; flex: 1 1 auto; min-height: 0; }
/* Production chat bubbles + the "new production chat" launcher */
body.vf-studio .chat-chan-prodav { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); background-size: cover; background-position: center; color: var(--vf-blue); font-size: 11px; font-weight: 800; }
body.vf-studio .chat-chan-plusic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--line-strong); color: var(--fg3); }
body.vf-studio .chat-chan-plus { color: var(--fg3); }
body.vf-studio .chat-chan-plus-wrap { position: relative; }
@media (max-width: 760px) { body.vf-studio .chat-shell .chat-channels { flex-direction: row; flex-wrap: wrap; } }
body.vf-studio .chat-prodpicker { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; max-width: 280px; max-height: 280px; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 46px rgba(10,15,26,0.22); padding: 6px; }
body.vf-studio .chat-prodpicker-h { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg4); padding: 6px 8px 7px; }
body.vf-studio .chat-prodpicker-empty { font-size: 13px; color: var(--fg3); padding: 4px 8px 8px; }
body.vf-studio .chat-prodpicker-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 7px 8px; font: inherit; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-prodpicker-opt:hover { background: var(--bg-tint); }
body.vf-studio .chat-prodpicker-av { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); background-size: cover; background-position: center; color: var(--vf-blue); font-size: 12px; font-weight: 800; }
body.vf-studio .chat-prodpicker-name { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: var(--fg1); line-height: 1.25; }
body.vf-studio .chat-prodpicker-sub { font-size: 11px; font-weight: 500; color: var(--fg4); }
/* Peek (icon-row) variants */
body.vf-studio .msg-peek .chat-chan-prodav, body.vf-studio .msg-peek .chat-chan-plusic { width: 34px; height: 34px; transition: box-shadow var(--dur-fast) var(--ease-out); }
body.vf-studio .msg-peek .chat-chan:hover .chat-chan-prodav, body.vf-studio .msg-peek .chat-chan:hover .chat-chan-plusic { box-shadow: 0 0 0 2px var(--line-strong); }
body.vf-studio .msg-peek .chat-chan.is-on .chat-chan-prodav { box-shadow: 0 0 0 2px var(--vf-blue); }
body.vf-studio .msg-peek .chat-prodpicker { right: 0; left: auto; }
/* @-mention picker above the composer + highlight in messages */
body.vf-studio .chat-composer { position: relative; }
body.vf-studio .chat-mentionbar { position: absolute; bottom: calc(100% + 6px); left: 14px; z-index: 50; min-width: 180px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(10,15,26,0.2); padding: 5px; display: flex; flex-direction: column; gap: 1px; }
body.vf-studio .chat-mentionopt { display: flex; align-items: center; gap: 9px; border: 0; background: none; border-radius: 8px; padding: 6px 9px; font: inherit; text-align: left; cursor: pointer; }
body.vf-studio .chat-mentionopt:hover { background: var(--bg-tint); }
body.vf-studio .chat-mentionopt-name { display: flex; flex-direction: column; font-size: 13px; font-weight: 650; color: var(--fg1); line-height: 1.2; }
body.vf-studio .chat-mentionopt-full { font-size: 11px; font-weight: 500; color: var(--fg4); }
/* @mention: just bold + blue text in an otherwise normal bubble (no chip, no
   special bubble highlight) — so a tag reads as ordinary message text, emphasised. */
body.vf-studio .chat-mention { font-weight: 700; color: var(--vf-blue); }
body.vf-studio .chat-msg.is-mine .chat-mention { color: #fff; }
/* Unread dot on a channel/DM bubble */
body.vf-studio .chat-chan { position: relative; }
body.vf-studio .chat-chan-dot { position: absolute; width: 9px; height: 9px; border-radius: 999px; background: var(--chat-unread); box-shadow: 0 0 0 2px var(--bg-elev); }
/* Channels with unread messages read bolder in the full-page sidebar */
body.vf-studio .chat-chan.is-unread .chat-chan-name { font-weight: 800; color: var(--fg1); }
/* Full-page (row) nav: dot sits at the right end of the row */
body.vf-studio .chat-chan-dot { top: 50%; right: 9px; transform: translateY(-50%); }
/* Peek (icon row): dot rides the top-right of the bubble */
body.vf-studio .msg-peek .chat-chan-dot { top: -1px; right: -1px; transform: none; }
/* Read receipt under your latest message */
body.vf-studio .chat-receipt { align-self: flex-end; margin: 3px 4px 0; font-size: 10px; font-weight: 600; color: var(--fg4); user-select: none; }
/* Push the page content left to make room for the panel. */
body.vf-studio .kp-content { transition: padding-right 300ms var(--st-ease); }
body.vf-studio.has-msg-peek .kp-content { padding-right: calc(min(var(--msg-peek-w, 440px), calc(100vw - 28px)) + 30px); }
@media (max-width: 980px) {
  body.vf-studio.has-msg-peek .kp-content { padding-right: 0; }
  body.vf-studio .msg-peek { top: 73px; right: 0; bottom: 0; width: 100vw; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  body.vf-studio .msg-peek-resize { display: none; }
}
body.vf-studio .chat-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 0; padding: 16px 22px 20px; }
body.vf-studio .chat-empty { margin: auto; color: var(--fg4); font-size: 13px; }
body.vf-studio .chat-day { align-self: center; margin: 12px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg4); }
/* Inbound rentals enquiry card (kind:'enquiry' — fed by the /rentals contact form). */
body.vf-studio .chat-enquiry { align-self: flex-start; width: 100%; max-width: 580px; margin: 6px 0; padding: 14px 16px; border: 1px solid var(--accent-line, rgba(9,94,223,0.22)); border-radius: 14px; background: var(--accent-soft); }
body.vf-studio .chat-enquiry-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
body.vf-studio .chat-enquiry-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--vf-blue); padding: 2px 8px; border-radius: 999px; }
body.vf-studio .chat-enquiry-from { font-size: 14px; font-weight: 700; color: var(--fg1); }
body.vf-studio .chat-enquiry-mail { font-size: 12.5px; color: var(--vf-blue); text-decoration: none; }
body.vf-studio .chat-enquiry-mail:hover { text-decoration: underline; }
body.vf-studio .chat-enquiry-dates { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; font-size: 12px; color: var(--fg3); font-weight: 600; }
body.vf-studio .chat-enquiry-brief { font-size: 13.5px; line-height: 1.5; color: var(--fg1); white-space: pre-wrap; }
body.vf-studio .chat-enquiry-replybtn { margin-top: 13px; border: 0; border-radius: 999px; padding: 8px 17px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--vf-blue); cursor: pointer; transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-enquiry-replybtn:hover { filter: brightness(1.07); }
body.vf-studio .chat-enquiry-replybtn:active { transform: scale(0.97); }
body.vf-studio .chat-enquiry-composer { margin-top: 12px; }
body.vf-studio .chat-enquiry-ta { width: 100%; min-height: 96px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--fg1); background: var(--bg-elev); outline: none; }
body.vf-studio .chat-enquiry-ta:focus { border-color: var(--vf-blue); }
body.vf-studio .chat-enquiry-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
body.vf-studio .chat-enquiry-send { border: 0; border-radius: 999px; padding: 8px 17px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--vf-blue); cursor: pointer; transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-enquiry-send:hover { filter: brightness(1.07); }
body.vf-studio .chat-enquiry-send:active { transform: scale(0.97); }
body.vf-studio .chat-enquiry-send:disabled { opacity: 0.55; cursor: default; transform: none; filter: none; }
body.vf-studio .chat-enquiry-cancel { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg3); cursor: pointer; padding: 8px 6px; }
body.vf-studio .chat-enquiry-cancel:hover { color: var(--fg1); }
body.vf-studio .chat-enquiry-err { margin-top: 8px; font-size: 12.5px; color: var(--danger-text); }
body.vf-studio .chat-enquiry.is-responded { background: var(--bg-tint); border-color: var(--line); opacity: 0.7; }
body.vf-studio .chat-enquiry-done { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--success-text); }
/* Reply, rendered inline under the enquiry (no separate chat bubble). */
body.vf-studio .chat-enquiry-replied { margin-top: 12px; border-top: 1px solid var(--accent-line, rgba(9,94,223,0.18)); padding-top: 10px; }
body.vf-studio .chat-enquiry-replied .chat-enquiry-done { margin-top: 0; }
body.vf-studio .chat-enquiry-replytext { margin: 8px 0 0; padding: 8px 11px; border-left: 2px solid var(--accent-line, rgba(9,94,223,0.4)); background: var(--bg-elev); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.5; color: var(--fg1); white-space: pre-wrap; }
body.vf-studio .chat-enquiry-openmail { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--vf-blue); text-decoration: none; }
body.vf-studio .chat-enquiry-openmail:hover { text-decoration: underline; }
body.vf-studio .chat-day span { background: var(--bg-tint); padding: 3px 12px; border-radius: 999px; }
/* ── iMessage-style message rows ─────────────────────────────────────────── */
body.vf-studio .chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 80%; }
/* Own the horizontal gesture for swipe-to-reply while the list keeps scrolling
   vertically (touch) — without this the browser eats the sideways drag as a scroll. */
body.vf-studio .chat-msg { touch-action: pan-y; }
body.vf-studio .chat-msg.is-grouped { margin-top: 2px; }
body.vf-studio .chat-msg:not(.is-grouped) { margin-top: 10px; }
body.vf-studio .chat-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
body.vf-studio .chat-av { flex: 0 0 auto; align-self: flex-end; margin-bottom: 2px; }
body.vf-studio .chat-av-spacer { flex: 0 0 26px; width: 26px; }
body.vf-studio .chat-col { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
body.vf-studio .chat-msg.is-mine .chat-col { align-items: flex-end; }
body.vf-studio .chat-bubblewrap { max-width: 100%; }
body.vf-studio .chat-name { font-size: 11px; font-weight: 700; color: var(--fg3); margin: 0 0 3px 12px; }
/* Bubble — fully rounded; the last of a run gets an iMessage tail corner */
body.vf-studio .chat-bubblewrap { position: relative; }
body.vf-studio .chat-bubble { position: relative; display: inline-block; padding: 8px 13px; border-radius: 16px; background: #E9E9EB; font-size: 14px; line-height: 1.4; color: #1B1B1F; word-break: break-word; max-width: 100%; }
body.vf-studio .chat-msg.is-mine .chat-bubble { background: var(--vf-blue); color: #fff; }
body.vf-studio .chat-msg.is-tail:not(.is-mine) .chat-bubble { border-bottom-left-radius: 6px; }
body.vf-studio .chat-msg.is-tail.is-mine .chat-bubble { border-bottom-right-radius: 6px; }
body.vf-studio .chat-text { white-space: pre-wrap; }
body.vf-studio .chat-msg.is-pending { opacity: 0.65; }
/* Meta line — time · edited + edit/delete, UNDERNEATH the bubble, on hover */
/* Hover meta sits ABSOLUTELY below the bubble, so revealing it never reflows
   the list — pure opacity fade, buttery smooth. */
/* Hover meta = the time only, centred under the bubble as a pill matching the
   day dividers (iMessage-style). Actions moved to the right-click menu. Still
   absolutely positioned so revealing it never reflows the list. */
body.vf-studio .chat-meta { position: absolute; top: calc(100% - 3px); left: 50%; display: flex; align-items: center; white-space: nowrap; padding: 3px 12px; background: var(--bg-tint); border-radius: 999px; opacity: 0; pointer-events: none; transform: translate(-50%, -3px); transition: opacity 0.14s ease, transform 0.14s var(--st-ease); z-index: 5; }
body.vf-studio .chat-msg:hover .chat-meta, body.vf-studio .chat-msg:focus-within .chat-meta { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* Fade the read receipt while hovering so the time pill doesn't sit on top of it */
body.vf-studio .chat-receipt { transition: opacity 0.14s ease; }
body.vf-studio .chat-msg:hover .chat-receipt { opacity: 0; }
body.vf-studio .chat-metatime { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg4); white-space: nowrap; user-select: none; }
/* Right-click context menu (Reply / New task / Edit / Delete) — iMessage-style. */
body.vf-studio .chat-ctxmenu { position: fixed; min-width: 186px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(10,15,26,0.24); padding: 6px; z-index: 210; display: flex; flex-direction: column; gap: 1px; animation: cal-magic-grow 130ms var(--ease-out); }
body.vf-studio .chat-ctxmenu button, body.vf-studio .chat-ctxmenu a { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 500; color: var(--fg1); cursor: pointer; text-decoration: none; }
body.vf-studio .chat-ctxmenu button:hover, body.vf-studio .chat-ctxmenu a:hover { background: var(--bg-tint); }
body.vf-studio .chat-ctxmenu button svg { flex: none; color: var(--fg3); }
body.vf-studio .chat-ctxmenu button.is-del { color: var(--danger-text); }
body.vf-studio .chat-ctxmenu button.is-del svg { color: var(--danger-text); }
body.vf-studio .chat-ctxmenu button.is-del.is-confirm { font-weight: 800; background: var(--danger-soft, rgba(210,63,63,0.08)); }
/* Tapback row at the top of the menu (iMessage-style), divided from the actions.
   Scoped under .chat-ctxmenu so it beats the generic menu-button rule above. */
/* Quick row stays on one line (its intrinsic width sizes the menu ~250px, iMessage-
   like); the "More" grid wraps. */
body.vf-studio .chat-ctxmenu .chat-ctxreacts { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 2px 2px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
body.vf-studio .chat-ctxmenu .chat-ctxreacts.is-more { flex-wrap: wrap; max-width: 258px; }
body.vf-studio .chat-ctxmenu .chat-ctxreact { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; border-radius: 999px; font-size: 19px; line-height: 1; cursor: pointer; padding: 0; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-ctxmenu .chat-ctxreact:hover { background: var(--bg-tint); transform: scale(1.14); }
body.vf-studio .chat-ctxmenu .chat-ctxreact.is-on { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--vf-blue); }
body.vf-studio .chat-ctxmenu .chat-ctxreact svg { color: var(--fg3); }
body.vf-studio .chat-ctxmenu .chat-ctxreact-more svg { width: 16px; height: 16px; }
/* Clickable links in messages */
body.vf-studio .chat-link { color: var(--vf-blue); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
body.vf-studio .chat-msg.is-mine .chat-link { color: #fff; text-decoration-color: rgba(255,255,255,0.7); }
/* Quoted reply above a bubble */
body.vf-studio .chat-quote { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; max-width: 100%; margin: 0 2px 3px; padding: 4px 10px; border: 0; border-left: 2.5px solid var(--line-strong); background: var(--bg-tint); border-radius: 8px; cursor: pointer; text-align: left; }
body.vf-studio .chat-msg.is-mine .chat-quote { align-self: flex-end; border-left: 0; border-right: 2.5px solid var(--vf-blue); align-items: flex-end; }
body.vf-studio .chat-quote-name { font-size: 11px; font-weight: 700; color: var(--vf-blue); }
body.vf-studio .chat-quote-text { font-size: 12px; color: var(--fg3); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .chat-bubblewrap.is-flash > .chat-bubble { animation: chatFlash 1.2s ease; }
@keyframes chatFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(42,120,234,0); } 30% { box-shadow: 0 0 0 3px rgba(42,120,234,0.5); } }
/* Swipe-to-reply hint arrow (revealed as you drag the bubble left) */
/* Reply hint — a small arrow revealed at the leading (left) gutter as the bubble
   slides right; it fades in on swipe and pops when you're past the trigger. */
body.vf-studio .chat-swipehint { position: absolute; left: 6px; right: auto; top: 50%; transform: translateY(-50%) scale(0.7); color: var(--fg4); opacity: 0; pointer-events: none; transition: opacity 140ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1), color 140ms ease; }
body.vf-studio .chat-msg.is-swiping .chat-swipehint { opacity: 0.5; transform: translateY(-50%) scale(0.92); }
body.vf-studio .chat-msg.is-swipe-armed .chat-swipehint { opacity: 1; transform: translateY(-50%) scale(1.14); color: var(--vf-blue); }
/* GPU-composite the slide so it stays buttery under rapid wheel/touch updates. */
body.vf-studio .chat-msg.is-swiping .chat-bubblewrap { will-change: transform; }
body.vf-studio .chat-msg { position: relative; }
/* Reply bar in the composer */
body.vf-studio .chat-replybar { position: absolute; bottom: calc(100% + 6px); left: 14px; right: 14px; z-index: 45; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(10,15,26,0.16); }
body.vf-studio .chat-replybar-bar { flex: none; width: 3px; align-self: stretch; border-radius: 999px; background: var(--vf-blue); }
body.vf-studio .chat-replybar-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
body.vf-studio .chat-replybar-name { font-size: 11px; font-weight: 700; color: var(--vf-blue); }
body.vf-studio .chat-replybar-text { font-size: 12px; color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .chat-replybar-x { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 0; background: var(--bg-tint); border-radius: 8px; color: var(--fg3); cursor: pointer; }
body.vf-studio .chat-replybar-x:hover { color: var(--fg1); background: var(--line); }
/* Messages nav: count badge + slow pulse when there's something for you */
body.vf-studio .navbar-msgcount { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; background: var(--chat-unread); border-radius: 999px; box-shadow: 0 0 0 2px var(--bg-elev); }
body.vf-studio .navbar-link.is-pulsing { animation: navMsgPulse 2.2s ease-in-out infinite; }
@keyframes navMsgPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(42,120,234,0); } 50% { box-shadow: 0 0 0 4px rgba(42,120,234,0.18); } }
body.vf-studio .chat-metasep { color: var(--fg4); font-size: 10px; }
/* Tapback add button — sits just outside the bubble, shows on hover */
body.vf-studio .chat-reactadd { position: absolute; top: 50%; transform: translateY(-50%) scale(0.82); transform-origin: center; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--fg3); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s var(--st-ease), color 0.14s ease, border-color 0.14s ease; box-shadow: 0 2px 6px rgba(10,15,26,0.12); z-index: 3; }
body.vf-studio .chat-msg:not(.is-mine) .chat-reactadd { right: -32px; }
body.vf-studio .chat-msg.is-mine .chat-reactadd { left: -32px; }
body.vf-studio .chat-msg:hover .chat-reactadd, body.vf-studio .chat-msg:focus-within .chat-reactadd { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
body.vf-studio .chat-reactadd:hover { color: var(--vf-blue); border-color: var(--vf-blue); }
/* Invisible bridge spanning the gap to the bubble so moving onto the react button keeps hover (fixes the finicky reach). */
body.vf-studio .chat-reactadd::before { content: ''; position: absolute; top: -10px; bottom: -10px; }
body.vf-studio .chat-msg:not(.is-mine) .chat-reactadd::before { left: -40px; right: -6px; }
body.vf-studio .chat-msg.is-mine .chat-reactadd::before { right: -40px; left: -6px; }
/* Tapback picker — floating pill of the six reactions */
body.vf-studio .chat-reactpicker { position: absolute; bottom: calc(100% + 6px); display: flex; gap: 2px; padding: 5px 7px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(10,15,26,0.22); z-index: 6; }
body.vf-studio .chat-msg:not(.is-mine) .chat-reactpicker { left: 0; }
body.vf-studio .chat-msg.is-mine .chat-reactpicker { right: 0; }
body.vf-studio .chat-reactpick { border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1; padding: 4px; border-radius: 999px; transition: transform 0.1s ease, background 0.1s ease; display: inline-flex; align-items: center; justify-content: center; }
body.vf-studio .chat-reactpick:hover { transform: scale(1.25); }
body.vf-studio .chat-reactpick.is-on { background: var(--accent-soft); }
/* "+" → reveal the full grid. */
body.vf-studio .chat-reactmore { color: var(--fg4); }
body.vf-studio .chat-reactmore:hover { color: var(--vf-blue); transform: none; background: var(--accent-soft); }
/* The full emoji grid (after tapping +) — wraps into rows, scrolls if long. */
body.vf-studio .chat-reactpicker.is-more { flex-wrap: wrap; width: min(286px, 74vw); gap: 1px; padding: 10px; border-radius: 16px; max-height: 232px; overflow-y: auto; overflow-x: hidden; justify-content: flex-start; }
body.vf-studio .chat-reactpicker.is-more .chat-reactpick { flex: 0 0 auto; font-size: 21px; padding: 4px; }
/* Tapback cluster on the bubble (overlaps the trailing top corner) */
body.vf-studio .chat-reacts { position: absolute; top: -13px; display: flex; gap: 3px; z-index: 2; }
body.vf-studio .chat-msg:not(.is-mine) .chat-reacts { right: -6px; }
body.vf-studio .chat-msg.is-mine .chat-reacts { left: -6px; }
body.vf-studio .chat-react { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 999px; border: 1.5px solid var(--bg-elev); background: var(--bg-tint); cursor: pointer; font-size: 12px; line-height: 1; box-shadow: 0 1px 3px rgba(10,15,26,0.14); }
body.vf-studio .chat-react.is-mine { background: var(--accent-soft); border-color: var(--bg-elev); }
/* Instant "who reacted" tooltip on hover (nicer than the native title delay). */
body.vf-studio .chat-react::after { content: attr(data-who); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px); white-space: nowrap; background: var(--fg1); color: var(--bg); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 8px; box-shadow: 0 6px 18px rgba(10,15,26,0.28); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); z-index: 40; }
body.vf-studio .chat-react:hover::after, body.vf-studio .chat-react:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
body.vf-studio .chat-react-emo { display: inline-flex; align-items: center; font-size: 14px; line-height: 1; }
body.vf-studio .chat-react-emo svg { width: 16px; height: 16px; }
body.vf-studio .chat-react-n { font-size: 10px; font-weight: 700; color: var(--fg2); }
/* In-bubble poll */
body.vf-studio .chat-poll { display: flex; flex-direction: column; gap: 8px; min-width: 210px; }
body.vf-studio .chat-poll-q { font-size: 14px; font-weight: 700; }
body.vf-studio .chat-poll-opts { display: flex; flex-direction: column; gap: 6px; }
body.vf-studio .chat-poll-opt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-elev); color: var(--fg1); font: inherit; font-size: 13px; cursor: pointer; overflow: hidden; }
body.vf-studio .chat-poll-opt.is-mine { border-color: var(--vf-blue); }
body.vf-studio .chat-poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(42,120,234,0.16); transition: width 280ms ease; z-index: 0; }
body.vf-studio .chat-poll-opt.is-mine .chat-poll-bar { background: rgba(42,120,234,0.26); }
body.vf-studio .chat-poll-opt-text { position: relative; z-index: 1; flex: 1; min-width: 0; }
body.vf-studio .chat-poll-opt-n { position: relative; z-index: 1; font-weight: 700; font-size: 12px; color: var(--fg2); }
body.vf-studio .chat-poll-total { font-size: 11px; color: var(--fg4); }
/* Shared image */
body.vf-studio .chat-bubble.is-img { padding: 4px; }
body.vf-studio .chat-imgwrap { display: flex; flex-direction: column; gap: 6px; }
body.vf-studio .chat-img { display: block; max-width: 260px; max-height: 320px; width: auto; height: auto; border-radius: 12px; object-fit: cover; cursor: zoom-in; background: var(--bg-tint); }
body.vf-studio .chat-imgcap { padding: 2px 6px 4px; }
/* GIF bubbles: the whole thing is a pause/play toggle (click to freeze the
   frame, click to resume). The corner badge reads GIF / a play glyph. */
body.vf-studio .chat-gif { position: relative; display: block; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 12px; }
body.vf-studio .chat-gif .chat-img { cursor: pointer; }
body.vf-studio .chat-gif-still { max-width: 260px; max-height: 320px; width: auto; height: auto; }
body.vf-studio .chat-gif-badge { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 17px; padding: 0 6px; border-radius: 6px; background: rgba(10,15,26,0.62); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-gif:hover .chat-gif-badge, body.vf-studio .chat-gif.is-paused .chat-gif-badge, body.vf-studio .chat-gif:focus-visible .chat-gif-badge { opacity: 1; }
/* Typing indicator */
body.vf-studio .chat-typing { display: flex; align-items: center; gap: 8px; padding: 2px 10px 6px; font-size: 12px; color: var(--fg3); }
body.vf-studio .chat-typing-dots { display: inline-flex; gap: 3px; }
body.vf-studio .chat-typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg4); animation: chat-typing-bounce 1.2s infinite ease-in-out; }
body.vf-studio .chat-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
body.vf-studio .chat-typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
/* Scroll-to-bottom button */
body.vf-studio .chat { position: relative; }
body.vf-studio .chat-scrolldown { position: absolute; right: 18px; bottom: 84px; z-index: 5; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg2); cursor: pointer; box-shadow: 0 6px 18px rgba(10,15,26,0.18); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-scrolldown:hover { color: var(--vf-blue); transform: translateY(-1px); }
/* "New messages" divider */
body.vf-studio .chat-unread-divider { display: flex; align-items: center; gap: 10px; margin: 12px 4px 6px; color: var(--danger-text); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
body.vf-studio .chat-unread-divider::before, body.vf-studio .chat-unread-divider::after { content: ''; flex: 1; height: 1px; background: rgba(196,32,56,0.3); }
/* Send / arrive pop */
body.vf-studio .chat-bubble { animation: chat-pop 170ms ease; }
@media (prefers-reduced-motion: reduce) { body.vf-studio .chat-bubble { animation: none; } body.vf-studio .chat-typing-dots i { animation: none; } }
@keyframes chat-pop { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* iMessage-style rich link card */
body.vf-studio .chat-linkcard { display: flex; flex-direction: column; width: min(280px, 72vw); margin-top: 6px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-elev); text-decoration: none; box-shadow: 0 2px 8px rgba(10,15,26,0.10); transition: border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-linkcard:hover { border-color: var(--line-strong); }
body.vf-studio .chat-linkcard-img { display: block; width: 100%; height: 140px; background-size: cover; background-position: center; background-color: var(--bg-tint); }
body.vf-studio .chat-linkcard-body { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; min-width: 0; }
body.vf-studio .chat-linkcard-site { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fg4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.vf-studio .chat-linkcard-title { font-size: 13px; font-weight: 700; color: var(--fg1); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.vf-studio .chat-linkcard-desc { font-size: 12px; color: var(--fg3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Link-only message → the card IS the bubble (no double border / background). */
body.vf-studio .chat-bubble:has(.chat-linkcard):not(:has(.chat-text)) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; animation: none; }
body.vf-studio .chat-bubble:not(:has(.chat-text)) .chat-linkcard { margin-top: 0; }
/* Emoji-only message → big + bubble-less (iMessage jumbomoji) */
body.vf-studio .chat-bubble.is-jumbo { background: none !important; box-shadow: none !important; padding: 0 2px; }
body.vf-studio .chat-bubble.is-jumbo .chat-text { font-size: 42px; line-height: 1.15; }
body.vf-studio .chat-pollopts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
body.vf-studio .chat-polladd { align-self: flex-start; border: 0; background: none; color: var(--vf-blue); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 0; }
/* Inline edit row inside the bubble */
body.vf-studio .chat-editrow { display: flex; gap: 6px; align-items: center; }
body.vf-studio .chat-editinput { flex: 1 1 auto; min-width: 140px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg1); font: inherit; font-size: 13px; }
body.vf-studio .chat-editbtn { flex: none; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.18); color: #fff; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
body.vf-studio .chat-editbtn.save { background: #fff; border-color: #fff; color: var(--vf-blue); }
/* Comment mirrored from a task/production — a quieter notification card in a
   lighter grey, clearly distinct from a real message bubble. Click → opens the
   item and dismisses the card from the thread. */
body.vf-studio .chat-msg.is-comment .chat-bubble { background: var(--bg-tint); border: 1px solid var(--line); color: var(--fg3); cursor: pointer; }
body.vf-studio .chat-msg.is-comment .chat-bubble:hover { background: var(--bg-elev); }
body.vf-studio .chat-commentlink { color: var(--fg3); text-decoration: none; }
body.vf-studio .chat-commentlink .chat-mention { color: var(--fg3); font-weight: 700; }
body.vf-studio .chat-commentlink:hover { color: var(--fg2); }
body.vf-studio .chat-commentgo { color: var(--accent); font-size: 11px; font-weight: 600; white-space: nowrap; }
/* Dark admin theme — received bubble matches iMessage dark grey */
body.vf-studio.vf-admin-dark .chat-bubble { background: #3B3B3D; color: #F2F2F7; }
body.vf-studio.vf-admin-dark .chat-msg.is-mine .chat-bubble { background: var(--vf-blue); color: #fff; }
body.vf-studio.vf-admin-dark .chat-msg.is-comment .chat-bubble { background: var(--bg-elev); color: var(--fg1); }
/* Composer */
body.vf-studio .chat-composer { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--bg-elev); }
/* Composer "+" extras menu (Poll / Send later / GIFs) */
body.vf-studio .chat-plus-wrap { position: relative; flex: none; }
body.vf-studio .chat-plus { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--bg-tint); color: var(--fg2); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-plus:hover, body.vf-studio .chat-plus.is-open { background: var(--accent-soft); color: var(--vf-blue); }
body.vf-studio .chat-plusmenu { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 172px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(10,15,26,0.2); padding: 6px; z-index: 40; display: flex; flex-direction: column; gap: 1px; }
body.vf-studio .chat-plusmenu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 500; color: var(--fg1); cursor: pointer; }
body.vf-studio .chat-plusmenu button:hover { background: var(--bg-tint); }
body.vf-studio .chat-plusmenu button > span:first-of-type { flex: 1; }
body.vf-studio .chat-plus-soon { flex: none; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg4); background: var(--bg-tint); padding: 2px 6px; border-radius: 999px; }
body.vf-studio .chat-plus-count { flex: none; min-width: 18px; text-align: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--vf-blue); padding: 1px 6px; border-radius: 999px; }
/* GIF picker — an inline panel that expands within the message column itself,
   just above the composer. Lives inside .chat (flex column) so it's contained
   in both the full-page chat and the narrow side-peek, and the message list
   above it smoothly shrinks as the panel grows. No viewport overlay. */
body.vf-studio .chat-gif-inline { display: flex; flex-direction: column; flex: none; min-height: 0; max-height: min(52vh, 380px); overflow: hidden; background: var(--bg-elev); border-top: 1px solid var(--line); padding: 10px 14px 8px; animation: chatGifGrow 260ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes chatGifGrow { from { max-height: 0; opacity: 0.3; } to { max-height: min(52vh, 380px); opacity: 1; } }
body.vf-studio .chat-gif-head { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; flex: none; }
body.vf-studio .chat-gif-search { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 13px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; color: var(--fg3); }
body.vf-studio .chat-gif-search:focus-within { border-color: var(--vf-blue); }
body.vf-studio .chat-gif-input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--fg1); outline: none; }
body.vf-studio .chat-gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); align-items: start; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px; }
body.vf-studio .chat-gif-cell { border: 1px solid var(--line); padding: 0; background: var(--bg-tint); border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
body.vf-studio .chat-gif-cell:hover { transform: translateY(-2px); border-color: var(--vf-blue); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); }
body.vf-studio .chat-gif-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.vf-studio .chat-gif-state { grid-column: 1 / -1; text-align: center; color: var(--fg4); font-size: 13px; padding: 36px 12px; }
body.vf-studio .chat-gif-foot { text-align: right; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg4); padding: 6px 2px 0; flex: none; }
/* "Send later" scheduler modal. */
body.vf-studio .chat-schedmodal { width: min(420px, calc(100vw - 32px)); }
body.vf-studio .chat-sched-body { padding: 4px 4px 6px; display: flex; flex-direction: column; gap: 14px; }
body.vf-studio .chat-sched-sub { margin: 0; font-size: 13px; color: var(--fg3); }
body.vf-studio .chat-sched-group { display: flex; flex-direction: column; gap: 6px; }
body.vf-studio .chat-sched-groupname { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg3); }
body.vf-studio .chat-sched-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
body.vf-studio .chat-sched-preset { display: flex; flex-direction: row; gap: 9px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 9px 10px; font: inherit; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-sched-preset:hover:not(:disabled) { border-color: var(--vf-blue); background: var(--accent-soft); }
body.vf-studio .chat-sched-preset:disabled { opacity: 0.5; cursor: default; }
body.vf-studio .chat-sched-preseticon { flex: none; color: var(--vf-blue); opacity: 0.9; }
body.vf-studio .chat-sched-presettext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.vf-studio .chat-sched-presetlabel { font-size: 12px; font-weight: 700; color: var(--fg1); line-height: 1.2; }
body.vf-studio .chat-sched-presetwhen { font-size: 11px; color: var(--fg4); }
body.vf-studio .chat-sched-customlabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg3); margin-bottom: 6px; }
body.vf-studio .chat-sched-custom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body.vf-studio .chat-sched-custom .chat-sched-customlabel { flex: 1 0 100%; margin-bottom: 0; }
body.vf-studio .chat-sched-input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg1); }
body.vf-studio .chat-sched-input:focus { outline: none; border-color: var(--vf-blue); }
body.vf-studio .chat-sched-go { flex: none; }
body.vf-studio .chat-sched-err { font-size: 12px; color: var(--danger-text); font-weight: 600; }
body.vf-studio .chat-sched-list { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
body.vf-studio .chat-sched-listhead { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg4); }
body.vf-studio .chat-sched-item { display: flex; align-items: center; gap: 9px; }
body.vf-studio .chat-sched-itemtxt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--fg1); }
body.vf-studio .chat-sched-itemwhen { flex: none; font-size: 11px; color: var(--fg4); white-space: nowrap; }
body.vf-studio .chat-sched-cancel { flex: none; border: 0; background: none; color: var(--fg4); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px; }
body.vf-studio .chat-sched-cancel:hover { color: var(--danger-text); }
/* Pending (scheduled, not yet sent) messages — ghost bubbles at the foot of the
   thread, right-aligned like your own messages, with a clock + edit/delete. */
body.vf-studio .chat-sched-pending { display: flex; flex-direction: column; gap: 10px; padding: 8px 2px 2px; margin-top: 6px; border-top: 1px dashed var(--line); }
body.vf-studio .chat-sched-pend { align-self: flex-end; max-width: 80%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
body.vf-studio .chat-sched-pend-bubble { background: var(--accent-soft); color: var(--fg1); border: 1px dashed var(--vf-blue); border-radius: 16px 16px 6px 16px; padding: 9px 13px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; opacity: 0.9; }
body.vf-studio .chat-sched-pend-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--fg4); }
body.vf-studio .chat-sched-clock { display: inline-flex; align-items: center; gap: 4px; color: var(--vf-blue); font-weight: 600; }
body.vf-studio .chat-sched-acts { display: inline-flex; gap: 4px; }
body.vf-studio .chat-sched-acts button { border: 0; background: none; color: var(--fg3); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
body.vf-studio .chat-sched-acts button:hover { color: var(--vf-blue); background: var(--accent-soft); }
body.vf-studio .chat-sched-editbox { display: flex; flex-direction: column; gap: 7px; align-items: stretch; min-width: min(280px, 70vw); }
body.vf-studio .chat-sched-edittext { width: 100%; resize: vertical; min-height: 52px; border: 1px solid var(--vf-blue); border-radius: 12px; background: var(--bg); color: var(--fg1); font: inherit; font-size: 14px; padding: 9px 12px; outline: none; }
body.vf-studio .chat-sched-editactions { display: flex; justify-content: flex-end; gap: 8px; }
body.vf-studio .chat-sched-editcancel { border: 1px solid var(--line); background: var(--bg); color: var(--fg2); border-radius: 8px; padding: 5px 13px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
body.vf-studio .chat-sched-editsave { padding: 6px 15px; font-size: 12px; }
body.vf-studio .chat-readonly-bar { display: flex; align-items: center; gap: 9px; padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg-tint); color: var(--fg3); font-size: 13px; }
body.vf-studio .chat-readonly-bar svg { flex: none; color: var(--fg4); }
body.vf-studio .chat-readonly-bar strong { color: var(--fg1); font-weight: 700; }
body.vf-studio .chat-readonly-exit { border: 0; background: none; color: var(--vf-blue); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 2px; text-decoration: underline; }
body.vf-studio .chat-plusnote { font-size: 12px; color: var(--vf-blue); padding: 7px 16px 0; }
body.vf-studio .chat-senderr { color: var(--danger-text); font-weight: 600; }
/* Error-boundary fallback — a recoverable card when a page's widget throws */
body.vf-studio .adb-errboundary { display: flex; justify-content: center; padding: 40px 16px; }
body.vf-studio .adb-errboundary-card { max-width: 440px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 26px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(10,15,26,0.10); }
body.vf-studio .adb-errboundary-ico { color: #E0773A; }
body.vf-studio .adb-errboundary-card strong { font-size: 16px; color: var(--fg1); }
body.vf-studio .adb-errboundary-card p { margin: 0; font-size: 13px; color: var(--fg3); line-height: 1.55; }
body.vf-studio .adb-errboundary-acts { display: inline-flex; align-items: center; gap: 16px; margin-top: 6px; }
/* Transient failure banner for optimistic save/delete/create reverts */
body.vf-studio .adb-flasherr { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(196,32,56,0.10); border: 1px solid rgba(196,32,56,0.30); color: #B01B30; font-size: 13px; font-weight: 600; animation: adbFlashIn 180ms var(--st-ease) both; }
@keyframes adbFlashIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
body.vf-studio .chat-input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 16px; padding: 10px 16px; font: inherit; font-size: 14px; line-height: 1.4; color: var(--fg1); background: var(--bg-tint); outline: none; resize: none; max-height: 140px; overflow-y: auto; display: block; }
body.vf-studio .chat-input:focus { border-color: var(--accent); background: var(--bg-elev); }
body.vf-studio .chat-send { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--vf-blue); color: #fff; cursor: pointer; transition: filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .chat-send:hover:not(:disabled) { filter: brightness(1.08); }
body.vf-studio .chat-send:disabled { opacity: 0.45; cursor: default; }
/* "Send later" armed: the send button reads as scheduled, not immediate —
   hollow with a dashed blue outline + the clock glyph. */
body.vf-studio .chat-send.is-scheduled { background: transparent; color: var(--vf-blue); border: 1.5px dashed var(--vf-blue); }
body.vf-studio .chat-send.is-scheduled:hover:not(:disabled) { filter: none; background: var(--accent-soft); }
body.vf-studio .chat-send.is-scheduled:disabled { opacity: 0.5; }
/* Armed-time chip above the composer. */
body.vf-studio .chat-armed { display: flex; align-items: center; gap: 8px; padding: 9px 16px 0; font-size: 12px; color: var(--fg3); }
body.vf-studio .chat-armed svg { flex: none; color: var(--vf-blue); }
body.vf-studio .chat-armed strong { color: var(--vf-blue); font-weight: 700; }
body.vf-studio .chat-armed-cancel { margin-left: auto; border: 0; background: none; color: var(--fg4); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0 2px; }
body.vf-studio .chat-armed-cancel:hover { color: var(--vf-blue); }
/* Unread dot on the Messages nav tab */
body.vf-studio .navbar-link { position: relative; }
body.vf-studio .navbar-unread { position: absolute; top: 6px; right: 5px; width: 7px; height: 7px; border-radius: 999px; background: var(--chat-unread); box-shadow: 0 0 0 2px var(--bg-elev); }

/* "Viewing as" impersonation bar (primary admin previewing Pete/Vince) */
body.vf-studio .viewas-bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 8px 18px; background: #8b5cf6; color: #fff; font-size: 13px; font-weight: 600; }
body.vf-studio .viewas-bar strong { font-weight: 800; }
body.vf-studio .viewas-exit { border: 0; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 12px; font-weight: 700; color: #6d28d9; background: #fff; cursor: pointer; }
body.vf-studio .viewas-exit:hover { filter: brightness(0.96); }
body.vf-studio .set-viewas-now { font-size: 12px; color: var(--fg3); }
body.vf-studio .set-demo-row { display: flex; align-items: center; gap: 12px; }
body.vf-studio .set-demo-state { font-size: var(--fs-meta); color: var(--fg3); }
/* Floating "viewing as" chiplet — mirrors the demo-mode banner (dark pill,
   bottom-centre) but with a blue accent to distinguish it. */
body.vf-studio .vf-viewas-chip { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2147483645; display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; background: #0A0F1A; color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.34); animation: cal-magic-grow 180ms var(--ease-out); }
/* In demo mode the demo banner also pins bottom-centre — lift the chip clear so its "Back to you" stays tappable. */
body.vf-studio.vf-demo-on .vf-viewas-chip { bottom: 64px; }
body.vf-studio .vf-viewas-chip button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.vf-studio .vf-viewas-chip .vf-viewas-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vf-blue-400, #5A98F0); flex: none; }
body.vf-studio .vf-viewas-chip strong { font-weight: 700; }
body.vf-studio .vf-viewas-chip button { border: 0; background: var(--vf-blue); color: #fff; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background var(--dur-fast) var(--ease-soft); }
body.vf-studio .vf-viewas-chip button:hover { background: var(--vf-blue-600, #0850BF); }
body.vf-studio .tk-board-colhead { display: flex; align-items: center; gap: 8px; padding: 2px 5px; }
body.vf-studio .tk-board-coltitle { font-size: 12px; font-weight: 600; color: var(--fg1); }
body.vf-studio .tk-board-colcount { margin-left: auto; min-width: 20px; text-align: center; font-size: 11px; font-weight: 600; color: var(--fg4); background: var(--bg-elev); border-radius: 999px; padding: 1px 7px; }
body.vf-studio .tk-board-cards { display: flex; flex-direction: column; gap: 8px; min-height: 6px; }
body.vf-studio .tk-card { display: flex; flex-direction: column; padding: 10px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); cursor: pointer; transition: border-color var(--st-hover) var(--st-ease), box-shadow var(--st-hover) var(--st-ease), transform var(--st-hover) var(--st-ease); }
body.vf-studio .tk-card:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(10,15,26,0.08); transform: translateY(-1px); }
body.vf-studio.vf-admin-dark .tk-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.32); }
body.vf-studio .tk-card-top { display: flex; align-items: flex-start; gap: 8px; }
body.vf-studio .tk-card .tk-row-check { flex: none; margin-top: 1px; }
body.vf-studio .tk-card-title { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--fg1); }
body.vf-studio .tk-card-brief { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; padding-left: 28px; font-size: 12px; line-height: 1.4; color: var(--fg3); }
body.vf-studio .tk-card-meta { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding-left: 28px; }
body.vf-studio .tk-card-date { font-size: 11px; font-weight: 500; color: var(--fg4); }
body.vf-studio .tk-card-spacer { flex: 1 1 auto; }
body.vf-studio .tk-card-people { display: inline-flex; }
body.vf-studio .tk-card-people .tk-av.sm + .tk-av.sm { margin-left: -7px; }
body.vf-studio .tk-card-meta .tk-pill { flex: none; font-size: 11px; padding: 3px 9px; }

/* ── Combined calendar (/admin/calendar) — bar, legend, subscriptions ──────── */
body.vf-studio .cal-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
body.vf-studio .cal-title { font-size: 18px; font-weight: 600; color: var(--fg1); }
body.vf-studio .cal-legend { display: flex; gap: 6px; flex-wrap: wrap; }
body.vf-studio .cal-legend-item { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg-elev); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; color: var(--fg2); cursor: pointer; max-width: 200px; }
body.vf-studio .cal-legend-item.is-off { opacity: 0.4; }
body.vf-studio .cal-legend-item.is-off .cal-legend-label { text-decoration: line-through; }
body.vf-studio .cal-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
body.vf-studio .cal-legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .cal-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
body.vf-studio .cal-manage { position: relative; }
body.vf-studio .cal-manage-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 320px; max-width: 92vw; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(10,15,26,0.20); padding: 14px; z-index: 50; display: flex; flex-direction: column; gap: 8px; }
body.vf-studio .cal-sub-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg1); }
body.vf-studio .cal-sub-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .cal-sub-err { color: var(--danger-text); }
body.vf-studio .cal-sub-load { color: var(--fg4); }
body.vf-studio .cal-sub-del { flex: none; border: 0; background: none; color: var(--fg4); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }
body.vf-studio .cal-sub-del:hover { color: var(--danger-text); }
body.vf-studio .cal-sub-empty { font-size: 12px; color: var(--fg4); line-height: 1.5; }
body.vf-studio .cal-sub-add { display: flex; gap: 8px; margin-top: 4px; }
body.vf-studio .cal-sub-input { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--fg1); background: var(--bg-tint); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; }
body.vf-studio .cal-sub-input:focus { outline: none; border-color: var(--vf-blue); background: var(--bg-elev); }
@media (max-width: 760px) { body.vf-studio .cal-nav { margin-left: 0; } }

/* Calendar toolbar — canonical search + cog (matches the rest of the Studio).
   The cog panel lists every calendar source as a show/hide toggle. */
body.vf-studio .cal-cog-panel { min-width: 280px; }
/* Calendar source toggles — chip-style, matching the Assignee filter. */
body.vf-studio .cal-cog-chip { padding-left: 11px; }
body.vf-studio .cal-cog-chip.is-off { opacity: 0.4; }
body.vf-studio .cal-cog-chipx { margin-left: 1px; color: var(--fg4); font-size: 15px; line-height: 1; cursor: pointer; }
body.vf-studio .cal-cog-chipx:hover { color: var(--danger-text); }
/* "+N more" toggle when the calendar list runs past 3 — keeps the cog compact. */
body.vf-studio .cal-cog-more { display: inline-flex; align-items: center; border: 1px dashed var(--line); background: transparent; color: var(--fg3); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .cal-cog-more:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
/* Magic sort — one-click tidy of the day/3-day view. */
/* Page-header action slot — sits top-right of the subhero, level with the title
   (used by the Calendar's Magic sort button). */
body.vf-studio .admin-subhero { position: relative; }
body.vf-studio .admin-subhero-action { position: absolute; right: 0; bottom: 6px; display: flex; align-items: center; gap: 8px; }
/* "Link copied" toast — the hidden Share shortcut (⌘/Ctrl+Shift+L). */
body.vf-studio .admin-share-toast { position: absolute; right: 0; bottom: -10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #1F9D55; color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 8px 22px rgba(31,157,85,0.32); z-index: 5; animation: adminShareToast 180ms var(--ease-out); }
@keyframes adminShareToast { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
body.vf-studio .cal-magic { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--fg1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity 140ms; }
body.vf-studio .cal-magic:hover { border-color: var(--vf-blue); box-shadow: 0 2px 12px rgba(9,94,223,0.16); transform: translateY(-1px); color: var(--vf-blue); }
body.vf-studio .cal-magic:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
body.vf-studio .cal-magic svg { color: var(--vf-blue); }
body.vf-studio .cal-magic.is-busy svg { animation: cal-magic-twinkle 1.1s ease-in-out infinite, cal-magic-hue 1.9s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes cal-magic-spin { to { transform: rotate(360deg); } }
/* Fun "working" state: the sparkle twinkles + shifts blue→violet, the small
   star blinks off-beat, and a sheen sweeps across the pill. */
@keyframes cal-magic-twinkle { 0%, 100% { transform: rotate(0deg) scale(1); } 30% { transform: rotate(-16deg) scale(1.22); } 62% { transform: rotate(11deg) scale(0.9); } }
@keyframes cal-magic-hue { 0%, 100% { color: var(--vf-blue); } 50% { color: #8b5cf6; } }
@keyframes cal-magic-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes cal-magic-sheen { from { transform: translateX(-130%) skewX(-12deg); } to { transform: translateX(130%) skewX(-12deg); } }
/* Live (expanded) state — the button grows into a status pill carrying the
   result + Undo, then collapses back when you click away. */
body.vf-studio .cal-magic-live { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--vf-blue) 32%, transparent); background: var(--accent-soft); color: var(--fg1); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; animation: cal-magic-grow 180ms var(--ease-out); }
body.vf-studio .cal-magic-live svg { color: var(--vf-blue); flex: none; }
body.vf-studio .cal-magic-live.is-busy svg { animation: cal-magic-twinkle 1.1s ease-in-out infinite, cal-magic-hue 1.9s ease-in-out infinite; transform-origin: 50% 50%; }
body.vf-studio .cal-magic-live.is-busy .cal-spark-2 { animation: cal-magic-blink 0.7s ease-in-out infinite; }
body.vf-studio .cal-magic-live.is-busy { position: relative; overflow: hidden; }
body.vf-studio .cal-magic-live.is-busy::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); animation: cal-magic-sheen 1.25s ease-in-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.vf-studio .cal-magic.is-busy svg, body.vf-studio .cal-magic-live.is-busy svg, body.vf-studio .cal-magic-live.is-busy .cal-spark-2, body.vf-studio .cal-magic-live.is-busy::after { animation: none; } }
body.vf-studio .cal-magic-txt { font-size: 13px; font-weight: 600; color: var(--fg1); }
body.vf-studio .cal-magic-undo { border: 0; background: var(--vf-blue); color: #fff; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
body.vf-studio .cal-magic-undo:hover { background: var(--vf-blue-strong, #0a4fd0); }
body.vf-studio .cal-magic-dismiss { border: 0; background: transparent; color: var(--fg4); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px; }
body.vf-studio .cal-magic-dismiss:hover { color: var(--fg1); }
@keyframes cal-magic-grow { from { opacity: 0.4; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
/* Magic sort as a toolbar icon (between refresh + cog), with a drop-down result. */
/* The sparkle gets its OWN absolute slot (left of refresh@37px + cog@6px).
   Previously the button inherited .tk-cog's right:6px against a zero-width
   wrap sitting at the searchwrap's right edge — i.e. the exact same box as
   the settings cog, which painted on top and swallowed its clicks. */
body.vf-studio .cal-magic-wrap { position: absolute; right: 68px; top: 50%; transform: translateY(-50%); display: inline-flex; }
body.vf-studio .cal-magic-wrap .cal-magic-btn { position: static; transform: none; }
body.vf-studio .tk-searchwrap.has-magic .tk-search { padding-right: 104px; }
body.vf-studio .cal-magic-btn svg { color: var(--vf-blue); }
body.vf-studio .cal-magic-btn:disabled { opacity: 0.7; cursor: default; }
body.vf-studio .cal-magic-btn.is-busy svg { animation: cal-magic-twinkle 1.1s ease-in-out infinite, cal-magic-hue 1.9s ease-in-out infinite; transform-origin: 50% 50%; }
body.vf-studio .cal-magic-btn.is-busy .cal-spark-2 { animation: cal-magic-blink 0.7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.vf-studio .cal-magic-btn.is-busy svg, body.vf-studio .cal-magic-btn.is-busy .cal-spark-2 { animation: none; } }
body.vf-studio .cal-magic-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--vf-blue) 32%, transparent); background: var(--bg-elev); color: var(--fg1); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px rgba(10,15,26,0.16); animation: cal-magic-grow 160ms var(--ease-out); }
/* "Working from" location bar (above the day/3-day/week time grid). */
body.vf-studio .cal-locbar { display: flex; align-items: stretch; margin: 0 0 7px; }
body.vf-studio .cal-locbar-label { flex: 0 0 54px; display: flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg4); padding-right: 6px; line-height: 1.15; }
/* Gapless columns so pill boxes match the grid tracks exactly ((W - 28k)/n,
   same as minmax(0,1fr) beside 28px strips); the 3px side padding recreates
   the old 6px visual separation without desyncing the column edges. */
body.vf-studio .cal-locbar-cols { flex: 1 1 auto; display: flex; min-width: 0; }
body.vf-studio .cal-locbar-col { flex: 1 1 0; min-width: 0; padding: 0 3px; }
body.vf-studio .cal-locbar-col.is-off { flex: 0 0 28px; padding: 0; }

/* ── Horizontal day-scrolling (1/3/7-day views) ─────────────────────────────
   Frozen panes: ONE scroller (.cal-xscroll) scrolls both axes over a wide
   inner (day 1→7, 3-day 3→9, week 7→14 rendered days — scroll sideways to
   peek further into the week). The location bar, day headers and all-day band
   are sticky-top (offsets from the measured --cal-locbar-h / --cal-head-h);
   the 54px hour rail + gutter labels are sticky-left. Every ancestor between
   a sticky element and .cal-xscroll must NOT be a scroll container — hence
   the overflow overrides on .tk-tg, .tk-tg-scroll and .tk-tg-allday below. */
body.vf-studio .cal-xscroll { overflow: auto; }
body.vf-studio .cal-xinner { min-width: 100%; }
body.vf-studio main.cal-lockh .cal-xscroll { flex: 1 1 auto; min-height: 0; }
/* The wide inner's intrinsic width must never propagate up the flex chain —
   without min-width:0 the content column refuses to shrink below the 14-day
   grid and pushes the toolbar (sparkle/refresh/cog) off the viewport edge. */
body.vf-studio main.cal-lockh .kp-content-inner,
body.vf-studio main.cal-lockh .cal-views,
body.vf-studio main.cal-lockh .cal-views > .tk-cal { min-width: 0; }
body.vf-studio .tk-tg.cal-tg { overflow: visible; }
body.vf-studio .cal-tg .tk-tg-scroll { overflow: visible; max-height: none; }
body.vf-studio main.cal-lockh .tk-tg.cal-tg .tk-tg-scroll { overflow: visible; max-height: none; }
body.vf-studio .cal-tg .tk-tg-allday { overflow: visible; max-height: none; }
/* Sticky-top stack (locbar → head → all-day), solid backgrounds so the grid
   slides underneath. */
body.vf-studio .cal-xinner > .cal-locbar { position: sticky; top: 0; z-index: 9; background: var(--bg); margin-bottom: 0; padding-bottom: 7px; }
body.vf-studio .cal-tg .tk-tg-head { position: sticky; top: var(--cal-locbar-h, 43px); z-index: 7; background: var(--bg-tint); }
body.vf-studio .cal-tg .tk-tg-allday { position: sticky; top: calc(var(--cal-locbar-h, 43px) + var(--cal-head-h, 41px)); z-index: 6; background: var(--bg-elev); }
/* Sticky-left rails. The hour gutter joins the flex flow (it's absolute in the
   base grid) so sticky can take hold; hour labels keep anchoring to it. */
body.vf-studio .cal-tg .tk-tg-body { display: flex; }
body.vf-studio .cal-tg .tk-tg-gutter { position: sticky; left: 0; flex: 0 0 54px; width: 54px; height: auto; z-index: 5; background: var(--bg-elev); }
body.vf-studio .cal-tg .tk-tg-cols { margin-left: 0; flex: 1 1 auto; }
body.vf-studio .cal-tg .tk-tg-gutterhead { position: sticky; left: 0; z-index: 8; background: var(--bg-tint); }
body.vf-studio .cal-tg .tk-tg-alldaylabel { position: sticky; left: 0; z-index: 7; background: var(--bg-elev); }
body.vf-studio .cal-xinner .cal-locbar-label { position: sticky; left: 0; z-index: 8; background: var(--bg); }

/* Working-hours band — the light grey-blue wash over the hours you're expected
   to be working each day. Sits under events (earlier sibling), ignores clicks. */
body.vf-studio .tk-tg-workband { position: absolute; left: 0; right: 0; background: rgba(9,94,223,0.055); border-top: 1px solid rgba(9,94,223,0.14); border-bottom: 1px solid rgba(9,94,223,0.14); pointer-events: none; }

/* Collapsed non-working day — a slim hatched strip; click to expand. */
body.vf-studio .cal-tg .tk-tg-colhead.is-off { flex: 0 0 28px; padding: 6px 0; font-size: 10px; color: var(--fg4); display: flex; align-items: center; justify-content: center; background: var(--bg-tint); }
body.vf-studio .cal-tg .tk-tg-colhead.is-off .tk-cal-col-date { font-size: 10px; font-weight: 700; }
body.vf-studio .cal-tg .tk-tg-col.is-off { background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(10,15,26,0.035) 7px 14px), var(--bg-tint); }
body.vf-studio .tk-tg-offbtn { display: block; width: 100%; height: 100%; border: 0; background: none; cursor: pointer; padding: 0; }
body.vf-studio .tk-tg-offtxt { position: sticky; top: calc(var(--cal-locbar-h, 43px) + var(--cal-head-h, 41px) + var(--cal-allday-h, 0px) + 14px); display: inline-block; writing-mode: vertical-rl; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg4); white-space: nowrap; }
body.vf-studio .tk-tg-offbtn:hover .tk-tg-offtxt { color: var(--vf-blue); }

/* WeWork missing-info nudge (calendar). */
body.vf-studio .cal-wwprompt-backdrop { z-index: 260; }
body.vf-studio .cal-wwprompt { max-width: 430px; }
body.vf-studio .cal-wwprompt h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--fg1); }
body.vf-studio .cal-wwprompt p { margin: 0 0 14px; font-size: 13px; color: var(--fg2); line-height: 1.5; }
body.vf-studio .cal-wwprompt-acts { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
body.vf-studio .cal-wwprompt-later { border: 1px solid var(--line-strong); background: var(--bg-tint); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg1); cursor: pointer; }
body.vf-studio .cal-wwprompt-later:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .cal-loc-col { position: relative; }
body.vf-studio .cal-loc-pill { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-elev); cursor: pointer; text-align: left; font: inherit; transition: border-color 140ms, background 140ms; }
body.vf-studio .cal-loc-pill:hover { border-color: var(--vf-blue); }
body.vf-studio .cal-loc-daylabel { font-size: 10px; font-weight: 700; color: var(--fg4); text-transform: uppercase; letter-spacing: 0.02em; }
body.vf-studio .cal-loc-val { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--fg1); min-width: 0; max-width: 100%; }
body.vf-studio .cal-loc-val svg { flex: none; }
body.vf-studio .cal-loc-valtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .cal-loc-pill.is-office .cal-loc-val svg, body.vf-studio .cal-loc-pill.is-warehouse .cal-loc-val svg { color: #6B7280; }
body.vf-studio .cal-loc-pill.is-online .cal-loc-val svg { color: #2EA043; }
body.vf-studio .cal-loc-pill.is-wework .cal-loc-val svg { color: #2D6BFF; }
body.vf-studio .cal-loc-pill.is-location .cal-loc-val svg { color: #E5484D; }
body.vf-studio .cal-loc-pill.is-wework { border-color: color-mix(in srgb, #2D6BFF 40%, var(--line)); }
body.vf-studio .cal-loc-pill.is-location { border-color: color-mix(in srgb, #E5484D 34%, var(--line)); }
body.vf-studio .cal-loc-pill.is-auto { border-style: dashed; }
body.vf-studio .cal-loc-copy { margin-top: 3px; width: 100%; border: 0; background: color-mix(in srgb, #2D6BFF 12%, transparent); color: #2D6BFF; border-radius: 7px; padding: 3px 8px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
body.vf-studio .cal-loc-copy:hover { background: color-mix(in srgb, #2D6BFF 20%, transparent); }
body.vf-studio .cal-loc-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 45; min-width: 172px; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 10px 28px rgba(10,15,26,0.18); padding: 5px; animation: cal-magic-grow 140ms var(--ease-out); }
body.vf-studio .cal-loc-opt { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 0; background: none; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 500; color: var(--fg1); cursor: pointer; text-align: left; }
body.vf-studio .cal-loc-opt svg { flex: none; color: var(--fg3); }
body.vf-studio .cal-loc-opt:hover { background: var(--bg-tint); }
body.vf-studio .cal-loc-opt.is-cur { color: var(--vf-blue); font-weight: 700; }
body.vf-studio .cal-loc-opt.is-cur svg { color: var(--vf-blue); }
body.vf-studio .cal-loc-chev { margin-left: auto; color: var(--fg4); font-size: 15px; line-height: 1; }
body.vf-studio .cal-loc-wwrap { position: relative; }
body.vf-studio .cal-loc-submenu { margin: 2px 0 2px 10px; border-left: 2px solid var(--line); padding-left: 3px; max-height: 210px; overflow-y: auto; }
body.vf-studio .cal-loc-empty { display: block; padding: 6px 9px; font-size: 12px; color: var(--fg4); }
body.vf-studio .studio-notif-copy { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; align-self: flex-start; border: 1px solid color-mix(in srgb, var(--vf-blue) 30%, transparent); background: var(--accent-soft); color: var(--vf-blue); border-radius: 7px; padding: 3px 9px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
body.vf-studio .studio-notif-copy:hover { background: color-mix(in srgb, var(--vf-blue) 16%, transparent); }
/* Clickable day cell (drills into the day view) + the Add task/production chooser. */
body.vf-studio .tk-cal-cell-open { cursor: pointer; }
body.vf-studio button.tk-cal-daynum { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
body.vf-studio button.tk-cal-daynum:hover { color: var(--vf-blue); }
body.vf-studio .cal-addchoose { width: min(360px, calc(100vw - 32px)); }
body.vf-studio .cal-addchoose-opts { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 2px; }
body.vf-studio .cal-addchoose-opt { display: inline-flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); padding: 12px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--fg1); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
body.vf-studio .cal-addchoose-opt:hover { border-color: var(--vf-blue); background: var(--bg-tint); }
/* Status key — a non-interactive colour legend in the cog. */
body.vf-studio .cal-statuskey { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 2px 0; }
body.vf-studio .cal-statuskey-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fg2); }
/* Active-filter bar — clearable chips below the toolbar. */
body.vf-studio .cal-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
body.vf-studio .cal-filterbar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg4); }
body.vf-studio .cal-filter-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--vf-blue); background: var(--accent-soft); color: var(--vf-blue); border-radius: 999px; padding: 3px 7px 3px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
body.vf-studio .cal-filter-x { font-size: 14px; line-height: 1; }
body.vf-studio .cal-filter-clear { border: 0; background: none; color: var(--fg3); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; }
body.vf-studio .cal-filter-clear:hover { color: var(--vf-blue); }
body.vf-studio .cal-coreerr { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
body.vf-studio .cal-coreerr .tk-addtask { flex: none; }
/* Click-a-day → add a task (hover-revealed +). */
body.vf-studio .tk-cal-cell { position: relative; }
body.vf-studio .tk-cal-add { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 6px; background: var(--accent-soft); color: var(--vf-blue); font-size: 15px; line-height: 1; padding: 0; cursor: pointer; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-cal-cell .tk-cal-add { position: absolute; top: 5px; left: 5px; }
body.vf-studio .tk-cal-col-head .tk-cal-add { margin-left: auto; }
body.vf-studio .tk-cal-cell:hover .tk-cal-add, body.vf-studio .tk-cal-col:hover .tk-cal-add, body.vf-studio .tk-cal-add:focus-visible { opacity: 1; }
/* Inline legend spacing inside the calendar views. */
body.vf-studio .tk-cal > .cal-legend, body.vf-studio .cal-agenda > .cal-legend { margin-bottom: 2px; }
/* Overdue (past-due, not-done) tasks read in red. */
body.vf-studio .tk-cal-task.is-overdue { color: var(--danger-text); }
body.vf-studio .tk-cal-task.is-overdue .tk-cal-taskname { font-weight: 650; }
body.vf-studio.vf-admin-dark .tk-cal-task.is-overdue { color: #FF7080; }
/* Agenda / Upcoming list view. */
body.vf-studio .cal-agenda { display: flex; flex-direction: column; gap: 14px; }
body.vf-studio .cal-agenda-day { display: grid; grid-template-columns: 152px 1fr; gap: 14px; align-items: start; }
body.vf-studio .cal-agenda-date { font-size: 13px; font-weight: 700; color: var(--fg2); padding-top: 8px; }
body.vf-studio .cal-agenda-date.is-today { color: var(--vf-blue); }
body.vf-studio .cal-agenda-items { display: flex; flex-direction: column; gap: 5px; }
body.vf-studio .cal-agenda-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); padding: 9px 13px; font: inherit; font-size: 13px; color: var(--fg1); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
body.vf-studio .cal-agenda-item:hover { border-color: var(--vf-blue); background: var(--bg-tint); }
body.vf-studio .cal-agenda-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
body.vf-studio .cal-agenda-item.is-overdue .cal-agenda-title { color: var(--danger-text); }
body.vf-studio .cal-agenda-span { flex: none; font-size: 12px; color: var(--fg4); }
body.vf-studio .cal-agenda-src { flex: none; font-size: 11px; font-weight: 600; color: var(--fg3); background: var(--bg-tint); border-radius: 999px; padding: 2px 9px; }
@media (max-width: 760px) {
  body.vf-studio .cal-agenda-day { grid-template-columns: 1fr; gap: 5px; }
  body.vf-studio .cal-agenda-date { padding-top: 0; }
}
/* Event detail modal. */
body.vf-studio .cal-peek { width: min(420px, calc(100vw - 32px)); }
body.vf-studio .cal-peek-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 2px; }
body.vf-studio .cal-peek-src { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--fg3); }
body.vf-studio .cal-peek-overdue { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--danger-text); background: rgba(196,32,56,0.12); border-radius: 999px; padding: 1px 8px; }
body.vf-studio .cal-peek-title { font-size: 17px; font-weight: 650; color: var(--fg1); line-height: 1.3; }
body.vf-studio .cal-peek-date { font-size: 13px; color: var(--fg2); }
body.vf-studio .cal-peek-open { align-self: flex-start; margin-top: 4px; text-decoration: none; }
body.vf-studio .cal-peek-meta { display: flex; flex-direction: column; gap: 4px; margin: 0; }
body.vf-studio .cal-peek-metarow { display: flex; gap: 8px; font-size: 13px; }
body.vf-studio .cal-peek-metarow dt { flex: none; width: 58px; color: var(--fg3); font-weight: 600; margin: 0; }
body.vf-studio .cal-peek-metarow dd { margin: 0; color: var(--fg1); }
/* Status pill — coloured by the event's status (inline colour/border). */
body.vf-studio .cal-status-pill { flex: none; display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.5; border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; background: transparent; }
body.vf-studio .cal-agenda-item .cal-status-pill { margin-left: 2px; }

/* ── Tasks · Calendar (month) view ───────────────────────────────────────────
   Monday-first grid; tasks chip in by priority colour; undated tasks strip below. */
body.vf-studio .tk-cal { display: flex; flex-direction: column; gap: 10px; }
body.vf-studio .tk-cal-bar { display: flex; align-items: center; gap: 12px; }
body.vf-studio .tk-cal-title { font-size: 16px; font-weight: 600; color: var(--fg1); }
body.vf-studio .tk-cal-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
body.vf-studio .tk-cal-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-elev); color: var(--fg2); cursor: pointer; transition: background var(--st-hover) var(--st-ease), border-color var(--st-hover) var(--st-ease); }
body.vf-studio .tk-cal-navbtn:hover { background: var(--bg-tint); border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .tk-cal-today { padding: 0 14px; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-elev); color: var(--fg2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--st-hover) var(--st-ease), border-color var(--st-hover) var(--st-ease), color var(--st-hover) var(--st-ease); }
body.vf-studio .tk-cal-today:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .tk-cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
body.vf-studio .tk-cal-dow { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg4); padding: 0 4px; }
/* Mobile: the 7-column month/week grids don't fit a phone — scroll them
   horizontally (cells stay legible) and keep the month nav pinned to the left.
   The combined /admin/calendar falls back to its agenda instead, so this only
   affects the Productions + Tasks calendars. */
@media (max-width: 760px) {
  body.vf-studio .tk-cal { overflow-x: auto; }
  body.vf-studio .tk-cal-bar { position: sticky; left: 0; width: calc(100vw - 36px); }
  body.vf-studio .tk-cal-dows, body.vf-studio .tk-cal-grid { min-width: 552px; }
  body.vf-studio .tk-cal-cols-week, body.vf-studio .tk-cal-cols-3day { min-width: 480px; }
}
/* grid-auto-rows:1fr keeps every week row the same height, so a day with an event
   doesn't make its row taller than the empty rows — uniform day cells. */
body.vf-studio .tk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 116px; gap: 6px; }
/* Day / 3-Day / Week column layouts (cog → Date view) */
body.vf-studio .tk-cal-cols { display: grid; gap: 8px; }
body.vf-studio .tk-cal-cols-week { grid-template-columns: repeat(7, 1fr); }
body.vf-studio .tk-cal-cols-3day { grid-template-columns: repeat(3, 1fr); }
body.vf-studio .tk-cal-cols-day { grid-template-columns: 1fr; }
body.vf-studio .tk-cal-col { display: flex; flex-direction: column; min-height: 340px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); overflow: hidden; }
body.vf-studio .tk-cal-col.is-today { border-color: var(--vf-blue); box-shadow: inset 0 0 0 1px var(--vf-blue); }
body.vf-studio .tk-cal-col.is-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
body.vf-studio .tk-cal-col-head { display: flex; align-items: baseline; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--bg-tint); }
body.vf-studio .tk-cal-col-dow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); }
body.vf-studio .tk-cal-col.is-today .tk-cal-col-dow { color: var(--vf-blue); }
body.vf-studio .tk-cal-col-date { font-size: 14px; font-weight: 600; color: var(--fg1); }
body.vf-studio .tk-cal-col.is-today .tk-cal-col-date { color: var(--vf-blue); }
body.vf-studio .tk-cal-col-body { display: flex; flex-direction: column; gap: 4px; padding: 8px; flex: 1; overflow-y: auto; }
body.vf-studio .tk-cal-cols-day .tk-cal-col-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px; align-content: start; }
body.vf-studio .tk-cal-col-empty { color: var(--fg4); font-size: 12px; padding: 4px 6px; }
body.vf-studio .tk-cal-col .tk-cal-task { font-size: 12px; padding: 5px 8px; }
/* Every month cell is the same fixed size (grid-auto-rows above); content that
   overflows scrolls inside the cell, and long task names wrap rather than the
   cell growing — so the grid stays a clean, even matrix. */
body.vf-studio .tk-cal-cell { display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 0; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); overflow: hidden; }
body.vf-studio .tk-cal-cell.is-out { background: var(--bg-tint); opacity: 0.62; }
body.vf-studio .tk-cal-cell.is-today { border-color: var(--vf-blue); box-shadow: inset 0 0 0 1px var(--vf-blue); }
body.vf-studio .tk-cal-daynum { font-size: 11px; font-weight: 600; color: var(--fg3); align-self: flex-end; line-height: 1; }
body.vf-studio .tk-cal-cell.is-today .tk-cal-daynum { color: var(--vf-blue); }
body.vf-studio .tk-cal-tasks { display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow-y: auto; }
body.vf-studio .tk-cal-task { display: flex; align-items: center; gap: 5px; width: 100%; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 11px; font-weight: 500; color: var(--fg2); text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-cal-task:hover { background: var(--bg-tint); }
body.vf-studio .tk-cal-cell.is-out .tk-cal-task:hover { background: var(--bg-elev); }
body.vf-studio .tk-cal-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--fg4); }
body.vf-studio .tk-cal-task.tk-pill-vividred .tk-cal-dot { background: #E5394A; }
body.vf-studio .tk-cal-task.tk-pill-red .tk-cal-dot { background: #D64054; }
body.vf-studio .tk-cal-task.tk-pill-amber .tk-cal-dot { background: #CD8428; }
body.vf-studio .tk-cal-task.tk-pill-yellow .tk-cal-dot { background: #B6A11E; }
body.vf-studio .tk-cal-taskname { overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
/* Completed — green outline + slashed text (matches the time-grid blocks) */
body.vf-studio .tk-cal-task.is-done { box-shadow: inset 0 0 0 1.5px #2FA25B; background: rgba(47,162,91,0.10); }
body.vf-studio .tk-cal-task.is-done .tk-cal-taskname { text-decoration: line-through; color: var(--success-text); }
body.vf-studio .tk-cal-task.is-done .tk-cal-tasktime { color: var(--success-text); }
body.vf-studio .tk-cal-task.is-done .tk-cal-dot { background: #2FA25B; }
/* Dark mode: the #1A7A43 done-green is too dark to read on a dark cell — lift it
   to a brighter green and warm the fill/outline so completed chips stay legible. */
body.vf-studio.vf-admin-dark .tk-cal-task.is-done { box-shadow: inset 0 0 0 1.5px #3FBE6E; background: rgba(63,190,110,0.14); }
body.vf-studio.vf-admin-dark .tk-cal-task.is-done .tk-cal-taskname { color: #5BD98C; }
body.vf-studio.vf-admin-dark .tk-cal-task.is-done .tk-cal-dot { background: #3FBE6E; }
/* Start-time label on a chip (month / week views) */
body.vf-studio .tk-cal-tasktime { flex: none; font-size: 10px; font-weight: 700; color: var(--fg3); font-variant-numeric: tabular-nums; }
body.vf-studio .tk-cal-task.is-done .tk-cal-tasktime { color: var(--fg4); }

/* ── Tasks calendar · Day / 3-Day time grid ──────────────────────────────────
   Hour-by-hour columns with absolutely-positioned task blocks. Drag the block
   body to move (time + day); drag the bottom handle to resize. */
body.vf-studio .tk-tg { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); overflow: hidden; }
body.vf-studio .tk-tg-head { display: flex; border-bottom: 1px solid var(--line); background: var(--bg-tint); }
body.vf-studio .tk-tg-gutterhead { flex: 0 0 54px; }
body.vf-studio .tk-tg-colhead { flex: 1 1 0; display: flex; align-items: baseline; justify-content: center; gap: 7px; padding: 9px 6px; border-left: 1px solid var(--line); }
body.vf-studio .tk-tg-colhead.is-today .tk-cal-col-dow, body.vf-studio .tk-tg-colhead.is-today .tk-cal-col-date { color: var(--vf-blue); }
body.vf-studio .tk-tg-scroll { overflow: visible; }
body.vf-studio .tk-tg-body { position: relative; }
body.vf-studio .tk-tg-gutter { position: absolute; top: 0; left: 0; width: 54px; height: 100%; }
body.vf-studio .tk-tg-hour { position: absolute; right: 7px; font-size: 10px; font-weight: 600; color: var(--fg4); font-variant-numeric: tabular-nums; line-height: 1; }
body.vf-studio .tk-tg-cols { position: relative; margin-left: 54px; height: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
body.vf-studio .tk-tg-col { position: relative; height: 100%; border-left: 1px solid var(--line); }
body.vf-studio .tk-tg-col.is-today { background: var(--accent-soft); }
body.vf-studio .tk-tg-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); opacity: 0.6; }
body.vf-studio .tk-tg-block { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 1px; padding: 3px 7px 5px; border-radius: 8px; background: var(--vf-blue); color: #fff; overflow: hidden; cursor: grab; user-select: none; box-shadow: 0 2px 6px rgba(10,15,26,0.18); transition: box-shadow var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-tg-block:hover { box-shadow: 0 4px 12px rgba(10,15,26,0.26); }
body.vf-studio .tk-tg-block.tk-pill-vividred { background: #E5394A; }
body.vf-studio .tk-tg-block.tk-pill-red { background: #D64054; }
body.vf-studio .tk-tg-block.tk-pill-amber { background: #CD8428; }
body.vf-studio .tk-tg-block.tk-pill-yellow { background: #B6A11E; color: #fff; }
body.vf-studio .tk-tg-block.tk-pill-grey { background: #6E7888; }
body.vf-studio .tk-tg-blocktime { font-size: 10px; font-weight: 700; opacity: 0.92; font-variant-numeric: tabular-nums; }
body.vf-studio .tk-tg-blockname { font-size: 11px; font-weight: 600; line-height: 1.18; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Combined /admin/calendar time grid (read-only, heterogeneous events). The 24h
   body scrolls inside its own window (the single-source grids let the page scroll);
   blocks open a peek on click rather than dragging. */
body.vf-studio .cal-tg .tk-tg-scroll { overflow-y: auto; overflow-x: hidden; max-height: 58vh; }
body.vf-studio .cal-tg .tk-tg-block { cursor: pointer; border: 0; font: inherit; text-align: left; }
body.vf-studio .cal-tg .tk-tg-block.is-draggable { cursor: grab; }
body.vf-studio .cal-tg .tk-tg-block.is-draggable:active { cursor: grabbing; }
/* Full-height time-grid calendar (day / 3-day / week): the page fills the device
   and only the grid scrolls internally — no double page+grid scroll. Scoped to
   main.cal-lockh, which CombinedCalendarPage sets only in the non-month views. */
body.vf-studio main.cal-lockh { height: 100vh; max-height: 100vh; overflow: hidden; }
body.vf-studio main.cal-lockh > .vf-footer { display: none; }
body.vf-studio main.cal-lockh .kp-content { flex: 1 1 auto; min-height: 0; display: flex; }
body.vf-studio main.cal-lockh .kp-content-inner { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.vf-studio main.cal-lockh .cal-views { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.vf-studio main.cal-lockh .cal-views > .tk-cal { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.vf-studio main.cal-lockh .tk-cal > .tk-cal-bar { flex: 0 0 auto; }
body.vf-studio main.cal-lockh .tk-tg.cal-tg { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.vf-studio main.cal-lockh .tk-tg.cal-tg .tk-tg-head { flex: 0 0 auto; }
body.vf-studio main.cal-lockh .tk-tg.cal-tg .tk-tg-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
body.vf-studio .tk-tg-colhead { position: relative; }
body.vf-studio .tk-tg-add { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--fg4); font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
body.vf-studio .tk-tg-colhead:hover .tk-tg-add, body.vf-studio .tk-tg-add:focus-visible { opacity: 1; }
body.vf-studio .tk-tg-add:hover { background: var(--bg-tint); color: var(--vf-blue); }
/* All-day band — date-only events (most shoot days, all-day feed entries) sit
   here, aligned to the day columns below. */
body.vf-studio .tk-tg-allday { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--bg-tint); max-height: 88px; overflow-y: auto; }
body.vf-studio .tk-tg-alldaylabel { flex: 0 0 54px; display: flex; align-items: center; justify-content: flex-end; padding: 6px 7px 0 0; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg4); }
body.vf-studio .tk-tg-alldaycols { flex: 1 1 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
body.vf-studio .tk-tg-alldaycol { border-left: 1px solid var(--line); padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.vf-studio .tk-tg-allday .tk-cal-task.is-draggable { cursor: grab; }
body.vf-studio .tk-tg-allday .tk-cal-task.is-draggable:active { cursor: grabbing; }
body.vf-studio .tk-tg-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
/* Tick a task done straight from the day/3-day grid — small check in the block corner */
body.vf-studio .tk-tg-block .tk-tg-check { position: absolute; top: 3px; right: 3px; width: 15px; height: 15px; margin: 0; flex: none; border-radius: 6px; border: 1.5px solid rgba(255,255,255,0.72); background: rgba(255,255,255,0.16); color: transparent; z-index: 3; }
body.vf-studio .tk-tg-block .tk-tg-check svg { width: 10px; height: 10px; }
body.vf-studio .tk-tg-block .tk-tg-check:hover { border-color: #fff; background: rgba(255,255,255,0.30); color: #fff; }
body.vf-studio .tk-tg-block .tk-tg-check.is-done { border-color: #2FA25B; background: #1F8A47; color: #fff; }
body.vf-studio .tk-tg-blockname { padding-right: 14px; }
/* z 4 (not 6): beats sibling blocks + the workband but slides UNDER the pinned
   hour rail (z 5) and sticky all-day band (z 6) while dragging in the calendar. */
body.vf-studio .tk-tg-block.is-drag { opacity: 0.95; z-index: 4; cursor: grabbing; box-shadow: 0 10px 24px rgba(10,15,26,0.32); }
body.vf-studio .tk-tg-block.is-ghost { opacity: 0.6; pointer-events: none; }
body.vf-studio .tk-tg-col.is-creatable { cursor: crosshair; }
/* Dropping an undated task chip onto a time-grid column */
body.vf-studio .tk-tg-col.is-dropover { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--vf-blue); }
body.vf-studio .tk-tg-block.tk-tg-create { background: var(--accent-soft); border: 1.5px dashed var(--vf-blue); color: var(--vf-blue); box-shadow: none; pointer-events: none; opacity: 0.95; }
body.vf-studio .tk-tg-block.tk-tg-create .tk-tg-blocktime { opacity: 0.9; }
/* Completed — green outline + slashed text so done work reads at a glance */
body.vf-studio .tk-tg-block.is-done { background: rgba(47,162,91,0.12); border: 1.5px solid #2FA25B; color: var(--success-text); box-shadow: none; }
body.vf-studio .tk-tg-block.is-done .tk-tg-blocktime { opacity: 0.8; }
body.vf-studio .tk-tg-block.is-done .tk-tg-blockname { text-decoration: line-through; }
/* "Now" line on today's column — blue so it reads clearly over the red chips */
body.vf-studio .tk-tg-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #2A78EA; z-index: 4; pointer-events: none; }
body.vf-studio .tk-tg-now::before { content: ''; position: absolute; left: -1px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: #2A78EA; }
/* Claude usage-window reset marker (today's column) */
body.vf-studio .tk-tg-claude { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed #C77DFF; z-index: 5; pointer-events: none; }
body.vf-studio .tk-tg-claude-lbl { position: absolute; right: 3px; top: 2px; font-size: 9px; font-weight: 700; letter-spacing: 0.02em; color: #7A3FB0; background: rgba(199,125,255,0.16); padding: 1px 5px; border-radius: 6px; white-space: nowrap; }
body.vf-studio .tk-cal-more { align-self: flex-start; margin-top: 1px; padding: 1px 6px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 11px; font-weight: 600; color: var(--vf-blue); cursor: pointer; }
body.vf-studio .tk-cal-more:hover { background: var(--accent-soft); }
body.vf-studio .tk-cal-undated { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--bg-tint); }
body.vf-studio .tk-cal-undated-h { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg4); }
body.vf-studio .tk-cal-undated-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--bg-elev); color: var(--fg3); font-size: 11px; letter-spacing: 0; }
body.vf-studio .tk-cal-undated-list { display: flex; flex-wrap: wrap; gap: 6px; }
body.vf-studio .tk-cal-undated-list .tk-cal-task { width: auto; max-width: 240px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); }
body.vf-studio .tk-cal-undated-list .tk-cal-task:hover { border-color: var(--line-strong); background: var(--bg-elev); }

@media (max-width: 760px) {
  body.vf-studio .tk-cal-cell { min-height: 72px; }
  body.vf-studio .tk-cal-dow { font-size: 10px; }
  body.vf-studio .tk-board-col { flex-basis: 232px; width: 232px; }
}

/* ── Settings → Team access (primary admin only) ──────────────────────────── */
body.vf-studio .set-team { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
body.vf-studio .set-team-user { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); }
body.vf-studio .set-team-name { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--fg1); }
body.vf-studio .set-team-email { font-weight: 400; font-size: 12px; color: var(--fg4); }
body.vf-studio .set-team-chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* Reuse the rentals category-chip look; "on" = visible (filled), off = hidden (faded) */
body.vf-studio .set-team-chips .kp-eq-cat { transition: opacity var(--st-hover) var(--st-ease), background var(--st-hover) var(--st-ease), border-color var(--st-hover) var(--st-ease); }
body.vf-studio .set-team-chips .kp-eq-cat:not(.is-on) { opacity: 0.5; text-decoration: line-through; text-decoration-color: rgba(120,40,40,0.5); }

/* Error-boundary technical details (collapsible, monospace) */
body.vf-studio .adb-errboundary-det { width: 100%; max-width: 520px; margin: 2px 0 4px; text-align: left; }
body.vf-studio .adb-errboundary-det summary { cursor: pointer; font-size: 12px; color: var(--fg3); user-select: none; }
body.vf-studio .adb-errboundary-pre { margin: 8px 0 0; padding: 10px 12px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 10px; font-size: 11px; line-height: 1.5; color: var(--fg2); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }

/* ── Frames & Footage (Productions sub-page) ── */
body.vf-studio .prod-subnav { margin-bottom: 18px; }
body.vf-studio a.kit-subtab { text-decoration: none; display: inline-flex; align-items: center; }
body.vf-studio .frames-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
body.vf-studio .frames-empty { padding: 44px 0; text-align: center; color: var(--fg3); font-size: 14px; }
body.vf-studio .frames-errdetail { display: inline-block; margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--fg3); }
/* Marketplace-style grouped bands with a list of rows under each */
body.vf-studio .frames-grouptoggle { flex: none; }
body.vf-studio .frames-bands .frames-rows { margin-top: 9px; }
body.vf-studio .frames-rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-elev); }
body.vf-studio .frames-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; font: inherit; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .frames-row:last-child { border-bottom: 0; }
body.vf-studio .frames-row:hover { background: var(--bg-tint); }
body.vf-studio .frames-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
body.vf-studio .frames-row-name { font-size: 14px; font-weight: 600; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.vf-studio .frames-row-notes { font-size: 12px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.vf-studio .frames-row-side { display: flex; align-items: center; gap: 12px; flex: none; }
body.vf-studio .frames-row-meta { font-size: 12px; color: var(--fg4); white-space: nowrap; }
body.vf-studio .frames-sidelist.tk-density-compact .frames-row { padding: 8px 14px; }
body.vf-studio .frames-sidelist.tk-density-roomy .frames-row { padding: 18px 16px; }
@media (max-width: 560px) { body.vf-studio .frames-row-meta { display: none; } }
body.vf-studio .frames-peek .tk-peek-hero-top { align-items: center; flex-wrap: wrap; row-gap: 8px; }
/* Long backup labels (e.g. "G-Drive & iCloud") must show in full: keep the status
   pills at their natural width and let the group wrap rather than clip/ellipsise. */
body.vf-studio .frames-peek .tk-peek-statgroup .tk-pill { flex: none; }
body.vf-studio .frames-peek .tk-peek-stat-cur { max-width: 260px; }
body.vf-studio .frames-openlink { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--vf-blue); text-decoration: none; white-space: nowrap; }
body.vf-studio .frames-openlink:hover { text-decoration: underline; }
body.vf-studio .frames-peek-err { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--danger-text); }

/* ═══ Social Media (Communications → Social Media) ═════════════════════════ */
body.vf-studio .social-toolbar { margin-bottom: 18px; }
/* Instagram-style grid: 3 square columns, tight gaps, capped so it reads like a
   profile rather than sprawling across the page. */
body.vf-studio .social-gridwrap { display: flex; justify-content: center; }
body.vf-studio .social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; max-width: 680px; }
body.vf-studio .social-tile { position: relative; aspect-ratio: 1 / 1; border: 0; padding: 0; background: var(--bg-tint); cursor: pointer; overflow: hidden; }
body.vf-studio .social-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.vf-studio .social-tile img.social-tile-img, body.vf-studio .social-tile .social-thumb-vid { width: 100%; height: 100%; }
body.vf-studio .social-tile .social-thumb-vid video { width: 100%; height: 100%; object-fit: cover; }
body.vf-studio .social-tile::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(10,15,26,0.04); pointer-events: none; }
body.vf-studio .social-tile:hover .social-tile-img { transform: scale(1.03); }
body.vf-studio .social-tile-img { transition: transform var(--dur-base, 220ms) var(--ease-out); }
body.vf-studio .social-tile.is-scheduled .social-tile-img { opacity: 0.82; }
body.vf-studio .social-tile-multi { position: absolute; top: 7px; right: 7px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
body.vf-studio .social-tile-badge { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: rgba(10,15,26,0.66); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
body.vf-studio .social-thumb-ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--bg-tint); color: var(--fg4); }
body.vf-studio .social-thumb-vid { position: relative; display: block; }
body.vf-studio .social-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); pointer-events: none; }
body.vf-studio .social-empty { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 60px 20px; color: var(--fg2); font-size: 15px; font-weight: 600; }
body.vf-studio .social-empty span { font-size: 13px; font-weight: 400; color: var(--fg4); }
/* Review list */
body.vf-studio .social-list { display: flex; flex-direction: column; }
body.vf-studio .social-row { display: grid; grid-template-columns: 52px 1fr auto auto auto; align-items: center; gap: 14px; padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .social-row:hover { background: var(--bg-tint); }
body.vf-studio .social-row-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--bg-tint); }
body.vf-studio .social-row-thumb.social-thumb-ph { display: grid; place-items: center; }
body.vf-studio .social-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.vf-studio .social-row-title { font-size: 14px; font-weight: 600; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .social-row-desc { font-size: 12.5px; color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .social-muted { color: var(--fg4); font-style: italic; }
body.vf-studio .social-row-date { font-size: 12.5px; color: var(--fg3); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.vf-studio .social-row-status { font-size: 11px; }
/* Peek */
body.vf-studio .social-peek { max-width: 540px; padding-top: 30px; }
body.vf-studio .social-peek-media { position: relative; margin: 0 0 16px; }
body.vf-studio .social-peek-strip { display: flex; gap: 6px; overflow-x: auto; border-radius: 14px; scroll-snap-type: x mandatory; }
body.vf-studio .social-peek-mitem { flex: 0 0 auto; width: 100%; max-height: 460px; object-fit: contain; border-radius: 14px; background: var(--bg-tint); scroll-snap-align: center; }
body.vf-studio .social-peek-strip .social-peek-mitem ~ .social-peek-mitem { width: 92%; }
body.vf-studio .social-peek-nomedia { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; height: 200px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: var(--bg-tint); color: var(--fg4); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .social-peek-nomedia:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .social-peek-mediabar { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
body.vf-studio .social-peek-upload { border: 1px solid var(--line-strong); background: var(--bg-elev); border-radius: 999px; height: 30px; padding: 0 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg1); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .social-peek-upload:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .social-peek-upload:disabled { opacity: 0.6; cursor: default; }
body.vf-studio .social-peek-mcount { font-size: 12px; font-weight: 500; color: var(--fg4); }
body.vf-studio .social-peek-title { width: 100%; border: 0; border-bottom: 1px solid transparent; background: none; font: inherit; font-size: 21px; font-weight: 700; color: var(--fg1); outline: none; padding: 2px 0; margin: 0 0 18px; transition: border-color var(--dur-fast) var(--ease-out); }
body.vf-studio .social-peek-title:focus { border-bottom-color: var(--line-strong); }
body.vf-studio .social-peek-section { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
body.vf-studio .social-peek-statusrow { display: flex; flex-wrap: wrap; gap: 6px; }
body.vf-studio .social-statopt { cursor: pointer; border: 1px solid transparent; opacity: 0.72; font-weight: 600; transition: opacity var(--dur-fast) var(--ease-out); }
body.vf-studio .social-statopt:hover { opacity: 1; }
body.vf-studio .social-statopt.is-cur { opacity: 1; box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 3.5px currentColor; }
body.vf-studio .social-peek-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; min-width: 0; }
body.vf-studio .social-peek-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg4); }
body.vf-studio .social-peek-hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--fg4); }
body.vf-studio .social-peek-caption { width: 100%; min-height: 84px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5; color: var(--fg1); background: var(--bg-elev); outline: none; box-sizing: border-box; }
body.vf-studio .social-peek-caption:focus { border-color: var(--vf-blue); }
body.vf-studio .social-peek-metarow { display: flex; gap: 16px; flex-wrap: wrap; }
body.vf-studio .social-peek-metarow .social-peek-field { flex: 1 1 180px; }
body.vf-studio .social-peek-date { height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 11px; font: inherit; font-size: 14px; color: var(--fg1); background: var(--bg-elev); outline: none; }
body.vf-studio .social-peek-date:focus { border-color: var(--vf-blue); }
body.vf-studio .social-peek-editors { display: flex; gap: 8px; flex-wrap: wrap; }
body.vf-studio .social-editor { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 5px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-elev); font: inherit; font-size: 13px; font-weight: 600; color: var(--fg2); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .social-editor:hover { border-color: var(--vf-blue); }
body.vf-studio .social-editor.is-on { background: var(--accent-soft); border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .social-peek-err { margin: 4px 0 12px; font-size: 12.5px; font-weight: 600; color: var(--danger-text); }
body.vf-studio .social-peek-comments { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 16px; }
@media (max-width: 760px) { body.vf-studio .social-row { grid-template-columns: 44px 1fr auto; } body.vf-studio .social-row-date, body.vf-studio .social-row-av { display: none; } }
body.vf-studio .frames-meta { display: flex; flex-direction: column; gap: 12px; }
body.vf-studio .frames-metarow { display: flex; flex-direction: column; gap: 3px; }
body.vf-studio .frames-metak { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg4); }
body.vf-studio .frames-metav { font-size: 14px; color: var(--fg1); line-height: 1.45; white-space: pre-wrap; }
body.vf-studio .frames-metanone { color: var(--fg3); font-size: 13px; }
body.vf-studio .frames-titleinput { width: 100%; }
body.vf-studio .frames-editors { display: inline-flex; flex-wrap: wrap; gap: 12px; }
body.vf-studio .frames-editor { display: inline-flex; align-items: center; gap: 7px; }
body.vf-studio .frames-editor-name { font-size: 14px; color: var(--fg1); }
body.vf-studio .frames-statuscycle { cursor: pointer; user-select: none; border: 0; font: inherit; font-weight: 700; transition: filter var(--dur-fast) var(--ease-out); }
body.vf-studio .frames-statuscycle:hover { filter: brightness(0.95); }
body.vf-studio .frames-statuscycle:active { transform: scale(0.97); }
/* The status pill sits on the peek's blue gradient hero, where a translucent
   tinted pill (e.g. "For Review" blue-on-blue) all but vanished. Give it a
   solid white chip with the status colour as legible text. */
body.vf-studio .frames-statuscycle.tk-pill-blue,
body.vf-studio .frames-statuscycle.tk-pill-amber,
body.vf-studio .frames-statuscycle.tk-pill-green,
body.vf-studio .frames-statuscycle.tk-pill-grey { background: #fff; box-shadow: 0 1px 4px rgba(5,20,50,0.28); }
body.vf-studio .frames-statuscycle.tk-pill-blue  { color: #1E63C8; }
body.vf-studio .frames-statuscycle.tk-pill-amber { color: #A5620C; }
body.vf-studio .frames-statuscycle.tk-pill-green { color: #1B7A44; }
body.vf-studio .frames-statuscycle.tk-pill-grey  { color: #4B5468; }
/* Editor picker chips */
body.vf-studio .frames-editorsel { display: inline-flex; flex-wrap: wrap; gap: 8px; }
body.vf-studio .frames-editorchip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); cursor: pointer; font: inherit; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); opacity: 0.55; }
body.vf-studio .frames-editorchip:hover { opacity: 0.85; }
body.vf-studio .frames-editorchip.is-on { opacity: 1; border-color: var(--vf-blue); background: var(--accent-soft); }
body.vf-studio .frames-editorchip-name { font-size: 13px; font-weight: 600; color: var(--fg1); }
body.vf-studio .frames-backuppop { min-width: 240px; }
body.vf-studio .frames-peek-check { flex: none; margin-left: 4px; }
/* Year grouping */
body.vf-studio .frames-years { display: flex; flex-direction: column; gap: 22px; }
body.vf-studio .frames-yearhead { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; font-size: 16px; font-weight: 800; color: var(--fg1); }
body.vf-studio .frames-yearcount { font-size: 12px; font-weight: 700; color: var(--fg4); }
/* Clickable year header → opens that year's iCloud folder. */
body.vf-studio a.frames-yearhead.is-link { text-decoration: none; cursor: pointer; border-radius: 8px; margin-left: -6px; padding: 2px 8px 2px 6px; transition: color 0.12s ease, background 0.12s ease; }
body.vf-studio a.frames-yearhead.is-link:hover { color: var(--vf-blue); background: var(--accent-soft); }
body.vf-studio .frames-yearlink-ic { align-self: center; opacity: 0; color: var(--vf-blue); transition: opacity 0.12s ease; }
body.vf-studio a.frames-yearhead.is-link:hover .frames-yearlink-ic { opacity: 1; }
/* Master archive folder button in the toolbar. */
body.vf-studio .frames-icloud-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--fg1); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .frames-icloud-btn:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
body.vf-studio .frames-icloud-btn svg { color: var(--vf-blue); }
/* Chat drag-and-drop zone */
body.vf-studio .chat-dropzone { position: absolute; inset: 8px; z-index: 20; display: grid; place-items: center; border: 2px dashed var(--vf-blue); border-radius: 16px; background: rgba(42,120,234,0.08); color: var(--vf-blue); font-size: 15px; font-weight: 700; pointer-events: none; }
body.vf-studio .frames-cnote { color: var(--fg3); font-size: 13px; padding: 4px 0 8px; }
/* Comment thread */
body.vf-studio .frames-csync { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fg4); }
body.vf-studio .frames-clist { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 14px; }
body.vf-studio .frames-comment { display: flex; gap: 10px; }
body.vf-studio .frames-comment-av { flex: none; margin-top: 1px; }
body.vf-studio .frames-comment-body { min-width: 0; flex: 1; }
body.vf-studio .frames-comment-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
body.vf-studio .frames-comment-author { font-size: 13px; font-weight: 700; color: var(--fg1); }
body.vf-studio .frames-comment-time { font-size: 11px; color: var(--fg4); }
body.vf-studio .frames-comment-text { font-size: 13px; line-height: 1.5; color: var(--fg2); white-space: pre-wrap; word-break: break-word; }

/* ════════════════════════════════════════════════════════════════════════════
   Studio admin — left SIDEBAR nav (Notion-style, show/hide)
   Replaces the old top bar. Desktop = a fixed left rail you can hide (content
   reclaims the width); mobile (≤760px) keeps a slim top bar + the existing
   off-canvas drawer. Everything scoped to body.vf-studio.
   ════════════════════════════════════════════════════════════════════════════ */
body.vf-studio { --sidebar-w: 248px; --mbar-h: 58px; }
body.vf-studio.vf-admin-sidebar-collapsed { --sidebar-w: 64px; } /* collapsed = a 64px icon rail */
/* No left rail on mobile — content is full width under the slim top bar. The bar
   absorbs the status-bar inset (viewport-fit=cover) so its height var stays exact
   for everything that pins below it (chat pane, view-as strip). */
@media (max-width: 760px) { body.vf-studio { --sidebar-w: 0px; --mbar-h: calc(58px + env(safe-area-inset-top, 0px)); } }

/* Shift content + footer right of the rail (the single offset hook). */
body.vf-studio .kp-content,
body.vf-studio .vf-footer,
body.vf-studio .content,
body.vf-studio .kp-boot-page,
body.vf-studio .quotes-boot {
  margin-left: var(--sidebar-w);
  transition: margin-left 320ms var(--st-ease);
}

/* The fixed rail */
body.vf-studio .studio-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 30;
  display: flex; flex-direction: column; gap: 6px; box-sizing: border-box;
  padding: 24px 12px 14px;
  background: linear-gradient(180deg, rgba(247,248,250,0.96) 0%, rgba(243,245,248,0.96) 100%);
  border-right: 1px solid rgba(10,15,26,0.09);
  box-shadow: 1px 0 0 rgba(255,255,255,0.6) inset, 4px 0 22px rgba(10,15,26,0.03);
  transition: width 320ms var(--st-ease);
  overflow: visible;
}
/* ── Collapsed = a 64px ICON RAIL: labels/chevrons/sub-menus tuck away, icons
   centre, tooltips (title=) name each item; the hub icon navigates to the hub. */
body.vf-studio.vf-admin-sidebar-collapsed .studio-sidebar { padding: 14px 8px 10px; }
body.vf-studio.vf-admin-sidebar-collapsed .ssb-label,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-search-label,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-kbd,
body.vf-studio.vf-admin-sidebar-collapsed .navbar-brand-suffix,
body.vf-studio.vf-admin-sidebar-collapsed .navbar-brand-divider,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-quickbtn span,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-acct-name,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-groupchev,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-subs,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-viewas,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-count { display: none; }
body.vf-studio.vf-admin-sidebar-collapsed .ssb-head { flex-direction: column; gap: 8px; padding: 0 0 2px; }
body.vf-studio.vf-admin-sidebar-collapsed .ssb-collapse svg { transform: rotate(180deg); }
body.vf-studio.vf-admin-sidebar-collapsed .ssb-item,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-grouplink,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-search,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-quickbtn,
body.vf-studio.vf-admin-sidebar-collapsed .ssb-acct { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
body.vf-studio.vf-admin-sidebar-collapsed .ssb-quick { flex-direction: column; gap: 6px; }
/* In the icon rail the quick buttons stack vertically — override the 2-up row's
   flex-basis (which otherwise halves their height) so each matches the search /
   nav-item size (full-width, 34px tall). */
body.vf-studio.vf-admin-sidebar-collapsed .ssb-quickbtn { flex: none; width: 100%; height: 34px; border-radius: 8px; }
body.vf-studio.vf-admin-sidebar-collapsed .ssb-foot { flex-direction: column; align-items: stretch; gap: 4px; }
body.vf-studio.vf-admin-sidebar-collapsed .ssb-item { position: relative; }
body.vf-studio.vf-admin-sidebar-collapsed .ssb-unread { position: absolute; top: 6px; right: 12px; }

/* Head: brand + collapse */
body.vf-studio .ssb-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 10px; }
body.vf-studio .studio-sidebar .navbar-brand { padding: 2px 0; }
body.vf-studio .ssb-collapse { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--fg3); border-radius: 8px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .ssb-collapse:hover { background: rgba(10,15,26,0.07); color: var(--fg1); }

/* Viewing-as banner in the rail */
body.vf-studio .ssb-viewas { margin: 2px 2px 4px; padding: 7px 9px; border-radius: 8px; font-size: 11px; line-height: 1.4; flex-direction: column; align-items: flex-start; gap: 5px; }

/* Search button → opens ⌘K */
body.vf-studio .ssb-search { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 10px; margin-top: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-tint); color: var(--fg3); font: inherit; font-size: 13px; cursor: text; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
body.vf-studio .ssb-search:hover { border-color: var(--line-strong); color: var(--fg2); }
body.vf-studio .ssb-search svg { flex: none; }
body.vf-studio .ssb-search-label { flex: 1 1 auto; text-align: left; }
body.vf-studio .ssb-kbd { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--fg4); background: rgba(10,15,26,0.05); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }

/* Quick actions */
/* Quick-action buttons wrap to a max of 2 per row so 3–4 don't squish. */
body.vf-studio .ssb-quick { flex: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 3px; }
body.vf-studio .ssb-quickbtn { flex: 1 1 calc(50% - 3px); min-width: 0; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .ssb-quickbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vf-studio .ssb-quickbtn svg { flex: none; }
body.vf-studio .ssb-quickbtn:hover { border-color: var(--vf-blue); color: var(--vf-blue); }

/* Nav list (scrolls) */
body.vf-studio .ssb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 1px; margin-top: 5px; padding-bottom: 6px; }
body.vf-studio .ssb-nav::-webkit-scrollbar { width: 8px; }
body.vf-studio .ssb-nav::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; }
body.vf-studio .ssb-nav::-webkit-scrollbar-track { background: transparent; }

body.vf-studio .ssb-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--fg2); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; text-decoration: none; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .ssb-item > svg { flex: none; color: var(--fg3); transition: color var(--dur-fast) var(--ease-out); }
body.vf-studio .ssb-item:hover { background: rgba(10,15,26,0.05); color: var(--fg1); }
body.vf-studio .ssb-item:hover > svg { color: var(--fg1); }
body.vf-studio .ssb-item.active { background: #fff; color: var(--fg1); font-weight: 600; box-shadow: 0 1px 3px rgba(10,15,26,0.08); }
body.vf-studio .ssb-item.active > svg { color: var(--vf-blue); }
body.vf-studio .ssb-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Group accordion */
body.vf-studio .ssb-group { display: flex; flex-direction: column; }
/* A group header for the CURRENT section reads as accent text, not the full
   raised pill — that's reserved for the actual page (a leaf item or the
   active sub), so the hierarchy doesn't show two "selected" rows at once. */
body.vf-studio .ssb-grouptop.active { background: transparent; box-shadow: none; color: var(--vf-blue); }
body.vf-studio .ssb-grouptop.active > svg { color: var(--vf-blue); }
body.vf-studio.vf-admin-dark .ssb-grouptop.active { color: var(--vf-blue-300); }
body.vf-studio.vf-admin-dark .ssb-grouptop.active > svg { color: var(--vf-blue-300); }
body.vf-studio .ssb-chev { flex: none; color: var(--fg4); transition: transform 220ms var(--st-ease); }
body.vf-studio .ssb-group.is-open .ssb-chev { transform: rotate(180deg); }
/* Hub group header: the icon+label is a LINK to the hub; a separate chevron
   toggles the accordion (so clicking the row navigates, the chevron expands). */
body.vf-studio .ssb-grouptop { cursor: default; }
body.vf-studio .ssb-grouplink { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
body.vf-studio .ssb-grouplink > svg { flex: none; color: var(--fg3); transition: color var(--dur-fast) var(--ease-out); }
body.vf-studio .ssb-grouptop:hover .ssb-grouplink > svg { color: var(--fg1); }
body.vf-studio .ssb-grouptop.active .ssb-grouplink > svg { color: var(--vf-blue); }
body.vf-studio.vf-admin-dark .ssb-grouptop.active .ssb-grouplink > svg { color: var(--vf-blue-300); }
body.vf-studio .ssb-groupchev { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--fg4); border-radius: 6px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .ssb-groupchev:hover { background: rgba(10,15,26,0.10); color: var(--fg1); }
body.vf-studio.vf-admin-dark .ssb-groupchev:hover { background: rgba(255,255,255,0.10); }
body.vf-studio .ssb-subs { overflow: hidden; max-height: 0; transition: max-height 260ms var(--st-ease); display: flex; flex-direction: column; gap: 1px; }
body.vf-studio .ssb-group.is-open .ssb-subs { max-height: 360px; }
body.vf-studio .ssb-sub { display: block; padding: 6px 10px 6px 38px; border-radius: 8px; color: var(--fg3); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .ssb-sub:hover { background: rgba(10,15,26,0.05); color: var(--fg1); }
body.vf-studio .ssb-sub.active { background: var(--accent-soft); color: var(--vf-blue); font-weight: 600; }

/* Messages CTA + unread */
body.vf-studio .ssb-item.ssb-cta { color: var(--vf-blue); }
body.vf-studio .ssb-item.ssb-cta > svg { color: var(--vf-blue); }
body.vf-studio .ssb-item.ssb-cta:hover { background: rgba(9,94,223,0.10); color: var(--vf-blue); }
body.vf-studio .ssb-item.ssb-cta.active { background: var(--vf-blue); color: #fff; box-shadow: 0 1px 2px rgba(9,94,223,0.3); }
body.vf-studio .ssb-item.ssb-cta.active > svg { color: #fff; }
body.vf-studio .ssb-count { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--vf-blue); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
body.vf-studio .ssb-item.ssb-cta.active .ssb-count { background: rgba(255,255,255,0.25); }
body.vf-studio .ssb-unread { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--vf-blue); }
/* Contained pulse — the nav clips horizontal overflow (overflow-x:hidden) and the
   item is full-width, so an outward box-shadow ring gets cropped left/right. An
   inset ring + gentle wash reads as a pulse and can never be clipped. */
body.vf-studio .ssb-item.is-pulsing { animation: ssb-pulse 2.2s ease-in-out infinite; }
@keyframes ssb-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(9,94,223,0); background: rgba(9,94,223,0); }
  50% { box-shadow: inset 0 0 0 1.5px rgba(9,94,223,0.5); background: rgba(9,94,223,0.10); }
}

/* Foot: bell + account + sign-out */
body.vf-studio .ssb-foot { flex: none; position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 4px 2px; margin-top: 4px; border-top: 1px solid var(--line); }
body.vf-studio .ssb-foot .studio-bell { flex: none; }
body.vf-studio .ssb-foot .studio-bell-pop { top: auto; bottom: calc(100% + 10px); right: auto; left: 0; max-height: min(460px, calc(100vh - 90px)); }
body.vf-studio .ssb-acct { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; text-decoration: none; color: var(--fg2); transition: background var(--dur-fast) var(--ease-out); }
body.vf-studio .ssb-acct:hover { background: rgba(10,15,26,0.05); }
body.vf-studio .ssb-acct-av { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--vf-blue); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; overflow: hidden; }
body.vf-studio .ssb-acct-av.has-img { background: var(--bg-tint); }
body.vf-studio .ssb-acct-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Unread dot on the Messages icon (bottom-left, next to the account) — red when
   there are unread messages / notifications. */
body.vf-studio .studio-bell-unread { position: absolute; top: 1px; right: 1px; width: 9px; height: 9px; border-radius: 999px; background: var(--danger); box-shadow: 0 0 0 2px var(--bg); }

/* Keyboard-shortcuts reference (the ? overlay + the Settings block). */
body.vf-studio .kbd-modal { width: min(680px, calc(100vw - 32px)); }
/* Two-column flow so the list reads as tidy grouped blocks, not one long strip.
   Sections never split across columns. */
body.vf-studio .kbd-list { columns: 2; column-gap: 34px; padding: 4px 2px 2px; }
body.vf-studio .kbd-sec { display: flex; flex-direction: column; gap: 3px; break-inside: avoid; margin: 0 0 18px; }
body.vf-studio .kbd-sec-title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg4); margin-bottom: 4px; }
@media (max-width: 560px) { body.vf-studio .kbd-list { columns: 1; } }
body.vf-studio .kbd-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 5px 0; border-bottom: 1px solid var(--line); }
body.vf-studio .kbd-row:last-child { border-bottom: 0; }
body.vf-studio .kbd-row-label { font-size: 13px; color: var(--fg2); }
body.vf-studio .kbd-row-keys { flex: none; display: inline-flex; gap: 4px; }
body.vf-studio .kbd-row-keys kbd, body.vf-studio .set-block-head kbd { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--fg2); background: var(--bg-tint); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; min-width: 20px; text-align: center; line-height: 1.5; }
/* Symbol keys (⇧ ⌘ ↵ …) render better in a system font at a hair larger size. */
body.vf-studio .kbd-row-keys kbd.is-glyph { font-family: -apple-system, "SF Pro Text", "Segoe UI Symbol", sans-serif; font-size: 13px; }
body.vf-studio .ssb-acct-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--fg1); }
body.vf-studio .ssb-signout { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--fg3); border-radius: 8px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.vf-studio .ssb-signout:hover { background: rgba(196,32,56,0.12); color: var(--danger-text); }

/* Floating reopen button (shown only while hidden, desktop) */
body.vf-studio .ssb-reopen { position: fixed; top: 14px; left: 14px; z-index: 30; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg1); cursor: pointer; box-shadow: 0 4px 14px rgba(10,15,26,0.10); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
body.vf-studio .ssb-reopen:hover { background: var(--bg-tint); }
body.vf-studio .ssb-reopen:active { transform: scale(0.94); }

/* Slim mobile top bar (≤760px) */
body.vf-studio .studio-mbar { display: none; }
/* View-as indicator for mobile — the desktop copy lives in the (hidden) rail,
   so mobile needs its own persistent strip + Exit. Sticky under the top bar. */
body.vf-studio .ssb-viewas-mobile { display: none; }

@media (max-width: 760px) {
  body.vf-studio .studio-sidebar { display: none; }
  body.vf-studio .ssb-reopen { display: none; }
  body.vf-studio .studio-mbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 20; height: var(--mbar-h); padding: env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); background: rgba(248,249,251,0.86); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid rgba(10,15,26,0.07); }
  body.vf-studio .studio-mbar .navbar-burger { display: inline-flex; margin-left: 0; }
  body.vf-studio .ssb-viewas-mobile { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: var(--mbar-h); z-index: 19; margin: 0; border-radius: 0; flex-wrap: nowrap; white-space: nowrap; }
}

/* Messages peek — adapt to the sidebar (no top bar on desktop). */
body.vf-studio .msg-peek { top: 14px; }
@media (max-width: 980px) {
  body.vf-studio .msg-peek { top: 14px; right: 14px; bottom: 14px; left: auto; width: min(var(--msg-peek-w, 440px), calc(100vw - var(--sidebar-w) - 28px)); border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 20px 54px rgba(10,15,26,0.18), -10px 0 40px rgba(10,15,26,0.10); }
  body.vf-studio.has-msg-peek .kp-content { padding-right: calc(min(var(--msg-peek-w, 440px), calc(100vw - var(--sidebar-w) - 28px)) + 30px); }
}
@media (max-width: 760px) {
  body.vf-studio .msg-peek { top: var(--mbar-h); right: 0; bottom: 0; left: 0; width: 100vw; border-radius: 0; }
  body.vf-studio.has-msg-peek .kp-content { padding-right: 0; }
}
/* Edge insets on notched phones (viewport-fit=cover): keep the footer + chat
   composer clear of the home indicator + side cut-outs. */
@media (max-width: 760px) {
  body.vf-studio .vf-footer { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  body.vf-studio .chat-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}
/* Touch devices can't hover, so controls that are normally revealed on hover and
   have no other way in stay permanently visible (the chat keeps its swipe /
   double-tap gestures, so it's deliberately excluded). */
@media (hover: none) {
  body.vf-studio .ww-ring.has-undo .ww-ring-undo { opacity: 0.85; }
  body.vf-studio .tk-peek-comment.is-mine .tk-peek-cactions { opacity: 1; }
  body.vf-studio .feat-bullet .feat-del { opacity: 0.7; }
  body.vf-studio .studio-notif-actions { opacity: 1; pointer-events: auto; }
  /* Bigger hit areas for the smallest icon controls on a finger. */
  body.vf-studio .tk-cog, body.vf-studio .tk-refresh, body.vf-studio .chat-reactadd,
  body.vf-studio .feat-del, body.vf-studio .ssb-groupchev { min-width: 40px; min-height: 40px; }
}

/* ── Dark mode (body.vf-studio.vf-admin-dark) ── */
body.vf-studio.vf-admin-dark .studio-sidebar { background: linear-gradient(180deg, rgba(19,23,30,0.97) 0%, rgba(14,17,23,0.97) 100%); border-right-color: rgba(255,255,255,0.07); box-shadow: 1px 0 0 rgba(255,255,255,0.04) inset, 4px 0 22px rgba(0,0,0,0.4); }
body.vf-studio.vf-admin-dark .ssb-collapse:hover { background: rgba(255,255,255,0.08); }
body.vf-studio.vf-admin-dark .ssb-search { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
body.vf-studio.vf-admin-dark .ssb-kbd { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
body.vf-studio.vf-admin-dark .ssb-quickbtn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); }
body.vf-studio.vf-admin-dark .ssb-item:hover { background: rgba(255,255,255,0.07); }
body.vf-studio.vf-admin-dark .ssb-item.active { background: rgba(255,255,255,0.10); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
body.vf-studio.vf-admin-dark .ssb-sub:hover { background: rgba(255,255,255,0.07); }
body.vf-studio.vf-admin-dark .ssb-sub.active { background: rgba(9,94,223,0.24); color: var(--vf-blue-300); }
body.vf-studio.vf-admin-dark .ssb-item.ssb-cta { color: var(--vf-blue-300); }
body.vf-studio.vf-admin-dark .ssb-item.ssb-cta > svg { color: var(--vf-blue-300); }
body.vf-studio.vf-admin-dark .ssb-item.ssb-cta:hover { background: rgba(9,94,223,0.18); }
body.vf-studio.vf-admin-dark .ssb-foot { border-top-color: rgba(255,255,255,0.07); }
body.vf-studio.vf-admin-dark .ssb-acct:hover { background: rgba(255,255,255,0.07); }
body.vf-studio.vf-admin-dark .ssb-reopen { background: var(--bg-elev); border-color: rgba(255,255,255,0.10); }
body.vf-studio.vf-admin-dark .studio-mbar { background: rgba(16,20,27,0.86); border-bottom-color: rgba(255,255,255,0.07); }

/* Renter invite peek (Rental Accounts search-as-create → email invite). */
body.vf-studio .rinvite-peek { max-width: 620px; }
body.vf-studio .rinvite-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--fg1); }
body.vf-studio .rinvite-lead { margin: 0 0 18px; font-size: 13.5px; color: var(--fg3); }
body.vf-studio .rinvite-fields { display: flex; gap: 12px; margin: 0 0 16px; }
body.vf-studio .rinvite-field { flex: 1 1 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
body.vf-studio .rinvite-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg4); }
body.vf-studio .rinvite-input { height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--fg1); background: var(--bg-elev); outline: none; }
body.vf-studio .rinvite-input:focus { border-color: var(--vf-blue); }
body.vf-studio .rinvite-preview-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg4); margin: 0 0 6px; }
body.vf-studio .rinvite-preview { width: 100%; height: 380px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
body.vf-studio .rinvite-preview-loading { display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--fg4); }
body.vf-studio .rinvite-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
body.vf-studio .rinvite-cancel { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg3); cursor: pointer; }
body.vf-studio .rinvite-cancel:hover { color: var(--fg1); }
body.vf-studio .rinvite-hint { font-size: 12px; color: var(--fg4); }
body.vf-studio .rinvite-sent { font-size: 13.5px; font-weight: 600; color: var(--success); }
body.vf-studio .rinvite-err { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--danger-text); }
@media (max-width: 760px) { body.vf-studio .rinvite-fields { flex-direction: column; } }

/* ═══ Motion + feel polish ════════════════════════════════════════════════
   Micro-transitions across the Studio all run on the shared motion tokens
   (var(--dur-fast) var(--ease-out)) — one duration, one crisp decelerate
   curve, instead of the old 110–180ms plain-`ease` smear. The blocks below
   add the remaining felt details: entrances for the two modals that popped
   in with none, app-feel text/scroll behaviour, and a reduced-motion
   blanket so the whole app respects the OS setting. */

/* The kte modal chrome (email composer + WeWork detail) appeared with no
   entrance while every peek animates — same fade + pop as .tk-peek. */
body.vf-studio .kte-backdrop { animation: stPeekFade 300ms var(--st-ease) both; }
body.vf-studio .kte-modal { animation: stPeekPop 500ms var(--st-ease) both; }

/* App feel: brand-tinted text selection, blue caret in every field, no grey
   tap flash on touch devices. */
body.vf-studio ::selection { background: rgba(9,94,223,0.14); }
body.vf-studio.vf-admin-dark ::selection { background: rgba(90,150,246,0.32); }
body.vf-studio { -webkit-tap-highlight-color: transparent; }
body.vf-studio input, body.vf-studio textarea, body.vf-studio [contenteditable] { caret-color: var(--vf-blue); }

/* Thin, quiet scrollbars app-wide (Notion-style); trackless, rounded thumb. */
body.vf-studio { scrollbar-color: rgba(10,15,26,0.25) transparent; scrollbar-width: thin; }
body.vf-studio.vf-admin-dark { scrollbar-color: rgba(255,255,255,0.22) transparent; }
body.vf-studio ::-webkit-scrollbar { width: 10px; height: 10px; }
body.vf-studio ::-webkit-scrollbar-track { background: transparent; }
body.vf-studio ::-webkit-scrollbar-thumb { background: rgba(10,15,26,0.22); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
body.vf-studio ::-webkit-scrollbar-thumb:hover { background-color: rgba(10,15,26,0.35); }
body.vf-studio.vf-admin-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20); border: 3px solid transparent; background-clip: padding-box; }
body.vf-studio.vf-admin-dark ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.32); }

/* Inner scrollers don't chain into the page (chat, calendar grid, peeks,
   dropdown panels stop at their own edge instead of scrolling the app). */
body.vf-studio .chat-list, body.vf-studio .tk-tg-scroll, body.vf-studio .tk-peek-overlay,
body.vf-studio .tk-cog-panel, body.vf-studio .studio-sidebar, body.vf-studio .msg-peek { overscroll-behavior: contain; }

/* Respect the OS reduced-motion setting across the entire Studio: freeze
   entrances, spinners and hover movement in one place. */
@media (prefers-reduced-motion: reduce) {
  body.vf-studio *, body.vf-studio *::before, body.vf-studio *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Messages: shared backgrounds, image lightbox, notification thread ────── */
/* Stock chat backgrounds — one shared setting for everyone (cog → Background).
   Subtle gradients that keep bubbles readable in light + dark. */
body.vf-studio .chat-bg-mist { background: linear-gradient(180deg, #f2f4f8 0%, #e7ebf2 100%); }
body.vf-studio .chat-bg-sky { background: linear-gradient(180deg, #e9f2fe 0%, #d7e7fb 100%); }
body.vf-studio .chat-bg-sunset { background: linear-gradient(180deg, #fef1e7 0%, #fbdfd2 60%, #f4d3e0 100%); }
body.vf-studio .chat-bg-meadow { background: linear-gradient(180deg, #ecf6ee 0%, #d9efdf 100%); }
body.vf-studio .chat-bg-lavender { background: linear-gradient(180deg, #f1eefb 0%, #e3ddf6 100%); }
body.vf-studio .chat-bg-night { background: linear-gradient(180deg, #131a2b 0%, #1b2438 100%); }
body.vf-studio.vf-admin-dark .chat-bg-mist { background: linear-gradient(180deg, #171c26 0%, #1c2230 100%); }
body.vf-studio.vf-admin-dark .chat-bg-sky { background: linear-gradient(180deg, #14203a 0%, #182848 100%); }
body.vf-studio.vf-admin-dark .chat-bg-sunset { background: linear-gradient(180deg, #2a1c18 0%, #331f26 100%); }
body.vf-studio.vf-admin-dark .chat-bg-meadow { background: linear-gradient(180deg, #14231a 0%, #182b20 100%); }
body.vf-studio.vf-admin-dark .chat-bg-lavender { background: linear-gradient(180deg, #201c33 0%, #262040 100%); }
/* On Night, greys need a lift so incoming bubbles + day pills stay readable. */
body.vf-studio:not(.vf-admin-dark) .chat-bg-night .chat-bubble { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
body.vf-studio:not(.vf-admin-dark) .chat-bg-night .chat-msg:not(.is-mine) .chat-bubble:not(.is-img) { background: #2a3345; color: #e8ecf4; }
body.vf-studio:not(.vf-admin-dark) .chat-bg-night .chat-name, body.vf-studio:not(.vf-admin-dark) .chat-bg-night .chat-day span { color: #aab4c8; background: rgba(255,255,255,0.08); }
/* Swatches in the cog */
body.vf-studio .chat-bg-shared { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--fg4); }
body.vf-studio .chat-bg-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
body.vf-studio .chat-bg-swatch { position: relative; height: 44px; border-radius: 9px; border: 1.5px solid var(--line); cursor: pointer; padding: 0; overflow: hidden; background: var(--bg); display: flex; align-items: flex-end; justify-content: center; }
body.vf-studio .chat-bg-swatch:hover { border-color: var(--line-strong); }
body.vf-studio .chat-bg-swatch.is-on { border-color: var(--vf-blue); box-shadow: 0 0 0 2px var(--accent-soft); }
body.vf-studio .chat-bg-swatch-name { font-size: 8.5px; font-weight: 700; color: var(--fg3); background: color-mix(in srgb, var(--bg-elev) 82%, transparent); border-radius: 5px; padding: 1px 5px; margin-bottom: 3px; pointer-events: none; }
body.vf-studio .chat-bg-swatch.chat-bg-night .chat-bg-swatch-name { color: #cfd6e4; background: rgba(0,0,0,0.35); }
/* Image lightbox — a clicked chat photo opens centred (no new tab). */
body.vf-studio .chat-imgbtn { display: block; border: 0; padding: 0; background: none; cursor: zoom-in; }
body.vf-studio .chat-lightbox { position: fixed; inset: 0; z-index: 220; background: rgba(8,12,22,0.78); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; animation: cal-magic-grow 140ms var(--ease-out); }
body.vf-studio .chat-lightbox-img { max-width: min(92vw, 1100px); max-height: 82vh; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,0.5); object-fit: contain; }
body.vf-studio .chat-lightbox-acts { display: flex; gap: 10px; }
body.vf-studio .chat-lightbox-act { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 8px 16px; background: rgba(255,255,255,0.14); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; backdrop-filter: blur(6px); }
body.vf-studio .chat-lightbox-act:hover { background: rgba(255,255,255,0.24); }
/* Notifications as a message-style thread */
body.vf-studio .chat-notifthread { padding-top: 14px; }
body.vf-studio .chat-msg-notif { max-width: 100%; width: 100%; }
body.vf-studio .chat-msg-notif .chat-col { width: 100%; max-width: 100%; }
body.vf-studio .chat-msg-notif .chat-bubblewrap { width: 100%; display: flex; align-items: center; gap: 8px; }
body.vf-studio .chat-bubble-notif { width: 100%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 0; cursor: pointer; font: inherit; }
body.vf-studio .chat-msg-notif.is-read .chat-bubble-notif { opacity: 0.72; }
body.vf-studio .chat-notif-title { font-size: 13.5px; font-weight: 700; color: var(--fg1); }
body.vf-studio .chat-notif-detail { font-size: 12.5px; color: var(--fg3); }
body.vf-studio .chat-notifdot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #8A93A3; align-self: center; }
body.vf-studio .chat-notifdot.tk-pill-purple { background: #7C4DE0; }
body.vf-studio .chat-notifdot.tk-pill-blue { background: #2F7FD8; }
body.vf-studio .chat-notifdot.tk-pill-green { background: #2FA25B; }
body.vf-studio .chat-notifdot.tk-pill-amber { background: #E07A2E; }
body.vf-studio .chat-notifdot.tk-pill-red { background: #C42038; }
body.vf-studio .chat-notif-unread { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vf-blue); }
body.vf-studio .tk-cog-notifact { display: block; width: 100%; text-align: left; padding: 6px 8px; border-radius: 7px; font-size: 13px; text-decoration: none; }
body.vf-studio .tk-cog-notifact:hover { background: var(--bg-tint); }
body.vf-studio .tk-cog-notifact:disabled { opacity: 0.45; cursor: default; }