*{box-sizing:border-box;margin:0;padding:0}
html,body{overscroll-behavior:none}
/* ────────── Design tokens ──────────
   Semantic names, not literal (use --kc-brand-red, not --kc-red-600). Lets the
   palette shift without renaming every reference. Raw values intentionally
   match what was already in the file — this block is a rename, not a redesign.
   rgba() calls aren't migrated yet; doing that requires color-mix() and is a
   separate pass. */
:root{
  /* Brand */
  --kc-brand-blue:#38BDF8;                /* KINGS, primary text accent */
  --kc-brand-blue-strong:#0EA5E9;         /* primary CTA bg */
  --kc-brand-blue-active:#0284C7;         /* active/pressed */
  --kc-brand-red:#DC2626;                 /* COMMAND, primary alert/CTA */
  --kc-brand-red-strong:#EF4444;          /* secondary alert/warning */
  --kc-brand-red-active:#b91c1c;          /* red hover */
  /* Status */
  --kc-success:#16a34a;
  --kc-warning:#F59E0B;
  /* Ink (text on light surfaces) */
  --kc-ink:#1a1a2e;
  --kc-ink-secondary:#4b5563;
  --kc-ink-muted:#6b7280;
  --kc-ink-soft:#9ca3af;
  /* Surface (light backgrounds) */
  --kc-surface:#ffffff;
  --kc-surface-soft:#f9fafb;
  --kc-surface-mute:#f1f5f9;
  --kc-border:#d1d5db;
  /* Dark surfaces (sidebar/header) */
  --kc-dark:#0f172a;
  --kc-dark-border:#334155;
  --kc-dark-text:#cbd5e1;
  --kc-dark-text-mute:#94a3b8;
  --kc-dark-text-soft:#64748b;
  /* Type families */
  --kc-font-sans:'DM Sans',sans-serif;
  --kc-font-mono:'IBM Plex Mono',monospace;
  /* Type scale (matches the dominant sizes already in use — see grep counts in commit). */
  --kc-text-xxs:9px;     /* micro labels */
  --kc-text-xs:10px;     /* uppercase tag labels */
  --kc-text-sm:11px;     /* small text, chips */
  --kc-text-base:12px;   /* secondary body */
  --kc-text-md:13px;     /* body — dominant */
  --kc-text-lg:14px;     /* emphasis */
  --kc-text-xl:15px;     /* subhead */
  --kc-text-2xl:16px;    /* section head */
  --kc-text-3xl:18px;    /* headline */
  --kc-text-display:24px; /* display (consider wrapping in clamp() at call site) */
  /* Spacing scale (4px base) */
  --kc-space-1:4px;
  --kc-space-2:8px;
  --kc-space-3:12px;
  --kc-space-4:16px;
  --kc-space-5:20px;
  --kc-space-6:24px;
  --kc-space-8:32px;
  /* Radius scale */
  --kc-radius-xs:4px;    /* tiny chips */
  --kc-radius-sm:6px;    /* small chips/labels */
  --kc-radius:8px;       /* default — buttons, inputs */
  --kc-radius-md:10px;   /* secondary cards, sections */
  --kc-radius-lg:12px;   /* primary cards */
  --kc-radius-xl:14px;   /* modals, large surfaces */
  --kc-radius-full:9999px; /* pills / fully rounded */
}
/* overflow-x:hidden on html only — putting it on body too creates a nested
   scroll container that traps wheel events on body's content (body has no
   overflowing content of its own, so wheel hits a "scroll container" with
   nothing to scroll and stops there). The right-side scrollbar still works
   because it drives html's scroll directly. Symptom: page scrolls via
   scrollbar drag but not via mousewheel/trackpad over the content area. */
html{background:var(--kc-dark);overflow-x:hidden}
/* Dedicated dark column behind the sidebar — guaranteed to paint to the visible
   viewport's bottom on every device. body's background-attachment:fixed gradient
   sometimes paints against ios safari's layout viewport (not visual), leaving a
   white gap below the sidebar when its --vv-height lags. This pseudo is itself
   position:fixed with bottom:0 + height:var(--vv-height) so it tracks the
   visualViewport directly. Width follows --sb-width (collapsed/hidden states). */
