/* ═══════════════════════════════════════════════════════════════════════════
   SUNPORT BRAND LAYER
   ═══════════════════════════════════════════════════════════════════════════

   Marco: "should we try to use the UI of sunport.group but of course adapted
   to usability — not too much spacing and too big titles, but also enough to
   look luxury."

   Taken from the live site, measured rather than guessed:

       typeface     Source Sans Pro, weight 300 almost everywhere
       headings     48px / w300 / no letter-spacing / sentence case
       body         22px / 1.68 / w300 / #686E7A
       headings     #515B69      muted #7284 9C / #BAC5D0
       ground       #FFFFFF with #F9F9F9 bands
       accent       #35BAF2
       rules        hairlines, never heavy borders

   WHAT IS PORTED AND WHAT IS ADAPTED.

   Ported: the typeface and its weight-300 character, the accent, sentence-case
   headings, hairline rules, and the restraint — nothing shouts.

   Adapted: the scale. A brochure can afford 48px headings and 22px body; a
   desk with a thirteen-column table cannot, and copying those numbers would
   have produced something beautiful that nobody could work in. Headings here
   run 26/17/13, body 13. The luxury comes from weight and space, not size.

   Not ported: the white ground. Candles, the 200-day average and the
   liquidation line are read for hours at a time, and dark is simply better for
   that — so the canvas stays #050810 and the brand arrives as everything else.

   Numbers stay in JetBrains Mono. That is not the website's font, but a
   trading desk where figures do not align in columns is a worse desk, and it
   matches the Cortex planner this page was ported from.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The accent, replacing amber everywhere it was used. The token keeps its
     old name so all 100+ existing references pick this up untouched. */
  --amber:     #35baf2;
  --amber2:    #7ad3f8;
  --amberBg:   rgba(53,186,242,0.10);
  --amberGlow: rgba(53,186,242,0.20);

  /* A softer ladder of greys, closer to the site's #515B69 / #686E7A / #BAC5D0
     than the old high-contrast set. Less shout, more paper. */
  --text:      #e6ecf3;
  --text2:     #9aa8bb;
  --text3:     #5d6b7f;
  --border:    rgba(255,255,255,0.06);
  --border2:   rgba(255,255,255,0.12);

  --sans:      'Source Sans Pro', 'Inter', system-ui, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, monospace;
  --radius:    10px;
  --radius-sm: 6px;
}

