/* ============================================================
   SAULNA · FUNNEL DASHBOARD
   Everything visual comes from styles.css, which is generated from the
   Motion Portal's stylesheet. This file only adds the page frame (top bar,
   sign-in card, control row, upcoming list). Same tokens, no new colours.
   ============================================================ */

.dash{min-height:100vh;display:flex;flex-direction:column;}
/* .view centres itself with margin:0 auto, and in a flex column auto margins also stop
   it stretching: without width:100% it shrinks to its widest table (760px) and the whole
   page scrolls sideways on a phone. */
.dash > .view{width:100%;}

/* top bar: monogram + wordmark left, signed-in manager right */
.dash-top{min-height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 24px;background:var(--ink-900);border-bottom:1px solid var(--ink-line);}
.dash-brand{display:flex;align-items:center;gap:12px;}
.dash-brand__mark{font-family:var(--font-serif);font-weight:700;color:var(--bone-50);font-size:24px;line-height:1;
  width:34px;height:34px;display:grid;place-content:center;background:var(--ink-850);border:1px solid var(--ink-line);border-radius:var(--radius-md);}
.dash-brand__word{display:flex;flex-direction:column;gap:3px;}
.dash-brand__word b{font-family:var(--font-serif);font-weight:600;font-size:16px;letter-spacing:.16em;color:var(--bone-50);text-transform:uppercase;line-height:1;}
.dash-brand__word .s-rule{width:100%;}
.dash-brand__word span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-500);}
.dash-user{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--bone-300);}

/* the three controls: funnel, depth, period */
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 4px;}
.controls .period{margin-left:auto;}
.sync-line{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--bone-500);}
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--emerald-300);flex:0 0 auto;}
.sync-dot--stale{background:var(--garnet-300);}

/* tile sections */
.tile-section{margin-top:24px;}
.tile-section .section-label{flex-wrap:wrap;}
.section-note{font-size:12px;color:var(--bone-500);}
.kpi-grid{margin-top:12px;}
.kpi-grid--2{grid-template-columns:repeat(2,1fr);}
.kpi-grid--5{grid-template-columns:repeat(5,1fr);}
@media (max-width:1040px){ .kpi-grid--2,.kpi-grid--5{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .kpi-grid--2,.kpi-grid--5{grid-template-columns:1fr;} }
.kpi__value.is-empty{color:var(--bone-500);}

/* read-only tables: rows are not clickable here */
table.grid tbody tr{cursor:default;}
table.grid tbody tr.row-total{background:var(--ink-700);}
table.grid tbody tr.row-total td{font-weight:600;}
table.grid tbody tr.row-total td:first-child{color:var(--gold-500);}
.table-wrap{margin-top:0;}

/* inline notice (errors, stale data) · garnet hairline, plain instruction */
.notice{margin-top:18px;padding:12px 16px;background:var(--ink-800);border:1px solid var(--ink-line);
  border-left:2px solid var(--garnet-500);border-radius:var(--radius-md);font-size:13.5px;color:var(--bone-100);}
.notice--quiet{border-left-color:var(--amber-500);}

/* upcoming calls */
.up-day{margin-top:16px;}
.up-day .panel__head b{font:600 14px/1.3 var(--font-sans);color:var(--bone-50);}
.up-type{display:inline-flex;align-items:center;gap:6px;}
.up-type .dot{width:6px;height:6px;border-radius:50%;background:var(--slate-300);}
.up-type--closing .dot{background:var(--gold-500);}
/* one table per day: fixed layout keeps the columns lined up from day to day */
table.grid.up-table{min-width:520px;table-layout:fixed;}

/* sign-in: obsidian canvas, centred monogram, serif "Access Dashboard" (§11.1 step 1) */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px;}
.auth__card{width:min(420px,100%);position:relative;padding:34px 30px 30px;text-align:center;
  background:var(--ink-800);border:1px solid var(--ink-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);}
.auth__card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold-rule);border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.auth__mark{font-family:var(--font-serif);font-weight:600;font-size:34px;color:var(--bone-50);width:60px;height:60px;margin:0 auto 18px;
  display:grid;place-content:center;background:var(--ink-850);border:1px solid var(--ink-line);border-radius:var(--radius-lg);}
.auth__card h1{font-family:var(--font-serif);font-weight:500;font-size:30px;line-height:1.15;color:var(--bone-50);}
.auth__card .s-rule{margin:12px auto 0;}
.auth__card p.lede{margin-top:12px;font-size:14px;color:var(--bone-300);}
.auth__form{display:flex;flex-direction:column;gap:14px;margin-top:24px;text-align:left;}
.auth__form label{display:flex;flex-direction:column;gap:6px;font:500 12.5px/1.2 var(--font-sans);color:var(--bone-300);}
.auth__form .field{width:100%;}
.auth__form .btn{width:100%;margin-top:6px;}
.auth__error{min-height:20px;font-size:13px;color:var(--garnet-300);}

@media (max-width:860px){
  .view{padding:20px 16px 48px;}
  .dash-top{padding:8px 16px;}
  .controls .period{margin-left:0;}
}
@media (max-width:560px){
  .view__head h2.serif{font-size:24px;}
  .dash-user .dash-user__name{display:none;}
  .segmented button{padding:9px 11px;}
  .period__label{min-width:104px;}
  .funnel__row{grid-template-columns:84px 1fr 64px;gap:10px;}
}