sets the section title
typography. Underline accent uses --la-stripe so each area gets
its own colored bar.
────────────────────────────────────────────────────────────────── */
.dashboard-section__title {
font-size: var(--fs-2xl);
font-weight: 700;
letter-spacing: -0.2px;
color: var(--text);
margin: 0 0 var(--sp-4) 0;
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--border);
line-height: var(--lh-tight);
}
.dashboard-section__title::after {
content: "";
display: block;
width: var(--sp-7);
height: 2px;
margin-top: var(--sp-2);
background: var(--la-stripe, var(--accent));
border-radius: 2px;
}
/* ──────────────────────────────────────────────────────────────────
§3. Section body grid
The
mounts tile children.
Lock to 4 columns at ≥1280px, drop to 3 at 1024-1279px, 2 at
901-1023px. Below 901px the mobile stylesheet (css/dashboard.mobile.css)
takes over.
Tiles request a column span via root.dataset.span = '2' | '4' | 'full'
(no inline grid-column styles in render paths).
────────────────────────────────────────────────────────────────── */
.dashboard-section__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-3);
grid-auto-flow: dense;
}
@media (max-width: 1279px) {
.dashboard-section__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1023px) {
.dashboard-section__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.dashboard-section__grid > [data-span="2"] {
grid-column: span 2;
}
.dashboard-section__grid > [data-span="4"],
.dashboard-section__grid > [data-span="full"] {
grid-column: 1 / -1;
}
@media (max-width: 1023px) {
.dashboard-section__grid > [data-span="2"],
.dashboard-section__grid > [data-span="4"],
.dashboard-section__grid > [data-span="full"] {
grid-column: 1 / -1;
}
}
/* ──────────────────────────────────────────────────────────────────
§4. Per-area accent variables
Each .dashboard-section--{areaId} sets --la-stripe (the section
stripe color) and --la-tint (the section background wash) using
the per-area tokens from css/app.css :root. The 8 --c-{area}-dim
tokens were added in the same task for this purpose.
────────────────────────────────────────────────────────────────── */
.dashboard-section--finance {
--la-stripe: var(--c-finance);
--la-tint: var(--c-finance-dim);
}
.dashboard-section--marriage {
--la-stripe: var(--c-marriage);
--la-tint: var(--c-marriage-dim);
}
.dashboard-section--travel {
--la-stripe: var(--c-travel);
--la-tint: var(--c-travel-dim);
}
.dashboard-section--health {
--la-stripe: var(--c-health);
--la-tint: var(--c-health-dim);
}
.dashboard-section--knowledge {
--la-stripe: var(--c-career);
--la-tint: var(--c-career-dim);
}
.dashboard-section--growth {
--la-stripe: var(--c-growth);
--la-tint: var(--c-growth-dim);
}
.dashboard-section--family {
--la-stripe: var(--c-family);
--la-tint: var(--c-family-dim);
}
.dashboard-section--spirit {
--la-stripe: var(--c-spirit);
--la-tint: var(--c-spirit-dim);
}
.dashboard-section--cross_cutting {
--la-stripe: var(--border-2);
--la-tint: var(--accent-glow);
background: transparent;
border-style: dashed;
margin-top: var(--sp-6);
}
/* ──────────────────────────────────────────────────────────────────
§5. Per-tile
Children of .dashboard-section__grid. The .dashboard-card class
already exists in app.css; these rules add the section-context
refinements (size, hover, focus-visible).
AC-11 — :focus-visible uses var(--accent) (the --accent-main
token ui_reviewer named === --accent in actual app.css).
────────────────────────────────────────────────────────────────── */
.dashboard-section__grid > .dashboard-card {
background: var(--card-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--sp-3) var(--sp-4);
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.dashboard-section__grid > .dashboard-card:hover {
border-color: var(--border-2);
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.dashboard-section__grid > .dashboard-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ──────────────────────────────────────────────────────────────────
§6. Empty-state pattern
Health / Knowledge / Growth / Family / Spirit and any other
lightweight Life-Area section with zero registered tiles render
a single .dashboard-section__placeholder element in their grid
with the copy "Section ready for customization" (AC-8).
system_specialist's _renderChrome emits this when the tile
bucket for a section is empty.
────────────────────────────────────────────────────────────────── */
.dashboard-section__placeholder {
grid-column: 1 / -1;
padding: var(--sp-4) var(--sp-5);
background: var(--card-2);
border: 1px dashed var(--border-2);
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: var(--fs-md);
font-style: italic;
text-align: center;
}
/* ──────────────────────────────────────────────────────────────────
§7. Save Up Top 3 specific (AC-4 token compliance hook)
ui_reviewer's mockup AC text named '--bg-surface' and '--r-md';
the actual app.css tokens are --surface (the dark editorial
surface tone) and --radius-sm (the small radius tier).
finance_specialist's tile JS emits class
.fin-tile-save-up-top3 on the tile root inside .dashboard-card.
────────────────────────────────────────────────────────────────── */
.fin-tile-save-up-top3 {
background: var(--surface);
border-radius: var(--radius-sm);
}
.fin-tile-save-up-top3 .goal-mini {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-1) 0;
border-top: 1px dashed var(--border);
font-size: var(--fs-md);
}
.fin-tile-save-up-top3 .goal-mini:first-child {
border-top: 0;
}
.fin-tile-save-up-top3 .goal-mini .progress {
flex: 1;
height: 6px;
background: var(--surface);
border-radius: 3px;
overflow: hidden;
}
.fin-tile-save-up-top3 .goal-mini .progress > i {
display: block;
height: 100%;
background: var(--c-finance);
}
.fin-tile-save-up-top3 .goal-mini .name {
width: 110px;
color: var(--text-muted);
}
.fin-tile-save-up-top3 .goal-mini .amt {
font-variant-numeric: tabular-nums;
color: var(--text-muted);
width: 90px;
text-align: right;
}
/* ──────────────────────────────────────────────────────────────────
§8. Top + stats slot (AC-2 distinct visual treatment)
.dashboard-area-top and .dashboard-area-stats live above the
Life-Area section cluster as ambient context (welcome / weather
/ aggregate stats). They MUST visually read as "outside" the
section group — no card chrome, just spacing.
Existing styles in app.css L697-953 are preserved; this block
only ensures separation from the first Life-Area section.
────────────────────────────────────────────────────────────────── */
.dashboard-area-top,
.dashboard-area-stats {
margin-bottom: var(--sp-5);
}
.dashboard-area-stats {
padding: 0;
background: transparent;
border: 0;
}