/* as-projects.css — Project detail styles (v0.1.45) */

/* v0.9.40: full-page project detail. Overrides the shared .as-detail-panel
   fixed 480px drawer (actionstudio.css) into an in-flow full-page main view —
   scoped to .as-detail-page so contacts/companies/deals drawers are untouched. */
#as-app .as-detail-panel.as-detail-page {
    position: static; top: auto; right: auto; bottom: auto; width: auto;
    background: transparent; border-left: none; box-shadow: none;
    overflow: visible; transition: none; z-index: auto;
    padding: 20px 28px 80px;
}
/* Content column — generous, breathes at full width, capped for readability. */
#as-app #as-project-detail-body { max-width: 1180px; }
@media (max-width: 768px) {
    #as-app .as-detail-panel.as-detail-page { padding: 14px 12px 60px; }
}

/* Top-bar back control (SS chrome). v0.9.41: bare chevron — no border/box. */
#as-app .as-topback { width: 26px; height: 32px; border: none; background: none; color: var(--t2); font-size: 24px; line-height: 1; display: grid; place-items: center; padding: 0; cursor: pointer; }
#as-app .as-topback:hover { color: var(--ac); }

/* v0.9.41: tab-strip action controls (+ menu and settings cog), right-aligned. */
#as-app .tabs.as-pd-tabs { align-items: center; }
#as-app .as-pd-tabspacer { flex: 1 1 auto; }
#as-app .as-pd-menuwrap { position: relative; display: inline-flex; align-items: center; }
#as-app .as-pd-tabbtn { width: 28px; height: 28px; border: 1px solid var(--b); background: var(--s); color: var(--t2); font-size: 15px; line-height: 1; display: grid; place-items: center; padding: 0; border-radius: var(--rs); cursor: pointer; margin-left: 4px; }
#as-app .as-pd-tabbtn:hover { border-color: var(--ac); color: var(--ac); }
/* v0.9.42: the add (+) button is the accent one; the cog stays neutral. */
#as-app .as-pd-tabbtn.as-pd-add { background: var(--ac); border-color: var(--ac); color: #fff; font-size: 18px; }
#as-app .as-pd-tabbtn.as-pd-add:hover { background: var(--ach); border-color: var(--ach); color: #fff; }
#as-app .as-pd-menuwrap .as-menu { min-width: 234px; }
#as-app .as-pd-menuwrap .as-menu.as-pd-addmenu { min-width: 168px; }
/* v0.9.42: icon + label layout for dropdown action rows (info rows use .as-cp-*). */
#as-app .as-pd-menuwrap .as-menu-item { display: flex; align-items: center; gap: 9px; }
#as-app .as-mi-ico { color: var(--t3); display: inline-flex; flex: none; }
#as-app .as-mi-ico svg { width: 15px; height: 15px; fill: currentColor; display: block; }
#as-app .as-pd-menuwrap .as-menu-item:hover { color: var(--ac); }
#as-app .as-pd-menuwrap .as-menu-item:hover .as-mi-ico { color: var(--ac); }

/* Detail body container */
#as-app #as-project-detail-body { padding: 5px 10px; }

/* Header — v0.9.40: prototype .phd (eyebrow + Fraunces title + overall ring).
   No colored left-border (superseded by the eyebrow/ring chrome). */
#as-app .as-pd-header { margin: 10px; padding: 4px 6px 16px; background: transparent; border-bottom: 1px solid var(--b); }
#as-app .as-phd { display: flex; gap: 18px; align-items: center; }
#as-app .as-phd .info { flex: 1; min-width: 0; }
#as-app .as-phd .as-co { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ac); }
#as-app .as-phd h3.as-phd-title { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 600; margin: 4px 0 7px; line-height: 1.12; }
#as-app .as-phd .as-phd-meta { color: var(--t2); font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#as-app .as-phd .as-phd-prg { text-align: center; flex: none; }
#as-app .as-phd .as-phd-prg small { display: block; font-size: 9px; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
#as-app .as-ring-txt { fill: var(--t1); font-family: 'Fraunces', Georgia, serif; font-weight: 600; }

