/* ==========================================================================
   V6 LIGHT OPENING
   ==========================================================================
   Loaded last on every V6 route, after system.css.

   The requirement is that every V6 page opens on a dark blue navigation bar
   followed by a light hero or first content section. Not a light second
   surface after a dark hero, and not a light bar either: the masthead stays
   navy and the content below it is light.

   A survey of all thirteen routes found four dark heroes: / at #0b1233,
   and about, contact and solutions on a black plate under blue and yellow
   radial glows. The other nine already opened on #f4f2ec or #e9e5d9.

   Worth recording, because it is the reason a computed-style check was not
   enough: those three marketing heroes set no background colour at all, so a
   backgroundColor read reports the body's #f4f2ec and misses them entirely.
   They were only caught by sampling rendered pixels.

   So this file lights the four dark heroes and the fixed left rail, and
   leaves the masthead alone. The nine already-light heroes are untouched.

   WHAT KEEPS THE IDENTITY, now that it cannot come from a dark background:

     the blueprint grid, which stays on every hero but switches from yellow
     lines on navy to blue lines on paper, which is what a drawing actually
     looks like
     navy display typography at full weight, which is stronger on paper than
     it was in white on navy
     yellow reserved for the one thing that matters on each screen
     ruled borders, mono data labels and instrument chrome
     the Control Tower panel itself, which stays a dark instrument on a light
     page. A control screen is dark; the room it sits in is not. That is the
     one place navy survives above the fold, and it is a component rather
     than the surface, so the page still opens light.

   Navy is not gone from the site. It arrives later, as the boundary section
   and the close, which is where it now reads as a deliberate contrast rather
   than as the default.
   ========================================================================== */

:root {
  --lite-surface:  #f4f2ec;   /* warm paper, the opening surface */
  --lite-raised:   #ffffff;
  --lite-rule:     #ddd9cc;
  --lite-rule-2:   #c7c2b1;
  --lite-grid:     rgba(52, 70, 157, 0.07);
}

/* ==========================================================================
   1. THE MASTHEAD STAYS DARK
   ==========================================================================
   An earlier pass in this file lit the masthead along with the heroes, on the
   reading that "begins light" covered the whole top of the page. It does not.
   The requirement is a dark blue navigation bar above a light opening, so the
   bar keeps the approved --navy-900 #1a2660 it has always used and this file
   leaves it alone entirely.

   That means the masthead, the mobile panel and the masthead logo are all back
   to the values in shell.css, home.css and elevation.css, and nothing here
   overrides them. The only thing this section does is make sure the light work
   below cannot leak upward into the bar.

   The visual opening is therefore: navy bar, then light hero.
   ========================================================================== */

/* The hero rules in section 2 and 3 are scoped to .tower and .hero, neither of
   which the masthead is inside, so no guard is needed beyond saying so. The
   breadcrumb strip sits between the two and keeps its light edge. */
body .breadcrumb { border-bottom-color: var(--lite-rule); }

/* ==========================================================================
   2. THE HOMEPAGE HERO
   ==========================================================================
   #0b1233 to paper. The headline gains contrast rather than losing it: navy
   on #f4f2ec measures 12.6:1 against white-on-navy's 14.9:1, and it reads as
   print rather than as a screen.

   The blueprint grid that used to be re-polarised here is gone: the final
   production pass removed the square-pattern fields site-wide, so there is
   nothing left to switch from yellow-on-navy to blue-on-paper.
   ========================================================================== */

