/**
 * ActionStudio — Full UI stylesheet
 * Three display modes: light, dusk, dark.
 * Overrides WP admin chrome when actionstudio-app body class is present.
 */

/* ═══ WP ADMIN CHROME OVERRIDE ═══ */
body.actionstudio-app #wpadminbar,
body.actionstudio-app #adminmenumain,
body.actionstudio-app #adminmenuback,
body.actionstudio-app #adminmenuwrap,
body.actionstudio-app #wpfooter,
body.actionstudio-app .notice,
body.actionstudio-app .update-nag,
body.actionstudio-app .updated,
body.actionstudio-app .error:not(.as-error) { display: none !important; }
body.actionstudio-app #wpcontent { margin-left: 0 !important; padding-left: 0 !important; }
body.actionstudio-app #wpbody-content { padding-bottom: 0 !important; }
body.actionstudio-app .wrap { margin: 0 !important; padding: 0 !important; }
html.wp-toolbar { padding-top: 0 !important; }
body.actionstudio-app { margin-top: 0 !important; }
/* v0.1.79: WP 7.0 defensive overrides */
body.actionstudio-app .wp-header-end { display: none !important; }
body.actionstudio-app #screen-meta, body.actionstudio-app #screen-meta-links { display: none !important; }
body.actionstudio-app #wp-admin-bar-root-default { display: none !important; }
body.actionstudio-app .is-fullscreen-mode { /* WP 7.0 fullscreen editor class — no conflict */ }
body.actionstudio-app [class*="dataviews"] { display: none !important; }
body.actionstudio-app .wp-admin-bar-appearance { display: none !important; }
body.actionstudio-app #adminmenu { display: none !important; }

/* ═══ HIDE SCROLLBARS (keep scroll) ═══ */
#as-app *::-webkit-scrollbar { display: none; }
#as-app * { -ms-overflow-style: none; scrollbar-width: none; }

/* ═══ LIGHT MODE (default) ═══ */
/* v0.3.5: Mirror AS palette to :root so modal/overlay elements appended to
 * document.body (e.g. .as-g-modal-backdrop, palette popover) inherit the
 * tokens. Pre-v0.3.5 these overlays were outside #as-app's scope, so
 * var(--s) and var(--b) resolved to nothing, making modals see-through.
 * When #as-app.as-dark is active we re-emit the dark values onto :root
 * so body-scoped overlays switch palette with the app. */
:root {
    --bg:#f8f6f1;--s:#fff;--sa:#f0ece4;--b:#e7e3da;--b2:#eeeae2;
    --t1:#1a1d23;--t2:#4b5563;--t3:#8a909a;
    --ac:#D4740E;--acl:#fbeee2;--ach:#B8630B;
    --bl:#3949ab;--bll:#eaecf7;
    --gn:#2e9e5b;--gnl:#e6f4ec;
    --rd:#c0392b;--rdl:#fbe9e9;
    --am:#b8860b;--aml:#fbf3df;
    --pu:#7c5cbf;--pul:#f0ecf8;
    --head:#faf6ee;--zebra:#faf8f4;
    --card-sh:0 1px 2px rgba(20,24,31,.05),0 2px 5px rgba(20,24,31,.06);
    --card-sh-h:0 3px 8px rgba(20,24,31,.10),0 6px 18px rgba(20,24,31,.09);
    --sb:#1A1A1A;--sb2:#2A2A2A;--sb3:#555;--sbt:#A0998F;--sbh:#DDD;
    --inp-bg:#FFF;--r:0;--rs:0;
    --err:#c0392b;--ok:#2e9e5b;
    --serif:Georgia,'Times New Roman',serif;
}
:root:has(#as-app.as-dark) {
    --bg:#16181d;--s:#1f2228;--sa:#262a31;--b:#2c3038;--b2:#31353d;
    --t1:#e8eaed;--t2:#a7adb7;--t3:#727884;
    --ac:#E8943A;--acl:#3a2a14;--ach:#F0A84E;
    --bl:#8f9ee6;--bll:#20242e;
    --gn:#5cbd82;--gnl:#173026;
    --rd:#e0655a;--rdl:#33191a;
    --am:#d8b24a;--aml:#312812;
    --pu:#b39ae0;--pul:#241f30;
    --head:#232830;--zebra:#20242b;
    --card-sh:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.24);
    --card-sh-h:0 4px 12px rgba(0,0,0,.42),0 8px 22px rgba(0,0,0,.36);
    --sb:#0D0C0B;--sb2:#181716;--sb3:#444;--sbt:#706A63;--sbh:#BBB;
    --inp-bg:#222120;
    --err:#e0655a;--ok:#5cbd82;
}
#as-app {
    --bg:#f8f6f1;--s:#fff;--sa:#f0ece4;--b:#e7e3da;--b2:#eeeae2;
    --t1:#1a1d23;--t2:#4b5563;--t3:#8a909a;
    --ac:#D4740E;--acl:#fbeee2;--ach:#B8630B;
    --bl:#3949ab;--bll:#eaecf7;
    --gn:#2e9e5b;--gnl:#e6f4ec;
    --rd:#c0392b;--rdl:#fbe9e9;
    --am:#b8860b;--aml:#fbf3df;
    --pu:#7c5cbf;--pul:#f0ecf8;
    --head:#faf6ee;--zebra:#faf8f4;
    --card-sh:0 1px 2px rgba(20,24,31,.05),0 2px 5px rgba(20,24,31,.06);
    --card-sh-h:0 3px 8px rgba(20,24,31,.10),0 6px 18px rgba(20,24,31,.09);
    --sb:#1A1A1A;--sb2:#2A2A2A;--sb3:#555;--sbt:#A0998F;--sbh:#DDD;
    --inp-bg:#FFF;--r:0;--rs:0;
    --serif:Georgia,'Times New Roman',serif;
}
/* Dusk removed in v0.1.48 — light/dark only */
#as-app.as-dark {
    --bg:#16181d;--s:#1f2228;--sa:#262a31;--b:#2c3038;--b2:#31353d;
    --t1:#e8eaed;--t2:#a7adb7;--t3:#727884;
    --ac:#E8943A;--acl:#3a2a14;--ach:#F0A84E;
    --bl:#8f9ee6;--bll:#20242e;
    --gn:#5cbd82;--gnl:#173026;
    --rd:#e0655a;--rdl:#33191a;
    --am:#d8b24a;--aml:#312812;
    --pu:#b39ae0;--pul:#241f30;
    --head:#232830;--zebra:#20242b;
    --card-sh:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.24);
    --card-sh-h:0 4px 12px rgba(0,0,0,.42),0 8px 22px rgba(0,0,0,.36);
    --sb:#0D0C0B;--sb2:#181716;--sb3:#444;--sbt:#706A63;--sbh:#BBB;
    --inp-bg:#222120;
}

/* ═══ RESET ═══ */
#as-app, #as-app * { margin:0; padding:0; box-sizing:border-box; }
#as-app {
    font-family:'Source Sans 3','Source Sans Pro',system-ui,-apple-system,sans-serif;
    background:var(--bg); color:var(--t1); display:flex; min-height:100vh;
    font-size:13px; transition:background .3s,color .3s; position:relative;
    overflow-x:hidden; max-width:100vw;
}

/* ═══ SIDEBAR ═══ */
#as-app .side { width:210px; background:var(--sb); position:fixed; top:0; left:0; bottom:0; display:flex; flex-direction:column; z-index:100; transition:background .3s, width .2s ease; }
#as-app .brand { padding:20px 16px; border-bottom:1px solid var(--sb2); }
#as-app .brand h1 { font-family:'Fraunces',Georgia,serif; font-size:17px; color:#FFF; font-weight:700; }
#as-app .brand small { font-size:9px; color:var(--sb3); text-transform:uppercase; letter-spacing:1.5px; display:block; margin-top:2px; }
#as-app .snav { flex:1; padding:10px 8px; overflow-y:auto; }
#as-app .slbl { display:flex; align-items:center; gap:8px; font-size:9px; text-transform:uppercase; letter-spacing:1.5px; padding:12px 10px 4px; margin-top:4px; font-weight:700; border-top:1px solid var(--sb2); }
/* Phase 6: group dot, ported from the prototype's GROUPS[].dc — squared (no
   border-radius), matching the prototype's "squared, NO radius" design note. */
#as-app .slbl i { width:7px; height:7px; flex:0 0 auto; display:block; background:var(--slc,var(--sb3)); }
/* v0.10.54: label text now takes the same per-group accent (--slc, set inline
   per .slbl alongside the dot) instead of a flat gray, plus the border-top
   above as a section divider — both per Glenn's live feedback session. */
#as-app .slbl span { color:var(--slc,var(--sb3)); }
#as-app .si { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--rs); color:var(--sbt); cursor:pointer; font-size:13px; font-weight:500; transition:all .12s; }
/* Phase 6: colored hover, ported from the prototype's per-row --onc custom
   property (GROUPS[].c / SURF[].c: --ac/--bl/--gn by section) — a deliberate
   extension beyond the prototype's own flat .si:hover{background:var(--side2)}
   (which doesn't vary by section), per Glenn's explicit "the hover state as
   well" requirement this session. Falls back to --ac for any .si with no
   --onc set (matches the prototype's own Dashboard/Engage default). */
#as-app .si:hover { background:color-mix(in srgb, var(--onc, var(--ac)) 18%, transparent); color:var(--sbh); }
#as-app .si.on { background:var(--onc, var(--ac)); color:#FFF; }
#as-app .si .ct { margin-left:auto; background:var(--sb2); color:var(--sbt); font-size:10px; padding:1px 6px; border-radius:8px; font-weight:600; }
#as-app .si.on .ct { background:rgba(255,255,255,.25); color:#FFF; }
#as-app .sfoot { padding:14px 16px; border-top:1px solid var(--sb2); display:flex; align-items:center; gap:8px; }
#as-app .av { width:28px; height:28px; border-radius:50%; background:var(--ac); display:flex; align-items:center; justify-content:center; color:#FFF; font-weight:700; font-size:11px; }
#as-app .sfoot .nm { color:var(--sbh); font-size:12px; font-weight:600; }
#as-app .sfoot .rl { color:var(--sb3); font-size:10px; }

/* ═══ BACK TO ADMIN + ESCAPE LINKS ═══ */
#as-app .as-back-admin { display:flex; align-items:center; gap:6px; margin:0 8px; padding:6px 10px; color:var(--sb3); opacity:.5; transition:opacity .15s, color .15s; text-decoration:none; font-size:11px; border-radius:var(--rs); }
#as-app .as-back-admin:hover { opacity:1; color:var(--sbh); background:var(--sb2); }
#as-app .as-escape-links { border-top:1px solid var(--sb2); padding:6px 8px; display:flex; flex-direction:column; gap:2px; }
#as-app .as-escape-link { display:flex; align-items:center; gap:4px; padding:5px 10px; font-size:10px; font-weight:600; color:var(--sb3); text-decoration:none; text-transform:uppercase; letter-spacing:.6px; opacity:.45; transition:opacity .15s, color .15s; border-radius:var(--rs); }
#as-app .as-escape-link:hover { opacity:.85; color:var(--sbh); background:var(--sb2); }

/* ═══ SIDEBAR COLLAPSE ═══ */
/* INTAKE-095: ActionStudio product icon doubles as the collapse control
   (replaces the standalone chevron). The mark is always visible; clicking it
   toggles the sidebar. Expanded = icon + text; collapsed = icon only. */
#as-app .brand { position:relative; display:flex; align-items:center; gap:10px; }
#as-app .as-brand-mark { flex:0 0 auto; background:none; border:none; padding:0; cursor:pointer; color:var(--sbh); display:flex; align-items:center; justify-content:center; width:28px; height:28px; transition:opacity .15s, transform .15s; }
#as-app .as-brand-mark svg { width:28px; height:28px; }
#as-app .as-brand-mark:hover { opacity:.8; }
#as-app .as-brand-text { min-width:0; }
#as-app.as-collapsed .side { width:48px; }
#as-app.as-collapsed .as-main { margin-left:48px; max-width:calc(100vw - 48px); }
#as-app.as-collapsed .brand h1,
#as-app.as-collapsed .brand small,
#as-app.as-collapsed .as-brand-text,
#as-app.as-collapsed .as-side-label,
#as-app.as-collapsed .slbl,
#as-app.as-collapsed .si .ct { display:none; }
#as-app.as-collapsed .brand { padding:14px 8px; justify-content:center; }
#as-app.as-collapsed .snav { padding:6px 4px; }
#as-app.as-collapsed .si { justify-content:center; padding:8px; font-size:0; overflow:hidden; }
#as-app.as-collapsed .si .as-icon { margin:0; font-size:13px; }
#as-app.as-collapsed .sfoot { padding:10px 4px; justify-content:center; }
#as-app.as-collapsed .sfoot .as-side-label { display:none; }
#as-app.as-collapsed .as-escape-links { padding:4px; gap:2px; }
#as-app.as-collapsed .as-escape-link { width:26px; height:26px; }
#as-app.as-collapsed .as-brand-mark { margin:0 auto; }

/* Phase 6 (Sidebar cosmetics): removed the v0.10.9 "collapsed-default rail,
   hover-peek, pin" block that used to live here (#as-app.as-collapsed
   .side:hover { width:210px; ... } + its child display:revert rules). Root
   cause of Glenn's "the collapse is broken, it doesn't collapse" report
   (2026-08-15): the collapse toggle button lives INSIDE .side, so clicking it
   to collapse leaves the mouse hovering over .side — the hover rule
   immediately re-expanded it back to 210px while .as-main's margin stayed at
   the collapsed 48px (by design, "nothing reflows"), producing a visibly
   full-width sidebar over a shifted, gapped content pane. That's the old
   "pin" concept's hover-peek mechanic, already supposed to have been retired
   in v0.10.14 (which removed the pin GLYPH/rotate animation but left this
   CSS behind) — removing it here finishes that and matches the current
   mandate: plain click-to-open/close, no pin, no hover magic. */

#as-app .si .lb { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* v0.10.14: plain open/close toggle — no "pinned" visual language (Glenn
   removed the pin concept entirely; the icon is now the same glyph as the
   Dashboard nav row, not a pin, so a rotate-on-pin effect no longer applies). */
#as-app .as-brand-mark svg { transition:color .15s; }
#as-app:not(.as-collapsed) .as-brand-mark { color:var(--ac); }

/* ═══ TOOLBAR DOCTRINE v0.10.9 — uniform 30px controls ═══
   Scoped utility: add class="as-toolbar" onto a view's existing toolbar row
   (its own flex/justify-content/margin inline style is left alone) to pull
   every .btn / select / search-ish input inside it down to the prototype's
   30px control height, without hand-editing each control. Doesn't touch
   .tab/.lens height — those already read fine at their current size and
   aren't part of this pass's confirmed gaps. */
#as-app .as-toolbar .btn,
#as-app .as-toolbar select,
#as-app .as-toolbar input[type="search"],
#as-app .as-toolbar input[type="text"],
#as-app .as-toolbar input[type="month"] { height:30px; min-height:0; box-sizing:border-box; }

/* v0.10.12: page-specific control classes that aren't .btn/select/input —
 * each needs its own override the same way .as-comm-filters did (see the
 * v0.10.11 fix note above the Commissions rule). Scoped to .as-toolbar so
 * these classes stay their original size anywhere else they're reused. */
#as-app .as-toolbar .as-toolbar-btn,
#as-app .as-toolbar .as-drive-vbtn { width:30px; height:30px; min-height:0; box-sizing:border-box; }
#as-app .as-toolbar .as-compose-btn { height:30px; min-height:0; box-sizing:border-box; }

/* ═══ DARK MODE TOGGLE ═══ */
#as-app .as-mode-toggle { background:none; border:1px solid var(--b); border-radius:var(--rs); padding:6px; cursor:pointer; color:var(--t3); display:flex; align-items:center; justify-content:center; transition:color .15s, border-color .15s; width:34px; height:34px; box-sizing:border-box; }
#as-app .as-mode-toggle:hover { color:var(--t1); border-color:var(--t3); }

/* ═══ MAIN ═══ */
#as-app .as-main { margin-left:210px; flex:1; min-height:100vh; min-width:0; max-width:calc(100vw - 210px); overflow-x:hidden; transition:background .3s, margin-left .2s ease, max-width .2s ease; }
#as-app .top { padding:11px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--b); background:var(--s); position:sticky; top:0; z-index:50; transition:background .3s,border-color .3s; }
#as-app .top h2 { font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:700; color:var(--t1); }
#as-app .top p { font-size:11.5px; color:var(--t3); margin-top:1px; }
#as-app .btns { display:flex; gap:6px; align-items:center; }
#as-app .cnt { padding:20px 28px; }

/* ═══ BUTTONS ═══ */
#as-app .btn { padding:7px 14px; border-radius:var(--rs); font-size:12px; font-weight:600; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .12s; font-family:inherit; color:var(--t1); height:34px; box-sizing:border-box; }
#as-app .btn-p { background:var(--ac); color:#FFF; }
#as-app .btn-p:hover { background:var(--ach); }
#as-app .btn-g { background:transparent; color:var(--t2); border:1px solid var(--b); }
#as-app .btn-g:hover { background:var(--sa); }
#as-app .btn:disabled { opacity:.4; cursor:not-allowed; }
#as-app .btn.sm { height:28px; padding:0 10px; font-size:11px; }
/* v0.10.39: icon-only primary "create" button — every module's +New/+Add
 * button collapses to just this glyph, leftmost in its toolbar. Text stays
 * in the DOM (font-size:0, not display:none) so screen readers still get
 * the label; sighted users get it via title= instead. */
#as-app .btn-plus { width:34px; padding:0; justify-content:center; font-size:0; flex:0 0 auto; gap:0; }
#as-app .btn-plus::before { content:'+'; font-size:20px; font-weight:400; line-height:1; }

/* ═══ SUB-HEADER TOOLBAR — v0.10.14: shared component ported 1:1 from the
 * as-integrated prototype's shared.css. This is the canonical sub-header shell
 * every surface should use going forward (Dashboard and Display are the two
 * documented exceptions — see HANDOFF-NEXT-SESSION-sidebar-redo.md). Additive
 * only: nothing existing references these classes yet, so this cannot regress
 * any page already shipped. Surfaces adopt it one at a time as their own phase
 * lands, replacing the old hand-inlined `.as-toolbar style="display:flex;..."`
 * pattern. ═══ */
/* v0.10.15: .toolbar lives inside .cnt, which already carries its own 20px/28px
 * padding (unlike the prototype's zero-padding page shell) — cancel that out
 * with a negative margin so the toolbar still bleeds edge-to-edge under the
 * header, matching the prototype exactly, without touching .cnt's padding
 * globally (used by every view, most not yet on this component). */
