/* ============================================================
   Dashboard (next) — styles for dashboard-next.js.
   Loads after ivy-refresh.css and uses its tokens (--bg, --card,
   --line, --teal, --danger, --warn, --ok, --fg, --muted ...).
   The few new values (building series colors, goal line) are
   tokens here, so the screen file carries no colors.
   ============================================================ */

.dn { display: flex; flex-direction: column; gap: 20px; max-width: 1440px; min-width: 0; color: var(--fg); }
.dn *, .dn *::before, .dn *::after { box-sizing: border-box; }
.dn [hidden] { display: none !important; }
.dn a { color: inherit; }
.dn a:hover { text-decoration: none; }
.dn-i { width: 16px; height: 16px; flex: none; }

/* series color classes: text color drives stroke/fill below */
.dn-s-davenport { color: var(--bldg-davenport); }
.dn-s-angel-oak { color: var(--bldg-angel-oak); }
.dn-s-silver-oak { color: var(--bldg-silver-oak); }

/* ---------- header ---------- */
.dn-head { display: flex; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.dn-head-text { flex: 1 1 420px; min-width: 0; }
.dn-head h1 { margin: 0; }
.dn-eyebrow { margin-bottom: 4px; }
.dn-sub { margin-top: 6px; }
.dn-sub b { color: var(--fg); font-weight: 650; }
.dn-sub .btd-howto { margin-left: 6px; font-size: var(--fs-md); }
.dn-urgent { display: inline-flex; align-items: center; gap: 6px; color: var(--danger-ink); font-weight: 650; }
.dn-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.dn-freshrow { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; }
.dn-fresh { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.dn-fresh::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.dn-fresh.is-stale::before { background: var(--warn); }
.dn-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dn-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: var(--fs-base); font-weight: 600; color: var(--teal) !important; margin-bottom: -8px; }

/* ---------- buttons, chips, status ---------- */
.dn-btn { color: var(--fg); }
.dn-btn:hover { background: var(--surface-hover); }
.dn-btn[disabled] { opacity: 0.5; pointer-events: none; }
.dn-btn .dn-i { width: 15px; height: 15px; }
.dn-btn-primary { background: var(--teal); border-color: var(--teal); color: var(--on-solid) !important; }
.dn-btn-primary:hover { background: var(--teal-deep); }
.dn-btn-ghost { background: transparent; border-color: transparent; color: var(--fg-soft); }
.dn-btn-ghost:hover { background: var(--surface-hover); color: var(--fg) !important; }
.dn-btn-soft { background: var(--teal-soft); border-color: transparent; color: var(--brand-ink); }
.dn-btn-soft:hover { background: var(--teal-line); }
.dn-btn-block { width: 100%; }
.dn-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-base); font-weight: 600; color: var(--teal) !important; }
.dn-link .dn-i { width: 14px; height: 14px; }

.dn-chip { border: 1px solid var(--line); background: var(--surface-sunk); color: var(--fg-soft); }
.dn-chip.is-bad { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.dn-chip.is-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.dn-chip.is-ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.dn-chip.is-info { background: var(--info-soft); border-color: var(--info-soft); color: var(--info-ink); }

.dn-status { align-items: center; white-space: nowrap; color: var(--fg-soft); }
.dn-status .dn-i { width: 13px; height: 13px; }
.dn-status.is-bad { color: var(--danger-ink); } .dn-status.is-bad .dn-i { color: var(--danger); }
.dn-status.is-warn { color: var(--warn-ink); } .dn-status.is-warn .dn-i { color: var(--warn); }
.dn-status.is-ok { color: var(--ok-ink); } .dn-status.is-ok .dn-i { color: var(--ok); }
.dn-status.is-info { color: var(--info-ink); }
.dn-status.is-muted { color: var(--muted); }

.dn-delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; }
.dn-delta .dn-i { width: 12px; height: 12px; }
.dn-delta.is-good { color: var(--ok-ink); } .dn-delta.is-bad { color: var(--danger-ink); } .dn-delta.is-flat { color: var(--muted); }
.dn-quiet { color: var(--muted); font-size: var(--fs-sm); font-style: italic; }
.dn-count { background: var(--surface-sunk); color: var(--fg-soft); font-family: var(--font-sans); vertical-align: 2px; }
.dn-count.is-brand { background: var(--teal); color: var(--on-solid); }
.dn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: currentColor; flex: none; }
.dn-bchip { background: var(--surface-sunk); color: var(--fg-soft); }
.dn-bchip .dn-i { width: 12px; height: 12px; color: var(--muted); }

