/* Command Center - desk layout.
   Layout, spacing, density and neutral colors follow the team's Zoho Desk session (see design/REFERENCE.md).
   Substitutions: icons = Lucide (ISC), accent = Command Center gold, own logo/name. Text uses the system font.
   All shared values live in the token block below. Screens use the tokens; do not add raw colors or px spacing. */

/* ================================================================ tokens */
:root {
  color-scheme: light;

  /* top bar (dark in both themes) */
  --top: #241e13; --top-glass: rgb(36 30 19 / .88); --top-hover: rgb(255 255 255 / .08); --top-press: rgb(255 255 255 / .16);
  --top-chip: #3a3427; --top-chip-line: #4a4334; --on-top: #f3efe8; --on-top-muted: #d9d4cc; --on-top-line: #6b6357;
  --on-strong: #fff; --logo-disc: #fff; --online: #2fb36a;

  /* surfaces and lines (observed neutrals) */
  --canvas: #f2f0ee; --soft: #f9f7f6; --panel: #fff; --hover: #efebe8; --press: #e8e3df; --row-hover: #fbfaf9;
  --stripe: #f7f3ee; --weekend: #f4f2ef; --past: #fcfbfa;
  --line: #f2ece8; --line-2: #e2ddda; --line-3: #cfc8c3; --dot: #d1cbc6;
  --ink: #000; --ink-2: #1f1f1f; --muted: #5a616f; --faint: #9aa0aa; --icon: #3b3f46;
  --pin-bg: #fdf5ef; --pin-line: #f7d6b9; --pin-tab: #fbe6d4;
  --note-bg: #fefcf3; --note-line: #f8eaae; --note-tag: #c9971c; --note-tag-line: #f3dc9c;
  --pick-bg: #f6f8fb; --avatar-line: #c8cbdc; --link: #1366d6; --msg-out: #e6f0fc; --chart-soft: #dfe7f3; --sb-bg: #edf1f7;

  /* accent (substituted for Desk's brand orange) */
  --accent: #f5b428; --accent-hover: #eaa816; --accent-ink: #241e13; --accent-strong: #b8800d; --accent-text: #7a5300; --accent-soft: #fff6df;

  /* states */
  --good: #18794e; --good-bg: #e7f6ee; --good-soft: #f6fbf8; --good-line: #bfe5cf;
  --warn: #9a5b00; --warn-bg: #fff3dc;
  --bad: #c4321c; --bad-bg: #fdeceb; --bad-line: #f3c2bc; --bad-strong: #c4321c; --warn-strong: #9a5b00;
  --flag-bg: #ffe7b3; --flag-ink: #6b4400;
  --prio-high: #e5482d; --prio-med: #f08a24; --prio-low: #6a8f3c;
  --st-default: #8a94a6; --st-progress: #d97706; --st-done: #94a3b8;
  --blue: #2b6cb0; --violet: #7c3aed; --teal: #0f766e;
  --focus: #1366d6; --focus-ring: rgb(19 102 214 / .25); --focus-on-dark: #9cc3ff;
  --tip-bg: #000; --tip-ink: #fff;

  /* depth */
  --scrim: rgb(20 16 10 / .42);
  --fade: rgb(36 30 19 / .07);
  --sh-1: 0 1px 1px rgb(0 0 0 / .04);
  --sh-hover: 0 1px 4px rgb(0 0 0 / .08);
  --sh-pop: 0 0 0 1px rgb(0 0 0 / .05), 0 4px 12px rgb(0 0 0 / .08), 0 12px 32px rgb(0 0 0 / .10);
  --sh-float: 0 4px 14px rgb(0 0 0 / .22);
  --sh-modal: 0 0 0 1px rgb(0 0 0 / .05), 0 16px 48px rgb(0 0 0 / .24);
  --sh-sheet: -8px 0 24px rgb(0 0 0 / .07);

  /* type (rem, so it scales with the browser text size) */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, Consolas, "SFMono-Regular", Menlo, monospace;
  --fs-2xs: .625rem; --fs-xs: .6875rem; --fs-sm: .75rem; --fs-base: .8125rem; --fs-md: .875rem; --fs-lg: .9375rem;
  --fs-xl: 1rem; --fs-h3: 1.125rem; --fs-h2: 1.25rem; --fs-h1: 1.5rem; --fs-display: 1.875rem;
  --lh-body: 1.5; --lh-tight: 1.25; --lh-head: 1.2; --track-head: -.02em; --track-caps: .05em;

  /* spacing scale (4px base, in rem) - use only these */
  --sp-half: .125rem; --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem;

  /* control sizes */
  --ctl-sm: 1.5rem; --ctl: 1.75rem; --ctl-md: 1.875rem; --ctl-touch: 2.75rem; --topbar-h: 3rem;

  /* radii */
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-pill: 999px; --radius: var(--r-sm);

  /* motion (read by web/motion.js) */
  --spring-response: .34; --spring-bounce: 0; --fade-ms: 150;
  --press-scale: .97; --press-ms: 100ms; --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* layers */
  --z-sticky: 2; --z-raised: 20; --z-sheet: 30; --z-topbar: 40; --z-panel: 50; --z-pop: 60; --z-tip: 70; --z-modal: 80; --z-undo: 85; --z-toast: 90;

  --vh: 100vh;
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }

/* dark theme: kept for later, off unless <html data-theme="dark"> is set (nothing sets it). E asked for the Desk-style light look. */
:root[data-theme="dark"] {
  & {
    --top: #0f0d0a; --top-glass: rgb(15 13 10 / .86); --top-chip: #26221b; --top-chip-line: #3a342a;
    --canvas: #121110; --soft: #1a1917; --panel: #201e1b; --hover: #2a2723; --press: #322e29; --row-hover: #242220;
    --stripe: #26231f; --weekend: #1d1b19; --past: #1c1a18;
    --line: #2c2925; --line-2: #3a3631; --line-3: #4d4740; --dot: #5a534a;
    --ink: #f1eee9; --ink-2: #e4e0da; --muted: #aaa49c; --faint: #7d776f; --icon: #c9c4bc;
    --pin-bg: #2a2119; --pin-line: #5a4129; --pin-tab: #3a2b1d;
    --note-bg: #26231a; --note-line: #4d4426; --note-tag: #e2b84d; --note-tag-line: #6a5a2b;
    --pick-bg: #23262c; --avatar-line: #4a4e5e; --link: #7cb2ff; --msg-out: #1d2b40; --chart-soft: #2c3646;
    --accent-hover: #ffc443; --accent-strong: #e2a52c; --accent-text: #f5c75a; --accent-soft: #352a15;
    --good: #55c792; --good-bg: #16301f; --good-soft: #182520; --good-line: #2c5a3e;
    --warn: #eaa94b; --warn-bg: #33270f;
    --bad: #ff8270; --bad-bg: #3a1b16; --bad-line: #6b2c22; --bad-strong: #c93a24; --warn-strong: #94600f;
    --flag-bg: #4a3812; --flag-ink: #ffd37c;
    --st-default: #8d97a8; --st-done: #6f7b8c;
    --blue: #6aa6e8; --violet: #a78bfa; --teal: #3fb8a9;
    --focus: #7cb2ff; --focus-ring: rgb(124 178 255 / .3);
    --tip-bg: #f1eee9; --tip-ink: #121110;
    --scrim: rgb(0 0 0 / .55); --fade: rgb(0 0 0 / .28);
    --sh-1: 0 1px 1px rgb(0 0 0 / .3);
    --sh-hover: 0 1px 4px rgb(0 0 0 / .4);
    --sh-pop: 0 0 0 1px rgb(255 255 255 / .06), 0 4px 12px rgb(0 0 0 / .35), 0 12px 32px rgb(0 0 0 / .4);
    --sh-float: 0 4px 14px rgb(0 0 0 / .5);
    --sh-modal: 0 0 0 1px rgb(255 255 255 / .06), 0 16px 48px rgb(0 0 0 / .6);
    --sh-sheet: -8px 0 24px rgb(0 0 0 / .35);
  }
}

/* ================================================================ base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; background: var(--canvas); color: var(--ink); font: var(--fs-base)/var(--lh-body) var(--font); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: var(--lh-head); letter-spacing: var(--track-head); }
h1 { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 var(--sp-3); }
h2 { font-weight: 600; }
h3 { font-size: var(--fs-xl); font-weight: 600; margin: 0 0 var(--sp-3); letter-spacing: -.01em; }
h4 { font-size: var(--fs-base); font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); color: var(--muted); letter-spacing: 0; }
p { margin: 0 0 var(--sp-3); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input, select, textarea { font: inherit; font-size: var(--fs-base); color: var(--ink); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); width: 100%; min-height: var(--ctl-md); }
input:hover, select:hover, textarea:hover { border-color: var(--line-3); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid=true] { border-color: var(--bad); }
input:user-invalid:focus, textarea:user-invalid:focus, [aria-invalid=true]:focus { box-shadow: 0 0 0 3px var(--bad-bg); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent-strong); }
textarea { resize: vertical; }
::placeholder { color: var(--faint); }
.ico { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); } .small { font-size: var(--fs-sm); } .bad { color: var(--bad); }
.sep-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--dot); margin: 0 var(--sp-2); vertical-align: middle; }
button, a, [role=button], summary, label { -webkit-tap-highlight-color: transparent; }
button, [role=button], summary { touch-action: manipulation; }

/* ================================================================ press feedback
   Reacts on press (not release): quick scale for compact controls, background change for wide rows.
   Only transform is transitioned. */
.btn, .ibtn, .tab, .tb-icon, .tb-apps, .tb-new button, .tb-avatar, .tb-persp, .tb-link, .seg button, .est-pill, .chip, .link, .linkbtn, .icon-btn,
.dx-card, .dx-flag, .dx-daybtn, .bp-step, .dx-tabs a, .tk-rail button, .tk-foot .act, .pf-folders button, .phase-count, .vw-star, .md-steps .btn {
  transition: transform var(--press-ms) var(--ease-out);
}
.btn:active:not(:disabled), .ibtn:active:not(:disabled), .tb-icon:active, .tb-apps:active, .tb-new button:active, .tb-avatar:active, .tb-persp:active,
.seg button:active, .est-pill:active, .link:active, .linkbtn:active, .icon-btn:active, .dx-card:active, .dx-flag:active, .tk-rail button:active,
.tk-foot .act:active, .vw-star:active, .phase-count:active { transform: scale(var(--press-scale)); }
.tab:active, .dx-tabs a:active, .bp-step:active:not(:disabled), .pf-folders button:active { transform: scale(var(--press-scale)); }
.menu button:active, .menu a:active, .picker-list button:active, .lv-row:active, .md-row:active, .chat-item:active, .vrail li a:active, .vrail li button:active,
.est-catlist button:active, .plan-cell:active:not(:disabled), .board-card:active, .vw-card:active, .db-bar:active, .tk-listrail:active { background: var(--press); }
.dx-q:active { background: var(--row-hover); }
.tb-link:active, .tb-icon:active, .tb-apps:active { background: var(--top-press); }

/* ================================================================ top bar (48px, observed)
   Slightly see-through with blur; pages that scroll do so underneath it. */
.shell { display: grid; grid-template-rows: var(--topbar-h) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); height: var(--vh); position: relative; }
.topbar { grid-row: 1; grid-column: 1; background: var(--top-glass); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); color: var(--on-strong); display: flex; align-items: stretch; height: var(--topbar-h); position: relative; z-index: var(--z-topbar); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--sp-3); background: linear-gradient(var(--fade), transparent); pointer-events: none; }
.topbar :focus-visible { outline-color: var(--focus-on-dark); }
.tb-apps { width: var(--topbar-h); display: grid; place-items: center; background: var(--top-chip); color: var(--on-top-muted); }
.tb-logo { width: 44px; display: grid; place-items: center; color: var(--accent); }
.tb-logo .ico { width: 24px; height: 24px; } .tb-logo img { display: block; width: 30px; height: 30px; object-fit: contain; background: var(--logo-disc); border-radius: 50%; padding: var(--sp-half); }
.brand.big img { width: 34px; height: 34px; object-fit: contain; }
.tb-nav { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding-left: var(--sp-2); }
.tb-nav::-webkit-scrollbar { display: none; }
.tb-link { color: var(--on-strong); font-size: var(--fs-lg); display: flex; align-items: center; padding: 0 var(--sp-3); white-space: nowrap; position: relative; }
.tb-link:hover { background: var(--top-hover); text-decoration: none; }
.tb-link.active::after { content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-2); height: 2px; background: var(--on-strong); border-radius: var(--r-xs); }
.tb-link:focus-visible { outline-offset: -4px; }
.tb-right { display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-3) 0 var(--sp-2); flex: none; }
.tb-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--on-strong); background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; position: relative; }
.tb-icon:hover { background: var(--top-hover); text-decoration: none; }
.tb-icon .ico { width: 18px; height: 18px; }
.tb-new { display: flex; height: 32px; margin-right: var(--sp-2); }
.tb-new button { background: var(--accent); color: var(--accent-ink); border: 0; cursor: pointer; display: grid; place-items: center; }
.tb-new button:hover { background: var(--accent-hover); }
.tb-new button:first-child { width: 34px; border-radius: var(--r-sm) 0 0 var(--r-sm); } .tb-new button:last-child { width: 22px; border-radius: 0 var(--r-sm) var(--r-sm) 0; border-left: 1px solid rgb(0 0 0 / .15); }
.tb-new .ico { width: 16px; height: 16px; stroke-width: 2.25; }
.tb-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--on-top-line); display: grid; place-items: center; font-size: var(--fs-sm); color: var(--on-strong); background: none; cursor: pointer; margin-left: var(--sp-2); position: relative; }
.tb-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--online); border: 2px solid var(--top); }
.tb-search { position: absolute; right: 120px; top: calc(var(--topbar-h) + var(--sp-1)); width: 380px; background: var(--panel); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-pop); padding: var(--sp-2); transform-origin: 85% 0; }
.menu-head b { color: var(--ink) !important; }
/* Pages scroll under the bar; fixed-height pages (ticket, list, dispatch) start just below it. */
.main { grid-row: 1 / -1; grid-column: 1; overflow: auto; min-width: 0; min-height: 0; padding: calc(var(--topbar-h) + var(--sp-4)) var(--sp-5) var(--sp-4); scroll-padding-top: calc(var(--topbar-h) + var(--sp-2)); }
.main.flush { padding: var(--topbar-h) 0 0; overflow: hidden; display: flex; flex-direction: column; }
.main.flush > .tk, .main.flush > .lv, .main.flush > .dx { flex: 1; min-height: 0; height: auto; }
.review-banner { background: var(--warn-bg); color: var(--flag-ink); font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-4); flex: none; box-shadow: inset 0 -1px 0 var(--note-tag-line); }
.main:not(.flush) .review-banner { margin: calc(var(--sp-4) * -1) calc(var(--sp-5) * -1) var(--sp-4); }

/* ================================================================ menus + tooltips (observed: white menu, 35px rows; black tooltip) */
.menu { position: absolute; z-index: var(--z-pop); background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--sh-pop); padding: var(--sp-1) 0; min-width: 210px; max-width: calc(100vw - var(--sp-4)); max-height: calc(var(--vh) - var(--topbar-h) - var(--sp-4)); overflow-y: auto; overscroll-behavior: contain; color: var(--ink); }
.menu button, .menu a { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 35px; padding: 0 var(--sp-4); background: none; border: 0; font: inherit; font-size: var(--fs-base); color: var(--ink); cursor: pointer; text-align: left; white-space: nowrap; }
.menu button:hover, .menu a:hover { background: var(--soft); text-decoration: none; }
.menu button:focus-visible, .menu a:focus-visible { outline-offset: -2px; background: var(--soft); }
.menu .kbd { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); }
.menu .ico { color: var(--icon); }
.menu-sep { height: 1px; background: var(--line); margin: var(--sp-1) 0; }
.menu-head { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-tight); }
[data-tip] { position: relative; }
@media (hover: hover) {
  [data-tip]:hover::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--tip-bg); color: var(--tip-ink); font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-tight); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); white-space: nowrap; z-index: var(--z-tip); pointer-events: none; }
}

/* ================================================================ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--ctl); padding: 0 var(--sp-3); border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; white-space: nowrap; position: relative; }
.btn:hover { background: var(--soft); text-decoration: none; }
.btn:active:not(:disabled) { background: var(--hover); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active:not(:disabled) { background: var(--accent-hover); }
.btn-outline { border-color: var(--accent-strong); color: var(--accent-text); background: var(--panel); }
.btn-outline:hover { background: var(--accent-soft); }
.btn-danger { background: var(--bad-strong); border-color: var(--bad-strong); color: var(--on-strong); }
.btn-danger:hover { background: var(--bad-strong); filter: brightness(1.08); }
.btn-secondary { }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* status on the button itself: working (spinner), done (green edge), failed (red edge + nudge) */
.btn[data-state=busy] { color: transparent !important; cursor: progress; }
.btn[data-state=busy] > * { visibility: hidden; }
.btn[data-state=busy]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted); border-right-color: transparent; animation: cc-spin .7s linear infinite; }
.btn-primary[data-state=busy]::after, .btn-danger[data-state=busy]::after { border-color: currentColor; border-color: var(--accent-ink); border-right-color: transparent; }
.btn-danger[data-state=busy]::after { border-color: var(--on-strong); border-right-color: transparent; }
.btn[data-state=ok] { box-shadow: 0 0 0 2px var(--good-bg), inset 0 0 0 1px var(--good); }
.btn[data-state=bad] { box-shadow: 0 0 0 2px var(--bad-bg), inset 0 0 0 1px var(--bad); animation: cc-nudge .32s var(--ease-out); }
@keyframes cc-spin { to { transform: rotate(360deg); } }
@keyframes cc-nudge { 20% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 80% { transform: translateX(-1px); } }
.split { display: inline-flex; }
.split .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } .split .btn + .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; width: 26px; padding: 0; justify-content: center; border-left: 1px solid rgb(0 0 0 / .14); }
.ibtn { width: 26px; height: 26px; display: inline-grid; place-items: center; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); border-radius: var(--r-sm); cursor: pointer; padding: 0; }
.ibtn:hover { background: var(--soft); }
.ibtn:active:not(:disabled) { background: var(--hover); }
.ibtn .ico { width: 15px; height: 15px; }
.ibtn.accent { border-color: var(--accent-strong); color: var(--accent-text); }
.link { background: none; border: none; color: var(--link); cursor: pointer; padding: 0 var(--sp-1); font: inherit; border-radius: var(--r-xs); } .link.danger { color: var(--bad); }
.icon-btn { background: none; border: none; font-size: var(--fs-h2); line-height: 1; cursor: pointer; color: var(--muted); border-radius: var(--r-sm); padding: var(--sp-half) var(--sp-1); }
.icon-btn:hover { color: var(--ink); background: var(--soft); }