#as-app .toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 22px; background:var(--s); border-bottom:1px solid var(--b); margin:-20px -28px 20px; }
#as-app .toolbar + .toolbar { margin-top:-20px; }
#as-app .toolbar .grow { flex:1; }
#as-app .toolbar .spacer { flex:1; }

/* segmented lens/tab group — the prototype's People/Companies, Opportunities-lens style */
#as-app .lenses { display:flex; border:1px solid var(--b); background:var(--bg); }
#as-app .lens { height:30px; padding:0 15px; font-size:12px; font-weight:600; color:var(--t3); display:flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer; font-family:inherit; }
#as-app .lens+.lens { border-left:1px solid var(--b); }
#as-app .lens .dot { width:6px; height:6px; border-radius:50%; background:var(--ac); }
#as-app .lens:hover { color:var(--t1); }
#as-app .lens.on { background:var(--t1); color:#fff; }
#as-app.as-dark .lens.on { background:var(--ac); color:#16181d; }
#as-app .lens.on .dot { background:#fff; }
#as-app .lens .n { font-size:10px; font-weight:700; opacity:.6; }

/* icon-button Cards/List segmented toggle */
#as-app .viewseg { display:inline-flex; border:1px solid var(--b); background:var(--s); }
#as-app .viewseg button { width:32px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--t3); border:none; background:none; cursor:pointer; }
#as-app .viewseg button+button { border-left:1px solid var(--b); }
#as-app .viewseg button.on { background:var(--ac); color:#fff; }
#as-app .viewseg svg { width:15px; height:15px; }

#as-app .osearch { display:flex; align-items:center; gap:7px; height:30px; padding:0 10px; border:1px solid var(--b); background:var(--bg); color:var(--t3); min-width:170px; }
#as-app .osearch input { border:none; background:none; outline:none; color:var(--t1); font-size:12px; width:100%; font-family:inherit; }
#as-app .osearch svg { width:14px; height:14px; flex:0 0 auto; }
#as-app .iconbtn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid var(--b); background:var(--s); color:var(--t2); cursor:pointer; }
#as-app .iconbtn:hover { background:var(--sa); color:var(--t1); }
#as-app .iconbtn svg { width:16px; height:16px; }
#as-app .seg { display:inline-flex; border:1px solid var(--b); background:var(--s); height:34px; box-sizing:border-box; }
/* v0.10.54: height:34px + flex-centering added to match .btn's fixed 34px
   header-bar height — previously unset here, so .seg rendered shorter than
   an adjacent .btn/.btn-plus in the same toolbar row (Glenn, live feedback). */
/* v0.10.58: gap between the icon and label — matches .si's icon/label gap.
   Previously relied on the single literal space character between </svg> and
   the label text in the markup, which read as too tight (Glenn, live
   feedback on the Email/Calendar toggle). */
#as-app .seg button { height:100%; box-sizing:border-box; display:inline-flex; align-items:center; gap:8px; padding:0 12px; font-size:12px; font-weight:600; color:var(--t2); border-right:1px solid var(--b); border-left:none; border-top:none; border-bottom:none; background:none; cursor:pointer; font-family:inherit; }
#as-app .seg button:last-child { border-right:none; }
#as-app .seg button.on { background:var(--ac); color:#fff; }
#as-app .search { flex:1; min-width:120px; max-width:280px; height:30px; padding:0 11px; font-size:12px; border:1px solid var(--b); background:var(--s); color:var(--t1); font-family:inherit; }

/* v0.10.17: labeled-select toolbar control (prototype's Health filter on
 * Projects) — ported 1:1 from shared.css alongside the rest of the sub-header
 * component set. */
#as-app .selctl { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--t2); }
#as-app .selctl label { color:var(--t3); font-size:11px; }
#as-app .sel { height:30px; border:1px solid var(--b); background:var(--bg); color:var(--t1); font-size:12px; padding:0 8px; font-family:inherit; }
/* toolbar-doctrine-v2 (2026-08-16): funnel/campaign picker moved into the
 * shared Opportunities toolbar (was inside its own .as-funnels-pickbar row,
 * which had generic ".as-toolbar select{height:30px}" sizing) — its
 * generated <select> (as-funnels.js's renderFunnelPicker()) keeps its own
 * class name, so give it the same toolbar-appropriate sizing as .sel
 * directly rather than editing the string-returning function. */
#as-app .toolbar .as-funnels-pick-sel { height:30px; border:1px solid var(--b); background:var(--bg); color:var(--t1); font-size:12px; padding:0 8px; font-family:inherit; max-width:260px; }

/* v0.10.16: expanding search — icon button by default; opens into an inline
 * input on click, collapses again on blur if left empty. Sits at the far
 * right of a toolbar (after .grow), per Glenn's explicit direction — a
 * deliberate departure from the prototype's own always-open .osearch. */
#as-app .osearch-toggle { display:flex; align-items:center; }
#as-app .osearch-expand-input { width:0; height:30px; padding:0; margin:0; border:1px solid transparent; background:var(--bg); color:var(--t1); font-size:12px; font-family:inherit; opacity:0; overflow:hidden; transition:width .16s ease, opacity .12s, padding .16s, margin .16s, border-color .12s; }
#as-app .osearch-toggle.open .osearch-expand-input { width:200px; opacity:1; padding:0 10px; margin-right:6px; border-color:var(--b); }

#as-app .pill { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; padding:2px 8px; background:var(--sa); border:1px solid var(--b); color:var(--t2); }
#as-app .pill .dot { width:7px; height:7px; border-radius:50%; }
#as-app .flag { font-size:9.5px; font-weight:700; padding:1px 6px; text-transform:uppercase; display:inline-block; }
#as-app .flag.warn { background:var(--rdl); color:var(--rd); }
#as-app .flag.ok { background:var(--gnl); color:var(--gn); }
#as-app .flag.mut { background:var(--sa); color:var(--t3); }
#as-app .flag.info { background:var(--bll); color:var(--bl); }
#as-app .flag.amber { background:var(--aml); color:var(--am); }
#as-app .chipf { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; font-size:11.5px; font-weight:600; color:var(--t2); background:var(--s); border:1px solid var(--b); cursor:pointer; }
#as-app .chipf.on { background:var(--acl); border-color:var(--ac); color:var(--ach); }
#as-app .chipf .ct { background:var(--sa); color:var(--t3); font-size:10px; font-weight:700; padding:0 5px; }
#as-app .chipf.on .ct { background:var(--ac); color:#fff; }

/* ═══ KPI TILES ═══ */
#as-app .kpirow { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px; }
#as-app .kpi { background:var(--s); border:1px solid var(--b); border-top:2px solid var(--ac); box-shadow:var(--card-sh); padding:13px 15px; }
#as-app .kpi .n { font-family:'Fraunces',Georgia,serif; font-size:26px; font-weight:700; line-height:1; }
#as-app .kpi .l { font-size:10.5px; color:var(--t3); margin-top:5px; text-transform:uppercase; letter-spacing:.4px; }
#as-app .kpi .d { font-size:11px; font-weight:700; margin-top:4px; }
#as-app .kpi .up { color:var(--gn); }
#as-app .kpi .dn { color:var(--rd); }

/* ═══ PERSON/COMPANY CARD GRID — v0.10.15: ported 1:1 from the as-integrated
 * prototype's surfaces/people.html for pixel-perfect People re-polish. Used
 * by contactCard/companyCard (as-v-crm.js / as-companies.js). */
#as-app .pcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:13px; }
#as-app .pcard { background:var(--s); border:1px solid var(--b); box-shadow:var(--card-sh); padding:14px 15px; cursor:pointer; transition:box-shadow .14s; }
#as-app .pcard:hover { box-shadow:var(--card-sh-h); }
#as-app .pcard .ph { display:flex; align-items:center; gap:11px; }
#as-app .pcard .ph .av { width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; }
#as-app .pcard h4 { font-size:14px; font-weight:700; line-height:1.2; }
#as-app .pcard .rl { font-size:11.5px; color:var(--t3); margin-top:1px; }
#as-app .pcard .pm { display:flex; align-items:center; justify-content:space-between; margin-top:13px; }
#as-app .pcard .pm b { font-weight:700; font-size:13px; }
#as-app .pcard .last { font-size:11px; color:var(--t3); margin-top:9px; border-top:1px solid var(--b2); padding-top:8px; }

/* ═══ CARDS ═══ */

/* ⚠ DO NOT DELETE — WORDPRESS CORE OVERRIDE. Verified live 2026-07-20.
 * `.card` is a WP CORE admin class, shipped in wp-admin/load-styles.php:
 *   .card{position:relative;margin-top:20px;padding:.7em 2em 1em;min-width:255px;
 *         max-width:520px;border:1px solid #c3c4c7;box-shadow:0 1px 1px rgba(0,0,0,.04);
 *         background:#fff;box-sizing:border-box}
 * ActionStudio reuses the same class name inside the wp-admin shell, so core's
 * rule applies to EVERY AS card. It will NEVER show up in a repo grep and a
 * fixture without wp-admin styles will render fine — that false negative is
 * exactly why this reset was wrongly removed once already (v0.9.55). The
 * 520px cap is the root cause of "cards in 2 columns don't fill the space".
 * Reset only what core imposes and AS does not intend; AS's own look is set
 * in the rule directly below. `#as-app` beats core's `.card` on specificity,
 * so no !important is needed. */
#as-app .card {
    max-width:none;      /* core 520px — WAS leaking; capped every card. The actual bug. */
    min-width:0;         /* core 255px — WAS leaking; would blow out narrow cells/480px. */
    box-shadow:none;     /* core 0 1px 1px — WAS leaking; SimpleSuite cards are flat. */
    /* margin-top (core 20px) and padding (core .7em 2em 1em) were measured as
     * already neutral: the `#as-app, #as-app *` reset at ~:91 outranks core on
     * specificity, and AS pads via .ch/.cb and spaces via margin-bottom:16px.
     * Restated here belt-and-braces so the intent survives if :91 ever changes. */
    margin-top:0;
    padding:0;
    /* deliberately NOT reset: position:relative (harmless, absolute children
     * may rely on it) and box-sizing:border-box (AS wants it anyway). */
}
#as-app .card { background:var(--s); border:1px solid var(--b); border-radius:var(--r); overflow:hidden; margin-bottom:16px; transition:background .3s,border-color .3s; }
#as-app .ch { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--b); background:var(--s); color:var(--t1); }
#as-app .ch h3 { font-size:13px; font-weight:700; }
#as-app .ch .lnk { font-size:11px; color:var(--ac); font-weight:600; cursor:pointer; }
/* v0.9.67: small "Activity history" button in the Today's Focus header — squared, tokenized. */
#as-app .as-history-btn { font-size:11px; font-weight:600; color:var(--ac); background:var(--s); border:1px solid var(--b); padding:3px 9px; cursor:pointer; line-height:1.4; font-family:inherit; }
#as-app .as-history-btn:hover { background:var(--sa); }
#as-app .cb { padding:14px 16px; }

/* ═══ TABS ═══ */
#as-app .tabs { display:flex; gap:2px; background:var(--sa); border-radius:var(--rs); padding:2px; }
#as-app .tab { padding:4px 10px; font-size:11px; font-weight:600; border-radius:0; cursor:pointer; color:var(--t3); transition:all .12s; }
#as-app .tab:hover { color:var(--t1); }
#as-app .tab.on { background:var(--s); color:var(--t1); box-shadow:0 1px 3px rgba(0,0,0,.06); }

/* ═══ GRID ═══ */
#as-app .g2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
#as-app .g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

/* v0.9.55: one vertical rhythm for grid rows and full-width cards.
 * `.card` carries margin-bottom:16px, but inside a grid the `gap` already
 * supplies the row spacing — the two stacked, so a multi-row grid sat on 32px
 * while a run of full-width cards sat on 16px. Zero the card margin inside
 * grids and let the grid's own margin-bottom close the row instead. */
#as-app .g2 > .card, #as-app .g2 > div > .card,
#as-app .g3 > .card, #as-app .g3 > div > .card,
#as-app .g4 > .card, #as-app .g4 > div > .card { margin-bottom:0; }

/* v0.9.55: role-gate collapse. as-role-gates.js hides admin-gated nodes with
 * inline display:none — the node stays in the DOM, so the surviving sibling
 * kept its single grid column and left dead space beside it, breaking
 * alignment with the full-width cards above and below. (`:only-child` cannot
 * help: a display:none sibling is still a child.) The JS counts VISIBLE
 * children after the hiding pass and stamps .g-collapsed-N so the survivors
 * fill the row flush with the full-width cards. */
#as-app .g2.g-collapsed-1,
#as-app .g3.g-collapsed-1 { grid-template-columns:1fr; }
/* 2-of-3 only makes sense while .g3 is still multi-column — below 768px the
 * responsive rule takes .g3 to a single column and must keep winning. */
@media(min-width:769px) {
    #as-app .g3.g-collapsed-2 { grid-template-columns:1fr 1fr; }
}

/* ═══ METRICS ═══ */
#as-app .mc { background:var(--s); border:1px solid var(--b); border-radius:var(--r); padding:16px; transition:background .3s,border-color .3s; }
#as-app .mc .ml { font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:.6px; font-weight:600; margin-bottom:6px; }
#as-app .mc .mv { font-family:'Fraunces',Georgia,serif; font-size:28px; font-weight:700; line-height:1; color:var(--t1); }
#as-app .mc .md { font-size:11px; margin-top:4px; font-weight:600; }
#as-app .up { color:var(--gn); } #as-app .dn { color:var(--rd); } #as-app .nt { color:var(--t3); }

/* ═══ CONTACTS ═══ */
#as-app .crow { display:flex; align-items:center; padding:8px 0; border-bottom:1px solid var(--sa); gap:10px; }
#as-app .crow:last-child { border-bottom:none; }
#as-app .cav { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:10px; color:#FFF; flex-shrink:0; }
#as-app .cinfo { flex:1; min-width:0; }
#as-app .cname { font-weight:600; font-size:12px; }
#as-app .csub { font-size:11px; color:var(--t3); }
#as-app .cbadge { font-size:9px; padding:2px 7px; border-radius:10px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; flex-shrink:0; }

/* ═══ TASKS ═══ */
#as-app .trow { display:flex; align-items:center; padding:7px 0; border-bottom:1px solid var(--sa); gap:8px; }
#as-app .trow:last-child { border-bottom:none; }
#as-app .tcheck { width:16px; height:16px; border:2px solid var(--b); border-radius:0; cursor:pointer; flex-shrink:0; transition:all .12s; display:flex; align-items:center; justify-content:center; }
#as-app .tcheck:hover { border-color:var(--ac); }
#as-app .tcheck.done { background:var(--gn); border-color:var(--gn); }
#as-app .tcheck.done::after { content:'✓'; color:#FFF; font-size:9px; font-weight:700; }
#as-app .tdot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
#as-app .pri-hi { background:var(--rd); } #as-app .pri-md { background:var(--ac); } #as-app .pri-lo { background:var(--gn); }
#as-app .tinfo { flex:1; }
#as-app .ttitle { font-size:12px; font-weight:500; }
#as-app .ttitle.struck { text-decoration:line-through; color:var(--t3); }
#as-app .tmeta { font-size:10px; color:var(--t3); margin-top:1px; }
#as-app .towner { font-size:10px; background:var(--sa); padding:1px 6px; border-radius:8px; font-weight:600; flex-shrink:0; color:var(--t2); }
#as-app .tdue { font-size:10px; color:var(--t3); flex-shrink:0; }
#as-app .tdue.over { color:var(--rd); font-weight:600; }

/* ═══ PIPELINE ═══ */
#as-app .pipe { display:flex; gap:2px; margin-bottom:14px; }
#as-app .pstage { flex:1; text-align:center; padding:8px 6px; border-radius:var(--rs); cursor:pointer; transition:all .12s; }
#as-app .pstage:hover { opacity:.85; }
#as-app .pstage .pc { font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:700; display:block; }
#as-app .pstage .pl { font-size:9px; text-transform:uppercase; letter-spacing:.6px; font-weight:600; margin-top:1px; display:block; }
#as-app .ps1 { background:var(--bll); color:var(--bl); }
#as-app .ps2 { background:var(--acl); color:var(--ac); }
#as-app .ps3 { background:var(--pul); color:var(--pu); }
#as-app .ps4 { background:var(--gnl); color:var(--gn); }
#as-app .ps5 { background:var(--rdl); color:var(--rd); }

/* ═══ QUICK BAR ═══ */
#as-app .qbar { display:flex; gap:16px; padding:10px 16px; background:var(--sa); border-radius:var(--rs); margin-bottom:16px; align-items:center; flex-wrap:wrap; transition:background .3s; }
#as-app .qstat { display:flex; align-items:center; gap:5px; }
#as-app .qdot { width:7px; height:7px; border-radius:50%; }
#as-app .qlbl { font-size:11px; color:var(--t3); }
#as-app .qval { font-size:11px; font-weight:700; }
/* v0.10.39: inline variant — sits inside a .toolbar next to tabs instead of
 * as its own full-width row (Priorities' Open/Done-this-week). Additive
 * modifier, not a rewrite of .qbar — Nurture's pipeline summary (as-v-crm.js)
 * still uses the base block form. */
#as-app .qbar.qbar-inline { display:inline-flex; gap:10px; padding:0; background:transparent; margin-bottom:0; }
#as-app .qbar-inline .qlbl, #as-app .qbar-inline .qval { font-size:10px; }
#as-app .qbar-inline .qdot { width:6px; height:6px; }

/* ═══ PROGRESS ═══ */
#as-app .pbar { width:100%; height:5px; background:var(--sa); border-radius:3px; overflow:hidden; margin-top:5px; }
#as-app .pfill { height:100%; border-radius:3px; transition:width .4s; }

/* ═══ GOOGLE ACTIONS ═══ */
#as-app .gact { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:4px; font-size:10px; font-weight:600; cursor:pointer; border:1px solid var(--b); background:var(--s); transition:all .12s; color:var(--t2); font-family:inherit; }
#as-app .gact:hover { background:var(--sa); }
#as-app .gact:disabled { opacity:.4; cursor:not-allowed; }
#as-app .gact.email { border-color:#DB4437; color:#DB4437; }
#as-app .gact.cal { border-color:#4285F4; color:#4285F4; }
#as-app .gact.meet { border-color:#00897B; color:#00897B; }
#as-app .gact.drive { border-color:#F4B400; color:#F4B400; }

/* ═══ SEARCH ═══ */

/* ═══ DROPZONE ═══ */
#as-app .dropzone { border:2px dashed var(--b); border-radius:var(--r); padding:28px; text-align:center; cursor:pointer; transition:all .2s; }
#as-app .dropzone:hover { border-color:var(--ac); background:var(--acl); }
#as-app .dropzone p { font-size:13px; color:var(--t2); margin-top:4px; }
#as-app .dropzone .big { font-size:15px; font-weight:600; color:var(--t1); }