/* ═══ v0.9.40 — Tasks tab: Milestone → Checklist → Task nesting ═══ */
/* v0.9.41: settings-cog menu read-only info rows (reused inside .as-menu). */
#as-app .as-cp-h { font-weight: 700; font-size: 12px; }
#as-app .as-cp-row { font-size: 12px; color: var(--t2); }
#as-app .as-cp-row b { color: var(--t1); }
#as-app .as-cp-opplink { color: var(--bl); font-weight: 600; cursor: pointer; }
#as-app .as-cp-opplink:hover { text-decoration: underline; }
#as-app .as-cp-div { height: 1px; background: var(--b); margin: 6px 0; }

/* v0.9.82: "View board ↗" button in the project header meta row — the
 * published client board, one click away instead of buried in the description
 * paragraph as a bare URL. */
#as-app .as-pd-boardbtn { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 11px; font-weight: 600; color: var(--ac); border: 1px solid var(--ac); text-decoration: none; }
#as-app .as-pd-boardbtn:hover { background: var(--ac); color: #fff; }
#as-app .as-phd-meta a { color: var(--ac); }

/* v0.9.81: task owner tag (write-in name) + comment-count badge — small, muted,
 * inline after the task title. Squared, no-radius per house style. */
#as-app .as-cl-owner { display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: 10px; font-weight: 600; color: var(--t2); background: var(--sa); border: 1px solid var(--b); vertical-align: middle; }
#as-app .as-cl-cbadge { display: inline-block; margin-left: 6px; font-size: 10.5px; color: var(--t3); vertical-align: middle; }

/* v0.9.80: "Edit in Wizard" button in the project-detail tab strip */
#as-app .as-pd-tabbtn.as-pd-wizard { width: auto; padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--ac); border: 1px solid var(--ac); background: transparent; margin-right: 8px; white-space: nowrap; }
#as-app .as-pd-tabbtn.as-pd-wizard:hover { background: var(--ac); color: #fff; }

/* v0.9.79: task-tree grouping toggle (Milestone / Category) */
#as-app .as-pd-groupby { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
#as-app .as-pd-groupby-lbl { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
#as-app .as-pd-gbtn { font-size: 11px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--b); background: var(--s); color: var(--t2); cursor: pointer; }
#as-app .as-pd-gbtn.on { background: var(--ac); border-color: var(--ac); color: #fff; }

/* Milestone group — numbered chip + ring, no left-border motif */
#as-app .as-cl-ms { border: 1px solid var(--b); background: var(--s); margin-bottom: 12px; }
#as-app .as-cl-msh { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
#as-app .as-cl-msno { width: 28px; height: 28px; background: var(--ac); color: #fff; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 14px; display: grid; place-items: center; flex: none; }
#as-app .as-cl-ms.done .as-cl-msno { background: var(--gn); }
#as-app .as-cl-msh .htxt { flex: 1; min-width: 0; }
#as-app .as-cl-msh .htxt .tt { font-size: 14px; font-weight: 600; }
#as-app .as-cl-msh .htxt .ss { font-size: 11px; color: var(--t3); margin-top: 1px; }
#as-app .as-cl-msbody { padding: 0 14px 10px; }

/* Checklist — light strip header, no left border */
#as-app .as-cl { margin-top: 4px; }
#as-app .as-cl-h { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--sa); }
#as-app .as-cl-cbx { width: 15px; height: 15px; border: 1.5px solid var(--t3); display: grid; place-items: center; color: transparent; font-size: 10px; font-weight: 800; flex: none; }
#as-app .as-cl.full .as-cl-cbx { background: var(--gn); border-color: var(--gn); color: #fff; }
#as-app .as-cl-h .ct { font-weight: 600; font-size: 12px; flex: 1; min-width: 0; }
#as-app .as-cl.full .as-cl-h .ct { color: var(--t3); }
#as-app .as-cl-h .prog { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--t3); flex: none; }
#as-app .as-cl-mini { width: 52px; height: 4px; background: var(--b); position: relative; overflow: hidden; }
#as-app .as-cl-mini > i { position: absolute; inset: 0 auto 0 0; background: var(--gn); }
#as-app .as-cl-acts { display: flex; gap: 4px; flex: none; }
#as-app .as-cl-acts button { border: none; background: none; color: var(--t3); font-size: 12px; line-height: 1; cursor: pointer; padding: 2px 3px; }
#as-app .as-cl-acts button:hover { color: var(--ac); }
#as-app .as-cl-acts button.del:hover { color: var(--rd); }
#as-app .as-cl-direct { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--t3); padding: 10px 10px 4px; font-weight: 600; }