/* ================================================================ badges, pills */
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); background: var(--pick-bg); color: var(--ink); white-space: nowrap; border: 1px solid transparent; letter-spacing: 0; }
.badge-good { background: var(--good-bg); color: var(--good); } .badge-warn { background: var(--warn-bg); color: var(--warn); } .badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-note { background: none; color: var(--note-tag); border-color: var(--note-tag-line); }
.pill { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--sp-2); border-radius: var(--r-pill); color: var(--on-strong); font-size: var(--fs-base); }
.pill.High, .pill.VIP { background: var(--prio-high); } .pill.Medium { background: var(--prio-med); } .pill.Low { background: var(--prio-low); }
.picker-pill { display: inline-flex; align-items: center; gap: var(--sp-1); height: 20px; padding: 0 var(--sp-2) 0 var(--sp-4); background: var(--pick-bg); font-size: var(--fs-sm); border-radius: var(--r-xs); }
.chip { display: inline-flex; align-items: center; height: 21px; padding: 0 var(--sp-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: var(--fs-base); font-weight: 600; color: var(--ink); background: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-2) 0 var(--sp-3); }
.av { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--avatar-line); display: inline-grid; place-items: center; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0; flex: none; color: var(--ink); background: var(--panel); position: relative; }
.av.sm { width: 24px; height: 24px; font-size: var(--fs-2xs); }

/* ================================================================ tabs (observed: 11px caps, tracked, 34px tall, wide gaps, thin underline)
   No hard rule under the tab row; a soft fade separates it from the content. */
.tabs { display: flex; gap: var(--sp-8); margin: 0 0 var(--sp-4); overflow-x: auto; scrollbar-width: thin; position: relative; box-shadow: inset 0 -1px 0 var(--line); }
.tab { background: none; border: none; height: 34px; padding: 0; cursor: pointer; color: var(--muted); font: inherit; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-1); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.tab:focus-visible { outline-offset: -2px; }
.tab-count { order: -1; }

/* ---------------------------------------------------------------- ticket detail (observed proportions) */
.tk { display: grid; grid-template-columns: 45px minmax(0, 1fr); height: calc(var(--vh) - var(--topbar-h)); background: var(--canvas); min-height: 0; }
.tk-listrail { display: flex; justify-content: center; padding-top: var(--sp-4); color: var(--ink); }
.tk-listrail:hover { background: var(--hover); text-decoration: none; }
.tk-frame { display: grid; grid-template-columns: 36px 320px minmax(0, 1fr); max-width: 2408px; width: 100%; margin: 0 auto; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); background: var(--panel); min-height: 0; }
.tk-rail { background: var(--soft); display: flex; flex-direction: column; align-items: center; padding-top: var(--sp-3); gap: var(--sp-2); border-right: 1px solid var(--line); }
.tk-rail button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: var(--r-sm); cursor: pointer; position: relative; }
.tk-rail button:hover { background: var(--hover); color: var(--ink); }
.tk-rail button.on { color: var(--ink); }
.tk-rail button.on::before { content: ""; position: absolute; left: -3px; top: 6px; bottom: 6px; width: 2px; background: var(--ink); border-radius: var(--r-xs); }
.tk-rail .ico { width: 18px; height: 18px; }
.tk-rail .cnt { position: absolute; top: -2px; right: -3px; font-size: var(--fs-2xs); color: var(--accent-strong); font-weight: 700; }
.tk-side { display: grid; grid-template-rows: 50px minmax(0, 1fr); min-height: 0; border-right: 1px solid var(--line); }
.tk-side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-5) 0 var(--sp-8); background: var(--panel); position: relative; }
.tk-side-head h2 { font-size: var(--fs-lg); font-weight: 400; letter-spacing: 0; margin: 0; }
.tk-side-body { overflow-y: auto; background: var(--soft); padding: var(--sp-2) var(--sp-5) var(--sp-4) var(--sp-2); scrollbar-gutter: stable; }
.pcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); margin-bottom: var(--sp-2); }
.pcard-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-5) 0 var(--sp-5); cursor: pointer; user-select: none; border-radius: var(--r-md); }
.pcard-head:active { background: var(--row-hover); }
.pcard-head h2 { font-size: var(--fs-xl); font-weight: 600; margin: 0; letter-spacing: -.01em; }
.pcard-head .ico { width: 14px; height: 14px; color: var(--ink); }
.pcard-body { padding: var(--sp-5) var(--sp-5) var(--sp-1) var(--sp-5); }
.pcard.closed .pcard-body { display: none; } .pcard.closed .pcard-head { padding-bottom: var(--sp-5); }
.pf { margin-bottom: var(--sp-6); min-width: 0; }
.pf label, .pf .pl { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-base); color: var(--muted); margin-bottom: var(--sp-1); }
.pf .pv { font-size: var(--fs-base); font-weight: 600; color: var(--ink); word-break: break-word; min-height: 16px; }
.pf .pv.none { color: var(--faint); font-weight: 400; }
.pf .pv.person { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.contact-name { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-1); letter-spacing: -.01em; line-height: var(--lh-tight); }
.contact-line { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-2); }
.own { font-size: var(--fs-2xs); padding: 0 var(--sp-1); border-radius: var(--r-sm); background: var(--soft); border: 1px solid var(--line); cursor: help; color: var(--muted); letter-spacing: 0; }
.save-bar { position: sticky; bottom: calc(var(--sp-4) * -1); background: var(--soft); padding: var(--sp-3) 0; display: flex; gap: var(--sp-2); border-top: 1px solid var(--line); margin-top: var(--sp-1); }

.tk-main { display: grid; grid-template-rows: auto 35px minmax(0, 1fr) 50px; min-width: 0; min-height: 0; position: relative; }
/* soft fade where the ticket body meets the tab row (instead of a hard line) */
.tk-main::after { content: ""; position: absolute; grid-row: 3; grid-column: 1; left: 0; right: 0; top: 0; height: var(--sp-3); background: linear-gradient(var(--fade), transparent); pointer-events: none; z-index: var(--z-sticky); }
.tk-head { background: var(--soft); display: grid; grid-template-columns: var(--sp-16) minmax(0, 1fr) auto; min-height: 92px; }
.tk-head-l { display: flex; justify-content: center; padding-top: var(--sp-8); color: var(--muted); }
.tk-head-l a, .tk-head-l button { color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.tk-title { padding-top: var(--sp-5); min-width: 0; }
.tk-title h1 { font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: 700; margin: 0; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.tk-title h1 .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-title h1 .ico { width: 19px; height: 19px; color: var(--ink); stroke-width: 1.6; }
.tk-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-base); color: var(--ink); }
.tk-meta a { color: var(--ink); } .tk-meta .ico { width: 13px; height: 13px; color: var(--muted); margin-right: var(--sp-1); }
.tk-meta .badge { margin-left: var(--sp-2); }
.tk-actions { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) 0 var(--sp-4); position: relative; }
.tk-tabs { background: var(--soft); padding-left: var(--sp-16); display: flex; gap: var(--sp-8); overflow-x: auto; scrollbar-width: none; }
.tk-tabs::-webkit-scrollbar { display: none; }
.tk-tabs .tab { height: 34px; }
.tk-body { overflow-y: auto; background: var(--panel); padding: var(--sp-1) var(--sp-4) var(--sp-4) var(--sp-1); scrollbar-gutter: stable; }
.tk-foot { box-shadow: 0 -1px 0 var(--line); background: var(--panel); display: flex; align-items: center; padding: 0 var(--sp-8) 0 var(--sp-8); gap: var(--sp-6); }
.tk-foot .act { display: inline-flex; align-items: center; gap: var(--sp-2); background: none; border: 0; font: inherit; font-size: var(--fs-base); color: var(--ink); cursor: pointer; padding: var(--sp-1) 0; }
.tk-foot .act:hover { color: var(--link); }
.tk-foot .act .ico { width: 15px; height: 15px; color: var(--icon); }
.tk-foot .grow { flex: 1; }

/* conversation cards (observed: 4px radius, 1px var(--line), private notes yellow) */
.tcard { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); padding: var(--sp-4) var(--sp-6) var(--sp-5) var(--sp-16); margin-bottom: var(--sp-2); position: relative; }
.tcard.note { background: var(--note-bg); border-color: var(--note-line); }
.tcard-head { display: flex; align-items: center; gap: 0; min-height: 30px; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.tcard-head .av { margin-right: var(--sp-4); }
.tcard-head .who { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0; }
.tcard-head .when { font-size: var(--fs-sm); color: var(--muted); letter-spacing: 0; }
.tcard-head .badge-note { margin-left: var(--sp-half); }
.tcard-head .right { margin-left: auto; display: flex; gap: var(--sp-2); color: var(--muted); }
.tcard-body { font-size: var(--fs-md); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.tcard h3 { font-size: var(--fs-md); font-weight: 700; margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.pinbar { display: flex; align-items: stretch; height: 37px; border: 1px solid var(--pin-line); background: var(--pin-bg); border-radius: var(--r-sm); margin: 1px 0 var(--sp-2); overflow: hidden; cursor: pointer; }
.pinbar .lbl { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-6) 0 var(--sp-3); background: var(--pin-tab); font-size: var(--fs-md); position: relative; flex: none; }
.pinbar .lbl::after { content: ""; position: absolute; right: -12px; top: 0; border-left: 12px solid var(--pin-tab); border-top: 18px solid transparent; border-bottom: 18px solid transparent; }
.pinbar .lbl .ico { color: var(--accent-strong); }
.pinbar .txt { flex: 1; display: flex; align-items: center; padding: 0 var(--sp-3) 0 var(--sp-6); font-size: var(--fs-sm); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.pinbar .txt span { overflow: hidden; text-overflow: ellipsis; }
.pinbar .chev { display: grid; place-items: center; width: 36px; color: var(--ink); }
.pinlist { border: 1px solid var(--pin-line); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); margin: calc(var(--sp-2) * -1) 0 var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-10); background: var(--panel); }
.pinlist li { margin: var(--sp-1) 0; }
.composer { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); margin-bottom: var(--sp-2); box-shadow: var(--sh-1); }
.composer-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
.composer textarea { border: 0; border-radius: 0; min-height: 120px; padding: var(--sp-3) var(--sp-4); box-shadow: none; }
.composer-foot { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--line); background: var(--soft); }
.infobar { display: flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--line); background: var(--soft); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }

/* blueprint-style phase strip */
.bp { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); margin-bottom: var(--sp-2); overflow-x: auto; }
.bp-step { flex: 1 0 auto; min-width: 86px; height: 38px; border: 0; border-right: 1px solid var(--line); background: var(--panel); font: inherit; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; padding: 0 var(--sp-3); white-space: nowrap; }
.bp-step:last-child { border-right: 0; }
.bp-step:hover:not(:disabled) { background: var(--soft); color: var(--ink); }
.bp-step.done { color: var(--good); background: var(--good-soft); }
.bp-step.current { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.bp-step:disabled { cursor: default; }
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-2); align-items: start; }
@media (min-width: 1500px) { .pgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------------------------------------------------------------- generic content (other pages) */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: var(--sp-2) 0; } .row input, .row select { flex: 1; min-width: 140px; }
.field { margin-bottom: var(--sp-3); } .field label { display: block; font-size: var(--fs-base); color: var(--muted); margin-bottom: var(--sp-1); }
.ro-value { padding: var(--sp-half) 0; min-height: 18px; word-break: break-word; font-weight: 600; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-3); }
.table th, .table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--soft); }
.table.hover tbody tr { cursor: pointer; } .table.hover tbody tr:hover { background: var(--row-hover); } .table.hover tbody tr:active { background: var(--press); }
.list-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); } .filters input, .filters select { width: auto; min-width: 140px; }
.toggle { display: flex; gap: var(--sp-2); align-items: center; } .toggle input { width: auto; min-height: 0; } .filters .toggle input { min-width: 0; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); }
.board-col { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2); min-height: 200px; }
.board-card { display: block; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-3); margin-bottom: var(--sp-2); color: var(--ink); background: var(--panel); }
.board-card:hover { text-decoration: none; border-color: var(--line-2); box-shadow: var(--sh-hover); }
.phase-counts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.phase-count { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); min-width: 96px; display: flex; flex-direction: column; align-items: center; color: var(--ink); background: var(--panel); }
.phase-count:hover { text-decoration: none; border-color: var(--line-2); }
.phase-count b { font-size: var(--fs-h2); letter-spacing: var(--track-head); line-height: var(--lh-head); }
ul.plain { list-style: none; padding: 0; margin: 0; } ul.plain li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); } ul.plain li:last-child { border-bottom: none; }
.checklist { list-style: none; padding: 0; margin: 0; } .checklist li { padding: var(--sp-1) 0; } .checklist label { display: flex; gap: var(--sp-3); align-items: center; cursor: pointer; } .checklist input { width: 15px; height: 15px; min-height: 0; accent-color: var(--accent-strong); }
.blockers { list-style: none; padding: 0; margin: 0; } .blockers li { padding: var(--sp-1) 0; display: flex; gap: var(--sp-2); align-items: baseline; } .blockers li.resolved span:first-child { text-decoration: line-through; color: var(--muted); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.kv span { color: var(--muted); }
.sunny-list { margin: 0; padding-left: var(--sp-5); } .sunny-list li { margin: var(--sp-1) 0; } .sunny-risk { color: var(--bad); } .sunny-advance { color: var(--good); }
.notice { background: var(--warn-bg); color: var(--warn); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); } .notice.warn a { font-weight: 600; }
.error-box { background: var(--bad-bg); color: var(--bad); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }
.msg { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-3); margin-bottom: var(--sp-2); background: var(--panel); }
.msg-head { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-1); } .msg-body { white-space: pre-wrap; }
.relay { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); background: var(--panel); } .relay.closed { opacity: .7; }
.relay-answer { margin-top: var(--sp-2); padding-left: var(--sp-3); border-left: 3px solid var(--good); }
.timeline { list-style: none; padding: 0; margin: 0; } .timeline li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.conflict { border: 1px solid var(--bad); border-radius: var(--r-sm); padding: var(--sp-3); margin-bottom: var(--sp-2); background: var(--panel); }
.conflict .val { font-family: var(--mono); background: var(--soft); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); word-break: break-all; }
.empty { color: var(--muted); padding: var(--sp-6) var(--sp-4); text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--panel); line-height: var(--lh-body); }
/* loading skeletons (shape of the content; gentle opacity pulse only) */
.skel-wrap { display: block; padding: var(--sp-2) 0; }
.skel { display: block; background: var(--line-2); border-radius: var(--r-sm); animation: cc-pulse 1.4s ease-in-out infinite; }
.skel-line { height: .75rem; margin: var(--sp-1) 0; }
.skel-title { height: 1.125rem; margin-bottom: var(--sp-3); }
.skel-sub { height: .625rem; opacity: .7; }
.skel-label { height: .625rem; opacity: .7; }
.skel-head { padding: 0 0 var(--sp-2); }
.skel-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; box-shadow: inset 0 -1px 0 var(--line); }
.skel-dot { width: 2rem; height: 2rem; border-radius: 50%; flex: none; }
.skel-lines { flex: 1; min-width: 0; }
.skel-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-3); }
.skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sp-2); }
.skel-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); }
.skel-field { margin-bottom: var(--sp-3); }
.skel-inline { display: inline-block; width: 6rem; padding: 0; vertical-align: middle; }
.main > .skel-wrap, .center > .skel-wrap { width: min(56rem, 100%); }
.center > .skel-wrap { align-self: start; margin-top: var(--sp-16); }
.main.flush > .skel-wrap { padding: var(--sp-4) var(--sp-5); }
.modal .skel-wrap, .dx-sheet .skel-wrap, .ext-card .skel-wrap { padding: var(--sp-1) 0; }
.modal .skel-dot, .dx-sheet .skel-dot { width: 1.5rem; height: 1.5rem; }
@keyframes cc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.modal-back { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: var(--z-modal); padding: var(--sp-4); overscroll-behavior: contain; }
.modal { background: var(--panel); border-radius: var(--r-xl); width: min(520px, 100%); max-height: calc(var(--vh) * .9); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--sh-modal); outline: none; } .modal-wide { width: min(820px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-3); position: sticky; top: 0; z-index: var(--z-sticky); background: var(--panel); } .modal-head h3 { margin: 0; letter-spacing: var(--track-head); }
.modal-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--sp-3); background: linear-gradient(var(--fade), transparent); pointer-events: none; }
.modal-body { padding: var(--sp-3) var(--sp-5) var(--sp-5); }
.picker { position: relative; } .picker.busy input { background-image: linear-gradient(90deg, transparent, var(--line) 50%, transparent); background-size: 40% 2px; background-repeat: no-repeat; background-position: 50% 100%; }
.picker-list { position: absolute; z-index: var(--z-pop); transform-origin: 50% 0; margin-top: var(--sp-1); left: 0; right: 0; background: var(--panel); border-radius: var(--r-md); box-shadow: var(--sh-pop); max-height: 260px; overflow-y: auto; padding: var(--sp-1) 0; }
.picker-list button { display: block; width: 100%; text-align: left; background: none; border: none; padding: var(--sp-2) var(--sp-4); cursor: pointer; font: inherit; color: var(--ink); }
.picker-list button:focus-visible { outline-offset: -2px; background: var(--soft); }
.picker-list button:hover { background: var(--soft); } .mini-pick { flex: 1; min-width: 160px; }
/* toast: shows next to the control that started the action (placed by ui.js), top center otherwise; never takes clicks */
.toast { position: fixed; left: 0; right: 0; top: calc(var(--topbar-h) + var(--sp-3)); margin-inline: auto; width: max-content; max-width: min(520px, calc(100vw - var(--sp-8))); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-lg); background: var(--top); color: var(--on-strong); z-index: var(--z-toast); box-shadow: var(--sh-float); pointer-events: none; line-height: var(--lh-tight); transform-origin: 50% 0; }
.toast.anchored { right: auto; margin: 0; }
.toast-bad { background: var(--bad-strong); }
.center { min-height: var(--vh); display: grid; place-items: center; padding: var(--sp-4); }
.login { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-8); width: min(420px, 100%); box-shadow: var(--sh-1); }
.brand.big { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--track-head); margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); }
.brand.big .ico { width: 24px; height: 24px; color: var(--accent-strong); }
.narrow { max-width: 420px; }
code { font-family: var(--mono); font-size: var(--fs-sm); background: var(--soft); padding: 1px var(--sp-1); border-radius: var(--r-sm); }