/* ═══ MISC ═══ */
#as-app .field-tag { font-size:10px; padding:3px 8px; background:var(--sa); border-radius:4px; font-weight:600; color:var(--t2); }
#as-app .as-empty {
    /* v0.7.2: centering survives inside flex parents that don't span full width.
     * Was just text-align:center which fails when the parent itself shrinks to content. */
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:24px 16px; width:100%; grid-column:1 / -1;
}
#as-app .as-empty-icon { font-size:28px; margin-bottom:8px; color:var(--t3); }
#as-app .as-empty-title { font-size:14px; font-weight:600; color:var(--t1); margin-bottom:4px; }
#as-app .as-empty-desc { font-size:12px; color:var(--t3); line-height:1.5; }
/* v0.1.100: centered-large variant for page-level empty states (Opportunities, etc.)
   — vertically centers content, gives generous breathing room so it doesn't look dumpy. */
#as-app .as-empty.as-empty-page {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:420px; padding:60px 32px; gap:6px;
    /* v0.4.7: when this empty state lives inside a flex container (e.g. the
     * Opportunities kanban which is display:flex), it would shrink to its
     * content width and pin to the left. flex:1 + width:100% makes it span. */
    flex:1; width:100%;
}
#as-app .as-empty.as-empty-page .as-empty-icon { font-size:48px; margin-bottom:16px; opacity:.5; }
#as-app .as-empty.as-empty-page .as-empty-title { font-size:18px; margin-bottom:8px; }
#as-app .as-empty.as-empty-page .as-empty-desc { font-size:13px; max-width:460px; margin-bottom:20px; }
#as-app .as-placeholder { padding:40px; text-align:center; color:var(--t3); }
#as-app .as-phase-tag { font-size:11px; color:var(--ac); font-weight:600; }
#as-app .wrow { display:flex; align-items:center; padding:7px 0; border-bottom:1px solid var(--sa); gap:10px; }
#as-app .wrow:last-child { border-bottom:none; }
#as-app .wk { font-size:10px; font-weight:700; color:var(--ac); width:50px; flex-shrink:0; }
#as-app .winfo { flex:1; }
#as-app .wtitle { font-size:12px; font-weight:500; }
#as-app .wgoal { font-size:10px; color:var(--t3); margin-top:1px; }

/* ═══ MODALS ═══ */
#as-app .as-modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; align-items:center; justify-content:center; }
#as-app .as-modal-bg.show { display:flex; }
#as-app .as-modal { background:var(--s); border-radius:var(--r); width:480px; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2); }
/* v0.6.0: Task modal needs more breathing room — Title + Desc + Project/Category + Pri/Status + Assign/Due + Milestone + Documents stack and force internal scroll at 480/80vh. Bump to 620 wide / 88vh so most edits fit without scrolling. */
#as-app #as-m-task .as-modal { width:620px; max-height:88vh; }
#as-app .as-modal .ch { border-radius:var(--r) var(--r) 0 0; }
#as-app .as-modal .cb { padding:20px; }
#as-app .as-modal label { display:block; font-size:11px; font-weight:600; color:var(--t2); margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px; }
#as-app .as-modal input, #as-app .as-modal select, #as-app .as-modal textarea { width:100%; padding:8px 10px; border:1px solid var(--b); border-radius:var(--rs); font-family:inherit; font-size:13px; margin-bottom:12px; background:var(--inp-bg); color:var(--t1); }
#as-app .as-modal textarea { height:60px; resize:vertical; }
#as-app .as-modal input:focus, #as-app .as-modal select:focus, #as-app .as-modal textarea:focus { outline:none; border-color:var(--ac); }
#as-app .as-modal .row { display:flex; gap:12px; }
#as-app .as-modal .row > * { flex:1; }
#as-app .as-modal .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }

/* ═══ COMMISSIONS FILTER STRIP (v0.9.66; height→30px in v0.10.10) ═══
 * The Commissions view's Status / Agent / Period filters had no class and no
 * inline style, and there is no global `#as-app select` rule, so they rendered
 * as raw native OS controls that clashed with the .btn controls beside them.
 * Scope a rule to the filter container ONLY (`.as-comm-filters`) — never a
 * blanket select restyle — so the row reads as one coherent control strip:
 * same border/background/text tokens as `.as-modal select`. Squared
 * (var(--rs) = 0 in every theme). v0.10.10: height dropped from the original
 * 34px (matching `.btn`) to 30px — this toolbar is now `.as-toolbar`-scoped
 * (30px doctrine), and this rule's equal-but-later specificity was winning
 * over `.as-toolbar select{height:30px}`, so it needs to state 30px itself
 * rather than relying on the toolbar rule to override it. */
#as-app .as-comm-filters select,
#as-app .as-comm-filters input[type=month] {
    height:30px; min-height:0; box-sizing:border-box; padding:4px 10px;
    border:1px solid var(--b); border-radius:var(--rs);
    background:var(--inp-bg); color:var(--t1);
    font-family:inherit; font-size:12px;
}
#as-app .as-comm-filters select:focus,
#as-app .as-comm-filters input[type=month]:focus { outline:none; border-color:var(--ac); }

/* ═══ v0.1.1 — TASK ACTIONS ═══ */
#as-app .trow:hover { background: var(--sa); border-radius: var(--rs); }
#as-app .trow [onclick] { cursor: pointer; }
#as-app .as-pri-hi { background: var(--rd); }
#as-app .as-pri-md { background: var(--ac); }
#as-app .as-pri-lo { background: var(--gn); }

/* ═══ v0.1.3 — CONTACT DETAIL PANEL ═══ */
#as-app .as-detail-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 480px;
    background: var(--s); border-left: 1px solid var(--b);
    z-index: 9998; overflow-y: auto; box-shadow: -4px 0 20px rgba(0,0,0,.1);
    transition: transform .2s;
}
#as-app .as-detail-header {
    padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--b); position: sticky; top: 0; background: var(--s); z-index: 1;
}
#as-app .as-detail-section { padding: 16px; border-bottom: 1px solid var(--sa); }
#as-app .as-detail-name { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; margin-bottom: 4px; }
#as-app .as-detail-field { margin-bottom: 8px; }
#as-app .as-detail-label { font-size: 9px; text-transform: uppercase; letter-spacing: .6px; color: var(--t3); font-weight: 600; margin-bottom: 2px; }
#as-app .as-detail-value { font-size: 13px; }
#as-app .as-activity-item { padding: 6px 0; border-bottom: 1px solid var(--sa); font-size: 12px; }
#as-app .as-activity-item:last-child { border-bottom: none; }
#as-app .as-activity-time { font-size: 10px; color: var(--t3); }

/* ═══ v0.1.3 — IMPORT MAPPING ═══ */
#as-app .as-map-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--sa); }
#as-app .as-map-row:last-child { border-bottom: none; }
#as-app .as-map-label { font-size: 11px; font-weight: 600; min-width: 100px; color: var(--t1); }
#as-app .as-map-arrow { color: var(--t3); font-size: 12px; }
#as-app .as-map-select { flex: 1; }
#as-app .as-map-select select { width: 100%; padding: 5px 8px; border: 1px solid var(--b); border-radius: var(--rs); font-size: 12px; background: var(--inp-bg); color: var(--t1); }
#as-app .as-import-sample { max-height: 200px; overflow: auto; margin: 12px 0; }
#as-app .as-import-sample table { width: 100%; font-size: 11px; border-collapse: collapse; }
#as-app .as-import-sample th { background: var(--sa); padding: 4px 8px; text-align: left; font-weight: 600; position: sticky; top: 0; }
#as-app .as-import-sample td { padding: 4px 8px; border-bottom: 1px solid var(--sa); }
#as-app .as-import-result { padding: 16px; text-align: center; }
#as-app .as-import-result .big { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 700; color: var(--gn); }

/* ═══ v0.1.4 — PIPELINE KANBAN ═══ */
#as-app .as-pipe-col { min-height: 250px; }
#as-app .as-pipe-card {
    background: var(--s); border: 1px solid var(--b); border-radius: var(--rs);
    padding: 10px 12px; cursor: pointer; transition: box-shadow .15s, border-color .15s;
    margin-bottom: 6px;
}
#as-app .as-pipe-card:hover { border-color: var(--ac); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
#as-app .as-pipe-card .name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
#as-app .as-pipe-card .sub { font-size: 10px; color: var(--t3); }
#as-app .as-pipe-card .deals { font-size: 10px; color: var(--ac); font-weight: 600; margin-top: 4px; }
#as-app .as-pipe-move { display: flex; gap: 3px; margin-top: 6px; }
#as-app .as-pipe-move button {
    font-size: 9px; padding: 2px 6px; border-radius: 4px;
    border: 1px solid var(--b); background: var(--s); cursor: pointer;
    color: var(--t2); font-weight: 600; transition: all .12s;
}
#as-app .as-pipe-move button:hover { background: var(--ac); color: #FFF; border-color: var(--ac); }
#as-app .as-deal-card { padding: 10px 12px; }
#as-app .as-deal-card .value { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 700; color: var(--gn); }
#as-app .as-deal-card .contact { font-size: 10px; color: var(--bl); font-weight: 600; }

/* ═══ v0.1.6 — EVENTS ═══ */
#as-app .as-event-card {
    display: flex; align-items: center; gap: 14px; padding: 12px;
    border-bottom: 1px solid var(--b); cursor: pointer; transition: background .12s;
}
#as-app .as-event-card:hover { background: var(--sa); }
#as-app .as-event-card:last-child { border-bottom: none; }
#as-app .as-event-date {
    width: 48px; height: 52px; text-align: center; border-radius: 6px;
    background: var(--sa); border-top: 3px solid var(--ac); flex-shrink: 0;
    display: flex; flex-direction: column; justify-content: center;
}
#as-app .as-event-month { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--t3); }
#as-app .as-event-day { font-size: 20px; font-weight: 800; color: var(--t1); line-height: 1; }
#as-app .as-event-info { flex: 1; min-width: 0; }
#as-app .as-event-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
#as-app .as-event-meta { font-size: 11px; color: var(--t3); }
#as-app .as-meet-link {
    display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600;
    color: var(--bl); text-decoration: none; padding: 2px 8px;
    background: var(--bll); border-radius: 4px;
}
#as-app .as-meet-link:hover { background: var(--bl); color: #FFF; }

/* ═══ v0.1.6 — ACTIVITY ═══ */
#as-app .as-activity-item { padding: 8px 0; border-bottom: 1px solid var(--b); font-size: 12px; }
#as-app .as-activity-item:last-child { border-bottom: none; }
#as-app .as-activity-time { font-size: 10px; color: var(--t3); white-space: nowrap; }

/* ═══ DRIVE VIEW ═══ */
#as-app .as-drive-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
#as-app .as-drive-toolbar input { flex:1; max-width:360px; padding:8px 12px; border:1px solid var(--b); background:var(--inp-bg); color:var(--t1); font-family:inherit; font-size:13px; }
#as-app .as-drive-toolbar input:focus { outline:none; border-color:var(--ac); box-shadow:0 0 0 2px color-mix(in srgb, var(--ac) 12%, transparent); }
#as-app .as-drive-create-tray { display:flex; align-items:center; gap:8px; margin-bottom:16px; padding:10px 18px; background:var(--sa); border:1px solid var(--b); }
#as-app .as-drive-create-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--t3); margin-right:4px; }
#as-app .as-drive-create-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; font-size:11px; font-weight:600; color:var(--t2); text-decoration:none; border:1px solid var(--b); background:var(--s); transition:all .12s; }
#as-app .as-drive-create-btn:hover { border-color:var(--ac); color:var(--ac); background:var(--bg); }
#as-app .as-drive-tabs { display:flex; gap:2px; margin-bottom:16px; }
#as-app .as-drive-tab { padding:6px 16px; font-size:12px; font-weight:600; color:var(--t3); cursor:pointer; border:none; background:transparent; border-bottom:2px solid transparent; transition:all .12s; font-family:inherit; }
#as-app .as-drive-tab:hover { color:var(--t1); }
#as-app .as-drive-tab.as-dt-on { color:var(--ac); border-bottom-color:var(--ac); }
#as-app .as-drive-view-toggle { display:flex; gap:2px; margin-left:auto; }
#as-app .as-drive-vbtn { width:30px; height:30px; border:1px solid var(--b); background:var(--s); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--t3); transition:all .12s; padding:0; }
#as-app .as-drive-vbtn:hover { color:var(--t1); border-color:var(--ac); }
#as-app .as-drive-vbtn.as-dv-on { color:var(--ac); border-color:var(--ac); background:var(--sa); }
#as-app .as-drive-body { min-height:200px; }
#as-app .as-drive-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 20px; color:var(--t3); text-align:center; }
#as-app .as-drive-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px; padding:2px; }
#as-app .as-drive-item { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--s); border:2px solid var(--b); cursor:pointer; transition:all .12s; }
#as-app .as-drive-item:hover { border-color:var(--ac); box-shadow:0 2px 8px rgba(0,0,0,.06); }
#as-app .as-drive-item-icon { flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--sa); color:var(--t3); }
#as-app .as-drive-item:hover .as-drive-item-icon { color:var(--ac); }
#as-app .as-drive-item-info { flex:1; min-width:0; }
#as-app .as-drive-item-name { font-size:13px; font-weight:500; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#as-app .as-drive-item-meta { font-size:11px; color:var(--t3); margin-top:2px; }
/* List view */
#as-app .as-drive-list { display:flex; flex-direction:column; padding:2px; }
#as-app .as-drive-list-header { display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:2px solid var(--b); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--t3); }
#as-app .as-drive-list-header span { cursor:pointer; display:flex; align-items:center; gap:3px; }
#as-app .as-drive-list-header span:hover { color:var(--t1); }
#as-app .as-dl-name { flex:1; min-width:0; }
#as-app .as-dl-type { width:100px; flex:0 0 100px; }
#as-app .as-dl-date { width:100px; flex:0 0 100px; text-align:right; }
#as-app .as-dl-icon { width:36px; flex:0 0 36px; display:flex; align-items:center; justify-content:center; }
#as-app .as-drive-list-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--b); cursor:pointer; transition:all .12s; background:var(--s); }
#as-app .as-drive-list-row:hover { background:var(--sa); }
#as-app .as-drive-list-row .as-dl-name { font-size:13px; font-weight:500; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#as-app .as-drive-list-row .as-dl-type { font-size:11px; color:var(--t3); }
#as-app .as-drive-list-row .as-dl-date { font-size:11px; color:var(--t3); }

/* ═══ RESPONSIVE ═══ */
@media(max-width:1100px) {
    #as-app .g2 { grid-template-columns:1fr; }
    #as-app .g4 { grid-template-columns:repeat(2,1fr); }
}

/* ═══ v0.1.5 — SVG ICONS ═══ */
#as-app .as-icon { display:inline-block; vertical-align:middle; flex-shrink:0; }
#as-app .si .as-icon { opacity:.7; }
#as-app .si.on .as-icon { opacity:1; }
#as-app .as-icon-btn { padding:3px 6px !important; font-size:10px !important; display:inline-flex; align-items:center; justify-content:center; }
#as-app .as-icon-danger { color:var(--rd); }
#as-app .as-icon-danger:hover { background:var(--rdl); }

/* ═══ v0.1.7 — IMPORT TARGET TABS ═══ */
#as-app #as-import-target-tabs { margin-bottom:0; }

/* ═══ v0.1.7 — EMAIL TEMPLATE SEND MODAL ═══ */
#as-app #as-m-sendemail .as-modal { width:520px; }
#as-app #as-m-sendemail label { display:block; font-size:11px; font-weight:600; color:var(--t2); margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px; }
#as-app #as-m-emailtpl code { font-size:10px; background:var(--sa); padding:1px 4px; border-radius:3px; }

/* ═══ v0.1.8 — TOAST NOTIFICATIONS ═══ */
#as-toast-container { position:fixed; top:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
#as-app .as-toast { padding:10px 16px; border-radius:var(--rs); font-size:12px; font-weight:600; color:#FFF; pointer-events:auto; transition:opacity .3s; min-width:200px; max-width:360px; box-shadow:0 4px 12px rgba(0,0,0,.15); }
#as-app .as-toast-success { background:var(--gn); }
#as-app .as-toast-error { background:var(--rd); }
#as-app .as-toast-info { background:var(--bl); }

/* ═══ v0.1.8 — DEADLINE COLORS ═══ */
#as-app .due-overdue { color:var(--rd) !important; font-weight:700 !important; }
#as-app .due-today { color:var(--ac) !important; font-weight:700 !important; }
#as-app .due-urgent { color:#D4740E !important; font-weight:700 !important; }
#as-app .due-week { color:#E8943A !important; font-weight:600 !important; }
#as-app .due-future { color:var(--gn) !important; }

/* v0.1.98.1: urgency left-borders removed. Visual cue now lives on a due-proximity dot next to the title
   (see .as-due-dot). Overdue still applies a background tint, which persists here for kanban contrast. */
#as-app .as-kb-card.as-overdue { background:var(--rdl); }

/* ═══ v0.1.8 — NOTIFICATION BELL (fixed v0.1.14) ═══ */
#as-app .as-notif-wrap { position:relative; display:inline-flex; align-items:center; }
#as-app .as-notif-bell { position:relative; width:34px; height:34px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
#as-app .as-notif-bell svg { width:16px; height:16px; display:block; flex-shrink:0; }
#as-app .as-notif-badge { position:absolute; top:-2px; right:-2px; background:var(--rd); color:#FFF; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; padding:0 3px; line-height:1; }
#as-app .as-notif-panel { position:absolute; top:calc(100% + 8px); right:0; width:340px; max-height:420px; overflow-y:auto; background:var(--s); border:1px solid var(--b); border-radius:var(--r); box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:300; }
#as-app .as-notif-header { padding:10px 14px; font-weight:700; font-size:12px; border-bottom:1px solid var(--b); }
#as-app .as-notif-group { padding:4px 0; border-bottom:1px solid var(--sa); }
#as-app .as-notif-group:last-child { border-bottom:none; }
#as-app .as-notif-group-title { padding:6px 14px 2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
#as-app .as-notif-item { display:flex; align-items:center; gap:6px; padding:6px 14px; font-size:12px; cursor:pointer; transition:background .1s; }
#as-app .as-notif-item:hover { background:var(--sa); }
#as-app .as-notif-due { margin-left:auto; font-size:10px; flex-shrink:0; }