.dn-av { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; color: var(--on-solid); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.02em; }
.dn-av.a0 { background: var(--av-0); } .dn-av.a1 { background: var(--av-1); } .dn-av.a2 { background: var(--av-2); }
.dn-av.a3 { background: var(--av-3); } .dn-av.a4 { background: var(--av-4); } .dn-av.a5 { background: var(--av-5); }

/* ---------- cards ---------- */
.dn-card { min-width: 0; }
.dn-pad { padding: 16px 18px; }
.dn-gap { margin-top: 4px; }
.dn-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px 0; }
.dn-card-head-line { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dn-card-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.dn-needs .dn-card-title, .dn-queue .dn-card-title { font-size: var(--fs-xl); }
.dn-card-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.dn-card-body { padding: 14px 18px 18px; }
.dn-section-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 -8px; }
.dn-section-title h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; }
.dn-section-title span { font-size: var(--fs-sm); color: var(--muted); }
.dn-note { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--muted); }

.dn-banner { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--danger-line); background: var(--danger-soft); color: var(--danger-ink); }
.dn-banner .dn-i { width: 20px; height: 20px; color: var(--danger); margin-top: 1px; }
.dn-banner-title { font-weight: 700; }
.dn-banner ul { margin: 4px 0 0 18px; padding: 0; }

/* ---------- building cards (portfolio) ---------- */
.dn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dn-bcard { display: flex; flex-direction: column; overflow: hidden; }
.dn-bcard-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; }
.dn-swatch { flex: none; width: 6px; align-self: stretch; border-radius: 3px; background: currentColor; }
.dn-bcard-name { flex: 1; min-width: 0; }
.dn-bcard-name h3 { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.015em; }
.dn-bcard-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.dn-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 18px 13px; transition: background 120ms; }
.dn-m:hover { background: var(--surface-hover); }
.dn-m:nth-child(even) { border-left: 1px solid var(--line); }
.dn-m:nth-child(n+3) { border-top: 1px solid var(--line); }
.dn-m-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.dn-m-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-width: 0; min-height: 30px; }
.dn-m-value { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dn-m-value small, .dn-kpi-value small { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin-left: 1px; letter-spacing: 0; }
.dn-m.is-empty .dn-m-value { color: var(--muted); }
.dn-m-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: var(--fs-xs); color: var(--muted); min-height: 18px; }
.dn-m-note .dn-status { white-space: normal; }

