/* layout.css — shell, nav, components, page layout */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-hi);
  transition: background .25s ease, color .25s ease;
  min-height:100vh;
}
::selection{ background: var(--brand-accent); color:#0B1018; }
a{color:inherit;}
button{font-family:inherit;}
:focus-visible{ outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- App Shell ---------- */
#app{ display:flex; min-height:100vh; }

/* Sidebar */
#sidebar{
  width:248px; flex-shrink:0; background:var(--surface);
  border-right:1px solid var(--border); padding:20px 14px;
  display:flex; flex-direction:column; gap:4px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  transition: transform .25s ease;
  z-index:40;
}
.brand-row{ display:flex; align-items:center; gap:10px; padding:6px 8px 20px; }
.brand-mark{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background: linear-gradient(135deg, var(--brand-accent), #1E8F7C);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#0B1018; font-size:15px;
}
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.2; }
.brand-sub{ font-size:11px; color:var(--text-low); letter-spacing:.04em; text-transform:uppercase; }

.nav-section-label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-low); padding:14px 10px 6px; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  color:var(--text-mid); font-size:13.5px; font-weight:500; cursor:pointer; border:none; background:none;
  width:100%; text-align:left;
}
.nav-item svg{ width:17px; height:17px; flex-shrink:0; opacity:.85; }
.nav-item:hover{ background:var(--surface-2); color:var(--text-hi); }
.nav-item.active{ background: color-mix(in srgb, var(--brand-accent) 16%, transparent); color:var(--text-hi); }
.nav-item.active svg{ color:var(--brand-accent); opacity:1; }

/* Topbar */
#main{ flex:1; min-width:0; display:flex; flex-direction:column; }
#topbar{
  height:60px; border-bottom:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; gap:14px; padding:0 20px; position:sticky; top:0; z-index:30;
}
#menu-toggle{ display:none; background:none; border:none; color:var(--text-hi); cursor:pointer; padding:6px; }
#breadcrumbs{ font-size:13px; color:var(--text-low); display:flex; align-items:center; gap:6px; flex-shrink:0; }
#breadcrumbs .crumb-current{ color:var(--text-hi); font-weight:600; }
#search-wrap{ flex:1; max-width:340px; position:relative; margin-left:8px; }
#search-input{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  padding:7px 12px 7px 32px; font-size:13px; color:var(--text-hi);
}
#search-wrap svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--text-low); }
.topbar-spacer{ flex:1; }
.icon-btn{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-hi);
  width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.icon-btn svg{ width:16px; height:16px; }
.toggle-pill{
  display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:20px; padding:5px 6px; font-size:12px; font-weight:600; color:var(--text-mid); cursor:pointer;
}
.toggle-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--text-low); }
.toggle-pill.on{ color:var(--text-hi); }
.toggle-pill.on .dot{ background: var(--brand-accent); box-shadow: 0 0 8px var(--brand-accent); }

/* Content */
#content{ padding:24px 28px 60px; max-width:1400px; }
.page{ display:none; animation: fadeIn .35s ease; }
.page.active{ display:block; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; flex-wrap:wrap;}
.page-title{ font-family:var(--font-display); font-size:24px; font-weight:700; }
.page-desc{ color:var(--text-mid); font-size:13.5px; margin-top:4px; max-width:640px; }

/* Filter bar */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:18px;
}
.filter-bar .flabel{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-low); margin-right:2px;}
.chip{
  padding:6px 12px; border-radius:20px; border:1px solid var(--border); background:var(--surface-2);
  font-size:12.5px; font-weight:500; color:var(--text-mid); cursor:pointer;
}
.chip.active{ background:var(--brand-accent); color:#08201B; border-color:var(--brand-accent); font-weight:600;}
.chip:hover:not(.active){ color:var(--text-hi); }
.filter-reset{ margin-left:auto; font-size:12px; color:var(--text-low); cursor:pointer; text-decoration:underline; }

/* KPI cards */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:14px; margin-bottom:20px; }
.kpi-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 16px 14px; cursor:pointer; position:relative; transition: border-color .15s ease, transform .15s ease;
}
.kpi-card:hover{ border-color: var(--brand-accent); transform:translateY(-1px); }
.kpi-label{ font-size:12px; color:var(--text-mid); font-weight:500; display:flex; align-items:center; gap:6px;}
.kpi-value{ font-family:var(--font-mono); font-size:25px; font-weight:600; margin-top:8px; letter-spacing:-.01em; }
.kpi-delta{ font-size:12px; margin-top:6px; font-weight:600; display:flex; align-items:center; gap:4px; }
.kpi-delta.up{ color:#3ECBB4; }
.kpi-delta.down{ color:var(--brand-negative); }
.kpi-learn-hint{ position:absolute; top:12px; right:12px; font-size:10px; color:var(--text-low); opacity:0; transition:opacity .15s;}
.kpi-card:hover .kpi-learn-hint{ opacity:1; }

/* Panels / charts */
.panel-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap:16px; margin-bottom:16px; }
.panel-grid.thirds{ grid-template-columns: repeat(3, 1fr); }
.panel-grid.full{ grid-template-columns: 1fr; }
@media (max-width: 980px){ .panel-grid, .panel-grid.thirds{ grid-template-columns:1fr; } }
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 18px 18px;
}
.panel-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.panel-title{ font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:7px; cursor:pointer; }
.panel-title:hover{ color:var(--brand-accent); }
.panel-title .info-dot{
  width:15px; height:15px; border-radius:50%; border:1px solid var(--text-low); color:var(--text-low);
  font-size:9.5px; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.panel-sub{ font-size:11.5px; color:var(--text-low); margin-bottom:10px; }
.chart-wrap{ position:relative; height:260px; }
.chart-wrap.tall{ height:320px; }

table.data-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.data-table th{ text-align:left; color:var(--text-low); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--border); font-size:11px; text-transform:uppercase; letter-spacing:.03em;}
table.data-table td{ padding:7px 8px; border-bottom:1px solid var(--border); }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr{ cursor:pointer; }
table.data-table tr:hover td{ background:var(--surface-2); }
.bar-cell{ display:flex; align-items:center; gap:8px; }
.bar-track{ flex:1; height:6px; background:var(--surface-2); border-radius:4px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--brand-accent); border-radius:4px; }