/* ═══ v0.9.59 — BELL: "Happened" (event log) + "Needs attention" ═══
 * Two sections in one panel. The event rows are taller than the due-date rows
 * on purpose: each carries a headline, an optional sub-line and an actor/time
 * meta line, where a due-date row is a single title. Squared throughout —
 * --r/--rs are 0 and the only literal radius below is on .as-notif-dot, which
 * is a 6px circular indicator, not a box. The event_count chip is a BOX and is
 * therefore squared like everything else. */
#as-app .as-notif-section { border-bottom:1px solid var(--b); }
#as-app .as-notif-section:last-child { border-bottom:none; }
#as-app .as-notif-section-title { display:flex; align-items:center; gap:8px; padding:8px 14px 4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--t3); }
/* Plain count, deliberately NOT badge-styled — standing state does not badge. */
#as-app .as-notif-section-count { font-weight:600; color:var(--t3); text-transform:none; letter-spacing:0; }
#as-app .as-notif-readall { margin-left:auto; background:none; border:none; padding:0; font-size:10px; font-weight:600; color:var(--ac); cursor:pointer; text-transform:none; letter-spacing:0; }
#as-app .as-notif-readall:hover { text-decoration:underline; }
#as-app .as-notif-quiet { padding:10px 14px 12px; font-size:11px; color:var(--t3); }

#as-app .as-notif-event { display:flex; align-items:flex-start; gap:6px; padding:8px 14px; border-top:1px solid var(--sa); }
#as-app .as-notif-event:hover { background:var(--sa); }
#as-app .as-notif-event.is-unread { border-left:2px solid var(--ac); padding-left:12px; }
#as-app .as-notif-event-main { flex:1; min-width:0; }
#as-app .as-notif-event.is-clickable .as-notif-event-main { cursor:pointer; }
#as-app .as-notif-event-title { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--t1); }
#as-app .as-notif-event.is-unread .as-notif-event-title { font-weight:700; }
#as-app .as-notif-event-sub { margin-top:2px; font-size:11px; color:var(--t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#as-app .as-notif-event-meta { margin-top:3px; font-size:10px; color:var(--t3); }
#as-app .as-notif-dot { width:6px; height:6px; border-radius:50%; background:var(--ac); flex-shrink:0; }
/* event_count > 1. A collapsed row is N events; the pill makes N visible even
 * when the headline is scanned rather than read. */
#as-app .as-notif-count { margin-left:auto; flex-shrink:0; min-width:16px; padding:0 5px; border-radius:var(--rs); background:var(--sa); border:1px solid var(--b); font-size:9px; font-weight:700; line-height:14px; text-align:center; color:var(--t2); }
#as-app .as-notif-dismiss { flex-shrink:0; background:none; border:none; padding:0 2px; font-size:14px; line-height:1; color:var(--t3); cursor:pointer; }
#as-app .as-notif-dismiss:hover { color:var(--t1); }

/* ═══ v0.1.8 — PROJECT DOT ═══ */
#as-app .as-proj-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
#as-app .as-project-card { cursor:pointer; transition:border-color .12s; }
#as-app .as-project-card:hover { border-color:var(--ac); }
#as-app .as-company-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
#as-app .as-company-card-g { cursor:pointer; transition:border-color .12s; }
#as-app .as-company-card-g:hover { border-color:var(--ac); }

/* ═══ v0.1.8 — COLOR PICKER ═══ */
#as-app .as-color-dot { width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all .12s; }
#as-app .as-color-dot:hover { transform:scale(1.15); }
#as-app .as-color-dot.on { border-color:var(--t1); box-shadow:0 0 0 2px var(--s); }

/* ═══ v0.1.9 — USER MANAGEMENT ═══ */
#as-app .as-user-role-sel { font-family:inherit; cursor:pointer; }
#as-app .as-user-role-sel:focus { outline:none; border-color:var(--ac); }

/* ═══ v0.1.9 — TASK KANBAN BOARD ═══ */
#as-app .as-kanban { display:flex !important; flex-wrap:nowrap !important; gap:12px; overflow-x:auto; padding-bottom:8px; }
#as-app .as-kb-col { flex:1 1 0%; min-width:180px; max-width:none; background:var(--sa); border-radius:var(--r); overflow:hidden; }
#as-app .as-kb-header { padding:10px 12px; font-size:12px; font-weight:700; display:flex; justify-content:space-between; align-items:center; border-bottom:3px solid var(--ac); }
#as-app .as-kb-count { font-size:10px; background:var(--s); padding:1px 6px; border-radius:8px; font-weight:600; color:var(--t3); }
#as-app .as-kb-body { padding:8px; min-height:120px; }
#as-app .as-kb-card { background:var(--s); border:1px solid var(--b); border-radius:var(--rs); padding:10px 12px; margin-bottom:6px; cursor:pointer; transition:border-color .12s,box-shadow .12s; }
#as-app .as-kb-card:hover { border-color:var(--ac); box-shadow:0 2px 8px rgba(0,0,0,.08); }
#as-app .as-kb-title { font-size:12px; font-weight:600; margin-bottom:4px; }
#as-app .as-kb-meta { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--t3); flex-wrap:wrap; }
#as-app .as-kb-pri { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
#as-app .as-kb-owner { font-size:10px; }
#as-app .as-kb-due { font-size:10px; }
#as-app .as-kb-actions { display:flex; gap:3px; margin-top:6px; }
#as-app .as-kb-actions button { font-size:9px; padding:2px 6px; border-radius:0; border:1px solid var(--b); background:var(--s); cursor:pointer; color:var(--t2); font-weight:600; transition:all .12s; font-family:inherit; }
#as-app .as-kb-actions button:hover { background:var(--ac); color:#FFF; border-color:var(--ac); }

/* ═══ v0.1.9 — WEEK PLAN VIEW ═══ */
#as-app .as-wp-week { margin-bottom:16px; background:var(--s); border:1px solid var(--b); border-radius:var(--r); overflow:hidden; }
#as-app .as-wp-header { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--b); background:var(--sa); }
#as-app .as-wp-label { font-size:12px; font-weight:700; color:var(--ac); min-width:50px; }
#as-app .as-wp-bar { flex:1; height:5px; background:var(--b); border-radius:3px; overflow:hidden; }
#as-app .as-wp-fill { height:100%; background:var(--gn); border-radius:3px; transition:width .4s; }
#as-app .as-wp-pct { font-size:11px; font-weight:700; min-width:32px; text-align:right; }
#as-app .as-wp-body { padding:6px 16px; }
#as-app .as-wp-unassigned { margin-top:16px; }
#as-app .as-wp-unassigned-label { font-size:11px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }

/* ═══ v0.1.10 — DRAG AND DROP ═══ */
#as-app .as-dragging { opacity:0.5; transform:rotate(1deg); }
#as-app .as-drag-over { background:var(--acl) !important; outline:2px dashed var(--ac); outline-offset:-2px; border-radius:var(--r); }
#as-app .as-kb-card[draggable="true"],
#as-app .as-pipe-card[draggable="true"],
#as-app .as-deal-card[draggable="true"] { cursor:grab; }
#as-app .as-kb-card[draggable="true"]:active,
#as-app .as-pipe-card[draggable="true"]:active,
#as-app .as-deal-card[draggable="true"]:active { cursor:grabbing; }

/* ═══ v0.1.10 — PRELOADER ═══ */
#as-app .as-preloader { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; }
#as-app .as-spinner { width:24px; height:24px; border:2px solid var(--sa); border-top-color:var(--t2); border-radius:50%; animation:as-spin 1.1s linear infinite; } /* v0.8.50: slower + muted (Band A #4) */
@keyframes as-spin { to { transform:rotate(360deg); } }

/* ═══ v0.1.13 — STAGE DRAG REORDER ═══ */
#as-app .as-stage-grip { cursor:grab; font-size:14px; color:var(--t3); flex-shrink:0; user-select:none; padding:0 4px; line-height:1; }
#as-app .as-stage-grip:active { cursor:grabbing; }
#as-app .as-stage-row { transition:background .12s; }
#as-app .as-stage-row.as-dragging { opacity:.4; }
#as-app .as-stage-row.as-drag-insert { position:relative; }
#as-app .as-stage-row.as-drag-insert::before { content:''; position:absolute; left:0; right:0; height:2px; background:var(--ac); z-index:1; }
#as-app .as-stage-row.as-drag-insert[style*="--insert: top"]::before,
#as-app .as-stage-row.as-drag-insert[style*="--insert:top"]::before { top:0; }
#as-app .as-stage-row.as-drag-insert[style*="--insert: bottom"]::before,
#as-app .as-stage-row.as-drag-insert[style*="--insert:bottom"]::before { top:auto; bottom:0; }

/* ═══ v0.1.13 — CONTACT CARD VIEW ═══ */
#as-app .as-contact-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; padding:4px 0; }
#as-app .as-ccard {
    background:var(--s); border:1px solid var(--b); border-radius:var(--r); padding:14px;
    cursor:pointer; transition:border-color .12s,box-shadow .12s;
}
#as-app .as-ccard:hover { border-color:var(--ac); box-shadow:0 2px 8px rgba(0,0,0,.08); }
#as-app .as-ccard-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
#as-app .as-ccard-actions { display:flex; gap:3px; opacity:0; transition:opacity .12s; }
#as-app .as-ccard:hover .as-ccard-actions { opacity:1; }
#as-app .as-ccard-name { font-size:13px; font-weight:600; margin-bottom:2px; }
#as-app .as-ccard-co { font-size:11px; color:var(--t3); margin-bottom:6px; }
#as-app .as-ccard-badges { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
#as-app .as-ccard-email { font-size:10px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ═══ v0.1.14 — DASHBOARD SCHEDULE ═══ */
#as-app .as-dash-event { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--sa); cursor:pointer; transition:background .1s; }
#as-app .as-dash-event:last-child { border-bottom:none; }
#as-app .as-dash-event:hover { background:var(--sa); border-radius:var(--rs); }
#as-app .as-dash-event-time { font-size:11px; font-weight:700; color:var(--ac); min-width:60px; flex-shrink:0; }
#as-app .as-dash-event-info { flex:1; min-width:0; }

/* ═══ v0.1.14 — TASK COLUMNS ═══ */
/* v0.1.98: removed full 1px border on .as-task-cols > .trow — side borders cluttered the grid.
   Rows now separated by bottom border only; stale state shows via background tint + left accent. */
#as-app .as-task-cols { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; align-items:start; }
#as-app .as-task-cols > .trow { background:var(--s); border:none; border-bottom:1px solid var(--sa); padding:8px 12px; margin:0; flex-wrap:wrap; overflow:hidden; }
#as-app .as-task-cols > .trow .tinfo { min-width:0; overflow:hidden; }
#as-app .as-task-cols > .trow .ttitle { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
#as-app .as-task-cols > .trow .towner { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(min-width:1400px) { #as-app .as-task-cols { grid-template-columns:1fr 1fr 1fr; } }
@media(max-width:900px) { #as-app .as-task-cols { grid-template-columns:1fr; } }

/* ═══ v0.1.98.1 — DUE-PROXIMITY DOT + OVERDUE ROW ═══ */
/* Replaces the old "STALE" text pill and red left-border system.
   Single small pill-sized dot next to the title signals due proximity; overdue tasks also get a red row bg. */
#as-app .as-due-dot {
    display:inline-block; width:8px; height:8px; border-radius:50%;
    margin-right:6px; vertical-align:middle; flex-shrink:0;
}
#as-app .as-due-dot-y { background:#E8B33A; }  /* yellow — more than 3 days out */
#as-app .as-due-dot-o { background:#D4740E; }  /* orange — 2–3 days out */
#as-app .as-due-dot-r { background:var(--rd); } /* red — 1 day or less, or overdue */

/* Overdue row/card: red background tint (only when past due date and not done) */
#as-app .trow.as-overdue,
#as-app .as-task-cols > .trow.as-overdue { background:var(--rdl); }
#as-app .as-kb-card.as-overdue { background:var(--rdl); }

/* Legacy .as-stale — kept as no-op alias so any external callers don't error; visuals handled by dot/overdue. */
#as-app .as-stale { }
#as-app .as-kb-card.as-stale { }

/* ═══ v0.1.14 — SETTINGS TABS ═══ */
#as-app .as-stab { }

/* ═══ v0.1.14 — ZOOM LINK ═══ */
#as-app .as-zoom-link {
    display:inline-block; margin-top:4px; margin-left:4px; font-size:11px; font-weight:600;
    color:#2D8CFF; text-decoration:none; padding:2px 8px;
    background:#EBF3FF; border-radius:4px;
}
#as-app .as-zoom-link:hover { background:#2D8CFF; color:#FFF; }

/* ═══ v0.1.13 — MOBILE RESPONSIVE ═══ */
#as-app .as-hamburger { display:none; }

/* ═══ DASHBOARD v0.1.15 — Metric Cards ═══ */
#as-app .as-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
#as-app .as-mc { background:var(--s); border:1px solid var(--b); border-radius:var(--r); padding:16px; }
#as-app .as-mc-label { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:.6px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
#as-app .as-mc-dot { width:7px; height:7px; border-radius:50%; }
#as-app .as-mc-value { font-family:Georgia,serif; font-size:28px; font-weight:700; line-height:1; }
#as-app .as-mc-event-title { font-size:14px; font-weight:600; line-height:1.3; }
#as-app .as-mc-detail { font-size:11px; color:var(--t3); margin-top:4px; font-weight:500; }
#as-app .as-mc-pbar { width:100%; height:5px; background:var(--sa); border-radius:3px; margin-top:6px; overflow:hidden; }
#as-app .as-mc-pfill { height:100%; border-radius:3px; transition:width .4s ease; }
/* v0.9.30: clickable metric cards (hover shows a → arrow, no View button) */
#as-app .as-mc-click { cursor:pointer; position:relative; transition:border-color .12s, box-shadow .12s, transform .12s; }
#as-app .as-mc-click:hover { border-color:#d9dce2; box-shadow:0 2px 8px rgba(0,0,0,.06); transform:translateY(-1px); }
#as-app .as-mc-go { position:absolute; top:13px; right:14px; color:var(--t3); font-size:14px; opacity:0; transition:opacity .12s; }
#as-app .as-mc-click:hover .as-mc-go { opacity:1; }
/* v0.9.30: Today's Focus card — accent + section groups + appointments line */
#as-app .as-focus-card { border-top:2px solid var(--ac); }
#as-app .as-focus-grp { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--t3); margin:12px 0 2px; }
#as-app .cb > .as-focus-grp:first-child { margin-top:0; }
#as-app .as-focus-tag { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; padding:1px 6px; margin-left:2px; }
#as-app .as-focus-appts { display:flex; align-items:center; gap:8px; padding:11px 0 3px; margin-top:8px; border-top:1px solid var(--sa); font-size:12px; color:var(--t2); cursor:pointer; }
#as-app .as-focus-appts:hover { color:var(--ac); }
#as-app .as-focus-appts .as-focus-appts-arr { margin-left:auto; color:var(--t3); font-size:14px; }
#as-app .as-focus-appts:hover .as-focus-appts-arr { color:var(--ac); }
#as-app .as-focus-appts-empty { cursor:default; color:var(--t3); }
#as-app .as-focus-appts-empty:hover { color:var(--t3); }

/* ═══ DASHBOARD v0.1.15 — Schedule ═══ */
#as-app .as-sched-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--sa); }
#as-app .as-sched-row:last-child { border-bottom:none; }
#as-app .as-sched-time { font-size:11px; font-weight:700; color:var(--ac); min-width:64px; flex-shrink:0; }
#as-app .as-sched-info { flex:1; min-width:0; }
#as-app .as-sched-title { font-size:12px; font-weight:600; }
#as-app .as-sched-meta { font-size:10px; color:var(--t3); }
#as-app .as-sched-divider { border:none; border-top:1px dashed var(--b); margin:8px 0; }
#as-app .as-sched-divider-label { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
#as-app .as-meet-btn { font-size:9px; font-weight:600; color:var(--bl); background:var(--bll); padding:3px 8px; border-radius:4px; text-decoration:none; flex-shrink:0; }
#as-app .as-meet-btn:hover { background:var(--bl); color:#FFF; }
#as-app .as-zoom-btn { font-size:9px; font-weight:600; color:#2D8CFF; background:#EBF3FF; padding:3px 8px; border-radius:4px; text-decoration:none; flex-shrink:0; }
#as-app .as-zoom-btn:hover { background:#2D8CFF; color:#FFF; }
#as-app .as-dash-more { font-size:11px; color:var(--t3); padding:8px 0; }

/* ═══ DASHBOARD v0.1.15 — Team Snapshot ═══ */
#as-app .as-snap-section-label { font-size:10px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
#as-app .as-team-row { display:flex; align-items:center; gap:10px; padding:6px 0; }
#as-app .as-team-av { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#FFF; flex-shrink:0; }
#as-app .as-team-name { font-size:12px; font-weight:500; width:80px; }
#as-app .as-team-count { font-size:10px; color:var(--t3); width:50px; text-align:right; }
#as-app .as-team-bar { flex:1; height:8px; background:var(--sa); border-radius:4px; overflow:hidden; }
#as-app .as-team-fill { height:100%; border-radius:4px; transition:width .4s ease; }

/* ═══ DASHBOARD v0.1.15 — Pipeline Shape ═══ */
#as-app .as-pipe-shape { display:flex; gap:4px; margin-top:4px; }
#as-app .as-pipe-stage { flex:1; text-align:center; padding:8px 4px; border-radius:var(--rs); }
#as-app .as-pipe-num { font-family:Georgia,serif; font-size:16px; font-weight:700; display:block; }
#as-app .as-pipe-lbl { font-size:7px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; display:block; margin-top:1px; }

/* ═══ DASHBOARD v0.1.15 — Quick Actions ═══ */
#as-app .as-quick-actions { display:flex; gap:8px; justify-content:center; margin-top:16px; padding:12px 0; }

/* ═══ DASHBOARD v0.1.15 — Pipeline Alerts ═══ */
#as-app .as-alert-row { display:flex; align-items:center; gap:8px; padding:5px 0; cursor:pointer; border-bottom:1px solid var(--sa); transition:background .1s; }
#as-app .as-alert-row:last-child { border-bottom:none; }
#as-app .as-alert-row:hover { background:var(--sa); border-radius:var(--rs); }
#as-app .as-alert-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
#as-app .as-alert-info { flex:1; min-width:0; }
#as-app .as-alert-name { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#as-app .as-alert-meta { font-size:10px; color:var(--t3); }