/* ---------------------------------------------------------------- ticket list (desk list view) */
.lv { display: grid; grid-template-columns: 64px minmax(0, 1fr); height: calc(var(--vh) - var(--topbar-h)); min-height: 0; }
.lv-rail { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding-top: var(--sp-2); gap: var(--sp-half); }
.lv-rail a, .lv-rail button { width: 64px; padding: var(--sp-2) 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); font-size: var(--fs-2xs); color: var(--muted); text-align: center; line-height: 1.1; background: none; border: 0; cursor: pointer; font-family: inherit; }
.lv-rail a:hover, .lv-rail button:hover { color: var(--ink); text-decoration: none; background: var(--soft); }
.lv-rail .on { color: var(--ink); background: var(--soft); }
.lv-rail .ico { width: 17px; height: 17px; }
.lv-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: var(--panel); min-width: 0; min-height: 0; }
.lv-head { display: flex; align-items: center; flex-wrap: wrap; min-height: 46px; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-6); position: relative; background: var(--panel); box-shadow: inset 0 -1px 0 var(--line); }
.lv-head .title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: var(--sp-2); }
.lv-head .title .ico { color: var(--accent-strong); fill: var(--accent); width: 15px; height: 15px; }
.lv-head .grow { flex: 1; }
.lv-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-6); background: var(--panel); position: relative; }
.lv-filters::after, .lv-head:last-child::after, .dx-head::after, .dx-qtabs::after, .dx-sheet-head::after, .tk-side-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--sp-3); background: linear-gradient(var(--fade), transparent); pointer-events: none; z-index: var(--z-sticky); }
.lv-main > .lv-head:nth-last-child(2)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--sp-3); background: linear-gradient(var(--fade), transparent); pointer-events: none; z-index: var(--z-sticky); }
.lv-filters input, .lv-filters select { width: auto; min-width: 130px; height: 28px; min-height: 28px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
.lv-list { overflow-y: auto; }
.lv-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 0 var(--sp-3); min-height: 70px; padding: 0 var(--sp-5) 0 var(--sp-5); border-bottom: 1px solid var(--line); cursor: pointer; color: var(--ink); }
.lv-row:hover { background: var(--row-hover); text-decoration: none; }
.lv-row:focus-visible { outline-offset: -2px; }
.lv-row:first-child { border-top: 0; }
.lv-ch { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--icon); }
.lv-ch .ico { width: 15px; height: 15px; }
.lv-subj { font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-1); display: flex; align-items: center; flex-wrap: wrap; white-space: nowrap; overflow: hidden; }
.lv-sub .ico { width: 12px; height: 12px; margin-right: var(--sp-1); }
.lv-right { display: flex; align-items: center; gap: var(--sp-4); }
.lv-status { font-size: var(--fs-sm); padding: 0 var(--sp-2); height: 22px; display: inline-flex; align-items: center; gap: var(--sp-1); border-radius: var(--r-xs); background: var(--pick-bg); white-space: nowrap; }
.lv-status.late { color: var(--bad); background: var(--bad-bg); }
.lv-phase { font-size: var(--fs-sm); color: var(--muted); min-width: 120px; text-align: right; }

/* ---------------------------------------------------------------- extensions panel (right) */
.tk-frame.with-ext { grid-template-columns: 36px 320px minmax(0, 1fr) 300px; }
.tk-ext { border-left: 1px solid var(--line); background: var(--soft); overflow-y: auto; padding: var(--sp-2) var(--sp-3) var(--sp-4); min-height: 0; }
.ext-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3); margin-bottom: var(--sp-2); }
.ext-card h3 { font-size: var(--fs-base); font-weight: 700; margin: 0 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.ext-card h3 .grow { flex: 1; } .ext-card .plain li { padding: var(--sp-1) 0; }
.ext-link { display: block; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink); }
.grow { flex: 1; }
.tb-persp { display: inline-flex; align-items: center; gap: var(--sp-2); height: 28px; padding: 0 var(--sp-3); background: var(--top-chip); color: var(--on-top); border: 1px solid var(--top-chip-line); border-radius: var(--r-pill); font: inherit; font-size: var(--fs-sm); cursor: pointer; margin-right: var(--sp-2); white-space: nowrap; }
.tb-persp:hover { background: var(--top-chip-line); }
button.tb-link { background: none; border: 0; font: inherit; font-size: var(--fs-lg); cursor: pointer; gap: var(--sp-1); }
button.tb-apps { border: 0; cursor: pointer; }
.role-pick { display: grid; gap: var(--sp-2); } .role-pick .btn { height: auto; padding: var(--sp-3) var(--sp-3); flex-direction: column; align-items: flex-start; gap: var(--sp-half); text-transform: capitalize; }

/* story */
.story .tcard { padding-left: var(--sp-6); }
.tcard.next { border-color: var(--pin-line); background: var(--pin-bg); }
.next-line b { font-size: var(--fs-lg); }
.journey { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3); margin-bottom: var(--sp-2); background: var(--panel); }
.j-head { margin-bottom: var(--sp-2); }
.j-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.j-tracks > div { display: flex; flex-direction: column; gap: var(--sp-half); background: var(--soft); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-2); }
.j-tickets { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
.tl-when { color: var(--muted); font-size: var(--fs-sm); }
.tl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); margin-right: var(--sp-2); }
.tl .k-dispatch .tl-dot { background: var(--blue); } .tl .k-field .tl-dot { background: var(--good); } .tl .k-estimate .tl-dot { background: var(--accent-strong); }
.tl .k-signature .tl-dot { background: var(--violet); } .tl .k-service .tl-dot { background: var(--teal); } .tl .k-conversation .tl-dot { background: var(--link); } .tl .k-note .tl-dot { background: var(--note-tag); }

/* estimate */
.est { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-4); background: var(--panel); margin-top: var(--sp-2); }
.est-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.est-steps { display: flex; gap: 0; list-style: none; padding: 0; margin: 0 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.est-steps li { flex: 1; text-align: center; font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-1); color: var(--muted); border-right: 1px solid var(--line); }
.est-steps li:last-child { border-right: 0; } .est-steps li.done { color: var(--good); background: var(--good-soft); } .est-steps li.cur { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.est-lines input { min-height: 26px; padding: var(--sp-1) var(--sp-2); }
.est-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.est-pill { display: inline-flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--line-2); background: var(--panel); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.est-pill.on { border-color: var(--accent-strong); background: var(--accent-soft); }
.est-cat summary { cursor: pointer; font-weight: 600; margin: var(--sp-2) 0; }
.est-catlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); max-height: 280px; overflow-y: auto; }
.est-catlist button { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-2); cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.est-catlist button:hover { border-color: var(--line-2); background: var(--soft); }
.est-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0 var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.act-wrap { display: inline-flex; flex-direction: column; gap: var(--sp-half); max-width: 260px; }
.act-wrap .why { font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }

/* dispatch */
.dx { display: flex; flex-direction: column; height: calc(var(--vh) - var(--topbar-h)); background: var(--panel); position: relative; }
.dx > .dx-body { flex: 1; }
.dx > .dx-pickbar { margin: var(--sp-2) var(--sp-3) 0; }
.dx-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-5); flex-wrap: wrap; position: relative; background: var(--panel); }
.dx-head .title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: var(--sp-2); }
.dx-head .title .ico { color: var(--accent-strong); }
.dx-head select, .dx-head input[type=date] { width: auto; height: 28px; min-height: 28px; padding: var(--sp-half) var(--sp-2); font-size: var(--fs-sm); }
.dx-nav { display: flex; align-items: center; gap: var(--sp-2); }
.dx-range { font-weight: 600; margin-left: var(--sp-1); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.seg button { border: 0; background: var(--panel); padding: 0 var(--sp-3); height: 26px; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.seg button.on { background: var(--top); color: var(--on-strong); }
.dx-body { display: grid; grid-template-columns: 330px minmax(0, 1fr) auto; min-height: 0; }
.dx-queue { border-right: 1px solid var(--line); display: grid; grid-template-rows: 35px auto minmax(0, 1fr) auto; min-height: 0; background: var(--soft); }
.dx-qtabs { display: flex; gap: var(--sp-6); padding: 0 var(--sp-4); background: var(--panel); position: relative; }
.dx-qtools { display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); } .dx-qtools input, .dx-qtools select { height: 28px; min-height: 28px; font-size: var(--fs-sm); } .dx-qtools select { width: 120px; }
.dx-qlist { overflow-y: auto; padding: 0 var(--sp-2) var(--sp-2); }
.dx-q { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); cursor: grab; }
.dx-q.sel { border-color: var(--accent-strong); box-shadow: 0 0 0 2px var(--accent-soft); }
.dx-q .row1, .dx-q .row2 { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.dx-q .row2 { margin-top: var(--sp-2); } .dx-q .row2 .btn { height: 24px; padding: 0 var(--sp-2); font-size: var(--fs-sm); }
.dx-q .subj { font-size: var(--fs-base); margin: var(--sp-1) 0 var(--sp-half); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-q .age { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); } .dx-q .age.stale { color: var(--bad); font-weight: 700; }
.dx-qfoot { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); }
.dx-grid-wrap { overflow: auto; min-width: 0; min-height: 0; padding: var(--sp-2) var(--sp-3) var(--sp-8); }
.dx-pickbar { display: flex; align-items: center; gap: var(--sp-2); background: var(--accent-soft); border: 1px solid var(--pin-line); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.dx-pickbar.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.dx-grid { display: grid; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.dx-corner, .dx-day { background: var(--soft); box-shadow: 0 1px 0 var(--line), 0 6px 8px -6px var(--fade); border-right: 1px solid var(--line); padding: var(--sp-2) var(--sp-2); font-size: var(--fs-sm); position: sticky; top: 0; z-index: var(--z-sticky); }
.dx-day.today { background: var(--accent-soft); } .dx-day.we { background: var(--weekend); }
.dx-daybtn { border: 0; background: none; font: inherit; font-weight: 700; padding: 0; cursor: pointer; color: var(--ink); }
.today-pill { background: var(--accent); color: var(--accent-ink); border-radius: var(--r-pill); padding: 0 var(--sp-2); font-size: var(--fs-2xs); }
.dx-day .cap { color: var(--muted); font-size: var(--fs-xs); } .dx-day .cap.over { color: var(--bad); font-weight: 700; }
.dx-crew { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-half); background: var(--panel); }
.dx-crew.gone { background: var(--bad-bg); }
.dx-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--sp-1); min-height: 72px; position: relative; display: flex; flex-direction: column; gap: var(--sp-1); }
.dx-cell.past { background: var(--past); } .dx-cell.flagged { background: repeating-linear-gradient(135deg, var(--panel), var(--panel) 6px, var(--stripe) 6px, var(--stripe) 12px); }
.dx-cell.pickable { cursor: copy; } .dx-cell.pickable:hover { outline: 2px dashed var(--accent-strong); outline-offset: -3px; }
.dx-cellmenu { position: absolute; right: 2px; bottom: 2px; border: 0; background: none; color: var(--faint); cursor: pointer; opacity: 0; padding: var(--sp-half); }
.dx-cell:hover .dx-cellmenu, .dx-cellmenu:focus { opacity: 1; }
.dx-flag { align-self: flex-start; transform-origin: 0 50%; font-size: var(--fs-xs); font-weight: 700; color: var(--flag-ink); background: var(--flag-bg); border: 0; border-radius: var(--r-sm); padding: 1px var(--sp-2); cursor: pointer; }
.dx-card { text-align: left; border: 1px solid var(--line-2); border-left: 4px solid var(--st-default); background: var(--panel); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.dx-card:hover { box-shadow: var(--sh-hover); } .dx-card.active { outline: 2px solid var(--focus); }
.dx-card .t { display: flex; align-items: center; gap: var(--sp-1); font-weight: 700; } .dx-card .t .h { color: var(--muted); font-weight: 400; margin-left: auto; }
.dx-card .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dx-card .s { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-card.s-Dispatched { border-left-color: var(--good); } .dx-card.s-In-Progress { border-left-color: var(--st-progress); } .dx-card.s-Completed { border-left-color: var(--st-done); opacity: .75; }
.dx-card.s-Cannot-Complete { border-left-color: var(--bad); } .dx-card.s-Cancelled { opacity: .5; text-decoration: line-through; }
.dx-card.bad { background: var(--bad-bg); border-color: var(--bad-line); } .dx-card.warn .t .ico { color: var(--warn); } .dx-card.bad .t .ico { color: var(--bad); }
.dx-tbd { font-size: var(--fs-2xs); font-weight: 700; color: var(--flag-ink); background: var(--flag-bg); border-radius: var(--r-sm); padding: 0 var(--sp-1); }
.dx-legend { margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-xs); background: var(--st-default); } .lg.Dispatched { background: var(--good); } .lg.In-Progress { background: var(--st-progress); } .lg.Completed { background: var(--st-done); }
.dx-sheet { width: 400px; max-width: 100%; border-left: 1px solid var(--line-2); position: relative; z-index: var(--z-sheet); display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; background: var(--panel); box-shadow: var(--sh-sheet); }
.dx-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); position: relative; background: var(--panel); }
.dx-sheet-head h2 { font-size: var(--fs-xl); margin: var(--sp-half) 0 0; letter-spacing: -.01em; }
.dx-sheet-body { overflow-y: auto; padding: 0 var(--sp-4) var(--sp-5); }
.dx-sheet-body section { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.dx-sheet-body h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--muted); margin: 0 0 var(--sp-2); font-weight: 600; }
.dx-sheet .form-grid { grid-template-columns: 1fr 1fr; }
.dx-flagrow { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); padding: var(--sp-1) 0; } .dx-flagrow.bad { color: var(--bad); } .dx-flagrow.warn { color: var(--warn); }
.dx-ready { font-weight: 700; padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); margin-bottom: var(--sp-2); } .dx-ready.good { background: var(--good-bg); color: var(--good); } .dx-ready.warn { background: var(--warn-bg); color: var(--warn); } .dx-ready.bad { background: var(--bad-bg); color: var(--bad); }
.dx-checks { list-style: none; margin: 0; padding: 0; } .dx-checks li { padding: var(--sp-1) 0; font-size: var(--fs-base); } .dx-checks .ok .ico { color: var(--good); } .dx-checks .no .ico { color: var(--bad); } .dx-checks .opt .ico { color: var(--warn); }
.undo-bar { position: fixed; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - var(--sp-8)); bottom: var(--sp-5); background: var(--top); color: var(--on-strong); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); display: flex; gap: var(--sp-3); align-items: center; z-index: var(--z-undo); box-shadow: var(--sh-float); }
.undo-bar .link { color: var(--accent); font-weight: 700; } .undo-bar .icon-btn { color: var(--on-top-muted); }
.myday { max-width: 860px; } .myday-card h3 { font-size: var(--fs-xl); }
.plan h1 { margin-top: var(--sp-2); }
@media print { .topbar, .noprint, .review-banner { display: none !important; } .shell { display: block; height: auto; } .main { overflow: visible; padding: 0; } .card { break-inside: avoid; } }
.cov td { font-size: var(--fs-sm); } .cov td:first-child { min-width: 170px; }

/* ---------------------------------------------------------------- narrower layouts */
@media (max-width: 1500px) { .tk-frame.with-ext { grid-template-columns: 36px 290px minmax(0, 1fr) 260px; } }
@media (max-width: 1280px) {
  .tk-frame, .tk-frame.with-ext { grid-template-columns: 36px 280px minmax(0, 1fr); }
  .tk-frame.with-ext .tk-ext { display: none; }
  .dx-body { grid-template-columns: 290px minmax(0, 1fr); } .dx-sheet { position: absolute; right: 0; top: 46px; bottom: 0; z-index: var(--z-sheet); box-shadow: var(--sh-sheet); }
  .tk-tabs, .tk-tabs { gap: var(--sp-6); } .tk-tabs { padding-left: var(--sp-6); } .tk-head { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--sp-6); } .tk-head-l { display: none; }
  .tcard { padding-left: var(--sp-6); }
}
@media (max-width: 980px) {
  .tk { grid-template-columns: minmax(0, 1fr); } .tk-listrail { display: none; }
  .tk-frame, .tk-frame.with-ext { grid-template-columns: 36px minmax(0, 1fr); }
  .tk-frame.side-open, .tk-frame.with-ext.side-open { grid-template-columns: 36px 300px minmax(0, 1fr); }
  .dx-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow-y: auto; } .dx-queue { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); }
  .dx-sheet { width: min(420px, 100%); } .j-tracks { grid-template-columns: 1fr; } .tb-persp { display: none; }
  .tk-frame:not(.side-open) .tk-side { display: none; }
  .tk-title h1 { font-size: var(--fs-h2); line-height: 26px; }
  .tk-actions .hide-narrow { display: none; }
  .grid-2, .grid-3, .form-grid { grid-template-columns: 1fr; }
  .lv { grid-template-columns: minmax(0, 1fr); } .lv-rail { display: none; }
  .lv-phase { display: none; }
}
@media (max-width: 700px) {
  .tk-frame, .tk-frame.side-open, .tk-frame.with-ext, .tk-frame.with-ext.side-open { grid-template-columns: minmax(0, 1fr); }
  .dx-sheet { top: 0; width: 100%; } .dx-head { padding: var(--sp-2) var(--sp-3); } .tl li { grid-template-columns: 1fr; gap: var(--sp-half); } .dx-sheet .form-grid { grid-template-columns: 1fr; }
  .tk-rail { flex-direction: row; justify-content: flex-start; padding: var(--sp-1) var(--sp-2); height: 40px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .tk-rail button.on::before { left: 6px; right: 6px; top: auto; bottom: -4px; width: auto; height: 2px; }
  .tk-frame.side-open .tk-side { display: grid; position: fixed; inset: calc(var(--topbar-h) + 40px) 0 0 0; z-index: var(--z-panel); }
  .tk-head { grid-template-columns: minmax(0, 1fr); padding: 0 var(--sp-3); } .tk-actions { grid-column: 1; padding: 0 0 var(--sp-3); flex-wrap: wrap; } .tk-title h1 { font-size: var(--fs-h3); }
  .tk-tabs { padding-left: var(--sp-3); } .tk-foot { padding: 0 var(--sp-3); gap: var(--sp-4); overflow-x: auto; } .tk-foot .muted { display: none; }
  .tb-link { padding: 0 var(--sp-2); font-size: var(--fs-md); } .tb-search { right: 8px; left: 8px; width: auto; }
  .main { padding: calc(var(--topbar-h) + var(--sp-3)) var(--sp-3) var(--sp-3); }
  .main:not(.flush) .review-banner { margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-3); }
  .lv-row { grid-template-columns: 36px minmax(0, 1fr); padding: var(--sp-3) var(--sp-3); } .lv-right { grid-column: 2; margin-top: var(--sp-2); }
}

