/* Dashboard composition. Shared surfaces and controls remain owned by RevaCSS. */
.dash-site { background: var(--re-bg); color: var(--re-text); font-family:var(--re-font); font-size:var(--re-type); line-height:1.65; }
.dash-site [id] { scroll-margin-block-start:2rem; }
.dash-site > .app-shell { inline-size:min(calc(100% - 2rem),var(--re-container)); margin-inline:auto; padding-block:2rem; }
.dash-site > .app-shell > aside > header > a { font-size:2rem; letter-spacing:-.06em; }
.dash-note { margin-block-start:1rem; font-size:.85rem; }
.dash-note h2 { font-size:1.2rem; }
.dash-site > .app-shell > :is(main,section) { display:grid; align-content:start; gap:calc(var(--re-space) * 1.5); min-inline-size:0; }
.dash-site > .app-shell > header { gap:.5rem; padding:.5rem; }
.dash-site > .app-shell > header > strong { flex:1; min-inline-size:0; font-size:.85rem; }
.dash-site > .app-shell > header > :is(button,a) { flex:none; min-inline-size:2.75rem; min-block-size:2.75rem; }
.dash-heading { gap:1rem; padding-block:.75rem; }
.dash-heading h1 { font-size:clamp(1.7rem,2.7vw,2.65rem); margin:.25rem 0 .6rem; letter-spacing:-.045em; max-inline-size:24ch; }
.dash-heading p { margin:0; }
.dash-eyebrow { font-size:.65rem; font-weight:750; letter-spacing:.12em; color:var(--re-muted); margin-block:0 .4rem; }
.dash-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--re-space); }
.dash-charts { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:var(--re-space); }
.dash-site > .app-shell > :is(main,section) section > h2,.dash-site > .app-shell > :is(main,section) section > header h2 { font-size:1.1rem; margin-block:.25rem .8rem; }
.dash-series-1 { --dash-series:var(--re-primary); }
.dash-series-2 { --dash-series:color-mix(in srgb,var(--re-primary) 55%,var(--re-surface)); }
.dash-series-3 { --dash-series:color-mix(in srgb,var(--re-primary) 25%,var(--re-surface)); }
.dash-legend { margin:0; font-size:.8rem; }
.dash-legend > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.4rem; }
.dash-legend dt { display:flex; align-items:center; gap:.6rem; font-weight:500; }
.dash-legend dd { margin:0; font-weight:700; }
.dash-swatch { inline-size:.65rem; block-size:.65rem; border-radius:50%; background:var(--dash-series); }
.dash-site > .app-shell > :is(main,section) table { font-size:.8rem; }
.dash-site > .app-shell > :is(main,section) table caption { font-size:.75rem; }
.dash-site > .app-shell > :is(main,section) #dashboard-projects table { min-inline-size:40rem; }
.dash-owner { flex-wrap:nowrap; gap:.5rem; }
.dash-owner .avatar { inline-size:1.8rem; block-size:1.8rem; font-size:.65rem; }
.dash-progress { display:flex; align-items:center; gap:.5rem; min-inline-size:6rem; }
.dash-progress progress { inline-size:4rem; block-size:.45rem; }
.dash-bottom { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--re-space); }
.dash-summary { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.dash-summary p { font-size:.85rem; }
.dash-footer { color:var(--re-muted); font-size:.75rem; padding-block:1rem; }
@media (width < 75rem) { .dash-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (width < 42rem) { .dash-charts,.dash-bottom { grid-template-columns:minmax(0,1fr); } .dash-heading h1 { max-inline-size:none; } }
@media (width < 60rem) {
  .dash-site > .app-shell > header > a > span { display:none; }
  .dash-site > .app-shell > header > :is(button,a) { padding:.5rem; }
}
@media print { .dash-footer { display:none; } .dash-charts,.dash-bottom { grid-template-columns:1fr; } .dash-site > .app-shell > :is(main,section) #dashboard-projects table { min-inline-size:0; } }

/* Palette-driven demo-only backdrop for Glass and Veil. A clipped fixed layer
   stays stationary on touch devices too, without covering the workbench.
   The mesh inherits palette tokens, including custom token overrides. */
.demo-workbench:has(#demo-material option[value="glass"]:checked) .dash-site,
html[data-material="glass"] .dash-site,
.demo-workbench:has(#demo-material option[value="veil"]:checked) .dash-site,
html[data-material="veil"] .dash-site {
  position: relative;
  isolation: isolate;
  clip-path: inset(0);
  background: var(--re-bg);
}
.demo-workbench:has(#demo-material option[value="glass"]:checked) .dash-site::before,
html[data-material="glass"] .dash-site::before,
.demo-workbench:has(#demo-material option[value="veil"]:checked) .dash-site::before,
html[data-material="veil"] .dash-site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 92% 18%, color-mix(in srgb, var(--re-primary) 35%, var(--re-bg)), transparent 62%),
    radial-gradient(ellipse at 62% 82%, color-mix(in srgb, var(--re-primary-end) 24%, var(--re-bg)), transparent 66%),
    radial-gradient(ellipse at 12% 26%, color-mix(in srgb, var(--re-surface-alt) 65%, var(--re-bg)), transparent 65%),
    linear-gradient(145deg, color-mix(in srgb, var(--re-primary) 14%, var(--re-bg)), var(--re-bg));
}
.demo-workbench:has(#demo-material option[value="glass"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site::before,
html[data-material="glass"][data-contrast="more"] .dash-site::before,
.demo-workbench:has(#demo-material option[value="veil"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site::before,
html[data-material="veil"][data-contrast="more"] .dash-site::before { display: none; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
.demo-workbench:has(#demo-material option[value="glass"]:checked) .dash-site,
html[data-material="glass"] .dash-site,
.demo-workbench:has(#demo-material option[value="veil"]:checked) .dash-site,
html[data-material="veil"] .dash-site,
.demo-workbench:has(#demo-material option[value="glass"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site,
html[data-material="glass"][data-contrast="more"] .dash-site,
.demo-workbench:has(#demo-material option[value="veil"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site,
html[data-material="veil"][data-contrast="more"] .dash-site { background: var(--re-bg); }
.demo-workbench:has(#demo-material option[value="glass"]:checked) .dash-site::before,
html[data-material="glass"] .dash-site::before,
.demo-workbench:has(#demo-material option[value="veil"]:checked) .dash-site::before,
html[data-material="veil"] .dash-site::before,
.demo-workbench:has(#demo-material option[value="glass"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site::before,
html[data-material="glass"][data-contrast="more"] .dash-site::before,
.demo-workbench:has(#demo-material option[value="veil"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site::before,
html[data-material="veil"][data-contrast="more"] .dash-site::before { display: none; }
}
@media (forced-colors: active) {
.demo-workbench:has(#demo-material option[value="glass"]:checked) .dash-site,
html[data-material="glass"] .dash-site,
.demo-workbench:has(#demo-material option[value="veil"]:checked) .dash-site,
html[data-material="veil"] .dash-site,
.demo-workbench:has(#demo-material option[value="glass"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site,
html[data-material="glass"][data-contrast="more"] .dash-site,
.demo-workbench:has(#demo-material option[value="veil"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site,
html[data-material="veil"][data-contrast="more"] .dash-site { background: Canvas; }
.demo-workbench:has(#demo-material option[value="glass"]:checked) .dash-site::before,
html[data-material="glass"] .dash-site::before,
.demo-workbench:has(#demo-material option[value="veil"]:checked) .dash-site::before,
html[data-material="veil"] .dash-site::before,
.demo-workbench:has(#demo-material option[value="glass"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site::before,
html[data-material="glass"][data-contrast="more"] .dash-site::before,
.demo-workbench:has(#demo-material option[value="veil"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site::before,
html[data-material="veil"][data-contrast="more"] .dash-site::before { display: none; }
}
@media print {
.demo-workbench:has(#demo-material option[value="glass"]:checked) .dash-site,
html[data-material="glass"] .dash-site,
.demo-workbench:has(#demo-material option[value="veil"]:checked) .dash-site,
html[data-material="veil"] .dash-site,
.demo-workbench:has(#demo-material option[value="glass"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site,
html[data-material="glass"][data-contrast="more"] .dash-site,
.demo-workbench:has(#demo-material option[value="veil"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site,
html[data-material="veil"][data-contrast="more"] .dash-site { background: #fff; color: #000; }
.demo-workbench:has(#demo-material option[value="glass"]:checked) .dash-site::before,
html[data-material="glass"] .dash-site::before,
.demo-workbench:has(#demo-material option[value="veil"]:checked) .dash-site::before,
html[data-material="veil"] .dash-site::before,
.demo-workbench:has(#demo-material option[value="glass"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site::before,
html[data-material="glass"][data-contrast="more"] .dash-site::before,
.demo-workbench:has(#demo-material option[value="veil"]:checked):has(#demo-contrast option[value="more"]:checked) .dash-site::before,
html[data-material="veil"][data-contrast="more"] .dash-site::before { display: none; }
}