/* ==========================================================================
   Summit Traders — altitude system
   Palette reads as high-altitude cold rock and ice; the one warm value
   (--alpen) is reserved for the Professional tier and nothing else, so
   warmth on the page always means "top of the mountain".
   ========================================================================== */

:root {
  --base:     #0A0F17;
  --strata:   #111A26;
  --strata-2: #16202E;
  --line:     #22303F;
  --line-soft:#1A2532;
  --mist:     #7E90A6;
  --mist-dim: #57677C;
  --snow:     #E9F1F8;
  --glacier:  #62C3D6;
  --glacier-d:#3A93A6;
  --alpen:    #E0A458;
  --danger:   #E0685E;
  --ok:       #6FC08F;

  --display: 'Archivo', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --pad: clamp(1.25rem, 4vw, 3rem);
  --max: 1160px;
  --r: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--base);
  color: var(--snow);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--glacier); text-decoration: none; }
a:hover { color: var(--snow); }

:focus-visible {
  outline: 2px solid var(--glacier);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.narrow { max-width: 720px; }

/* --- eyebrow: the altitude marker used above every section heading ------- */
.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mist-dim);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
}

/* --- header -------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 15, 23, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
}
.brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--snow);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.brand svg { width: 22px; height: 22px; flex: none; }
.brand span { color: var(--mist-dim); font-weight: 400; }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a {
  font-size: .875rem;
  color: var(--mist);
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--snow); }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .875rem;
  font-weight: 600;
  padding: .62rem 1.15rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  line-height: 1.3;
}
.btn-primary { background: var(--glacier); color: #06222A; }
.btn-primary:hover { background: var(--snow); color: var(--base); }
.btn-ghost { border-color: var(--line); color: var(--snow); background: transparent; }
.btn-ghost:hover { border-color: var(--mist); color: var(--snow); background: var(--strata); }
.btn-danger { border-color: rgba(224,104,94,.4); color: var(--danger); background: transparent; }
.btn-danger:hover { background: rgba(224,104,94,.1); }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

/* --- hero: the contour map ---------------------------------------------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.hero-contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  pointer-events: none;
}
.hero-contours path { fill: none; stroke: var(--line); stroke-width: 1; }
.hero-contours path:nth-child(-n+4) { stroke: var(--glacier-d); opacity: .45; }
.hero .wrap {
  position: relative;
  padding-block: clamp(4.5rem, 13vw, 9rem);
}
.hero-inner { max-width: 700px; }
.hero h1 { margin-bottom: 1.25rem; }
.hero h1 em {
  font-style: normal;
  color: var(--glacier);
}
.hero-lede { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--mist); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* readout strip under the hero */
.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--line-soft);
  background: var(--strata);
}
.readout div {
  padding: 1.15rem var(--pad);
  border-right: 1px solid var(--line-soft);
}
.readout div:last-child { border-right: 0; }
.readout dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mist-dim);
  margin-bottom: .3rem;
}
.readout dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }

/* --- sections ------------------------------------------------------------ */
section { padding-block: clamp(3.5rem, 8vw, 6rem); }
section.tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-head { max-width: 620px; margin-bottom: 3rem; }
.section-head p { color: var(--mist); margin-bottom: 0; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }

.panel {
  background: var(--strata);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 1.6rem;
}
.panel h3 { margin-bottom: .5rem; }
.panel p { color: var(--mist); font-size: .925rem; margin-bottom: 0; }

