/* public-site.css
   The public pages' look lives in css/mmm-site.css (generated from the mmminstitute.org design).
   This file holds the small pieces shared with the app: the screen switch, the header and tabs
   (the dashboard header uses them too), buttons, and a few rules for the public pages inside this site.
*/

/* ---- public site screen ---- */
#screen-landing{display:none;max-width:none;padding:0;min-height:100vh;}
#screen-landing.active{display:block;}
.site-page{display:none;}
.site-page.active{display:block;}
/* Home has its own big "Take the DDI" buttons, so the header one shows on the other pages only */
#screen-landing[data-page="home"] .btn-hdr{display:none;}
/* the "Create a free account / Open my dashboard" switch on Assessments */
#screen-landing .app-entry-in[hidden],#screen-landing .app-entry-out[hidden]{display:none;}
#screen-landing .app-entry .lead{margin-top:12px;max-width:40rem;}
#screen-landing .app-entry-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
/* the live privacy policy on the Privacy page */
#screen-landing .legal-live h2{margin-bottom:12px;}
#screen-landing .legal-live p + p{margin-top:12px;}

/* ---- header and tabs (dashboard) ---- */
.site-header{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px clamp(18px,4vw,56px);
  background:rgba(15,26,23,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-line);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;}
.brand-mark{
  width:32px;height:32px;
  background:url("../assets/mmm/img/favicon.svg") center/contain no-repeat;
}
.site-tabs{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;}
.site-tabs::-webkit-scrollbar{display:none;}
.tab-btn{
  border:0;background:transparent;color:var(--muted);
  padding:9px 12px;border-radius:0;font-size:13px;white-space:nowrap;
}
.tab-btn:hover,.tab-btn.active{background:var(--panel-raised);color:var(--paper);}
.tab-hidden{display:none!important;}
.subtle-link{border:0;background:transparent;color:var(--signal);padding:0;text-decoration:underline;font-weight:700;}
@media (max-width:860px){
  .site-header{align-items:flex-start;flex-direction:column;padding-bottom:10px;}
  .site-tabs{width:100%;padding-bottom:4px;gap:4px;}
  .tab-btn{padding:8px 9px;font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  .metro-grid.dashboard-enter .metro-tile,.metro-grid.dashboard-deal .metro-tile,.metro-grid.tiles-to-timeline,.metro-grid.tiles-to-timeline .metro-tile,.metro-grid.tiles-to-timeline .metro-tile > *,.metro-grid.timeline-split,.metro-grid.timeline-split .trajectory-back,.metro-tile.tile-flipped,.timeline-tile,.timeline-tile > *,.goal-learn-burst,.learn-burst-card,.goal-strategy-focus{animation:none!important;opacity:1!important;transform:none!important;}
}

/* ---- buttons (app) ---- */
/* the app's pages sit on light backgrounds, so the outline button is navy by default */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:0;border:2px solid transparent;
  font-size:16px;font-weight:600;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--ember);color:var(--ember-ink);border-color:var(--ember-edge);}
.btn-primary:hover{background:var(--ember-hover);}
.btn-ghost{background:transparent;color:var(--ink-on-paper);border-color:var(--ink-on-paper);}
.btn-ghost:hover{background:var(--ink-on-paper);color:var(--paper);}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}