/* Task row inside the tree */
#as-app .as-cl-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-bottom: 1px solid var(--b); cursor: pointer; }
#as-app .as-cl-row:last-child { border-bottom: none; }
#as-app .as-cl-row:hover { background: var(--sa); }
#as-app .as-cl-ck { width: 16px; height: 16px; border: 1.5px solid var(--t3); display: grid; place-items: center; flex: none; background: var(--inp-bg); color: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
#as-app .as-cl-ck.on { background: var(--gn); border-color: var(--gn); color: #fff; }
#as-app .as-cl-row.done .as-cl-tt { color: var(--t3); text-decoration: line-through; }
#as-app .as-cl-tt { flex: 1; font-size: 12.5px; min-width: 0; }
#as-app .as-cl-tm { display: flex; gap: 7px; align-items: center; flex: none; }

/* Project-scope bucket (no milestone) */
#as-app .as-cl-bucket { border: 1px solid var(--b); background: var(--s); margin-bottom: 12px; }
#as-app .as-cl-bkh { display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-weight: 600; font-size: 12px; }
#as-app .as-cl-bkh .bi { width: 22px; height: 22px; background: var(--sa); display: grid; place-items: center; font-size: 12px; flex: none; }

/* Inline add-checklist form */
#as-app .as-cl-addform { background: var(--sa); padding: 10px; margin-bottom: 12px; }
#as-app .as-cl-addform input, #as-app .as-cl-addform select { width: 100%; padding: 7px 9px; border: 1px solid var(--b); border-radius: var(--rs); font-family: inherit; font-size: 12px; background: var(--inp-bg); color: var(--t1); margin-bottom: 8px; }
#as-app .as-cl-addform .as-cl-addbtns { display: flex; gap: 6px; justify-content: flex-end; }

/* Tabs */
#as-app .tabs.as-pd-tabs { padding: 5px; margin: 0; border-bottom: 1px solid var(--b); gap: 0; }
#as-app .as-pd-tabs .tab { padding: 10px 14px; font-size: 12px; }

/* Tab panels */
#as-app .as-pd-panel { margin: 10px 0; padding: 5px 10px; min-height: 80px; }

/* Task rows inside project detail */
.as-pd-panel .trow { padding: 8px 0; }
.as-pd-panel .crow { padding: 8px 0; }

/* Action buttons in project detail */
.as-pd-panel .btn { font-size: 11px; padding: 5px 12px; }

/* Documents panel inside project */
.as-pd-panel .as-docs-panel { padding: 4px 0; }
.as-pd-panel .as-docs-add { margin-bottom: 12px; }
.as-pd-panel .as-docs-add .btn { font-size: 11px; padding: 6px 14px; }

/* Notes panel inside project */
.as-pd-panel .as-notes-timeline { padding: 4px 0; }

/* Milestone timeline */
.as-milestone-timeline { padding-left: 16px; border-left: 2px solid var(--b); }
.as-milestone-item { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.as-milestone-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; position: relative; left: -22px; margin-right: -12px; }
.as-milestone-past .as-milestone-dot { opacity: .5; }
.as-milestone-past { opacity: .65; }

/* Sync badges */
.as-sync-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 8px; cursor: pointer; }
.as-sync-on { background: color-mix(in srgb, var(--gn) 15%, transparent); color: var(--gn); }
.as-sync-pending { background: color-mix(in srgb, var(--ac) 15%, transparent); color: var(--ac); }
.as-sync-off { background: var(--sa); color: var(--t3); }
.as-sync-badge:hover { opacity: .8; }