/* --- tiers as elevation bands -------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: end; }
.tier {
  position: relative;
  background: var(--strata);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.tier--1 { --band: var(--mist-dim); }
.tier--2 { --band: var(--glacier); }
.tier--3 { --band: var(--alpen); background: var(--strata-2); }
.tier::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--band);
}
.tier-elev {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--band);
  margin-bottom: .75rem;
}
.tier h3 { font-size: 1.45rem; margin-bottom: .35rem; }
.tier-note { color: var(--mist); font-size: .9rem; margin-bottom: 1.25rem; }
.tier ul { list-style: none; margin: 0 0 1.75rem; padding: 0; flex: 1; }
.tier li {
  position: relative;
  padding-left: 1.4rem;
  font-size: .9rem;
  color: var(--snow);
  margin-bottom: .6rem;
}
.tier li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border: 1px solid var(--band);
  transform: rotate(45deg);
}
.tier li span { color: var(--mist); }

/* --- quotes -------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.quote {
  border-left: 2px solid var(--line);
  padding: .25rem 0 .25rem 1.5rem;
}
.quote p { font-size: .95rem; color: var(--snow); }
.quote cite {
  font-family: var(--mono);
  font-style: normal;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

/* --- forms --------------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--mist);
  margin-bottom: .4rem;
}
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], textarea, select {
  width: 100%;
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--snow);
  font-family: var(--body);
  font-size: .925rem;
  padding: .6rem .8rem;
}
select { font-family: var(--body); }
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--glacier); outline: none; }
.hp { position: absolute; left: -9999px; }

.form-card {
  background: var(--strata);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 2rem;
  max-width: 420px;
  margin: 0 auto;
}
.form-card h1 { font-size: 1.8rem; margin-bottom: .4rem; }
.form-card .sub { color: var(--mist); font-size: .9rem; margin-bottom: 1.75rem; }
.form-foot { margin-top: 1.5rem; font-size: .85rem; color: var(--mist); }

.auth-page { padding-block: clamp(3rem, 8vw, 6rem); }

/* --- flash --------------------------------------------------------------- */
.flash {
  border: 1px solid var(--line);
  border-left-width: 2px;
  border-radius: var(--r);
  padding: .7rem 1rem;
  font-size: .875rem;
  margin-bottom: 1.5rem;
  background: var(--strata);
}
.flash-error { border-left-color: var(--danger); color: var(--danger); }
.flash-ok { border-left-color: var(--ok); color: var(--ok); }
.flash-info { border-left-color: var(--glacier); color: var(--glacier); }

/* --- member area --------------------------------------------------------- */
.member-head {
  border-bottom: 1px solid var(--line-soft);
  padding-block: 2.5rem 2rem;
}
.member-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .35rem; }
.member-head .who { color: var(--mist); font-size: .95rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .25rem .7rem;
  color: var(--mist);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--1 { color: var(--mist); }
.badge--2 { color: var(--glacier); border-color: rgba(98,195,214,.3); }
.badge--3 { color: var(--alpen); border-color: rgba(224,164,88,.3); }
.badge--0 { color: var(--mist-dim); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.dash {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--strata);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 1.4rem;
  color: var(--snow);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
a.dash:hover {
  border-color: var(--glacier);
  background: var(--strata-2);
  transform: translateY(-2px);
  color: var(--snow);
}
.dash-code {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--snow);
}
.dash-name { font-size: .92rem; font-weight: 600; }
.dash-desc { font-size: .82rem; color: var(--mist); line-height: 1.5; }
.dash-foot {
  margin-top: auto;
  padding-top: .9rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
.dash--locked { opacity: .5; }
.dash--locked .dash-code { color: var(--mist-dim); }

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: 2.5rem;
  text-align: center;
  color: var(--mist);
  margin-top: 2rem;
}
.empty h3 { color: var(--snow); }
.empty p { margin-bottom: 0; font-size: .925rem; }

/* --- tables (admin) ------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--strata); }
th {
  text-align: left;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist-dim);
  font-weight: 500;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: .7rem 1rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.mono, .mono { font-family: var(--mono); font-size: .82rem; }
td select, td input[type=text], td input[type=number], td input[type=url] {
  padding: .35rem .5rem;
  font-size: .82rem;
}
.row-actions { display: flex; gap: .4rem; align-items: center; }

.admin-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; padding-block: 1.25rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 2.5rem; }
.admin-nav a { font-size: .85rem; color: var(--mist); }
.admin-nav a[aria-current='page'] { color: var(--snow); font-weight: 600; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 3rem; }
.stat { background: var(--strata); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 1.2rem; }
.stat dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mist-dim); margin-bottom: .4rem; }
.stat dd { margin: 0; font-family: var(--display); font-size: 2rem; font-weight: 800; line-height: 1; }

details.new-dash { margin-bottom: 2rem; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--strata); }
details.new-dash summary { padding: 1rem 1.4rem; cursor: pointer; font-weight: 600; font-size: .9rem; }
details.new-dash > div { padding: 0 1.4rem 1.4rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }

.msg-card { background: var(--strata); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 1.4rem; margin-bottom: 1rem; }
.msg-card.unread { border-left: 2px solid var(--glacier); }
.msg-meta { font-family: var(--mono); font-size: .72rem; color: var(--mist-dim); letter-spacing: .1em; margin-bottom: .7rem; }

/* --- footer -------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 3rem 2.5rem;
  margin-top: 4rem;
  font-size: .85rem;
  color: var(--mist-dim);
}
.footer-top { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; margin-bottom: 2.5rem; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { color: var(--mist); font-size: .85rem; }
.disclaimer { font-size: .74rem; line-height: 1.7; color: var(--mist-dim); max-width: 90ch; }
.partner {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  max-width: 340px;
}
.partner strong { color: var(--snow); font-size: .875rem; display: block; margin-bottom: .2rem; }
.partner p { font-size: .8rem; margin: 0 0 .5rem; }

.centered { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.centered h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
.centered p { color: var(--mist); max-width: 46ch; margin-inline: auto; }

@media (max-width: 640px) {
  .nav { gap: 1rem; }
  .nav .hide-sm { display: none; }
  .readout div { border-right: 0; border-bottom: 1px solid var(--line-soft); }
}

/* --- brand lockup (real logo) -------------------------------------------- */
.brand img { display: block; width: auto; height: 38px; }
.brand--footer { display: inline-block; margin-bottom: .9rem; }
.brand--footer img { height: 54px; }
@media (max-width: 640px) { .brand img { height: 30px; } }

/* --- rendered sheet view ------------------------------------------------- */
.sheet-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
}
.sheet-head .eyebrow a { color: var(--mist-dim); }
.sheet-head .eyebrow a:hover { color: var(--glacier); }
.sheet-head .eyebrow::after { display: none; }
.sheet-code {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--glacier);
  margin-right: .4rem;
}
.sheet-actions { display: flex; gap: .5rem; }

