/* Design A / Mist. Shared components and stage semantics; business logic stays in each app. */
body {
  --mist-draft:#5d7069; --mist-draft-bg:#eff3f1;
  --mist-active:#305db7; --mist-active-bg:#e8efff;
  --mist-review:#86570e; --mist-review-bg:#fff0d0;
  --mist-approved:#216c4f; --mist-approved-bg:#e0f2e7;
  --mist-scheduled:#0c6f7f; --mist-scheduled-bg:#ddf3f5;
  --mist-published:#6b4aa0; --mist-published-bg:#eee6fa;
  --mist-attention:#a54444; --mist-attention-bg:#fce9e5;
  --mist-radius-control:10px; --mist-radius-panel:14px; --mist-radius-dialog:24px;
  --mist-ease:cubic-bezier(.16,1,.3,1); --mist-duration:220ms;
  --mist-glass:color-mix(in srgb,var(--card) 78%,transparent);
  background-image:none; font-weight:400;
}
body.theme-dark {
  --mist-draft:#bacac3; --mist-draft-bg:#2b3932;
  --mist-active:#b6ceff; --mist-active-bg:#233750;
  --mist-review:#f2d391; --mist-review-bg:#493c20;
  --mist-approved:#b1e7c8; --mist-approved-bg:#244335;
  --mist-scheduled:#a7e2eb; --mist-scheduled-bg:#21424a;
  --mist-published:#d8c2f6; --mist-published-bg:#3e3153;
  --mist-attention:#ffc5bb; --mist-attention-bg:#4b2d2a;
}
body::before,body::after { display:none; }
body :is(button,input,select,textarea) { font-family:var(--vk-sans); }
body :is(h1,h2,h3,h4) { font-family:var(--vk-sans); letter-spacing:-.025em; }
body :is(.btn,.cw-button,.ov-button,.sp-button,.dm-button,.em-button) { border-radius:var(--mist-radius-control)!important; font-weight:600; transition:background-color var(--mist-duration) var(--mist-ease),border-color var(--mist-duration) var(--mist-ease); }
body :is(.input,.cw-field input,.cw-field select,.cw-field textarea,.sp-field input,.sp-field select,.sp-field textarea,.em-field input,.em-field select,.em-field textarea) { border-radius:var(--mist-radius-control)!important; background:var(--input-bg); color:var(--text); }
body :is(input,select,textarea)[aria-invalid=true] { border-color:var(--mist-attention)!important; }
body .btn:disabled,body button:disabled { opacity:.5; }
body a { text-underline-offset:3px; }
body .app-shell,body.app-shell { --workspace-rail-text:var(--text); --workspace-rail-muted:var(--muted); }
body.app-shell .dashboard-sidebar { border-right:1px solid var(--line)!important; }
body.app-shell .dashboard-identity { background:var(--mist-glass); border-color:var(--line); border-radius:14px; }
body.app-shell .dashboard-identity-avatar { color:var(--accent-strong); }
body.app-shell .workspace-nav-group[data-current-group]>.workspace-nav-label { color:var(--text); }
body.app-shell .dashboard-sidebar .workspace-nav a[data-tone=premium] { color:var(--accent-strong); }
body.app-shell .dashboard-sidebar .workspace-nav a[aria-current=page] { background:var(--surface-2); color:var(--text); }
body.app-shell .dashboard-sidebar .workspace-nav a:hover { background:var(--surface-1); color:var(--text); }
body.app-shell .dashboard-topbar { background:var(--mist-glass)!important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
body.app-shell .dashboard-quickfind { border-radius:10px; background:var(--mist-glass); }
body.app-shell .dashboard-brand .mist-logo-dark { display:none; }
body.theme-dark.app-shell .dashboard-brand .mist-logo-dark { display:block; }
body.theme-dark.app-shell .dashboard-brand .mist-logo-light { display:none; }
body.app-shell :is(.workspace-content-navigation,.record-toolbar) { border-color:var(--line); }
body.app-shell :is(.cw-panel,.sp-sheet,.em-panel,.dm-panel,.af-panel,.connections-panel) { border-radius:var(--mist-radius-panel); }
body.app-shell .ov { --ov-teal:var(--accent); }
body.app-shell :is(.ov-priority,.ov-panel) { border-radius:var(--mist-radius-panel); }
body.app-shell .ov-priority { background:var(--card); color:var(--text); border:1px solid var(--line); }
body.app-shell .ov-priority :is(h2,p,strong) { color:var(--text); }
body.app-shell .ov-priority .ov-priority-icon { color:var(--accent); background:var(--surface-2); }
body.app-shell :is(.cw-status,.ov-stage,.sp-status,.em-status,.mist-status) { display:inline-flex; align-items:center; gap:6px; width:fit-content; border:0; border-radius:6px; padding:4px 8px; font-size:12px; font-weight:600; line-height:1.4; white-space:normal; }
[data-vk-stage=draft],.sp-status:is([data-status=draft],[data-status=cancelled]),.em-status:is([data-state=draft],[data-state=unsubscribed]) { --stage-ink:var(--mist-draft); --stage-bg:var(--mist-draft-bg); }
[data-vk-stage=active],.sp-status[data-status=publishing],.em-status[data-state=sending] { --stage-ink:var(--mist-active); --stage-bg:var(--mist-active-bg); }
[data-vk-stage=review],.sp-status[data-status=needs_review],.em-status[data-state=pending] { --stage-ink:var(--mist-review); --stage-bg:var(--mist-review-bg); }
[data-vk-stage=approved],.em-status:is([data-state=subscribed],[data-state=ready]) { --stage-ink:var(--mist-approved); --stage-bg:var(--mist-approved-bg); }
[data-vk-stage=scheduled],.sp-status[data-status=scheduled],.em-status[data-state=scheduled] { --stage-ink:var(--mist-scheduled); --stage-bg:var(--mist-scheduled-bg); }
[data-vk-stage=published],.sp-status[data-status=published],.em-status[data-state=sent] { --stage-ink:var(--mist-published); --stage-bg:var(--mist-published-bg); }
[data-vk-stage=attention],.sp-status:is([data-status=failed],[data-status=blocked],[data-status=partial]),.em-status:is([data-state=failed],[data-state=blocked]) { --stage-ink:var(--mist-attention); --stage-bg:var(--mist-attention-bg); }
body.app-shell :is(.cw-status,.ov-stage,.sp-status,.em-status,.mist-status)[data-vk-stage],body.app-shell :is(.sp-status,.em-status) { color:var(--stage-ink,var(--mist-draft)); background:var(--stage-bg,var(--mist-draft-bg)); border:0; }
body.app-shell .cw-timeline-step[data-state=current] .cw-step-marker { background:var(--mist-active-bg); color:var(--mist-active); border-color:var(--mist-active); }
body.app-shell .cw-timeline-step[data-state=done] .cw-step-marker { background:var(--mist-approved-bg); color:var(--mist-approved); border-color:transparent; }
body.app-shell .cw-due[data-tone=overdue],body.app-shell .ov-work-date[data-tone=danger] { color:var(--mist-attention); }
/* Focused overlays share the same frame; existing open/close and unsaved work behavior is retained. */
body.app-shell :is(dialog,.workspace-notifications,.dashboard-quickfind-results) { border-radius:var(--mist-radius-dialog); background:var(--card); color:var(--text); box-shadow:0 24px 80px -24px rgb(24 43 36 / .32); }
body.app-shell dialog { max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); }
body.app-shell dialog::backdrop { background:rgb(28 48 40 / .24); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
body.app-shell .workspace-notifications { border-radius:14px; }
body.app-shell :is(table,.record-facts,.ov-metrics) { font-variant-numeric:tabular-nums; }
body.app-shell :is(table thead,.wt-table thead) { background:var(--card-highlight); }
@media (max-width:1023px) {
  body.app-shell .dashboard-sidebar { border-right:0!important; border-bottom:1px solid var(--line)!important; }
  body.app-shell .workspace-mobile-menu-toggle { background:var(--surface-2)!important; color:var(--text)!important; border-color:var(--line)!important; }
  body.app-shell .workspace-mobile-menu-toggle strong { color:var(--text); }
  body.app-shell .workspace-mobile-menu-toggle small,body.app-shell .workspace-mobile-menu-toggle::after { color:var(--muted); }
}
@media (max-width:720px) {
  body.app-shell dialog { max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:20px; }
  body.app-shell :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size:16px!important; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  body *,body *::before,body *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
@media (prefers-reduced-transparency:reduce) {
  body { --mist-glass:var(--card); }
  body.app-shell .dashboard-topbar,body.app-shell dialog::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; }
  body.app-shell dialog::backdrop { background:rgb(28 48 40 / .5); }
}
@supports not (backdrop-filter:blur(1px)) { body { --mist-glass:var(--card); } }
body.app-shell .dashboard-sidebar,body.app-shell .dashboard-identity .workspace-account-name { color:var(--text); }
body.app-shell .dashboard-sidebar .workspace-session-nav a { color:var(--muted); }
body.app-shell .dashboard-sidebar .workspace-session-nav a:hover { color:var(--text); background:var(--surface-1); }
body.app-shell .workspace-sidebar-toggle { background:var(--card); color:var(--muted); border-color:var(--line); }

body.app-shell .ov-priority-timing { color:var(--mist-attention); }
body.app-shell .ov-priority .ov-button { background:var(--surface-1); color:var(--text); }
body.app-shell .dashboard-sidebar { transition:none; }
/* Contract and automation state vocabulary uses the same palette without changing its labels. */
body.app-shell :is(.dm-status,.cs-badge) { border:0; border-radius:6px; font-size:12px; font-weight:600; padding:4px 8px; color:var(--stage-ink,var(--mist-draft)); background:var(--stage-bg,var(--mist-draft-bg)); }
.dm-status-active { --stage-ink:var(--mist-active); --stage-bg:var(--mist-active-bg); }
.dm-status-paused,.cs-badge:is([data-status=sent],[data-status=partially_signed]) { --stage-ink:var(--mist-review); --stage-bg:var(--mist-review-bg); }
.cs-badge[data-status=signed] { --stage-ink:var(--mist-approved); --stage-bg:var(--mist-approved-bg); }
.cs-badge:is([data-status=declined],[data-status=expired]) { --stage-ink:var(--mist-attention); --stage-bg:var(--mist-attention-bg); }
.mist-avatar { display:inline-grid; place-items:center; flex:none; background:var(--surface-2); color:var(--accent-strong); font:600 16px/1 var(--vk-sans); }
/* The workspace frame uses the canvas; white is reserved for task surfaces. */
@media (min-width:1024px) {
  body.app-shell .dashboard-shell { gap:12px; padding:12px; }
  body.app-shell .dashboard-sidebar { top:12px; height:calc(100dvh - 24px); border:0!important; border-radius:24px; background:var(--mist-glass)!important; }
  body.app-shell .dashboard-main { border-radius:24px; background:var(--bg)!important; min-height:calc(100dvh - 24px); }
  body.app-shell .dashboard-topbar { border-radius:24px 24px 0 0; }
  body.app-shell .workspace-tool-intro { background:var(--card-highlight); }
}
body.app-shell .workspace-content :is(.cw-focus-record,.sp-sheet,.em-panel,.dm-campaigns) { border-color:var(--line); }

/* Workspace hierarchy: canvas → task panel → inset controls. */
body.app-shell {
  --mist-panel-border:#d5e0da;
  --mist-inset:#f0f5f2;
  --mist-tab-track:#dfe9e3;
  --mist-panel-shadow:0 2px 5px rgb(32 57 44 / .035),0 10px 24px -18px rgb(32 57 44 / .18);
  --mist-selected-shadow:0 1px 3px rgb(32 57 44 / .12);
  --mist-space-section:24px;
  --mist-space-panel:24px;
}
body.theme-dark.app-shell {
  --mist-panel-border:#3b5045;
  --mist-inset:#24372e;
  --mist-tab-track:#18271f;
  --mist-panel-shadow:0 2px 5px rgb(0 0 0 / .12),0 10px 24px -18px rgb(0 0 0 / .4);
  --mist-selected-shadow:0 1px 3px rgb(0 0 0 / .24);
}
body.app-shell .workspace-page { background:var(--bg); border-radius:0 0 24px 24px; }
body.app-shell .workspace-page [data-workspace-heading] {
  margin:0 0 var(--mist-space-section); padding:0; min-height:0;
}
body.app-shell .workspace-page h1 {
  color:var(--text); font-size:30px!important; font-weight:600!important;
  line-height:1.25!important; letter-spacing:-.025em!important;
}
body.app-shell .workspace-page [data-workspace-heading] h1 { margin:0!important; }
body.app-shell .workspace-page [data-workspace-heading] p {
  color:var(--muted); font-size:14px; line-height:1.6; margin-top:8px; max-width:72ch;
}
body.app-shell .workspace-section-navigation { margin:0 0 var(--mist-space-section); min-width:0; }
body.app-shell .workspace-tool-intro {
  background:var(--mist-inset); border:1px solid var(--mist-panel-border);
  border-radius:var(--mist-radius-control); margin:0 0 var(--mist-space-section);
}
/* Same section-tab treatment; calendar view selectors remain compact controls. */
body.app-shell :is(.as-nav,.em-tabs,.dm-tabs,.dm-inbox-nav,.af-nav,.ao-tabs,.cs-tabs,.vk-line-tabs),
body.app-shell .crm-view-nav>nav,
body.app-shell .dashboard-tabs:not(.crm-view-nav) {
  display:flex; align-items:center; gap:4px; padding:6px;
  background:var(--mist-tab-track); border:0; border-radius:12px;
  flex-wrap:wrap; margin:0 0 var(--mist-space-section); min-width:0;
}
body.app-shell .workspace-section-navigation :is(.as-nav,.dashboard-tabs,.crm-view-nav>nav) { margin-bottom:0; }
body.app-shell :is(.as-nav,.em-tabs,.dm-tabs,.dm-inbox-nav,.af-nav,.ao-tabs,.cs-tabs,.vk-line-tabs)>a,
body.app-shell .crm-view-nav>nav>a,
body.app-shell .dashboard-tabs:not(.crm-view-nav)>a {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:10px 14px; margin:0; border:0; border-radius:8px;
  background:transparent; color:var(--muted); font-size:13px; line-height:1.4;
  font-weight:600; text-decoration:none; white-space:nowrap;
}
body.app-shell :is(.as-nav,.em-tabs,.dm-tabs,.dm-inbox-nav,.af-nav,.ao-tabs,.cs-tabs,.vk-line-tabs)>a[aria-current],
body.app-shell .crm-view-nav>nav>a[aria-current],
body.app-shell .dashboard-tabs:not(.crm-view-nav)>a[aria-current] {
  background:var(--card); color:var(--accent-strong); box-shadow:var(--mist-selected-shadow);
}
body.app-shell :is(.as-nav,.em-tabs,.dm-tabs,.dm-inbox-nav,.af-nav,.ao-tabs,.cs-tabs,.vk-line-tabs)>a:hover,
body.app-shell .crm-view-nav>nav>a:hover {
  color:var(--text); background:color-mix(in srgb,var(--card) 65%,transparent);
}
body.app-shell .crm-view-nav { margin:0; border:0; padding:0; }
body.app-shell .crm-primary-controls { margin-top:0; margin-bottom:var(--mist-space-section); align-items:flex-start; }
body.app-shell .crm-primary-controls .crm-view-nav { flex:1; }
body.app-shell .crm-primary-controls .crm-view-nav>nav { margin:0; }
body.app-shell .crm-more-views>summary { min-height:44px; padding:10px 14px; border:0; border-radius:8px; }
/* Panels own tasks; wrapper sheets and nested form groups stay flat. */
body.app-shell .workspace-content :is(.card,.admin-panel,.dashboard-panel,.ov-panel,.ov-priority,.as-group,.sa-card,.connections-panel,.cw-sheet,.cw-focus-record,.sp-sheet,.em-sheet,.em-panel,.dm-panel,.dm-campaigns,.af-panel,.cs-panel,.wf-section,.wf-workspace,.ad-panel,.ao-panel,.record-surface) {
  background:var(--card); border:1px solid var(--mist-panel-border);
  border-radius:var(--mist-radius-panel)!important; box-shadow:var(--mist-panel-shadow)!important;
}
body.app-shell .workspace-content :is(.card,.as-group,.cw-sheet,.em-sheet,.wf-section,.cs-panel) :is(.card,.as-group,.cw-sheet,.em-sheet,.wf-section,.cs-panel) {
  box-shadow:none!important;
}
body.app-shell :is(.as-group>header,.sa-card-header,.sa-toolbar,.em-sheet-heading,.cs-panel>header,.record-toolbar) {
  border-color:var(--mist-panel-border);
}
body.app-shell .as-group>header { background:var(--mist-inset); padding:20px var(--mist-space-panel); }
body.app-shell .as-summary { background:var(--surface-2); border:1px solid var(--mist-panel-border); }
body.app-shell .as-guidance { padding:0 4px; }
body.app-shell .vk-line-billing-profile>.as-saved,
body.app-shell .wf-root>.as-saved {
  padding:var(--mist-space-panel); background:var(--card);
  border:1px solid var(--mist-panel-border); border-radius:var(--mist-radius-panel);
  box-shadow:var(--mist-panel-shadow);
}
body.app-shell :is(.as-editor>summary,.as-edit-button,.record-edit,.record-disclosure>summary) { border-radius:var(--mist-radius-control); }
body.app-shell :is(.as-facts,.record-facts) { margin-block:16px 0; }
body.app-shell :is(.as-facts,.record-facts)>div { border-color:var(--line); }
body.app-shell .ov-metrics {
  padding:20px 0; background:var(--mist-inset); border:1px solid var(--mist-panel-border);
  border-radius:var(--mist-radius-panel); margin-bottom:24px!important;
}
body.app-shell .ov-metrics>div:first-child { padding-left:24px; }
body.app-shell .workspace-content .ov-priority { background:var(--surface-2); }
body.app-shell .ov-priority .ov-button { background:var(--card); }
body.app-shell .ov-register-head {
  background:var(--mist-inset); border:0; border-radius:8px; padding:12px;
}
body.app-shell .ov-register>li>.ov-work-row { padding-inline:12px; }
body.app-shell .ov-deadlines footer { margin-top:16px; }
body.app-shell .ov-deadlines ol { flex:0; }
body.app-shell .workspace-content :is(table thead,table thead tr,table thead th) { background:var(--mist-inset); border-color:var(--mist-panel-border); }
body.app-shell .workspace-content table { background:var(--card); }
body.app-shell .workspace-content :is(table tbody tr:hover,.wt-record-row:hover) { background:var(--surface-1); }
body.app-shell .workspace-content :is(table td,table th) { padding-block:14px; }
body.app-shell :is(.record-table-controls,.wt-controls,.sp-filters,.em-filter-bar) {
  background:var(--mist-inset); border-color:var(--mist-panel-border); border-radius:10px;
}
@media(max-width:720px) {
  body.app-shell { --mist-space-section:20px; --mist-space-panel:20px; }
  body.app-shell .workspace-page h1 { font-size:25px!important; }
  body.app-shell :is(.as-nav,.em-tabs,.dm-tabs,.dm-inbox-nav,.af-nav,.ao-tabs,.cs-tabs,.vk-line-tabs),
  body.app-shell .dashboard-tabs:not(.crm-view-nav) {
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; scroll-padding:6px;
  }
  body.app-shell :is(.as-nav,.em-tabs,.dm-tabs,.dm-inbox-nav,.af-nav,.ao-tabs,.cs-tabs,.vk-line-tabs)>a { flex:none; }
  body.app-shell .ov-metrics>div:first-child { padding-left:16px; }
  body.app-shell .ov-metrics>div { padding-inline:16px; }
  body.app-shell .ov-register>li>.ov-work-row { padding-inline:0; }
}

body.app-shell .as-section-heading h2 { font-size:18px; font-weight:600; line-height:1.4; margin:0; }

/* Primary headings and status actions wrap as one unit on small screens. */
@media(max-width:720px) {
  body.app-shell .workspace-page .vk-line-header[data-workspace-heading] { flex-wrap:wrap; }
  body.app-shell .workspace-page .vk-line-header[data-workspace-heading]>span { white-space:nowrap; flex:none; }
}
body.app-shell .workspace-content :is(.card>h2,.em-sheet>h2,.ao-panel>h2,.wf-section>h2,.cs-heading h2) { font-size:18px!important; font-weight:600; line-height:1.4; }
body.app-shell .workspace-page .crm-view-nav { border-bottom:0!important; }
body.app-shell .af-search>.af-field:first-child { grid-column:1/-1; }
body.app-shell :is(.af-button,.connections-jump a) { border-radius:var(--mist-radius-control); }
body.app-shell :is(select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color])) { border-radius:var(--mist-radius-control)!important; }
body.theme-dark.app-shell :is(.as-nav,.em-tabs,.dm-tabs,.dm-inbox-nav,.af-nav,.ao-tabs,.cs-tabs,.vk-line-tabs)>a[aria-current],
body.theme-dark.app-shell .crm-view-nav>nav>a[aria-current] { background:var(--surface-2); }
/* Restricted client workspaces retain their permission-specific shell. */
body:has(.wf-standalone) { --mist-panel-border:var(--line); --mist-inset:var(--surface-1); }
body .wf-standalone>h1 { font-size:30px; font-weight:600; line-height:1.25; letter-spacing:-.025em; margin:24px 0 8px; }
body .wf-standalone>.wf-lead { font-size:14px; line-height:1.6; margin-bottom:24px; }
body .wf-standalone :is(.wf-section,.wf-workspace,.ad-panel,.af-panel,.ao-panel) { border-radius:var(--mist-radius-panel); background:var(--card); }
body .wf-standalone table thead { background:var(--mist-inset); }
@media(max-width:720px) { body .wf-standalone>h1 { font-size:25px; } }
body.app-shell .record-toolbar>header { margin:0; padding:0; }
body.app-shell .workspace-content .vk-line-order,
body.app-shell .workspace-content .vk-line-order>[data-workspace-heading] { background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; }
body.app-shell .vk-roadbook-shell { padding:20px; border:1px solid var(--mist-panel-border); border-radius:var(--mist-radius-panel); background:var(--mist-inset); }
body.app-shell .vk-roadbook-heading { border:0; margin-bottom:12px; }
body.app-shell .vk-roadbook-rail { border:1px solid var(--mist-panel-border); border-radius:10px; overflow:hidden; }
body.app-shell .vk-roadbook-leg { border-color:var(--mist-panel-border); background:var(--card); }
body.app-shell .vk-roadbook-leg.is-current { background:var(--mist-active-bg); color:var(--mist-active); }
body.app-shell .vk-roadbook-leg.is-done { background:var(--mist-approved-bg); color:var(--mist-approved); }
body.app-shell .vk-roadbook-copy small { font-family:var(--vk-sans); color:inherit; }
body.app-shell .vk-roadbook-summary { border:0; padding-top:12px; }