.dn-spark { flex: none; display: block; overflow: visible; margin-bottom: 3px; }
.dn-spark .dn-line { stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dn-spark .dn-area { fill: currentColor; opacity: 0.1; }
.dn-spark .dn-end { fill: currentColor; }
.dn-target { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.dn-target-lg { stroke-width: 1.5; stroke-dasharray: 5 4; }
.dn-track { fill: var(--surface-sunk); }
.dn-fill { fill: currentColor; }
.dn-meter .dn-fill.is-under { fill: var(--teal); }
.dn-meter .dn-fill.is-near { fill: var(--warn); }
.dn-meter .dn-fill.is-over { fill: var(--danger); }
.dn-meter .dn-fill-2 { opacity: 0.55; }
.dn-meter .dn-target { stroke: var(--fg-soft); stroke-dasharray: 2 2; }
.dn-bar { fill: var(--line-strong); }
.dn-bar-hot { fill: var(--danger); }

.dn-survey { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--line); background: var(--surface-2); transition: background 120ms; }
.dn-survey:hover { background: var(--surface-hover); }
.dn-survey.is-empty { justify-content: space-between; }
.dn-survey-score { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 4px solid var(--surface-sunk); line-height: 1; }
.dn-survey-score b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 750; }
.dn-survey-score small { font-size: var(--fs-3xs); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: -8px; }
.dn-survey-score.is-bad { border-color: var(--danger); } .dn-survey-score.is-warn { border-color: var(--warn); }
.dn-survey-score.is-info { border-color: var(--info); } .dn-survey-score.is-ok { border-color: var(--ok); }
.dn-survey-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dn-survey-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dn-survey-why { font-size: var(--fs-sm); color: var(--fg-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dn-survey-rail { border-top: 0; background: transparent; border-radius: 14px; padding: 16px 18px; }

.dn-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.dn-people a { display: flex; align-items: center; gap: 8px; padding: 11px 18px; font-size: var(--fs-sm); color: var(--fg-soft); min-width: 0; }
.dn-people a:hover { background: var(--surface-hover); }
.dn-people a + a { border-left: 1px solid var(--line); }
.dn-people .dn-i { color: var(--muted); }
.dn-people b { font-family: var(--font-display); font-size: var(--fs-lead); color: var(--fg); margin-right: 2px; }
.dn-people a.is-bad b, .dn-people a.is-bad .dn-i { color: var(--danger); }

.dn-raise { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 18px 16px; border-top: 1px solid var(--line); }
.dn-raise .dn-eyebrow { margin: 0; }
.dn-raise p { margin: 0; padding-left: 12px; border-left: 2px solid var(--teal-line); line-height: 1.5; font-size: var(--fs-md); }
.dn-raise.is-ok p { border-left-color: var(--ok-line); color: var(--fg-soft); }
.dn-raise .dn-link { margin-left: 12px; }
.dn-bcard-foot { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }

/* ---------- task rows (Needs someone / Needs you) ---------- */
.dn-needs, .dn-queue { overflow: hidden; }
.dn-task { position: relative; display: grid; grid-template-columns: 4px 36px minmax(0, 1fr) auto; gap: 0 14px; align-items: center; padding: 14px 18px 14px 0; border-top: 1px solid var(--line); background: var(--card); }
.dn-tasks > .dn-task:first-child { border-top: 0; }
.dn-task:hover { background: var(--surface-hover); }
.dn-rail { align-self: stretch; border-radius: 0 3px 3px 0; background: var(--line); }
.dn-rail.is-bad { background: var(--danger); } .dn-rail.is-warn { background: var(--warn); } .dn-rail.is-ok { background: var(--ok); }
.dn-task-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunk); color: var(--fg-soft); }
.dn-task-icon .dn-i { width: 18px; height: 18px; }
.dn-task-icon.is-bad { background: var(--danger-soft); color: var(--danger); }
.dn-task-icon.is-ok { background: var(--ok-soft); color: var(--ok); }
.dn-task-main { min-width: 0; }
.dn-task-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 650; }
.dn-task-why { font-size: var(--fs-base); color: var(--fg-soft); margin-top: 2px; max-width: 76ch; }
.dn-task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; font-size: var(--fs-xs); color: var(--muted); }
.dn-lane { font-weight: 600; }
.dn-task-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.dn-task.is-done { background: var(--surface-2); }
.dn-task.is-done .dn-task-title span:last-child { color: var(--muted); text-decoration: line-through; }
.dn-more { display: block; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--teal); font: inherit; font-size: var(--fs-base); font-weight: 650; cursor: pointer; }
.dn-more:hover { background: var(--surface-hover); }
.dn-clear { display: flex; align-items: center; gap: 14px; margin: 18px; padding: 18px; border-radius: 12px; background: var(--ok-soft); color: var(--ok-ink); }
.dn-clear > .dn-i { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--ok); color: var(--on-solid); }
.dn-clear b { display: block; font-size: var(--fs-xl); }
.dn-clear span { font-size: var(--fs-base); }

.dn-group-head { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-soft); }
.dn-group-head span { display: inline-flex; align-items: center; gap: 7px; }
.dn-group-head.is-now span { color: var(--danger-ink); }
.dn-group-head em { margin-left: auto; font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.dn-group-head + .dn-task { border-top: 0; }
.dn-tasks > .dn-group-head:first-child { border-top: 0; }
.dn-lanes { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.dn-lanechip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg-soft); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.dn-lanechip .dn-i { width: 14px; height: 14px; }
.dn-lanechip span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-sunk); font-size: var(--fs-xs); }
.dn-lanechip.is-on { background: var(--fg); border-color: var(--fg); color: var(--card); }
.dn-lanechip.is-on span { background: rgba(255, 255, 255, 0.2); color: var(--card); }