body.home .tower {
  background: var(--lite-surface);
  color: var(--ink-body, #3b426a);
}
body.home .tower__eyebrow { color: var(--blue, #34469d); }
body.home .tower__title { color: var(--ink, #1a2660); }
body.home .tower__lede { color: var(--ink-body, #3b426a); }
body.home .tower__note { color: var(--ink-muted, #626a8c); }

/* The secondary CTA was drawn for a dark bar. */
body.home .tower .btn--secondary {
  color: var(--ink, #1a2660);
  border-color: var(--lite-rule-2);
  background: transparent;
}
body.home .tower .btn--secondary:hover {
  border-color: var(--navy, #1a2660); color: var(--navy, #1a2660);
}
body.home .tower :focus-visible { outline-color: var(--blue, #34469d); }

/* The stage rail is a fixed strip down the whole left edge of the viewport, so
   leaving it at --tower-0 put a navy band beside every light section, not just
   beside the hero. It becomes paper with a ruled edge and keeps its job: the
   position indicator for the six stages. The active stage is still marked in
   the signal colour, which now has somewhere quiet to sit. */
/* The rail is a fixed 76px strip from top:0, and .home is padded left by the
   same width, so the masthead starts at x=76 and has never covered the strip.
   While the rail was navy that was invisible: the two read as one continuous
   bar. Lit, it punched a light notch out of the left end of the navigation
   bar and the bar stopped running full width.

   Lowering z-index does not help, because the masthead is not above the rail,
   it is beside it. So the rail carries the bar's navy for exactly the height
   of the bar and is paper below that. The rail only renders at 75rem and up,
   where the masthead is 89px, so the stop is a fixed value rather than a
   token that varies by breakpoint. */
body.home .rail {
  background: linear-gradient(
    var(--navy) 0 89px,
    var(--lite-surface) 89px
  );
  /* A navy-tinted rule rather than a light one: over the bar's navy it
     disappears, over paper it reads as the same quiet edge the light surfaces
     use. A solid light border drew a visible line straight through the
     navigation bar. */
  border-right: 1px solid rgba(26, 38, 96, 0.14);
}
body.home .rail__idx { color: var(--ink-muted, #626a8c); }
body.home .rail__tick { background: var(--lite-rule-2); }
body.home .rail__item.is-here .rail__idx { color: var(--navy, #1a2660); }
body.home .rail__item.is-here .rail__tick { background: var(--yellow-deep, #E6C400); }
body.home .railbar__fill { background: var(--yellow-deep, #E6C400); }

/* THE INSTRUMENT STAYS DARK.
   The Control Tower panel is a control screen, and a control screen is dark.
   Keeping it navy is what carries the identity now that the surface behind it
   does not, and it is why the simulation's status colours, budget bars and
   boundary row all still read exactly as they were tuned to. It is a component
   sitting on the light surface, not the surface itself, so the page still
   opens light. It also gains an edge and a shadow, because on paper an
   instrument has to look like it is resting on something. */
body.home .tower .panel {
  border: 1px solid rgba(26, 38, 96, 0.18);
  box-shadow: 0 26px 60px rgba(20, 26, 60, 0.18);
}

/* ==========================================================================
   3. THE MARKETING HEROES: about, contact, solutions
   ==========================================================================
   These three sat on a black plate under a blue and a yellow radial glow.
   The glows go and the plate becomes paper. The blueprint field went with the
   site-wide removal of the square-pattern graphics.
   ========================================================================== */

body:not(.home) .hero {
  background: var(--lite-surface);
  color: var(--ink-body, #3b426a);
}
body:not(.home) .hero .eyebrow { color: var(--blue, #34469d); }
body:not(.home) .hero__title { color: var(--ink, #1a2660); }
body:not(.home) .hero__lead { color: var(--ink-body, #3b426a); }
body:not(.home) .hero p { color: var(--ink-body, #3b426a); }
body:not(.home) .hero .reassure { color: var(--ink-muted, #626a8c); }
body:not(.home) .hero .btn--secondary {
  color: var(--ink, #1a2660); border-color: var(--lite-rule-2); background: transparent;
}
body:not(.home) .hero .btn--secondary:hover {
  border-color: var(--navy, #1a2660); color: var(--navy, #1a2660);
}
body:not(.home) .hero :focus-visible { outline-color: var(--blue, #34469d); }

/* Chips, plates and the illustrative dashboard that live inside these heroes
   were all drawn against black. */
body:not(.home) .hero .plate,
body:not(.home) .hero .dash,
body:not(.home) .hero .dtile {
  background: var(--lite-raised);
  border-color: var(--lite-rule);
  box-shadow: 0 14px 34px rgba(20, 26, 60, 0.08);
}
body:not(.home) .hero .plate__label,
body:not(.home) .hero .dtile__k { color: var(--ink-muted, #626a8c); }
body:not(.home) .hero .plate__badge {
  color: var(--ink-muted, #626a8c); border-color: var(--lite-rule-2);
}
body:not(.home) .hero .dtile__v { color: var(--ink, #1a2660); }
body:not(.home) .hero .dtile__u { color: var(--ink-muted, #626a8c); }
body:not(.home) .hero .dash__item { color: var(--ink-body, #3b426a); border-color: var(--lite-rule); }
body:not(.home) .hero .dash__item span { color: var(--ink-body, #3b426a); }

/* The trust chips under the hero CTA were near-white on black. Left alone they
   rendered as near-white on cream, which is the one genuinely invisible thing
   the conversion would have produced. Caught by looking at the rendered hero,
   not by reading the stylesheet. */
body:not(.home) .hero__trust { color: var(--ink-body, #3b426a); }
body:not(.home) .hero__trust span { color: var(--ink-body, #3b426a); }

/* Status pills keep their meaning but need ink-weight colour on paper. */
body:not(.home) .hero .pill { border-color: var(--lite-rule-2); }
body:not(.home) .hero .pill--approved { color: #1b7f4a; }
body:not(.home) .hero .pill--synced   { color: #1f6f8b; }
body:not(.home) .hero .pill--pending  { color: #8a6d00; }