/* ═══ DASHBOARD v0.1.15 — Weekly Progress ═══ */
#as-app .as-streak { font-size:12px; font-weight:700; color:var(--ac); margin-bottom:8px; }
#as-app .as-streak-fire { font-size:14px; }
#as-app .as-wp-mini { display:flex; align-items:center; gap:6px; padding:3px 0; }
#as-app .as-wp-mini-label { font-size:10px; font-weight:600; color:var(--t2); width:36px; flex-shrink:0; }
#as-app .as-wp-mini-bar { flex:1; height:6px; background:var(--sa); border-radius:3px; overflow:hidden; }
#as-app .as-wp-mini-fill { height:100%; border-radius:3px; transition:width .4s ease; }
#as-app .as-wp-mini-pct { font-size:10px; font-weight:700; width:28px; text-align:right; flex-shrink:0; }
#as-app .as-wp-mini-count { font-size:9px; color:var(--t3); width:30px; flex-shrink:0; }

/* ═══ THREE-COLUMN GRID ═══ */
#as-app .g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:16px; align-items:stretch; }
#as-app .g3 > div { display:flex; flex-direction:column; }
#as-app .g3 > .card { display:flex; flex-direction:column; }
#as-app .g3 > div > .card { flex:1; display:flex; flex-direction:column; }
#as-app .g3 > .card > .cb, #as-app .g3 > div > .card > .cb { flex:1; overflow-y:auto; max-height:500px; }

/* ═══ CALENDAR — Month View (toolbar-doctrine-v2 pixel-match pass,
   2026-08-16, against _prototypes/as-communications/index.html's .mgrid/
   .mdow/.mcell/.mev — see that file's <style> block for the source values).
   Event-chip border-radius dropped to 0 everywhere below, not just to match
   the mock — the app's own tokens are --r:0;--rs:0 (square, no radius) and
   these rules were hardcoding a radius in violation of that doctrine. ═══ */
#as-app .as-cal-header { display:grid; grid-template-columns:repeat(7,1fr); background:var(--sa); border-radius:var(--rs) var(--rs) 0 0; }
#as-app .as-cal-hcell { padding:8px 4px; text-align:center; font-size:9px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--b); border-right:1px solid var(--b2); }
#as-app .as-cal-hcell:last-child { border-right:none; }
#as-app .as-cal-body { display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--b); border-top:none; border-radius:0 0 var(--rs) var(--rs); overflow:hidden; }
#as-app .as-cal-cell { min-height:90px; padding:5px 6px; border-right:1px solid var(--b2); border-bottom:1px solid var(--b); background:var(--s); transition:background .1s; }
#as-app .as-cal-cell:nth-child(7n) { border-right:none; }
#as-app .as-cal-cell:hover { background:var(--sa); }
#as-app .as-cal-other { opacity:.4; }
#as-app .as-cal-day { font-size:11px; font-weight:700; color:var(--t2); margin-bottom:2px; }
/* Today: a small circular accent badge on just the day-number (mock's
   treatment) — not a full-cell tint wash, which read as too heavy. */
#as-app .as-cal-today .as-cal-day { background:var(--ac); color:#fff; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; }
#as-app .as-cal-evt { font-size:9.5px; font-weight:600; color:var(--t1); padding:2px 4px; margin-bottom:2px; border-radius:0; background:var(--sa); border-left:2px solid var(--ac); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#as-app .as-cal-evt:hover { background:var(--b); }
#as-app .as-cal-evt-time { font-weight:700; color:var(--ac); }
#as-app .as-cal-more { font-size:9px; color:var(--t3); padding:1px 4px; font-weight:600; }

/* ═══ CALENDAR — List view mini calendar (v0.10.49, per
   _prototypes/as-communications/index.html's .callist/.calleft/.calright/
   .cal-* — the List view previously had no calendar companion at all). ═══ */
#as-app .as-evl-wrap { display:flex; gap:16px; align-items:flex-start; }
#as-app .as-evl-side { flex:0 0 288px; }
#as-app .as-evl-main { flex:1; min-width:0; }

/* v0.10.56: AI "Suggested — from email" sidebar box (punch-list item 8),
   per _prototypes/as-communications/index.html's .calbox/.sug/.sgb — reuses
   the app's own .card/.cb shell (identical shape to the mock's .calbox)
   rather than a second copy of that container. */
#as-app .as-ai-sug-h { display:flex; align-items:center; gap:5px; font-size:9.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--t3); font-weight:700; margin-bottom:10px; }
#as-app .as-ai-sug-h svg { color:var(--ac); flex-shrink:0; }
#as-app .as-ai-sug { padding:10px 0; border-top:1px solid var(--b2); }
#as-app .as-ai-sug:first-child { border-top:none; padding-top:0; }
#as-app .as-ai-sug-t { font-size:12px; font-weight:700; color:var(--t1); }
#as-app .as-ai-sug-w { font-size:10.5px; color:var(--t3); margin-top:2px; line-height:1.4; }
#as-app .as-ai-sug-a { display:flex; gap:6px; margin-top:8px; }
#as-app .as-ai-sug-btn { height:26px; padding:0 11px; font-size:10.5px; font-weight:600; border:1px solid var(--b); border-radius:var(--rs); background:var(--s); color:var(--t2); cursor:pointer; transition:all .12s; font-family:inherit; }
#as-app .as-ai-sug-btn.p { background:var(--ac); color:#fff; border-color:var(--ac); }
#as-app .as-ai-sug-btn:hover { border-color:var(--ac); color:var(--ac); }
#as-app .as-ai-sug-btn.p:hover { background:var(--ach); color:#fff; }
#as-app .as-mcal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
#as-app .as-mcal-nav .asd-cal-hd { margin-bottom:0; flex:1; }
#as-app .as-mcal-nav button { line-height:1; }
#as-app #as-comms-panel-cal .asd-cal-hd { font-weight:700; font-size:13px; text-align:center; display:block; }
#as-app #as-comms-panel-cal .asd-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
#as-app #as-comms-panel-cal .asd-cal-dow { font-size:9px; color:var(--t3); font-weight:700; padding-bottom:4px; display:block; }
#as-app #as-comms-panel-cal .asd-cal-c { position:relative; padding:6px 0; font-size:11px; color:var(--t2); cursor:pointer; display:block; border-radius:0; }
#as-app #as-comms-panel-cal .asd-cal-c:hover { background:var(--sa); }
#as-app #as-comms-panel-cal .asd-cal-today { background:var(--ac); color:#fff; font-weight:700; }
/* v0.10.54: same contrast fix as as-dashboard-canvas.css's .asd-cal-today:hover — .asd-cal-c:hover
   otherwise wins on specificity and swaps today's accent bg for the hover gray while its white
   text stays, unreadable. */
#as-app #as-comms-panel-cal .asd-cal-today:hover { background:var(--ac); filter:brightness(.92); }
#as-app #as-comms-panel-cal .asd-cal-dot { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:3px; height:3px; border-radius:50%; background:var(--gn); }
#as-app #as-comms-panel-cal .asd-cal-today .asd-cal-dot { background:#fff; }
#as-app #as-comms-panel-cal .asd-cal-x { visibility:hidden; cursor:default; }
/* v0.10.55: "selected" (day-filtered) is a distinct state from "today" —
   an outline ring rather than a filled background, so both can be visibly
   different when the same cell is both today and selected. */
#as-app #as-comms-panel-cal .asd-cal-selected { box-shadow:inset 0 0 0 1.5px var(--ac); font-weight:700; }
#as-app #as-comms-panel-cal .as-evl-filter-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--sa); border-bottom:1px solid var(--b); font-size:12.5px; }
#as-app #as-comms-panel-cal .as-evl-filter-actions { display:flex; gap:6px; }

/* ═══ CALENDAR — Filters + Team Bar ═══ */
#as-app .as-cal-filters { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
#as-app .as-cal-team-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; flex:1; }
#as-app .as-cal-team-check { display:inline-flex; align-items:center; gap:4px; cursor:pointer; font-size:11px; }
#as-app .as-cal-team-check input { margin:0; }

/* ═══ CALENDAR — Selector (Settings) ═══ */
#as-app .as-cal-check { display:flex; align-items:center; gap:8px; padding:5px 0; cursor:pointer; font-size:12px; }
#as-app .as-cal-check input { margin:0; }
#as-app .as-cal-swatch { width:12px; height:12px; border-radius:3px; flex-shrink:0; }

/* ═══ CALENDAR — Week View ═══ */
#as-app .as-wk-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
#as-app .as-wk-col { background:var(--s); border:1px solid var(--b); border-radius:var(--rs); overflow:hidden; min-height:200px; }
#as-app .as-wk-today { border-color:var(--ac); }
#as-app .as-wk-header { padding:8px 10px; border-bottom:1px solid var(--b); display:flex; justify-content:space-between; align-items:center; }
#as-app .as-wk-dn { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--t2); }
#as-app .as-wk-dd { font-size:11px; color:var(--t3); }
#as-app .as-wk-dd-today { color:var(--ac); font-weight:700; }
#as-app .as-wk-body { padding:6px; }
#as-app .as-wk-evt { padding:6px 8px; margin-bottom:6px; border-radius:var(--rs); background:var(--sa); border-left:3px solid var(--ac); cursor:pointer; transition:background .1s; }
#as-app .as-wk-evt:hover { background:var(--b); }
#as-app .as-wk-evt:last-child { margin-bottom:0; }
#as-app .as-wk-evt-time { font-size:10px; font-weight:700; color:var(--ac); }
#as-app .as-wk-evt-title { font-size:12px; font-weight:600; margin-top:2px; }
#as-app .as-wk-evt-meta { font-size:10px; color:var(--t3); margin-top:1px; }

/* v0.1.79: Week time-grid view */
#as-app .as-wk-tg { border:1px solid var(--b); border-radius:var(--rs); overflow:hidden; background:var(--s); }
#as-app .as-wk-tg-head { display:grid; grid-template-columns:56px repeat(7,1fr); border-bottom:1px solid var(--b); position:sticky; top:0; z-index:2; background:var(--s); }
#as-app .as-wk-tg-head .as-wk-tg-gutter { border-right:1px solid var(--b); background:var(--sa); }
#as-app .as-wk-tg-hcell { padding:8px 4px; text-align:center; border-right:1px solid var(--b); }
#as-app .as-wk-tg-hcell:last-child { border-right:none; }
#as-app .as-wk-tg-today { background:rgba(212,116,14,0.04); }
#as-app .as-wk-tg-scroll { overflow-y:auto; max-height:calc(100vh - 220px); }
#as-app .as-wk-tg-body { display:grid; grid-template-columns:56px repeat(7,1fr); position:relative; }
#as-app .as-wk-tg-body > .as-wk-tg-gutter { border-right:1px solid var(--b); background:var(--sa); }
#as-app .as-wk-tg-hlabel { display:flex; align-items:flex-start; justify-content:flex-end; padding:2px 6px 0 0; font-size:9px; color:var(--t3); font-weight:600; box-sizing:border-box; }
#as-app .as-wk-tg-col { border-right:1px solid var(--b); position:relative; }
#as-app .as-wk-tg-col:last-child { border-right:none; }
#as-app .as-wk-tg-today-col { background:rgba(212,116,14,0.02); }
#as-app .as-wk-tg-hline { position:absolute; left:0; right:0; height:1px; background:var(--b); pointer-events:none; }
/* v0.4.4: Apple-style tile sizing rewritten end-to-end. The previous comment
 * (v0.1.100) said "short events visually extend past their time slot" — that
 * was the bug Glenn reported (overlap + hidden text). The new model:
 *   - Box conforms to actual duration (height = endMin - startMin in pixels).
 *   - Min-height is 18px purely so a 5-min event remains clickable.
 *   - Sub-36-min events get .as-wk-tg-evt-short / .as-day-evt-short which
 *     collapses to a single row of "time · title" with ellipsis.
 *   - Column-packing in JS (layoutDayEvents) places overlapping events
 *     side-by-side using a real cluster + greedy column-pack algorithm. */
#as-app .as-wk-tg-evt { position:absolute; background:var(--sa); padding:4px 6px; font-size:10px; cursor:pointer; overflow:hidden; z-index:1; transition:box-shadow 0.12s; border-radius:0; min-height:18px; border:1px solid var(--b); /* v0.10.76: same-tinted back-to-back events had no visible seam — box-sizing:border-box (app-wide reset) keeps this from growing past the slot. v0.4.5: removed border-left:3px solid var(--ac); v0.4.4 clickability floor only. toolbar-doctrine-v2 (2026-08-16): radius dropped to 0, same app-wide --r:0;--rs:0 token fix as Month/Day. */ }
#as-app .as-wk-tg-evt:hover { box-shadow:0 2px 8px rgba(0,0,0,.18); z-index:3; }
/* v0.4.4: short-slot adaptive style — mirrors .as-day-evt-short. Sub-36-min
 * events render time + title on one ellipsised row so they never exceed
 * their actual height. */
#as-app .as-wk-tg-evt-short {
    padding:2px 5px;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
    line-height:1.1;
}
#as-app .as-wk-tg-evt-short > div:first-child { font-size:8px !important; flex-shrink:0; }
#as-app .as-wk-tg-evt-short .as-wk-tg-evt-title {
    -webkit-line-clamp:1; line-clamp:1; margin-top:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    flex:1; min-width:0; font-size:10px;
}
#as-app .as-wk-tg-evt-short .as-meet-btn,
#as-app .as-wk-tg-evt-short .as-evt-del { display:none; }

/* v0.1.51: Section divider labels (Migration page) */
#as-app .as-section-label { display:flex; align-items:center; gap:10px; margin:24px 0 14px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--t3); }
#as-app .as-section-label::after { content:''; flex:1; height:1px; background:var(--b); }
/* v0.9.25: Configure summary cards — clickable, open the config tray */
#as-app .as-cfg-card { cursor:pointer; transition:border-color .12s, box-shadow .12s; }
#as-app .as-cfg-card:hover { border-color:#d9dce2; box-shadow:0 1px 0 rgba(0,0,0,.03); }
#as-app .as-cfg-card .ch .lnk { margin-left:auto; }
/* v0.9.26: compact + paginated Team members list (replaces heavy tiles) */
#as-app .as-umini-list { display:flex; flex-direction:column; }
#as-app .as-umini { display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid var(--sa); }
#as-app .as-umini:last-child { border-bottom:none; }
#as-app .as-umini-nm { flex:1; min-width:0; font-size:12px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#as-app .as-umini-actions { display:flex; gap:2px; flex:none; }
#as-app .as-umini.as-user-inactive { opacity:.5; }
#as-app .as-umini-pager { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:8px; border-top:1px solid var(--sa); }
/* v0.9.27: Settings — template icon tiles + tray sub-headings */
#as-app .as-tpl-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
#as-app .as-tpl-tile { border:1px solid var(--b); padding:14px 10px; text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; }
#as-app .as-tpl-tile:hover { border-color:var(--ac); background:var(--sa); }
#as-app .as-tpl-ic { width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--acl); color:var(--ac); font-size:17px; }
#as-app .as-tpl-nm { font-size:12px; font-weight:600; }
#as-app .as-set-sub, #as-app .as-cfg-sub { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--t3); margin:20px 0 8px; padding-top:16px; border-top:1px solid var(--b); }
/* first sub-heading in a panel shouldn't carry a divider above it */
#as-app .as-set-panel > .as-set-sub:first-child, #as-app .as-cfg-panel > .as-cfg-sub:first-child { margin-top:0; padding-top:0; border-top:none; }
/* CORRECTION to the v0.9.55 note that stood here: the removed
 * `#as-app .as-tpl-card { max-width:none !important }` was NOT dead. The
 * `.card { max-width:520px }` cap it fought is real — it comes from WORDPRESS
 * CORE (wp-admin/load-styles.php), which is why a repo grep found nothing and
 * a fixture without wp-admin styles showed no difference. Removing it did
 * regress .as-tpl-card to 520px. The special case is no longer needed only
 * because the general core reset now lives on `#as-app .card` (see ~:171) —
 * if that reset is ever removed, this card breaks again. */
