/* ═══════════════════════════════════════════════════════════════════════
   vx-dashboard.css — global styles for /my/dashboard (MyDashboard.razor)
   Migrated from MyDashboard.razor.css (retired) + MyDashboard.razor <style> block.
   Single source of truth — no scoped CSS, no <style> block in the razor.
   Load in wwwroot/css/ and reference in _Host.cshtml / App.razor.
   All colours via --vx-* tokens or --mud-palette-* primitives.
═══════════════════════════════════════════════════════════════════════ */


.dash-page { background: var(--mud-palette-background); min-height: 100vh; }

.dash-loading { padding: 40px 32px; }

.dash-inner { padding: 0 28px 28px; }


/* ══ BAND 1 — Header ════════════════════════════════════════════════════ */

.dash-header {
    background: linear-gradient(135deg, #0f1f3d 0%, #1a3260 60%, #2d4a7a 100%);
    padding: 28px 32px 28px;
    border-radius: 0 0 16px 16px;
    margin-bottom: 24px;
    position: relative; overflow: hidden;
}
.dash-header::before {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.dash-header-grid {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px; align-items: center;
}

.dash-header-eyebrow {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
    text-transform: uppercase; color: rgba(255,255,255,0.55);
    margin-bottom: 6px;
}
.dash-header-title {
    font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em;
    color: #fff; line-height: 1.15; margin-bottom: 6px;
}
.dash-header-identity {
    font-size: 0.82rem; color: rgba(255,255,255,0.72);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dash-header-identity .dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(255,255,255,0.4); flex-shrink: 0;
}

.dash-header-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.dash-header-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px; padding: 5px 13px;
    font-size: 0.72rem; font-weight: 700; color: #fff;
    letter-spacing: 0.04em; white-space: nowrap;
}
.dash-header-badge-neutral {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
}
.dash-header-badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 2px rgba(52,211,153,0.25);
    animation: dash-pulse 2s ease-in-out infinite;
}
@keyframes dash-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
.dash-header-date {
    font-size: 0.72rem; color: rgba(255,255,255,0.6);
    text-align: right; line-height: 1.5;
}


/* ── Today's call ─────────────────────────────────────────────────────── */
.dash-today-call {
    position: relative; z-index: 1;
    margin-top: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex; align-items: center; gap: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.dash-today-call:hover { background: rgba(255,255,255,0.08); }
.dash-today-call.err  { border-color: rgba(244,63,94,0.35); }
.dash-today-call.warn { border-color: rgba(245,158,11,0.3); }

.dash-today-call-icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: rgba(245,158,11,0.2);
    display: flex; align-items: center; justify-content: center;
    color: #fbbf24; flex-shrink: 0;
    font-size: 1.05rem; font-weight: 800;
}
.dash-today-call.err .dash-today-call-icon {
    background: rgba(244,63,94,0.25);
    color: #fca5a5;
}

.dash-today-call-text {
    flex: 1;
    font-size: 0.82rem; color: rgba(255,255,255,0.88); line-height: 1.45;
}
.dash-today-call-text strong { color: #fff; font-weight: 700; }

.dash-today-call-cta {
    font-size: 0.72rem; font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,0.14);
    padding: 8px 14px; border-radius: 6px;
    letter-spacing: 0.03em; white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.18);
}


/* ══ BAND 2 — Performance hero ══════════════════════════════════════════ */

.dash-perf-hero {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.dash-gauge-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    padding: 22px 24px 20px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    position: relative; overflow: hidden;
}
.dash-gauge-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at top, rgba(45,74,122,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.dash-gauge-eyebrow {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary);
    margin-bottom: 3px; position: relative;
}
.dash-gauge-title {
    font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em;
    margin-bottom: 16px; position: relative;
    color: var(--mud-palette-text-primary);
}
.dash-gauge-wrap {
    position: relative;
    margin-bottom: 8px;
}
.dash-gauge-delta {
    margin-top: 10px; position: relative;
    display: flex; align-items: center; gap: 10px; justify-content: center;
    font-size: 0.74rem; color: var(--mud-palette-text-secondary);
}
.dash-delta-pill {
    font-size: 0.7rem; font-weight: 700;
    padding: 3px 9px; border-radius: 10px;
    letter-spacing: 0.02em;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
}
.dash-delta-pill.up-good   { background: var(--vx-success-bg); color: var(--vx-success-text); }
.dash-delta-pill.down-bad  { background: var(--vx-error-bg);   color: var(--vx-error-text); }
.dash-delta-pill.flat      { background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); }
.dash-gauge-delta-label { white-space: nowrap; }