body, .lad-warn, .modalbox, .sentence, .psub {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ── HEADINGS ────────────────────────────────────────────────────────────
   The site's signature is weight 300 at a generous size with no tracking and
   no capitals. Small uppercase letter-spaced labels are the opposite of that,
   so the ones that carried real meaning become quiet sentence-case headings
   and only the true micro-labels (a tile's caption, a column head) stay
   uppercase — there they are wayfinding, not typography. */
h1, h2, h3, .page-heading, .runghead h3, .champ h2 {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
}
.brandtext h1 {
  font-size: 15px; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text);
}
.brandtext p { font-size: 11.5px; font-weight: 300; color: var(--text3); }

.paperhead h2, .labhead h2, .strathead h2, .viewhead h2 {
  font-size: 24px; font-weight: 300; color: var(--text); line-height: 1.3;
  letter-spacing: -0.005em; margin-bottom: 7px;
}
.paperhead p, .labhead p, .strathead p, .viewhead p, .psub, .fundnote {
  font-size: 12.5px; font-weight: 300; line-height: 1.65; color: var(--text2);
  max-width: 88ch;
}
.paperhead { margin-bottom: 4px; }

/* ── THE SECTION RHYTHM ──────────────────────────────────────────────────
   The ladder page was one long scroll of boxes with no hierarchy: form, saved
   plans, tiles, table, generator, result, chart, all weighted the same. It is
   four steps, so it now reads as four, each introduced by a light heading and
   a hairline rather than a card border. */
.ldsection { margin: 26px 0 0; }
.ldsection:first-of-type { margin-top: 18px; }
.ldsection > .ldhead {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 9px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.ldsection > .ldhead h3 {
  font-size: 17px; font-weight: 300; color: var(--text); flex: none;
}
.ldsection > .ldhead .ldstep {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--amber); letter-spacing: .1em; flex: none;
  padding-top: 2px;
}
.ldsection > .ldhead p {
  font-size: 12px; font-weight: 300; color: var(--text3); margin: 0;
  line-height: 1.5;
}

/* ── FORM FIELDS ─────────────────────────────────────────────────────────
   Tighter, quieter, and on one calm grid rather than a wrapping flex row. */
.ladderform {
  display: grid; gap: 12px 16px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  background: none; border: none; padding: 0; margin-bottom: 14px;
}
.lfield label {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 6px;
  white-space: nowrap;
}
.lfield input, .lfield select {
  width: 100%; background: rgba(255,255,255,0.022);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 9px 11px; font-size: 13px;
  font-family: var(--mono); outline: none;
  transition: border-color .14s, background .14s;
}
.lfield select { font-family: var(--sans); font-weight: 400; }
.lfield input:focus, .lfield select:focus, .lad-in:focus {
  border-color: var(--amber); background: rgba(53,186,242,0.05);
  box-shadow: none;
}
.lfield input:hover, .lfield select:hover { border-color: var(--border2); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────
   One primary, everything else a hairline ghost. The old page had four
   different button treatments competing for the same attention. */
.showchart, .rungadd, .zoomout, .savedbar .rungadd {
  font-family: var(--sans); font-weight: 400; letter-spacing: .01em;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all .14s;
}
.showchart {
  background: var(--amber); color: #04121c; border: 1px solid var(--amber);
  padding: 9px 20px; font-size: 13px; font-weight: 600;
}
.showchart:hover { background: var(--amber2); border-color: var(--amber2); }
.rungadd, .zoomout {
  background: transparent; border: 1px solid var(--border2);
  color: var(--text2); padding: 7px 14px; font-size: 12px;
}
.rungadd:hover, .zoomout:hover {
  border-color: var(--amber); color: var(--amber); background: transparent;
}

/* ── TILES ───────────────────────────────────────────────────────────────
   Flatter and closer together. The value carries the weight; the caption
   recedes to a whisper. */
.lad-grid { gap: 10px; margin: 0 0 18px; }
.lad-tile {
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px;
}
.lad-tile-l {
  font-size: 9px; font-weight: 600; letter-spacing: .12em; color: var(--text3);
  margin-bottom: 6px;
}
.lad-tile-v { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.lad-tile.red .lad-tile-v { text-shadow: none; }
.lad-tile-s { font-size: 10px; font-weight: 400; color: var(--text3); }

/* ── THE BUYS TABLE ──────────────────────────────────────────────────────
   Hairline rows, no box around the whole thing, and a hover so the eye can
   hold a line across thirteen columns. */
.rungbox {
  background: none; border: none; border-radius: 0; padding: 0;
  margin-bottom: 0;
}
.runghead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 10px;
}
.runghead h3 { font-size: 15px; font-weight: 400; color: var(--text2);
               letter-spacing: .04em; }
.lad-tbl th {
  font-size: 9px; letter-spacing: .11em; font-weight: 600;
  color: var(--text3); padding: 8px 9px;
  border-bottom: 1px solid var(--border2);
}
.lad-tbl td { padding: 6px 9px; border-bottom: 1px solid var(--border); }
.lad-tbl tbody tr { transition: background .1s; }
.lad-tbl tbody tr:hover { background: rgba(255,255,255,0.022); }
.lad-in {
  background: rgba(255,255,255,0.022); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 9px; font-size: 12px;
}
.lad-in:hover { border-color: var(--border2); }
.lad-x { border-color: var(--border); }

/* ── GENERATOR ───────────────────────────────────────────────────────────*/
.lad-build {
  padding: 0 0 14px; margin-bottom: 12px; gap: 16px;
  border-bottom: 1px solid var(--border);
}
.lad-build .buildlabel { color: var(--text3); }
.lad-build .buildnote { font-family: var(--sans); font-weight: 300;
                        font-size: 12px; line-height: 1.5; }

/* ── RESULT ──────────────────────────────────────────────────────────────*/
.champ {
  background: rgba(255,255,255,0.018); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
}
.champ .tagline {
  font-size: 9.5px; letter-spacing: .13em; font-weight: 600;
  color: var(--amber); text-transform: uppercase; margin-bottom: 10px;
}
/* Two different things wear this tag: a money figure, which wants monospace,
   and a headline sentence, which wants the brand's light sans. Styling both as
   monospace made every strategy headline read like a terminal dump. */
.champ h2 {
  font-size: 27px; font-weight: 300; letter-spacing: -0.005em;
  font-family: var(--sans); color: var(--text); margin-bottom: 10px;
  line-height: 1.3;
}
.champ h2.figure {
  font-family: var(--mono); font-size: 34px; letter-spacing: -0.015em;
}
.champ .sentence, .champ p, .champ .plain {
  font-size: 13px; font-weight: 300; line-height: 1.68; color: var(--text2);
  max-width: 780px;
}
.champ .sentence.reality { border-left-color: var(--amber); }
.champgrid { gap: 10px; margin-top: 18px; }

/* ── SAVED PLANS ─────────────────────────────────────────────────────────*/
.savedbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 0 14px; margin-bottom: 0; border: none;
  border-bottom: 1px solid var(--border);
}
.whoslabel {
  font-size: 9px; font-weight: 600; letter-spacing: .12em; color: var(--text3);
  text-transform: uppercase;
}
.savedchip {
  background: rgba(255,255,255,0.025); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 400;
  color: var(--text2); cursor: pointer; transition: all .14s;
  display: inline-flex; align-items: center; gap: 8px;
}
.savedchip:hover { border-color: var(--amber); color: var(--amber); }
.savedchip b { font-weight: 400; }
.savedchip .del { color: var(--text3); font-size: 11px; }
.savedchip .del:hover { color: var(--red); }

/* ── NAV ─────────────────────────────────────────────────────────────────
   The site's nav is plain light text with no chrome at all until you hover.
   The pills went; an underline marks the active view. */
.viewbtn {
  background: none; border: none; border-radius: 0;
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  letter-spacing: .01em; color: var(--text2); text-transform: none;
  padding: 7px 2px; margin: 0 11px; cursor: pointer;
  border-bottom: 1.5px solid transparent; transition: all .14s;
}
.viewbtn:hover { color: var(--text); background: none; }
.viewbtn.on {
  color: var(--amber); background: none; border-bottom-color: var(--amber);
}
.views { gap: 0; }
.top { padding: 12px 24px; background: var(--bg1); }
.mark { border-radius: 9px; }

/* ── CHART ───────────────────────────────────────────────────────────────*/
.chartwrap.ladderchart {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.chartbadge {
  font-size: 11.5px; font-weight: 300; line-height: 1.55;
  background: rgba(5,8,16,0.92); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.chartbadge b { font-weight: 600; color: var(--amber); }

/* ── ODDS AND ENDS ───────────────────────────────────────────────────────*/
.rungtag { font-family: var(--sans); font-weight: 300; font-size: 11.5px; }
.lad-note { font-weight: 300; line-height: 1.6; }
.previewnote { font-size: 12.5px; font-weight: 300; line-height: 1.6; }
.hint {
  border-color: var(--border2); color: var(--text3); font-weight: 600;
}
.hint:hover { border-color: var(--amber); color: var(--amber); }

/* ── TOP BAR ─────────────────────────────────────────────────────────────
   Seven items at their old sizes came to 1,770px and wrapped onto a second
   row that read as a mistake rather than a decision. Everything here is a
   few pixels smaller and the gaps are halved, so the bar holds one line on a
   normal laptop and degrades deliberately below that. */
.top { gap: 15px; padding: 11px 22px; row-gap: 9px; }
.brand { gap: 11px; }
.mark { width: 32px; height: 32px; font-size: 13px; }
.brandtext h1 { font-size: 13.5px; letter-spacing: .15em; }
.brandtext p { font-size: 10.5px; }
.viewbtn { margin: 0 7px; font-size: 12.5px; }
.viewbar { flex: 0 1 auto; min-width: 0; }

/* The explainer is help, not a call to action — it should not out-shout the
   one button on the page that runs the model. */
.explainbtn {
  background: transparent; border: 1px solid var(--border2);
  color: var(--text2); font-family: var(--sans); font-weight: 400;
  font-size: 12px; letter-spacing: 0; text-transform: none;
  padding: 6px 13px; border-radius: var(--radius-sm); box-shadow: none;
}
.explainbtn:hover { border-color: var(--amber); color: var(--amber); }

/* Timeframe: a segmented hairline, not three filled pills. */
.tfbar { gap: 0; border: 1px solid var(--border2); border-radius: var(--radius-sm);
         overflow: hidden; }
.tfbtn {
  background: transparent; border: none; border-radius: 0;
  color: var(--text3); font-family: var(--mono); font-size: 11px;
  font-weight: 500; padding: 6px 12px; letter-spacing: .04em;
}
.tfbtn + .tfbtn { border-left: 1px solid var(--border); }
.tfbtn:hover { color: var(--text2); background: rgba(255,255,255,0.03); }
.tfbtn.on { background: var(--amber); color: #04121c; }

.livepill { font-size: 12px; padding: 5px 11px; border-radius: var(--radius-sm); }
.tvcredit { font-size: 10.5px; padding: 5px 10px; }
.topmeta { font-size: 10px; line-height: 1.4; }

/* ── INTRO COPY ──────────────────────────────────────────────────────────
   88ch of Source Sans at 12.5px is only 527px — correct for reading, but it
   left two thirds of a 1,470px header empty and looked broken rather than
   composed. */
.paperhead p, .labhead p, .strathead p { max-width: 760px; }
.paperhead > div { flex: 1 1 auto; min-width: 0; }

/* The build meta is the least important thing in the bar, and when the row
   wrapped it landed alone at the far left — the most prominent place on line
   two. It now sits flush right on whichever line it falls on, and reads as a
   colophon rather than an announcement. */
.topmeta {
  margin-left: auto; text-align: right; color: var(--text3);
  font-family: var(--mono); letter-spacing: .02em;
}
.topmeta .metaline { font-size: 9.5px; }
.topmeta .metaline.dim { opacity: .6; }

/* ── NOTES ───────────────────────────────────────────────────────────────
   The capital-split line was a filled blue slab competing with the numbers it
   was explaining. A note is an aside: a hairline rule on the left, and
   otherwise the same ground as everything around it. */
.previewnote {
  background: none; border: none; border-left: 2px solid var(--amber);
  border-radius: 0; padding: 2px 0 2px 13px; margin: 14px 0 10px;
  color: var(--text2); max-width: 900px;
}
.previewnote b { color: var(--text); font-weight: 600; }
.previewnote .warn { color: var(--red); }
.psub { max-width: 760px; margin-top: 10px; color: var(--text3); }
.psub b { color: var(--text2); font-weight: 600; }
.lad-note {
  background: none; border: none; border-left: 2px solid var(--red);
  border-radius: 0; padding: 2px 0 2px 13px; margin: 14px 0 0;
  max-width: 900px;
}

/* Nine stat cards were laying out 8 + 1, leaving a single orphan on its own
   row. A narrower track lets them break 5+4 or 3x3 instead. */
.champgrid { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.champgrid > .champstat {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 14px;
}
.champstat b {
  font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
  font-family: var(--mono); display: block;
}
.champstat span {
  display: block; font-size: 8.5px; letter-spacing: .13em; font-weight: 600;
  text-transform: uppercase; color: var(--text3); margin: 6px 0 7px;
}
.champstat small {
  display: block; font-size: 10.5px; font-weight: 300; line-height: 1.5;
  color: var(--text3);
}

/* ── THE MARK ────────────────────────────────────────────────────────────
   Sunport's own logo mark, lifted from the group SVG and set to
   currentColor so it takes the header's white. The wordmark that sits beside
   it on the website is not used: the header already says SUNPORT DESK in
   type, and repeating it in outlines would be saying the name twice. */
.sunmark {
  height: 27px; width: auto; color: #fff; display: block; flex: none;
  margin-right: 2px;
}
.brand { padding-right: 15px; position: relative; }
.brand::after {
  content: ''; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 30px;
  background: var(--border2);
}

/* ── DROPDOWNS ───────────────────────────────────────────────────────────
   Native <option> lists are drawn by the operating system, not the page, and
   Windows renders them on white unless the element declares which scheme it
   is in. The closed select looked right and the open list was white text on
   white — unreadable, and invisible from the CSS alone. */
select, input, textarea { color-scheme: dark; }
select option {
  background: var(--bg2);
  color: var(--text);
}
select option:checked { background: var(--bg4); }
.ldwide { grid-column: span 2; }

/* `display: flex` outranks the `hidden` attribute, so the verdict bar stayed
   on screen after being hidden — the same trap the layout grid hit earlier. */
.verdictbar[hidden] { display: none; }

/* The open plan, marked. Without it "Update" names a plan the strip gives no
   sign of having selected. */
.savedchip.on {
  border-color: var(--amber); color: var(--amber);
  background: rgba(53,186,242,0.07);
}
#ldUpdate { border-color: var(--amber); color: var(--amber); }
#ldUpdate:hover { background: rgba(53,186,242,0.1); }