/* Shared stylesheet for every page on the site.
   Themes are scoped by a class on <html>: "public" (dark splash/404 pages) or
   "dashboard" (light portfolio pages), so neither leaks into the other. */
* { box-sizing: border-box }

/* ------------------------------------------------------------------------- */
/* Public pages: splash page and 404                                          */
/* ------------------------------------------------------------------------- */
.public {
    --bg: #17191b;
    --text: #c9cbcd;
    --strong: #f2f3f4;
    --muted: #85898d;
    --underline: #5c6166;
    --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--bg);
    color-scheme: dark;
}
.public body { margin: 0; min-height: 100vh; color: var(--text); font: 1.15rem/1.7 var(--serif) }
.public h1 { margin: 0; color: var(--strong); letter-spacing: -.02em; font: 700 2rem/1.1 var(--sans) }
.public p { margin: 0 0 1.1rem }
.public a { color: var(--strong); text-decoration: underline; text-decoration-color: var(--underline);
            text-underline-offset: 3px }
.public a:hover { text-decoration-color: currentColor }

/* Splash page: left-aligned column, vertically centred, footer at the bottom. */
.splash { display: flex; flex-direction: column; padding: 0 clamp(24px, 8.5vw, 132px) }
.splash main { flex: 1; display: flex; flex-direction: column; justify-content: center;
               max-width: 38rem; padding: 96px 0 48px }
.splash h1 { margin-bottom: 1.2rem; font-size: clamp(2.2rem, 5vw, 2.9rem) }
.splash footer { padding: 0 0 40px; font-size: .9rem; color: var(--muted) }

/* Error pages: a short centred message. */
.error { display: grid; place-content: center; padding: 24px; text-align: center }
.error h1 { margin-bottom: .5rem }

/* ------------------------------------------------------------------------- */
/* Portfolio dashboards (rendered by dashboard.py)                            */
/* ------------------------------------------------------------------------- */
.dashboard body{background:#f8f9fa;color:#212529;margin:0;padding:40px 24px;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.dashboard .container{max-width:1040px;margin:0 auto}
.dashboard .dash-header{margin:0 0 26px;padding-left:4px}
.dashboard .dash-header h1{margin:0;font-weight:700;font-size:1.65rem;letter-spacing:-.01em}
.dashboard .dash-header p{margin:.5rem 0 0;color:#6c757d}
.dashboard .card{background:#fff;border-radius:16px;padding:20px 24px;margin-bottom:24px;min-width:0;
  box-shadow:0 4px 20px rgba(0,0,0,.04)}
.dashboard .card-title{font-size:1.1rem;font-weight:400;color:#2a3f5f;margin:0 0 18px}
.dashboard .table-wrap{overflow-x:auto}
.dashboard table.custom-dashboard-table{font-size:.82rem;width:100%;border-collapse:collapse}
.dashboard .custom-dashboard-table thead th{background:#f8f9fa;color:#6c757d;font-weight:600;
  text-transform:uppercase;font-size:.65rem;letter-spacing:.5px;
  border-bottom:2px solid #dee2e6;padding:10px;text-align:right;white-space:nowrap}
.dashboard .custom-dashboard-table thead th:first-child{text-align:left}
.dashboard .custom-dashboard-table tbody th{font-weight:600;color:#495057;padding:12px 10px;
  text-align:left;white-space:nowrap}
.dashboard .custom-dashboard-table tbody td{padding:12px 10px;color:#212529;text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.dashboard .custom-dashboard-table tbody td:first-child{text-align:left;font-weight:600;color:#495057}
.dashboard .custom-dashboard-table tbody tr:hover{background:#fafbfc}
.dashboard .stats tbody td:last-child{font-weight:700;color:#111827}
.dashboard .stats thead th:last-child{color:#374151}
.dashboard .chart{height:400px}
.dashboard .footer-note{color:#6c757d;font-size:.78rem;margin-top:18px;padding-left:4px}
.dashboard .data-warning{background:#fff3cd;color:#664d03;padding:14px 18px;border-radius:10px;
  margin-bottom:24px;font-size:.85rem}
.dashboard .data-warning ul{margin:.5rem 0 0;padding-left:20px}