/* ---------------------------------------------------------------- 1.3: dispatch tabs, meeting, crew plan, routes, hours, my day */
.pre { white-space: pre-wrap; word-break: break-word; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.good { color: var(--good); } .warn { color: var(--warn); }
.toast-warn { background: var(--warn-strong); }
.clickable { cursor: pointer; } .clickable:hover td { background: var(--pick-bg); }
.table-wrap { overflow-x: auto; max-width: 100%; }
.dx-tabsrow { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); background: var(--soft); border-bottom: 1px solid var(--line); overflow-x: auto; }
.dx-tabs { display: flex; gap: var(--sp-half); overflow-x: auto; scrollbar-width: none; }
.dx-tabs::-webkit-scrollbar { display: none; }
.dx-tabs a { display: inline-flex; align-items: center; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-3); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.dx-tabs a:hover { color: var(--ink); text-decoration: none; }
.dx-tabs a.on { color: var(--ink); border-bottom-color: var(--accent); }
.dxp { max-width: 1500px; }
.dxp-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: calc(var(--sp-4) * -1) calc(var(--sp-5) * -1) var(--sp-4); padding: 0 var(--sp-5); background: var(--soft); border-bottom: 1px solid var(--line); }
.main:not(.flush) .review-banner + .dxp .dxp-head { margin-top: calc(var(--sp-4) * -1); }
.dxp-title { margin: 0 0 var(--sp-3); }
.daycells { display: flex; gap: var(--sp-1); flex-wrap: wrap; } .dx-daycell { font-size: var(--fs-xs); padding: 1px var(--sp-2); border-radius: var(--r-pill); background: var(--note-bg); border: 1px solid var(--note-line); }
.meet { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.meet-agenda { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); max-height: calc(var(--vh) - 160px); overflow: auto; position: sticky; top: calc(var(--topbar-h) + var(--sp-2)); }
.meet-agenda h3 { font-size: var(--fs-md); }
.meet-item { border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; font-size: var(--fs-sm); } .meet-item.done { opacity: .55; } .meet-item.done b { text-decoration: line-through; }
.meet-main { min-width: 0; }
.plan-grid-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); }
.plan-grid { border-collapse: collapse; width: 100%; min-width: 760px; font-size: var(--fs-sm); }
.plan-grid th { background: var(--soft); font-weight: 600; text-align: left; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--line-2); position: sticky; top: 0; white-space: nowrap; }
.plan-grid td { border: 1px solid var(--line); vertical-align: top; padding: 0; min-width: 120px; }
.plan-grid td:first-child, .plan-grid th:first-child { min-width: 90px; font-weight: 600; padding: var(--sp-2) var(--sp-2); background: var(--soft); }
.plan-cell { display: block; width: 100%; min-height: 54px; text-align: left; background: none; border: 0; padding: var(--sp-2) var(--sp-2); font: inherit; white-space: pre-wrap; cursor: pointer; color: var(--ink); }
.plan-cell:hover:not(:disabled) { background: var(--accent-soft); } .plan-cell:disabled { cursor: default; }
.plan-email { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: var(--sp-4); overflow-x: auto; }
.routes { display: grid; gap: var(--sp-3); }
.route-body { display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.route-svg { width: 100%; height: auto; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-sm); }
.route-svg .leg { stroke: var(--blue); stroke-width: 2; fill: none; } .route-svg .stop { fill: var(--panel); stroke: var(--blue); stroke-width: 2; }
.route-svg .shop { fill: var(--accent); stroke: var(--accent-ink); stroke-width: 1.5; } .route-svg .stopn { font-size: var(--fs-xs); font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.route-legs { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); } .route-legs li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); }
.route-chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin: var(--sp-1) 0; }
.legend { font-size: var(--fs-xs); color: var(--muted); }
.table.hours td, .table.hours th { white-space: nowrap; }
.myday { max-width: 860px; margin: 0 auto; }
.md-hello { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); }
.myday-card { padding: 0; overflow: hidden; }
.md-row { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-4) var(--sp-4); background: none; border: 0; font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer; min-height: 52px; }
.md-row:hover { background: var(--soft); }
.md-body { padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--line); }
.md-sub { color: var(--muted); font-size: var(--fs-sm); margin: var(--sp-2) 0; }
.md-steps { list-style: none; padding: 0; margin: var(--sp-3) 0; display: grid; gap: var(--sp-2); }
.md-steps li { display: flex; align-items: center; gap: var(--sp-2); } .md-steps li.done { opacity: .6; } .md-steps li.cur .btn { border-color: var(--accent-strong); box-shadow: 0 0 0 2px var(--accent-soft); }
.md-steps .btn { min-height: 44px; flex: 1; justify-content: flex-start; }
.md-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--sp-2); margin: var(--sp-2) 0; }
.md-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.md-check { list-style: none; padding: 0; margin: var(--sp-2) 0; } .md-check li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.md-check label { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-md); } .md-check input { width: 20px; height: 20px; min-height: 20px; flex: none; }
.md-check label.auto { color: var(--muted); }
.md-reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2); margin: var(--sp-2) 0; } .md-reasons .btn { min-height: 44px; justify-content: flex-start; text-align: left; }
.md-clock { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3); margin-bottom: var(--sp-2); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.md-clock-face { display: flex; flex-direction: column; min-width: 160px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--soft); }
.md-clock-face.on { background: var(--good-bg); color: var(--good); }
.md-clock-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-pop); transform-origin: 50% 0; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-pop); padding: var(--sp-2); display: grid; gap: var(--sp-1); }
.md-clock-menu button { min-height: 44px; text-align: left; }
.md-pre { white-space: pre-wrap; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-3); font: var(--fs-sm)/1.45 var(--mono); max-height: 50vh; overflow: auto; }

/* ---------------------------------------------------------------- 1.3: ticket project tabs, files, presence */
.presence { display: inline-flex; gap: var(--sp-1); margin-left: var(--sp-2); }
.pf-head { display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.pf-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.pf-folders { display: grid; gap: var(--sp-half); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-1); }
.pf-folders button { display: flex; gap: var(--sp-2); align-items: center; background: none; border: 0; padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); font: inherit; text-align: left; cursor: pointer; }
.pf-folders button:hover { background: var(--soft); } .pf-folders button.on { background: var(--accent-soft); font-weight: 600; }
.pf-folders button .muted { margin-left: auto; }
.pf-files { min-width: 0; }
.sg-sec { border: 1px solid var(--line); border-radius: var(--r-sm); margin: var(--sp-2) 0; background: var(--panel); } .sg-sec > summary { padding: var(--sp-2) var(--sp-3); cursor: pointer; font-weight: 600; }
.sg-sec > div, .sg-sec > ul { padding: 0 var(--sp-3) var(--sp-3); } .sg-sub { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-2) 0 var(--sp-1); font-weight: 600; }
.tl-what { min-width: 0; }

/* ---------------------------------------------------------------- 1.3: company queues (permits, O&M, savings, RMA, chat, missing) */
.svc { max-width: 1400px; }
.svc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.svc-head h1 { margin: 0; display: flex; align-items: center; gap: var(--sp-2); } .svc-head .row { margin: 0; }
.svc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.svc-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3); }
.svc-tile .v { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--track-head); line-height: var(--lh-head); } .svc-tile .l { font-size: var(--fs-sm); color: var(--muted); }
.svc-tile.warn { border-color: var(--note-tag-line); background: var(--warn-bg); } .svc-tile.bad { border-color: var(--bad-line); background: var(--bad-bg); } .svc-tile.good { border-color: var(--good-line); background: var(--good-bg); }
.svc .tk-tabs { padding-left: 0; margin-bottom: var(--sp-3); background: none; }
.svc .tcard { padding-left: var(--sp-6); }
.row-due td { background: var(--warn-bg); }
.sv-bars { display: flex; gap: var(--sp-2); align-items: flex-end; height: 160px; padding-bottom: var(--sp-5); }
.sv-bar { flex: 1; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.sv-bar .exp, .sv-bar .act { position: absolute; bottom: 0; width: 70%; border-radius: var(--r-xs) var(--r-xs) 0 0; } .sv-bar .exp { background: var(--chart-soft); } .sv-bar .act { background: var(--blue); width: 46%; }
.sv-bar span { position: absolute; bottom: -18px; font-size: var(--fs-2xs); color: var(--muted); }
.sv-cal { display: grid; grid-template-columns: repeat(auto-fill, 10px); gap: var(--sp-half); }
.sv-cal i, .sv-key { width: 10px; height: 10px; border-radius: var(--r-xs); display: inline-block; background: var(--line-2); vertical-align: middle; }
.c-ok { background: #4caf7a !important; } .c-low { background: #f2b544 !important; } .c-down { background: #d9534f !important; } .c-nodata { background: #cfcfcf !important; } .c-learning, .c-pending { background: #c9d6e8 !important; }
.packet { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-3); max-height: 60vh; overflow: auto; font: var(--fs-sm)/1.5 var(--mono); }
.chat-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-3); min-height: 60vh; }
.chat-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto; max-height: calc(var(--vh) - 220px); }
.chat-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: var(--sp-3) var(--sp-3); font: inherit; cursor: pointer; }
.chat-item:hover { background: var(--soft); } .chat-item.active { background: var(--accent-soft); } .chat-item .row { margin: var(--sp-half) 0; }
.chat-pane { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); min-width: 0; }
.chat-thread { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; }
.chat-msgs { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: var(--sp-2); max-height: calc(var(--vh) - 360px); padding: var(--sp-1); }
.msg { max-width: 75%; } .msg .b { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xl); white-space: pre-wrap; word-break: break-word; }
.msg-in { align-self: flex-start; } .msg-in .b { background: var(--soft); border: 1px solid var(--line); }
.msg-out { align-self: flex-end; text-align: right; } .msg-out .b { background: var(--msg-out); text-align: left; }
.msg-note { align-self: center; max-width: 90%; } .msg-note .b { background: var(--note-bg); border: 1px dashed var(--note-line); }
.chat-compose textarea { width: 100%; }
.tb-icon { position: relative; }
.tb-dot { position: absolute; top: 6px; right: 2px; min-width: 16px; height: 16px; border-radius: var(--r-pill); background: var(--bad-strong); color: var(--on-strong); font-size: var(--fs-2xs); font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 var(--sp-1); }

@media (max-width: 980px) {
  .meet, .route-body, .chat-grid, .pf-body { grid-template-columns: minmax(0, 1fr); }
  .meet-agenda { position: static; max-height: 40vh; }
  .chat-list { max-height: 34vh; }
}
@media (max-width: 700px) {
  .dxp-head { margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-3); padding: 0 var(--sp-2); }
  .svc .table, .dxp .table { display: block; overflow-x: auto; white-space: nowrap; }
  .svc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-row { font-size: var(--fs-lg); }
  .msg { max-width: 92%; }
}

.dx-pickbar.warn { background: var(--warn-bg); border-color: var(--note-tag-line); color: var(--warn); }

/* ---------------------------------------------------------------- Service Board host */
.sb-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sb-host .notice { margin: var(--sp-2) var(--sp-3); }
.sb-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--sb-bg); }