/* ═══ Drive View ═══ */
#as-app #as-v-drive { height: calc(100vh - 80px); display: flex; flex-direction: column; }
#as-app .as-drive-toolbar { display: flex; gap: 8px; align-items: center; padding: 12px 0; flex-shrink: 0; }
#as-app .as-drive-toolbar input { flex: 1; max-width: 400px; padding: 8px 14px; font-size: 13px; }
#as-app .as-drive-body { flex: 1; overflow-y: auto; }
#as-app .as-drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 4px 0; }
#as-app .as-drive-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--sa); cursor: pointer; transition: background .15s; border-left: 3px solid transparent; }
#as-app .as-drive-item:hover { background: var(--bg); border-left-color: var(--ac); }
#as-app .as-drive-item-icon { flex-shrink: 0; color: var(--t3); }
#as-app .as-drive-item-icon svg { display: block; }
#as-app .as-drive-item-info { flex: 1; min-width: 0; }
#as-app .as-drive-item-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#as-app .as-drive-item-meta { font-size: 11px; color: var(--t3); margin-top: 2px; }
#as-app .as-drive-empty { text-align: center; padding: 40px 20px; color: var(--t3); }
#as-app .as-drive-empty svg { margin-bottom: 8px; opacity: .5; }

/* v0.1.59: Create new tray */
#as-app .as-drive-create-tray { display: flex; align-items: center; gap: 6px; padding: 8px 0; flex-shrink: 0; }
#as-app .as-drive-create-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; 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: 500; color: var(--t3); text-decoration: none; border: 1px solid var(--b); background: var(--s); transition: all .15s; font-family: inherit; cursor: pointer; }
#as-app .as-drive-create-btn:hover { color: var(--t1); border-color: var(--t2); background: var(--sa); }
#as-app .as-drive-create-btn svg { opacity: .5; transition: opacity .15s; }
#as-app .as-drive-create-btn:hover svg { opacity: .85; }

/* ═══ v0.9.44 — Portfolio command center (Projects landing) ═══
   All #as-app-scoped so the global reset can't zero the padding. No colored
   left-border motif (cards use a hover box-shadow, not a border-left). */
#as-app .as-pf-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
#as-app .as-pf-tile { background: var(--s); border: 1px solid var(--b); padding: 15px 16px; }
#as-app .as-pf-kl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--t3); font-weight: 700; display: flex; align-items: center; gap: 6px; }
#as-app .as-pf-kdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#as-app .as-pf-kv { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 600; margin-top: 8px; line-height: .9; }
#as-app .as-pf-tile.alert .as-pf-kv { color: var(--rd); }
#as-app .as-pf-ks { font-size: 11px; color: var(--t3); margin-top: 6px; }