@media (max-width:640px){ #as-app .as-tpl-grid { grid-template-columns:1fr 1fr; } }
/* v0.1.51: Checkbox styling */
#as-app input[type=checkbox] { width:16px; height:16px; accent-color:var(--ac); cursor:pointer; flex-shrink:0; }
/* v0.1.51: Meet Now header button */
#as-app .as-meet-now-btn { background:none; border:1px solid var(--b); border-radius:var(--rs); cursor:pointer; color:var(--t3); display:inline-flex; align-items:center; justify-content:center; gap:5px; transition:color .15s, border-color .15s, background .15s; height:34px; padding:0 12px; font-size:12px; font-weight:600; font-family:inherit; box-sizing:border-box; text-decoration:none; }
#as-app .as-meet-now-btn:hover { color:var(--gn); border-color:var(--gn); background:rgba(91,140,90,.08); }
/* v0.1.51: Escape links as icon-only row */
#as-app .as-escape-links { border-top:1px solid var(--sb2); padding:8px; display:flex; flex-direction:row; gap:4px; justify-content:center; }
#as-app .as-escape-link { display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; font-size:0; color:var(--sb3); text-decoration:none; opacity:.6; transition:opacity .15s, color .15s, background .15s; border-radius:var(--rs); }
#as-app .as-escape-link:hover { opacity:1; color:var(--sbh); background:var(--sb2); }
#as-app .as-escape-link svg { opacity:1 !important; }

/* ═══ RESPONSIVE — 768px ═══ */

/* ═══ v0.1.85 — Reports filters + visual upgrades ═══ */
#as-app .as-rpt-filters { display:flex; gap:8px; align-items:center; margin-bottom:16px; }
#as-app .as-rpt-filters select { padding:6px 10px; font-size:11px; border:1px solid var(--b); background:var(--s); color:var(--t1); font-family:inherit; }
#as-app .as-rpt-flabel { font-size:10px; color:var(--t3); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
#as-app .sparkline { display:flex; align-items:flex-end; gap:1px; height:20px; }
#as-app .spark-bar { flex:1; min-width:3px; }
#as-app .dv-table { width:100%; border-collapse:collapse; }
#as-app .dv-table th { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--t3); text-align:left; padding:6px 8px; border-bottom:2px solid var(--b); }
#as-app .dv-table td { font-size:12px; padding:8px; border-bottom:1px solid var(--sa); }
#as-app .dv-table tr:hover td { background:var(--sa); }
#as-app .dv-table .num { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }

@media(max-width:768px) {
    /* — Sidebar overlay — */
    #as-app .side { transform:translateX(-100%); transition:transform .25s ease; z-index:200; width:210px !important; }
    #as-app .side.as-side-open { transform:translateX(0); box-shadow:4px 0 20px rgba(0,0,0,.3); }
    #as-app .as-main { margin-left:0 !important; max-width:100vw !important; }
    #as-app .as-brand-mark { display:none; }
    #as-app.as-collapsed .as-side-label,
    #as-app.as-collapsed .slbl,
    #as-app.as-collapsed .as-brand-text,
    #as-app.as-collapsed .brand h1,
    #as-app.as-collapsed .brand small { display:revert; }
    #as-app.as-collapsed .si { font-size:13px; justify-content:flex-start; }

    /* — Hamburger — */
    #as-app .as-hamburger { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--b); border-radius:var(--rs); cursor:pointer; background:transparent; color:var(--t1); font-size:18px; flex-shrink:0; }

    /* — Header bar — */
    #as-app .top { padding:10px 12px; }
    #as-app .top h2 { font-size:16px; }
    #as-app .top p { font-size:10px; }
    #as-app .top .btns { gap:4px; }
    #as-app .as-meet-now-btn { padding:0 8px; font-size:0; gap:0; width:34px; justify-content:center; }
    #as-app .as-meet-now-btn svg { margin:0; }

    /* — Content area — */
    #as-app .cnt { padding:12px; }

    /* — Grids — */
    #as-app .g2 { grid-template-columns:1fr; }
    #as-app .g3 { grid-template-columns:1fr; }
    #as-app .g4 { grid-template-columns:repeat(2,1fr); }
    #as-app .as-metrics { grid-template-columns:repeat(2,1fr); gap:8px; }

    /* — Dashboard metric cards — */
    #as-app .as-mc { padding:12px; }
    #as-app .as-mc-value { font-size:22px; }
    #as-app .as-mc-event-title { font-size:12px; }

    /* — Dashboard schedule — */
    #as-app .as-sched-time { min-width:52px; font-size:10px; }

    /* — Dashboard cards — */
    #as-app .g3 > .card > .cb,
    #as-app .g3 > div > .card > .cb { max-height:300px; }

    /* — Tabs — */
    #as-app .tabs { flex-wrap:wrap; gap:1px; }
    #as-app .tab { padding:4px 8px; font-size:10px; }

    /* — Kanban / Pipeline — */
    #as-app .as-kanban { flex-direction:column; }
    #as-app .as-kb-col { min-width:100%; }
    #as-app .as-pipe-col { min-width:100% !important; min-height:auto !important; }

    /* — Task view toolbar — */
    #as-app #as-v-tasks > div:first-child { flex-direction:column; gap:8px; align-items:stretch !important; }
    #as-app #as-v-tasks > div:first-child > div:first-child { flex-wrap:wrap; gap:6px; }
    #as-app #as-v-tasks > div:first-child > .btns { flex-wrap:wrap; gap:6px; justify-content:flex-start; }
    #as-app #as-task-project-filter,
    #as-app #as-task-owner-filter,
    #as-app #as-task-priority-filter { flex:1; min-width:0; font-size:10px !important; }

    /* — Task list — */
    #as-app .as-task-cols { grid-template-columns:1fr; }
    #as-app .trow { gap:6px; }
    #as-app .towner { display:none; }
    #as-app .ttitle { font-size:12px; }

    /* — Task kanban cards — */
    #as-app .as-kb-card { padding:8px 10px; }
    #as-app .as-kb-title { font-size:11px; }

    /* — Week plan — */
    #as-app .as-wp-header { padding:8px 12px; }
    #as-app .as-wp-body { padding:4px 12px; }
    #as-app .as-wp-label { font-size:11px; min-width:40px; }

    /* — Modals — */
    #as-app .as-modal { width:calc(100vw - 24px) !important; max-height:90vh; }
    #as-app .as-modal .row { flex-direction:column; gap:0; }
    #as-app .as-modal .cb { padding:14px; }

    /* — Detail panels — */
    #as-app .as-detail-panel { width:100% !important; }
    #as-app .as-detail-name { font-size:17px; }
    #as-app .as-detail-section { padding:12px; }

    /* — Contacts — */
    #as-app .as-contact-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
    #as-app #as-v-contacts > div:first-child { flex-direction:column; gap:8px; align-items:stretch !important; }
    #as-app #as-v-contacts > div:first-child > div:first-child { flex-wrap:wrap; }
    #as-app #as-v-contacts > div:first-child > .btns { justify-content:flex-start; }

    /* — Pipeline toolbar — */
    #as-app #as-v-pipeline > div:first-child { flex-direction:column; gap:8px; align-items:stretch !important; }
    #as-app #as-v-pipeline > div:first-child > div:first-child { flex-wrap:wrap; gap:6px; }

    /* — Events toolbar — */
    #as-app #as-v-events > div:first-child { flex-direction:column; gap:8px; align-items:stretch !important; }
    #as-app #as-v-events > div:first-child > div:last-child { flex-wrap:wrap; gap:6px; }
    #as-app .as-cal-filters { flex-direction:column; gap:8px; }

    /* — Calendar grids — */
    #as-app .as-wk-grid { grid-template-columns:repeat(3,1fr); gap:6px; }
    #as-app .as-wk-col { min-height:120px; }
    #as-app .as-wk-tg-head { grid-template-columns:40px repeat(7,1fr); }
    #as-app .as-wk-tg-body { grid-template-columns:40px repeat(7,1fr); }
    #as-app .as-wk-tg-hlabel { font-size:8px; padding-right:3px; }
    #as-app .as-wk-tg-hcell .as-wk-dn { font-size:8px; }
    #as-app .as-wk-tg-hcell .as-wk-dd { display:none; }
    #as-app .as-cal-cell { min-height:70px; }
    #as-app .as-cal-hcell { padding:6px 2px; font-size:9px; }
    #as-app .as-cal-day { font-size:10px; }
    #as-app .as-cal-evt { font-size:9px; padding:1px 3px; }

    /* — Notification panel — */
    #as-app .as-notif-panel { width:calc(100vw - 24px); right:-60px; }

    /* — Quick bar — */
    #as-app .qbar { flex-wrap:wrap; gap:8px; }

    /* — Pipeline stages — */
    #as-app .pipe { flex-wrap:wrap; gap:4px; }
    #as-app .pstage { flex:1 1 calc(50% - 2px); min-width:0; padding:6px 4px; }
    #as-app .pstage .pc { font-size:16px; }
    #as-app .pstage .pl { font-size:8px; }

    /* — Pipe shape (dashboard) — */
    #as-app .as-pipe-shape { flex-wrap:wrap; }
    #as-app .as-pipe-stage { flex:1 1 calc(33% - 3px); min-width:0; padding:6px 2px; }
    #as-app .as-pipe-num { font-size:13px; }
    #as-app .as-pipe-lbl { font-size:6px; }

    /* — Projects toolbar — */
    #as-app #as-v-projects > div:first-child { flex-direction:column; gap:8px; align-items:stretch !important; }

    /* — Drive — */
    #as-app .as-drive-toolbar { flex-direction:column; gap:6px; }
    #as-app .as-drive-toolbar input { max-width:100% !important; }
    #as-app .as-drive-grid { grid-template-columns:1fr; }

    /* — User tiles — */
    #as-app .as-user-tile { width:100% !important; }

    /* — Toast — */
    #as-toast-container { right:8px; left:8px; }
    #as-app .as-toast { max-width:100%; min-width:0; }
}

/* ═══ RESPONSIVE — 480px ═══ */
@media(max-width:480px) {
    /* — Header — */
    #as-app .top { padding:8px 10px; }
    #as-app .top h2 { font-size:14px; }
    #as-app .top p { display:none; }
    #as-app .as-mode-toggle { width:30px; height:30px; }
    #as-app .as-notif-bell { width:30px !important; height:30px !important; }
    #as-app .as-sysmenu-btn { width:30px !important; height:30px !important; }
    #as-app .as-meet-now-btn { width:30px; height:30px; }
    #as-app .as-hamburger { width:32px; height:32px; font-size:16px; }

    /* — Content — */
    #as-app .cnt { padding:10px 8px; }

    /* — Grids — */
    #as-app .g4 { grid-template-columns:1fr; }
    #as-app .as-metrics { grid-template-columns:1fr; }

    /* — Dashboard metrics — */
    #as-app .as-mc { padding:10px; }
    #as-app .as-mc-value { font-size:20px; }
    #as-app .as-mc-label { font-size:9px; }

    /* — Dashboard cards — */
    #as-app .g3 > .card > .cb,
    #as-app .g3 > div > .card > .cb { max-height:250px; }
    #as-app .card { margin-bottom:10px; }
    /* v0.9.55: grids follow the tightened mobile card rhythm too (the
     * grid-child margin reset above keeps the cards themselves at 0). */
    #as-app .g2, #as-app .g3 { gap:10px; margin-bottom:10px; }
    #as-app .ch { padding:10px 12px; }
    #as-app .ch h3 { font-size:12px; }
    #as-app .cb { padding:10px 12px; }

    /* — Tasks — */
    #as-app .trow { padding:6px 0; }
    #as-app .ttitle { font-size:11px; }
    #as-app .tmeta { font-size:9px; }
    #as-app .tdue { font-size:9px; }
    #as-app .tcheck { width:14px; height:14px; }
    #as-app .tdot { width:4px; height:4px; }

    /* — Kanban — */
    #as-app .as-kb-header { padding:8px 10px; font-size:11px; }
    #as-app .as-kb-body { padding:6px; min-height:80px; }
    #as-app .as-kb-card { padding:7px 9px; margin-bottom:4px; }
    #as-app .as-kb-title { font-size:11px; margin-bottom:2px; }
    #as-app .as-kb-meta { font-size:9px; }

    /* — Week plan — */
    #as-app .as-wp-header { padding:6px 10px; gap:6px; }
    #as-app .as-wp-body { padding:4px 10px; }

    /* — Calendar — */
    #as-app .as-wk-grid { grid-template-columns:1fr; }
    #as-app .as-wk-col { min-height:auto; }
    #as-app .as-cal-cell { min-height:50px; padding:3px 4px; }
    #as-app .as-cal-hcell { font-size:8px; padding:4px 2px; }

    /* — Contacts — */
    #as-app .as-contact-grid { grid-template-columns:1fr; }
    #as-app .as-ccard { padding:10px; }
    #as-app .crow { gap:6px; }
    #as-app .cav { width:26px; height:26px; font-size:9px; }
    #as-app .cname { font-size:11px; }

    /* — Modals — */
    #as-app .as-modal { width:calc(100vw - 16px) !important; max-height:92vh; }
    #as-app .as-modal .cb { padding:12px; }
    #as-app .as-modal label { font-size:10px; }
    #as-app .as-modal input,
    #as-app .as-modal select,
    #as-app .as-modal textarea { font-size:12px; padding:7px 8px; }

    /* — Detail panel — */
    #as-app .as-detail-header { padding:10px 12px; }
    #as-app .as-detail-name { font-size:16px; }
    #as-app .as-detail-section { padding:10px; }

    /* — Notification panel — */
    #as-app .as-notif-panel { width:calc(100vw - 16px); right:-40px; max-height:70vh; }
    #as-app .as-notif-item { padding:5px 10px; font-size:11px; }
    /* v0.9.59 — event rows track the due-date rows' tighter phone padding. */
    #as-app .as-notif-event { padding:6px 10px; }
    #as-app .as-notif-event.is-unread { padding-left:8px; }
    #as-app .as-notif-section-title, #as-app .as-notif-quiet { padding-left:10px; padding-right:10px; }
    #as-app .as-notif-event-title { font-size:11px; }

    /* — Pipeline stages — */
    #as-app .pstage { padding:5px 3px; }
    #as-app .pstage .pc { font-size:14px; }
    #as-app .pstage .pl { font-size:7px; }

    /* — Quick bar — */
    #as-app .qbar { padding:8px 10px; gap:6px; }
    #as-app .qlbl { font-size:10px; }
    #as-app .qval { font-size:10px; }
}


/* ── v0.1.17: Meet copy button ─────────────── */
.as-meet-copy {
    display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
    font-size:11px;border:1px solid var(--b);border-radius:var(--rs);
    cursor:pointer;background:var(--sa);color:var(--bl);
}
.as-meet-copy:hover { background:color-mix(in srgb, var(--bl) 10%, transparent); }

/* ── v0.1.18: Day view ────────────────────── */
#as-app .as-day-container { border: 1px solid var(--b); border-radius: var(--rs); overflow: hidden; background: var(--s); }
/* toolbar-doctrine-v2 pixel-match (2026-08-16): gutter widened to match
   _prototypes/as-communications/index.html's .hlbl (78px). */
#as-app .as-day-gutter { width: 78px; flex-shrink: 0; border-right: 1px solid var(--b); background: var(--sa); }
#as-app .as-day-hour-label { display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px 8px 0 0; font-size: 10px; color: var(--t3); font-weight: 600; box-sizing: border-box; }
#as-app .as-day-col { position: relative; }
#as-app .as-day-hour-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--b); pointer-events: none; }
#as-app .as-day-hour-line:nth-child(odd) { background: color-mix(in srgb, var(--b) 50%, transparent); }
#as-app .as-day-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--rd); z-index: 5; pointer-events: none; }
#as-app .as-day-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rd); }
#as-app .as-day-evt {
    position: absolute; left: 2px; right: 2px; padding: 5px 10px; border-radius: 0;
    /* toolbar-doctrine-v2 (2026-08-16): radius dropped to 0 — the app's own
       tokens are --r:0;--rs:0, this rule was hardcoding a radius against
       that doctrine (independent of the mock, which is also square). */
    border: 1px solid var(--b); /* v0.10.76: same-tinted back-to-back events had no visible seam */
    background: var(--sa); cursor: pointer; /* v0.4.5: removed border-left:3px solid var(--ac). The 8% color-mix background tint conveys calendar source without competing with title text. P/T pill also gone (kept on month view only). Kept in this pixel-match pass — a deliberate improvement over the mock's static left-border, not reverted. */
    font-size: 11px; overflow: hidden; z-index: 2; transition: box-shadow .15s;
    box-sizing: border-box; min-height: 18px; /* v0.4.4: was 76px — Apple-style. The box now conforms to actual time slot. 18px is purely a clickability floor for sub-15-min events. */
}
#as-app .as-day-evt:hover { box-shadow: 0 2px 10px rgba(0,0,0,.18); z-index: 3; }
#as-app .as-day-evt-time { font-size: 10px; font-weight: 700; color: var(--ac); }
/* v0.4.4: Short-slot adaptive style. Events under ~36 minutes get this class
 * applied in JS. Padding collapses, time + title fold into one row, title
 * truncates to a single ellipsised line so a 30-min slot never bleeds past
 * its own height. The Meet button and × del are hidden (still reachable via
 * hover-grow on focus, and via clicking through to the modal). */
#as-app .as-day-evt-short {
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1.15;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
#as-app .as-day-evt-short .as-day-evt-time { font-size: 9px; flex-shrink: 0; }
#as-app .as-day-evt-short .as-day-evt-title {
    -webkit-line-clamp: 1; line-clamp: 1; margin-top: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
#as-app .as-day-evt-short .as-meet-btn,
#as-app .as-day-evt-short .as-evt-del { display: none; }

/* ── v0.1.18: Drag feedback ───────────────── */
#as-app .as-dragging { opacity: .4 !important; }
#as-app .as-drag-over { background: color-mix(in srgb, var(--ac) 8%, var(--s)) !important; }
#as-app .as-wk-evt[draggable="true"] { cursor: grab; }
#as-app .as-wk-evt[draggable="true"]:active { cursor: grabbing; }
#as-app .as-cal-evt[draggable="true"] { cursor: grab; }
#as-app .as-day-evt[draggable="true"] { cursor: grab; }

/* ═══ User tile grid (v0.1.31) ═══ */
#as-app .as-user-grid{display:flex;flex-wrap:wrap;gap:12px;padding:4px 0}
#as-app .as-user-tile{width:calc(50% - 6px);border:1px solid var(--b);background:var(--s);padding:14px;display:flex;flex-direction:column;gap:10px;box-sizing:border-box}
#as-app .as-user-tile.as-user-inactive{opacity:.5}
#as-app .as-user-tile-top{display:flex;align-items:center;gap:10px}
#as-app .as-user-tile-info{flex:1;min-width:0}
#as-app .as-user-tile-name{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#as-app .as-user-you{font-size:9px;font-weight:400;color:var(--t3)}
#as-app .as-user-tile-email{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#as-app .as-user-tile-meta{display:flex;gap:6px;flex-wrap:wrap}
#as-app .as-user-pill{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;background:var(--sa);padding:2px 8px}
#as-app .as-user-tile-foot{display:flex;justify-content:space-between;font-size:10px;color:var(--t3)}
#as-app .as-user-tile-actions{display:flex;gap:4px;justify-content:flex-end;border-top:1px solid var(--b);padding-top:8px;margin-top:2px}
#as-app .as-user-icon-btn{width:28px;height:28px;border:1px solid var(--b);background:var(--s);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .12s}
#as-app .as-user-icon-btn:hover{background:var(--sa);border-color:currentColor}
@media(max-width:900px){#as-app .as-user-tile{width:100%}}

/* v0.1.36: Multi-assign picker */
#as-app .as-multi-assign{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0}
#as-app .as-multi-assign label{display:flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;background:var(--sa);cursor:pointer;white-space:nowrap;transition:background .15s}
#as-app .as-multi-assign label:hover{background:var(--b)}
#as-app .as-multi-assign input[type=checkbox]{margin:0;width:13px;height:13px}
#as-app .as-multi-assign label.as-ma-checked{background:var(--acl);font-weight:600}

/* v0.1.79: Done archive toggle button */
#as-app .as-kb-archive-btn { background:none; border:none; color:var(--t3); cursor:pointer; padding:2px 4px; margin-left:auto; opacity:0.6; transition:opacity 0.15s; }
#as-app .as-kb-archive-btn:hover { opacity:1; color:var(--bl); }

/* v0.1.79: Nudge button and notification styling */
#as-app .as-nudge-btn { background:none; border:none; color:var(--t3); cursor:pointer; padding:2px 4px; opacity:0.5; transition:opacity 0.15s,color 0.15s; }
#as-app .as-nudge-btn:hover { opacity:1; color:#D4740E; }
#as-app .as-notif-nudge { background:rgba(212,116,14,0.06); border-left:2px solid #D4740E; }

/* v0.1.79: Nudge button styling */
#as-app .as-nudge-btn { color:var(--t3) !important; transition:color 0.15s; }
#as-app .as-nudge-btn:hover { color:#D4740E !important; }
#as-app .as-notif-nudge { background:rgba(212,116,14,0.05); display:flex; align-items:center; gap:6px; }

/* v0.1.93: Delete icon on calendar event tiles (month/week/day) — shows on hover */
#as-app .as-evt-del {
    position:absolute; top:2px; right:3px; width:14px; height:14px; display:none;
    align-items:center; justify-content:center; cursor:pointer;
    color:var(--rd); background:var(--bg); border:1px solid var(--b); border-radius:50%;
    font-size:9px; font-weight:700; line-height:1; z-index:4;
}
#as-app .as-cal-evt { position:relative; }
#as-app .as-cal-evt:hover .as-evt-del,
#as-app .as-wk-tg-evt:hover .as-evt-del,
#as-app .as-day-evt:hover .as-evt-del { display:flex; }
#as-app .as-evt-del:hover { background:var(--rd); color:#fff; }