/* Landing */
.landing-hero{
  border-radius:20px; padding:48px 40px; margin-bottom:24px; position:relative; overflow:hidden;
  background: radial-gradient(1200px 400px at 20% 0%, color-mix(in srgb, var(--brand-accent) 18%, var(--surface)), var(--surface) 60%);
  border:1px solid var(--border);
}
.landing-hero h1{ font-family:var(--font-display); font-size:34px; max-width:680px; line-height:1.15; }
.landing-hero p{ color:var(--text-mid); max-width:560px; margin-top:14px; font-size:14.5px; line-height:1.6;}
.pill-row{ display:flex; gap:8px; margin-top:20px; flex-wrap:wrap;}
.pill{ background:var(--surface-2); border:1px solid var(--border); padding:6px 12px; border-radius:20px; font-size:12px; color:var(--text-mid); font-weight:500;}
.report-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.report-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px;
  cursor:pointer; transition:border-color .15s, transform .15s;
}
.report-card:hover{ border-color:var(--brand-accent); transform:translateY(-2px); }
.report-card .num{ font-family:var(--font-mono); color:var(--brand-accent); font-size:12px; font-weight:600;}
.report-card h3{ font-family:var(--font-display); font-size:16px; margin:8px 0 6px;}
.report-card p{ font-size:12.5px; color:var(--text-mid); line-height:1.5;}
.report-card .audience{ margin-top:10px; font-size:11px; color:var(--text-low); }

/* Learning drawer */
#learn-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90; display:none; }
#learn-overlay.show{ display:block; }
#learn-drawer{
  position:fixed; top:0; right:0; height:100vh; width:420px; max-width:92vw; background:var(--surface);
  border-left:1px solid var(--border); z-index:91; transform:translateX(100%); transition:transform .3s ease;
  overflow-y:auto; box-shadow:var(--shadow);
}
#learn-drawer.show{ transform:translateX(0); }
.drawer-head{ padding:20px 20px 14px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.drawer-head h2{ font-family:var(--font-display); font-size:18px; }
.drawer-body{ padding:18px 20px 40px; font-size:13px; line-height:1.6; color:var(--text-mid); }
.drawer-body h4{ color:var(--text-hi); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; margin:18px 0 6px; }
.drawer-body h4:first-child{ margin-top:0; }
.drawer-body code, .drawer-body pre{ font-family:var(--font-mono); font-size:11.5px; background:var(--surface-2); border-radius:6px; padding:2px 6px;}
.drawer-body pre{ padding:10px 12px; overflow-x:auto; white-space:pre-wrap; }
.close-btn{ background:var(--surface-2); border:1px solid var(--border); width:28px; height:28px; border-radius:7px; color:var(--text-hi); cursor:pointer; flex-shrink:0; }
.audience-tag{ display:inline-block; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:3px 9px; font-size:11px; margin:2px 4px 2px 0; }

/* Learning mode banner */
#learn-banner{
  display:none; align-items:center; gap:8px; background: color-mix(in srgb, var(--brand-accent) 14%, var(--surface));
  border:1px solid var(--brand-accent); border-radius:9px; padding:8px 14px; font-size:12.5px; margin-bottom:16px; color:var(--text-hi);
}
#learn-banner.show{ display:flex; }

/* Loading */
#loader{ position:fixed; inset:0; background:var(--bg); z-index:200; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;}
#loader.hide{ display:none; }
.spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--surface-2); border-top-color:var(--brand-accent); animation:spin .8s linear infinite;}
@keyframes spin{ to{ transform:rotate(360deg);} }