/* ---------- compare: chart + hours ---------- */
.dn-compare { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dn-seg { flex: none; }
.dn-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-soft); }
.dn-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dn-legend-sm { margin: 10px 0 0; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.dn-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.dn-key.is-dash { background: repeating-linear-gradient(90deg, var(--faint) 0 4px, transparent 4px 7px); }
.dn-key.is-solid { height: 8px; background: var(--teal); }
.dn-key.is-plan { height: 8px; background: var(--teal-line); }
.dn-key.is-on { height: 8px; background: var(--teal); }
.dn-key.is-under { height: 8px; background: var(--teal-line); }
.dn-key.is-over { height: 8px; background: var(--warn); }
.dn-chartwrap { position: relative; width: 100%; min-height: 210px; }
.dn-chart { display: block; overflow: visible; max-width: 100%; }
.dn-chart:focus { outline: none; }
.dn-chart:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }
.dn-grid { stroke: var(--line); stroke-width: 1; }
.dn-tick { font-size: var(--fs-xs); fill: var(--muted); font-family: var(--font-sans); }
.dn-tick.is-now { font-weight: 700; fill: var(--fg); }
.dn-cross { stroke: var(--line-strong); stroke-width: 1; }
.dn-series { stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dn-series-end { fill: currentColor; stroke: var(--card); stroke-width: 2; }
.dn-endlabel { font-size: var(--fs-sm); font-family: var(--font-sans); fill: var(--fg-soft); }
.dn-endv { font-weight: 700; fill: var(--fg); }
.dn-tip { position: absolute; z-index: 2; min-width: 160px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); font-size: var(--fs-sm); pointer-events: none; opacity: 0; transition: opacity 100ms; }
.dn-tip.is-on { opacity: 1; }
.dn-tip-day { font-weight: 700; margin-bottom: 4px; }
.dn-tip-row { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.dn-tip-row span { flex: 1; color: var(--fg-soft); }
.dn-tip-row b { font-variant-numeric: tabular-nums; }
.dn-tip-row.is-goal { margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--line); }
.dn-ontarget { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 14px 14px; }
.dn-ot-cell { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; min-width: 0; }
.dn-ot-cell + .dn-ot-cell { border-left: 1px solid var(--line); }
.dn-ot-name { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 650; }
.dn-ot-n { font-size: var(--fs-base); color: var(--fg-soft); }
.dn-ot-n b { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--fg); }
.dn-tablewrap { overflow-x: auto; }
.dn-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.dn-table th { text-align: left; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dn-table th .dn-dot { margin-right: 5px; }
.dn-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.dn-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dn-table td.is-off { color: var(--danger-ink); font-weight: 650; }

.dn-hours { display: flex; flex-direction: column; gap: 14px; }
.dn-hrow-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dn-hbar { display: block; width: 100%; height: 10px; }
.dn-hbar .dn-plan { fill: var(--teal-line); }
.dn-hrow-nums { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }
.dn-hrow-nums b { color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---------- KPI strip ---------- */
.dn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); overflow: hidden; }
.dn-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; border-left: 1px solid var(--line); transition: background 120ms; }
.dn-kpi:first-child { border-left: 0; }
a.dn-kpi:hover { background: var(--surface-hover); }
.dn-kpi-label { display: flex; align-items: center; gap: 6px; }
.dn-kpi-label .dn-go { width: 13px; height: 13px; color: var(--muted); opacity: 0; transition: opacity 120ms; }
a.dn-kpi:hover .dn-go { opacity: 1; }
.dn-kpi-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 34px; }
.dn-kpi-value { white-space: nowrap; }
.dn-kpi-value.is-word { font-size: var(--fs-2xl); }
.dn-kpi-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- building home: queue + rail ---------- */
.dn-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.dn-home.has-rail { grid-template-columns: minmax(0, 1fr) 340px; }
.dn-rail-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dn-rail-empty { margin: 0; padding: 4px 18px 16px; font-size: var(--fs-base); color: var(--muted); }
.dn-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 12px 14px 10px; }
.dn-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 9px; border-radius: 10px; font-size: var(--fs-2xs); color: var(--muted); }
.dn-day b { font-size: var(--fs-lead); color: var(--fg); font-variant-numeric: tabular-nums; }
.dn-day.is-now { background: var(--teal-soft); } .dn-day.is-now b { color: var(--teal); }
.dn-day i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: var(--on-solid); font-size: var(--fs-2xs); font-weight: 750; font-style: normal; }
.dn-day i.is-more { background: var(--line); color: var(--fg-soft); }
.dn-day-gap { width: 24px; height: 24px; }
.dn-person { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); }
.dn-person:hover { background: var(--surface-hover); }
.dn-person .dn-av { width: 32px; height: 32px; font-size: var(--fs-xs); }
.dn-person-main { flex: 1; min-width: 0; }
.dn-person-main b { display: block; font-size: var(--fs-base); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-person-main small { display: block; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-daybar.is-on { fill: var(--teal); }
.dn-daybar.is-under { fill: var(--teal-line); }
.dn-daybar.is-over { fill: var(--warn); }

/* ---------- empty / error / skeleton ---------- */
.dn-empty { max-width: 560px; margin: 40px auto; padding: 30px; text-align: center; }
.dn-empty h2 { margin: 12px 0 6px; font-family: var(--font-display); font-size: var(--fs-2xl); }
.dn-empty p { margin: 0; color: var(--fg-soft); }
.dn-empty-badge { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); }
.dn-empty-badge .dn-i { width: 24px; height: 24px; }
.dn-empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dn-skel { border-radius: 6px; background: linear-gradient(90deg, var(--surface-sunk) 0%, var(--surface-hover) 50%, var(--surface-sunk) 100%); background-size: 200% 100%; animation: dn-shimmer 1.3s ease-in-out infinite; }
.dn-skel + .dn-skel { margin-top: 8px; }
.dn-skel-eyebrow { width: 120px; height: 10px; }
.dn-skel-h1 { width: 300px; max-width: 70%; height: 30px; }
.dn-skel-line { width: 80%; height: 11px; }
.dn-skel-line.short { width: 45%; }
.dn-skel-num { width: 70px; height: 24px; }
.dn-skel-chart { width: 100%; height: 160px; margin-top: 14px; }
.dn-skel-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.dn-skel-row { display: flex; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--line); }
.dn-skel-row:first-child { border-top: 0; }
.dn-skel-row > div:last-child { flex: 1; }
@keyframes dn-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .dn-skel { animation: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .dn-compare { grid-template-columns: minmax(0, 1fr); }
  .dn-home.has-rail { grid-template-columns: minmax(0, 1fr); }
  .dn-rail-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 1100px) {
  .dn-cards { grid-template-columns: minmax(0, 1fr); }
  .dn-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dn-m:nth-child(n+3) { border-top: 0; }
  .dn-m + .dn-m { border-left: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .dn { gap: 16px; }
  .dn-head-actions { width: 100%; }
  .dn-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-m:nth-child(n+3) { border-top: 1px solid var(--line); }
  .dn-m + .dn-m { border-left: 0; }
  .dn-m:nth-child(even) { border-left: 1px solid var(--line); }
  .dn-m { padding: 11px 14px 12px; }
  .dn-m-value { font-size: var(--fs-3xl); }
  .dn-m-row .dn-spark { width: 56px; }
  .dn-bcard-head, .dn-survey, .dn-raise, .dn-bcard-foot { padding-left: 14px; padding-right: 14px; }
  .dn-people a { padding: 11px 14px; }
  .dn-task { grid-template-columns: 4px 32px minmax(0, 1fr); gap: 0 12px; padding: 13px 14px 13px 0; }
  .dn-task-icon, .dn-task .dn-av { width: 32px; height: 32px; }
  .dn-task-actions { grid-column: 3; justify-content: flex-start; margin-top: 10px; }
  .dn-card-head { padding: 14px 14px 0; }
  .dn-card-head-line { padding-bottom: 12px; }
  .dn-card-body { padding: 12px 14px 14px; }
  .dn-ontarget { grid-template-columns: minmax(0, 1fr); }
  .dn-ot-cell + .dn-ot-cell { border-left: 0; border-top: 1px solid var(--line); }
  .dn-ot-cell { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; }
  .dn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-kpi { border-left: 0; border-top: 1px solid var(--line); }
  .dn-kpi:nth-child(-n+2) { border-top: 0; }
  .dn-kpi:nth-child(even) { border-left: 1px solid var(--line); }
  .dn-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dn-kpi-mid .dn-spark { width: 56px; }
  .dn-group-head em { display: none; }
  .dn-lanes { flex-wrap: nowrap; overflow-x: auto; padding: 10px 14px; }
  .dn-rail-col { grid-template-columns: minmax(0, 1fr); }
}
.dn-gapnote { color: var(--danger-ink); font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; }
.dn-kpi-foot .dn-status { white-space: normal; }
.dn-kpi-foot > span:not(.dn-status):not(.dn-delta) { min-width: 0; }

/* A known gap in what Ivy holds, not a problem to fix. */
.dn-quietnote { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- POC countdown (building Today + portfolio card) ---------- */
.dn-countdown { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; border: 1px solid var(--info-soft); background: var(--info-soft); color: var(--info-ink); font-size: var(--fs-md); text-decoration: none; min-width: 0; }
.dn-countdown:hover { text-decoration: none; filter: brightness(0.98); }
.dn-countdown > .dn-i { width: 18px; height: 18px; flex: none; }
.dn-countdown.is-warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn-ink); }
.dn-countdown.is-bad { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-ink); }
.dn-countdown-text { display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.dn-countdown-text b { font-weight: 700; }
.dn-countdown-text span::before { content: "\00b7"; margin-right: 8px; }
.dn-countdown-go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 650; white-space: nowrap; }
.dn-countdown-go .dn-i { width: 14px; height: 14px; }
.dn-bcard > .dn-countdown { margin: 0 18px 12px; border-radius: 10px; font-size: var(--fs-base); padding: 9px 12px; }
.dn-bcard > .dn-countdown .dn-countdown-text { flex-direction: column; }
.dn-bcard > .dn-countdown .dn-countdown-text span::before { content: none; }