.dash-gauge-footnote {
    margin-top: 10px; position: relative;
    font-size: 0.66rem; color: var(--mud-palette-text-secondary);
    letter-spacing: 0.02em;
}


/* Decomposition card */
.dash-decomp-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    padding: 18px 22px 22px;
    display: flex; flex-direction: column;
}
.dash-decomp-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.dash-decomp-title {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary);
}
.dash-decomp-hint {
    font-size: 0.68rem; color: var(--mud-palette-text-secondary);
}
.dash-decomp-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    flex: 1;
}
.dash-decomp-cell {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 12px 10px 14px;
    text-align: center;
    background: var(--mud-palette-background-grey);
    display: flex; flex-direction: column; align-items: center;
    gap: 2px;
}
.dash-decomp-name {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary);
}
.dash-decomp-weight {
    font-size: 0.6rem; color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}


/* ══ BAND 3 — Objectives strip ══════════════════════════════════════════ */

.dash-obj-strip-wrap { margin-bottom: 24px; }
.dash-obj-strip-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.dash-obj-strip-title {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary);
}
.dash-obj-strip-link {
    font-size: 0.72rem; font-weight: 600;
    color: var(--mud-palette-primary); cursor: pointer;
}
.dash-obj-strip-link:hover { text-decoration: underline; }

.dash-obj-strip {
    display: grid;
    gap: 14px;
}

.dash-obj-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-top: 3px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}
.dash-obj-card:hover {
    box-shadow: 0 6px 20px rgba(15,31,61,0.08);
    transform: translateY(-1px);
}

.dash-obj-card-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 6px;
}
.dash-obj-card-persp {
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary);
}
.dash-obj-card-score {
    font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em;
}
.dash-obj-card-score-empty { color: var(--mud-palette-text-secondary); opacity: 0.4; }

.dash-obj-card-title {
    font-size: 0.85rem; font-weight: 700; line-height: 1.3;
    margin-bottom: 12px;
    color: var(--mud-palette-text-primary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.dash-obj-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: 0.64rem; color: var(--mud-palette-text-secondary);
    letter-spacing: 0.02em;
}
.dash-obj-card-meta { font-weight: 600; }
.dash-obj-card-trend { font-weight: 700; white-space: nowrap; }
.dash-obj-card-trend.up   { color: var(--vx-success); }
.dash-obj-card-trend.down { color: var(--vx-error); }
.dash-obj-card-trend.flat { color: var(--mud-palette-text-secondary); }


/* ══ BAND 4 — Work grid (feed + risks) ═════════════════════════════════ */

.dash-work-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 20px;
    margin-bottom: 24px;
}

.dash-panel-title-group {
    display: flex; align-items: center; gap: 10px;
}
.dash-panel-count {
    font-size: 0.66rem; font-weight: 800;
    background: #0f1f3d; color: #fff;
    padding: 2px 9px; border-radius: 10px;
    letter-spacing: 0.02em;
}
.dash-panel-filter {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}


/* Unified feed */
.dash-feed { padding: 4px 0; }

.dash-feed-group {
    font-size: 0.58rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 12px 20px 6px;
    display: flex; align-items: center; gap: 8px;
}
.dash-feed-group.urgent { color: var(--vx-error); }
.dash-feed-group .dash { flex: 1; height: 1px; background: var(--mud-palette-divider); }

.dash-feed-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px; align-items: center;
    padding: 13px 20px;
    border-bottom: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    transition: background 0.1s;
}
.dash-feed-item:hover   { background: var(--mud-palette-background); }
.dash-feed-item:last-child { border-bottom: none; }