footer.legal{ margin-top:30px; padding-top:16px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-low); }

/* DAX Reference table */
table.dax-table td, table.dax-table th{ vertical-align:top; }
table.dax-table tr:hover td{ background:transparent; }
.dax-formula-cell{ font-family:var(--font-mono); font-size:11px; line-height:1.5; color:var(--text-hi); background:var(--surface-2); border-radius:6px; padding:8px 10px; white-space:pre-wrap; word-break:break-word; max-width:480px; position:relative; }
.dax-copy-btn{ position:absolute; top:4px; right:4px; background:var(--surface); border:1px solid var(--border); color:var(--text-low); font-size:9.5px; padding:2px 6px; border-radius:4px; cursor:pointer; font-family:var(--font-body); }
.dax-copy-btn:hover{ color:var(--text-hi); border-color:var(--brand-accent); }
.dax-badge{ display:inline-block; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:2px 8px; font-size:10.5px; color:var(--text-mid); white-space:nowrap; }
.dax-dep-list{ font-size:11px; color:var(--text-mid); }
.dax-dep-list span{ display:inline-block; background:var(--surface-2); border-radius:8px; padding:1px 7px; margin:1px 3px 1px 0; }

@media (max-width: 860px){
  #sidebar{ position:fixed; left:0; transform:translateX(-100%); box-shadow:var(--shadow); }
  #sidebar.open{ transform:translateX(0); }
  #menu-toggle{ display:flex; }
  #breadcrumbs{ display:none; }
  #content{ padding:16px; }
  .panel-grid{ grid-template-columns:1fr; }
}

/* ---------- Guided Walkthrough (Stage 4 addition) ---------- */
.tour-start-btn{
  width:auto; padding:7px 14px; font-size:12.5px; font-weight:600;
  color:var(--brand-accent); border:1px solid var(--brand-accent);
  border-radius:8px; background:transparent; white-space:nowrap;
}
.tour-start-btn:hover{ background: color-mix(in srgb, var(--brand-accent) 12%, transparent); }
.tour-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:170; display:none; }
.tour-overlay.active{ display:block; }
.tour-highlight{
  position:relative !important; z-index:175; border-radius:10px !important;
  box-shadow:0 0 0 3px var(--brand-accent), 0 12px 40px 6px rgba(0,0,0,0.35) !important;
  transition:box-shadow .2s ease;
}
.tour-caption{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:180;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:18px 22px; width:min(480px,90vw); box-shadow:var(--shadow);
}
.tour-step-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--brand-accent); font-weight:600; margin-bottom:6px; }
.tour-caption h4{ font-family:var(--font-display); font-size:16.5px; font-weight:600; margin-bottom:7px; color:var(--text-hi); }
.tour-caption p{ font-size:13px; color:var(--text-mid); line-height:1.58; margin-bottom:14px; }
.tour-controls{ display:flex; align-items:center; justify-content:space-between; }
.tour-dots{ display:flex; gap:5px; }
.tour-dot{ width:6px; height:6px; border-radius:50%; background:var(--border); }
.tour-dot.active{ background:var(--brand-accent); width:16px; border-radius:3px; }
.tour-btns{ display:flex; gap:8px; }
.tour-btn{ padding:6px 12px; font-size:12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text-mid); cursor:pointer; }
.tour-btn.primary{ background:var(--brand-accent); border-color:var(--brand-accent); color:#0B1018; font-weight:600; }
.tour-exit{ position:absolute; top:12px; right:14px; background:none; border:none; font-size:16px; color:var(--text-low); cursor:pointer; }
@media (max-width: 860px){
  .tour-start-btn{ padding:6px 10px; font-size:11px; }
}

/* ---------- Raw Data table scroll wrapper (Raw Data section addition) ---------- */
.table-scroll{ overflow-x:auto; max-width:100%; }
.table-scroll table{ white-space:nowrap; }
#raw-table td, #raw-table th{ padding:6px 12px; font-family:var(--font-mono); font-size:11.5px; }

/* ---------- Sidebar accordion (collapsible nav sections) ---------- */
.nav-section-label{ cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; }
.nav-section-label::after{ content:"▾"; font-size:9px; color:var(--text-low); transition:transform .18s ease; }
.nav-section-label.collapsed::after{ transform:rotate(-90deg); }
.nav-item.nav-hidden{ display:none; }
.nav-subsection-label{
  cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-low);
  padding:8px 10px 6px 22px; font-weight:600;
}
.nav-subsection-label[data-level="2"]{ padding-left:32px; font-size:10px; opacity:.85; }
.nav-subsection-label::after{ content:"▾"; font-size:8px; color:var(--text-low); transition:transform .18s ease; }
.nav-subsection-label.collapsed::after{ transform:rotate(-90deg); }
.nav-subsection-label.nav-hidden{ display:none; }
.nav-item-indent{ padding-left:34px; }