/* ═══ v0.1.98 — P/T PREFIX PILLS + PERSONAL TINT ═══ */
/* Replaces border-based personal/team distinction + diagonal-stripe pattern.
   One token system used across calendar tiles (month/week/day), dashboard Tomorrow list, dashboard Today list. */
#as-app .as-pt-pill {
    display:inline-block; font-size:10px; font-weight:700; line-height:1;
    padding:3px 6px; margin-right:6px; border-radius:3px;
    text-transform:uppercase; letter-spacing:.4px; color:#FFF !important;
    vertical-align:baseline; flex-shrink:0;
    min-width:18px; text-align:center;
}
/* v0.2.6: Ensure pill is visible on task list rows + kanban cards — prevents
   accidental text-color inheritance from row state classes from hiding white label. */
#as-app .crow .as-pt-pill,
#as-app .as-kb-card .as-pt-pill,
#as-app .as-task-cols .as-pt-pill { color:#FFF !important; }
#as-app .as-pt-p { background:var(--gn); }
#as-app .as-pt-t { background:var(--bl); }

/* v0.2.2 — TASK STATUS PILLS
 * Extends the P/T pill system for task status. Same geometry, different
 * letter + color. Overdue-and-not-done overrides status color to red,
 * combining status + lateness into one bold signal. */
#as-app .as-pt-td { background:var(--bl); }          /* To do */
#as-app .as-pt-ip { background:var(--ac); }          /* In progress */
#as-app .as-pt-pn { background:var(--pu); }          /* Pending */
#as-app .as-pt-dn { background:var(--gn); }          /* Done */
#as-app .as-pt-overdue { background:var(--rd); }     /* Overrides status color when overdue */

/* Personal event tiles — subtle bg tint (replaces diagonal stripes) */
#as-app .as-cal-evt-personal,
#as-app .as-wk-tg-evt-personal,
#as-app .as-day-evt-personal { background:var(--gnl); }

/* Calendar tile title — allow full title on week/day, stay compact on month */
/* Month: tile is short, title is already JS-truncated to 18 chars + ellipsis — leave behavior alone */
/* Week + day: title wraps up to 3 lines (v0.1.100 — Apple-style, no clamp dance on hover). */
#as-app .as-wk-tg-evt-title {
    font-size:11px; font-weight:600; margin-top:2px; line-height:1.3;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    white-space:normal; word-break:break-word;
}
#as-app .as-day-evt-title {
    font-size:12.5px; font-weight:600; margin-top:2px; line-height:1.3;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    white-space:normal; word-break:break-word;
}


/* ═══════════════════════════════════════════════════════════════════
 * v0.3.2: Calendar color painting
 * ═══════════════════════════════════════════════════════════════════ */

/* 8% tint via color-mix when --cal-color is set. Falls back to the existing
 * flat var(--sa) / var(--gnl) backgrounds if the browser doesn't support it. */
#as-app .as-day-evt[style*="--cal-color"],
#as-app .as-wk-tg-evt[style*="--cal-color"],
#as-app .as-cal-evt[style*="--cal-color"] {
    background: color-mix(in srgb, var(--cal-color) 8%, var(--bg));
}

/* Time strip inside painted events uses the cal-color for stronger affordance */
#as-app .as-day-evt[style*="--cal-color"] .as-day-evt-time,
#as-app .as-cal-evt[style*="--cal-color"] .as-cal-evt-time {
    color: var(--cal-color);
}

/* Hover lifts to a slightly higher tint */
#as-app .as-day-evt[style*="--cal-color"]:hover,
#as-app .as-wk-tg-evt[style*="--cal-color"]:hover,
#as-app .as-cal-evt[style*="--cal-color"]:hover {
    background: color-mix(in srgb, var(--cal-color) 14%, var(--bg));
}

/* Manage-modal swatch: interactive affordance without breaking SS flat-UI spec */
#as-app .as-g-cal-swatch {
    cursor: pointer;
    transition: box-shadow 0.12s;
}
#as-app .as-g-cal-swatch:hover,
#as-app .as-g-cal-swatch:focus {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--t2);
    outline: none;
}

/* Palette popover chip */
.as-g-palette-chip {
    transition: transform 0.08s;
}
.as-g-palette-chip:hover {
    transform: scale(1.08);
}

/* Calendar-source legend strip (day/week/month view tops) */
#as-app .as-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--sa);
    font-size: 12px;
    color: var(--t2);
}
#as-app .as-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
#as-app .as-cal-legend-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    flex-shrink: 0;
}
#as-app .as-cal-legend-empty {
    font-size: 11px;
    color: var(--t3);
    font-style: italic;
}


/* v0.3.2: Task privacy pill. Muted so it doesn't compete with status badges. */
#as-app .as-pill-private {
    display: inline-block;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--t3);
    background: var(--sa);
    border: 0.5px solid var(--b);
    margin-right: 6px;
    vertical-align: 1px;
}

/* v0.3.5: muted version string under sidebar footer.
 * Rendered by admin-app.php after #as-sfoot. Hidden when sidebar is collapsed
 * so the 44px-wide rail doesn't get noisy. */
#as-app .as-side-ver {
    font-size: 9px;
    color: var(--sb3);
    text-align: center;
    padding: 6px 0 10px;
    letter-spacing: 0.5px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    opacity: 0.7;
    user-select: none;
}
#as-app.as-collapsed .as-side-ver {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
 * v0.9.68 / HUB-0023 Phase 2 — shared Hub app-tray primitive, AS-scoped
 * restores + collapsed-rail variants.
 *
 * The tray markup and base look come from the Hub's dependency-free
 * ss-app-tray.css (enqueued in AS_Router::on_load). NOTHING here restyles
 * it — do not add colors, borders or sizes. Two narrow jobs only:
 *
 *   1. RESTORE the padding the Hub sheet declares. actionstudio.css opens
 *      with `#as-app, #as-app * { margin:0; padding:0; box-sizing:border-box; }`
 *      — specificity (1,0,0) — which OUTRANKS the primitive's single-class
 *      selectors (0,1,0) no matter which sheet loads last. Without these two
 *      rules the footer and version stamp collapse to zero padding and the
 *      tray jams against the nav. The values are copied verbatim from
 *      ss-app-tray.css; if that sheet's padding ever changes, change these.
 *   2. COLLAPSED RAIL parity: AS's 48px collapsed sidebar needs the tray to
 *      stack vertically, mirroring the Hub's own
 *      `.ss-shell--collapsed .ss-shell-app-tray` rules (which live in the
 *      Hub-only ss-admin.css and so never reach ActionStudio).
 * ═══════════════════════════════════════════════════════════════════ */
#as-app .ss-shell-sidebar-footer { padding: 12px 16px 8px; }
#as-app .ss-shell-version { padding: 6px 0 0; }

/* Collapsed rail: icons stack, version stamp hides (same treatment the
   legacy .as-side-ver got above — a 48px rail can't show "v0.9.68"). */
#as-app.as-collapsed .ss-shell-sidebar-footer {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#as-app.as-collapsed .ss-shell-app-tray {
    flex-direction: column;
    gap: 4px;
}
#as-app.as-collapsed .ss-shell-version {
    display: none;
}

/* The Hub stamp inherits the legacy line's click-for-What's-new affordance
   (wired in as-whatsnew.js). Make that discoverable. */
#as-app .ss-shell-version { cursor: pointer; user-select: none; }

/* ═══════════════════════════════════════════════════════════════════
 * v0.4.6: Opportunities — filter row, kanban cards, list view, tray,
 * contact picker modal.
 *
 * The page model is single-list-of-opportunities (the entity formerly
 * known as deals). Segment is a filter dimension, not navigation.
 * Edit goes to a slide-in tray (right panel desktop / bottom sheet
 * mobile); create stays modal. Contact picker is a search modal that
 * replaces the broken 25-row dropdown.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Filter row ─────────────────────────────────────────────────── */
/* v0.4.8: utility class with stronger specificity than the kanban's
 * display:flex !important. Used by the Opportunities view toggle so
 * Kanban/List actually hide each other. */
#as-app .as-hidden { display:none !important; }
#as-app .as-opp-filter-row {
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    margin-bottom:12px; padding:10px 12px;
    background:var(--s); border:1px solid var(--b);
}
#as-app .as-opp-filter {
    padding:6px 10px; border:1px solid var(--b); background:var(--inp-bg);
    color:var(--t1); font-size:12px; min-width:120px; cursor:pointer;
}
#as-app .as-opp-revchk {
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; color:var(--t2); margin:0; padding:4px 8px;
    cursor:pointer; user-select:none;
}
#as-app .as-opp-revchk input { margin:0; cursor:pointer; }
#as-app .as-opp-search {
    flex:1; min-width:180px; padding:6px 10px;
    border:1px solid var(--b); background:var(--inp-bg);
    color:var(--t1); font-size:12px;
}
#as-app .as-opp-view-toggle {
    display:inline-flex; gap:0; margin-left:auto;
    border:1px solid var(--b); overflow:hidden;
}
#as-app .as-opp-view-btn {
    padding:6px 14px; background:var(--s); color:var(--t2);
    border:none; cursor:pointer; font-size:11px; font-weight:600;
    border-right:1px solid var(--b);
}
#as-app .as-opp-view-btn:last-child { border-right:none; }
#as-app .as-opp-view-btn.on {
    background:var(--ac); color:#fff;
}
#as-app .as-opp-view-btn:hover:not(.on) { background:var(--sa); }

/* ── Kanban card refinements (v0.4.6) ──────────────────────────── */
#as-app .as-opp-col { min-width:240px; max-width:280px; flex:0 0 260px; }
#as-app .as-opp-col-empty {
    padding:14px; text-align:center; color:var(--t3);
    font-size:11px; font-style:italic;
}
#as-app .as-opp-card {
    position:relative;
    background:var(--s); border:1px solid var(--b);
    padding:10px 12px; margin-bottom:8px; cursor:grab;
    transition:box-shadow .12s, transform .08s;
}
#as-app .as-opp-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.10); }
#as-app .as-opp-card:active { cursor:grabbing; }
#as-app .as-opp-card-owner {
    position:absolute; top:8px; right:8px;
    width:22px; height:22px; border-radius:50%;
    background:var(--ac); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700;
}
#as-app .as-opp-card-title {
    font-size:13px; font-weight:600; color:var(--t1);
    line-height:1.3; margin-bottom:4px; padding-right:28px;
}
#as-app .as-opp-card-contact {
    font-size:11px; color:var(--t3); margin-bottom:6px;
}
#as-app .as-opp-card-company {
    font-size:11px; font-weight:600; color:var(--t2); margin-top:-4px; margin-bottom:6px;
}
#as-app .as-opp-card-close {
    font-size:10px; color:var(--t3); margin-top:4px;
}
#as-app .as-opp-seg-chip {
    display:inline-block; font-size:9px; font-weight:600;
    padding:2px 6px; background:var(--sa); color:var(--t2);
    text-transform:uppercase; letter-spacing:.4px;
    margin-top:4px;
}
#as-app .as-opp-card-foot {
    display:flex; gap:4px; margin-top:8px;
    padding-top:6px; border-top:1px solid var(--sa);
    align-items:center;
}
#as-app .as-opp-card-foot button {
    padding:2px 6px; font-size:11px; background:var(--sa);
    color:var(--t2); border:none; cursor:pointer;
}
#as-app .as-opp-card-foot button:hover { background:var(--b); color:var(--t1); }

/* Phase 7 (Opportunities pixel-parity): "one signal chip" per card, ported
   1:1 from _prototypes/as-crm-redesign/index.html's .sig classes. */
#as-app .sig { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; padding:2px 7px; }
#as-app .sig.warn { background:var(--rdl); color:var(--rd); }
#as-app .sig.ok { background:var(--gnl); color:var(--gn); }
#as-app .sig.mut { background:var(--sa); color:var(--t3); border:1px solid var(--b); }
#as-app .sig.val { background:var(--acl); color:var(--ach); }

/* Phase 7: hover-reveal action rail — same buttons/handlers as before
   (.as-ft-actions: Capture+Sustain boards and Sustain's table; .as-opp-card-
   foot: Nurture board), just hidden until the card is hovered or keyboard-
   focused. Nothing live did hover-reveal before this; scoped to .as-opp-card
   and .as-funnels-table specifically so nothing outside those two contexts
   is affected. */
#as-app .as-opp-card .as-ft-actions,
#as-app .as-opp-card .as-opp-card-foot {
    opacity:0; transition:opacity .12s;
}
#as-app .as-opp-card:hover .as-ft-actions,
#as-app .as-opp-card:focus-within .as-ft-actions,
#as-app .as-opp-card:hover .as-opp-card-foot,
#as-app .as-opp-card:focus-within .as-opp-card-foot {
    opacity:1;
}
#as-app .as-funnels-table .as-ft-actions { opacity:0; transition:opacity .12s; }
#as-app .as-funnels-table tbody tr:hover .as-ft-actions,
#as-app .as-funnels-table tbody tr:focus-within .as-ft-actions {
    opacity:1;
}
#as-app .as-opp-make-proj {
    margin-left:auto; font-size:10px; color:var(--gn);
    font-weight:600; cursor:pointer; padding:2px 6px;
    text-decoration:none;
}
#as-app .as-opp-make-proj:hover {
    background:var(--gnl); color:var(--gn);
}

/* ── List view ─────────────────────────────────────────────────── */
#as-app .as-opp-table {
    width:100%; border-collapse:collapse;
    background:var(--s); border:1px solid var(--b);
    font-size:12px;
}
#as-app .as-opp-table thead {
    background:var(--sa);
    border-bottom:1px solid var(--b);
}
#as-app .as-opp-table th {
    padding:10px 12px; text-align:left;
    font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.4px; color:var(--t3);
}
#as-app .as-opp-table th.num,
#as-app .as-opp-table td.num { text-align:right; }
#as-app .as-opp-table tbody tr {
    border-bottom:1px solid var(--sa);
    cursor:pointer; transition:background .08s;
}
#as-app .as-opp-table tbody tr:hover {
    background:color-mix(in srgb, var(--ac) 4%, var(--s));
}
#as-app .as-opp-table tbody tr:last-child { border-bottom:none; }
#as-app .as-opp-table td {
    padding:10px 12px; color:var(--t1); vertical-align:middle;
}
#as-app .as-opp-row-title { font-weight:600; }

/* ── Edit Tray (slide-in) ──────────────────────────────────────── */
/* Right-anchored 380px panel on desktop. Bottom-anchored 80vh sheet
 * on mobile. Hidden by default; .as-tray-open slides it into view. */
#as-app .as-opp-tray {
    position:fixed; top:0; right:0; bottom:0;
    width:420px; max-width:100vw;
    background:var(--bg); border-left:1px solid var(--b);
    box-shadow:-4px 0 20px rgba(0,0,0,.12);
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:1000; overflow-y:auto;
    display:flex; flex-direction:column;
}
#as-app .as-opp-tray.as-tray-open {
    transform:translateX(0);
}
#as-app .as-tray-head {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; border-bottom:1px solid var(--b);
    background:var(--s);
    position:sticky; top:0; z-index:1;
}
#as-app .as-tray-head h3 { margin:0; font-size:14px; }
#as-app .as-tray-actions { display:flex; gap:6px; }
#as-app .as-tray-actions .btn { font-size:11px; padding:5px 12px; }
#as-app .as-tray-body { padding:16px 18px; flex:1; }
#as-app .as-tray-body label {
    display:block; font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.4px;
    color:var(--t3); margin-bottom:4px; margin-top:12px;
}
#as-app .as-tray-body label:first-child { margin-top:0; }
#as-app .as-tray-body input[type=text],
#as-app .as-tray-body input[type=number],
#as-app .as-tray-body input[type=date],
#as-app .as-tray-body input[type=datetime-local],
#as-app .as-tray-body select,
#as-app .as-tray-body textarea {
    width:100%; padding:7px 10px; border:1px solid var(--b);
    background:var(--inp-bg); color:var(--t1); font-size:12px;
    box-sizing:border-box;
}
#as-app .as-tray-body textarea { resize:vertical; min-height:80px; }
/* v0.10.29 (Communications, Phase 8): .fld — Add Event tray's field wrapper,
 * per the mock's own class name. Purely a spacing wrapper; label/input
 * styling already comes from the .as-tray-body rules above. */
#as-app .as-tray-body .fld { margin-bottom:4px; }
#as-app .as-tray-body .row {
    display:flex; gap:10px;
}
#as-app .as-tray-body .row > div { flex:1; }
#as-app .as-tray-contact-pick {
    display:flex; gap:6px; align-items:stretch;
}
#as-app .as-tray-contact-display {
    flex:1; padding:7px 10px; border:1px solid var(--b);
    background:var(--inp-bg); color:var(--t1); font-size:12px;
    display:flex; align-items:center; min-height:32px;
    cursor:pointer; transition:border-color .12s, background .12s;
}
/* v0.7.06: empty state reads as a click target, not a disabled input.
 * Dashed border + hover state cue the user that this opens the picker.
 * Pre-v0.7.06 the empty state looked identical to a normal input — users
 * tried to type a name and were confused when the field rejected input.
 * The "Add" / "Choose" button next to it remains the primary affordance;
 * this change makes the display surface itself a redundant click target. */
#as-app .as-tray-contact-display.is-empty {
    border-style:dashed; color:var(--t3); font-style:italic;
}
#as-app .as-tray-contact-display:hover {
    border-color:var(--ac);
}
#as-app .as-tray-contact-pick .btn {
    font-size:11px; padding:5px 10px; flex-shrink:0;
}
#as-app .as-tray-make-proj {
    margin-top:18px; padding:12px 14px;
    background:color-mix(in srgb, var(--gn) 8%, var(--bg));
    border-left:3px solid var(--gn);
    font-size:12px; color:var(--t1);
}
#as-app .as-tray-make-proj button[disabled] {
    opacity:.6; cursor:not-allowed;
}
#as-app .as-tray-foot {
    margin-top:20px; padding-top:14px; border-top:1px solid var(--sa);
    display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;
}
/* v0.4.7: promote button on the contact tray sits left of Save changes */
#as-app .as-tray-promote {
    margin-right:auto; font-size:11px;
}

/* Mobile: tray becomes bottom sheet */
@media (max-width: 720px) {
    #as-app .as-opp-tray {
        top:auto; left:0; right:0; bottom:0;
        width:100%; max-width:100%;
        height:80vh; max-height:80vh;
        border-left:none; border-top:1px solid var(--b);
        transform:translateY(100%);
        box-shadow:0 -4px 20px rgba(0,0,0,.18);
    }
    #as-app .as-opp-tray.as-tray-open {
        transform:translateY(0);
    }
    /* List columns collapse on mobile */
    #as-app .as-opp-table th:nth-child(3),
    #as-app .as-opp-table td:nth-child(3),
    #as-app .as-opp-table th:nth-child(6),
    #as-app .as-opp-table td:nth-child(6),
    #as-app .as-opp-table th:nth-child(8),
    #as-app .as-opp-table td:nth-child(8) { display:none; }
}