.dash-feed-type {
    width: 38px; height: 38px; border-radius: 8px;
    background: var(--mud-palette-background-grey);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.56rem; font-weight: 800; letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}
.dash-feed-type.kpi  { background: var(--vx-info-bg);    color: var(--vx-info-text); }
.dash-feed-type.wf   { background: var(--vx-warning-bg); color: var(--vx-warning-text); }
.dash-feed-type.sess { background: rgba(45,74,122,0.1);  color: #2d4a7a; }
.dash-feed-type.act  { background: var(--vx-success-bg); color: var(--vx-success-text); }
.dash-feed-type.doc  { background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); }

.dash-feed-body { min-width: 0; }
.dash-feed-title {
    font-size: 0.85rem; font-weight: 600; line-height: 1.35;
    color: var(--mud-palette-text-primary);
}
.dash-feed-meta {
    font-size: 0.72rem; color: var(--mud-palette-text-secondary);
    margin-top: 3px;
}
.dash-feed-due {
    font-size: 0.72rem; font-weight: 700;
    white-space: nowrap;
}
.dash-feed-due.overdue { color: var(--vx-error); }
.dash-feed-due.soon    { color: var(--vx-warning); }
.dash-feed-due.normal  { color: var(--mud-palette-text-secondary); }

.dash-feed-chevron {
    color: var(--mud-palette-text-secondary);
    font-size: 1rem; opacity: 0.4;
}

.dash-feed-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 40px 20px; gap: 8px;
    text-align: center;
}
.dash-feed-empty-title {
    font-size: 0.88rem; font-weight: 700;
    color: var(--mud-palette-text-primary);
}
.dash-feed-empty-sub {
    font-size: 0.75rem; color: var(--mud-palette-text-secondary);
    max-width: 300px; line-height: 1.4;
}


/* ── Risk portfolio (right column) ───────────────────────────────────── */

/* ── Risk portfolio (right column) ───────────────────────────────────── */

.dash-heatmap-wrap {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.dash-heatmap-container {
    display: flex;
    align-items: stretch;
    gap: 6px;
    align-self: flex-start;
    width: fit-content;
}
.dash-heat-y-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 26px;
    opacity: 0.75;
}
.dash-heatmap-inner {
    flex: none;
    min-width: 0;
}
.dash-heatmap {
    display: grid;
    grid-template-columns: 20px repeat(5, 34px);
    grid-template-rows: repeat(5, 34px);
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
}
.dash-heat-axis-y {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}
.dash-heat-cell {
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: filter 0.15s;
}
.dash-heat-cell:hover { filter: brightness(0.88); }
.dash-heat-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.32);
    line-height: 1;
}
.dash-heat-xrow {
    display: grid;
    grid-template-columns: 20px repeat(5, 34px);
    gap: 0;
    margin-top: 4px;
}
.dash-heat-axis-x {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    height: 18px;
}
.dash-heat-x-label {
    text-align: center;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    opacity: 0.75;
    padding-left: 20px;
}

.dash-top-risks { padding: 8px 0 4px; }
.dash-top-risk {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px; align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    transition: background 0.1s;
}
.dash-top-risk:hover      { background: var(--mud-palette-background); }
.dash-top-risk:last-child { border-bottom: none; }

.dash-top-risk-score {
    height: 34px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.8rem; letter-spacing: -0.01em;
}
.dash-top-risk-score.high   { background: var(--vx-error-bg);   color: var(--vx-error-text); }
.dash-top-risk-score.medium { background: var(--vx-warning-bg); color: var(--vx-warning-text); }
.dash-top-risk-score.low    { background: var(--vx-success-bg); color: var(--vx-success-text); }
.dash-top-risk-score.none   {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
}