#as-app .as-pf-grid2 { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
#as-app .as-pf-sect { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--t2); margin: 0 0 10px; }
#as-app .as-pf-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* v0.10.60: the right column's first panel (Needs Attention) has no
   section label above it, unlike the left column's .as-pf-sect + gap
   (18px line + 10px margin = 28px) sitting above .as-pf-pgrid's cards —
   so the two columns' card rows didn't align at the top. Push the first
   right-column panel down to match, scoped narrowly (:first-child inside
   .as-pf-grid2's right column) so Velocity/Upcoming milestones below it
   and the unrelated .as-pd-rail panel stack are untouched. (Glenn, live
   feedback — measured live via Chrome MCP: .as-pf-panel top was 298 vs
   .as-pf-pcard top 326.) */
#as-app .as-pf-grid2 > div:last-child > .as-pf-panel:first-child { margin-top: 28px; }
#as-app .as-pf-pcard { background: var(--s); border: 1px solid var(--b); padding: 15px 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
#as-app .as-pf-pcard:hover { border-color: var(--ac); box-shadow: 0 2px 0 var(--ac); }
#as-app .as-pf-ph { display: flex; gap: 13px; align-items: center; }
#as-app .as-pf-pt { min-width: 0; }
#as-app .as-pf-pt .as-co { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ac); }
#as-app .as-pf-pcard h4 { font-size: 15px; font-weight: 600; line-height: 1.15; }
#as-app .as-pf-pmeta { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
#as-app .as-pf-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--t2); }
#as-app .as-pf-row .lab { color: var(--t3); width: 40px; flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
#as-app .as-pf-row b { color: var(--t1); font-weight: 600; }

#as-app .as-pf-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 2px 9px; }
#as-app .as-pf-chip.ok { background: var(--gnl); color: var(--gn); }
#as-app .as-pf-chip.risk { background: var(--rdl); color: var(--rd); }

#as-app .as-pf-panel { background: var(--s); border: 1px solid var(--b); margin-bottom: 14px; }
#as-app .as-pf-hd { padding: 11px 14px; border-bottom: 1px solid var(--b); font-weight: 700; font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; }
#as-app .as-pf-hd .mut { color: var(--t3); font-size: 11px; font-weight: 500; }
#as-app .as-pf-att { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--b); align-items: flex-start; font-size: 12.5px; }
#as-app .as-pf-att:last-child { border-bottom: none; }
#as-app .as-pf-sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex: none; }
#as-app .as-pf-sev.hi { background: var(--rd); }
#as-app .as-pf-sev.md { background: var(--ac); }
#as-app .as-pf-att .at { font-size: 12.5px; line-height: 1.3; }
#as-app .as-pf-att .as { font-size: 10.5px; color: var(--t3); margin-top: 2px; }

#as-app .as-pf-vel { display: flex; align-items: flex-end; gap: 5px; padding: 16px 14px 8px; height: 92px; }
#as-app .as-pf-vb { flex: 1; background: var(--sa); position: relative; min-height: 3px; }
#as-app .as-pf-vb > i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ac); }
#as-app .as-pf-vb.hl > i { background: var(--gn); }
#as-app .as-pf-vlbl { display: flex; gap: 5px; padding: 0 14px 12px; color: var(--t3); font-size: 9px; }
#as-app .as-pf-vlbl span { flex: 1; text-align: center; }

#as-app .as-pf-msup { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--b); }
#as-app .as-pf-msup:last-child { border-bottom: none; }
#as-app .as-pf-msup .d { font-family: 'Fraunces', Georgia, serif; font-size: 12px; font-weight: 600; width: 42px; flex: none; color: var(--t2); }
#as-app .as-pf-msup .d.risk { color: var(--rd); }
#as-app .as-pf-msup .t { font-size: 12px; flex: 1; }
#as-app .as-pf-msup .t small { display: block; color: var(--t3); font-size: 10.5px; }

@media (max-width: 1080px) {
    #as-app .as-pf-grid2 { grid-template-columns: 1fr; }
    #as-app .as-pf-kpi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    #as-app .as-pf-pgrid { grid-template-columns: 1fr; }
}

/* ═══ v0.9.44 — Tasks-tab right rail (notes preview; reserves Slice-4 handoff) ═══ */
#as-app .as-pd-tasklayout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
#as-app .as-pd-rail h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--t2); margin: 0 0 10px; }
#as-app .as-pd-rail .as-pf-panel { margin-bottom: 12px; }
#as-app .as-rail-note { padding: 10px 14px; border-bottom: 1px solid var(--b); }
#as-app .as-rail-note:last-of-type { border-bottom: none; }
#as-app .as-rail-note .nh { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
#as-app .as-rail-note .nm { font-weight: 700; font-size: 11.5px; }
#as-app .as-rail-note .tm { color: var(--t3); font-size: 10.5px; margin-left: auto; }
#as-app .as-rail-note .bd { font-size: 12px; color: var(--t2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#as-app .as-rail-addlink { display: block; padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--bl); cursor: pointer; }
#as-app .as-rail-empty { padding: 12px 14px; font-size: 11.5px; color: var(--t3); }

/* v0.9.47 — owner banner + handoff timeline + composer (rail). #as-app-scoped. */
#as-app .as-rail-av { width: 22px; height: 22px; border-radius: 50%; background: var(--bl); color: #fff; font-size: 9px; font-weight: 700; display: inline-grid; place-items: center; flex: none; }
#as-app .as-rail-owner { background: var(--acl); padding: 12px 14px; margin-bottom: 12px; }
#as-app .as-rail-owner .lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ach); }
#as-app .as-rail-owner .val { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
#as-app .as-rail-owner .val b { font-size: 14px; }
#as-app .as-rail-owner .val.muted { color: var(--t3); font-size: 12.5px; }

#as-app .as-rail-tl { position: relative; padding: 12px 14px 6px 30px; }
#as-app .as-rail-tl:before { content: ''; position: absolute; left: 20px; top: 16px; bottom: 8px; width: 1px; background: var(--b); }
#as-app .as-rail-ev { position: relative; padding: 0 0 16px; }
#as-app .as-rail-ev:last-child { padding-bottom: 2px; }
#as-app .as-rail-ev .node { position: absolute; left: -16px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--s); border: 2px solid var(--t3); }
#as-app .as-rail-ev.handoff .node { border-color: var(--gn); background: var(--gn); }
#as-app .as-rail-ev .eh { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
#as-app .as-rail-ev .eh .nm { font-weight: 700; font-size: 11.5px; }
#as-app .as-rail-ev .eh .tm { color: var(--t3); font-size: 10.5px; margin-left: auto; }
#as-app .as-rail-ev .tag { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 5px; }
#as-app .as-rail-ev .tag.ho { background: var(--gnl); color: var(--gn); }
#as-app .as-rail-ev .tag.pin { background: var(--acl); color: var(--ach); }
#as-app .as-rail-ev .flow { display: inline-flex; align-items: center; gap: 6px; margin: 5px 0; font-size: 11px; color: var(--t2); background: var(--gnl); padding: 3px 8px; }
#as-app .as-rail-ev .flow .arr { color: var(--gn); font-weight: 700; }
#as-app .as-rail-ev .flow .tonm { color: var(--t1); font-weight: 600; }
#as-app .as-rail-ev .bd { font-size: 12px; color: var(--t1); line-height: 1.4; }

#as-app .as-rail-composer { padding: 10px 14px; border-top: 1px solid var(--b); }
#as-app .as-rail-composer input[type="text"] { width: 100%; padding: 8px 10px; border: 1px solid var(--b); border-radius: var(--rs); font-family: inherit; font-size: 12px; background: var(--inp-bg); color: var(--t1); }
#as-app .as-rail-comprow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#as-app .as-rail-hotoggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--t2); cursor: pointer; }
#as-app .as-rail-hotoggle input { accent-color: var(--ac); }
#as-app .as-rail-comprow select { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--b); border-radius: var(--rs); font-family: inherit; font-size: 11.5px; background: var(--inp-bg); color: var(--t1); }
#as-app .as-rail-comprow .btn { margin-left: auto; }

@media (max-width: 1080px) {
    #as-app .as-pd-tasklayout { grid-template-columns: 1fr; }
}

/* Clickable KPI tile (portfolio "Handoffs waiting" → inbox). */
#as-app .as-pf-tile.clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
#as-app .as-pf-tile.clickable:hover { border-color: var(--ac); box-shadow: 0 2px 0 var(--ac); }

/* ═══ v0.9.47 — Handoffs inbox cards ═══ (no colored left-border; stale = red text) */
#as-app .as-ho-card { display: flex; gap: 16px; align-items: center; background: var(--s); border: 1px solid var(--b); padding: 15px 17px; margin-bottom: 10px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
#as-app .as-ho-card:hover { border-color: var(--ac); box-shadow: 0 2px 0 var(--ac); }
#as-app .as-ho-card .main { flex: 1; min-width: 0; }
#as-app .as-ho-card .co { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ac); }
#as-app .as-ho-card h4 { font-size: 15px; font-weight: 600; margin: 2px 0; }
#as-app .as-ho-card .flow { display: flex; align-items: center; gap: 8px; margin: 9px 0; font-size: 12px; color: var(--t2); }
#as-app .as-ho-card .flow .arr { color: var(--gn); font-weight: 700; }
#as-app .as-ho-card .flow .holds b { color: var(--t1); }
#as-app .as-ho-card .stt { font-size: 12px; color: var(--t2); }
#as-app .as-ho-card .age { text-align: right; white-space: nowrap; flex: none; }
#as-app .as-ho-card .age b { font-family: 'Fraunces', Georgia, serif; font-size: 20px; display: block; }
#as-app .as-ho-card.stale .age b { color: var(--rd); }
#as-app .as-ho-card .age small { font-size: 10px; color: var(--t3); }
#as-app .as-ho-card .age .acts { display: flex; gap: 5px; margin-top: 8px; justify-content: flex-end; }
#as-app .as-ho-empty { padding: 30px 16px; text-align: center; color: var(--t3); font-size: 13px; }