body::before{content:'';position:fixed;left:0;top:0;bottom:0;width:var(--sb-width);background:var(--kc-dark);z-index:0;pointer-events:none}
body{font-family:'DM Sans',sans-serif;background:linear-gradient(to right,var(--kc-dark) 0,var(--kc-dark) var(--sb-width),var(--kc-surface-mute) var(--sb-width),var(--kc-surface-mute) 100%) fixed;color:var(--kc-ink);min-height:100vh;min-height:100dvh;padding-top:calc(var(--header-h, calc(var(--sb-top) + env(safe-area-inset-top, 0px))) + var(--dealbar-h, 0px))}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}
input[type=number]{-moz-appearance:textfield}
::selection{background:#2196F3;color:#fff}
.header{background:var(--kc-dark);border-bottom:1px solid var(--kc-dark-border);padding:12px 16px 12px 0;padding-top:calc(12px + env(safe-area-inset-top, 0px));position:fixed;top:var(--vv-top, 0px);left:0;right:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,0.3)}
.header-row{max-width:none;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#dealBar{position:fixed;top:calc(var(--vv-top, 0px) + var(--header-h, 60px) - 1px);left:calc(var(--sb-width) - 1px);right:0;z-index:95;background:var(--kc-dark);border-top:1px solid var(--kc-dark-border);border-left:1px solid var(--kc-dark-border);border-bottom:2px solid var(--kc-brand-red);padding:var(--db-pad-y,12px) var(--db-pad-x,16px);overflow:hidden;transition:left .18s ease}
.brand{flex-shrink:0;display:flex;align-items:center;font-size:22px;font-weight:800;letter-spacing:-0.02em;white-space:nowrap;gap:6px}
.brand-logo{width:60px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.brand-logo img{height:36px;border-radius:4px;display:block}
.brand .b{color:var(--kc-brand-blue)}.brand .r{color:var(--kc-brand-red-strong);margin-left:-6px}
.controls{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
/* Global deal search in the header banner (Austin 2026-08-06). Shortcut into
   the Deals picker search. Hidden on phones — the header is too tight there and
   the Deals page has its own search. */
.hdr-search{position:relative;flex:1 1 260px;max-width:520px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:0 12px;height:38px;transition:border-color .15s,background .15s}
.hdr-search:focus-within{border-color:var(--kc-brand-blue);background:rgba(255,255,255,0.14)}
.hdr-search svg{flex-shrink:0}
.hdr-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-family:'DM Sans',sans-serif;font-size:14px}
.hdr-search input::placeholder{color:rgba(255,255,255,0.5)}
/* Live results dropdown — white card hanging under the banner input. */
.hdr-search-dd{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:120;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 16px 40px rgba(15,23,42,0.28);max-height:min(420px,70vh);overflow-y:auto;overscroll-behavior:contain;padding:6px}
.hdr-sr{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;transition:background .12s}
.hdr-sr:hover,.hdr-sr.kc-active{background:#f1f6ff}
.hdr-sr-main{flex:1;min-width:0}
.hdr-sr-name{font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-sr-sub{font-family:'DM Sans',sans-serif;font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-sr-tag{flex-shrink:0;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:800;letter-spacing:.03em;color:#0284C7;background:rgba(14,165,233,0.1);border-radius:6px;padding:3px 7px}
.hdr-sr-msg{padding:14px 12px;text-align:center;font-family:'DM Sans',sans-serif;font-size:13px;color:#9ca3af}
@media (max-width:768px){.hdr-search{display:none}}
.hdr-icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid #374151;color:#fff;cursor:pointer;padding:0;position:relative;-webkit-tap-highlight-color:transparent;transition:transform .15s,border-color .15s;flex-shrink:0}
.hdr-icon-btn:hover{transform:scale(1.05);border-color:var(--kc-brand-blue)}
.user-menu{position:relative}
#userAvatarBtn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:2px solid #374151;background:var(--kc-ink);color:#fff;font-family:'DM Sans';font-size:13px;font-weight:700;cursor:pointer;padding:0;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:border-color .15s,transform .15s}
#userAvatarBtn:hover{border-color:var(--kc-brand-blue);transform:scale(1.05)}
#userAvatarBtn img{width:100%;height:100%;object-fit:cover;display:block}
#userMenuDropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:var(--kc-dark);border:1px solid var(--kc-dark-border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.5);padding:6px;z-index:200;flex-direction:column;gap:2px}
#userMenuDropdown[style*="block"]{display:flex !important}
#userMenuDropdown button{background:transparent;border:0;color:var(--kc-dark-text);font-family:'DM Sans';font-size:13px;font-weight:600;text-align:left;padding:9px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background .15s,color .15s;white-space:nowrap}
#userMenuDropdown button:hover{background:rgba(255,255,255,0.05);color:#fff}
#userMenuDropdown button svg{flex-shrink:0;color:var(--kc-dark-text-mute)}
#userMenuDropdown button:hover svg{color:var(--kc-brand-blue)}
.mkt-btn{font-family:'DM Sans';font-size:10px;font-weight:700;letter-spacing:0.04em;background:transparent;color:var(--kc-ink-muted);border:1px solid var(--kc-border);border-radius:5px;padding:6px 10px;cursor:pointer}
.mkt-btn.active{background:var(--kc-brand-red-strong);color:#fff;border-color:var(--kc-brand-red-strong)}
.role-selector{display:flex;gap:4px}
@keyframes pulse{0%,100%{opacity:0.6}50%{opacity:1}}
@keyframes progressSlide{0%{width:5%;margin-left:0}50%{width:40%;margin-left:30%}100%{width:5%;margin-left:95%}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes redFlagPulse{0%,100%{border-color:rgba(239,68,68,0.4);box-shadow:0 0 8px rgba(239,68,68,0.15)}50%{border-color:rgba(239,68,68,0.9);box-shadow:0 0 16px rgba(239,68,68,0.35)}}
@keyframes vaultGlow{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2);box-shadow:0 0 8px #c8960c}}
.red-flag{border:2px solid rgba(239,68,68,0.6);animation:redFlagPulse 1.5s ease-in-out infinite;border-radius:10px;padding:14px 18px;background:rgba(239,68,68,0.04)}
.approved-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:6px;background:rgba(22,163,106,0.1);border:1px solid rgba(22,163,106,0.25);color:var(--kc-success);font-size:12px;font-weight:700}
.rejected-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:6px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:var(--kc-brand-red-strong);font-size:12px;font-weight:700}
.tab-row{display:flex;gap:4px;flex-wrap:wrap;padding:4px 8px}
.tab{font-family:'DM Sans';font-size:13px;font-weight:700;background:var(--kc-brand-blue-strong);color:#fff;border:2px solid var(--kc-brand-blue-strong);border-radius:10px;padding:10px 18px;cursor:pointer;transition:all .2s;min-width:fit-content;text-transform:uppercase;letter-spacing:0.02em}
.tab.active{background:var(--kc-brand-blue-active);color:#fff;border-color:var(--kc-brand-blue-active);box-shadow:0 2px 8px rgba(14,165,233,0.3)}
:root{--sb-width:180px;--sb-top:60px}
body.sb-collapsed{--sb-width:60px}
body.sb-hidden{--sb-width:0px}
.app-layout{max-width:none;margin:0;padding-left:var(--sb-width);transition:padding-left .18s ease;display:flex;gap:0}
.sidebar{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--sb-width);background:#fff;border-right:1px solid #e5e7eb;z-index:90;overflow:hidden;transition:width .18s ease;padding-top:var(--header-h, calc(var(--sb-top) + env(safe-area-inset-top, 0px)));padding-bottom:env(safe-area-inset-bottom, 0px);touch-action:none;overscroll-behavior:contain}
body.bb-visible .sidebar{bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
body.sb-hidden .sidebar{display:none}
.sidebar-mid{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;min-height:0;touch-action:pan-y;overscroll-behavior:contain}
.sidebar-mid::-webkit-scrollbar{width:3px;height:0}.sidebar-mid::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
.sidebar.collapsed{overflow:visible}
.sidebar.collapsed .sidebar-mid{overflow:visible;touch-action:none}
.sidebar-bottom{padding:8px;border-top:1px solid #e5e7eb;flex-shrink:0}
.sidebar .tab-row{flex-direction:column;flex-wrap:nowrap;padding:0;gap:3px}
.sidebar .tab{background:transparent;color:#1a1a2e;border:0;text-align:left;padding:9px 12px 9px 20px;font-size:12px;font-weight:700;border-radius:0;display:flex;align-items:center;gap:10px;cursor:pointer;text-transform:none;letter-spacing:normal;transition:background .15s,color .15s}
.sidebar .tab:hover{background:rgba(0,0,0,0.05);color:#1a1a2e}
.sidebar .tab.active{background:transparent;color:var(--kc-brand-blue);border-color:transparent}
.sidebar .tab.sb-cat.active{color:#1a1a2e;background:transparent}
.sidebar .tab.sb-cat.active .sb-ic{color:var(--kc-brand-blue)}
.sidebar .tab .sb-ic{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:15px;line-height:1;color:#6b7280}
.sidebar .tab .sb-ic svg{width:18px;height:18px;display:block}
.sidebar .tab:hover .sb-ic{color:#1a1a2e}
.sidebar .tab .sb-lbl{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;white-space:nowrap}
.sb-grouplbl{font-size:9px;font-weight:800;color:#9ca3af;letter-spacing:0.1em;padding:10px 12px 4px 20px;text-transform:uppercase}
.sb-chev{margin-left:auto;font-size:11px;color:#9ca3af;line-height:1}
.sb-divider{height:1px;background:#e5e7eb;margin:6px 0 8px}
.sidebar .tab.sb-home:not(.active) .sb-ic{color:#FACC15}
.sb-cat-wrap{position:relative}
.sb-sublist{display:none;flex-direction:column;gap:1px;padding:2px 0 4px 0;border-left:1px solid #e5e7eb;margin:0 0 4px 22px}
.sb-sublist.expanded{display:flex}
.sb-flyout-title{display:none}
.sidebar .tab.sb-subitem{padding:6px 8px 6px 10px;font-size:11px;font-weight:500;color:#6b7280;background:transparent;border-color:transparent;border-radius:0;display:flex;align-items:center;gap:6px}
.sidebar .tab.sb-subitem:hover{color:#1a1a2e;background:rgba(0,0,0,0.04)}
.sidebar .tab.sb-subitem.active{background:rgba(56,189,248,0.10);color:var(--kc-brand-blue);border-color:rgba(56,189,248,0.25)}
.sb-empty{padding:6px 10px;font-size:11px;color:#9ca3af;font-style:italic}
.sb-bookmark{margin-left:auto;padding:2px 4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;color:var(--kc-dark-text-mute);border-radius:4px;line-height:1;transition:opacity .12s,color .12s,background .12s}
.sb-bookmark:hover{color:var(--kc-brand-blue);background:rgba(56,189,248,0.12)}
.sb-subitem:hover .sb-bookmark{opacity:1}
.sb-bookmark.sb-bookmarked{opacity:1;color:var(--kc-brand-blue)}
.sidebar.collapsed .sb-chev{display:none}
/* Collapsed flyout: position:fixed so it can vertically center on the cat icon
   and escape sidebar bounds. Top/left are set by _positionSbFlyout in JS;
   left:calc(var(--sb-width) + 8px) is just a safe fallback before JS runs. */
.sidebar.collapsed .sb-sublist{display:none;position:fixed;top:var(--sb-top);left:calc(var(--sb-width) + 8px);min-width:220px;max-width:280px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 8px;box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:200;margin:0;overflow-y:auto;overscroll-behavior:contain}
.sidebar.collapsed .sb-sublist::-webkit-scrollbar{width:4px;height:0}
.sidebar.collapsed .sb-sublist::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
/* Hover bridge across the sidebar→menu gap. position:fixed (not absolute) so
   (a) the menu's overflow-y:auto can't scroll it away with the content, and
   (b) JS can size it to cover the *union* of the icon row + menu row — without
   that, when the menu gets clamped to the viewport edge it ends up vertically
   offset from the icon and a horizontal slice across the icon row has no
   bridge, so cursor leaving the icon at that row drops :hover. */
.sidebar.collapsed .sb-sublist::before{content:'';position:fixed;left:var(--sb-bridge-left,0);top:var(--sb-bridge-top,0);width:var(--sb-bridge-w,0);height:var(--sb-bridge-h,0);z-index:200}
/* Hover-open only on real-pointer devices. On touch, :hover sticks after tap
   and would re-show the flyout the JS just closed via _toggleSbCat. */
@media (hover: hover) and (pointer: fine){
  .sidebar.collapsed .sb-cat-wrap:hover .sb-sublist{display:flex;flex-direction:column}
  /* When the user click-closed this cat, suppress hover-reopen until cursor leaves it. */
  .sidebar.collapsed .sb-cat-wrap.sb-hover-suppress:hover .sb-sublist{display:none !important}
}
.sidebar.collapsed .sb-cat-wrap.sb-flyout-pinned .sb-sublist{display:flex;flex-direction:column}
.sidebar.collapsed .sb-flyout-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:800;color:#1a1a2e;padding:4px 4px 8px 10px;border-bottom:1px solid #e5e7eb;margin-bottom:6px;letter-spacing:0.02em}
.sb-flyout-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-10px -6px -10px 0;border:0;background:transparent;color:#6b7280;font-size:22px;line-height:1;cursor:pointer;flex:none}
.sb-flyout-close:active{color:#1a1a2e}
.sidebar.collapsed .sb-sublist .tab.sb-subitem{padding:7px 10px;font-size:12px}
/* Flyout subitem labels — sidebar.collapsed hides .sb-lbl globally; re-show inside the flyout so menu text isn't blank */
.sidebar.collapsed .sb-sublist .sb-lbl{display:inline-block;color:#4b5563;white-space:nowrap}
.sidebar.collapsed .sb-sublist .tab.sb-subitem.active .sb-lbl{color:var(--kc-brand-blue)}
/* Only one flyout open at a time: when one is pinned, suppress hover-opens on other categories (real-pointer only) */
@media (hover: hover) and (pointer: fine){
  .sidebar.collapsed:has(.sb-cat-wrap.sb-flyout-pinned) .sb-cat-wrap:not(.sb-flyout-pinned):hover .sb-sublist{display:none !important}
}
.sb-toggle{cursor:pointer;width:100%;padding:8px 10px;background:transparent;border:1px solid var(--kc-dark-border);color:var(--kc-dark-text-mute);font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;display:flex;align-items:center;gap:8px;border-radius:8px;letter-spacing:0.04em;justify-content:center}
.sb-toggle:hover{background:rgba(255,255,255,0.05);color:#fff}
.sb-toggle-icon{display:inline-block;width:14px;text-align:center;font-size:14px;line-height:1}
.sidebar:not(.collapsed) .sb-toggle-icon::before{content:"\00ab"}
.sidebar.collapsed .sb-toggle-icon::before{content:"\00bb"}
.sidebar.collapsed .sb-lbl,.sidebar.collapsed .sb-grouplbl,.sidebar.collapsed .sb-toggle-text,.sidebar.collapsed .sb-back-text,.sidebar.collapsed .sb-subnav{display:none}
.sidebar.collapsed .tab{align-items:center !important;width:100% !important;box-sizing:border-box !important}
.sidebar.collapsed .tab .sb-ic{margin:0 !important}
.sb-cat-wrap{position:relative;width:100%;display:block}
.sidebar.collapsed .sb-home-btn{width:36px;height:36px}
.sidebar.collapsed .sb-primary{border-bottom:0;padding-bottom:0}
.main{flex:1;min-width:0;padding:16px 16px calc(60px + env(safe-area-inset-bottom, 0px));max-width:1200px;margin:0 auto;width:100%}
.mobile-tabs{display:none !important}
@media(max-width:767px){.mobile-tab-dropdown{display:block;width:100%;padding:10px 14px;font-size:13px;font-weight:700;font-family:'DM Sans',sans-serif;background:#fff;color:var(--kc-ink);border:1px solid var(--kc-border);border-radius:8px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}}
/* Deal banner mobile compaction — overrides inline styles set in app-main.js.
   The bar itself now collapses to a single tap-to-expand summary line by
   default (state._dealBarExpanded), so the old per-row squeeze hacks aren't
   needed — this just tightens padding/font sizes at phone width. */
@media(max-width:767px){
  #dealBar{padding:6px 10px !important}
  #dealBar button{font-size:10px !important;padding:4px 8px !important}
}
/* Deal name/amount in the top ribbon (#dealIdRow) — on a phone, squeezed
   between the KC logo and the call/chat/avatar icons, it had so little room
   the name truncated to a handful of characters. Forcing it onto its own
   full-width line under the logo/icons row (instead of relying on flexbox to
   wrap it there automatically — .controls has its own internal flex-wrap,
   which let an icon wrap instead of pushing dealIdRow down) guarantees the
   full name is readable at the cost of one extra line on phone width only. */
@media(max-width:767px){
  #dealIdRow{flex-basis:100% !important;order:3;min-width:0 !important;margin-top:4px}
}
/* ────────── Unified tile system ──────────
   Cap is 3 columns. Drops to 2 then 1 as available width shrinks. Both the
   legacy .home-tile-grid and the new .kc-tile-grid get identical behavior, so
   the home page (3 → 2) pattern replicates across every page that adopts the
   class. Font sizes inside tiles are clamped to a minimum of 12pt (16px). */
:root { --tile-cols: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { :root { --tile-cols: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { :root { --tile-cols: minmax(0, 1fr); } }
/* iPhone with expanded sidebar: drop further since the content area is ~213px */
@media (max-width: 767px) {
  body:not(.sb-collapsed):not(.sb-hidden) { --tile-cols: minmax(0, 1fr); }
}

.home-tile-grid, .kc-tile-grid {
  display: grid !important;
  grid-template-columns: var(--tile-cols) !important;
  gap: clamp(8px, 1.5vw, 12px) !important;
}

/* Tile padding scales with viewport so tiles don't waste space on mobile */
.home-tile-grid > div, .home-tile-grid > a,
.kc-tile-grid > div, .kc-tile-grid > a {
  padding: clamp(10px, 2vw, 24px) clamp(8px, 1.5vw, 16px) !important;
}

/* Tile content fonts — minimum 12pt (16px) on labels; scaled to viewport */
.home-tile-grid div[style*="font-size:16px"],
.kc-tile-grid div[style*="font-size:16px"] { font-size: clamp(16px, 2.5vw, 18px) !important; }
.home-tile-grid div[style*="font-size:15px"],
.kc-tile-grid div[style*="font-size:15px"] { font-size: clamp(16px, 2.4vw, 18px) !important; }
.home-tile-grid div[style*="font-size:14px"],
.kc-tile-grid div[style*="font-size:14px"] { font-size: clamp(16px, 2.4vw, 18px) !important; }
.home-tile-grid div[style*="font-size:13px"],
.kc-tile-grid div[style*="font-size:13px"] { font-size: clamp(16px, 2.2vw, 17px) !important; }
.home-tile-grid div[style*="font-size:11px"],
.kc-tile-grid div[style*="font-size:11px"] { font-size: clamp(13px, 1.8vw, 14px) !important; }
.home-tile-grid div[style*="font-size:32px"],
.kc-tile-grid div[style*="font-size:32px"] { font-size: clamp(28px, 5vw, 36px) !important; }
.home-tile-grid div[style*="font-size:28px"],
.kc-tile-grid div[style*="font-size:28px"] { font-size: clamp(24px, 4vw, 32px) !important; }

/* Generic responsive drop for non-tile multi-col grids at phone widths. Applies
   regardless of sidebar state — a collapsed (icon-only) sidebar only frees up
   ~160px, nowhere near enough to let a 3/4-col grid breathe on a true phone
   viewport. Tile grids are excluded because they're already handled above by
   --tile-cols. */
@media(max-width:767px){
  [style*="grid-template-columns:repeat(2,minmax"]:not(.home-tile-grid):not(.kc-tile-grid){
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="grid-template-columns:repeat(3,minmax"]:not(.home-tile-grid):not(.kc-tile-grid){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns:repeat(4,minmax"]:not(.home-tile-grid):not(.kc-tile-grid){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Glossy squircle Home tiles (Austin 2026-08-23: "oh man. i like those" —
   reference was app-icon-style glass tiles). Background stays inline per-tile
   (color is user-customizable via the tile color picker); this class supplies
   the shape, glass highlight, rim light, and press feedback so every tile
   gets the same finish regardless of its base color. ::before is the diagonal
   light sweep (screen-blended so it lightens whatever color sits under it);
   ::after is the thin bright top-left rim edge that sells the "glass" read. */
/* Fixed px radius, not a percentage — percentage border-radius is computed
   per-axis (% of width, % of height independently), so it looks like a
   squircle on the roughly-square 3-col grid but balloons into a pill/stadium
   shape once the 1-col mobile breakpoint stretches tiles full-width (Austin
   2026-08-23: "looks bad from phone view"). A fixed radius stays consistent
   regardless of the tile's aspect ratio. */
/* Amplified glow (Austin 2026-08-23: "make them look glossier like these" —
   pointed at the reference mockup). The structure was already identical to
   the mockup's tiles; the mockup's outer shadow was color-matched to the
   tile's own blue instead of plain black, which is what reads as "glowing
   glass" rather than "a button with a shadow" — swapped that in, plus a
   brighter/wider highlight sweep and a stronger rim light. */
.kc-home-tile{position:relative;border-radius:22px;isolation:isolate;cursor:pointer;transition:transform .12s ease;-webkit-tap-highlight-color:transparent;box-shadow:0 6px 14px -4px rgba(2,132,199,0.28),inset 0 0 0 1px rgba(255,255,255,0.06),inset 0 -10px 18px -6px rgba(0,0,0,0.35)}
.kc-home-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 60% at 30% 0%,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.14) 32%,rgba(255,255,255,0) 62%);mix-blend-mode:screen;pointer-events:none}
.kc-home-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 1px 0 rgba(255,255,255,0.4) inset,0 0 0 1px rgba(255,255,255,0.08) inset;pointer-events:none}
.kc-home-tile:active{transform:scale(.94)}
.kc-home-tile > *{position:relative;z-index:1}
/* Reusable glossy sheen, same radial-highlight recipe as .kc-home-tile, for
   buttons elsewhere (deal-view hero buttons, Field Update grid) that want the
   home-tile shine without adopting its shape/shadow. z-index:-1 (inside the
   button's own isolated stacking context) keeps the highlight above the
   button's background but below its label, so callers don't need to wrap
   their text in a child element the way .kc-home-tile's icon/label divs do. */
.kc-btn-glossy{position:relative;isolation:isolate}
.kc-btn-glossy::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:radial-gradient(120% 60% at 30% 0%,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.14) 32%,rgba(255,255,255,0) 62%);mix-blend-mode:screen;pointer-events:none}
.card{background:#fff;border:1px solid var(--kc-border);border-radius:12px;padding:20px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.card-title{font-size:16px;font-weight:700;color:var(--kc-ink);margin-bottom:14px}
.label{font-size:10px;font-weight:700;color:var(--kc-ink-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;display:block}
.text-input{font-family:'DM Sans';font-size:13px;background:var(--kc-surface-soft);border:1px solid var(--kc-border);border-radius:6px;color:var(--kc-ink);padding:8px 10px;width:100%;outline:none}
.textarea-input{font-family:'DM Sans';font-size:13px;background:var(--kc-surface-soft);border:1px solid var(--kc-border);border-radius:6px;color:var(--kc-ink);padding:8px 10px;width:100%;outline:none;resize:vertical;min-height:60px}
.num-input{font-family:'IBM Plex Mono';font-size:14px;background:var(--kc-surface-soft);border:1px solid var(--kc-border);border-radius:6px;color:var(--kc-brand-blue);padding:8px 10px;width:100px;text-align:left;outline:none}
.prop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.meas-block{flex:1;min-width:120px}
.section-head{font-size:11px;font-weight:800;color:var(--kc-ink-muted);letter-spacing:0.06em;margin:16px 0 8px;padding-left:10px;border-left:3px solid}
.line-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--kc-border);flex-wrap:wrap}
.item-num{font-family:'IBM Plex Mono';font-size:11px;font-weight:600;color:var(--kc-brand-blue-strong);background:rgba(14,165,233,0.06);border-radius:4px;padding:4px 8px;min-width:72px;text-align:center}
.line-label{flex:1;font-size:13px;color:var(--kc-ink-secondary);min-width:120px}
.line-qty{font-family:'IBM Plex Mono';font-size:13px;background:var(--kc-surface-soft);border:1px solid var(--kc-border);border-radius:5px;color:var(--kc-ink);padding:6px 8px;width:56px;text-align:left;outline:none}
.auto-qty{font-family:'IBM Plex Mono';font-size:13px;background:rgba(14,165,233,0.06);border:1px solid rgba(14,165,233,0.25);border-radius:5px;color:var(--kc-brand-blue);padding:6px 8px;width:56px;text-align:left;font-weight:600}
.auto-tag{font-size:8px;font-weight:700;color:var(--kc-brand-blue);margin-left:4px;vertical-align:super}
.line-unit{font-size:10px;font-weight:700;color:var(--kc-ink-muted);width:40px}
.line-at{font-size:12px;color:var(--kc-ink-soft)}
.line-sell{font-family:'IBM Plex Mono';font-size:13px;background:var(--kc-surface-soft);border:1px solid var(--kc-border);border-radius:5px;color:var(--kc-success);padding:6px 8px;width:80px;text-align:left;outline:none}
.line-total{font-family:'IBM Plex Mono';font-size:13px;color:var(--kc-ink-muted);width:90px;text-align:right}
.comm-grid{display:flex;gap:24px;flex-wrap:wrap}
.comm-line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--kc-border);font-size:14px;font-family:'IBM Plex Mono'}
.comm-box{background:linear-gradient(135deg,rgba(220,38,38,0.06),rgba(14,165,233,0.04));border:1px solid rgba(220,38,38,0.15);border-radius:14px;padding:32px 40px;text-align:center;min-width:260px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.divider{height:1px;background:#e2e4e9;margin:8px 0}
.draw-row{display:flex;gap:10px;flex-wrap:wrap}
.draw-card{flex:1;min-width:160px;border:2px solid var(--kc-border);border-radius:10px;padding:16px;text-align:center}
.draw-badge{color:#fff;padding:6px 14px;border-radius:5px;font-weight:700;font-size:13px;display:inline-block;margin-bottom:8px}
.summary-line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--kc-border);font-size:14px;font-family:'IBM Plex Mono'}
.admin-box{margin-top:20px;padding:16px;background:rgba(239,68,68,0.05);border-radius:10px;border:1px solid rgba(239,68,68,0.15)}
.profit-box{margin-top:12px;padding:16px;background:rgba(56,189,248,0.05);border-radius:10px;border:1px solid rgba(56,189,248,0.15)}
.wo-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--kc-border);margin-bottom:16px}
.wo-row{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font-size:13px;font-family:'IBM Plex Mono';border-bottom:1px solid var(--kc-border)}
.wo-row:nth-child(odd){background:var(--kc-surface-soft)}
.wo-item{color:var(--kc-ink-secondary)}.wo-val{color:var(--kc-ink);font-weight:600;min-width:60px;text-align:right}
/* Invisible columns on the WO form: every quantity/cost row shares a fixed
   right-aligned number column and a fixed unit column, so inputs, read-only
   values, and money line up vertically regardless of label/unit width. */
.wo-qty{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0}
.wo-qty .wo-manual-input{width:72px;text-align:right;flex-shrink:0}
.wo-num{min-width:72px;text-align:right;color:var(--kc-ink);font-weight:600}
.wo-num.neg{color:#ef4444}.wo-num.pos{color:#16a34a}.wo-num.manual{color:var(--kc-brand-red)}
.wo-unit{width:92px;text-align:left;font-size:11px;color:var(--kc-ink-muted);flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wo-val.auto{color:var(--kc-brand-blue)}.wo-val.manual{color:var(--kc-brand-red)}
.wo-section{font-size:11px;font-weight:800;color:var(--kc-ink-muted);letter-spacing:0.06em;padding:12px 10px 6px;text-transform:uppercase}
.wo-brand{font-size:11px;font-weight:700;padding:6px 12px;border-radius:5px;display:inline-block;margin:8px 0}
.wo-brand.tamko{background:rgba(14,165,233,0.08);color:var(--kc-brand-blue);border:1px solid rgba(14,165,233,0.2)}
.wo-brand.shop{background:rgba(220,38,38,0.06);color:var(--kc-brand-red);border:1px solid rgba(220,38,38,0.15)}
.wo-manual-input{font-family:'IBM Plex Mono';font-size:13px;background:var(--kc-surface-soft);border:1px solid var(--kc-border);border-radius:4px;color:var(--kc-brand-red);padding:4px 8px;width:60px;text-align:left;outline:none}
.wo-notes{background:#fff;border:1px solid var(--kc-border);border-radius:8px;padding:14px;margin-top:12px}
.wo-notes-title{font-size:11px;font-weight:800;color:var(--kc-ink-muted);letter-spacing:0.06em;margin-bottom:8px;text-transform:uppercase}
.wo-cost{font-size:10px;color:var(--kc-brand-red-strong);padding:0 10px 4px;font-family:'IBM Plex Mono'}
.footer{text-align:center;font-size:11px;color:var(--kc-ink-soft);padding:20px 0;border-top:1px solid var(--kc-border)}
.hidden{display:none}
.cps-table{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono';font-size:13px}
.cps-table th{font-family:'DM Sans';font-size:10px;font-weight:800;color:var(--kc-ink-muted);text-transform:uppercase;letter-spacing:0.06em;padding:8px 10px;text-align:left;border-bottom:2px solid var(--kc-border)}
.cps-table th.r{text-align:right}
.cps-table td{padding:7px 10px;border-bottom:1px solid var(--kc-border);color:var(--kc-ink-secondary)}
.cps-table tr:nth-child(odd){background:var(--kc-surface-soft)}
.cps-table td.r{text-align:right;color:var(--kc-ink);font-weight:600}
.cps-table td.proj{text-align:right;color:var(--kc-brand-blue)}
.cps-table td.act{text-align:right;color:var(--kc-success);font-weight:700}
.cps-table td.var-pos{text-align:right;color:var(--kc-success);font-size:11px}
.cps-table td.var-neg{text-align:right;color:var(--kc-brand-red-strong);font-size:11px}
.cps-table td.var-zero{text-align:right;color:var(--kc-ink-soft);font-size:11px}
.cps-input{font-family:'IBM Plex Mono';font-size:13px;background:var(--kc-surface-soft);border:1px solid var(--kc-border);border-radius:4px;color:var(--kc-success);padding:5px 8px;width:60px;text-align:left;outline:none}
.cps-total-row td{border-top:2px solid var(--kc-border);font-weight:800;font-size:15px}
.sign-block{background:#fff;border:1px solid var(--kc-border);border-radius:10px;padding:20px;flex:1;min-width:260px}
.sign-block.signed{border-color:rgba(56,189,248,0.4);background:rgba(56,189,248,0.04)}
.sign-title{font-size:11px;font-weight:800;color:var(--kc-ink-muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px}
.sign-input{font-family:'DM Sans';font-size:14px;background:var(--kc-surface-soft);border:1px solid var(--kc-border);border-radius:6px;color:var(--kc-ink);padding:10px 12px;width:100%;outline:none;margin-bottom:8px}
.sign-input:disabled{opacity:0.5}
.sign-stamp{font-size:12px;color:var(--kc-success);font-family:'IBM Plex Mono';padding:8px 0}
.lock-btn{font-family:'DM Sans';font-size:13px;font-weight:700;border:none;border-radius:8px;padding:10px 20px;cursor:pointer;width:100%;margin-top:8px}
@media(max-width:768px){#presentOverlay [style*="grid-template-columns: 1fr 1fr 1fr"],#presentOverlay [style*="grid-template-columns:1fr 1fr 1fr"]{display:flex!important;flex-direction:column!important;gap:16px!important}#presentOverlay [style*="transform:scale(1.03)"]{transform:none!important}}
.rgb-day-bar{display:flex;gap:4px;margin-bottom:14px}
.rgb-day{flex:1;text-align:center;padding:10px 2px;border-radius:8px;font-size:12px;font-weight:800;font-family:'DM Sans';letter-spacing:0.02em;color:var(--kc-ink-muted);cursor:pointer;border:1px solid var(--kc-border);background:#fff;transition:all .15s}
.rgb-day.active{background:var(--kc-brand-red);color:#fff;border-color:var(--kc-brand-red);box-shadow:0 2px 8px rgba(220,38,38,0.25)}
.rgb-day .rgb-day-pts{display:block;font-size:10px;font-weight:700;margin-top:2px;opacity:0.8;font-family:'IBM Plex Mono'}
.rgb-tile-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.rgb-tile{background:#fff;border:1px solid var(--kc-border);border-radius:10px;padding:12px 8px 10px;cursor:pointer;text-align:center;transition:all .15s;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rgb-tile:hover{border-color:#d1d5db;background:var(--kc-surface-soft)}
.rgb-tile:active{transform:scale(0.95)}
.rgb-tile.has-count{border-color:var(--kc-brand-red);background:rgba(220,38,38,0.06)}

.rgb-tile .t-name{font-size:11px;font-weight:700;color:var(--kc-ink);line-height:1.2}
.rgb-tile .t-pts{font-size:9px;color:var(--kc-ink-soft);font-family:'IBM Plex Mono';margin-top:3px}
.rgb-tile.has-count .t-name{color:var(--kc-brand-red)}
.rgb-tile .t-count{position:absolute;top:4px;right:6px;background:var(--kc-brand-red);color:#fff;font-size:9px;font-weight:800;font-family:'IBM Plex Mono';width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.rgb-tile .t-earned{position:absolute;bottom:4px;right:8px;font-size:9px;font-weight:800;color:var(--kc-brand-blue);font-family:'IBM Plex Mono'}
.rgb-tile .t-auto{position:absolute;top:4px;left:4px;font-size:7px;font-weight:800;color:var(--kc-brand-blue);background:rgba(56,189,248,0.12);padding:1px 4px;border-radius:3px;letter-spacing:0.04em}
.rgb-tile.auto-tile{opacity:0.6;cursor:default}
.rgb-cat-header{font-size:9px;font-weight:800;color:var(--kc-ink-soft);letter-spacing:0.1em;text-transform:uppercase;padding:10px 0 4px;grid-column:1/-1}
@media(max-width:599px){.rgb-tile-grid{grid-template-columns:1fr 1fr 1fr}}
/* Scanner (Roof Intelligence) */
.sc-search{display:flex;gap:8px;margin-bottom:12px}
.sc-search input{flex:1;padding:14px 16px;font-size:15px;background:#fff;border:1px solid var(--kc-border);border-radius:10px;color:var(--kc-ink);outline:none;font-family:inherit}
.sc-search input:focus{border-color:var(--kc-brand-red)}
.sc-search button{padding:14px 28px;font-size:15px;font-weight:700;background:linear-gradient(135deg,var(--kc-brand-red),#B91C1C);color:#fff;border:none;border-radius:10px;cursor:pointer;white-space:nowrap;font-family:inherit}
.sc-search button:disabled{background:#d1d5db;color:var(--kc-ink-muted);cursor:wait}
.sc-prog{margin-top:8px}.sc-prog-text{font-size:12px;color:var(--kc-brand-red);margin-bottom:6px}
.sc-prog-bar{width:100%;height:3px;background:#e2e4e9;border-radius:2px;overflow:hidden}
.sc-prog-fill{height:100%;background:linear-gradient(90deg,var(--kc-brand-red),var(--kc-brand-red-strong));transition:width 1s linear}
.sc-error{background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:16px;margin:16px 0}
.sc-error-text{font-size:14px;color:#dc2626}
.sc-report-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.sc-report-address{font-size:20px;font-weight:700;color:var(--kc-ink)}
.sc-report-meta{font-size:12px;color:var(--kc-ink-muted);margin-top:4px}
.sc-lead-badge{padding:8px 20px;border-radius:8px;font-weight:800;font-size:18px;letter-spacing:1px}
.sc-images{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.sc-images img{width:100%;border-radius:10px;border:1px solid var(--kc-border)}
.sc-img-label{font-size:10px;color:var(--kc-ink-muted);margin-top:4px;text-align:center}
.sc-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.sc-stat{background:#fff;border:1px solid var(--kc-border);border-radius:10px;padding:14px 16px;flex:1;min-width:130px}
.sc-stat-label{font-size:11px;color:var(--kc-ink-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.sc-stat-value{font-size:26px;font-weight:700;color:var(--kc-ink)}
.sc-stat-sub{font-size:12px;color:var(--kc-ink-muted);margin-top:2px}
.sc-card{background:#fff;border:1px solid var(--kc-border);border-radius:12px;padding:20px;margin-bottom:20px}
.sc-card-title{font-size:13px;color:var(--kc-ink-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-weight:700}
.sc-cond-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sc-urgency-badge{font-size:12px;padding:4px 10px;border-radius:6px;color:#fff;font-weight:600}
.sc-cond-body{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.sc-cond-score{font-size:36px;font-weight:800;color:var(--kc-ink)}.sc-cond-score span{font-size:16px;color:var(--kc-ink-muted)}
.sc-cond-label{font-size:13px;color:var(--kc-ink-muted)}
.sc-cond-details{flex:1;min-width:200px}
.sc-cond-bar{width:100%;height:8px;background:#e2e4e9;border-radius:4px;overflow:hidden;margin-bottom:8px}
.sc-cond-bar-fill{height:100%;border-radius:4px;transition:width 1s ease}
.sc-detail-grid{display:flex;gap:16px;flex-wrap:wrap}
.sc-detail-item label{font-size:11px;color:var(--kc-ink-muted);display:block}.sc-detail-item span{font-size:15px;font-weight:600;color:var(--kc-ink)}
.sc-indicator{padding:8px 12px;border-radius:8px;margin-bottom:6px}
.sc-indicator-text{font-size:13px;color:var(--kc-ink)}.sc-indicator-severity{font-size:10px;margin-top:2px;text-transform:uppercase}
.sc-indicator-notes{font-size:12px;color:var(--kc-ink-muted);margin-top:12px;font-style:italic}
.sc-structure{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--kc-surface-soft);border-radius:8px;border:1px solid var(--kc-border);margin-bottom:6px}
.sc-structure-name{font-size:14px;font-weight:600;color:var(--kc-ink)}.sc-structure-meta{font-size:11px;color:var(--kc-ink-muted)}
.sc-structure-area{font-size:16px;font-weight:700;color:var(--kc-brand-red);text-align:right}.sc-structure-sq{font-size:11px;color:var(--kc-ink-muted)}
.sc-material-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--kc-border)}
.sc-material-name{font-size:13px;color:var(--kc-ink-secondary)}.sc-material-qty{font-size:13px;font-weight:600;color:var(--kc-ink)}
.sc-material-conf{font-size:10px;padding:2px 6px;border-radius:4px;color:#fff;margin-left:10px}
.sc-lead-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--kc-border)}
.sc-lead-key{font-size:13px;color:var(--kc-ink-muted);text-transform:capitalize}.sc-lead-val{font-size:13px;color:var(--kc-ink)}
.sc-crosscheck{background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:14px;font-size:12px;color:var(--kc-ink-muted);margin-bottom:20px}
.sc-crosscheck strong{color:var(--kc-ink)}
.sc-empty{text-align:center;padding:60px 20px;color:var(--kc-ink-soft)}.sc-empty-icon{font-size:48px;margin-bottom:16px}
.sc-empty-title{font-size:18px;font-weight:600;margin-bottom:8px;color:var(--kc-ink-muted)}.sc-empty-desc{font-size:13px;max-width:400px;margin:0 auto;line-height:1.6}
.sc-pitch-grid{display:flex;gap:20px;flex-wrap:wrap}
.sc-pitch-item label{font-size:11px;color:var(--kc-ink-muted);display:block}.sc-pitch-item span{font-size:18px;font-weight:700;color:var(--kc-ink)}
/* Roof Sketch Annotation */
.sk-overlay{position:fixed;inset:0;z-index:8000;background:#0a0a12;display:flex;flex-direction:column;font-family:DM Sans,sans-serif}
.sk-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#111118;border-bottom:1px solid #1e1e2e;flex-shrink:0}
.sk-title{font-size:13px;font-weight:800;color:var(--kc-brand-blue);letter-spacing:0.08em;text-transform:uppercase}
.sk-close{font-size:13px;font-weight:600;color:var(--kc-ink-muted);background:none;border:1px solid #2a2a3a;border-radius:8px;padding:6px 14px;cursor:pointer;font-family:inherit}
.sk-close:hover{color:#fff;border-color:#555}
.sk-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.sk-canvas-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0a0a12}
.sk-canvas-wrap canvas{position:absolute;top:0;left:0;cursor:crosshair;touch-action:none}
.sk-canvas-wrap img{display:block;max-width:100%;max-height:100%}
.sk-toolbar{display:flex;gap:6px;padding:8px 10px;background:#111118;border-top:1px solid #1e1e2e;overflow-x:auto;flex-shrink:0;align-items:center;-webkit-overflow-scrolling:touch}
.sk-tool{padding:8px 12px;border-radius:8px;font-size:11px;font-weight:700;border:1.5px solid #2a2a3a;background:#16161f;color:var(--kc-ink-soft);cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .15s;display:flex;align-items:center;gap:5px}
.sk-tool.active{border-color:var(--tc);color:#fff;background:color-mix(in srgb,var(--tc) 15%,#16161f);box-shadow:0 0 12px color-mix(in srgb,var(--tc) 30%,transparent)}
.sk-tool .sk-dot{width:8px;height:8px;border-radius:50%;background:var(--tc);flex-shrink:0}
.sk-sep{width:1px;height:24px;background:#2a2a3a;flex-shrink:0;margin:0 2px}
.sk-summary{padding:8px 12px;background:#111118;border-top:1px solid #1e1e2e;flex-shrink:0;overflow-x:auto}
.sk-sum-grid{display:flex;gap:8px;min-width:max-content}
.sk-sum-item{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;background:#16161f;border:1px solid #1e1e2e}
.sk-sum-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sk-sum-label{font-size:10px;color:var(--kc-ink-muted);font-weight:600}
.sk-sum-val{font-size:13px;font-weight:800;color:#fff;font-family:IBM Plex Mono,monospace}
.sk-undo{padding:8px 12px;border-radius:8px;font-size:11px;font-weight:700;border:1.5px solid #2a2a3a;background:#16161f;color:var(--kc-brand-red-strong);cursor:pointer;font-family:inherit}
/* Training Tour */
#tourOverlay{display:none;position:fixed;inset:0;z-index:10000}
#tourOverlay.active{display:block}
.tour-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000}
.tour-spotlight-top,.tour-spotlight-bottom,.tour-spotlight-left,.tour-spotlight-right{position:fixed;background:rgba(0,0,0,0.7);z-index:10001}
.tour-ring{position:fixed;z-index:10002;border:3px solid var(--kc-brand-red);border-radius:12px;box-shadow:0 0 0 4px rgba(220,38,38,0.3),0 0 20px rgba(220,38,38,0.2);pointer-events:none;transition:all .4s ease}
.tour-card{position:fixed;z-index:10003;background:#111;border-radius:16px;padding:24px;max-width:380px;width:calc(100vw - 32px);box-shadow:0 20px 60px rgba(0,0,0,0.4);transition:all .3s ease;animation:tourCardIn .3s ease}
@keyframes tourCardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.tour-card-step{font-size:10px;font-weight:800;color:var(--kc-brand-red);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px}
.tour-card-title{font-size:18px;font-weight:800;color:var(--kc-border);margin-bottom:8px}
.tour-card-desc{font-size:13px;color:#d1d5db;line-height:1.5;margin-bottom:10px}
.tour-card-hint{font-size:11px;color:var(--kc-brand-red);background:rgba(220,38,38,0.06);border:1px solid rgba(220,38,38,0.15);border-radius:8px;padding:8px 12px;line-height:1.4;margin-bottom:14px}
.tour-dots{display:flex;gap:5px;justify-content:center;margin-bottom:14px}
.tour-dot{width:8px;height:8px;border-radius:50%;background:#e2e4e9;transition:all .2s}
.tour-dot.active{background:var(--kc-brand-red);transform:scale(1.3)}
.tour-dot.done{background:var(--kc-brand-blue)}
.tour-btns{display:flex;gap:8px;justify-content:space-between;align-items:center}
.tour-btn{font-family:'DM Sans';font-size:13px;font-weight:700;padding:10px 20px;border-radius:8px;cursor:pointer;border:none;transition:all .15s}
.tour-btn.primary{background:var(--kc-brand-red);color:#fff}
.tour-btn.primary:active{background:var(--kc-brand-red-active)}
.tour-btn.secondary{background:#111;color:#d1d5db}
.tour-btn.skip{background:none;color:var(--kc-ink-soft);font-size:12px;padding:8px 12px}
/* Next Steps Widget */
.ns-widget{background:#111;border:2px solid #222;border-radius:14px;margin-bottom:10px;overflow:hidden;transition:all .2s}
.ns-header{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ns-header:active{background:#111}
.ns-progress-bar{flex:1;height:5px;background:#e2e4e9;border-radius:3px;overflow:hidden}
.ns-progress-fill{height:100%;background:linear-gradient(90deg,var(--kc-brand-red),var(--kc-warning));border-radius:3px;transition:width .5s ease}
.ns-body{padding:0 14px 10px}
.ns-step{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #222;transition:all .2s}
.ns-step:last-child{border-bottom:none}
.ns-step.current{background:rgba(220,38,38,0.03);margin:0 -14px;padding:6px 14px;border-radius:8px;border-bottom-color:transparent}
.ns-step.done-row{opacity:0.55;padding:3px 0}
.ns-step.future{opacity:0.4}
.ns-circle{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;font-family:'IBM Plex Mono'}
.ns-circle.done{background:var(--kc-success);color:#fff}
.ns-circle.active{background:var(--kc-brand-red);color:#fff;box-shadow:0 0 0 3px rgba(220,38,38,0.15)}
.ns-circle.pending{background:#e2e4e9;color:var(--kc-ink-soft)}
.ns-info{flex:1;min-width:0}
.ns-title{font-size:12px;font-weight:700;color:var(--kc-ink)}
.ns-title.done{text-decoration:line-through;color:var(--kc-ink-soft);font-size:11px}
.ns-desc{font-size:11px;color:var(--kc-ink-muted);margin-top:1px}
.ns-go{font-family:'DM Sans';font-size:11px;font-weight:800;padding:5px 12px;border-radius:6px;border:none;background:var(--kc-brand-red);color:#fff;cursor:pointer;white-space:nowrap;flex-shrink:0;align-self:center}
.ns-go:active{background:var(--kc-brand-red-active)}
.ns-complete{padding:10px 14px;background:rgba(22,163,106,0.08);border-radius:8px;text-align:center;font-size:12px;font-weight:700;color:var(--kc-success);border:1px solid rgba(22,163,106,0.2)}
.ns-tip{font-size:11px;color:var(--kc-warning);margin-top:4px;line-height:1.4;font-style:italic}
.ns-learn{font-size:10px;color:var(--kc-brand-blue);cursor:pointer;text-decoration:underline;margin-top:3px;display:inline-block;font-weight:600}
/* ── My Jobs View (dark theme) ── */
.jobs-filter-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.jobs-filter-tabs button{font-family:'DM Sans';font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;border:1.5px solid #d1d5db;background:#fff;color:#4b5563;cursor:pointer;transition:all .15s}
.jobs-filter-tabs button.active{background:var(--kc-brand-blue);color:#fff;border-color:var(--kc-brand-blue);font-weight:800}
/* Navy-banner job cards (Option A, 2026-07-28): name rides a #1E3A5F banner with
   the stage as a white square-ish pill; actions live on a light-blue footer
   strip as white outlined pills. Card padding moved onto the inner rows since
   the banner needs full bleed. Shared by My Jobs / List / Board. */
.jobs-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:0;margin-bottom:12px;cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s;box-shadow:0 1px 3px rgba(15,23,42,0.06)}
.jobs-card:hover{border-color:var(--kc-brand-blue);box-shadow:0 4px 12px rgba(14,165,233,0.13)}
.jobs-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1E3A5F;padding:11px 14px}
.jobs-card-top .name{font-size:14px;font-weight:800;color:#fff;flex:1;min-width:0;line-height:1.3}
.jobs-stage{font-size:10px;font-weight:800;padding:5px 10px;border-radius:8px;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0;background:#fff;color:#0284C7;text-transform:uppercase;letter-spacing:0.03em}
.jobs-stage.locked{opacity:.7;cursor:default}
.jobs-address{font-size:13px;color:var(--kc-ink);padding:12px 14px 4px}
.jobs-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--kc-ink-muted);padding:8px 14px 12px}
.jobs-meta span{display:inline-flex;align-items:center;gap:4px}
.jobs-actions{display:flex;gap:8px;align-items:center;padding:10px 14px;background:#f3f8ff;border-top:1px solid #e5eef8}
.jobs-actions button{font-family:'DM Sans';font-size:12px;font-weight:800;color:#fff;padding:9px 14px;border-radius:9px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;background:linear-gradient(160deg,#0EA5E9,#0284C7 75%);border-bottom:4px solid #075985;box-shadow:0 4px 8px rgba(2,132,199,0.28),inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -3px 5px rgba(0,0,0,0.12);transition:transform .08s ease,border-bottom-width .08s ease,margin-top .08s ease;-webkit-tap-highlight-color:transparent}
.jobs-actions button:active{border-bottom-width:1px;margin-top:3px}
.jobs-actions .jobs-act-call{padding:0;width:42px;height:42px;border-radius:50%;margin-left:auto;flex-shrink:0;justify-content:center}
.jobs-sp{display:none;position:fixed;z-index:1200;background:#0a0a0f;border:2px solid #222;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.4);padding:6px;min-width:180px;max-height:340px;overflow-y:auto}
.jobs-sp .sp-item{font-family:'DM Sans';font-size:12px;font-weight:600;padding:8px 12px;border-radius:8px;cursor:pointer;color:#d1d5db;display:flex;align-items:center;gap:6px}
.jobs-sp .sp-item:hover{background:#111}
.jobs-sp .sp-item.current{color:var(--kc-brand-blue);font-weight:800}
.jobs-sp .sp-item.disabled{opacity:.4;cursor:default;pointer-events:none}
.jobs-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1300;align-items:center;justify-content:center}
.jobs-modal-overlay.show{display:flex}
.jobs-modal-box{background:#0a0a0f;border:1px solid #222;border-radius:14px;padding:20px;width:90%;max-width:420px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.jobs-modal-box h3{font-size:16px;font-weight:800;color:#fff;margin:0 0 12px}
.jobs-modal-box textarea{font-family:'DM Sans';font-size:13px;width:100%;min-height:100px;padding:10px;border-radius:8px;border:1.5px solid #222;background:#111;color:#fff;outline:none;resize:vertical;box-sizing:border-box}
.jobs-modal-box textarea:focus{border-color:var(--kc-brand-blue)}
.jobs-modal-box .btn-row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.jobs-modal-box .btn-cancel{font-family:'DM Sans';font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;border:1px solid #222;background:#111;color:var(--kc-ink-soft);cursor:pointer}
.jobs-modal-box .btn-save{font-family:'DM Sans';font-size:13px;font-weight:700;padding:8px 16px;border-radius:8px;border:none;background:var(--kc-brand-blue);color:#fff;cursor:pointer}
.jobs-modal-box .msg-err{color:var(--kc-brand-red-strong);font-size:12px;margin-top:6px;display:none}
.jobs-modal-box .msg-ok{color:#4ade80;font-size:12px;margin-top:6px;display:none}
@media(max-width:480px){.jobs-sum-grid{grid-template-columns:repeat(2,1fr)}}
/* ═══ GLOBAL LIGHT THEME ═══ */
body{background:var(--kc-surface-mute)!important;color:var(--kc-ink)!important}
#homeScreen,#mainContent,.main{background:var(--kc-surface-mute)!important}
#mainContent:has(.kc-deal-picker-page){background:#f1f5f9!important;max-width:none!important;padding:0!important}
#mainContent:has(.kc-fu-page){background:#fff!important;min-height:100vh}
.card{background:#fff!important;border-color:var(--kc-border)!important}
.card-title{color:var(--kc-ink)!important}
.sidebar{border-right-color:var(--kc-border)!important}
.tab{background:var(--kc-brand-blue-strong)!important;color:#fff!important;border-color:var(--kc-brand-blue-strong)!important}
.tab.active{background:var(--kc-brand-blue-active)!important;color:#fff!important;border-color:var(--kc-brand-blue-active)!important;box-shadow:0 2px 8px rgba(14,165,233,0.3)}
.sidebar .tab{background:transparent!important;border-color:transparent!important;color:#1a1a2e!important;box-shadow:none!important}
.sidebar .tab:hover{background:rgba(0,0,0,0.05)!important;color:#1a1a2e!important}
.sidebar .tab.active{background:transparent!important;color:var(--kc-brand-blue)!important;box-shadow:none!important}
.sidebar .tab.active .sb-ic{color:var(--kc-brand-blue)!important}
.sidebar .tab.sb-subitem.active{color:var(--kc-brand-blue)!important}
.text-input,.textarea-input,.sign-input{background:var(--kc-surface-soft)!important;border-color:var(--kc-border)!important;color:var(--kc-ink)!important}
.num-input{background:var(--kc-surface-soft)!important;border-color:var(--kc-border)!important;color:var(--kc-brand-blue)!important}
.line-qty{background:var(--kc-surface-soft)!important;border-color:var(--kc-border)!important;color:var(--kc-ink)!important}
.line-sell{background:var(--kc-surface-soft)!important;border-color:var(--kc-border)!important;color:var(--kc-success)!important}
.wo-manual-input{background:var(--kc-surface-soft)!important;border-color:var(--kc-border)!important;color:var(--kc-brand-red)!important}
.cps-input{background:var(--kc-surface-soft)!important;border-color:var(--kc-border)!important;color:var(--kc-success)!important}
.text-input:focus,.textarea-input:focus,.num-input:focus,.sell-input:focus,.line-qty:focus,.line-sell:focus,.sign-input:focus{border-color:var(--kc-brand-blue)!important}
.label{color:var(--kc-ink-muted)!important}
.section-head{color:var(--kc-ink-muted)!important}
.line-row{border-bottom-color:var(--kc-border)!important}
.line-label{color:var(--kc-ink-secondary)!important}
.line-unit{color:var(--kc-ink-muted)!important}
.line-at{color:var(--kc-ink-muted)!important}
.line-total{color:var(--kc-ink-muted)!important}
.auto-qty{background:rgba(14,165,233,0.06)!important;border-color:rgba(14,165,233,0.25)!important}
.divider{background:var(--kc-border)!important}
.summary-line{border-bottom-color:var(--kc-border)!important;color:var(--kc-ink-secondary)!important}
.comm-line{border-bottom-color:var(--kc-border)!important;color:var(--kc-ink-secondary)!important}
.comm-box{background:linear-gradient(135deg,rgba(220,38,38,0.04),rgba(14,165,233,0.03))!important;border-color:rgba(220,38,38,0.15)!important}
.draw-card{border-color:var(--kc-border)!important;background:#fff!important}
.admin-box{background:rgba(239,68,68,0.04)!important;border-color:rgba(239,68,68,0.15)!important}
.profit-box{background:rgba(56,189,248,0.04)!important;border-color:rgba(56,189,248,0.15)!important}
.sign-block{background:#fff!important;border-color:var(--kc-border)!important}
.sign-block.signed{border-color:rgba(56,189,248,0.4)!important;background:rgba(56,189,248,0.04)!important}
.sign-title{color:var(--kc-ink-muted)!important}
.wo-header{border-bottom-color:var(--kc-border)!important}
.wo-row{border-bottom-color:var(--kc-border)!important}
.wo-row:nth-child(odd){background:var(--kc-surface-soft)!important}
.wo-item{color:var(--kc-ink-secondary)!important}
.wo-val{color:var(--kc-ink)!important}
.wo-num{color:var(--kc-ink)!important}
.wo-num.neg{color:#ef4444!important}.wo-num.pos{color:#16a34a!important}.wo-num.manual{color:var(--kc-brand-red)!important}
.wo-unit{color:var(--kc-ink-muted)!important}
.wo-section{color:var(--kc-ink-muted)!important}
.wo-notes{background:#fff!important;border-color:var(--kc-border)!important}
.wo-notes-title{color:var(--kc-ink-muted)!important}
.wo-brand.tamko{background:rgba(14,165,233,0.08)!important}
.wo-brand.shop{background:rgba(220,38,38,0.06)!important}
.cps-table th{border-bottom-color:var(--kc-border)!important;color:var(--kc-ink-muted)!important}
.cps-table td{border-bottom-color:var(--kc-border)!important;color:var(--kc-ink-secondary)!important}
.cps-table tr:nth-child(odd){background:var(--kc-surface-soft)!important}
.cps-table td.r{color:var(--kc-ink)!important}
.cps-total-row td{border-top-color:var(--kc-border)!important}
.ns-widget{background:#fff!important;border-color:var(--kc-border)!important}
.ns-header:active{background:var(--kc-surface-mute)!important}
.ns-progress-bar{background:var(--kc-border)!important}
.ns-step{border-bottom-color:var(--kc-border)!important}
.ns-step.current{background:rgba(220,38,38,0.04)!important}
.ns-title{color:var(--kc-ink)!important}
.ns-title.done{color:var(--kc-ink-soft)!important}
.ns-desc{color:var(--kc-ink-muted)!important}
.ns-circle.pending{background:var(--kc-border)!important;color:var(--kc-ink-soft)!important}
.ns-complete{background:rgba(22,163,106,0.08)!important;border-color:rgba(22,163,106,0.2)!important}
.sc-search input{background:var(--kc-surface-soft)!important;border-color:var(--kc-border)!important;color:var(--kc-ink)!important}
.sc-stat{background:#fff!important;border-color:var(--kc-border)!important}
.sc-stat-value{color:var(--kc-ink)!important}
.sc-card{background:#fff!important;border-color:var(--kc-border)!important}
.sc-report-address{color:var(--kc-ink)!important}
.sc-structure{background:var(--kc-surface-soft)!important;border-color:var(--kc-border)!important}
.sc-structure-name{color:var(--kc-ink)!important}
.sc-crosscheck{background:rgba(56,189,248,0.06)!important;border-color:rgba(56,189,248,0.15)!important}
.sc-crosscheck strong{color:var(--kc-ink)!important}
.sc-error{background:rgba(239,68,68,0.06)!important;border-color:rgba(239,68,68,0.2)!important}
.sc-detail-item span{color:var(--kc-ink)!important}
.sc-pitch-item span{color:var(--kc-ink)!important}
.sc-cond-score{color:var(--kc-ink)!important}
.sc-material-name{color:var(--kc-ink-secondary)!important}
.sc-material-qty{color:var(--kc-ink)!important}
.sc-material-row{border-bottom-color:var(--kc-border)!important}
.sc-lead-row{border-bottom-color:var(--kc-border)!important}
.sc-lead-val{color:var(--kc-ink)!important}
.sc-prog-bar{background:var(--kc-border)!important}
.sc-empty-title{color:var(--kc-ink-soft)!important}
.mkt-btn{border-color:var(--kc-border)!important;color:var(--kc-ink-muted)!important}
.red-flag{background:rgba(239,68,68,0.04)!important}
.footer{border-top-color:var(--kc-border)!important;color:var(--kc-ink-muted)!important}
/* Broad input/select/textarea light override inside main content */
.main input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="color"]),
.main select,.main textarea{background:var(--kc-surface-soft)!important;border-color:var(--kc-border)!important;color:var(--kc-ink)!important}
.main select option{background:#fff;color:var(--kc-ink)}
.prop-grid select{background:var(--kc-surface-soft)!important;color:var(--kc-ink)!important}
#custOverlay>*,#contractOverlay>*,#proposalOnsiteOverlay>*,#cameraOverlay>*,#presentOverlay>*,#insUpgradeOverlay>*,#sketchOverlay>*,#tourOverlay>*{pointer-events:auto}
.bp-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0a1628;z-index:9999;display:flex;flex-direction:column;overflow:auto;pointer-events:auto}
.bp-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#0d1b30;border-bottom:1px solid #1e3a5f;flex-shrink:0}
.bp-toolbar-title{font-size:13px;font-weight:800;color:var(--kc-brand-blue);letter-spacing:0.12em;text-transform:uppercase;font-family:IBM Plex Mono}
.bp-toolbar-addr{font-size:11px;color:var(--kc-dark-text-soft);margin-top:2px}
.bp-toolbar-btn{padding:8px 16px;border-radius:8px;border:1px solid #1e3a5f;background:transparent;color:var(--kc-dark-text-mute);font-size:12px;font-weight:600;cursor:pointer;font-family:DM Sans}
.bp-toolbar-btn:hover{background:#1e3a5f;color:#e2e8f0}
.bp-toolbar-btn-primary{background:var(--kc-brand-blue-strong);border-color:var(--kc-brand-blue-strong);color:#fff}
.bp-toolbar-btn-primary:hover{background:var(--kc-brand-blue-active)}
.bp-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.bp-canvas-wrap canvas{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 0 40px rgba(14,165,233,0.15)}
/* GPS Tracker */
.gps-marker{background:transparent!important;border:none!important}
.leaflet-popup-content-wrapper{border-radius:10px!important;box-shadow:0 4px 16px rgba(0,0,0,0.15)!important}
.leaflet-popup-content{margin:12px 16px!important}
/* ── Deal View — full-page deal record (js/deal-view/) ── */
.kc-dv-page{max-width:1440px;margin:0 auto}
.kc-dv-switch{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.kc-dv-switch-btn{font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);font-weight:700;min-height:44px;padding:0 18px;border-radius:var(--kc-radius-md);border:1.5px solid var(--kc-border);background:#fff;color:var(--kc-ink-secondary);cursor:pointer}
.kc-dv-switch-btn.active{border-color:var(--kc-brand-blue);background:var(--kc-brand-blue);color:#fff}
.kc-dv-seg{display:none}
.kc-dv-grid{display:grid;gap:14px;grid-template-columns:220px minmax(0,1fr) 240px;align-items:start}
.kc-dv-col{min-width:0}
.kc-dv-group{padding:14px 16px;overflow:hidden}
.kc-dv-group-title{font-size:var(--kc-text-xs);font-weight:800;color:var(--kc-ink-muted);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:10px}
.kc-dv-prop-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--kc-surface-mute)}
.kc-dv-prop-row:last-child{border-bottom:none}
.kc-dv-prop-label{font-size:var(--kc-text-sm);color:var(--kc-ink-muted);font-weight:600;flex-shrink:0}
.kc-dv-prop-value{font-size:var(--kc-text-sm);color:var(--kc-ink);font-weight:600;text-align:right;word-break:break-word;min-width:0}
.kc-dv-empty{color:var(--kc-ink-soft);font-weight:500}
.kc-dv-stage-pill{display:inline-block;font-size:var(--kc-text-xs);font-weight:800;padding:3px 10px;border-radius:var(--kc-radius-full);background:rgba(30,58,95,0.12);color:#1E3A5F}
.kc-dv-loading{color:var(--kc-ink-soft);font-size:var(--kc-text-sm);padding:14px 0;text-align:center}
.kc-dv-missing{font-size:var(--kc-text-xs);color:var(--kc-ink-soft);background:var(--kc-surface-soft);border:1px dashed var(--kc-border);border-radius:var(--kc-radius-sm);padding:8px 12px;margin-bottom:10px}
.kc-dv-activity{padding:14px 16px}
.kc-dv-upcoming{background:rgba(2,132,199,0.07);border:1px solid rgba(2,132,199,0.25);border-radius:var(--kc-radius-md);padding:10px 12px;margin-bottom:10px}
.kc-dv-upcoming-row{font-size:var(--kc-text-sm);color:var(--kc-ink);padding:3px 0}
.kc-dv-chip-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:10px;-webkit-overflow-scrolling:touch}
.kc-dv-chip{font-family:var(--kc-font-sans);font-size:var(--kc-text-xs);font-weight:600;min-height:36px;padding:0 13px;border-radius:var(--kc-radius-sm);cursor:pointer;border:1.5px solid var(--kc-border);background:#fff;color:var(--kc-ink-secondary);white-space:nowrap;flex-shrink:0;transition:transform .08s ease,border-bottom-width .08s ease,margin-top .08s ease;-webkit-tap-highlight-color:transparent}
.kc-dv-chip.active{font-weight:800;border:none;background:linear-gradient(160deg,#0EA5E9,#0284C7 75%);border-bottom:3px solid #075985;box-shadow:0 3px 6px rgba(2,132,199,0.28),inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -2px 4px rgba(0,0,0,0.12);color:#fff}
.kc-dv-event{border:1px solid var(--kc-border);border-radius:var(--kc-radius-md);padding:12px 14px;margin-bottom:10px;background:var(--kc-surface-soft)}
.kc-dv-event-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.kc-dv-event-badge{font-size:10px;font-weight:800;padding:3px 9px;border-radius:var(--kc-radius-sm);letter-spacing:0.04em;text-transform:uppercase}
.kc-dv-event-meta{font-size:var(--kc-text-xs);color:var(--kc-ink-soft)}
.kc-dv-event-meta b{font-weight:600;color:var(--kc-ink-secondary)}
.kc-dv-event-body{font-size:var(--kc-text-sm);color:var(--kc-ink);line-height:1.55;word-break:break-word;overflow-wrap:anywhere}
.kc-dv-event-text{font-size:var(--kc-text-sm);color:var(--kc-ink);font-weight:500}
.kc-dv-event-text.stage{font-weight:700}
.kc-dv-event-sub{font-size:var(--kc-text-xs);color:var(--kc-ink-muted);margin-top:4px;word-break:break-word}
.kc-dv-card{padding:14px 16px;overflow:hidden}
.kc-dv-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kc-dv-count{font-size:var(--kc-text-xs);font-weight:800;min-width:22px;text-align:center;padding:2px 7px;border-radius:var(--kc-radius-full);background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.3);color:#fff}
.kc-dv-card-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--kc-text-sm);color:var(--kc-ink);padding:7px 0;border-bottom:1px solid var(--kc-surface-mute)}
.kc-dv-card-row:last-of-type{border-bottom:none}
.kc-dv-card-amt{margin-left:auto;font-weight:800;font-family:var(--kc-font-mono);color:var(--kc-ink)}
.kc-dv-card-total{font-size:var(--kc-text-sm);color:var(--kc-ink-secondary);padding-top:8px;border-top:1px solid var(--kc-border);margin-top:4px}
.kc-dv-card-more{font-size:var(--kc-text-xs);color:var(--kc-ink-soft);padding-top:6px}
.kc-dv-card-err{font-size:var(--kc-text-sm);color:var(--kc-brand-red);padding:6px 0}
.kc-dv-card-err a{color:var(--kc-brand-red)}
.kc-dv-card-open{font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);font-weight:800;width:100%;min-height:44px;margin-top:10px;border-radius:var(--kc-radius-md);border:1.5px solid rgba(2,132,199,0.3);background:#fff;color:var(--kc-brand-blue);cursor:pointer}
/* Tablets keep the full three-column desktop grid (Austin N 2026-08-13:
   "tablet should look similar to desktop") — the rails' collapse-to-strip
   handles narrow widths; only phones (<768px) switch to segmented panes. */
.kc-dv-mclose{display:none}
@media(max-width:767px){
.kc-dv-seg{display:flex;gap:6px;position:sticky;top:calc(var(--header-h,0px) + var(--dealbar-h,0px));z-index:50;background:var(--kc-surface-mute);padding:8px 0;margin-bottom:10px}
/* Opened sidebar = full page on phones. Sticky close bar sits just under the
   segmented control; min-height keeps the pane feeling like its own screen. */
.kc-dv-mclose{display:flex;align-items:center;gap:10px;position:sticky;top:calc(var(--header-h,0px) + var(--dealbar-h,0px) + 62px);z-index:49;background:var(--kc-surface-mute);padding:4px 0 8px;margin-bottom:6px}
.kc-dv-mclose button{font-family:var(--kc-font-sans);min-height:44px;padding:0 16px;font-size:var(--kc-text-sm);font-weight:800;border-radius:var(--kc-radius-md);border:1.5px solid var(--kc-brand-blue);background:#fff;color:var(--kc-brand-blue);cursor:pointer}
.kc-dv-mclose span{font-size:var(--kc-text-sm);font-weight:800;color:var(--kc-ink-secondary)}
.kc-dv-grid[data-pane="props"] .kc-dv-col-props,.kc-dv-grid[data-pane="records"] .kc-dv-col-records{min-height:calc(100vh - var(--header-h,0px) - var(--dealbar-h,0px) - 120px)}
.kc-dv-col-props .kc-dv-lhead,.kc-dv-col-records>.kc-dv-records-head{display:none}
.kc-dv-seg-btn{font-family:var(--kc-font-sans);flex:1;min-height:44px;font-size:var(--kc-text-sm);font-weight:700;border-radius:var(--kc-radius-md);border:1.5px solid var(--kc-border);background:#fff;color:var(--kc-ink-secondary);cursor:pointer;transition:transform .08s ease,border-bottom-width .08s ease,margin-top .08s ease;-webkit-tap-highlight-color:transparent}
.kc-dv-seg-btn.active{border:none;background:linear-gradient(160deg,#2b4d78,#1E3A5F 75%);border-bottom:4px solid #0f2440;box-shadow:0 4px 8px rgba(15,36,64,0.32),inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -3px 5px rgba(0,0,0,0.15);color:#fff;font-weight:800}
/* Active pane grows longest (Austin N 2026-08-13): the selected tab reads as
   the open panel, the other two shrink to stubs — and swap sizes on switch.
   Scoped to .kc-dv-seg so the center toggle's seg-btns keep equal widths. */
.kc-dv-seg .kc-dv-seg-btn{flex:1 1 0;transition:flex-grow .25s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--kc-text-xs);padding:0 6px}
.kc-dv-seg .kc-dv-seg-btn.active{flex-grow:2.6;font-size:var(--kc-text-sm)}
.kc-dv-seg-arrow{font-size:10px;opacity:0.75;margin:0 1px}
.kc-dv-grid{grid-template-columns:1fr}
.kc-dv-col-props,.kc-dv-col-activity,.kc-dv-col-records{grid-column:1;grid-row:auto;display:none}
.kc-dv-grid[data-pane="props"] .kc-dv-col-props{display:block}
.kc-dv-grid[data-pane="activity"] .kc-dv-col-activity{display:block}
.kc-dv-grid[data-pane="records"] .kc-dv-col-records{display:block}
}
/* Deal View — inline property edit */
.kc-dv-prop-clickable{cursor:pointer}
.kc-dv-prop-clickable:hover{background:var(--kc-surface-soft)}
.kc-dv-edit-pencil{margin-left:6px;font-size:11px;color:var(--kc-ink-soft)}
.kc-dv-prop-editing{flex-direction:column;align-items:stretch}
.kc-dv-edit-wrap{width:100%}
.kc-dv-edit-input{width:100%;box-sizing:border-box;font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);color:var(--kc-ink);border:1.5px solid var(--kc-brand-blue);border-radius:var(--kc-radius-sm);padding:10px 12px;background:#fff;outline:none;min-height:44px;margin-top:6px}
.kc-dv-edit-btns{display:flex;gap:8px;margin-top:8px}
.kc-dv-edit-save{flex:1;min-height:44px;font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);font-weight:800;border:none;border-radius:var(--kc-radius-md);background:var(--kc-brand-blue);color:#fff;cursor:pointer}
.kc-dv-edit-cancel{flex:1;min-height:44px;font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);font-weight:700;border:1.5px solid var(--kc-border);border-radius:var(--kc-radius-md);background:#fff;color:var(--kc-ink-secondary);cursor:pointer}
.kc-dv-edit-err{font-size:var(--kc-text-xs);font-weight:600;color:var(--kc-brand-red);margin-top:6px}
.kc-dv-edit-saving{font-size:var(--kc-text-sm);color:var(--kc-ink-soft);padding:10px 0}
/* Deal View — KC workspace compose + item actions */
.kc-dv-compose-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.kc-dv-compose-btn{flex:1 1 28%;min-width:88px;min-height:44px;font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);font-weight:800;border-radius:var(--kc-radius-md);border:none;background:linear-gradient(160deg,#2b4d78,#1E3A5F 75%);border-bottom:3px solid #0f2440;box-shadow:0 3px 6px rgba(15,36,64,0.32),inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -2px 4px rgba(0,0,0,0.15);color:#fff;cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:transform .08s ease,border-bottom-width .08s ease,margin-top .08s ease;-webkit-tap-highlight-color:transparent}
.kc-dv-compose-btn:active{border-bottom-width:1px;margin-top:2px}
.kc-dv-compose{border:1.5px solid var(--kc-brand-blue);border-radius:var(--kc-radius-md);padding:12px;margin-bottom:12px;background:var(--kc-surface-soft)}
.kc-dv-compose-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--kc-text-sm);color:var(--kc-ink)}
.kc-dv-compose-body{min-height:90px;resize:vertical}
.kc-dv-compose-row{display:flex;gap:8px}
.kc-dv-compose-row .kc-dv-edit-input{flex:1;min-width:0}
.kc-dv-compose-lbl{display:block;font-size:var(--kc-text-xxs);font-weight:700;color:var(--kc-ink-muted);letter-spacing:0.06em;text-transform:uppercase;margin-top:8px}
.kc-dv-compose-save{width:100%;margin-top:10px}
/* Deal View / Deal Preview — multi-assignee checkbox list (task composer) */
.kc-dv-assignee-search{margin-top:6px;margin-bottom:0}
.kc-dv-assignee-list{max-height:190px;overflow-y:auto;border:1.5px solid var(--kc-border);border-radius:var(--kc-radius-sm);margin-top:6px;background:#fff}
.kc-dv-assignee-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;font-size:var(--kc-text-sm);color:var(--kc-ink);cursor:pointer;border-bottom:1px solid var(--kc-surface-mute)}
.kc-dv-assignee-row:last-child{border-bottom:none}
.kc-dv-assignee-row input{width:18px;height:18px;flex-shrink:0}
.kc-dv-assignee-empty{padding:12px;font-size:var(--kc-text-sm);color:var(--kc-ink-soft);text-align:center}
.kc-dv-event.pinned{border-color:rgba(217,119,6,0.45)}
.kc-dv-event-highlight{border-color:#38BDF8;box-shadow:0 0 0 3px rgba(56,189,248,0.25);transition:box-shadow 0.3s ease,border-color 0.3s ease}
.kc-dv-event-kc{font-size:9px;font-weight:800;padding:2px 6px;border-radius:var(--kc-radius-xs);background:rgba(22,163,74,0.12);color:#16a34a;letter-spacing:0.04em}
.kc-dv-event-actions{margin-left:auto;display:flex;gap:6px}
.kc-dv-event-act{font-family:var(--kc-font-sans);font-size:var(--kc-text-xs);font-weight:700;min-height:32px;padding:0 10px;border-radius:var(--kc-radius-sm);border:1px solid var(--kc-border);background:#fff;color:var(--kc-ink-secondary);cursor:pointer}
.kc-dv-event-act.danger{color:var(--kc-brand-red);border-color:rgba(220,38,38,0.3)}
.kc-dv-event-text.done{text-decoration:line-through;color:var(--kc-ink-muted)}
/* Deal View — HubSpot-style collapse: property groups, record cards, right rail */
.kc-dv-group-head,.kc-dv-card-head{cursor:pointer;user-select:none;-webkit-user-select:none;display:flex;align-items:center;gap:7px;min-height:32px;margin:-14px -16px 12px;padding:11px 16px;background:#1a1a2e;border-top-left-radius:11px;border-top-right-radius:11px}
.kc-dv-group-head:hover,.kc-dv-card-head:hover{background:#262a45}
.kc-dv-group-head .kc-dv-group-title,.kc-dv-card-head .kc-dv-group-title{margin-bottom:0;color:#fff}
.kc-dv-card-head .kc-dv-count{margin-left:auto}
.kc-dv-chevron{display:inline-block;font-size:11px;color:rgba(255,255,255,0.72);transition:transform .12s;flex-shrink:0}
.kc-dv-chevron.open{transform:rotate(90deg)}
.kc-dv-group-head + .kc-dv-prop-row,.kc-dv-card-head + .kc-dv-card-row{margin-top:6px}
.kc-dv-records-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 8px}
.kc-dv-records-title{font-size:var(--kc-text-xs);font-weight:800;color:var(--kc-ink-muted);letter-spacing:0.08em;text-transform:uppercase}
.kc-dv-rail-btn{font-family:var(--kc-font-sans);font-size:12px;font-weight:800;width:28px;height:28px;border-radius:var(--kc-radius-sm);border:1px solid var(--kc-border);background:#fff;color:var(--kc-ink-secondary);cursor:pointer;flex-shrink:0}
.kc-dv-grid[data-rail="collapsed"]{grid-template-columns:220px minmax(0,1fr) 36px}
.kc-dv-col-records.collapsed{background:#fff;border:1px solid var(--kc-border);border-radius:12px;padding:6px 3px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;min-height:180px}
.kc-dv-col-records.collapsed .kc-dv-rail-btn{border:none}
.kc-dv-rail-label{font-size:10px;font-weight:800;color:var(--kc-ink-muted);letter-spacing:0.1em;text-transform:uppercase;writing-mode:vertical-rl}
@media(max-width:767px){.kc-dv-records-head .kc-dv-rail-btn{display:none}}
/* Deal View — stage stepper, hero card, center toggle, financial strip, photos */
.kc-dv-hero{padding:16px}
.kc-dv-hero-name{font-size:var(--kc-text-3xl);font-weight:800;color:var(--kc-ink);line-height:1.3;word-break:break-word}
.kc-dv-hero-po{font-size:var(--kc-text-display);font-weight:800;font-family:var(--kc-font-mono);color:var(--kc-ink);margin-top:2px}
.kc-dv-hero-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.kc-dv-hero-amt-label,.kc-dv-hero-owed-label{font-size:var(--kc-text-xxs);font-weight:800;color:var(--kc-ink-muted);letter-spacing:0.08em;text-transform:uppercase;margin-top:10px}
.kc-dv-hero-amt,.kc-dv-hero-owed{display:block;font-size:var(--kc-text-display);font-weight:800;font-family:var(--kc-font-mono);color:var(--kc-ink)}
.kc-dv-hero-owner{font-size:var(--kc-text-sm);color:var(--kc-ink-muted);margin-top:6px}
.kc-dv-hero-owner b{color:var(--kc-ink-secondary)}
.kc-dv-hero-actions{display:flex;gap:6px;margin-top:12px}
.kc-dv-hero-btn{flex:1;min-height:40px;font-family:var(--kc-font-sans);font-size:var(--kc-text-xs);font-weight:800;border-radius:var(--kc-radius-md);border:none;background:#7C93B8;border-bottom:3px solid #4A5F82;box-shadow:0 3px 6px rgba(74,95,130,0.35),inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -2px 4px rgba(0,0,0,0.12);color:#fff;cursor:pointer;white-space:nowrap;transition:transform .08s ease,border-bottom-width .08s ease,margin-top .08s ease;-webkit-tap-highlight-color:transparent}
.kc-dv-hero-btn:active{border-bottom-width:1px;margin-top:2px}
.kc-dv-hero-exit{display:inline-flex;align-items:center;justify-content:center;width:auto;margin-top:10px;min-height:34px;padding:0 16px;font-family:var(--kc-font-sans);font-size:var(--kc-text-base);font-weight:800;border-radius:var(--kc-radius-md);border:none;background:linear-gradient(160deg,#EF4444,#B91C1C 75%);border-bottom:3px solid #7f1d1d;box-shadow:0 3px 6px rgba(185,28,28,0.35),inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -2px 4px rgba(0,0,0,0.15);color:#fff;cursor:pointer;transition:transform .08s ease,border-bottom-width .08s ease,margin-top .08s ease;-webkit-tap-highlight-color:transparent}
.kc-dv-hero-exit:active{border-bottom-width:1px;margin-top:10px}
.kc-dv-center-toggle{display:flex;gap:6px;margin-bottom:10px}
.kc-dv-center-toggle .kc-dv-seg-btn{font-family:var(--kc-font-sans);flex:1;min-height:40px;font-size:var(--kc-text-sm);font-weight:700;border-radius:var(--kc-radius-md);border:1.5px solid var(--kc-border);background:#fff;color:var(--kc-ink-secondary);cursor:pointer;transition:transform .08s ease,border-bottom-width .08s ease,margin-top .08s ease;-webkit-tap-highlight-color:transparent}
.kc-dv-center-toggle .kc-dv-seg-btn.active{border:none;background:linear-gradient(160deg,#2b4d78,#1E3A5F 75%);border-bottom:4px solid #0f2440;box-shadow:0 4px 8px rgba(15,36,64,0.32),inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -3px 5px rgba(0,0,0,0.15);color:#fff;font-weight:800}
.kc-dv-fu-wrap{min-width:0}
.kc-dv-fin-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.kc-dv-fin-tile{background:#fff;border:1px solid var(--kc-border);border-radius:12px;padding:12px 14px}
.kc-dv-fin-label{font-size:var(--kc-text-xxs);font-weight:800;color:var(--kc-ink-muted);letter-spacing:0.08em;text-transform:uppercase}
.kc-dv-fin-val{font-size:var(--kc-text-display);font-weight:800;font-family:var(--kc-font-mono);color:var(--kc-ink);margin-top:2px}
.kc-dv-fin-tile.good .kc-dv-fin-val{color:#15803d}
.kc-dv-fin-tile.warn .kc-dv-fin-val{color:var(--kc-brand-red)}
.kc-dv-photo-row{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0}
.kc-dv-photo-thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--kc-radius-sm);border:1px solid var(--kc-border)}
@media(max-width:767px){.kc-dv-fin-strip{grid-template-columns:1fr 1fr}.kc-dv-fin-val{font-size:var(--kc-text-lg)}}
/* Deal View — stage progress bar (read-only tracker) + left rail collapse */
.kc-dv-track{position:relative;padding:6px 0 30px;margin-bottom:8px}
.kc-dv-track-bar{position:relative;height:10px;border-radius:var(--kc-radius-full);background:var(--kc-surface-mute);border:1px solid var(--kc-border)}
.kc-dv-track-fill{height:100%;border-radius:var(--kc-radius-full);background:linear-gradient(90deg,var(--kc-brand-blue),var(--kc-brand-blue-strong));transition:width .3s}
.kc-dv-track-dot{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--kc-brand-blue-strong);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(2,132,199,0.4)}
.kc-dv-track-ends{display:flex;justify-content:space-between;margin-top:5px;font-size:var(--kc-text-xxs);font-weight:700;color:var(--kc-ink-soft);letter-spacing:0.04em;text-transform:uppercase}
.kc-dv-track-cur{position:absolute;bottom:0;transform:translateX(-50%);font-size:var(--kc-text-xs);font-weight:800;color:var(--kc-brand-blue-strong);white-space:nowrap;background:rgba(2,132,199,0.10);border-radius:var(--kc-radius-full);padding:2px 10px}
.kc-dv-grid[data-lrail="collapsed"]{grid-template-columns:36px minmax(0,1fr) 240px}
.kc-dv-grid[data-lrail="collapsed"][data-rail="collapsed"]{grid-template-columns:36px minmax(0,1fr) 36px}
.kc-dv-col-props.collapsed{background:#fff;border:1px solid var(--kc-border);border-radius:12px;padding:6px 3px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;min-height:180px}
.kc-dv-col-props.collapsed .kc-dv-rail-btn{border:none}
/* Deal View — empty-card CTAs, refresh button, overdue badge, hero reach row */
.kc-dv-card-cta{width:100%;min-height:44px;margin-top:6px;font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);font-weight:800;border-radius:var(--kc-radius-md);border:1.5px dashed rgba(2,132,199,0.45);background:rgba(2,132,199,0.05);color:var(--kc-brand-blue);cursor:pointer}
.kc-dv-refresh{flex:0 0 44px;min-height:40px;font-size:17px;font-weight:800;border-radius:var(--kc-radius-md);border:1.5px solid var(--kc-border);background:#fff;color:var(--kc-ink-secondary);cursor:pointer}
.kc-dv-refresh.spinning{animation:kcDvSpin 1s linear infinite;pointer-events:none;color:var(--kc-brand-blue)}
@keyframes kcDvSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.kc-dv-overdue{display:inline-block;min-width:18px;padding:1px 6px;border-radius:var(--kc-radius-full);background:var(--kc-brand-red);color:#fff;font-size:10px;font-weight:800;margin-left:4px}
.kc-dv-hero-reach{margin-top:8px}
.kc-dv-hero-reach .kc-dv-hero-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* Deal View — property search */
.kc-dv-propsearch{padding:10px 12px;display:flex;gap:10px;align-items:center}
.kc-dv-propsearch input[type="text"]{flex:1;min-width:0;font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);color:var(--kc-ink);border:1.5px solid var(--kc-border);border-radius:var(--kc-radius-sm);padding:9px 10px;background:#fff;outline:none;min-height:40px}
.kc-dv-propsearch input[type="text"]:focus{border-color:var(--kc-brand-blue)}
.kc-dv-propsearch-toggle{display:flex;align-items:center;gap:5px;font-size:var(--kc-text-xs);font-weight:700;color:var(--kc-ink-muted);white-space:nowrap;cursor:pointer}
.kc-dv-propsearch-toggle input{width:16px;height:16px}
/* Deal View — rail-arrow alignment + pipeline pill */
.kc-dv-records-head{padding:2px 4px 8px}
.kc-dv-lhead{justify-content:flex-start;gap:8px}
/* No-green standing rule (Austin W) — pipeline pill uses the confirmed/blue
   substitute palette instead of the green it shipped with. */
.kc-dv-pipe-pill{background:#E5F5FD;color:#0369A1;border:1px solid #7DD3FC}
/* ── PM Jobs (js/production/app-pm-jobs.js) — icon-free, big-tap job list +
   detail split for a PM on an iPad. Same --kc-* tokens as the kc-dv-*
   overview shell above; own class prefix since this is a 2-pane (list/
   detail) layout, not the shell's 3-pane props/activity/records shape. ── */
.kc-pm-page{max-width:1400px;margin:0 auto}
.kc-pm-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.kc-pm-title{font-size:var(--kc-text-3xl);font-weight:800;color:var(--kc-ink)}
.kc-pm-sub{font-size:var(--kc-text-sm);color:var(--kc-ink-muted);margin-top:2px}
.kc-pm-switch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
/* PM roster switcher (navy) and trade filter (light gray) — same 3D raised
   language as .kc-pm-tradetab, but every chip in a row shares its row's
   color family regardless of which one is selected (Austin W, 2026-08-26);
   .active gets the pressed-in look instead of a color swap so the selected
   chip is still legible at a glance. */
.kc-pm-chip3d{font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);font-weight:800;padding:0 15px;min-height:38px;border:none;border-radius:var(--kc-radius);cursor:pointer;white-space:nowrap;transition:transform .08s ease,border-bottom-width .08s ease,margin-top .08s ease;-webkit-tap-highlight-color:transparent}
.kc-pm-chip3d.navy{background:#3E5C82;border-bottom:3px solid #1E3A5F;box-shadow:0 3px 6px rgba(30,58,95,0.32),inset 0 1px 0 rgba(255,255,255,0.25),inset 0 -2px 4px rgba(0,0,0,0.15);color:#fff}
.kc-pm-chip3d.navy.active{background:#1E3A5F;border-bottom-width:1px;margin-top:2px}
/* Trade filter row (All Trades/Roofing/Gutters/Siding/Solar) — background
   was #E7ECF3 against the page's own --kc-surface-mute (#f1f5f9), nearly
   the same lightness, reading as barely-there (Austin W, 2026-08-31: "all
   trades roofing etc tabs are hard to see"). Slate instead of pale blue-gray
   gives it real contrast without competing with navy (roster) or sky
   (topbar actions) for attention. */
.kc-pm-chip3d.gray{background:#94A3B8;border-bottom:3px solid #475569;box-shadow:0 3px 6px rgba(51,65,85,0.24),inset 0 1px 0 rgba(255,255,255,0.25),inset 0 -2px 4px rgba(0,0,0,0.12);color:#fff}
.kc-pm-chip3d.gray.active{background:#475569;border-bottom-width:1px;margin-top:2px}
/* Topbar actions (Today's To-Do / Practice Mode) — pulled off the gray
   variant onto their own color so they read as more "actionable" than the
   roster/trade filter chips below (Austin W, 2026-08-31: liked this change
   on its own merits, separate from the gray-contrast fix above). */
.kc-pm-chip3d.sky{background:#22B8F5;border-bottom:3px solid #0369A1;box-shadow:0 3px 6px rgba(14,165,233,0.32),inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -2px 4px rgba(0,0,0,0.12);color:#fff}
.kc-pm-chip3d.sky.active{background:#0369A1;border-bottom-width:1px;margin-top:2px}
.kc-pm-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.kc-pm-hero h2{font-size:var(--kc-text-3xl);font-weight:800;color:var(--kc-ink);margin:0 0 6px}
.kc-pm-pillrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kc-pm-pill{font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);font-weight:800;padding:4px 11px;border-radius:var(--kc-radius-full)}
.kc-pm-contact{display:flex;gap:8px}
.kc-pm-contact button{font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-md);border:none;border-radius:var(--kc-radius-md);padding:0 18px;min-height:46px;cursor:pointer}
.kc-pm-contact button:disabled{opacity:0.45;cursor:not-allowed}
.kc-pm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.kc-pm-stat{background:#fff;border:1px solid var(--kc-border);border-radius:var(--kc-radius-lg);padding:12px;text-align:center}
.kc-pm-stat-val{font-family:var(--kc-font-mono);font-size:var(--kc-text-xl);font-weight:700;color:var(--kc-ink)}
.kc-pm-stat-lbl{font-size:var(--kc-text-xxs);color:var(--kc-ink-muted);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-top:3px}
.kc-pm-section-lbl{font-size:var(--kc-text-xs);font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:var(--kc-ink-muted);margin:0 0 10px}
.kc-pm-sched{background:#fff;border:1px solid var(--kc-border);border-left-width:4px;border-radius:var(--kc-radius-lg);padding:12px 16px;margin-bottom:10px}
.kc-pm-sched-top{font-weight:800;font-size:var(--kc-text-lg);color:var(--kc-ink)}
.kc-pm-sched-sub{font-size:var(--kc-text-sm);color:var(--kc-ink-muted);margin-top:2px}
.kc-pm-sched-when{float:right;font-family:var(--kc-font-mono);font-size:var(--kc-text-sm);color:var(--kc-ink-muted);text-align:right}
.kc-pm-sched-cta{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1.5px dashed var(--kc-border);border-radius:var(--kc-radius-lg);padding:14px 16px;cursor:pointer;margin-bottom:20px}
.kc-pm-sched-cta .ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:rgba(2,132,199,0.10);color:var(--kc-brand-blue-strong)}
.kc-pm-sched-cta .lbl{display:block;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-md);color:var(--kc-ink)}
.kc-pm-sched-cta .sub{display:block;font-size:var(--kc-text-xs);font-weight:600;color:var(--kc-ink-muted);margin-top:1px}
.kc-pm-sched-edit{display:block;width:100%;text-align:center;background:rgba(2,132,199,0.08);border:none;border-radius:var(--kc-radius-md);padding:10px;margin-bottom:20px;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-sm);color:var(--kc-brand-blue-strong);cursor:pointer}
.kc-pm-sched-block{border:1px solid var(--kc-border);border-radius:var(--kc-radius-lg);padding:14px 16px;margin-bottom:12px}
.kc-pm-sched-block-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-md);color:var(--kc-ink);margin-bottom:10px}
.kc-pm-sched-block-clear{font-family:var(--kc-font-sans);font-size:var(--kc-text-xs);font-weight:800;color:var(--kc-ink-soft);background:none;border:none;cursor:pointer;padding:2px 4px}
.kc-pm-field{margin-bottom:10px}
.kc-pm-field label{display:block;font-family:var(--kc-font-sans);font-size:var(--kc-text-xs);font-weight:800;text-transform:uppercase;letter-spacing:0.04em;color:var(--kc-ink-muted);margin-bottom:5px}
.kc-pm-field input{width:100%;box-sizing:border-box;border:1.5px solid var(--kc-border);border-radius:var(--kc-radius-md);padding:10px 12px;font-family:var(--kc-font-sans);font-size:var(--kc-text-md);color:var(--kc-ink);background:var(--kc-surface-soft)}
.kc-pm-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kc-pm-tradetabs{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 18px}
.kc-pm-tradetab{font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);font-weight:800;padding:0 16px;min-height:40px;border:none;border-radius:var(--kc-radius-md);background:#7C93B8;border-bottom:3px solid #4A5F82;box-shadow:0 3px 6px rgba(74,95,130,0.35),inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -2px 4px rgba(0,0,0,0.12);color:#fff;cursor:pointer;white-space:nowrap;transition:transform .08s ease,border-bottom-width .08s ease,margin-top .08s ease;-webkit-tap-highlight-color:transparent}
.kc-pm-tradetab:active{border-bottom-width:1px;margin-top:2px}
.kc-pm-tradetab.gutters{background:#FF6A00;border-bottom:3px solid #B34C00;box-shadow:0 3px 6px rgba(179,76,0,0.35),inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -2px 4px rgba(0,0,0,0.15)}
.kc-pm-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.kc-pm-tool{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--kc-border);border-radius:var(--kc-radius-lg);padding:12px 14px;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-md);color:var(--kc-ink);cursor:pointer}
.kc-pm-tool .sub{display:block;font-size:var(--kc-text-xs);font-weight:600;color:var(--kc-ink-muted);margin-top:2px}
.kc-pm-tool.ext{color:var(--kc-brand-blue-strong)}
.kc-pm-biglink{display:flex;align-items:center;justify-content:space-between;width:100%;background:#fff;border:1px solid var(--kc-border);border-radius:var(--kc-radius-lg);padding:13px 16px;margin-bottom:8px;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-md);color:var(--kc-brand-blue-strong);cursor:pointer}
.kc-pm-empty{padding:30px 12px;text-align:center;color:var(--kc-ink-soft);font-size:var(--kc-text-sm)}
.kc-pm-flipnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.kc-pm-flipbtn{font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-sm);color:var(--kc-brand-blue-strong);background:rgba(2,132,199,0.08);border:none;border-radius:var(--kc-radius-md);padding:0 16px;min-height:44px;cursor:pointer}
.kc-pm-flipbtn:disabled{color:var(--kc-ink-soft);background:var(--kc-surface-mute);cursor:default}
.kc-pm-flippos{font-family:var(--kc-font-mono);font-size:var(--kc-text-xs);color:var(--kc-ink-muted);font-weight:700}
@media(max-width:767px){
.kc-pm-stats{grid-template-columns:repeat(2,1fr)}
.kc-pm-tools{grid-template-columns:repeat(2,1fr)}
}

/* PM Jobs — full/compact cards + calendar (app-pm-jobs-cards.js,
   app-pm-jobs-calendar.js). Layout choice (desktop/iPad/phone) is decided in
   JS (_pmDeviceTier) since the three views render genuinely different
   content, not just a reflow of the same markup — this CSS just styles
   whichever one gets rendered. */
.kc-pm-card{background:#fff;border:1px solid var(--kc-border);border-radius:var(--kc-radius-lg);overflow:hidden;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.kc-pm-card-tab{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-sm);letter-spacing:0.02em}
.kc-pm-card-tab-kind{font-size:var(--kc-text-xxs);font-weight:800;text-transform:uppercase;letter-spacing:0.03em;background:rgba(0,0,0,0.12);padding:2px 7px;border-radius:var(--kc-radius-xs)}
.kc-pm-card-tab-kind.detach{background:rgba(180,83,9,0.85);color:#fff}
.kc-pm-card-body{padding:12px 14px}
.kc-pm-card-namerow{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.kc-pm-card-name{font-weight:800;font-size:var(--kc-text-lg);color:var(--kc-ink)}
.kc-pm-card-sub{font-family:var(--kc-font-mono);font-size:var(--kc-text-xs);color:var(--kc-ink-soft);margin-top:2px}
.kc-pm-card-connect{width:32px;height:32px;border-radius:50%;background:rgba(2,132,199,0.08);color:var(--kc-brand-blue-active);border:none;font-size:14px;cursor:pointer;flex-shrink:0}
.kc-pm-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.kc-pm-card-stat{background:var(--kc-surface-mute);border-radius:var(--kc-radius-sm);padding:8px 4px;text-align:center}
.kc-pm-card-stat .v{font-family:var(--kc-font-mono);font-size:var(--kc-text-md);font-weight:700;color:var(--kc-ink)}
.kc-pm-card-stat .l{font-size:var(--kc-text-xxs);font-weight:700;text-transform:uppercase;letter-spacing:0.03em;color:var(--kc-ink-muted);margin-top:2px}
.kc-pm-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--kc-border)}
.kc-pm-card-rep{font-family:var(--kc-font-sans);font-weight:700;font-size:var(--kc-text-sm);color:var(--kc-brand-blue-active);background:none;border:none;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;padding:0}
.kc-pm-card-when{font-family:var(--kc-font-mono);font-size:var(--kc-text-xs);color:var(--kc-ink-muted);font-weight:700}
.kc-pm-card-actions{display:flex;gap:8px;margin-top:10px}
/* Overview/Notes/Schedule all read the same weight now — no more one
   solid-blue "primary" button pulling focus off the other two (Austin W,
   2026-09-02, same correction already made to the PM Home topbar chips
   earlier this session). Text labels instead of icons also brings this row
   in line with this file's own stated PM design principle
   ("single-column, big-tap, NO-ICON rebuild for a PM on an iPad"). */
.kc-pm-card-act{flex:1;min-height:40px;border-radius:var(--kc-radius);border:1.5px solid var(--kc-brand-blue-active);background:rgba(2,132,199,0.06);font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-sm);color:var(--kc-brand-blue-active);cursor:pointer}

/* Consolidated deal card (_pmDealCardHTML, app-pm-jobs-cards.js) — one card
   per DEAL instead of one per trade. A badge is two lines (trade + status)
   and only ever selects which trade's stats/details this card is showing
   (pmSetActiveTrade); it never triggers scheduling. Bright + bordered =
   "this is what I'm viewing" — unscheduled stays full-strength (still needs
   a date), scheduled fades quiet (opacity) once it's handled. Scheduling has
   exactly one door: the Schedule/Edit Schedule button in .kc-pm-card-actions,
   acting on whichever trade is currently active. */
.kc-pm-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;padding:9px 11px;background:var(--kc-surface-mute);border-bottom:1px solid var(--kc-border)}
.kc-pm-badge{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:5px 11px;border-radius:var(--kc-radius-md);border:1.5px solid transparent;opacity:.68;cursor:pointer;font-family:var(--kc-font-sans)}
.kc-pm-badge.active{opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.kc-pm-badge .name{font-size:var(--kc-text-xs);font-weight:800;letter-spacing:0.02em}
.kc-pm-badge .status{font-size:var(--kc-text-xxs);font-weight:700}
.kc-pm-bucket-pill{margin-left:auto;font-size:var(--kc-text-xxs);font-weight:800;text-transform:uppercase;letter-spacing:0.04em;padding:3px 9px;border-radius:var(--kc-radius-sm);white-space:nowrap;align-self:flex-start}
.kc-pm-bucket-pill.queue{background:rgba(148,163,184,0.18);color:#475569}
.kc-pm-bucket-pill.scheduled{background:rgba(2,132,199,0.14);color:var(--kc-brand-blue-active)}
/* Stats — one combined box instead of a tile per stat (Austin W,
   2026-09-02: picked over the per-stat-tile look during the mockup pass). */
.kc-pm-card-onebox{margin-top:10px;background:var(--kc-surface-mute);border-radius:var(--kc-radius-sm);padding:9px 12px;display:flex;flex-wrap:wrap;row-gap:4px}
.kc-pm-card-onebox .item{display:flex;align-items:baseline;gap:4px;font-size:var(--kc-text-sm);padding:0 10px;border-right:1px solid var(--kc-border)}
.kc-pm-card-onebox .item:last-child{border-right:none}
.kc-pm-card-onebox .item:first-child{padding-left:0}
.kc-pm-card-onebox .v{font-family:var(--kc-font-mono);font-weight:700;color:var(--kc-ink)}
.kc-pm-card-onebox .l{color:var(--kc-ink-muted);font-weight:600}

.kc-pm-connect-pop{position:absolute;top:calc(100% + 4px);right:0;z-index:20;background:#fff;border:1px solid var(--kc-border);border-radius:var(--kc-radius-md);box-shadow:0 8px 24px rgba(0,0,0,0.16);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:180px}
.kc-pm-connect-pop button{display:flex;align-items:center;gap:8px;background:none;border:none;padding:9px 10px;border-radius:var(--kc-radius-sm);font-family:var(--kc-font-sans);font-weight:700;font-size:var(--kc-text-sm);color:var(--kc-ink);cursor:pointer;text-align:left;white-space:nowrap}
.kc-pm-connect-pop button:hover{background:var(--kc-surface-mute)}
.kc-pm-connect-pop button:disabled{color:var(--kc-ink-soft);cursor:not-allowed}

.kc-pm-section-lbl2{font-size:var(--kc-text-xs);font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:var(--kc-ink-muted);margin:0 0 10px}
.kc-pm-cal-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.kc-pm-cal-pager-nav{display:flex;align-items:center;gap:10px;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-md);color:var(--kc-ink)}
.kc-pm-cal-pager-nav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--kc-border);background:#fff;cursor:pointer;font-size:12px}
.kc-pm-cal-pager-today{font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-sm);padding:8px 14px;border-radius:var(--kc-radius);border:1.5px solid var(--kc-border);background:#fff;color:var(--kc-ink-muted);cursor:pointer;min-height:36px}

.kc-pm-calgrid{display:grid;gap:8px;margin-bottom:20px}
.kc-pm-calgrid.cols-6{grid-template-columns:repeat(6,1fr)}
.kc-pm-calgrid.cols-3{grid-template-columns:repeat(3,1fr)}
.kc-pm-calgrid.cols-2{grid-template-columns:repeat(2,1fr)}
.kc-pm-calgrid.colmajor{grid-auto-flow:column}
.kc-pm-calcell{background:#fff;border:1.5px dashed var(--kc-border);border-radius:var(--kc-radius-md);padding:8px;min-height:64px}
.kc-pm-calcell.today{border-style:solid;border-color:var(--kc-brand-blue-strong)}
.kc-pm-calcell-date{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.kc-pm-calcell-date .wd{font-family:var(--kc-font-sans);font-size:var(--kc-text-xxs);font-weight:700;color:var(--kc-ink-muted);text-transform:uppercase}
.kc-pm-calcell-date .dn{font-family:var(--kc-font-sans);font-size:var(--kc-text-sm);font-weight:800;color:var(--kc-ink)}
.kc-pm-calcell.today .kc-pm-calcell-date .dn{color:var(--kc-brand-blue-strong)}
.kc-pm-calcell-empty{font-size:var(--kc-text-xs);color:var(--kc-ink-soft);text-align:center;padding:10px 0;cursor:pointer}
.kc-pm-calcell-empty:hover{color:var(--kc-brand-blue-active)}

.kc-pm-minijob{border-radius:var(--kc-radius-sm);padding:6px 8px;margin-bottom:5px;border:1.5px solid;cursor:pointer}
.kc-pm-minijob:last-child{margin-bottom:0}
.kc-pm-minijob .name{font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-pm-minijob .po,.kc-pm-minijob .meta{font-family:var(--kc-font-mono);font-size:var(--kc-text-xxs);opacity:0.85;margin-top:1px}
.kc-pm-minijob.delivery{background:rgba(245,158,11,0.12);border-color:#F59E0B;color:#92400E}
.kc-pm-minijob.detach{background:rgba(180,83,9,0.12);border-color:#B45309;color:#7C2D12}

.kc-pm-ipad-layout{display:grid;grid-template-columns:300px 1fr;gap:20px}
.kc-pm-ipad-col{min-width:0}
/* Desktop In Queue — full-size cards were rendering edge-to-edge on wide
   monitors (a card with 4 stat tiles has no business being 1900px wide).
   auto-fill keeps cards at their natural full-card width and just wraps to
   more columns on a wider window, no hardcoded column count to fight. */
.kc-pm-cardgrid-desktop{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.kc-pm-cardgrid-desktop .kc-pm-card{margin-bottom:0}
.kc-pm-cardgrid-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kc-pm-cardgrid-2col .kc-pm-card{margin-bottom:0}
/* This grid only ever holds _pmDealCardHTML output (iPad's 2-up In Queue
   tab) — compact overrides target the badge-row/one-box classes, not the
   old per-stat-tile ones nothing here renders anymore. */
.kc-pm-cardgrid-2col .kc-pm-badges{padding:6px 8px}
.kc-pm-cardgrid-2col .kc-pm-badge{padding:4px 8px}
.kc-pm-cardgrid-2col .kc-pm-badge .name{font-size:9px}
.kc-pm-cardgrid-2col .kc-pm-badge .status{font-size:8px}
.kc-pm-cardgrid-2col .kc-pm-card-body{padding:9px 10px}
.kc-pm-cardgrid-2col .kc-pm-card-name{font-size:var(--kc-text-md)}
.kc-pm-cardgrid-2col .kc-pm-card-onebox{gap:2px 0}
.kc-pm-cardgrid-2col .kc-pm-card-onebox .item{font-size:var(--kc-text-xs);padding:0 6px}
.kc-pm-cardgrid-2col .kc-pm-card-actions button{min-height:32px;font-size:13px}

.kc-pm-view-toggle{display:inline-flex;gap:4px;background:var(--kc-surface-mute);border:1px solid var(--kc-border);border-radius:var(--kc-radius);padding:3px;margin-bottom:14px}
.kc-pm-view-toggle button{font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-sm);padding:8px 14px;border-radius:var(--kc-radius-sm);border:none;cursor:pointer;background:none;color:var(--kc-ink-muted)}
.kc-pm-view-toggle button.on{background:var(--kc-brand-blue-strong);color:#fff}

.kc-pm-builds-heading{display:flex;align-items:center;gap:6px;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-md);color:var(--kc-ink);margin:16px 0 8px}
.kc-pm-builds-heading:first-of-type{margin-top:0}
.kc-pm-builds-heading .n{font-family:var(--kc-font-mono);font-weight:700;font-size:var(--kc-text-xs);color:var(--kc-ink-muted);margin-left:auto}
.kc-pm-cal-more{display:block;width:100%;text-align:center;background:var(--kc-surface-mute);border:1.5px dashed var(--kc-border);border-radius:var(--kc-radius-md);padding:12px;margin-top:6px;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-sm);color:var(--kc-ink-muted);cursor:pointer}

@media(max-width:767px){
.kc-pm-card-stats{grid-template-columns:repeat(2,1fr)}
}

/* PM Jobs — trade-first scheduling wizard (app-pm-jobs-scheduleflow.js) */
.kc-pm-schedflow-trades{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kc-pm-schedflow-trade{min-height:56px;border:none;border-radius:var(--kc-radius-md);font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-md);letter-spacing:0.02em;cursor:pointer}
.kc-pm-schedflow-trade.dim{background:var(--kc-surface-mute);color:var(--kc-ink-soft);cursor:not-allowed}
.kc-pm-schedflow-kinds{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kc-pm-schedflow-kind{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:80px;border:1.5px solid var(--kc-border);border-radius:var(--kc-radius-lg);background:#fff;font-size:26px;cursor:pointer}
.kc-pm-schedflow-kind span{font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-md);color:var(--kc-ink)}
.kc-pm-schedflow-kind.dim{background:var(--kc-surface-mute);border-style:dashed;cursor:not-allowed;opacity:0.6}

/* PM Jobs — Practice Mode banner (app-pm-jobs-practice.js). Same dashed-
   border/"training" visual language already shipped and approved for the
   rep-earnings commission demo (js/sales/app-rep-earnings.js) — reused
   verbatim rather than inventing a new "this is fake data" convention. */
.kc-pm-practice-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:2px dashed var(--kc-brand-blue-strong);border-radius:var(--kc-radius-lg);background:rgba(14,165,233,0.06);padding:12px 16px;margin-bottom:16px}
.kc-pm-practice-banner b{font-family:var(--kc-font-sans);font-size:var(--kc-text-md);color:var(--kc-brand-blue-active)}
.kc-pm-practice-banner span{display:block;font-size:var(--kc-text-sm);color:var(--kc-ink-muted);margin-top:2px}
.kc-pm-practice-banner button{flex-shrink:0;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-sm);padding:9px 16px;min-height:38px;border:none;border-radius:var(--kc-radius);background:var(--kc-brand-blue-strong);color:#fff;cursor:pointer}

/* PM Jobs — Notes modal (production_deal_notes, visibility: internal | rep) */
.kc-pm-notes-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.45);z-index:900;display:flex;align-items:center;justify-content:center;padding:16px}
.kc-pm-notes-modal{background:#fff;border-radius:var(--kc-radius-xl);padding:20px;width:100%;max-width:520px;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,0.25)}
.kc-pm-notes-modal.wide{max-width:920px;max-height:94vh}
.kc-pm-note{background:var(--kc-surface-soft);border:1px solid var(--kc-border);border-radius:var(--kc-radius-lg);padding:12px 14px;margin-bottom:10px}
.kc-pm-note-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.kc-pm-note-who{font-weight:800;font-size:var(--kc-text-md);color:var(--kc-ink)}
.kc-pm-note-when{font-family:var(--kc-font-mono);font-size:var(--kc-text-xs);color:var(--kc-ink-soft)}
.kc-pm-audience-tag{font-family:var(--kc-font-sans);font-size:var(--kc-text-xxs);font-weight:800;letter-spacing:0.03em;padding:3px 9px;border-radius:var(--kc-radius-full)}
.kc-pm-audience-tag.internal{background:var(--kc-surface-mute);color:var(--kc-ink-muted);border:1px solid var(--kc-border)}
.kc-pm-audience-tag.rep{background:rgba(2,132,199,0.10);color:var(--kc-brand-blue-active)}
.kc-pm-note-body{font-size:var(--kc-text-md);line-height:1.55;color:var(--kc-ink)}
.kc-pm-compose{border-top:1px solid var(--kc-border);padding-top:14px;margin-top:6px}
.kc-pm-compose-toggle{display:flex;gap:8px;margin-bottom:10px}
.kc-pm-compose-toggle button{flex:1;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-sm);min-height:44px;border-radius:var(--kc-radius-md);border:1.5px solid var(--kc-border);background:var(--kc-surface-mute);color:var(--kc-ink-muted);cursor:pointer}
.kc-pm-compose-toggle button.on{border-color:var(--kc-brand-blue-strong);background:rgba(2,132,199,0.10);color:var(--kc-brand-blue-active)}
.kc-pm-compose textarea{width:100%;min-height:70px;border:1.5px solid var(--kc-border);border-radius:var(--kc-radius-md);padding:10px 12px;font-family:var(--kc-font-sans);font-size:var(--kc-text-md);color:var(--kc-ink);background:var(--kc-surface-soft);resize:vertical;margin-bottom:10px;box-sizing:border-box}
.kc-pm-compose-send{width:100%;min-height:46px;border:none;border-radius:var(--kc-radius-md);background:var(--kc-brand-blue-strong);color:#fff;font-family:var(--kc-font-sans);font-weight:800;font-size:var(--kc-text-md);cursor:pointer}
.kc-pm-compose-send:disabled{opacity:0.6;cursor:not-allowed}