/* Per-page CSS for the public welcome page (/) (TO DO FL-042).
 *
 * Moved verbatim out of the <style> block in templates/welcome.html on 7
 * October 2026. The fleet's CSS gates read stylesheets only, and a <style>
 * block in a template wins by load order over every sheet linked before it:
 * the trap that let the fleet's nav bars drift in July. The template links
 * this sheet at the exact position the block held (in the page's own <head>,
 * after phronon-tokens.css and as the last sheet), so every rule meets the
 * same rules in the same order and wins the same cascade fights. Only the
 * indentation changed in the move. The sheet belongs to this tool alone and
 * is not listed in phronon_common/shared_assets.py.
 */

/* The entrance now uses the SIMULATION's palette rather than a separate one.
   Until 16 August 2026 this page was a centred white card on #efefef while
   the game behind it was dark slate, so nothing carried across the click.
   Every colour below is already in static/css/style.css — no new brand
   values were introduced. */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #0f172a;
  color: #f1f5f9;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.welcome-main {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 2.5rem 1.5rem;
}

/* The org chart lives here, behind everything, injected by org-breathe.js.
   Absolutely positioned so nothing it does can move the Start button. */
.org-canvas { position: absolute; inset: 0; z-index: 0; }

/* Opaque where the copy sits, clearing toward the empty side, so text
   contrast never depends on where a node happens to land. */
.org-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    #0f172a 0%, #0f172af5 30%, #0f172ad6 48%, #0f172a70 72%, #0f172a2e 100%);
}

.welcome-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1080px; margin: 0 auto;
}

.welcome-copy { max-width: 34rem; display: flex; flex-direction: column; gap: 1.5rem; }

.welcome-logo { width: 210px; max-width: 62%; height: auto; display: block; }

.proposition {
  font-size: clamp(1.9rem, 5.2vw, 3.05rem);
  font-weight: 800; line-height: 1.09; letter-spacing: -.025em;
  text-wrap: balance;
}

.intro-text { color: #cbd5e1; font-size: 1rem; line-height: 1.65; }
.intro-text p + p { margin-top: .7rem; }
.intro-text strong { color: #f1f5f9; font-weight: 650; }

.btn-large {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start; min-width: 13rem; min-height: 48px;
  padding: .85rem 2rem; background: #f1f5f9; color: #0f172a;
  border: none; border-radius: 6px; font-weight: 700; font-size: 1.02rem;
  text-decoration: none; transition: background .15s, transform .08s;
}
.btn-large:hover { background: #ffffff; }
.btn-large:active { transform: translateY(1px); }

.welcome-admin-link { font-size: .88rem; margin-top: -.4rem; }
.welcome-admin-link a { color: #94a3b8; text-decoration: none; }
.welcome-admin-link a:hover { color: #f1f5f9; text-decoration: underline; }

/* The device names the cost instead of leaving it to a colour. Decorative:
   the same tradeoff is stated in words in the copy above, so a reader who
   never sees the chart loses nothing. */
.org-readout {
  position: relative; z-index: 2;
  display: flex; gap: 2.25rem; margin-top: 2.75rem;
  font-size: .74rem; color: #94a3b8;
}
.org-readout .v {
  display: block; font-size: 1.6rem; font-weight: 800; color: #e2e8f0;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.org-readout .k {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em; text-transform: uppercase;
}

a:focus-visible, .btn-large:focus-visible {
  outline: 3px solid #60a5fa; outline-offset: 3px; border-radius: 4px;
}

/* The shared footer is light by default; this page is dark. Recoloured
   here rather than in the shared sheet, which eight other pages use. */
.ph-footer { background: #0b1220; border-top: 1px solid #1e293b; color: #94a3b8; }
.ph-footer a { color: #94a3b8; }
.ph-footer a:hover { color: #f1f5f9; }

@media (max-width: 720px) {
  /* THE CHART STOPS BEING A BACKGROUND HERE (17 August 2026).
     Behind full-width copy it was invisible — first because the ramp dimmed
     the side the text sits on, then, with the ramp turned vertical, because
     a backdrop under text is still a backdrop. So below this width it gets
     a band of its own under the readout and becomes a small figure instead:
     nothing over it, no scrim needed, and the top box actually visible.

     Reordered with flex rather than by moving the element, so the desktop
     composition — where the chart is absolutely positioned across the whole
     of .welcome-main — is untouched. */
  /* overflow stays `hidden` from the base rule — nothing here overflows
     (measured), and hidden is the safer default for a band whose contents
     are drawn by script. */
  .welcome-main {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 1.25rem; padding: 2rem 1.25rem 2.5rem;
  }

  /* The mobile reading order is not the desktop one: identity, the claim,
     the picture that argues it, the numbers that label the picture, and only
     then the practical detail and the button.

     Those seven things live at three different depths in the markup — the
     chart is a child of .welcome-main, the readout of .welcome-inner, the
     rest of .welcome-copy — and `order` only sorts siblings. Flattening the
     two wrappers with display:contents makes all seven direct children of
     one flex container, which is what allows the sequence below WITHOUT
     moving anything in the DOM and so without disturbing the desktop
     composition. The wrappers' max-widths and centring go with them; at this
     width there is nothing to centre and no width to cap. */
  .welcome-inner, .welcome-copy { display: contents; }

  .welcome-brand      { order: 1; }
  .proposition        { order: 2; }
  .org-canvas         { order: 3; }
  .org-readout        { order: 4; }
  .intro-text         { order: 5; }
  .btn-large          { order: 6; }
  .welcome-admin-link { order: 7; }

  .org-canvas {
    /* RELATIVE, not static. org-breathe.js gives the <svg> it injects
       position:absolute;inset:0, so the host has to be the containing block
       or the chart resolves against .welcome-main instead and goes straight
       back to covering the copy — with the scrim now switched off, which is
       worse than where this started. */
    position: relative; inset: auto;
    width: 100%; height: 170px;
    border-top: 1px solid #1e293b;
    border-bottom: 1px solid #1e293b;
  }
  /* Only ever existed to protect text contrast from the chart underneath.
     Nothing is underneath any more. */
  .org-scrim { display: none; }
  .btn-large { align-self: stretch; }
  /* The numbers now caption the chart directly above them, so they sit
     tight to it rather than pushed away as a separate block. */
  .org-readout { gap: 1.75rem; margin-top: -.25rem; }
  .org-readout .v { font-size: 1.35rem; }
}