/* ============================================================================
   Inside Waypoint — the platform windows inside section.hiw2 (2026-09-03)
   Load AFTER css/style.css. Everything is scoped to the section's own
   classes (.emb-*, .hiw-embed.embed-*, .hiw2-*). Ordered by cascade: later
   rules refine earlier ones on purpose — keep the order when merging.
   Depends only on the site's tokens: --card --grey --ink --white --ease --r-md.
   ============================================================================ */
/* .hiw2-media height: set by the live-site fit script at the end of lab.js */
.emb { padding: 28px 28px 30px; font-size: 14px; line-height: 20px; color: var(--ink); }
.emb .mute, .emb .emb-cap, .emb .emb-status, .emb .head span { color: rgba(38, 38, 38, 0.5); }
.emb .r { text-align: right; justify-self: end; }
.emb-h1 { margin: 0 0 18px; font-size: 34px; line-height: 41px; font-weight: 400; letter-spacing: -0.02em; display: flex; align-items: center; gap: 14px; }
.emb-cap { display: block; font-size: 12px; line-height: 16px; }
.emb-card { background: var(--card); border-radius: 16px; padding: 22px 24px; }
/* dashboard */
.emb-dash { display: grid; grid-template-columns: 1fr 2.9fr; gap: 16px; align-items: stretch; }
.emb-col { display: flex; flex-direction: column; gap: 16px; }
.emb-budget { display: flex; flex-direction: column; min-height: 200px; }
.emb-budget-main { margin-top: auto; display: flex; align-items: baseline; gap: 12px; }
.emb-budget-main strong { font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -0.02em; }
.emb-budget-main span { font-size: 12px; line-height: 16px; color: rgba(38, 38, 38, 0.5); margin-left: auto; }
.emb-bar { height: 6px; border-radius: 3px; background: rgba(38, 38, 38, 0.1); margin-top: 8px; overflow: hidden; }
.emb-bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.emb-assets { display: flex; flex-direction: column; flex: 1 1 auto; }
.emb-alist { margin-top: 10px; }
.emb-arow { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(38, 38, 38, 0.08); }
.emb-arow div { display: flex; flex-direction: column; gap: 2px; }
.emb-arow strong { font-weight: 500; }
.emb-arow span { font-size: 12px; line-height: 16px; color: rgba(38, 38, 38, 0.5); }
.emb-arow .r { text-align: right; align-items: flex-end; }
.emb-total { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(38, 38, 38, 0.08); display: flex; align-items: center; justify-content: space-between; }
.emb-total strong { font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -0.02em; }
.emb-plus { color: rgba(38, 38, 38, 0.5); font-size: 18px; }
.emb-chart { display: flex; flex-direction: column; }
.emb-chart-head { display: flex; align-items: flex-start; justify-content: space-between; }
.emb-val { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; }
.emb-val em { font-style: normal; font-size: 12px; line-height: 16px; color: rgba(38, 38, 38, 0.5); display: inline-flex; align-items: center; gap: 3px; }
.emb-val em svg { width: 12px; height: 12px; }
.emb-delta { font-size: 12px; line-height: 16px; color: #30a46c; }
.emb-seg { display: inline-flex; background: var(--white); border-radius: 999px; padding: 4px; box-shadow: 0 1px 2px rgba(38, 38, 38, 0.06), 0 10px 34px rgba(38, 38, 38, 0.08); }
.emb-seg span { padding: 8px 14px; border-radius: 999px; font-size: 14px; line-height: 20px; font-weight: 500; }
.emb-seg span.on { background: var(--ink); color: var(--white); }
.emb-plot { position: relative; flex: 1 1 auto; margin: 26px 0 0 54px; min-height: 260px; }
.emb-plot svg { position: absolute; inset: 0 0 24px 0; width: 100%; height: calc(100% - 24px); overflow: visible; }
.emb-plot .g { stroke: rgba(38, 38, 38, 0.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.emb-plot .a { fill: rgba(48, 164, 108, 0.08); }
.emb-plot .l { fill: none; stroke: #30a46c; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.emb-dot { position: absolute; right: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #30a46c; }
.emb-ylab { position: absolute; left: -54px; top: -8px; bottom: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; line-height: 16px; color: rgba(38, 38, 38, 0.5); }
.emb-xlab { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: rgba(38, 38, 38, 0.5); }
/* directory */
.emb-dhead { display: flex; align-items: center; justify-content: space-between; }
.emb-dhead .emb-h1 { margin-bottom: 0; }
.emb-status { display: inline-flex; align-items: center; gap: 8px; }
.emb-status i, .emb-live i, .emb-sdot { width: 6px; height: 6px; border-radius: 50%; background: #30a46c; display: inline-block; }
.emb-dgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.emb-dcard { position: relative; background: var(--card); border-radius: 16px; aspect-ratio: 1 / 1.1; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.emb-dcard strong { font-weight: 500; color: rgba(38, 38, 38, 0.5); }
.emb-dcard.live strong { color: var(--ink); }
.emb-dcard > span:last-child { font-size: 12px; line-height: 16px; color: rgba(38, 38, 38, 0.5); }
.emb-dlogo { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; background: rgba(38, 38, 38, 0.3); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.emb-dcard.live .emb-dlogo { background: var(--ink); }
.emb-live { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(38, 38, 38, 0.06); font-size: 12px; line-height: 16px; color: rgba(38, 38, 38, 0.5); }
.emb-go { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(38, 38, 38, 0.06); display: grid; place-items: center; color: var(--ink); }
.emb-go svg { width: 16px; height: 16px; }
/* waypoints */
.emb-whead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.emb-whead .emb-h1 { margin: 0; }
.emb-cred { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--card); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; color: rgba(38, 38, 38, 0.6); }
.emb-cred b { font-weight: 400; letter-spacing: 0; }
.emb-wbtns { display: flex; gap: 10px; }
.emb-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--grey); background: var(--white); font-size: 14px; line-height: 20px; font-weight: 500; }
.emb-pill svg { width: 14px; height: 14px; color: rgba(38, 38, 38, 0.5); }
.emb-pill.ink { background: var(--ink); color: var(--white); border-color: transparent; }
.emb-table { background: var(--card); border-radius: 16px; padding: 4px 20px 6px; }
.emb-trow { display: grid; grid-template-columns: 23% 0.55fr 0.55fr 1.7fr 140px; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(38, 38, 38, 0.08); }
.emb-trow.head { padding: 12px 0; font-size: 12px; line-height: 16px; }
.emb-trow:last-child { border-bottom: 0; }
.emb-trow.acts { grid-template-columns: 23% 1.3fr 1fr 1fr 0.9fr 72px; }
.emb-trow.reqs { grid-template-columns: 23% 2fr 96px 72px 150px; }
.emb-trow .v { display: inline-flex; align-items: center; gap: 12px; }
.emb-trow .v strong { font-weight: 500; }
.emb-mark { width: 22px; height: 22px; border-radius: 7px; object-fit: contain; }
.emb-tag { font-style: normal; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: -4px; border-radius: 999px; background: rgba(38, 38, 38, 0.06); font-size: 12px; line-height: 16px; color: rgba(38, 38, 38, 0.5); }
.emb-bud { display: flex; flex-direction: column; gap: 6px; padding-right: 24px; }
.emb-bud .emb-bar { margin: 0; }
.emb-bud-l { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; }
.emb-trow .acts2 { display: inline-flex; gap: 4px; justify-content: flex-end; }
.emb-ico { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; color: rgba(38, 38, 38, 0.5); margin: -7px 0; }
.emb-ico svg { width: 16px; height: 16px; }
.emb-ico.bad { color: #e5484d; } .emb-ico.ok { color: #30a46c; }
.emb-sdot { margin-right: 8px; } .emb-sdot.mute { background: rgba(38, 38, 38, 0.3); } .emb-sdot.bad { background: #e5484d; } .emb-sdot.wait { background: #f5a524; }
.emb .neg { color: #e5484d; } .emb .pos { color: #30a46c; }
.emb-trow .ask { display: flex; flex-direction: column; gap: 4px; }
.emb-tabs { display: inline-flex; margin: 16px 0; padding: 4px; border-radius: 999px; background: var(--white); box-shadow: 0 1px 2px rgba(38, 38, 38, 0.06), 0 10px 34px rgba(38, 38, 38, 0.08); }
.emb-tab { border: 0; background: transparent; font: inherit; font-weight: 500; padding: 8px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); }
.emb-tab b { font-weight: 400; font-size: 12px; line-height: 16px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(38, 38, 38, 0.06); color: rgba(38, 38, 38, 0.6); display: inline-grid; place-items: center; }
.emb-tab.on { background: var(--ink); color: var(--white); }
.emb-tab.on b { background: rgba(255, 255, 255, 0.18); color: var(--white); }
.emb-tabpanel[hidden] { display: none; }
/* the windows size to their content (the site pinned the accounts body to
   552px); the media box is 15% taller than the site's at every desktop width */
.hiw-embed.embed-acc .dir-body { height: auto; display: block; }

.hiw-embed.embed-dir .dir-body, .hiw-embed.embed-cn .dir-body { height: auto; display: block; }
.hiw-embed .dir-window { height: auto; max-height: none; }
.emb .emb-dlogo { width: 64px; height: 64px; }
.emb .emb-dlogo { width: 64px !important; height: 64px !important; }   /* the site's embed span sizing outranks .emb-dlogo */
.hiw2-panel .hiw-embed .dir-body .emb-dlogo { width: 64px !important; height: 64px !important; }

/* ===== live UI inside the windows: hovers, a scrolling list, range pills ===== */
.emb { cursor: default; }
.emb .emb-dcard, .emb .emb-pill, .emb .emb-ico, .emb .emb-plus, .emb .emb-seg span, .emb .emb-tab, .emb .emb-go, .emb .emb-trow:not(.head), .emb .emb-arow { cursor: pointer; }
/* cards + rows */
.emb-dcard { transition: background 0.25s var(--ease); }
.emb-dcard:hover { background: var(--grey); }
.emb-dcard .emb-dlogo { transition: background 0.25s var(--ease), transform 0.35s var(--ease); }
.emb-dcard:hover .emb-dlogo { background: var(--ink); transform: scale(1.04); }
.emb-go { transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.emb-dcard:hover .emb-go { background: var(--ink); color: var(--white); }
.emb-trow:not(.head) { margin: 0 -12px; padding-left: 12px; padding-right: 12px; transition: background 0.2s var(--ease); }
.emb-trow:not(.head):hover { background: rgba(38, 38, 38, 0.045); }
.emb-arow { margin: 0 -12px; padding-left: 12px; padding-right: 12px; transition: background 0.2s var(--ease); }
.emb-arow:hover { background: rgba(38, 38, 38, 0.045); }
/* buttons */
.emb-pill { transition: background 0.25s var(--ease), border-color 0.25s var(--ease); }
.emb-pill:hover { background: var(--card); }
.emb-pill.ink:hover { background: #111; }
.emb-ico, .emb-plus { transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.emb-ico:hover { background: rgba(38, 38, 38, 0.06); color: var(--ink); }
.emb-ico.bad:hover { background: rgba(229, 72, 77, 0.1); color: #e5484d; }
.emb-ico.ok:hover { background: rgba(48, 164, 108, 0.12); color: #30a46c; }
.emb-plus { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; margin: -7px 0; }
.emb-plus:hover { background: rgba(38, 38, 38, 0.06); color: var(--ink); }
.emb-seg span { transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.emb-seg span:not(.on):hover { background: rgba(38, 38, 38, 0.06); }
.emb-tab { transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.emb-tab:not(.on):hover { background: rgba(38, 38, 38, 0.06); }
.emb-cred:hover b { color: var(--ink); }
/* the assets list scrolls inside its card */
.emb-alist { max-height: 236px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(38, 38, 38, 0.25) transparent; padding-right: 6px; margin-right: -6px; }
.emb-alist::-webkit-scrollbar { width: 6px; }
.emb-alist::-webkit-scrollbar-thumb { background: rgba(38, 38, 38, 0.25); border-radius: 3px; }
.emb-plot .l, .emb-plot .a { transition: d 0.45s var(--ease); }
/* chart crosshair (== the app's .pf-cross / .pf-hdot / time label) */
.emb-cross { position: absolute; top: 0; bottom: 24px; width: 0; border-left: 1px dashed rgba(38, 38, 38, 0.35); pointer-events: none; opacity: 0; transition: opacity 0.15s var(--ease); }
.emb-cross.show { opacity: 1; }
.emb-cross-time { position: absolute; top: -22px; left: 0; translate: -50% 0; white-space: nowrap; font-size: 12px; line-height: 16px; color: rgba(38, 38, 38, 0.5); }
.emb-cross-dot { position: absolute; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #30a46c; box-shadow: 0 0 0 2px var(--white); }
.emb-plot { cursor: crosshair; }

/* window heights: Console and Dashboard match Waypoints (653px natural) */
.hiw-embed.embed-con .con-body { height: 614px; }                      /* + 39px term-bar = 653 */
.hiw-embed.embed-acc .dir-window { height: 653px; display: flex; flex-direction: column; }
.hiw-embed.embed-acc .dir-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 26px; }
.hiw-embed.embed-acc .emb-h1 { margin-bottom: 14px; }
.hiw-embed.embed-acc .emb-dash { flex: 1 1 auto; min-height: 0; }
.hiw-embed.embed-acc .emb-col, .hiw-embed.embed-acc .emb-assets, .hiw-embed.embed-acc .emb-chart { min-height: 0; }
.hiw-embed.embed-acc .emb-budget { min-height: 150px; }
.hiw-embed.embed-acc .emb-alist { flex: 1 1 auto; min-height: 0; max-height: none; }
.hiw-embed.embed-acc .emb-plot { min-height: 0; }

/* ===== narrow windows (the site flips .hiw-embed to .narrow under a 660px
   panel and draws every window at 780px) — instead of restacking, each screen
   loses a part and the rest stretches to the full width ===== */
/* dashboard: the two left cards go; the chart takes the width */
.hiw-embed.embed-acc.narrow .emb-col { display: none; }
.hiw-embed.embed-acc.narrow .emb-dash { grid-template-columns: 1fr; }
/* directory: six cards in three columns */
.hiw-embed.embed-dir.narrow .emb-dgrid { grid-template-columns: repeat(3, 1fr); }
.hiw-embed.embed-dir.narrow .emb-dcard:nth-child(n + 7) { display: none; }
.hiw-embed.embed-dir.narrow .emb-dhead { flex-direction: column; align-items: flex-start; gap: 8px; }
/* waypoints: actions lose Venue; requests lose Status and Raised */
.hiw-embed.embed-cn.narrow .emb-trow.acts { grid-template-columns: 1.3fr 1fr 1fr 0.9fr 72px; }
.hiw-embed.embed-cn.narrow .emb-trow.acts > :first-child { display: none; }
.hiw-embed.embed-cn.narrow .emb-trow.reqs { grid-template-columns: 30% 1fr 100px; }
.hiw-embed.embed-cn.narrow .emb-trow.reqs > :nth-child(3), .hiw-embed.embed-cn.narrow .emb-trow.reqs > :nth-child(4) { display: none; }
.hiw-embed.embed-cn.narrow .emb-trow:not(.acts):not(.reqs) { grid-template-columns: 30% 0.6fr 0.6fr 1.4fr 88px; gap: 16px; }
.hiw-embed.embed-cn.narrow .emb-wbtns .emb-pill:not(.ink) { display: none; }
.hiw-embed.embed-cn.narrow .emb-trow:not(.acts):not(.reqs) { grid-template-columns: 28% 0.5fr 0.5fr 1.7fr 80px; }
.hiw-embed.embed-cn.narrow .emb-bud-l span { white-space: nowrap; }
.hiw2-panel .hiw-embed .dir-body .emb-dlogo { width: 77px !important; height: 77px !important; }   /* 64 × 1.2 */
.emb-cred .emb-rot { width: 12px; height: 12px; color: rgba(38, 38, 38, 0.5); }
.emb-cred:hover .emb-rot { color: var(--ink); }
.emb-plot .l, .emb-plot .a { transition: none; }   /* the grow-in clips; no path morph */
/* rows and cards arrive with a short stagger; bars fill (js sets the width) */
.emb-in { animation: embIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes embIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .emb-in { animation: none; } .emb-bar i { transition: none !important; } }
/* directory window at the others' 653px: shorter tiles */
.hiw-embed.embed-dir .emb-dcard { aspect-ratio: 1 / 0.9; }
.hiw-embed.embed-dir .dir-window { height: 653px; display: flex; flex-direction: column; }
.hiw-embed.embed-dir .dir-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hiw-embed.embed-dir .emb-dgrid { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.hiw-embed.embed-dir .emb-dcard { aspect-ratio: auto; min-height: 0; }
/* the Waypoints window keeps one height whichever tab is showing */
.hiw-embed.embed-cn .dir-window { height: 653px; display: flex; flex-direction: column; }
.hiw-embed.embed-cn .dir-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hiw-embed.embed-cn .emb-tabpanel { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.hiw-embed.embed-cn .emb-trow.reqs:not(.head) { padding-top: 14px; padding-bottom: 14px; }
.hiw-embed.embed-cn .emb-tabs, .hiw-embed.embed-cn .emb-whead, .hiw-embed.embed-cn .emb-wp { align-self: flex-start; width: auto; }   /* the flex column was stretching the pill */
.hiw-embed.embed-cn .emb-whead, .hiw-embed.embed-cn .emb-wp { align-self: stretch; }
/* dashboard: Inbox card in the budget slot — two short requests in the assets-row grammar */
.emb-inbox { display: flex; flex-direction: column; }
.emb-inbox .emb-inbox-list { margin-top: 10px; max-height: none; overflow: visible; padding-right: 0; margin-right: 0; }
.emb-inbox .emb-arow:last-child { border-bottom: 0; }
.emb-inbox .emb-arow strong { font-weight: 500; }
.emb-inbox .emb-arow .r strong { display: inline-flex; align-items: center; gap: 0; font-weight: 400; }
.emb-inbox .emb-sdot { margin-right: 6px; }
.hiw-embed.embed-acc .emb-inbox { min-height: 0; }
.hiw-embed.embed-acc .emb-inbox { flex: 0 0 auto; }                  /* natural height; the assets list takes the squeeze */
.emb-inbox .emb-arow { padding: 9px 12px; }
.emb-inbox .emb-arow > div:first-child { min-width: 0; }
.emb-inbox .emb-arow strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb-inbox .emb-arow .r strong { overflow: visible; }
.emb-inbox .emb-arow strong { white-space: normal; overflow: visible; text-overflow: clip; }   /* titles wrap rather than truncate */
.emb-inbox .emb-arow { gap: 12px; }
/* rows sit inside the card padding like the app's — no hover bleed past the dividers */
.emb-arow, .emb-inbox .emb-arow { margin: 0; padding-left: 0; padding-right: 0; }
.emb-arow:hover { background: transparent; }
.emb-arow:hover strong { color: var(--ink); }
.emb-trow:not(.head) { margin: 0; padding-left: 0; padding-right: 0; }
.emb-trow:not(.head):hover { background: transparent; }
.emb-trow:not(.head):hover > span:first-child { color: var(--ink); }
.emb-alist { padding-right: 0; margin-right: 0; }

/* rows: the hover band is back (12px inset, as before); the divider is drawn
   inside the padding so it lines up with the caption and the total's rule */
.emb-arow, .emb-inbox .emb-arow { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-bottom: 0; position: relative; }
.emb-arow::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: rgba(38, 38, 38, 0.08); }
.emb-arow:last-child::after { display: none; }
.emb-arow:hover { background: rgba(38, 38, 38, 0.045); }
.emb-trow:not(.head) { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-bottom: 0; position: relative; }
.emb-trow:not(.head)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: rgba(38, 38, 38, 0.08); }
.emb-trow:not(.head):last-child::after { display: none; }
.emb-trow:not(.head):hover { background: rgba(38, 38, 38, 0.045); }
.emb-trow.head { margin: 0; }
/* the two left cards split the column equally; each list scrolls inside */
.hiw-embed.embed-acc .emb-inbox, .hiw-embed.embed-acc .emb-assets { flex: 1 1 0; min-height: 0; }
.hiw-embed.embed-acc .emb-inbox .emb-inbox-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(38, 38, 38, 0.25) transparent; }
.emb-inbox .emb-arow { padding-top: 10px; padding-bottom: 10px; }
/* inbox rows: time + status on the first line, the request text full width below */
.emb-irow { display: block; }
.emb-irow-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; line-height: 16px; color: rgba(38, 38, 38, 0.5); }
.emb-irow-top span:last-child { display: inline-flex; align-items: center; color: var(--ink); }
.emb-irow p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--ink); white-space: normal; }
/* waypoints tables: the hover band stays inside the divider lines */
.hiw-embed.embed-cn .emb-trow:not(.head) { margin: 0; padding-left: 0; padding-right: 0; }
.hiw-embed.embed-cn .emb-trow:not(.head)::after { left: 0; right: 0; }
.emb-arow .emb-irow-top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.emb-irow p { text-align: left; }
/* inbox caption: "● Pending  1h ago" together at the left; inbox card 20% shorter than the assets card */
.emb-arow .emb-irow-top { justify-content: flex-start; gap: 10px; }
.emb-irow-top span:first-child { display: inline-flex; align-items: center; color: var(--ink); }
.emb-irow-top span:last-child { color: rgba(38, 38, 38, 0.5); }
.hiw-embed.embed-acc .emb-inbox { flex: 0.8 1 0; }
.hiw-embed.embed-acc .emb-assets { flex: 1.2 1 0; }
/* console rail cards: names at the Directory cards' 14px, not the 18px headline */
.hiw-embed.embed-con .dir-name { font-size: 14px; line-height: 20px; font-weight: 500; }
.hiw-embed.embed-con .dir-name .dir-status { font-size: 12px; }
.hiw-embed.embed-con .dir-meta { font-size: 12px; line-height: 16px; margin-top: 4px; }
/* console rail cards: the status pill at caption scale (12px, 18px tall) */
.hiw-embed.embed-con .dir-name .dir-status { font-size: 11px; line-height: 14px; height: 18px; padding: 0 7px; gap: 5px; margin-left: 6px; vertical-align: 2px; }
.hiw-embed.embed-con .dir-name .dir-status i { width: 5px; height: 5px; }
.hiw-embed.embed-con .dir-name { display: flex; align-items: center; gap: 6px; }   /* pill hugs the name */
.hiw-embed.embed-con .dir-name .dir-status { margin-left: 0; vertical-align: baseline; }
/* console rail cards and inbox rows arrive with the same stagger (js adds .emb-in) */
.con-rail article.emb-in, .con-rail .dir-card.emb-in { animation: embIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
/* open motion, slower and after the panel fade: rows hold invisible, then rise in */
.emb-pre { opacity: 0; }
.emb-in { animation-duration: 0.65s; animation-delay: calc(var(--i, 0) * 80ms); }
.con-rail article.emb-in, .con-rail .dir-card.emb-in { animation-duration: 0.65s; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes embIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.emb-in { animation-delay: calc(var(--i, 0) * 40ms); }
.con-rail article.emb-in, .con-rail .dir-card.emb-in { animation-delay: calc(var(--i, 0) * 55ms); }