/* ---------- Needs you, in sections ---------- */
.dn-mtgs { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.dn-mtg { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 18px; font-size: var(--fs-base); }
.dn-mtg + .dn-mtg { border-top: 1px solid var(--line); }
.dn-mtg-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--fs-sm); }
.dn-mtg-name { font-weight: 600; min-width: 0; }
.dn-mtg-go { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 18px 14px; font-size: var(--fs-sm); color: var(--muted); }
.dn-sec-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 18px; font-size: var(--fs-base); color: var(--muted); }
.dn-sec-empty .dn-i { width: 16px; height: 16px; color: var(--ok); flex: none; }
.dn-later { border-top: 1px solid var(--line); }
.dn-later > summary { list-style: none; cursor: pointer; border-top: 0; }
.dn-later > summary::-webkit-details-marker { display: none; }
.dn-later-caret { width: 13px; height: 13px; transition: transform 0.15s ease; }
.dn-later[open] .dn-later-caret { transform: rotate(90deg); }
.dn-later[open] > summary { border-bottom: 1px solid var(--line); }
@media (max-width: 720px) {
  .dn-countdown { flex-wrap: wrap; padding: 10px 14px; }
  .dn-countdown-text { flex-direction: column; }
  .dn-countdown-text span::before { content: none; }
  .dn-countdown-go { margin-left: 28px; }
  .dn-bcard > .dn-countdown { margin: 0 14px 12px; }
  .dn-mtg { grid-template-columns: 52px minmax(0, 1fr); padding: 9px 14px; row-gap: 4px; }
  .dn-mtg .dn-status { grid-column: 2; }
  .dn-mtg-go { padding: 10px 14px 14px; }
  .dn-sec-empty { padding: 12px 14px; }
}