/* ── Contact picker modal ──────────────────────────────────────── */
/* v0.4.7: explicit z-index bump on the picker container so it appears
 * ABOVE the slide-in tray (which is z:1000). Pre-v0.4.7 the picker
 * inherited the generic .as-modal-bg z:200 and got hidden behind the
 * tray on Opportunities create flows. */
#as-app #as-m-contact-picker { z-index:1100; }
#as-app .as-cp-modal {
    width:480px; max-width:92vw;
    height:560px; max-height:80vh;
    display:flex; flex-direction:column;
}
/* v0.7.4: locked modal height so typing into the picker doesn't make
 * the dialog grow/shrink with the result count. Pre-v0.7.4 the modal
 * sized to its content — every keystroke that changed result count
 * caused a visible jump and made the search box hard to follow.
 * Fixed height + scrollable results = stable target. */
/* v0.4.8: picker .cb keeps padding:0 because the input + results provide
 * their own padding, but we add padding to the inner sections so content
 * doesn't crash into modal edges. */
#as-app .as-cp-modal .cb {
    padding:0; flex:1; display:flex; flex-direction:column;
    overflow:hidden;
}
#as-app .as-cp-input {
    margin:20px 24px 14px 24px; padding:11px 14px;
    border:1px solid var(--b); background:var(--inp-bg);
    color:var(--t1); font-size:13px;
    flex-shrink:0;
    /* v0.7.06: explicit box-sizing + width:auto override the inherited
     * `.as-modal input { width:100% }` which combined with the 40px horizontal
     * margin pushed the input past the modal edge. width:auto + the parent
     * flex column's content box gives correct sizing.
     * v0.7.07: bumped margin 20→24 horizontal, 18→20 top to match the new
     * row padding and give the input visible breathing room from modal edge. */
    box-sizing:border-box; width:auto;
}
#as-app .as-cp-input:focus {
    outline:none; border-color:var(--ac);
}
#as-app .as-cp-results {
    flex:1; overflow-y:auto;
    padding:4px 0 16px 0;
}
#as-app .as-cp-row {
    padding:12px 24px; cursor:pointer;
    border-top:1px solid var(--sa);
    transition:background .08s;
    /* v0.7.07: padding bumped 11px 20px → 12px 24px to match the wider input
     * inset, giving the picker rows visible left/right breathing room from the
     * modal edges and matching the input's horizontal alignment. */
}
#as-app .as-cp-row:first-child { border-top:none; }
#as-app .as-cp-row:hover {
    background:color-mix(in srgb, var(--ac) 6%, var(--s));
}
#as-app .as-cp-name {
    font-size:13px; font-weight:600; color:var(--t1);
}
#as-app .as-cp-sub {
    font-size:11px; color:var(--t3); margin-top:2px;
}
#as-app .as-cp-no-contact .as-cp-name {
    color:var(--t3); font-style:italic; font-weight:500;
}
#as-app .as-cp-create {
    background:color-mix(in srgb, var(--gn) 6%, var(--s));
}
#as-app .as-cp-create .as-cp-name {
    color:var(--gn);
}
#as-app .as-cp-empty {
    padding:30px 16px; text-align:center;
    color:var(--t3); font-size:12px; font-style:italic;
}

/* ── Segment manager modal (v0.4.8) ────────────────────────────── */
/* Opened from "Manage segments..." sentinel in the filter-row segment
 * dropdown. Lists current segments with rename/remove + an inline add. */
#as-app #as-m-seg-manager { z-index:1100; }
#as-app .as-seg-modal {
    width:520px; max-width:92vw;
    max-height:80vh;
    display:flex; flex-direction:column;
}
#as-app .as-seg-modal .cb {
    padding:18px 20px; flex:1;
    overflow-y:auto;
    display:flex; flex-direction:column; gap:12px;
}
#as-app .as-seg-list {
    display:flex; flex-direction:column;
    border:1px solid var(--b);
}
#as-app .as-seg-row {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px;
    border-bottom:1px solid var(--sa);
    background:var(--s);
}
#as-app .as-seg-row:last-child { border-bottom:none; }
#as-app .as-seg-name {
    flex:1; font-size:13px; font-weight:600; color:var(--t1);
}
#as-app .as-seg-count {
    font-size:11px; color:var(--t3);
    padding:2px 8px; background:var(--sa);
}
#as-app .as-seg-row .btn { font-size:11px; padding:4px 10px; }
#as-app .as-seg-add {
    display:flex; gap:8px;
    padding-top:6px; border-top:1px solid var(--sa);
}
#as-app .as-seg-add input {
    flex:1; padding:8px 12px;
    border:1px solid var(--b); background:var(--inp-bg);
    color:var(--t1); font-size:13px;
}
#as-app .as-seg-add input:focus { outline:none; border-color:var(--ac); }
#as-app .as-seg-add .btn { font-size:12px; padding:7px 14px; flex-shrink:0; }

/* v0.8.04: Role-blocked UI state.
 *
 * Per role contract §4.2: manager/member gates DISABLE (visible but
 * obviously inert + tooltip-explained), admin gates HIDE (set via inline
 * style in as-role-gates.js). The class below paints the disabled state.
 *
 * pointer-events:none stops mouse clicks; the JS layer also captures
 * keyboard activations defensively. */
#as-app .as-role-blocked,
.as-role-blocked {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ───────────────────────────────────────────────────────────────────────────
 * Background-activity indicator (#as-netbar)
 * Toggled by as-ui.js netBusy/netIdle off the api() in-flight counter (same
 * is-active contract — JS unchanged).
 * INTAKE-096 retired the full-width animated sweeping stripe; v0.9.12 finishes
 * the job: the ring is now an inline element sitting just left of the tone
 * (light/dark) toggle in the header, and it's a quiet LIGHT-GREY spinner rather
 * than an accent-coloured pulse — so it reads as "something's updating in the
 * background," not as an attention-grabbing laser. It always reserves its 14px
 * slot (no layout jump) and only becomes visible while requests are in flight.
 * ──────────────────────────────────────────────────────────────────────────*/
.as-netbar{display:inline-flex;flex:0 0 14px;align-self:center;height:14px;width:14px;position:relative;opacity:0;pointer-events:none;transition:opacity .2s ease;}
.as-netbar.is-active{opacity:1;}
.as-netbar.is-active::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--b);border-top-color:var(--t3);animation:as-netbar-spin .7s linear infinite;}
@keyframes as-netbar-spin{to{transform:rotate(360deg);}}

/* v0.9.17: Engage view content (top-bar button removed v0.10.14 — see
 * templates/admin-app.php; Phase 9: promoted from a right-side tray to a
 * full routed view, #as-v-engage — these rules re-scoped from the retired
 * #as-engage-tray selector, content/sizing unchanged). Cards stack
 * full-width; heat-map stays compact. */
#as-app #as-v-engage .engage-card{width:100%;}
#as-app #as-v-engage .heatmap-table th,#as-app #as-v-engage .heatmap-table td{padding:4px 2px;}
#as-app #as-v-engage .heatmap-table{font-size:11px;}

/* v0.9.19: dashboard bottom row — Campaign Performance chart + Sales Funnel /
 * Campaign rings (two tabbed cards). Ported from the locked prototype. */
#as-app .as-dc-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;align-items:start;}
#as-app .as-dc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:11px 15px;border-bottom:1px solid var(--b);}
#as-app .as-dc-head h3{font-size:13px;font-weight:600;}
#as-app .as-dc-switch{display:flex;flex-shrink:0;}
#as-app .as-dc-switch button{font-family:inherit;font-size:10px;padding:5px 10px;border:1px solid var(--b);background:var(--s);color:var(--t2);cursor:pointer;margin-left:-1px;white-space:nowrap;}
#as-app .as-dc-switch button.on{background:var(--t1);border-color:var(--t1);color:#fff;font-weight:600;}
#as-app .as-dc-body{padding:14px 16px;}
#as-app .as-dc-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:6px;}
#as-app .dc-lg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t2);cursor:pointer;}
#as-app .dc-lg.off{opacity:.35;}
#as-app .dc-lg b{font-weight:700;color:var(--t1);}
#as-app .dc-chip{width:12px;height:3px;}
#as-app #as-dc-chart{width:100%;height:auto;display:block;}
#as-app .dc-gl{stroke:var(--sa);stroke-width:1;}
#as-app .dc-ax{font-size:9px;fill:var(--t3);}
#as-app .dc-ln{fill:none;stroke-width:2.2;}
#as-app .dc-empty{padding:24px;text-align:center;color:var(--t3);font-size:12px;}
#as-app .dc-cmp{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid var(--sa);cursor:pointer;}
#as-app .dc-cmp:last-child{border-bottom:none;}
#as-app .dc-ring{width:42px;height:42px;flex-shrink:0;}
#as-app .dc-cmp-n{font-size:12px;font-weight:600;}
#as-app .dc-cmp:hover .dc-cmp-n{color:var(--ac);}
#as-app .dc-cmp-s{font-size:10px;color:var(--t3);margin-top:2px;}
#as-app .dc-flag{display:inline-block;font-size:8px;font-weight:700;text-transform:uppercase;padding:1px 5px;margin-left:5px;}
#as-app .dc-flag.win{background:var(--gnl);color:var(--gn);}
#as-app .dc-flag.need{background:var(--rdl);color:var(--rd);}
#as-app .dc-fn-svg{width:100%;height:auto;display:block;max-height:230px;}
#as-app .dc-fn-l{font-size:11px;fill:var(--t2);}
#as-app .dc-fn-r{font-family:Georgia,serif;font-weight:700;fill:var(--t1);font-size:13px;}
@media(max-width:768px){#as-app .as-dc-row{grid-template-columns:1fr;}}


/* v0.8.53: Send-email surface rendered as a right-side tray (matches the
   opportunity/contact edit tray) instead of a centered modal. CSS-only — the
   asShowModal('sendemail') / asHideModals() plumbing is unchanged. Backdrop is
   transparent + click-through so the rest of the UI stays usable, like the
   other trays. On mobile it becomes a bottom sheet. */
#as-app #as-m-sendemail { background:transparent; pointer-events:none; justify-content:flex-end; align-items:stretch; }
#as-app #as-m-sendemail .as-modal {
    pointer-events:auto;
    width:520px; max-width:100vw; height:100vh; max-height:100vh;
    border-radius:0; overflow-y:auto;
    border-left:1px solid var(--b);
    box-shadow:-4px 0 20px rgba(0,0,0,.12);
    transform:translateX(100%); transition:transform .25s ease;
    display:flex; flex-direction:column;
}
#as-app #as-m-sendemail.show .as-modal { transform:translateX(0); }
#as-app #as-m-sendemail .as-modal .cb { flex:1; overflow-y:auto; }
@media (max-width: 720px) {
    #as-app #as-m-sendemail { align-items:flex-end; }
    #as-app #as-m-sendemail .as-modal {
        width:100%; max-width:100%; height:85vh; max-height:85vh;
        border-left:none; border-top:1px solid var(--b);
        transform:translateY(100%); box-shadow:0 -4px 20px rgba(0,0,0,.18);
    }
    #as-app #as-m-sendemail.show .as-modal { transform:translateY(0); }
}

/* ───────────────────────────────────────────────────────────────────────────
 * AS-UI007 — Shared dropdown/menu component.
 * Replaces one-off inline style + onmouseover/onmouseout background-swap on the
 * Quick-add menu (and any future popover) with token-driven classes. Hover comes
 * from :hover (var(--sa)), not inline JS, so spacing/hover/color stay consistent
 * with the rest of the shell. Zero radius per suite UI contract.
 * ──────────────────────────────────────────────────────────────────────────*/
#as-app .as-menu {
    position:absolute; right:0; top:100%; margin-top:4px;
    background:var(--bg); border:1px solid var(--b);
    box-shadow:0 4px 12px rgba(0,0,0,.12); z-index:100; min-width:160px;
}
#as-app .as-menu-item {
    padding:6px 14px; font-size:12px; cursor:pointer;
    border-bottom:1px solid var(--sa); transition:background .12s ease;
}
#as-app .as-menu-item:last-child { border-bottom:none; }
#as-app .as-menu-item:hover { background:var(--sa); }
/* toolbar-doctrine-v2 (2026-08-16): thin divider between the sysmenu's
 * folded-in quick-add create items and its original theme/toggle items. */
#as-app .as-menu-sep { height:1px; background:var(--b); margin:4px 0; }

/* header/toolbar doctrine: ⋮ system menu trigger + toggle rows */
#as-app .as-sysmenu-btn { width:34px; height:34px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; color:var(--t3); }
#as-app .as-sysmenu-btn:hover { color:var(--t1); }
#as-app .as-sysmenu-btn svg { width:16px; height:16px; display:block; }
#as-app #as-sysmenu { min-width:190px; }
#as-app .as-menu-toggle { display:flex; align-items:center; justify-content:space-between; gap:18px; }
#as-app .as-menu-check { color:var(--ac); font-weight:700; font-size:13px; line-height:1; opacity:0; }
#as-app .as-menu-check::before { content:'\2713'; }
#as-app .as-menu-check.on { opacity:1; }

/* ───────────────────────────────────────────────────────────────────────────
 * v0.10.23 (Phase 5, Display): ported 1:1 from
 * _prototypes/as-integrated/surfaces/display.html's embedded <style> block.
 * Display is one of the two documented .toolbar exceptions (Dashboard is the
 * other) — this left-rail .setwrap/.setrail/.setmain layout replaces it.
 * Selectors gained the #as-app prefix (file convention); values/tokens are
 * otherwise unchanged from the prototype source.
 * ──────────────────────────────────────────────────────────────────────────*/
#as-app .setwrap { display:flex; gap:0; height:calc(100vh - 74px); margin:-20px -28px; }
#as-app .setrail { width:206px; flex:0 0 auto; border-right:1px solid var(--b); background:var(--s); overflow-y:auto; padding:10px 0; }
#as-app .setgrp { font-size:9px; letter-spacing:.9px; text-transform:uppercase; color:var(--t3); font-weight:700; padding:13px 16px 5px; }
#as-app .setlink { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 16px; font-size:12.5px; font-weight:500; color:var(--t2); background:none; border:none; cursor:pointer; font-family:inherit; }
#as-app .setlink:hover { background:var(--sa); color:var(--t1); }
#as-app .setlink.on { background:var(--acl); color:var(--ach); font-weight:600; box-shadow:inset 2px 0 0 var(--ac); }
#as-app .setlink svg { width:15px; height:15px; flex:0 0 auto; }
#as-app .setmain { flex:1; min-width:0; overflow-y:auto; padding:22px 26px 60px; }
#as-app .setmain h3 { font-family:var(--serif); font-size:19px; font-weight:700; }
#as-app .setmain .lead { font-size:12.5px; color:var(--t3); margin:3px 0 18px; line-height:1.5; }
#as-app .panel { background:var(--s); border:1px solid var(--b); box-shadow:var(--card-sh); margin-bottom:16px; }
#as-app .paneltitle { font-size:9.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--t3); font-weight:700; margin:20px 0 9px; }
#as-app .paneltitle:first-child { margin-top:0; }
#as-app .frow { display:flex; align-items:center; gap:12px; padding:12px 15px; border-bottom:1px solid var(--b2); }
#as-app .frow:last-child { border-bottom:none; }
#as-app .frow .g { flex:1; min-width:0; }
#as-app .frow .g b { font-weight:600; font-size:13px; display:block; }
#as-app .frow .g span { font-size:11.5px; color:var(--t3); }
#as-app .frow .val { font-size:12.5px; color:var(--t2); font-weight:600; }
#as-app .frow.click { cursor:pointer; }
#as-app .frow.click:hover { background:var(--sa); }
#as-app .sw { width:36px; height:20px; background:var(--b); position:relative; transition:.15s; flex:0 0 auto; display:inline-block; cursor:pointer; }
#as-app .sw.on { background:var(--ac); }
#as-app .sw::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; transition:.15s; }
#as-app .sw.on::after { left:18px; }
#as-app .chip2 { font-size:10px; font-weight:700; padding:2px 8px; text-transform:uppercase; letter-spacing:.3px; }
#as-app .chip2.admin { background:var(--rdl); color:var(--rd); }
#as-app .chip2.manager { background:var(--bll); color:var(--bl); }
#as-app .chip2.operator { background:var(--gnl); color:var(--gn); }
#as-app .chip2.ambassador { background:var(--pul); color:var(--pu); }
#as-app .tbl2 { width:100%; border-collapse:collapse; font-size:12.5px; }
#as-app .tbl2 th { text-align:left; font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--t3); font-weight:700; padding:9px 15px; border-bottom:1px solid var(--b); background:var(--head); }
#as-app .tbl2 td { padding:10px 15px; border-bottom:1px solid var(--b2); }
#as-app .tbl2 tr:last-child td { border-bottom:none; }
#as-app .tbl2 td.num, #as-app .tbl2 th.num { text-align:right; font-variant-numeric:tabular-nums; }
#as-app .rate-in { width:64px; padding:5px 8px; font-size:12.5px; border:1px solid var(--b); background:var(--bg); color:var(--t1); text-align:right; font-family:inherit; }
#as-app .stagechip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--b); background:var(--bg); font-size:12.5px; font-weight:600; margin:0 8px 8px 0; }
#as-app .stagechip .gr { color:var(--t3); cursor:grab; }
#as-app .cap { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:0; }
#as-app .cap>div { padding:9px 14px; border-bottom:1px solid var(--b2); font-size:12px; }
#as-app .cap .h { font-size:10px; letter-spacing:.4px; text-transform:uppercase; color:var(--t3); font-weight:700; background:var(--head); border-bottom:1px solid var(--b); }
#as-app .cap .ck { color:var(--gn); font-weight:700; }
#as-app .cap .no { color:var(--t3); }
#as-app .av2 { width:32px; height:32px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:11px; }
#as-app .hint2 { font-size:11.5px; color:var(--t3); padding:0 15px 12px; }
#as-app .note { background:var(--acl); border:1px solid var(--ac); padding:11px 13px; font-size:12px; color:var(--t2); line-height:1.5; }
#as-app .note b { color:var(--ach); }
#as-app .role2 { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; padding:1px 6px; background:var(--bll); color:var(--bl); }
@media (max-width:820px) {
    #as-app .setrail { width:56px; }
    #as-app .setlink span, #as-app .setgrp { display:none; }
    #as-app .setlink { justify-content:center; }
}