/* ═══════════════════════════════════════════════════════════════════════════
   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;
  --b2:#eeeae2; --head:#faf6ee; --zebra:#faf8f4; --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:#20242b; --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)}
/* 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(--sa)}
#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}

/* 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(--sa)}
#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}
#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 480px.
 * 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. */
@media(max-width:480px){
  #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}
}