.dash-top-risk-body { min-width: 0; }
.dash-top-risk-title {
    font-size: 0.78rem; font-weight: 600; line-height: 1.3;
    color: var(--mud-palette-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-top-risk-meta {
    font-size: 0.66rem; color: var(--mud-palette-text-secondary);
    margin-top: 2px; display: flex; gap: 6px;
}
.dash-risk-code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: var(--mud-palette-primary); font-weight: 800; letter-spacing: 0.03em;
}
.dash-flows-to {
    font-size: 0.64rem; color: var(--mud-palette-text-secondary);
    font-style: italic;
}
.dash-risk-trend {
    font-size: 0.66rem; font-weight: 700;
    padding: 2px 7px; border-radius: 9px;
    letter-spacing: 0.02em; white-space: nowrap;
}
.dash-risk-trend.up   { background: var(--vx-error-bg);   color: var(--vx-error-text); }
.dash-risk-trend.down { background: var(--vx-success-bg); color: var(--vx-success-text); }
.dash-risk-trend.flat { background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); }


/* ══ BAND 5 — Secondary row ═════════════════════════════════════════════ */

.dash-secondary-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.dash-mini-panel {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 16px 18px;
}
.dash-mini-label {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
}
.dash-mini-link {
    font-size: 0.64rem; font-weight: 600;
    color: var(--mud-palette-primary); letter-spacing: 0;
    text-transform: none; cursor: pointer;
}
.dash-mini-link:hover { text-decoration: underline; }
.dash-mini-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 0; font-size: 0.76rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    cursor: pointer;
}
.dash-mini-row:last-child { border-bottom: none; }
.dash-mini-row:hover { background: var(--mud-palette-background); }
.dash-mini-name {
    color: var(--mud-palette-text-primary); font-weight: 500;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-mini-val {
    font-weight: 700; margin-left: 12px; white-space: nowrap;
}
.dash-mini-val.good { color: var(--vx-success); }
.dash-mini-val.warn { color: var(--vx-warning); }
.dash-mini-val.err  { color: var(--vx-error); }
.dash-mini-val.mute { color: var(--mud-palette-text-secondary); }

.dash-mini-empty {
    font-size: 0.74rem; color: var(--mud-palette-text-secondary);
    padding: 10px 0; font-style: italic;
}


/* ══ Responsive ═════════════════════════════════════════════════════════
   Five breakpoints, declining viewport width. Higher breakpoints handle
   the layout transitions ("two-column → one-column"); lower breakpoints
   handle phone-specific concerns (touch targets, hiding decorative
   panels, compacting header metadata).

   Design philosophy (from Vectris_Mobile_Readability_Note_2026-04-24):
     • The page is read-and-act, not authoring — most users are scrolling
       through alerts, not editing.
     • The composite gauge is the signature visual; preserve it at every
       width. The 4-small-gauge decomposition is decorative; drop it on
       phones.
     • The heatmap is informational, not actionable; replace with the
       top-5 risks list on phones.
     • Touch targets ≥44px effective height on ≤600px breakpoints.
══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .dash-perf-hero {
        grid-template-columns: 1fr;
    }
    .dash-gauge-card { min-height: 280px; }
    .dash-work-grid  { grid-template-columns: 1fr; }
    .dash-obj-strip  { grid-template-columns: repeat(2, 1fr) !important; }
    .dash-secondary-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .dash-inner    { padding: 0 16px 20px; }
    .dash-header   { padding: 20px 20px 20px; }
    .dash-header-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .dash-header-right { align-items: flex-start; }
    .dash-header-date  { text-align: left; }
    .dash-obj-strip    { grid-template-columns: 1fr !important; }
    .dash-decomp-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet portrait + large phone landscape ─────────────────────────── */
@media (max-width: 768px) {
    .dash-feed-type {
        width: 32px; height: 32px;
        font-size: 0.52rem;
    }
    .dash-feed-item {
        gap: 10px;
        padding: 12px 16px;
    }
    .dash-decomp-cell { padding: 10px 8px 12px; }
    .dash-gauge-card  { padding: 18px 18px 16px; }
}

/* ── Phone landscape / small tablet — touch-first ────────────────────── */
@media (max-width: 600px) {
    .dash-inner { padding: 0 12px 16px; }

    /* Header: reflow eyebrow + title + identity for narrow viewport */
    .dash-header {
        padding: 18px 16px 16px;
        border-radius: 0 0 12px 12px;
    }
    .dash-header-eyebrow { font-size: 0.62rem; margin-bottom: 4px; }
    .dash-header-title   { font-size: 1.4rem; line-height: 1.2; }
    .dash-header-identity {
        font-size: 0.74rem;
        gap: 6px;
    }
    .dash-header-identity .dot { display: none; }
    .dash-header-identity > span:not(:first-child)::before {
        content: '·';
        margin-right: 6px;
        color: rgba(255,255,255,0.35);
    }
    .dash-header-date { font-size: 0.66rem; }

    /* Today's call: vertical stack so CTA gets full width */
    .dash-today-call {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px;
    }
    .dash-today-call-icon { align-self: flex-start; }
    .dash-today-call-cta  { text-align: center; padding: 10px 14px; }

    /* Decomposition: cells smaller, weight label hidden — "Risk 40%" was
       redundant detail on a small screen; the gauge band already conveys
       the point. */
    .dash-decomp-card { padding: 14px 14px 16px; }
    .dash-decomp-cell { padding: 8px 6px 10px; }
    .dash-decomp-weight { display: none; }
    .dash-decomp-name   { font-size: 0.62rem; }

    /* Filter chips: horizontal scroll strip rather than wrap */
    .dash-panel-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        margin: 0 -4px;
    }
    .dash-panel-filter::-webkit-scrollbar { display: none; }
    .dash-panel-filter > .vx-chip { flex-shrink: 0; }

    /* Feed item: drop chevron, tighter padding, larger touch target */
    .dash-feed-item {
        grid-template-columns: auto 1fr auto;
        padding: 14px 14px;
        min-height: 52px; /* ensures touch target */
    }
    .dash-feed-chevron { display: none; }
    .dash-feed-title   { font-size: 0.82rem; }
    .dash-feed-meta {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Heatmap: cells smaller on mobile */
    .dash-heatmap {
        grid-template-columns: 16px repeat(5, 26px);
        grid-template-rows: repeat(5, 26px);
    }
    .dash-heat-xrow {
        grid-template-columns: 16px repeat(5, 26px);
    }
    .dash-heatmap-wrap { padding: 10px 12px 8px; }

    /* Top risks: meta line wraps cleanly */
    .dash-top-risk { padding: 12px 14px; gap: 10px; }
    .dash-top-risk-title { font-size: 0.76rem; }

    /* Mini panels — reduced internal padding */
    .dash-mini-panel { padding: 14px 14px; }
    .dash-mini-row {
        padding: 10px 0;        /* bigger touch zone */
        font-size: 0.78rem;
    }

    /* Touch targets — × buttons and chips get a comfortable hit area */
    .obj-owner-remove,
    .dash-feed-item,
    .dash-mini-row,
    .dash-top-risk { min-height: 44px; }
}

/* ── Phone portrait — strip decorative panels, save vertical space ───── */
@media (max-width: 480px) {
    /* Decomposition card hidden entirely. Composite gauge is the headline;
       four small gauges below it are noise on a 380px screen. The 4-way
       breakdown is a desktop-comprehension feature. */
    .dash-decomp-card { display: none; }

    /* Heatmap hidden — top-5 list below it is more useful on a phone. */
    .dash-heatmap-wrap { display: none; }

    /* Header further compacted */
    .dash-header { padding: 14px 14px 14px; }
    .dash-header-eyebrow { display: none; }
    .dash-header-date    { display: none; }
    .dash-header-title   { font-size: 1.25rem; }

    /* Composite gauge card shrinks padding so the gauge dominates */
    .dash-gauge-card {
        padding: 16px 14px 14px;
        min-height: auto;
    }
    .dash-gauge-eyebrow  { font-size: 0.58rem; }
    .dash-gauge-title    { font-size: 0.92rem; margin-bottom: 12px; }
    .dash-gauge-footnote { font-size: 0.62rem; }

    /* Objectives strip: single column at this size */
    .dash-obj-strip { grid-template-columns: 1fr !important; }
    .dash-obj-card { padding: 12px 14px; }
    .dash-obj-card-title { -webkit-line-clamp: 3; min-height: 0; }

    /* Mini-row name truncation more aggressive */
    .dash-mini-name { max-width: 60%; }
}