/* ---------------------------------------------------------------- personal views and dashboards */
.vw-page { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-4); max-width: 1600px; }
.vw-side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3); align-self: start; position: sticky; top: calc(var(--topbar-h) + var(--sp-2)); max-height: calc(var(--vh) - var(--topbar-h) - var(--sp-8)); overflow-y: auto; }
.vw-side h4 { margin: var(--sp-3) 0 var(--sp-1); }
.vw-ul { list-style: none; margin: 0; padding: 0; }
.vw-ul li { display: flex; align-items: center; gap: var(--sp-1); border-radius: var(--r-sm); }
.vw-ul li a { flex: 1; padding: var(--sp-1) var(--sp-2); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-ul li.active { background: var(--accent-soft); } .vw-ul li:hover { background: var(--soft); }
.vw-star { font-size: var(--fs-lg); padding: 0 var(--sp-1); } .vw-star.on { color: var(--accent-strong); }
.vw-main { min-width: 0; }
.vw-builder { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.vw-builder section + section { border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: var(--sp-1); }
.vw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2) var(--sp-3); align-items: end; padding-top: var(--sp-2); }
.vw-grid label, .vw-form label { font-size: var(--fs-sm); color: var(--muted); display: block; }
.vw-form label { margin-bottom: var(--sp-2); }
.vw-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.vw-group.nested { border-left: 3px solid var(--line-2); padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); margin-left: var(--sp-1); }
.vw-group-head, .vw-cond, .vw-add { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.vw-cond select, .vw-cond input, .vw-group-head select { width: auto; min-width: 120px; max-width: 260px; }
.vw-rel { border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-2); background: var(--pick-bg); }
.vw-date, .vw-between { display: inline-flex; gap: var(--sp-1); align-items: center; flex-wrap: wrap; }
.vw-multi { position: relative; display: inline-block; }
.vw-multi-pop { position: absolute; z-index: var(--z-pop); transform-origin: 0 0; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-pop); padding: var(--sp-2) var(--sp-3); max-height: 280px; overflow-y: auto; min-width: 240px; }
.vw-check { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-base); color: var(--ink); padding: var(--sp-half) 0; white-space: nowrap; }
.vw-check input { width: auto; min-height: 0; }
.vw-cols { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.vw-col { display: inline-flex; align-items: center; gap: var(--sp-half); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: var(--sp-half) var(--sp-1) var(--sp-half) var(--sp-2); background: var(--soft); }
.vw-col input { width: 64px; min-height: 24px; padding: var(--sp-half) var(--sp-1); margin-left: var(--sp-2); }
.vw-col .icon-btn, .vw-cond .icon-btn, .vw-group-head .icon-btn { font-size: var(--fs-xl); padding: 0 var(--sp-1); }
.vw-table th { position: relative; } .vw-th { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.vw-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; touch-action: none; } .vw-resize:hover { background: var(--line-2); }
.vw-matches { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-1); font-size: var(--fs-sm); }
.vw-list { list-style: none; padding: 0; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.vw-list li { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
.vw-board { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); align-items: flex-start; }
.vw-lane { flex: 0 0 260px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2); max-height: 70vh; overflow-y: auto; }
.vw-lane h4 { margin: 0 0 var(--sp-2); color: var(--ink); }
.vw-card { display: flex; flex-direction: column; gap: var(--sp-half); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-2); margin-bottom: var(--sp-2); color: var(--ink); }
.vw-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--panel); }
.vw-cal-h { font-size: var(--fs-xs); text-transform: uppercase; color: var(--muted); padding: var(--sp-1) var(--sp-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--soft); }
.vw-cal-d { min-height: 92px; padding: var(--sp-1) var(--sp-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-half); overflow: hidden; }
.vw-cal-d.other { background: var(--soft); color: var(--faint); } .vw-cal-d .n { font-size: var(--fs-xs); font-weight: 600; }
.vw-cal-d a { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-banner { background: var(--pick-bg); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.vw-banner.warn { background: var(--warn-bg); border-color: var(--note-tag-line); display: block; }
.vw-gchip { cursor: pointer; } .vw-gchip:hover { background: var(--soft); }
.db-pick { width: auto; font-size: var(--fs-h3); font-weight: 700; border-color: transparent; background: transparent; min-height: 34px; }
.db-filters { display: flex; gap: var(--sp-3); align-items: end; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.db-filters label { font-size: var(--fs-sm); color: var(--muted); } .db-filters select { width: auto; min-width: 150px; display: block; }
.db-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: var(--sp-3); }
.db-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.db-card.w2 { grid-column: span 2; } .db-card.w3 { grid-column: span 3; } .db-card.w4 { grid-column: span 4; } .db-card.h2 { grid-row: span 2; }
.db-card.edit { border: 1px dashed var(--accent-strong); }
.db-card header { display: flex; align-items: flex-start; gap: var(--sp-2); } .db-card h3 { font-size: var(--fs-base); margin: 0; flex: 1; }
.db-tools { display: inline-flex; gap: 0; } .db-tools .icon-btn { font-size: var(--fs-lg); padding: 0 var(--sp-1); } .db-tools .icon-btn:disabled { opacity: .3; cursor: default; }
.db-big { font-size: var(--fs-display); font-weight: 700; color: var(--ink); letter-spacing: var(--track-head); line-height: var(--lh-head); }
.db-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; } .db-list li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-bars { display: flex; flex-direction: column; gap: var(--sp-1); }
.db-bar { display: grid; grid-template-columns: minmax(80px, 40%) minmax(0, 1fr) 48px; gap: var(--sp-2); align-items: center; color: var(--ink); font-size: var(--fs-sm); padding: 1px 0; }
.db-bar .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-bar .n { text-align: right; font-weight: 600; }
.db-bar .b { height: 10px; background: var(--soft); border-radius: var(--r-sm); overflow: hidden; } .db-bar .b span { display: block; height: 100%; background: var(--accent); }
.db-bar:hover { text-decoration: none; background: var(--soft); }
.db-flag { font-size: var(--fs-sm); background: var(--warn-bg); color: var(--warn); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); margin: 0; }
@media (max-width: 980px) { .vw-page { grid-template-columns: minmax(0, 1fr); } .vw-side { position: static; max-height: none; } .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-card.w3, .db-card.w4 { grid-column: span 2; } }
@media (max-width: 700px) { .db-grid { grid-template-columns: minmax(0, 1fr); } .db-card.w2, .db-card.w3, .db-card.w4 { grid-column: span 1; } }
/* Desk-style list with a views rail */
.list-split { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--sp-4); }
.list-main { min-width: 0; }
.vrail { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) 0; align-self: start; position: sticky; top: calc(var(--topbar-h) + var(--sp-2)); max-height: calc(var(--vh) - var(--topbar-h) - var(--sp-8)); overflow-y: auto; }
.vrail h4 { margin: var(--sp-3) var(--sp-4) var(--sp-1); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; }
.vrail ul { list-style: none; margin: 0; padding: 0; }
.vrail li a, .vrail li button { display: flex; justify-content: space-between; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-4); background: none; border: 0; font: inherit; font-size: var(--fs-base); color: var(--ink); text-align: left; cursor: pointer; }
.vrail li a:hover, .vrail li button:hover { background: var(--soft); text-decoration: none; }
.vrail li.active button { background: var(--accent-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.vrail .n { color: var(--muted); font-size: var(--fs-sm); }
.vrail-new { display: block; padding: var(--sp-2) var(--sp-4) var(--sp-1); font-size: var(--fs-sm); }
@media (max-width: 980px) { .list-split { grid-template-columns: minmax(0, 1fr); } .vrail { position: static; max-height: none; } }
.linkbtn { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font: inherit; text-decoration: underline; }

/* === agent A: ticket workspace (Project sheet, Your part, Now strip, stage), service home, Relay === */
.ps { display: flex; flex-direction: column; gap: 8px; }
.ps-skel { display: grid; gap: 8px; } .ps-skel div { height: 72px; border-radius: 6px; background: linear-gradient(90deg, var(--soft), #fff, var(--soft)); background-size: 200% 100%; animation: ps-shine 1.2s linear infinite; }
@keyframes ps-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ps-skel div { animation: none; } }
/* stage pill + folded stepper */
.ps-stage { background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.ps-stage > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.ps-stage > summary::-webkit-details-marker { display: none; }
.ps-phase { background: var(--accent); color: var(--accent-ink); font-weight: 700; border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.ps-stage-link { color: var(--link); font-size: 12px; }
.ps-stepper { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 8px; }
.ps-grp { flex: 1 1 150px; min-width: 0; } .ps-grp-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 4px 0; }
.ps-grp-b { display: flex; flex-wrap: wrap; gap: 4px; }
.ps-grp-b .bp-step { flex: 1 1 auto; min-width: 0; height: 32px; border: 1px solid var(--line); border-radius: 4px; }
.ps-stage > .muted { padding: 0 14px 10px; }
/* Your part + Now */
.ps-mine { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; }
.ps-now { display: flex; gap: 12px; align-items: flex-start; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line); background: var(--soft); flex-wrap: wrap; }
.ps-now.now-late { background: var(--bad-bg); border-color: #f3c6bf; } .ps-now.now-soon { background: var(--warn-bg); border-color: #f2d9a6; } .ps-now.now-ok { background: var(--good-bg); border-color: #c4e6d3; }
.ps-now-main { flex: 1 1 260px; min-width: 0; }
.ps-now-eye, .ps-eye { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ps-now-head { font-size: 15px; font-weight: 700; margin: 2px 0; letter-spacing: -0.01em; }
.ps-now-why { font-size: 12px; color: var(--muted); }
.ps-now-act { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ps-chip { font-size: 10px; text-transform: none; letter-spacing: 0; border-radius: 999px; padding: 1px 8px; background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); }
.ps-chip.late { color: var(--bad); border-color: #f3c6bf; } .ps-chip.soon { color: var(--warn); } .ps-chip.ok { color: var(--good); }
.ps-mine-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.ps-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .ps-sub { font-size: 12px; color: var(--muted); }
.ps-jobchip { font-size: 11px; border-radius: 999px; padding: 2px 10px; background: var(--pick-bg); border: 1px solid var(--line-2); white-space: nowrap; }
.ps-jobchip.warranty { background: var(--good-bg); color: var(--good); border-color: #c4e6d3; } .ps-jobchip.unknown { color: var(--warn); background: var(--warn-bg); }
.ps-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ps-item { display: flex; gap: 10px; align-items: center; padding: 8px 6px; border-top: 1px solid var(--line); border-radius: 4px; }
.ps-item.open { cursor: pointer; } .ps-item.open:hover { background: var(--soft); } .ps-item.open:active { background: var(--line); }
.ps-item.done .ps-t { color: var(--muted); text-decoration: line-through; }
.ps-tick { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--dot); display: grid; place-items: center; flex: none; }
.ps-item.done .ps-tick { background: var(--good); border-color: var(--good); color: #fff; }
.ps-t { flex: 1; min-width: 0; } .ps-t small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.ps-go { color: var(--link); font-size: 12px; white-space: nowrap; }
.ps-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ps-need { font-size: 12px; color: var(--warn); margin-top: 3px; } .ps-need a { color: var(--link); }
.ps-wait { font-size: 12px; margin-top: 8px; color: var(--muted); }
.ps-none { color: var(--muted); padding: 8px 0; }
.ps-fold { margin-top: 8px; } .ps-fold > summary { cursor: pointer; color: var(--link); font-size: 12px; }
.ps-everyone { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin-top: 8px; }
.ps-everyone ul { margin: 2px 0 0; padding-left: 16px; font-size: 12px; } .ps-everyone li.done { color: var(--muted); text-decoration: line-through; } .ps-everyone li.open { cursor: pointer; }
.ps-who { font-size: 12px; font-weight: 600; }
/* the sheet */
.ps-sheet { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ps-sheet-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px 8px; flex-wrap: wrap; } .ps-sheet-head h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; }
.ps-sec { border-top: 1px solid var(--line); }
.ps-sheet + .ps-sec, .ps-more { background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.ps-sec > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; min-width: 0; }
.ps-sec > summary::-webkit-details-marker { display: none; }
.ps-sec > summary:hover { background: var(--soft); } .ps-sec > summary:active { background: var(--line); }
.ps-sec > summary .ico { flex: none; color: var(--muted); transition: transform .15s; } .ps-sec[open] > summary .ico { transform: rotate(180deg); }
.ps-sec-t { font-weight: 600; flex: none; }
.ps-sec-sum { color: var(--muted); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-badge { font-size: 11px; background: var(--warn-bg); color: var(--warn); border-radius: 999px; padding: 1px 8px; flex: none; }
.ps-sec-b { padding: 4px 14px 12px; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
.ps-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); min-width: 0; border-radius: 4px; }
.ps-f > span:first-child { font-weight: 500; } .ps-f small { font-size: 11px; color: var(--faint); }
.ps-f > .link { align-self: flex-start; text-align: left; }
.ps-f.wide { grid-column: 1 / -1; } .ps-f.chk { flex-direction: row; align-items: center; gap: 6px; color: var(--ink-2); padding-top: 18px; }
.ps-f.chk input { width: auto; min-height: 0; }
.ps-f.flash, .ps-lines.flash { animation: ps-flash 1.6s ease-out; }
@keyframes ps-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .ps-f.flash, .ps-lines.flash { animation: none; box-shadow: 0 0 0 2px var(--accent); } }
.ps-facts { background: var(--soft); border-radius: 4px; padding: 8px; }
.ps-scope-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ps-scope-read pre { white-space: pre-wrap; font: inherit; font-size: 13px; margin: 0 0 4px; background: var(--soft); padding: 8px 10px; border-radius: 4px; }
.ps-lines { display: grid; gap: 6px; margin-bottom: 8px; }
.ps-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) 150px 28px; gap: 6px; align-items: center; }
.ps-note { background: var(--good-bg); color: var(--good); padding: 8px 10px; border-radius: 4px; margin: 0 0 8px; }
.ps-flat { background: var(--soft); border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; } .ps-flat .row { margin: 4px 0; flex-wrap: wrap; } .ps-flat label { display: inline-flex; gap: 6px; align-items: center; }
.ps-flat input[type=radio], .ps-flat input[type=checkbox] { width: auto; min-height: 0; flex: none; min-width: 0; }
.ps-flat input[type=number] { flex: none; min-width: 0; }
.ps-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); }
.ps-bar.dirty { background: rgba(255,246,223,.95); } .ps-state { font-size: 12px; color: var(--muted); } .ps-bar.dirty .ps-state { color: var(--warn); font-weight: 600; }
.ps-more > summary { border-radius: 6px; }
.ps-before { background: var(--soft); border-radius: 4px; padding: 8px 12px; margin-bottom: 10px; } .ps-before ul { margin: 4px 0 0; padding-left: 18px; }
@media (prefers-reduced-transparency: reduce) { .ps-bar { backdrop-filter: none; background: #fff; } }
@media (max-width: 700px) {
  .ps-line { grid-template-columns: 48px minmax(0, 1fr) 28px; } .ps-line select { grid-column: 1 / 3; }
  .ps-item { flex-wrap: wrap; } .ps-item > .btn, .ps-item > .ps-acts { margin-left: 28px; }
  .ps-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ps-f.chk { padding-top: 4px; }
  .ps-sec > summary { flex-wrap: wrap; } .ps-sec-sum { white-space: normal; order: 3; flex-basis: 100%; } .ps-sec > summary .ico { margin-left: auto; }
}
/* properties panel: folded groups with a one-line summary, one-field edit */
.pcard-sum { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.pcard-head .pcard-ht { min-width: 0; }
.pf-row { position: relative; } .pf-row .pf-acts { position: absolute; right: 0; top: 0; display: none; gap: 2px; }
.pf-row:hover .pf-acts, .pf-row:focus-within .pf-acts { display: flex; }
.pf-acts .ibtn { width: 24px; height: 24px; } .pf-edit { display: flex; gap: 6px; align-items: center; margin-top: 4px; } .pf-edit .field { flex: 1; margin: 0; } .pf-edit .field label { display: none; }
.pf-empty-note { font-size: 12px; color: var(--faint); margin: -6px 0 12px; }
@media (hover: none) { .pf-row .pf-acts { display: flex; } }
/* service home (ProjectOS board home) */
.sh { display: flex; flex-direction: column; gap: 10px; }
.sh-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sh-head h1 { margin: 0; letter-spacing: -0.02em; }
.sh-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .sh-tools input { width: 240px; max-width: 100%; } .sh-tools select { width: auto; }
.sh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.sh-kpi { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
.sh-kpi:hover { border-color: var(--line-2); } .sh-kpi:active { transform: scale(.98); } .sh-kpi.on { box-shadow: inset 0 -3px 0 var(--accent); }
.sh-kpi b { display: block; font-size: 20px; letter-spacing: -0.02em; } .sh-kpi span { font-size: 12px; color: var(--muted); } .sh-kpi.alert b { color: var(--bad); } .sh-kpi.relayk b { color: var(--link); }
.sh-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.sh-tabs button { background: none; border: 0; padding: 8px 12px; font: inherit; color: var(--muted); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; }
.sh-tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } .sh-tabs button:active { background: var(--soft); }
.sh-segs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sh-seg { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.sh-seg.on { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; } .sh-seg:active { transform: scale(.97); }
.sh-board { display: grid; grid-template-columns: repeat(6, minmax(170px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.sh-board.months { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); overflow-x: visible; }
.sh-lane { background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 8px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-lane-h b { font-size: 13px; } .sh-lane-h .n { color: var(--muted); font-size: 12px; margin-left: 4px; } .sh-lane-h small { display: block; color: var(--muted); font-size: 11px; }
.sh-card { display: block; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--good); border-radius: 4px; padding: 8px 9px; color: inherit; }
.sh-card:hover { text-decoration: none; border-color: var(--line-2); } .sh-card:active { transform: scale(.99); }
.sh-card.u-late { border-left-color: var(--bad); } .sh-card.u-soon { border-left-color: var(--accent-strong); } .sh-card.u-done { border-left-color: var(--dot); }
.sh-card.today { opacity: .78; }
.sh-card-top { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }
.sh-card h4 { margin: 3px 0 2px; font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sh-card .sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-card .next { font-size: 12px; margin-top: 3px; } .sh-card .next.none { color: var(--warn); }
.sh-segtag { font-size: 10px; font-weight: 700; border-radius: 3px; padding: 0 4px; background: var(--pick-bg); color: var(--ink-2); }
.sh-segtag.om { background: #eef4ff; color: #2a55a3; } .sh-segtag.com { background: #f3eefc; color: #6740a8; }
.sh-new { font-size: 10px; font-weight: 700; color: #fff; background: var(--link); border-radius: 3px; padding: 0 5px; }
.sh-done { color: var(--good); font-weight: 700; } .sh-mine { color: var(--good); }
.sh-empty { color: var(--muted); font-size: 12px; padding: 6px 2px; }
.sh-filter { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sh-filter button { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.sh-more { margin-top: 4px; } .sh-more > summary { cursor: pointer; color: var(--link); font-size: 13px; }
@media (max-width: 980px) { .sh-board { grid-template-columns: minmax(0, 1fr); overflow-x: visible; } .sh-board .sh-lane.sh-lane-empty { display: none; } }
@media (max-width: 700px) { .sh-tools input { width: 100%; } .sh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .sh-kpi { padding: 6px 8px; } .sh-kpi b { font-size: 16px; } .sh-kpi span { font-size: 11px; line-height: 1.25; display: block; } }
/* Relay: For you / Waiting on / Whole team */
.relay-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 12px; }
.relay.snoozed { opacity: .7; } .relay-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 4px; }
.mention-pick { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; } .mention-pick button { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 12px; cursor: pointer; }
/* === end agent A === */


/* === agent B: dispatch board (DispatchOS 18.23 parity) === */
.dx-tabswrap { display: flex; align-items: center; min-width: 0; } .dx-tooltab { position: relative; display: inline-flex; flex: none; }
.dx-tooltab > button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--accent); cursor: pointer; }
.dx-tooltab .menu { position: absolute; }
.dx-dayinfo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dx-wx { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; padding: 0 5px; border-radius: 8px; background: var(--good-bg); color: var(--good); }
.dx-wx.warn { background: var(--warn-bg); color: var(--warn); } .dx-wx.bad { background: var(--bad-bg); color: var(--bad); }
.dx-tgroup { background: var(--soft); border-bottom: 1px solid var(--line-2); padding: 5px 10px; font-size: 12px; }
.dx-card .seg.heat { background: #fff1d6; color: #8a5a00; border-color: #f6d79a; }
.dx-legend .lg-k { white-space: nowrap; margin-right: 8px; }
/* With the job sheet open the undo bar centers in the board area, clear of the sheet and its footer. */
.dx:has(.dx-sheet) .undo-bar { right: calc(420px + var(--sp-4)); }
@media (max-width: 700px) { .dx:has(.dx-sheet) .undo-bar { right: 0; bottom: calc(var(--sp-16, 4rem) + env(safe-area-inset-bottom)); } }
.dx-cell.hint { outline: 2px dashed var(--accent-strong); outline-offset: -3px; background: var(--accent-soft); }
.dx-cellmenu { opacity: .35; } .dx-cell:hover .dx-cellmenu { opacity: 1; }
button.dx-daycell { cursor: pointer; font: inherit; font-size: 11px; align-self: flex-start; }
/* cards: a div with role=button so the status dot and Dispatch can be real buttons inside */
.dx-card { user-select: none; transition: transform .1s; position: relative; }
.dx-card:active { transform: scale(.985); }
.dx-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dx-card.confirmed { box-shadow: inset -3px 0 0 var(--good); }
.dx-card .dx-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; flex: none; cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.08); }
.dx-card .dx-dot:disabled { cursor: default; }
.dx-card .dx-dot:hover:not(:disabled) { transform: scale(1.25); }
.dx-card .ft { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.dx-card .seg, .dx-q .tag, .dx-card .tag { font-size: 10px; padding: 0 4px; border-radius: 3px; background: var(--pick-bg); color: var(--muted); border: 1px solid var(--line-2); }
.dx-card .tag.bad, .dx-q .tag.bad { background: var(--bad); color: #fff; border-color: var(--bad); }
.dx-dsp { margin-left: auto; font: inherit; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--good); color: var(--good); background: #fff; cursor: pointer; }
.dx-dsp:hover { background: var(--good-bg); } .dx-dsp:active { transform: scale(.95); }
.dx-dsp.off { border-color: var(--line-2); color: var(--faint); }
.dx-card.dx-flash::after { content: ''; position: absolute; inset: -3px; border: 3px solid var(--accent); border-radius: 6px; pointer-events: none; animation: dx-flash 1.6s ease-out forwards; }
@keyframes dx-flash { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
.lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: -1px; }
.sdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; flex: none; }
/* drag */
body.dx-dragging, body.dx-dragging * { cursor: grabbing !important; }
body.dx-dragging .dx-cell[data-flag] { background: repeating-linear-gradient(135deg, #eeeae6, #eeeae6 6px, #e3ded9 6px, #e3ded9 12px); opacity: .7; }
.dx-cell.dx-over { background: var(--accent-soft); outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.dx-cell.dx-over[data-flag] { outline-color: var(--bad); background: var(--bad-bg); }
.dx-cell.dx-copy { outline-style: dashed; outline-color: var(--good); background: var(--good-bg); }
.dx-dragsrc { opacity: .35; }
body > .dx-ghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; margin: 0; box-shadow: 0 10px 28px rgba(0,0,0,.22); opacity: .95; will-change: transform; background: #fff; }
.dx-dropprev { position: fixed; z-index: 201; display: none; pointer-events: none; width: 240px; background: #fff; border-radius: 6px; padding: 8px 10px; font-size: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.18); border-top: 3px solid var(--good); }
.dx-dropprev.warn { border-top-color: var(--accent-strong); } .dx-dropprev.no { border-top-color: var(--bad); }
.dx-dropprev .dp-hd { font-weight: 700; } .dx-dropprev .dp-lbl { color: var(--muted); margin-bottom: 3px; } .dx-dropprev .dp-line { line-height: 1.45; }
.dx-dropprev .dp-foot { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
/* popovers and the hover card */
.dx-pop { position: fixed; z-index: 120; background: #fff; border-radius: 6px; box-shadow: 0 6px 22px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05); padding: 6px; animation: dx-pop-in .26s cubic-bezier(.2,.9,.3,1); }
@keyframes dx-pop-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.dx-pop > button[role=menuitem] { display: flex; align-items: center; width: 100%; height: 30px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 13px; cursor: pointer; border-radius: 4px; text-align: left; }
.dx-pop > button[role=menuitem]:hover, .dx-pop > button[role=menuitem]:focus-visible { background: var(--soft); }
.dx-pop > button.cur { font-weight: 700; }
.dx-pop .pop-hd { font-weight: 700; font-size: 12px; padding: 2px 4px 6px; }
.dx-pop .pop-flags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px 6px; }
.dx-pop .pop-flags button { font: inherit; font-size: 12px; padding: 3px 8px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; }
.dx-pop .pop-flags button.cur { background: #ffe7b3; border-color: #f0c873; font-weight: 700; }
.dx-pop button:active { transform: scale(.97); }
.dx-pop .pop-row { display: flex; align-items: center; gap: 6px; padding: 6px 2px; border-top: 1px solid var(--line); }
.dx-pop .pop-row label { font-size: 12px; white-space: nowrap; color: var(--muted); } .dx-pop .pop-row input { height: 28px; min-height: 28px; }
.dx-pop .link { padding: 4px 2px; }
.dx-hover { position: fixed; z-index: 110; width: 290px; background: #fff; border-radius: 6px; padding: 10px 12px; font-size: 12px; box-shadow: 0 8px 26px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05); pointer-events: none; animation: dx-pop-in .2s ease-out; }
.dx-hover .hv-hd { margin-bottom: 6px; } .dx-hover .hv-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px; padding: 1px 0; }
.dx-hover .hv-row span { color: var(--muted); } .dx-hover .hv-row b { font-weight: 600; } .dx-hover .clamp { font-weight: 400; }
.dx-hover .hv-flags { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 5px; } .dx-hover .hv-flags .bad { color: var(--bad); } .dx-hover .hv-flags .warn { color: var(--warn); }
/* needs action strip */
.dx-attn { border: 1px solid var(--note-line); background: var(--note-bg); border-radius: 6px; margin-bottom: 8px; }
.dx-attn.bad { border-color: #f3c2bc; background: #fff8f7; }
.dx-attn-hd { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.dx-attn-hd .n { font-weight: 700; } .dx-attn-hd .must { color: var(--bad); font-weight: 600; font-size: 12px; } .dx-attn-hd .rev { color: var(--warn); font-size: 12px; }
.dx-attn-hd .ico:last-child { margin-left: auto; }
.dx-attn.bad .dx-attn-hd > .ico:first-child { color: var(--bad); } .dx-attn.warn .dx-attn-hd > .ico:first-child { color: var(--warn); }
.dx-attn-list { max-height: 210px; overflow-y: auto; border-top: 1px solid var(--line); }
.dx-attn-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; border-left: 3px solid var(--accent-strong); }
.dx-attn-row.bad { border-left-color: var(--bad); } .dx-attn-row:hover { background: rgba(0,0,0,.03); }
.dx-attn-row .k { font-weight: 700; white-space: nowrap; min-width: 92px; } .dx-attn-row .tx { flex: 1; min-width: 0; }
.dx-attn-row .btn { height: 24px; padding: 0 8px; font-size: 12px; flex: none; }
/* month view */
.dx-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; background: #fff; }
.dx-month .mh { background: var(--soft); padding: 5px 8px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--line-2); }
.dx-month .md { min-height: 96px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx-month .md.out { background: #fbfaf9; } .dx-month .md.out .md-n { color: var(--faint); } .dx-month .md.we { background: #f8f6f3; }
.dx-month .md.today { background: var(--accent-soft); }
.dx-month .md-n { border: 0; background: none; font: inherit; font-weight: 700; font-size: 12px; text-align: left; padding: 0 2px; cursor: pointer; }
.dx-month .md-chip { border: 0; border-left: 3px solid #3d85c6; background: var(--pick-bg); font: inherit; font-size: 11px; text-align: left; padding: 1px 4px; border-radius: 2px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-month .md-chip.s-Dispatched { border-left-color: var(--good); } .dx-month .md-chip.s-In-Progress { border-left-color: #d97706; } .dx-month .md-chip.s-Completed { opacity: .6; }
.dx-month .md-more { border: 0; background: none; font: inherit; font-size: 11px; color: var(--link); text-align: left; padding: 0 2px; cursor: pointer; }
.dx-month .md-off { font-size: 10px; }
.dx-agenda li { padding: 4px 0; border-bottom: 1px solid var(--line); }
/* queue */
.dx-queue { grid-template-rows: 35px auto minmax(0, 1fr); }
.dx-qtabs .stale-n { color: var(--bad); font-weight: 700; font-size: 11px; margin-left: 2px; }
.dx-qhd { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--muted); padding: 8px 2px 4px; }
.dx-fresh { font-size: 11px; color: var(--muted); padding: 0 2px 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .dx-fresh.stale { color: var(--bad); }
.dx-fresh .link { font-size: 11px; }
.dx-q { position: relative; user-select: none; border-left: 3px solid #3d85c6; transition: transform .1s; }
.dx-q:active { transform: scale(.99); } .dx-q.stale { border-left-color: var(--bad); } .dx-q.sched { border-left-color: var(--good); cursor: pointer; }
.dx-q .row1 { display: flex; align-items: center; gap: 6px; }
.dx-q .who { font-size: 13px; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 76px; }
.dx-q.sched .who { padding-right: 0; }
.dx-q .miss { font-size: 11px; color: var(--warn); padding-right: 76px; }
.dx-q .staleflag { font-size: 11px; color: var(--bad); font-weight: 700; } .dx-q .age { margin-left: 0; }
.dx-q .dx-rm { border: 0; background: none; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; } .dx-q .dx-rm:hover { color: var(--bad); }
.dx-q .dx-qsched { position: absolute; right: 8px; bottom: 7px; height: 24px; padding: 0 8px; font-size: 12px; }
.dx-orphan { background: var(--bad-bg); color: var(--bad); border-radius: 4px; padding: 6px 8px; font-size: 12px; margin: 6px 0; }
.dx-next { background: #fff; border: 1px solid var(--pin-line); border-radius: 6px; padding: 6px 10px 8px; margin: 8px 0 4px; }
.dx-next-hd { border: 0; background: none; padding: 0; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--accent-strong); text-transform: uppercase; cursor: pointer; display: flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dx-next-t { font-weight: 600; margin: 3px 0; font-size: 13px; }
.dx-next-fit ul { margin: 3px 0 6px; } .dx-next-fit .ok { color: var(--good); } .dx-next-fit .wn { color: var(--warn); }
.dx-next .row { gap: 6px; } .dx-next .btn { height: 26px; font-size: 12px; }
.undo-bar.warn { background: #6b4400; }
.undo-bar a.link { color: var(--accent); font-weight: 700; }
/* job sheet */
.dx-sheet.jx { grid-template-rows: auto minmax(0, 1fr) auto; }
.jx-head .jx-ref { font-size: 12px; color: var(--muted); } .jx-head h2 { margin: 2px 0 3px; }
.jx-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.jx-status { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); } .jx-status i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.jx-links { font-size: 12px; margin-top: 4px; }
.jx-when { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 14px; } .jx-win { margin-left: auto; font-weight: 600; }
.jx-crew { display: inline-block; padding: 0 6px; margin: 0 4px 2px 0; border-radius: 10px; background: var(--pick-bg); font-weight: 600; font-size: 12px; } .jx-crew.me { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.jx-fold { border-top: 1px solid var(--line); padding: 5px 0; }
.jx-fold > summary { cursor: pointer; font-size: 13px; padding: 3px 0; } .jx-fold > summary .muted { font-size: 12px; margin-left: 4px; }
.jx-foldbody { padding: 4px 0 4px 2px; font-size: 13px; }
.jx-pre { white-space: pre-wrap; } .jx-para { margin: 4px 0; white-space: pre-wrap; } .jx-para b { display: block; font-size: 12px; color: var(--muted); }
.jx-vrow, .jx-caprow { display: grid; grid-template-columns: 1.2fr 1.2fr 1.4fr .8fr; gap: 6px; font-size: 12px; padding: 2px 0; } .jx-caprow { grid-template-columns: 1fr 1.3fr; } .jx-vrow.me { font-weight: 600; } .jx-vrow i { font-weight: 400; color: var(--muted); }
.jx-person a { margin-left: 6px; }
.jx-addr { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 6px 0; } .jx-addr .btn { height: 26px; font-size: 12px; }
.jx-alert { background: var(--note-bg); border: 1px solid var(--note-line); border-radius: 4px; padding: 5px 8px; font-size: 12px; margin-top: 5px; } .jx-alert.bad { background: var(--bad-bg); border-color: #f3c2bc; color: var(--bad); }
.jx-sum { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 4px; background: var(--good-bg); color: var(--good); }
.jx-sum div { display: flex; flex-direction: column; } .jx-sum span { color: var(--ink); font-size: 12px; }
.jx-ready.st-warn .jx-sum { background: var(--warn-bg); color: var(--warn); } .jx-ready.st-blocked .jx-sum { background: var(--bad-bg); color: var(--bad); }
.jx-items { list-style: none; margin: 6px 0; padding: 0; } .jx-items li { display: flex; gap: 6px; font-size: 12px; padding: 3px 0; } .jx-items li span { flex: 1; } .jx-items em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; } .jx-items .blk span { color: var(--bad); }
.jx-foot { border-top: 1px solid var(--line-2); padding: 8px 14px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.jx-foot .jx-scope { display: flex; flex-direction: column; font-size: 12px; } .jx-foot .jx-scope span { color: var(--muted); }
.jx-foot.blocked .jx-scope span { color: var(--bad); }
.jx-acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.jx-morewrap { position: relative; margin-right: auto; }
.jx-menu { position: absolute; bottom: 34px; left: 0; z-index: 70; background: #fff; border-radius: 6px; box-shadow: 0 6px 22px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05); padding: 4px; min-width: 250px; transform-origin: bottom left; animation: dx-pop-in .24s cubic-bezier(.2,.9,.3,1); }
.jx-menu > a, .jx-menu > button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 10px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; border-radius: 4px; }
.jx-menu > a:hover, .jx-menu > button:hover { background: var(--soft); text-decoration: none; } .jx-menu small { color: var(--muted); font-size: 11px; } .jx-menu .danger { color: var(--bad); }
.jx-confirm { display: flex; flex-direction: column; gap: 6px; font-size: 13px; background: var(--accent-soft); border-radius: 4px; padding: 8px; }
/* edit visit */
.ed-sec { border-top: 1px solid var(--line); padding: 8px 0; } .ed-sec h4 { margin: 0 0 6px; color: var(--ink); } .ed-sec > summary { cursor: pointer; padding: 2px 0; }
.cd-grid { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.cd-row { display: grid; grid-template-columns: 150px repeat(7, minmax(34px, 1fr)) 64px; gap: 2px; align-items: center; min-width: 470px; }
.cd-name { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cd-name small { font-weight: 400; color: var(--muted); }
.cd-name select { height: 28px; min-height: 28px; font-size: 12px; }
.cd-day { text-align: center; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; } .cd-day small { font-weight: 700; color: var(--ink); } .cd-day.today small { color: var(--accent-strong); } .cd-day.we { opacity: .7; }
.cd-cell { position: relative; height: 30px; border: 1px solid var(--line-2); border-radius: 4px; background: #fff; font: inherit; font-size: 13px; color: var(--faint); cursor: pointer; }
.cd-cell:active { transform: scale(.95); }
.cd-cell.on { background: var(--good-bg); color: var(--good); border-color: #b7dfc8; font-weight: 700; }
.cd-cell.add { background: var(--good); color: #fff; border-color: var(--good); font-weight: 700; }
.cd-cell.rem { background: var(--bad-bg); color: var(--bad); border-color: #f3c2bc; font-weight: 700; }
.cd-cell:disabled { opacity: .45; cursor: default; } .cd-cell.flag { background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(0,0,0,.05) 4px, rgba(0,0,0,.05) 8px); }
.cd-cell .cd-busy { position: absolute; top: 1px; right: 3px; font-size: 9px; font-style: normal; color: var(--muted); }
.cd-cell .cd-flag { position: absolute; bottom: 0; left: 2px; font-size: 8px; font-style: normal; color: var(--warn); }
.cd-all { text-align: center; } .cd-sum { font-size: 12px; background: var(--accent-soft); padding: 5px 8px; border-radius: 4px; margin: 6px 0 0; }
.ed-visit { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-grid .field.full { grid-column: 1 / -1; }
.ed-foot { border-top: 1px solid var(--line); padding-top: 10px; align-items: center; }
.jx-field li { padding: 1px 0; margin: 0; }
@media (max-width: 1280px) { .dx-body { position: relative; } .dx > .dx-body > .dx-sheet { top: 0; } }
@media (max-width: 980px) { .dx-queue { grid-template-rows: 35px auto auto; } .dx-qlist { max-height: 230px; } }
@media (max-width: 700px) { .dx > .dx-body > .dx-sheet { position: fixed; inset: 48px 0 0 0; z-index: 75; width: 100%; } }
@media (max-width: 700px) {
  .dx-head { gap: 6px; } .dx-head .dx-range { width: 100%; order: 5; margin: 0; } .dx-head input[type=date] { width: 128px; }
  .dx-attn-row { flex-wrap: wrap; } .dx-attn-row .k { min-width: 0; }
  .dx-month .md { min-height: 64px; } .dx-month .md-chip { font-size: 10px; }
  .ed-visit { grid-template-columns: 1fr 1fr; } .cd-row { grid-template-columns: 96px repeat(7, minmax(30px, 1fr)) 52px; min-width: 380px; }
  .jx-vrow { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .dx-pop, .jx-menu, .dx-hover { animation: dx-fade .12s linear; } .dx-card.dx-flash::after { animation: dx-fade 1.6s linear reverse forwards; } .dx-ghost { box-shadow: none; } }
@keyframes dx-fade { from { opacity: 0; } to { opacity: 1; } }
/* === end agent B === */
/* === agent B: sticky crew column (the board scrolls under it) === */
.dx-grid { overflow: visible; }
.dx-crew { position: sticky; left: 0; z-index: 3; }
.dx-corner { position: sticky; left: 0; top: 0; z-index: 5; }
.dx-day { z-index: 4; }
/* === end agent B === */
/* === agent B: crew plan (email sheet + WhatsApp) === */
.plan-bar input, .plan-bar select, .wa-bar input, .wa-bar select { flex: none; min-width: 0; width: auto; } .wa-chip input { width: auto; min-height: 0; }
.plan-email[contenteditable] { outline: none; border: 1px dashed transparent; border-radius: 6px; padding: 4px; max-width: 780px; }
.plan-email[contenteditable]:hover { border-color: var(--line-2); } .plan-email[contenteditable]:focus { border-color: var(--focus); }
.wa-bar { align-items: center; } .wa-chip { border: 1px solid var(--line-2); border-radius: 14px; padding: 2px 10px; } .wa-chip.on { background: var(--good-bg); border-color: #b7dfc8; }
.wa-panel { border: 1px solid var(--line-2); border-radius: 6px; background: #fff; max-width: 720px; margin: 8px 0; }
.wa-head { display: flex; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid var(--line); }
.wa-text { margin: 0; min-height: 220px; max-height: 60vh; overflow: auto; outline: none; white-space: pre-wrap; word-break: break-word; }
@media print { .dxp-head, .plan-bar { display: none !important; } .plan-email[contenteditable] { border: 0; } }
/* === end agent B === */



/* === agent c: tech phone app (My day) === */
body.fd-phone { background: var(--canvas); }
.fd-app { min-height: 100vh; min-height: 100dvh; }
.fd-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.fd-head { position: sticky; top: 0; z-index: 30; background: var(--top); color: #fff; padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px; }
.fd-head > * { max-width: 688px; margin-left: auto; margin-right: auto; }
.fd-head-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.fd-brand { display: flex; align-items: center; gap: 10px; }
.fd-brand img { width: 32px; height: 32px; border-radius: 50%; background: #fff; padding: 2px; object-fit: contain; }
.fd-brand > span { display: flex; flex-direction: column; line-height: 1.1; } .fd-brand b { font-size: 14px; letter-spacing: .08em; } .fd-brand span span { font-size: 12px; color: #d9d4cc; }
.fd-ibtn { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border: 0; background: none; color: inherit; border-radius: 8px; cursor: pointer; }
.fd-head .fd-ibtn:active { background: var(--top-hover); }
.fd-dayrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fd-date { flex: 1; min-height: 44px; border: 0; border-radius: 8px; background: var(--top-chip); color: #fff; font: inherit; font-size: 16px; font-weight: 600; }
.fd-cover { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 13px; color: #d9d4cc; }
.fd-cover select { flex: 1; min-height: 40px; font-size: 15px; }
.fd-cover.desk { color: var(--muted); margin: 0; } .fd-cover.desk select { min-height: 30px; font-size: 13px; width: auto; }
.fd-deskhead { margin: 0 0 8px; flex-wrap: wrap; }
.fd-body { padding: 12px 16px 24px; max-width: 720px; width: 100%; margin: 0 auto; }
.fd-body.with-dock { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.fd-sync { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; padding: 8px 12px; border-radius: 8px; background: var(--pick-bg); color: var(--muted); margin-bottom: 10px; }
.fd-sync.off { background: var(--warn-bg); color: var(--warn); }
.fd-skel div { height: 64px; border-radius: 8px; background: linear-gradient(90deg, var(--soft), var(--line-2), var(--soft)); background-size: 200% 100%; margin-bottom: 10px; animation: fd-sk 1.4s linear infinite; }
@keyframes fd-sk { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .fd-skel div { animation: none; } }
.fd-greet { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.fd-hi { min-width: 0; } .fd-hi b { font-size: 17px; }
.fd-clock { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; text-align: center; max-width: 150px; }
.fd-go { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--good); color: #fff; font: inherit; font-size: 16px; font-weight: 800; letter-spacing: .06em; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.fd-go.stop { background: var(--bad); }
.fd-go:active, .fd-big:active, .fd-step:active, .fd-sb:active, .fd-dock-btn:active, .fd-mat-row:active { transform: scale(.97); }
.fd-clock-what.md-clock-face { min-width: 0; padding: 4px 8px; font-size: 12px; background: none; }
.fd-clock-what.md-clock-face.on { background: var(--good-bg); border-radius: 6px; }
.fd-clock-what b { display: block; font-size: 13px; }
.fd-lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.fd-off { font-size: 13px; margin: 0 0 8px; } .fd-off .fd-lbl { display: inline; margin-right: 6px; }
.fd-daymsg { background: var(--note-bg); border: 1px solid var(--note-line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; }
.fd-row-card, .fd-card { border-radius: 8px; margin-bottom: 10px; }
.fd-row-card.next, .fd-card.next { box-shadow: inset 4px 0 0 var(--accent); }
.fd-row-card.done, .fd-card.done { opacity: .72; }
.fd-row { gap: 12px; min-height: 64px; padding: 12px 14px; }
.fd-row-t { flex: none; width: 66px; font-weight: 700; font-size: 14px; display: flex; flex-direction: column; } .fd-row-t small { font-weight: 400; color: var(--muted); font-size: 11px; }
.fd-row-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fd-row-n { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-row-s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-next { font-style: normal; font-size: 11px; font-weight: 700; background: var(--accent); color: var(--accent-ink); border-radius: 3px; padding: 1px 5px; margin-right: 6px; vertical-align: 2px; }
.fd-warn { color: var(--bad); font-weight: 700; }
.fd-card { padding: 12px 14px 14px; }
.fd-card-hd { display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.fd-card-hd .link { min-height: 40px; padding: 0 6px; }
.fd-next-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-strong); }
.fd-notes { display: grid; gap: 8px; margin-bottom: 10px; }
.fd-note { border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; font-size: 14px; background: var(--soft); }
.fd-note.new { background: var(--warn-bg); border-color: #f1d3a0; }
.fd-got { margin-top: 8px; min-height: 44px; width: 100%; border: 0; border-radius: 8px; background: var(--ink-2); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.fd-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fd-chip { min-height: 36px; border-radius: 18px; border: 1px solid var(--line-2); background: #fff; padding: 6px 12px; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.fd-chip.hot { background: var(--bad-bg); color: var(--bad); border-color: #f3c3bc; font-weight: 600; }
.fd-chip.upd { background: #eaf2fd; color: var(--link); border-color: #c8dcf7; }
.fd-chip.warn { background: var(--warn-bg); color: var(--warn); border-color: #f1d3a0; cursor: default; font-weight: 600; }
.fd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fd-title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; min-width: 0; overflow-wrap: anywhere; }
.fd-code { display: block; font-size: 13px; font-weight: 700; color: var(--accent-strong); letter-spacing: .02em; }
.fd-top-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.fd-pe { font-size: 12px; color: var(--muted); }
.fd-meta { font-size: 14px; margin: 6px 0 4px; overflow-wrap: anywhere; }
.fd-with { font-size: 13px; color: var(--muted); margin: 2px 0; }
.fd-line { font-size: 14px; margin: 6px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.fd-line .fd-lbl { display: inline; margin: 0; }
.fd-tel { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 20px; background: var(--good-bg); color: var(--good); font-weight: 600; }
.fd-sec { font-size: 14px; margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fd-sec.find { background: var(--soft); border-radius: 6px; padding: 8px 10px; }
.fd-js { display: block; margin-top: 4px; color: var(--muted); }
.fd-chg { background: #eaf2fd; border-radius: 6px; padding: 4px 6px; margin-left: -6px; margin-right: -6px; }
.fd-chg-t { font-size: 11px; font-weight: 700; color: var(--link); text-transform: uppercase; margin-left: 6px; }
.fd-chg-line { font-size: 13px; color: var(--link); font-weight: 600; margin: 6px 0; }
.fd-big { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; margin-top: 8px; cursor: pointer; text-align: center; padding: 8px 14px; }
.fd-big.primary { background: var(--accent); border-color: var(--accent-strong); color: var(--accent-ink); }
.fd-big.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.fd-big.quiet { border-color: transparent; background: none; color: var(--muted); }
.fd-big:disabled { opacity: .5; cursor: default; }
.fd-arrive { margin: 10px 0 0; } .fd-big.go { background: var(--good); border-color: var(--good); color: #fff; }
.fd-allgood { background: var(--good-bg); color: var(--good); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.fd-steps { display: grid; gap: 8px; margin-top: 12px; }
.fd-step { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; color: var(--ink); }
.fd-step-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); border: 1px solid var(--line-2); font-size: 14px; font-weight: 700; }
.fd-step-l { flex: 1; min-width: 0; }
.fd-step.cur { background: var(--accent); border-color: var(--accent-strong); color: var(--accent-ink); box-shadow: 0 2px 8px rgba(184,128,13,.25); }
.fd-step.cur .fd-step-n { background: #fff; border-color: var(--accent-strong); }
.fd-step.did { color: var(--muted); } .fd-step.did .fd-step-n { background: var(--good); border-color: var(--good); color: #fff; }
.fd-step:disabled { cursor: default; }
.fd-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fd-extras.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-sb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 6px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); text-align: center; }
.fd-sb .ico { width: 20px; height: 20px; }
.fd-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--canvas) 70%, rgba(242,240,238,0)); }
.fd-dock-btn { display: block; width: 100%; max-width: 688px; margin: 0 auto; min-height: 58px; border: 0; border-radius: 12px; background: var(--top); color: #fff; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.fd-toast { top: calc(env(safe-area-inset-top, 0px) + 112px); width: max-content; max-width: calc(100vw - 32px); text-align: center; z-index: 95; }
.fd-dlg { display: grid; gap: 0; }
.fd-dlg-body { font-size: 15px; margin-bottom: 4px; line-height: 1.5; }
.fd-dlg-in { font-size: 16px; min-height: 88px; margin-top: 8px; }
.fd-dlg-err { color: var(--bad); font-size: 13px; margin-top: 6px; }
.fd-check li { padding: 4px 0; } .fd-check label { min-height: 44px; align-items: center; font-size: 15px; } .fd-check input { width: 24px; height: 24px; min-height: 24px; }
.fd-matcard { background: var(--soft); border-radius: 8px; padding: 8px 10px; font-size: 14px; margin-bottom: 8px; }
.fd-mat { list-style: none; padding: 0; margin: 0 0 8px; }
.fd-mat li { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.fd-mat li.edit { padding: 6px 0; gap: 8px; } .fd-mat li.edit input { min-height: 44px; font-size: 16px; }
.fd-mat-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 15px; text-align: left; cursor: pointer; color: var(--ink); }
.fd-box { flex: none; width: 28px; height: 28px; border-radius: 6px; border: 2px solid var(--line-2); display: grid; place-items: center; background: #fff; }
.fd-mat li.on .fd-box { background: var(--good); border-color: var(--good); color: #fff; }
.fd-mat li.on .fd-mat-t { color: var(--muted); } .fd-mat li.on .fd-mat-x { text-decoration: line-through; }
.fd-mat-t { min-width: 0; overflow-wrap: anywhere; } .fd-mat-t small { display: block; font-size: 12px; color: var(--muted); text-decoration: none; }
.fd-del { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); border-radius: 8px; cursor: pointer; font: inherit; font-weight: 700; }
.fd-del.armed { background: var(--bad); color: #fff; padding: 0 10px; }
.fd-addrow { display: flex; gap: 8px; } .fd-addrow input { min-height: 44px; font-size: 16px; } .fd-addrow .btn { height: 44px; }
.fd-flist { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.fd-ftile { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px; background: #fff; font: inherit; font-size: 12px; color: var(--ink); text-align: left; cursor: pointer; min-height: 100px; overflow-wrap: anywhere; }
.fd-ftile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.fd-ftile.doc { justify-content: center; align-items: flex-start; } .fd-ftile small { color: var(--muted); }
.fd-viewer img { width: 100%; max-height: 70vh; object-fit: contain; background: #000; border-radius: 6px; }
.fd-pick { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.fd-people > div { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.fd-tc { display: grid; gap: 0; margin-bottom: 8px; }
.fd-tc-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.fd-tc-row.open { background: var(--good-bg); }
.fd-tc-t small { display: block; color: var(--muted); }
.fd-tc-tot { font-weight: 700; padding: 8px 0; text-align: right; }
@media (max-width: 700px) {
  body.fd-phone .modal-back { align-items: end; padding: 0; }
  body.fd-phone .modal { width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .fd-go { width: 68px; height: 68px; }
}

/* === merge: phone top bar and home tiles === */
/* Phones: the module links live in the All modules menu (left button); the bar keeps logo, new, search and account. */
@media (max-width: 700px) {
  .tb-nav { display: none; }
  .tb-right { margin-left: auto; }
  .sh-kpis { display: flex; overflow-x: auto; scrollbar-width: none; gap: var(--sp-2); scroll-snap-type: x proximity; }
  .sh-kpis::-webkit-scrollbar { display: none; }
  .sh-kpis .sh-kpi { flex: 0 0 9.5rem; scroll-snap-align: start; }
}
/* === end merge === */

/* ================================================================ phones: dialogs become bottom sheets */
@media (max-width: 700px) {
  .modal-back { place-items: end stretch; padding: var(--sp-6) 0 0; }
  .modal, .modal-wide { width: 100%; max-height: calc(var(--vh) - var(--sp-6)); border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .toast { top: auto; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); transform-origin: 50% 100%; }
  .toast.anchored { bottom: auto; }
}

/* ================================================================ accessibility preferences */
/* Less motion: springs become short fades (motion.js); no press scaling, pulsing or nudging. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; scroll-behavior: auto !important; }
  .btn:active, .ibtn:active, .tab:active, .tb-icon:active, .tb-apps:active, .tb-new button:active, .tb-avatar:active, .tb-persp:active, .seg button:active,
  .est-pill:active, .link:active, .linkbtn:active, .icon-btn:active, .dx-card:active, .dx-flag:active, .dx-tabs a:active, .bp-step:active, .tk-rail button:active,
  .tk-foot .act:active, .pf-folders button:active, .vw-star:active, .phase-count:active { transform: none !important; }
  .skel { animation: none; opacity: .8; }
  .btn[data-state=bad] { animation: none; }
  .btn[data-state=busy]::after { animation-duration: 2.4s; }
}
/* Less transparency: solid bars. */
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--top); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* More contrast: solid backgrounds, clear borders, no soft fades. */
@media (prefers-contrast: more) {
  :root { --line: #b3aca6; --line-2: #8c847d; --line-3: #625b55; --muted: #3b4049; --faint: #59606a; --fade: transparent; --top-glass: var(--top); --scrim: rgb(0 0 0 / .62); --focus-ring: rgb(19 102 214 / .5); }
  .topbar { background: var(--top); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 #000; }
  .lv-head, .lv-filters, .dx-head, .dx-qtabs, .dx-sheet-head, .tk-side-head, .modal-head, .tk-tabs, .dx-tabsrow { box-shadow: inset 0 -1px 0 var(--line-2); }
  .menu, .modal, .tb-search, .picker-list, .vw-multi-pop, .md-clock-menu, .toast { box-shadow: none; border: 1px solid var(--ink); }
  .badge { border-color: currentColor; }
  .main a:not([class]) { text-decoration: underline; }
  :focus-visible { outline-width: 3px; }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"] { --line: #5f5952; --line-2: #8a837a; --line-3: #a59e95; --muted: #d6d1ca; --faint: #b4aea6; }
}
@media (forced-colors: active) {
  .skel { background: GrayText; }
  .btn[data-state=busy]::after { border-color: ButtonText; border-right-color: transparent; }
  .tb-link.active::after, .tab.active { forced-color-adjust: none; }
}

/* === Tickets (Desk feel + CRM tools): web/desk.js === */
.main.flush > .dk { flex: 1; min-height: 0; }
.dk { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 0; height: 100%; background: var(--canvas); transition: grid-template-columns calc(var(--spring-response) * 1s) var(--ease-out); }
.dk.dk-nopanel { grid-template-columns: 0 minmax(0, 1fr); }
.dk-views { background: var(--soft); border-right: 1px solid var(--line-2); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dk-nopanel .dk-views { visibility: hidden; }
.dk-views-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-3) var(--sp-2) var(--sp-4); }
.dk-views-head b { font-size: var(--fs-xl); letter-spacing: -.015em; }
.dk-vsearch { margin: 0 var(--sp-3) var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 0 var(--sp-2); color: var(--faint); }
.dk-vsearch input { border: 0; padding: var(--sp-1) 0; min-height: 30px; background: none; }
.dk-vsearch input:focus { outline: none; }
.dk-vsearch:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.dk-vlist { overflow: auto; padding: 0 var(--sp-2) var(--sp-4); flex: 1; overscroll-behavior: contain; }
.dk-vgroup { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; padding: var(--sp-4) var(--sp-2) var(--sp-1); }
.dk-vitem { display: flex; align-items: center; border-radius: var(--r-md); }
.dk-vitem > button, .dk-vitem > a { flex: 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; text-align: left; background: none; border: 0; color: var(--ink-2); padding: 7px var(--sp-2); border-radius: var(--r-md); font-size: var(--fs-base); cursor: pointer; text-decoration: none;
  transition: background var(--press-ms) var(--ease-out), transform var(--press-ms) var(--ease-out); }
.dk-vitem > button span, .dk-vitem > a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-vitem i { font-style: normal; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.dk-vitem > button:hover, .dk-vitem > a:hover { background: var(--hover); }
.dk-vitem > button:active, .dk-vitem > a:active { background: var(--press); transform: scale(.985); }
.dk-vitem.on > button { background: var(--panel); box-shadow: var(--sh-hover); font-weight: 600; color: var(--ink); }
.dk-vitem.on > button i { color: var(--accent-strong); font-weight: 600; }
.dk-vitem .ico { color: var(--accent-strong); }
.dk-vx { opacity: 0; background: none; border: 0; color: var(--faint); width: 24px; height: 24px; border-radius: var(--r-sm); cursor: pointer; }
.dk-vitem:hover .dk-vx, .dk-vx:focus-visible { opacity: 1; }
.dk-main-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dk-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-2); }
.dk-head h1 { margin: 0; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-total { font-size: var(--fs-base); color: var(--muted); background: var(--hover); border-radius: var(--r-pill); padding: 1px var(--sp-2); font-variant-numeric: tabular-nums; }
.dk-search { display: flex; align-items: center; gap: var(--sp-2); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 0 var(--sp-3); width: min(320px, 34vw); color: var(--faint); transition: width .25s var(--ease-out), box-shadow .15s; }
.dk-search input { border: 0; background: none; padding: 0; min-height: 34px; }
.dk-search input:focus { outline: none; }
.dk-search:focus-within { width: min(420px, 44vw); border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.dk-seg { display: inline-flex; background: var(--hover); border-radius: var(--r-lg); padding: 2px; gap: 2px; }
.dk-seg button { border: 0; background: none; width: 32px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: background .15s, color .15s, transform var(--press-ms) var(--ease-out); }
.dk-seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--sh-hover); }
.dk-seg button:active { transform: scale(var(--press-scale)); }
.dk-tools { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-3); flex-wrap: wrap; position: relative; }
.dk-tools select { width: auto; min-height: 30px; border-radius: var(--r-pill); padding: 0 var(--sp-6) 0 var(--sp-3); font-size: var(--fs-sm); background-color: var(--panel); }
.dk-sort { display: inline-flex; align-items: center; gap: 2px; }
.dk-link { background: none; border: 0; color: var(--link); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-md); cursor: pointer; }
.dk-link:hover { background: var(--hover); }
.dk-link:active { transform: scale(var(--press-scale)); }
.dk-colpick { display: flex !important; align-items: center; gap: var(--sp-2); padding: 5px var(--sp-3); font-size: var(--fs-base); cursor: pointer; }
.dk-colpick input { width: auto; min-height: 0; }
.dk-bulk { display: flex; align-items: center; gap: var(--sp-2); margin: 0 var(--sp-5) var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--accent-soft); border: 1px solid var(--pin-line); border-radius: var(--r-lg); animation: dk-in .22s var(--ease-out); }
@keyframes dk-in { from { opacity: 0; transform: translateY(-4px); } }
.dk-body { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--sp-5) var(--sp-6); transition: opacity .18s; }
.dk-body.dk-stale { opacity: .6; }
.dk-list { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-1); }
.dk-row { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) 150px 150px 170px 14px; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4) 10px var(--sp-3); border-bottom: 1px solid var(--line); position: relative; transition: background .12s; }
.dk-row:last-child { border-bottom: 0; }
.dk-row:hover { background: var(--row-hover); }
.dk-row:active { background: var(--hover); }
.dk-row.dk-sel { background: var(--accent-soft); }
.dk-row.dk-cur::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.dk-check input, .dk-tcheck input { width: 16px; height: 16px; min-height: 0; accent-color: var(--accent-strong); cursor: pointer; }
.dk-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em;
  color: hsl(var(--h) 45% 28%); background: hsl(var(--h) 60% 92%); flex: none; }
.dk-av.sm { width: 24px; height: 24px; font-size: 10px; }
.dk-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.dk-subj { font-weight: 600; font-size: var(--fs-base); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.dk-main:hover .dk-subj { color: var(--link); }
.dk-meta { display: flex; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; min-width: 0; }
.dk-meta > * { overflow: hidden; text-overflow: ellipsis; }
.dk-meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--dot); margin-right: var(--sp-2); vertical-align: middle; }
.dk-meta b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.dk-time { flex: none; }
.dk-duetag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.dk-duetag.late { color: var(--bad); font-weight: 500; }
.dk-duetag.soon { color: var(--warn); font-weight: 500; }
.dk-status { justify-self: start; font-size: var(--fs-sm); font-weight: 500; padding: 2px var(--sp-2); border-radius: var(--r-pill); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; background: var(--hover); color: var(--ink-2); }
.dk-status.st-open { background: #e8f0fe; color: #1f4fb0; }
.dk-status.st-wait { background: var(--warn-bg); color: var(--warn); }
.dk-status.st-go { background: var(--good-bg); color: var(--good); }
.dk-status.st-hold { background: #f1ecfb; color: #5b3aa8; }
.dk-status.st-close { background: #e6f4f3; color: var(--teal); }
.dk-status.st-done { background: var(--hover); color: var(--muted); }
.dk-owner { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sm); }
.dk-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-prio { width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); justify-self: center; }
.dk-prio.p-high, .dk-prio.p-urgent { background: var(--prio-high); }
.dk-prio.p-medium { background: var(--prio-med); }
.dk-prio.p-low { background: var(--prio-low); }
.dk-more { display: block; margin: var(--sp-4) auto 0; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); cursor: pointer; transition: transform var(--press-ms) var(--ease-out); }
.dk-more:active { transform: scale(var(--press-scale)); }
.dk-note { text-align: center; margin-top: var(--sp-3); }
.dk-tablewrap { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: auto; box-shadow: var(--sh-1); max-height: 100%; }
.dk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.dk-table th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600; font-size: var(--fs-sm); color: var(--muted); padding: var(--sp-2) var(--sp-3); white-space: nowrap;
  background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6); border-bottom: 1px solid var(--line-2); }
.dk-table td { padding: 9px var(--sp-3); border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.dk-table tr:hover td { background: var(--row-hover); }
.dk-table tr.dk-sel td { background: var(--accent-soft); }
.dk-table tr.dk-cur td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.dk-table .c-subject a { color: var(--ink); font-weight: 600; }
.dk-table .c-subject a:hover { color: var(--link); }
.dk-tcheck { width: 36px; }
.dk-kanban { display: flex; gap: var(--sp-3); align-items: flex-start; overflow-x: auto; padding-bottom: var(--sp-3); min-height: 100%; scroll-snap-type: x proximity; }
.dk-lane { flex: 0 0 272px; background: var(--hover); border-radius: var(--r-xl); padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); scroll-snap-align: start; }
.dk-lane-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-1); }
.dk-lane-head i { font-style: normal; font-size: var(--fs-sm); color: var(--muted); }
.dk-card { background: var(--panel); border-radius: var(--r-lg); padding: var(--sp-3); box-shadow: var(--sh-1), 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: var(--sp-1); color: inherit; text-decoration: none;
  transition: transform var(--press-ms) var(--ease-out), box-shadow .15s; }
.dk-card:hover { box-shadow: var(--sh-hover), 0 0 0 1px var(--line-2); }
.dk-card:active { transform: scale(.98); }
.dk-card b { font-size: var(--fs-base); line-height: 1.3; }
.dk-card-top { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.dk-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-1); }
.dk-card .muted { font-size: var(--fs-sm); }
@media (max-width: 1180px) { .dk-row { grid-template-columns: 28px 36px minmax(0, 1fr) 130px 130px 14px; } .dk-owner { display: none; } }
@media (max-width: 760px) {
  .dk { grid-template-columns: 0 minmax(0, 1fr); }
  .dk-views { visibility: hidden; }
  .dk:not(.dk-nopanel) .dk-views { visibility: visible; position: fixed; z-index: 40; top: var(--topbar-h); bottom: 0; left: 0; width: 82vw; max-width: 300px; box-shadow: var(--sh-sheet); animation: dk-slide .3s var(--ease-out); }
  @keyframes dk-slide { from { transform: translateX(-100%); } }
  .dk-head, .dk-tools { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .dk-body { padding: 0 var(--sp-3) var(--sp-6); }
  .dk-search { width: 100%; order: 9; flex: 1 1 100%; } .dk-search:focus-within { width: 100%; }
  .dk-head h1 { font-size: 1.125rem; }
  .dk-head { flex-wrap: wrap; }
  .dk-row { grid-template-columns: 24px 32px minmax(0, 1fr); row-gap: var(--sp-1); }
  .dk-row .dk-due, .dk-row .dk-status { grid-column: 3; }
  .dk-row .dk-prio { display: none; }
  .dk-row .dk-status { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .dk, .dk-bulk, .dk-views { transition: none; animation: none !important; } }
:root[data-theme="dark"] .dk-table th { background: rgb(32 30 27 / .85); }

/* === Quick view sheet: web/quickview.js === */
.qv-root { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.qv-scrim { position: absolute; inset: 0; background: rgb(20 16 10 / .16); pointer-events: auto; opacity: 0; }
.qv-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(1080px, 94vw); display: flex; pointer-events: auto; will-change: transform; transform: translate3d(100%,0,0);
  background: var(--canvas); box-shadow: -1px 0 0 var(--line-2), -24px 0 64px rgb(0 0 0 / .18); border-radius: var(--r-xl) 0 0 var(--r-xl); overflow: hidden; }
.qv-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; cursor: grab; z-index: 2; touch-action: none; display: grid; place-items: center; }
.qv-grip span { width: 4px; height: 44px; border-radius: 4px; background: var(--line-3); opacity: .7; transition: opacity .15s, height .2s var(--ease-out); }
.qv-grip:hover span { opacity: 1; height: 64px; }
.qv-grip:active { cursor: grabbing; }
.qv-list { width: 272px; flex: none; border-right: 1px solid var(--line-2); background: var(--soft); overflow: auto; padding: var(--sp-3) var(--sp-2) var(--sp-4) var(--sp-4); overscroll-behavior: contain; }
.qv-list-head { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; padding: var(--sp-2) var(--sp-2) var(--sp-2); display: flex; justify-content: space-between; }
.qv-item { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: var(--sp-2) var(--sp-3); border: 0; background: none; border-radius: var(--r-lg); cursor: pointer; color: var(--ink-2);
  transition: background .12s, transform var(--press-ms) var(--ease-out); margin-bottom: 2px; }
.qv-item:hover { background: var(--hover); }
.qv-item:active { transform: scale(.985); }
.qv-item.on { background: var(--panel); box-shadow: var(--sh-hover), 0 0 0 1px var(--line-2); }
.qv-item.closed { opacity: .62; }
.qv-item b { font-size: var(--fs-base); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qv-item .muted { font-size: var(--fs-sm); }
.qv-item-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.qv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.qv-head { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-5) var(--sp-5) var(--sp-3) var(--sp-6); background: var(--panel); border-bottom: 1px solid var(--line-2); }
.qv-title { flex: 1; min-width: 0; }
.qv-kicker { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.qv-title h2 { margin: 2px 0 var(--sp-2); font-size: 1.375rem; line-height: 1.2; letter-spacing: -.02em; }
.qv-pills { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.qv-pill { font-size: var(--fs-sm); padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--hover); color: var(--ink-2); white-space: nowrap; }
.qv-pill.good { background: var(--good-bg); color: var(--good); }
.qv-actions { display: flex; align-items: center; gap: var(--sp-1); flex: none; }
.qv-last { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-6); background: var(--pick-bg); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.qv-last span { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qv-last .ico { margin-top: 2px; color: var(--muted); flex: none; }
.qv-last a { flex: none; }
.qv-body { flex: 1; overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-6) var(--sp-6); overscroll-behavior: contain; }
.qv-foot { display: flex; gap: var(--sp-4); padding: var(--sp-2) var(--sp-6); border-top: 1px solid var(--line); background: var(--panel); }
.qv-foot kbd { font: inherit; font-size: 11px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; margin-right: 3px; background: var(--soft); }
@media (max-width: 760px) {
  .qv-sheet { width: 100vw; border-radius: 0; flex-direction: column; }
  .qv-list { width: auto; border-right: 0; border-bottom: 1px solid var(--line-2); display: flex; gap: var(--sp-2); overflow-x: auto; overflow-y: hidden; padding: var(--sp-2) var(--sp-3); flex: none; scroll-snap-type: x proximity; }
  .qv-list-head { display: none; }
  .qv-item { flex: 0 0 200px; margin: 0; scroll-snap-align: start; }
  .qv-head, .qv-last, .qv-body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .qv-head { flex-wrap: wrap; } .qv-actions { width: 100%; justify-content: flex-end; }
  .qv-foot { display: none; } .qv-grip { display: none; }
}
@media (prefers-reduced-transparency: reduce) { .qv-scrim { background: rgb(20 16 10 / .3); } }

/* === One customer, one page: web/customer360.js === */
.c3 { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 1320px; }
.c3-glance { background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--sh-1), 0 0 0 1px var(--line); padding: var(--sp-4) var(--sp-5); }
.c3-line { margin: 0 0 var(--sp-3); font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); letter-spacing: -.005em; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.c3-line > span:first-child { font-weight: 600; color: var(--ink); }
.c3-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--dot); display: inline-block; }
.c3-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.c3-act { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-3); border-radius: var(--r-pill); background: var(--hover); color: var(--ink-2); border: 0; font: inherit; font-size: var(--fs-sm); cursor: pointer; text-decoration: none; max-width: 340px;
  transition: background .12s, transform var(--press-ms) var(--ease-out); }
.c3-act span { font-weight: 600; white-space: nowrap; }
.c3-act small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: inherit; }
.c3-act:hover { background: var(--press); text-decoration: none; }
.c3-act:active { transform: scale(var(--press-scale)); }
.c3-act.primary { background: var(--accent); color: var(--accent-ink); }
.c3-act.primary:hover { background: var(--accent-hover); }
.c3-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: var(--sp-4); align-items: start; }
.c3-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.c3-card { background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--sh-1), 0 0 0 1px var(--line); padding: var(--sp-4); min-width: 0; }
.c3-card > header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.c3-card h3 { margin: 0; font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--sp-2); letter-spacing: -.01em; }
.c3-card h3 .ico { color: var(--accent-strong); }
.c3-count { font-size: var(--fs-sm); color: var(--muted); }
.c3-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2); }
.c3-tcard { text-align: left; font: inherit; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); border-radius: var(--r-lg); border: 0; background: var(--soft); box-shadow: 0 0 0 1px var(--line); cursor: pointer; color: inherit;
  transition: box-shadow .15s, background .15s, transform var(--press-ms) var(--ease-out); }
.c3-tcard:hover { background: var(--panel); box-shadow: var(--sh-hover), 0 0 0 1px var(--line-2); }
.c3-tcard:active { transform: scale(.985); }
.c3-tcard.closed { opacity: .7; }
.c3-tcard-top { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.c3-tcard-top b { color: var(--ink-2); font-weight: 600; }
.c3-tcard-subj { font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c3-tcard-foot { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; font-size: var(--fs-sm); }
.c3-phase { background: var(--accent-soft); color: var(--accent-text); padding: 1px var(--sp-2); border-radius: var(--r-pill); font-weight: 500; }
.c3-next { color: var(--ink-2); } .c3-next.none { color: var(--faint); }
.c3-empty { color: var(--muted); padding: var(--sp-3); background: var(--soft); border-radius: var(--r-lg); }
.c3-empty b { color: var(--ink-2); }
.c3-more { background: none; border: 0; color: var(--link); font: inherit; font-size: var(--fs-sm); padding: var(--sp-2) 0 0; cursor: pointer; display: inline-flex; gap: var(--sp-1); align-items: center; }
.c3-chips { display: inline-flex; background: var(--hover); border-radius: var(--r-pill); padding: 2px; gap: 2px; }
.c3-chips button { border: 0; background: none; font: inherit; font-size: var(--fs-sm); padding: 3px var(--sp-3); border-radius: var(--r-pill); color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.c3-chips button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--sh-hover); }
.c3-note { display: flex; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-3); }
.c3-note textarea { resize: none; min-height: 38px; border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3); background: var(--soft); transition: background .15s, box-shadow .15s; }
.c3-note textarea:focus { background: var(--panel); outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--focus); }
.c3-sys + .c3-sys { border-top: 1px solid var(--line); margin-top: var(--sp-3); padding-top: var(--sp-3); }
.c3-sys-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.c3-sys-head .muted { font-size: var(--fs-sm); }
.c3-sys-big { display: flex; gap: var(--sp-4); margin: var(--sp-2) 0; color: var(--muted); font-size: var(--fs-sm); }
.c3-sys-big b { font-size: 1.5rem; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-right: 2px; }
.c3-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--sp-3); margin: 0; font-size: var(--fs-sm); }
.c3-facts dt { color: var(--muted); } .c3-facts dd { margin: 0; color: var(--ink-2); }
.c3-sites { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.c3-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.c3-rows li { display: flex; flex-wrap: wrap; gap: 2px var(--sp-2); align-items: baseline; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
.c3-rows li:last-child { border-bottom: 0; }
.c3-rows li > span:first-child.muted { width: 104px; flex: none; font-size: var(--fs-sm); }
.c3-rows li > span:not(.muted) { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 980px) { .c3-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .c3-glance, .c3-card { padding: var(--sp-3); border-radius: var(--r-lg); } .c3-line { font-size: var(--fs-base); } .c3-tickets { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================================
   LIQUID GLASS - the Estimate Builder surface system, app-wide.
   Two brand colors sampled off the Solar Gain mark (navy + gold), a soft color mesh behind
   everything, translucent white surfaces, pill controls. Each module adds its own accent
   (its "personality") through data-module on <main>.
   ===================================================================================== */
:root {
  --sg-blue: #243D90; --sg-blue-lift: #3552B5; --sg-blue-rgb: 36 61 144;
  --sg-gold: #FCB537; --sg-gold-deep: #E39A17; --sg-gold-rgb: 252 181 55;
  --mesh-base: #EDF0F8;
  --canvas: transparent;
  --panel: rgb(255 255 255 / .72); --panel-solid: #fff; --soft: rgb(255 255 255 / .46);
  --hover: rgb(var(--sg-blue-rgb) / .06); --press: rgb(var(--sg-blue-rgb) / .11); --row-hover: rgb(255 255 255 / .6);
  --line: rgb(var(--sg-blue-rgb) / .08); --line-2: rgb(var(--sg-blue-rgb) / .14); --line-3: rgb(var(--sg-blue-rgb) / .24);
  --ink: #10162B; --ink-2: rgb(16 22 43 / .8); --muted: rgb(16 22 43 / .58); --faint: rgb(16 22 43 / .38); --icon: rgb(16 22 43 / .7);
  --link: var(--sg-blue-lift); --focus: var(--sg-blue-lift); --focus-ring: rgb(var(--sg-blue-rgb) / .22);
  --accent: var(--sg-gold); --accent-hover: #FDBF4F; --accent-ink: #2A1C00; --accent-strong: var(--sg-gold-deep); --accent-text: #8A5A00; --accent-soft: rgb(var(--sg-gold-rgb) / .16);
  --top: #10162B; --top-glass: rgb(16 22 43 / .78); --top-chip: rgb(255 255 255 / .08); --top-chip-line: rgb(255 255 255 / .14);
  --sh-1: 0 1px 1px rgb(var(--sg-blue-rgb) / .05), 0 6px 18px rgb(var(--sg-blue-rgb) / .07);
  --sh-hover: 0 1px 2px rgb(var(--sg-blue-rgb) / .08), 0 10px 26px rgb(var(--sg-blue-rgb) / .12);
  --sh-pop: 0 0 0 1px rgb(255 255 255 / .6), 0 2px 4px rgb(var(--sg-blue-rgb) / .1), 0 20px 48px rgb(var(--sg-blue-rgb) / .22);
  --sh-modal: 0 0 0 1px rgb(255 255 255 / .6), 0 24px 64px rgb(var(--sg-blue-rgb) / .28);
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px rgb(255 255 255 / .55);
  --r-card: 22px; --r-ctl: 12px;
  --mod: var(--sg-blue-lift); --mod-rgb: 53 82 181; --mod-2: var(--sg-gold);
}
html, body { background-color: var(--mesh-base); }
body { background-image:
    radial-gradient(1100px 620px at 6% -12%, rgb(var(--sg-gold-rgb) / .22), transparent 60%),
    radial-gradient(940px 580px at 98% 2%, rgb(var(--mod-rgb) / .22), transparent 58%),
    radial-gradient(760px 720px at 48% 118%, rgb(var(--sg-blue-rgb) / .12), transparent 62%);
  background-attachment: fixed; }
/* Module personalities: the accent behind the page, the icon tile and the selection color. */
body:has(main[data-module="tickets"]) { --mod: #3552B5; --mod-rgb: 53 82 181; }
body:has(main[data-module="customers"]) { --mod: #D98A0B; --mod-rgb: 227 154 23; }
body:has(main[data-module="deals"]) { --mod: #0F8A6B; --mod-rgb: 15 138 107; }
body:has(main[data-module="dispatch"]) { --mod: #6D4ED8; --mod-rgb: 109 78 216; }
body:has(main[data-module="board"]) { --mod: #0E7490; --mod-rgb: 14 116 144; }
body:has(main[data-module="permits"]) { --mod: #C2417A; --mod-rgb: 194 65 122; }
body:has(main[data-module="files"]) { --mod: #0284C7; --mod-rgb: 2 132 199; }
body:has(main[data-module="relay"]) { --mod: #EA580C; --mod-rgb: 234 88 12; }
body:has(main[data-module="estimates"]) { --mod: #243D90; --mod-rgb: 36 61 144; }
body:has(main[data-module="lanes"]) { --mod: #2563EB; --mod-rgb: 37 99 235; }

/* top bar: navy glass */
.topbar { background: var(--top-glass); box-shadow: 0 1px 0 rgb(255 255 255 / .06), 0 8px 24px rgb(16 22 43 / .18); }
.topbar::after { display: none; }
.tb-apps { background: transparent; }
.tb-link { border-radius: var(--r-pill); margin: 8px 1px; padding: 0 14px; font-size: var(--fs-md); font-weight: 500; color: rgb(255 255 255 / .82); transition: background .15s, color .15s; }
.tb-link:hover { background: rgb(255 255 255 / .08); color: #fff; text-decoration: none; }
.tb-link.active { background: rgb(255 255 255 / .14); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); }
.tb-link.active::after { display: none; }
.tb-new button { background: linear-gradient(180deg, #FDC459, var(--sg-gold-deep)); color: var(--accent-ink); }

/* glass surfaces */
.dk-list, .dk-tablewrap, .c3-glance, .c3-card, .tcard, .pcard, .ext-card, .sh-kpi, .sh-lane, .menu, .modal, .tb-search, .qv-head, .ps-card,
.dk-views, .qv-list, .tk-side, .tk-ext { -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); }
.dk-list, .dk-tablewrap, .c3-glance, .c3-card { border-radius: var(--r-card); border: 0; box-shadow: var(--glass-edge), var(--sh-1); background: var(--panel); }
.c3-glance { background: linear-gradient(135deg, rgb(255 255 255 / .82), rgb(255 255 255 / .6)); }
.dk-views { background: rgb(255 255 255 / .42); border-right: 1px solid rgb(255 255 255 / .6); }
.dk-vitem.on > button { background: rgb(255 255 255 / .9); box-shadow: var(--glass-edge), var(--sh-hover); }
.dk-vitem.on > button i { color: var(--mod); }
.dk-row.dk-cur::before, .dk-table tr.dk-cur td:first-child { background: var(--mod); box-shadow: inset 3px 0 0 var(--mod); }
.dk-row.dk-cur::before { box-shadow: none; }
.dk-row.dk-sel, .dk-table tr.dk-sel td { background: rgb(var(--mod-rgb) / .08); }
.dk-table th { background: rgb(255 255 255 / .7); }
.dk-search, .dk-vsearch, .dk-tools select, .c3-note textarea { border-radius: var(--r-pill); border: 0; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px var(--line-2); }
.c3-note textarea { border-radius: var(--r-ctl); }
.dk-seg, .c3-chips { background: rgb(var(--sg-blue-rgb) / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.dk-seg button[aria-pressed="true"], .c3-chips button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgb(var(--sg-blue-rgb) / .12), 0 4px 10px rgb(var(--sg-blue-rgb) / .1); }
.c3-act { background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px var(--line-2); }
.c3-act:hover { background: #fff; }
.c3-act.primary, .btn-primary { background: linear-gradient(180deg, var(--sg-blue-lift), var(--sg-blue)); color: #fff; border: 0; box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset, 0 6px 16px rgb(var(--sg-blue-rgb) / .3); }
.c3-act.primary:hover, .btn-primary:hover { background: linear-gradient(180deg, #4060C8, var(--sg-blue-lift)); }
.btn-gold { background: linear-gradient(180deg, #FDC459, var(--sg-gold-deep)); color: var(--accent-ink); border: 0; box-shadow: 0 6px 16px rgb(var(--sg-gold-rgb) / .35); }
.btn { border-radius: var(--r-pill); }
.c3-card h3 .ico { color: var(--mod); }
.c3-tcard { background: rgb(255 255 255 / .62); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 1px 2px rgb(var(--sg-blue-rgb) / .06); border-radius: 16px; }
.c3-tcard:hover { background: #fff; box-shadow: var(--glass-edge), var(--sh-hover); }
.qv-sheet { background: rgb(240 243 250 / .9); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: -1px 0 0 rgb(255 255 255 / .7), -24px 0 64px rgb(var(--sg-blue-rgb) / .24); border-radius: 28px 0 0 28px; }
.qv-head { background: rgb(255 255 255 / .7); }
.qv-item.on { background: #fff; box-shadow: var(--glass-edge), var(--sh-hover); }
.dk-head h1, .c3-card h3, .tk-title h1 .t, .sh-head h1 { letter-spacing: -.022em; }

/* module title tile: a small gradient app icon, like the widgets */
.mod-tile { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(145deg, rgb(var(--mod-rgb) / .78), var(--mod)); box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 4px 12px rgb(var(--mod-rgb) / .35); }
.mod-tile .ico { width: 17px; height: 17px; }

@media (prefers-reduced-transparency: reduce) {
  :root { --panel: #fff; --soft: #f6f7fb; }
  .dk-list, .dk-tablewrap, .c3-glance, .c3-card, .tcard, .pcard, .ext-card, .menu, .modal, .qv-sheet { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) { :root { --panel: #fff; --line: #9aa3bd; --line-2: #6d7896; } }