.sheet-table { margin-top: 2rem; }
.sheet-table table { font-variant-numeric: tabular-nums; }
.sheet-table th {
  position: sticky;
  top: 68px;
  background: var(--strata-2);
  z-index: 2;
}
.sheet-table td { white-space: nowrap; font-size: .875rem; }
.sheet-table tbody tr:hover td { background: var(--strata-2); }
.sheet-meta {
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

/* --- admin: tab finder for master workbooks ------------------------------ */
.tab-finder {
  background: var(--strata);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--glacier);
  border-radius: var(--r);
  padding: 1.4rem;
  margin-bottom: 2rem;
}
.tab-finder h3 { font-size: 1rem; margin-bottom: .4rem; }
.tab-finder > p { color: var(--mist); font-size: .875rem; max-width: 68ch; }
.tab-finder-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.tab-finder-row input { flex: 1; min-width: 240px; }
.tab-result { font-size: .84rem; margin: .9rem 0 0; color: var(--mist); }
.tab-result.ok { color: var(--glacier); }
.tab-result.err { color: var(--danger); }
.field-hint {
  font-size: .78rem;
  color: var(--mist-dim);
  margin: .4rem 0 0;
  line-height: 1.5;
}

/* --- visual (PDF) dashboard view ----------------------------------------- */
.sheet-frame {
  /* Breaks out of the centred content column so the dashboard gets nearly the
     whole viewport. 96vw rather than 100vw leaves a small gutter and avoids the
     horizontal scrollbar that 100vw causes (100vw includes the scrollbar). */
  width: 96vw;
  max-width: 96vw;
  margin-left: calc(50% - 48vw);
  height: 90vh;              /* the box takes 90% of the screen height */
  display: block;
  position: relative;        /* anchors the loading overlay and watermark */
  margin-top: 1.75rem;
  background: #fff;          /* the sheet's own white page */
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
/* The meta line under the frame should line up with the frame, not the column. */
.sheet-frame + .sheet-meta {
  width: 96vw;
  margin-left: calc(50% - 48vw);
}
/* Pages are painted to canvas rather than framed as a PDF: mobile browsers
   refuse to display a framed PDF and download it instead. */
.pdf-pages {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}
.pdf-page {
  display: block;
  height: auto;
  margin: 0 auto;
  border-bottom: 1px solid #e6e6e6;
  pointer-events: none;      /* nothing to right-click or drag off */
  width: auto;               /* the script sets an explicit width for zoom */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;  /* stops the iOS long-press "save image" sheet */
}
.pdf-page:last-child { border-bottom: 0; }
.sheet-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--strata);
  color: var(--mist);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  z-index: 1;
}