/* ═══════════════════════════════════════════════════════════════════════════ ActionStudio — Dynamic Dashboard tile canvas (WS4 Band A) Ported from _prototypes/as-dashboard-dynamic/index.html. Every class is prefixed `asd-` and every rule scoped under `#as-app #as-dash-canvas` so it cannot collide with the live #as-app shell CSS. Reuses the plugin theme tokens (--bg --s --sa --b --t1 --t2 --t3 --ac --acl --ach --gn --gnl --rd --rdl --bl --bll --pu --pul); the prototype-only tokens (--am --aml --b2 --head --zebra --serif --card-sh --card-sh-h --shadow --tacc) are declared here as dashboard-scoped fallbacks for both light and dark. Dark twin keys off the plugin's `#as-app.as-dark` hook (not body.dark). Squared UI (no border-radius), 13px base — matches the shell. ═══════════════════════════════════════════════════════════════════════════ */ /* ── dashboard-scoped token fallbacks (light) ── */ #as-app #as-dash-canvas{ --am:#b8860b; --aml:#fbf3df; /* AS-0127 (v0.10.238): kept in lockstep with actionstudio.css's :root/#as-app * light values — see the rationale comment there. A one-off recolor of a * single one of --zebra's six declaration sites is precisely how this token * drifts, so these move together or not at all. (These dashboard row lists * were never the ones that read pink: .asd-tile already declares * background:var(--s), so their base member was a real white surface. Same * token, correct pair — which is what proved the inbox's defect was the * MISSING base, not the token value.) */ --b2:#eeeae2; --head:#faf6ee; --zebra:#f9f6ef; --row-hover:#ece7de; --tacc:var(--b); --serif:Georgia,'Times New Roman',serif; --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); --shadow:0 8px 26px rgba(20,24,31,.14); position:relative; } /* ── dashboard-scoped token fallbacks (dark twin) ── */ #as-app.as-dark #as-dash-canvas{ --am:#d8b24a; --aml:#312812; --b2:#31353d; --head:#232830; --zebra:#262b33; --row-hover:#2f3540; --tacc:var(--b); --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); --shadow:0 8px 26px rgba(0,0,0,.5); } #as-app #as-dash-canvas svg{display:block} /* ═══ TOOLBAR — single Customize↔Save button (left) ═══ */ #as-app #as-dash-canvas .asd-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px} #as-app #as-dash-canvas .asd-toolbar .asd-grow{flex:1} #as-app #as-dash-canvas .asd-btn{height:32px;padding:0 13px;font:inherit;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--b);background:var(--s);color:var(--t2);cursor:pointer;transition:.12s} #as-app #as-dash-canvas .asd-btn:hover{background:var(--sa);color:var(--t1)} #as-app #as-dash-canvas .asd-btn.asd-p{background:var(--ac);color:#fff;border-color:var(--ac)} #as-app #as-dash-canvas .asd-btn.asd-p:hover{background:var(--ach);border-color:var(--ach)} #as-app #as-dash-canvas .asd-btn.asd-on{background:var(--t1);color:#fff;border-color:var(--t1)} #as-app.as-dark #as-dash-canvas .asd-btn.asd-on{background:var(--ac);border-color:var(--ac);color:#16181d} #as-app #as-dash-canvas .asd-btn.asd-sm{height:30px;padding:0 11px;font-size:11.5px} #as-app #as-dash-canvas .asd-btn svg{width:15px;height:15px} /* toolbar-doctrine-v2 (2026-08-16): Customize/Save is now the toolbar's only * control, icon-only, no text label — square instead of pill-shaped. */ #as-app #as-dash-canvas .asd-btn.asd-icon-only{width:30px;padding:0;justify-content:center;gap:0} /* ═══ GRID — conforming: uniform row height, dense packing, tiles span 1-2 ═══ */ #as-app #as-dash-canvas .asd-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:172px;gap:14px;grid-auto-flow:row dense} #as-app #as-dash-canvas .asd-tile{background:var(--s);border:1px solid var(--b);border-top:2px solid var(--tacc);display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:var(--card-sh);transition:box-shadow .14s ease} #as-app #as-dash-canvas .asd-tile:hover{box-shadow:var(--card-sh-h)} #as-app #as-dash-canvas.asd-edit .asd-tile:hover{box-shadow:var(--card-sh)} #as-app #as-dash-canvas .asd-tile.asd-s11{grid-column:span 1;grid-row:span 1} #as-app #as-dash-canvas .asd-tile.asd-s21{grid-column:span 2;grid-row:span 1} #as-app #as-dash-canvas .asd-tile.asd-s12{grid-column:span 1;grid-row:span 2} #as-app #as-dash-canvas .asd-tile.asd-s22{grid-column:span 2;grid-row:span 2} #as-app #as-dash-canvas .asd-thead{display:flex;align-items:center;gap:8px;padding:10px 13px 9px;border-bottom:1px solid var(--b2);background:var(--head)} #as-app #as-dash-canvas .asd-thead .asd-ic{color:var(--tacc);display:flex} #as-app #as-dash-canvas .asd-thead .asd-ic svg{width:15px;height:15px} #as-app #as-dash-canvas .asd-thead h3{font-size:12.5px;font-weight:700;flex:1;letter-spacing:.2px;margin:0} #as-app #as-dash-canvas .asd-thead .asd-rng{font-size:10px;font-weight:600;color:var(--t3);background:var(--sa);padding:1px 7px;border:1px solid var(--b)} #as-app #as-dash-canvas .asd-thead .asd-tk{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--t3);border:none;background:none;cursor:pointer} #as-app #as-dash-canvas .asd-thead .asd-tk:hover{color:var(--ac)} #as-app #as-dash-canvas .asd-thead .asd-tk svg{width:15px;height:15px} #as-app #as-dash-canvas .asd-tbody{padding:12px 13px;flex:1;overflow:auto} /* edit / customize mode */ #as-app #as-dash-canvas.asd-edit .asd-tile{border-style:dashed;border-color:var(--t3);cursor:grab} #as-app #as-dash-canvas.asd-edit .asd-tile.asd-drag{opacity:.4} #as-app #as-dash-canvas .asd-tedit{display:none;position:absolute;top:7px;right:9px;gap:3px;z-index:5} #as-app #as-dash-canvas.asd-edit .asd-tedit{display:flex} #as-app #as-dash-canvas.asd-edit .asd-thead .asd-tk, #as-app #as-dash-canvas.asd-edit .asd-thead .asd-rng, #as-app #as-dash-canvas.asd-edit .asd-thead .asd-albadge{visibility:hidden} #as-app #as-dash-canvas .asd-tedit button{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--s);border:1px solid var(--b);color:var(--t2);cursor:pointer} #as-app #as-dash-canvas .asd-tedit button:hover{color:var(--ac);border-color:var(--ac)} #as-app #as-dash-canvas .asd-tedit svg{width:13px;height:13px} #as-app #as-dash-canvas .asd-tgrip{position:absolute;top:9px;left:11px;color:var(--t3);display:none} #as-app #as-dash-canvas.asd-edit .asd-tgrip{display:block} #as-app #as-dash-canvas .asd-tgrip svg{width:15px;height:15px} #as-app #as-dash-canvas.asd-edit .asd-thead{padding-left:32px} #as-app #as-dash-canvas .asd-addghost{grid-column:span 1;grid-row:span 1;border:1px dashed var(--b);background:transparent;display:none;align-items:center;justify-content:center;gap:8px;color:var(--t3);font-weight:600;font-size:13px;cursor:pointer} #as-app #as-dash-canvas.asd-edit .asd-addghost{display:flex} #as-app #as-dash-canvas .asd-addghost:hover{border-color:var(--ac);color:var(--ac)} #as-app #as-dash-canvas .asd-addghost svg{width:18px;height:18px} /* KPI row */ #as-app #as-dash-canvas .asd-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 12px} #as-app #as-dash-canvas .asd-tile.asd-s21 .asd-kpis, #as-app #as-dash-canvas .asd-tile.asd-s22 .asd-kpis{grid-template-columns:repeat(4,1fr)} #as-app #as-dash-canvas .asd-kpi{padding:1px 0} #as-app #as-dash-canvas .asd-kpi .asd-n{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1} #as-app #as-dash-canvas .asd-kpi .asd-l{font-size:10.5px;color:var(--t3);margin-top:4px;text-transform:uppercase;letter-spacing:.4px} #as-app #as-dash-canvas .asd-kpi .asd-d{font-size:10.5px;font-weight:700} #as-app #as-dash-canvas .asd-kpi .asd-kb{display:flex;align-items:center;gap:7px;margin-top:3px} #as-app #as-dash-canvas .asd-spark{overflow:visible;flex:0 0 auto} #as-app #as-dash-canvas .asd-up{color:var(--gn)} #as-app #as-dash-canvas .asd-dn{color:var(--rd)} /* goal gauge */ #as-app #as-dash-canvas .asd-gauge{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1px} #as-app #as-dash-canvas .asd-gauge svg{width:154px;max-width:78%} #as-app #as-dash-canvas .asd-glab{font-size:11.5px;color:var(--t2);font-weight:600;margin-top:-6px} #as-app #as-dash-canvas .asd-gchip{font-size:10.5px;font-weight:700;color:var(--gn);background:var(--gnl);padding:2px 10px;margin-top:6px} /* mini calendar */ #as-app #as-dash-canvas .asd-cal-hd{font-weight:700;font-size:11.5px;text-align:center;color:var(--t1);flex:1} /* v0.10.55: real prev/next month nav — the tile's kebab "This month/Next" range menu never actually changed anything, so real arrows replace it. */ /* v0.10.72: mini-cal now fills whatever height its tile card has (see * miniCal()'s docblock in as-dashboard-canvas.js) — nav + day-of-week * header stay their natural height, .asd-cal-grid is the flexible piece * that stretches. */ #as-app #as-dash-canvas .asd-mcal-wrap{display:flex;flex-direction:column;height:100%} #as-app #as-dash-canvas .asd-mcal-nav{display:flex;align-items:center;margin-bottom:6px;flex:0 0 auto} #as-app #as-dash-canvas .asd-mcal-arrow{background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;line-height:1;padding:2px 6px;border-radius:3px} #as-app #as-dash-canvas .asd-mcal-arrow:hover{color:var(--t1);background:var(--sa)} #as-app #as-dash-canvas .asd-cal-dowrow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;flex:0 0 auto} #as-app #as-dash-canvas .asd-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center;flex:1 1 auto;min-height:0} #as-app #as-dash-canvas .asd-cal-dow{font-size:8.5px;color:var(--t3);font-weight:700;padding-bottom:3px} #as-app #as-dash-canvas .asd-cal-c{position:relative;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--t2);cursor:pointer;border-radius:3px} #as-app #as-dash-canvas .asd-cal-c:not(.asd-cal-x):hover{background:var(--sa)} #as-app #as-dash-canvas .asd-cal-today{background:var(--ac);color:#fff;font-weight:700} /* v0.10.54/v0.10.57: the actual hover rule above is .asd-cal-c:not(.asd-cal-x):hover — :not()'s specificity counts its argument, so that selector is 3 class-level selectors (.asd-cal-c + the .asd-cal-x inside :not() + :hover), not 2. v0.10.54's fix compared against a simplified .asd-cal-c:hover (2) and used .asd-cal-today:hover (also 2) to match it — still loses to the real 3-selector rule, so today's accent background still got swapped for hover gray while its white text stayed (unreadable). Matching .asd-cal-c.asd-cal-today:hover (3 class-level selectors, same as the real hover rule) and keeping it later in source order actually wins the tie this time. */ #as-app #as-dash-canvas .asd-cal-c.asd-cal-today:hover{background:var(--ac);filter:brightness(.92)} #as-app #as-dash-canvas .asd-cal-dot{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--gn)} #as-app #as-dash-canvas .asd-cal-today .asd-cal-dot{background:#fff} #as-app #as-dash-canvas .asd-cal-x{visibility:hidden} /* up-next agenda */ #as-app #as-dash-canvas .asd-agrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--b2);border-radius:3px} #as-app #as-dash-canvas .asd-agrow:last-child{border-bottom:none} #as-app #as-dash-canvas .asd-agrow:hover{background:var(--sa)} #as-app #as-dash-canvas .asd-agtime{font-size:10px;font-weight:700;color:var(--t2);border-left:2px solid var(--ac);padding-left:8px;min-width:56px;flex:0 0 auto} #as-app #as-dash-canvas .asd-agg{flex:1;min-width:0} #as-app #as-dash-canvas .asd-agg b{font-weight:600;font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #as-app #as-dash-canvas .asd-agg span{font-size:10.5px;color:var(--t3)} /* AS-0125 (v0.10.239, symptom 6): current/next marker on the Up next tile. * Same class names, same tokens and the same 'Now'/'Next' corner label as the * split view's own highlight (#as-app .as-event-card.as-evl-now/.as-evl-next, * actionstudio.css) — adopted, not a second primitive. Only the geometry * differs, because an .asd-agrow is a compact flush list row rather than a * padded card: the accent moves to a left border on the row and the label * sits against the row's right edge. --acl/--ac are declared in all four * palette blocks (:root + #as-app, light and .as-dark), so this is correct in * both themes; the label uses --ac on --acl, the same pairing the card rule * ships. The row already has border-radius:3px above, so the tinted band * keeps the list's existing shape. */ #as-app #as-dash-canvas .asd-agrow.as-evl-now, #as-app #as-dash-canvas .asd-agrow.as-evl-next{background:var(--acl);border-left:3px solid var(--ac);padding-left:7px;padding-right:34px;position:relative} #as-app #as-dash-canvas .asd-agrow.as-evl-now::before{content:'Now';position:absolute;top:50%;transform:translateY(-50%);right:6px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ac)} #as-app #as-dash-canvas .asd-agrow.as-evl-next::before{content:'Next';position:absolute;top:50%;transform:translateY(-50%);right:6px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ac)} /* AS-0125 (v0.10.239, symptom 3): caption under a Campaign performance ring * showing the fraction the percentage came from ("3 of 12"), or "No leads * yet" where there is no denominator and the ring reads "—" instead of a * false 0%. */ #as-app #as-dash-canvas .asd-ring .asd-rsub{font-size:9.5px;color:var(--t3);margin-top:1px} /* AS-0125 (v0.10.239, symptom 4): Campaign portfolio now ranks by * performance, so Paused is a quiet inline marker beside the campaign name * rather than the row's trailing status pill. * `display:inline` is load-bearing and must out-specify the row's generic * `.asd-trow .asd-g span{display:block}` (line ~194, specificity 2-2-1) — * this marker is a nested inside .asd-g's , so without the * override it inherits display:block and drops onto its own line under the * campaign name instead of sitting beside it. Hence the longer selector * (2-4-2) rather than a shorter one plus !important. Color comes from * .as-portfolio-status.is-paused (as-funnels.css) = var(--am). */ #as-app #as-dash-canvas .asd-trow .asd-g b span.asd-pf-paused{display:inline;margin-left:6px;font-size:10px;vertical-align:baseline} /* unread inbox */ #as-app #as-dash-canvas .asd-inrow{display:flex;align-items:center;gap:9px;padding:8px;margin:0 -8px;border-bottom:1px solid var(--b2)} #as-app #as-dash-canvas .asd-inrow:nth-child(even){background:var(--zebra)} #as-app #as-dash-canvas .asd-inrow:last-child{border-bottom:none} #as-app #as-dash-canvas .asd-inrow:hover{background:var(--row-hover)} #as-app #as-dash-canvas .asd-unread{width:7px;height:7px;border-radius:50%;background:var(--bl);flex:0 0 auto} #as-app #as-dash-canvas .asd-inav{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700} #as-app #as-dash-canvas .asd-ing{flex:1;min-width:0} #as-app #as-dash-canvas .asd-ing b{font-weight:600;font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #as-app #as-dash-canvas .asd-ing span{font-size:11px;color:var(--t3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #as-app #as-dash-canvas .asd-intime{font-size:10.5px;color:var(--t3);white-space:nowrap;flex:0 0 auto} /* v0.10.118: always-visible footer link, outside the scrollable row list * above it — previously there was no "View all" on this tile at all. */ #as-app #as-dash-canvas .asd-viewall-btn{display:block;width:100%;margin-top:6px;padding:7px 0;border:none;border-top:1px solid var(--b2);background:none;color:var(--ac);font-size:11px;font-weight:600;text-align:center;cursor:pointer} #as-app #as-dash-canvas .asd-viewall-btn:hover{background:var(--sa)} /* list rows in tiles */ #as-app #as-dash-canvas .asd-trow{display:flex;align-items:center;gap:9px;padding:8px 8px;margin:0 -8px;border-bottom:1px solid var(--b2);font-size:12.5px} #as-app #as-dash-canvas .asd-trow:nth-child(even){background:var(--zebra)} #as-app #as-dash-canvas .asd-trow:last-child{border-bottom:none} #as-app #as-dash-canvas .asd-trow[data-att-type]:hover{background:var(--row-hover)} #as-app #as-dash-canvas .asd-trow .asd-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto} #as-app #as-dash-canvas .asd-trow .asd-g{flex:1;min-width:0} #as-app #as-dash-canvas .asd-trow .asd-g b{font-weight:600} #as-app #as-dash-canvas .asd-trow .asd-g span{color:var(--t3);font-size:11px;display:block} #as-app #as-dash-canvas .asd-trow .asd-r{font-size:11px;font-weight:700;color:var(--t2);white-space:nowrap} /* Team workload tile — labeled bar list (v0.10.265, mobile-audit follow- * through). Sits in the same .asd-trow row (align-items:center already set * above) between the name (.asd-g) and the count (.asd-r); bar fill width * is set inline per-row (percent of the busiest teammate). */ #as-app #as-dash-canvas .asd-wl-row .asd-g{flex:0 0 auto;width:96px;min-width:0} #as-app #as-dash-canvas .asd-wl-row .asd-g b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #as-app #as-dash-canvas .asd-wl-bar{flex:1;height:6px;background:var(--sa);border-radius:3px;overflow:hidden;min-width:0} #as-app #as-dash-canvas .asd-wl-bar i{display:block;height:100%;border-radius:3px} #as-app #as-dash-canvas .asd-chk{width:15px;height:15px;border:1.5px solid var(--t3);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:transparent} #as-app #as-dash-canvas .asd-chk.asd-on{background:var(--gn);border-color:var(--gn);color:#fff} #as-app #as-dash-canvas .asd-chk svg{width:11px;height:11px} #as-app #as-dash-canvas .asd-trow.asd-done .asd-g b{text-decoration:line-through;color:var(--t3)} #as-app #as-dash-canvas .asd-flag{font-size:9.5px;font-weight:700;padding:1px 6px;text-transform:uppercase} #as-app #as-dash-canvas .asd-flag.asd-warn{background:var(--rdl);color:var(--rd)} #as-app #as-dash-canvas .asd-flag.asd-ok{background:var(--gnl);color:var(--gn)} #as-app #as-dash-canvas .asd-flag.asd-mut{background:var(--sa);color:var(--t3)} /* rings */ #as-app #as-dash-canvas .asd-rings{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-around;align-items:center;height:100%} #as-app #as-dash-canvas .asd-ring{text-align:center} #as-app #as-dash-canvas .asd-ring .asd-lab{font-size:10.5px;color:var(--t3);margin-top:5px;font-weight:600} /* mini area chart */ #as-app #as-dash-canvas .asd-area{width:100%;height:100%} /* ═══ Pipeline Map — clear stage columns, headers across the top ═══ */ #as-app #as-dash-canvas .asd-pmap{display:flex;height:100%;font-size:11px} #as-app #as-dash-canvas .asd-pcol{flex:1;min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--b2)} #as-app #as-dash-canvas .asd-pcol:first-child{border-left:none} #as-app #as-dash-canvas .asd-pchd{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--t2);padding:1px 8px 6px;border-bottom:2px solid var(--b);display:flex;align-items:center;gap:5px;position:sticky;top:0;background:var(--s);z-index:1} #as-app #as-dash-canvas .asd-pchd .asd-pcn{margin-left:auto;color:var(--t3);font-size:9px;font-weight:700} #as-app #as-dash-canvas .asd-pcbody{flex:1;overflow:auto;padding:6px 5px;display:flex;flex-direction:column;gap:5px} #as-app #as-dash-canvas .asd-pnode{display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid var(--b);background:var(--bg);text-align:left;width:100%;cursor:pointer;transition:.1s} #as-app #as-dash-canvas .asd-pnode:hover{border-color:var(--ac);background:var(--acl)} #as-app #as-dash-canvas .asd-pdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto} #as-app #as-dash-canvas .asd-pnm{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #as-app #as-dash-canvas .asd-pv{color:var(--t3);font-weight:700;font-size:10px;white-space:nowrap} #as-app #as-dash-canvas .asd-pempty{color:var(--t3);padding:5px 6px;font-size:10px} /* alert badge in map header → opens tray */ #as-app #as-dash-canvas .asd-albadge{display:flex;align-items:center;gap:4px;height:22px;padding:0 8px;background:var(--rdl);color:var(--rd);font-size:10px;font-weight:800;border:1px solid transparent;cursor:pointer} #as-app #as-dash-canvas .asd-albadge:hover{border-color:var(--rd)} #as-app #as-dash-canvas .asd-albadge svg{width:12px;height:12px} /* ═══ OVERLAYS: first-run, gallery, menus, tour ═══ */ #as-app #as-dash-canvas .asd-scrim{position:fixed;inset:0;background:rgba(15,18,23,.5);z-index:9200;display:none;align-items:center;justify-content:center;padding:24px} #as-app #as-dash-canvas .asd-scrim.asd-on{display:flex} #as-app #as-dash-canvas .asd-setup{background:var(--s);border:1px solid var(--b);width:min(720px,96vw);max-height:92vh;overflow:auto;box-shadow:var(--shadow)} #as-app #as-dash-canvas .asd-setup .asd-sh{padding:22px 26px 6px} #as-app #as-dash-canvas .asd-setup .asd-sh h2{font-family:var(--serif);font-size:22px;font-weight:700;margin:0} #as-app #as-dash-canvas .asd-setup .asd-sh p{font-size:13px;color:var(--t2);margin:5px 0 0;max-width:52ch;line-height:1.5} #as-app #as-dash-canvas .asd-setup .asd-body{padding:16px 26px 24px} #as-app #as-dash-canvas .asd-stitle{font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--t3);font-weight:700;margin:14px 0 9px} #as-app #as-dash-canvas .asd-presets{display:grid;grid-template-columns:1fr 1fr;gap:12px} #as-app #as-dash-canvas .asd-pcard{border:1px solid var(--b);background:var(--bg);padding:15px 16px;text-align:left;transition:.12s;cursor:pointer} #as-app #as-dash-canvas .asd-pcard:hover{border-color:var(--ac);box-shadow:var(--shadow)} #as-app #as-dash-canvas .asd-pcard .asd-pi{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--acl);color:var(--ach);margin-bottom:10px} #as-app #as-dash-canvas .asd-pcard .asd-pi svg{width:19px;height:19px} #as-app #as-dash-canvas .asd-pcard h4{font-size:14px;font-weight:700;margin:0} #as-app #as-dash-canvas .asd-pcard p{font-size:11.5px;color:var(--t3);margin:3px 0 0;line-height:1.45} #as-app #as-dash-canvas .asd-pcard .asd-tl{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;padding:0;list-style:none} #as-app #as-dash-canvas .asd-pcard .asd-tl span{font-size:9.5px;font-weight:600;color:var(--t2);background:var(--s);border:1px solid var(--b);padding:2px 6px} #as-app #as-dash-canvas .asd-orrow{display:flex;align-items:center;gap:12px;margin:16px 0 4px;color:var(--t3);font-size:11px;font-weight:700;letter-spacing:.5px} #as-app #as-dash-canvas .asd-orrow::before, #as-app #as-dash-canvas .asd-orrow::after{content:"";height:1px;background:var(--b);flex:1} #as-app #as-dash-canvas .asd-byo{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--b);background:var(--bg);padding:13px 16px;cursor:pointer;width:100%;text-align:left} #as-app #as-dash-canvas .asd-byo h4{font-size:13.5px;font-weight:700;margin:0} #as-app #as-dash-canvas .asd-byo p{font-size:11.5px;color:var(--t3);margin:2px 0 0} #as-app #as-dash-canvas .asd-byo svg{width:18px;height:18px} #as-app #as-dash-canvas .asd-tourchk{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12px;color:var(--t2);cursor:pointer} #as-app #as-dash-canvas .asd-tourchk .asd-box{width:16px;height:16px;border:1.5px solid var(--t3);display:flex;align-items:center;justify-content:center;color:transparent} #as-app #as-dash-canvas .asd-tourchk.asd-on .asd-box{background:var(--ac);border-color:var(--ac);color:#fff} #as-app #as-dash-canvas .asd-tourchk .asd-box svg{width:11px;height:11px} /* gallery */ #as-app #as-dash-canvas .asd-gallery{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px} #as-app #as-dash-canvas .asd-gcard{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--b);background:var(--bg);padding:11px 12px;text-align:left;transition:.12s;cursor:pointer} #as-app #as-dash-canvas .asd-gcard:hover{border-color:var(--ac)} #as-app #as-dash-canvas .asd-gcard.asd-sel{border-color:var(--ac);background:var(--acl)} #as-app #as-dash-canvas .asd-gcard .asd-gi{color:var(--t3);flex:0 0 auto} #as-app #as-dash-canvas .asd-gcard.asd-sel .asd-gi{color:var(--ach)} #as-app #as-dash-canvas .asd-gcard .asd-gi svg{width:17px;height:17px} #as-app #as-dash-canvas .asd-gcard h4{font-size:12.5px;font-weight:700;margin:0} #as-app #as-dash-canvas .asd-gcard p{font-size:11px;color:var(--t3);margin:2px 0 0;line-height:1.4} #as-app #as-dash-canvas .asd-gcard .asd-cx{margin-left:auto;width:17px;height:17px;border:1.5px solid var(--t3);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:transparent} #as-app #as-dash-canvas .asd-gcard.asd-sel .asd-cx{background:var(--ac);border-color:var(--ac);color:#fff} #as-app #as-dash-canvas .asd-gcard .asd-cx svg{width:11px;height:11px} #as-app #as-dash-canvas .asd-setupfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px} /* dropdown menu */ #as-app #as-dash-canvas .asd-menu{position:fixed;background:var(--s);border:1px solid var(--b);box-shadow:var(--shadow);z-index:9300;min-width:190px;padding:5px 0} #as-app #as-dash-canvas .asd-menu .asd-mh{font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);font-weight:700;padding:8px 13px 4px} #as-app #as-dash-canvas .asd-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 13px;font:inherit;font-size:12.5px;color:var(--t1);background:none;border:none;cursor:pointer} #as-app #as-dash-canvas .asd-menu button:hover{background:var(--acl);color:var(--ach)} #as-app #as-dash-canvas .asd-menu button svg{width:15px;height:15px;color:var(--t3)} #as-app #as-dash-canvas .asd-menu button:hover svg{color:var(--ach)} #as-app #as-dash-canvas .asd-menu .asd-sepd{height:1px;background:var(--b);margin:5px 0} #as-app #as-dash-canvas .asd-menu button.asd-danger:hover{background:var(--rdl);color:var(--rd)} #as-app #as-dash-canvas .asd-menu button.asd-danger:hover svg{color:var(--rd)} #as-app #as-dash-canvas .asd-menu .asd-seg2{display:flex;gap:4px;padding:6px 13px} #as-app #as-dash-canvas .asd-menu .asd-seg2 button{border:1px solid var(--b);justify-content:center;padding:5px 0;flex:1;font-weight:700;font-size:11px} #as-app #as-dash-canvas .asd-menu .asd-seg2 button.asd-on{background:var(--ac);color:#fff;border-color:var(--ac)} /* TOUR coach-marks */ #as-app #as-dash-canvas .asd-tourscrim{position:fixed;inset:0;background:rgba(15,18,23,.42);z-index:9400;display:none} #as-app #as-dash-canvas .asd-tourscrim.asd-on{display:block} #as-app #as-dash-canvas .asd-coach{position:fixed;z-index:9402;background:var(--s);border:1px solid var(--b);box-shadow:var(--shadow);width:270px;padding:14px 15px;display:none} #as-app #as-dash-canvas .asd-coach.asd-on{display:block} #as-app #as-dash-canvas .asd-coach .asd-step{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--ac);font-weight:700} #as-app #as-dash-canvas .asd-coach h4{font-size:14px;font-weight:700;margin:4px 0 5px} #as-app #as-dash-canvas .asd-coach p{font-size:12px;color:var(--t2);line-height:1.5;margin:0} #as-app #as-dash-canvas .asd-coach .asd-cf{display:flex;align-items:center;justify-content:space-between;margin-top:13px} #as-app #as-dash-canvas .asd-coach .asd-dots{display:flex;gap:5px} #as-app #as-dash-canvas .asd-coach .asd-dots i{width:6px;height:6px;border-radius:50%;background:var(--b)} #as-app #as-dash-canvas .asd-coach .asd-dots i.asd-on{background:var(--ac)} #as-app #as-dash-canvas .asd-coach .asd-cf .asd-r{display:flex;gap:6px} /* tour target highlight — applied to a live control anywhere in the app */ #as-app .asd-tour-target{position:relative;z-index:9401;outline:3px solid var(--ac);outline-offset:3px;box-shadow:0 0 0 9999px rgba(15,18,23,.42)} /* ═══ right drawer — record + needs-attention tray ═══ */ #as-app #as-dash-canvas .asd-scrim2{position:fixed;inset:0;background:rgba(15,18,23,.34);z-index:9210;opacity:0;pointer-events:none;transition:opacity .18s} #as-app #as-dash-canvas .asd-scrim2.asd-on{opacity:1;pointer-events:auto} #as-app #as-dash-canvas .asd-drawer{position:fixed;top:0;right:0;bottom:0;width:388px;max-width:92vw;background:var(--s);border-left:1px solid var(--b);z-index:9211;transform:translateX(100%);transition:transform .2s ease;display:flex;flex-direction:column} #as-app #as-dash-canvas .asd-drawer.asd-on{transform:none} #as-app #as-dash-canvas .asd-dhd{display:flex;align-items:flex-start;gap:11px;padding:16px 18px;border-bottom:1px solid var(--b)} #as-app #as-dash-canvas .asd-dhd .asd-dav{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff} #as-app #as-dash-canvas .asd-dhd .asd-dnm{font-family:var(--serif);font-size:17px;font-weight:700} #as-app #as-dash-canvas .asd-dhd .asd-dsub{font-size:12px;color:var(--t3);margin-top:1px} #as-app #as-dash-canvas .asd-dhd .asd-dpill{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;padding:2px 8px;margin-top:7px;background:var(--sa);border:1px solid var(--b);color:var(--t2)} #as-app #as-dash-canvas .asd-dhd .asd-dpill .asd-dot{width:7px;height:7px;border-radius:50%} #as-app #as-dash-canvas .asd-dhd .asd-dx{margin-left:auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--t3);border:1px solid var(--b);background:none;cursor:pointer} #as-app #as-dash-canvas .asd-dhd .asd-dx:hover{color:var(--t1)} #as-app #as-dash-canvas .asd-dhd .asd-dx svg{width:15px;height:15px} #as-app #as-dash-canvas .asd-dbody{flex:1;overflow:auto;padding:16px 18px} #as-app #as-dash-canvas .asd-dsec{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);font-weight:700;margin:18px 0 8px} #as-app #as-dash-canvas .asd-drow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--b2);font-size:12.5px} #as-app #as-dash-canvas .asd-drow span{color:var(--t3)} #as-app #as-dash-canvas .asd-drow b{font-weight:600} #as-app #as-dash-canvas .asd-suggest{background:var(--acl);border:1px solid var(--ac);padding:12px 13px} #as-app #as-dash-canvas .asd-suggest .asd-sh{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--ach);text-transform:uppercase;letter-spacing:.5px} #as-app #as-dash-canvas .asd-suggest .asd-sh svg{width:14px;height:14px} #as-app #as-dash-canvas .asd-suggest .asd-st{font-size:13px;font-weight:600;margin:7px 0 3px} #as-app #as-dash-canvas .asd-suggest .asd-ss{font-size:11.5px;color:var(--t2);line-height:1.45} #as-app #as-dash-canvas .asd-suggest .asd-sr{display:flex;gap:7px;margin-top:11px} #as-app #as-dash-canvas .asd-suggest .asd-sr .asd-btn{height:29px} #as-app #as-dash-canvas .asd-trayrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--b2)} #as-app #as-dash-canvas .asd-trayrow .asd-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto} #as-app #as-dash-canvas .asd-trayrow .asd-g{flex:1;min-width:0} #as-app #as-dash-canvas .asd-trayrow .asd-g b{font-weight:600;font-size:13px} #as-app #as-dash-canvas .asd-trayrow .asd-g span{display:block;font-size:11px;color:var(--t3);margin-top:1px} #as-app #as-dash-canvas .asd-trayact{display:flex;gap:6px;flex:0 0 auto} #as-app #as-dash-canvas .asd-trayact .asd-btn{height:28px;padding:0 10px;font-size:11px} #as-app #as-dash-canvas .asd-atl{list-style:none;margin-left:6px;padding-left:16px;border-left:1px solid var(--b)} #as-app #as-dash-canvas .asd-atl li{position:relative;padding:0 0 12px} #as-app #as-dash-canvas .asd-atl li::before{content:"";position:absolute;left:-20px;top:3px;width:8px;height:8px;border-radius:50%;background:var(--t3)} #as-app #as-dash-canvas .asd-atl li.asd-ac::before{background:var(--ac)} #as-app #as-dash-canvas .asd-atl b{font-size:12px;font-weight:600} #as-app #as-dash-canvas .asd-atl span{display:block;font-size:10.5px;color:var(--t3);margin-top:1px} /* toast */ #as-app #as-dash-canvas .asd-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--t1);color:var(--bg);font-size:12px;font-weight:600;padding:9px 16px;z-index:9500;opacity:0;transition:.2s;pointer-events:none} #as-app #as-dash-canvas .asd-toast.asd-on{opacity:1;transform:translateX(-50%) translateY(0)} @media(max-width:1080px){ #as-app #as-dash-canvas .asd-grid{grid-template-columns:1fr 1fr;grid-auto-rows:158px} #as-app #as-dash-canvas .asd-tile.asd-s21, #as-app #as-dash-canvas .asd-tile.asd-s22{grid-column:span 2} #as-app #as-dash-canvas .asd-presets{grid-template-columns:1fr} #as-app #as-dash-canvas .asd-gallery{grid-template-columns:1fr} #as-app #as-dash-canvas .asd-drawer{width:340px} } /* v0.10.44: true-mobile override — every tile defaults to full width * regardless of its own stored size. CSS-only; doesn't touch LAYOUT/ * persisted sizes, so it reverts automatically above the breakpoint. * v0.10.72: the original rule also forced a flat double-height (span 2 on * a fixed grid-auto-rows track) on every tile — for a short-content tile * (e.g. Inbox with nothing unread, a couple of list rows) that meant a * card roughly 2x taller than its own content needed, reading as a big * dead gap before the next card. Rows are auto-sized instead so each * card's height follows its real content, with min-height as a floor so * a near-empty tile still reads as a deliberate card, not a sliver. * v0.10.265 (mobile-audit follow-through): raised from max-width:480px to * 768px, matching the breakpoint every other AS view standardized on this * week (Split/Calendar/Tasks — see CHANGELOG v0.10.257/260). 480px left a * real gap: any phone/viewport between 481-767px (larger Android phones, * a phone in a resized window, the 601-767 range several test devices * actually reported) still hit the 1080px block's fixed 2-column/158px-row * grid — tiles squeezed exactly like Calendar List's `.as-evl-side`/ * `.as-evl-main` did before its own 768px fix. */ @media(max-width:768px){ #as-app #as-dash-canvas .asd-grid{grid-template-columns:1fr;grid-auto-rows:auto} #as-app #as-dash-canvas .asd-tile{grid-column:span 1;grid-row:span 1;min-height:158px} /* AS-0169: the rule above (#as-app #as-dash-canvas .asd-tile — 2 IDs + 1 * class, specificity 2-1-0) was never actually beating the base tile-size * rules (#as-app #as-dash-canvas .asd-tile.asd-s12 etc., line ~63-66 — * 2 IDs + 2 classes, specificity 2-2-0). Those rules' grid-row:span 2 * (asd-s12/asd-s22) and grid-column:span 2 (asd-s21/asd-s22) won at every * viewport, so the v0.10.72/v0.10.265 mobile flatten never applied to any * sized tile — producing the ~600px dead space below short tile content * (My Tasks/asd-s12, Needs attention/asd-s21 or s22) that this ticket * reported. Repeating the size-class selectors here matches the base * rules' specificity exactly (2-2-0 vs 2-2-0); the tie then resolves by * source order, and this block comes later in the cascade, so it wins — * same technique used for .asd-cal-c.asd-cal-today:hover above and * preferred over !important per this file's existing doctrine (see the * asd-pf-paused comment, line ~178). */ #as-app #as-dash-canvas .asd-tile.asd-s11, #as-app #as-dash-canvas .asd-tile.asd-s21, #as-app #as-dash-canvas .asd-tile.asd-s12, #as-app #as-dash-canvas .asd-tile.asd-s22{grid-column:span 1;grid-row:span 1} } /* ═══ AS-0226: mobile feed (as-dashboard-canvas.js renderMobileFeed()) ═══ * Ported verbatim from the approved mobile-shell prototype * (_prototypes/actionstudio__as-mobile-shell-v1.html, Dash.screen's own *