/* ═══════════════════════════════════════════════════════════════════════════
   _launcher.css — THE LAUNCHER TAB.  2026-08-18.

   HIS WORDS: "nah remove old page design is hurrendous. just put it as a tab
   called Launcher". So this is not a new world; it is the SEQ-TERM shell doing
   one more job. The standalone page at launcher.sequenceisle.com is retired to
   a doorway and this tab is the only download surface on the island.

   ★★★★★ WHAT THIS SHEET IS ALLOWED TO DO, AND IT IS A SHORT LIST.
   `_term.css` owns the world - ground, frame, type, ink stacks, panels, the
   `.act` button, `.findbar`, `.steps`, `.jfacts`, tables. `_seq.css` owns the
   header, the nav plate, `.h2`, `.sub`, `.stat`. Everything on this page that
   could be built from those IS built from those, unchanged. This file adds
   ONLY the three things the site had never needed before:

     1. a CAUTION block, because a download page has to say a scary thing
        before it happens (there was no notice class anywhere on this site -
        each page had rolled its own in a `<style>` block, which is the drift
        this file refuses to add a fourth instance of);
     2. a RECOMMENDED state for one of two otherwise identical panels;
     3. a hash that WRAPS, because `.findbar .fname` is `nowrap` + ellipsis and
        a 64-character SHA-256 truncated at the second character is a value
        nobody can compare by eye.

   Everything else here is spacing. If a rule below could have been a class
   from the two shared sheets, it is a bug.

   ★ NO TOKEN IS RESTATED. Not one `--bg`, `--blue`, `--rule`, `--pad` or
   `--sh-*` is declared here; they all come from `_term.css:19-69`. The literal
   hexes that DO appear are the ones the site itself uses as literals - the
   colour ladder `#79D9FF > #4BB4FC > #2C84EE`, prose `#6BC6FF`, hover
   `#A8E7FF` - written the same way every other sheet in this tree writes them.

   ★ AND NO BARE `.me{}`. Everything is namespaced `.lc-`. `_seq.css:122-138`
   records a real outage caused by one page shipping a bare `.me` rule that
   destroyed the signed-in header chip site-wide; a two-letter class in a
   page sheet is a landmine, so nothing here is shorter than three.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE HEAD LINE ─────────────────────────────────────────────────────────
   The build readout under the title. `.sample` is the site's own dim mono
   line; this only gives it room and lets its link behave like a link. */
.lc-head-meta { margin-top: 12px; display: flex; flex-wrap: wrap;
                align-items: baseline; gap: 6px 14px }
.lc-head-meta a { color: #4BB4FC; border-bottom: 1px solid rgba(30,111,224,.55) }
.lc-head-meta a:hover { color: #A8E7FF; border-bottom-color: #79D9FF }

/* THE PROVENANCE PIP. It says whether the version beside it was read from the
   live update feed a moment ago or is the one this page shipped with.
   ★ IT IS NOT DECORATION AND IT IS NOT AN ERROR STATE. A download page that
   cannot reach its own metadata still has to hand somebody a working
   installer, so the page renders identically either way and only this word
   changes. Green when the feed answered - that is the site's ONLINE-class
   colour and this is an ONLINE-class fact. Amber when it did not, because
   caution is amber here and "possibly one version behind" is a caution, not a
   refusal. */
.lc-src { color: var(--green) }
.lc-src[data-src="fallback"] { color: var(--amber) }

/* ── THE TWO BUILDS ────────────────────────────────────────────────────────
   These sit in the site's own `.panels` grid, unmodified: its columns are
   1.12fr / .92fr / 1.06fr and the widest one is first, which is exactly the
   emphasis this page wants. Nothing about the grid is restated here. */

/* ★★★★★ WHICH ONE TO CLICK IS CARRIED BY SHAPE, POSITION AND WORDS - NEVER BY
   COLOUR ALONE. This is the fleet's two-reds law generalised, and it applies
   even on an island whose brand is blue: the whole page is one blue at three
   levels, so "the important one is a slightly brighter blue" is not a signal a
   stranger can read, and it is no signal at all to the ~8% of men with a
   colour vision deficiency. So the recommended build is marked FOUR ways that
   survive a greyscale print:
     · it is FIRST and it is the WIDEST cell in the grid;
     · its head carries the word RECOMMENDED and the other carries ADVANCED;
     · its border is the lit rule rather than the dim one, and its spine is
       solid rather than a hairline;
     · its button is washed - the site's own `aria-current` fill from the nav
       plate, reused - and the other's is the bare outline.
   Remove any one of those and three remain. */
.lc-pick { border-color: var(--rule-hot);
           box-shadow: inset 3px 0 0 var(--rule-hot) }
.lc-pick:hover { box-shadow: inset 3px 0 0 var(--rule-hot),
                             0 0 40px -18px rgba(61,155,255,.9) }

/* the head tag. Square, hairline, tracked - the site's pill grammar. */
.lc-tag { font-family: var(--wide); font-size: 10px; letter-spacing: .18em;
          padding: 3px 8px; white-space: nowrap;
          border: 1px solid rgba(30,111,224,.55); color: var(--blue-dim);
          text-shadow: var(--sh-micro) }
.lc-tag-pick { border-color: var(--rule-hot); color: #A8E7FF }
.lc-tag-warn { border-color: rgba(255,180,84,.6); color: var(--amber) }

/* One sentence under the panel head saying who this build is for. It is the
   first thing in the panel on purpose: a stranger reads down, and "most
   players want this one" has to arrive before the file size does. */
.lc-who { margin: 0 0 12px; font-family: var(--read); font-size: 13px;
          line-height: 1.7; color: #6BC6FF; text-shadow: var(--sh-body) }
.lc-who b { color: #79D9FF; font-weight: 400 }

/* THE DOWNLOAD BUTTON. `.act` from `_term.css` does all the work; this only
   makes it fill its panel's width, because a 96 MB download is the one thing
   this page is for and a button that ends halfway across the card reads as an
   afterthought. `.acts` keeps its own gap. */
.lc-acts { margin: 0 0 12px }
.lc-acts .act { flex: 1 1 auto; text-align: center; justify-content: center;
                padding: 13px 16px }
/* the washed state, taken verbatim from the nav plate's own current-cell fill
   (`_seq.css`: `.nav a[aria-current]{background:rgba(30,111,224,.2)}`) rather
   than invented, so the site has ONE "this one is energised" value */
.lc-go { background: rgba(30,111,224,.2); border-color: rgba(75,180,252,.85) }
.lc-go:hover { background: rgba(30,111,224,.32) }

/* the sub-line under a button: the exact filename it will save. A player who
   is told what will land in Downloads can tell the browser did the right
   thing without opening anything. */
.lc-file { display: block; margin-top: 9px; font-family: var(--mono);
           font-size: 11px; letter-spacing: .06em; color: var(--blue-dim);
           text-shadow: var(--sh-micro); overflow-wrap: anywhere }

/* the requirements panel's list — the `.steps` idiom without the numbers */
.lc-need { list-style: none; margin: 0; padding: 0; font-size: 13px;
           line-height: 1.7; color: #4BB4FC; text-shadow: var(--sh-body) }
.lc-need li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0 }
.lc-need li i { font-style: normal; color: var(--blue-dim);
                font-family: var(--mono); font-size: 11px; flex: 0 0 auto }
.lc-need li b { color: #79D9FF; font-weight: 400 }

/* ── WHAT HAPPENS NEXT ─────────────────────────────────────────────────────
   Three blocks, in the order a player meets them. They are NOT panels: a
   panel is a plate holding a reading, and these are a walkthrough. They are
   the `.steps` grammar grown a border, which is what a step you have to read
   for ten seconds needs. */
.lc-walk { display: grid; grid-template-columns: repeat(3, 1fr);
           gap: var(--pad); margin-top: clamp(14px,1.8vw,22px) }
@media (max-width: 1080px) { .lc-walk { grid-template-columns: 1fr 1fr } }
@media (max-width: 760px)  { .lc-walk { grid-template-columns: 1fr } }

.lc-move { position: relative; min-width: 0; padding: 13px 15px 15px;
           border: 1px solid var(--rule);
           background: rgba(1,4,10,.62);
           backdrop-filter: blur(10px) saturate(1.15);
           box-shadow: inset 3px 0 0 rgba(75,180,252,.55) }
.lc-move-h { display: flex; align-items: baseline; flex-wrap: wrap;
             gap: 6px 10px; margin-bottom: 9px }
.lc-move-h i { font-style: normal; font-family: var(--mono); font-size: 11px;
               letter-spacing: .12em; color: var(--blue-dim);
               text-shadow: var(--sh-micro); flex: 0 0 auto }
.lc-move-h h3 { margin: 0; font-family: var(--wide); font-weight: 560;
                font-size: 14px; letter-spacing: .06em; color: var(--blue);
                text-shadow: var(--sh-body) }
.lc-move p { margin: 0 0 10px; font-family: var(--read); font-size: 13px;
             line-height: 1.75; color: #6BC6FF; text-shadow: var(--sh-body) }
.lc-move p:last-child { margin-bottom: 0 }
.lc-move p b { color: #79D9FF; font-weight: 400 }
.lc-move .steps { margin-top: 4px }

/* ★ THE CAUTION BLOCK, AND WHY IT IS AMBER AND NOT RED.
   `_seq.css`'s colour law: "Green is reserved for ONLINE-class state, amber
   for caution, red for a refusal." SmartScreen is neither a refusal by us nor
   an error - it is Windows telling the truth about an unsigned build, and the
   player's job is to continue past it. Painting it red would make the site
   agree that something is wrong, which is the opposite of what the words say.
   ★ AND IT IS NOT ONLY THE COLOUR. The spine goes solid amber and the head
   carries the word CAUTION, so the block is distinguishable with no colour at
   all - the same structural rule the two builds follow above. */
.lc-move-warn { border-color: rgba(255,180,84,.45);
                box-shadow: inset 3px 0 0 var(--amber) }
.lc-move-warn .lc-move-h h3 { color: var(--amber) }
/* the literal words Windows puts on screen, quoted so a player can match them */
.lc-quote { display: block; margin: 0 0 10px; padding: 8px 11px;
            border: 1px dashed rgba(255,180,84,.4);
            font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
            color: var(--amber); text-shadow: var(--sh-micro) }

/* ── VERIFY ────────────────────────────────────────────────────────────────
   Optional, and it says so. Everything here is `.findbar` from `_term.css`. */
.lc-sums { display: grid; gap: 12px; margin-top: 14px }
.lc-sum-h { display: flex; flex-wrap: wrap; align-items: baseline;
            justify-content: space-between; gap: 4px 12px }
.lc-sum-h b { font-family: var(--mono); font-weight: 560; font-size: 12.5px;
              letter-spacing: .03em; color: #79D9FF;
              text-shadow: var(--sh-micro); overflow-wrap: anywhere }
.lc-sum-h span { font-family: var(--wide); font-size: 10px; letter-spacing: .16em;
                 color: var(--blue-dim); text-shadow: var(--sh-micro);
                 white-space: nowrap }

/* ★ THE ONE PLACE THIS SHEET OVERRIDES A SHARED CLASS, AND THE REASON.
   `.findbar .fname` is `white-space:nowrap; overflow:hidden;
   text-overflow:ellipsis` - correct for a server name, which is short and
   whose job is to be COPIED. A SHA-256 is 64 characters and its job is to be
   COMPARED BY EYE against what `Get-FileHash` printed, so an ellipsis after
   the fourth character removes the entire point of publishing it. It wraps,
   it breaks anywhere, and it keeps `user-select:all` so one click still takes
   the whole value. Scoped to `.lc-hash` so no other findbar on the site
   moves. */
.findbar .lc-hash { white-space: normal; overflow: visible;
                    text-overflow: clip; word-break: break-all;
                    font-size: 12px; line-height: 1.55; letter-spacing: .02em }
/* a findbar holding a wrapped value stops being a single-line bar, so its
   button has to stop pretending the row has one line */
.lc-wrapbar { align-items: stretch }
.lc-wrapbar .fcopy { display: flex; align-items: center }

/* the command line. There is no `pre`/`code` styling anywhere on this site and
   this sheet is not going to invent one for a single line: the site's own
   idiom for "a value you take away with you" is the findbar, so that is what
   a command is too. */
.lc-cmd { font-size: 12.5px }

/* ── THE STATUS BAR READOUT ────────────────────────────────────────────────
   `.status .stats` already styles this. The only addition is that a value
   which has not arrived yet must not be mistaken for one that has. */
.lc-unknown { color: var(--blue-dim) }

/* ★ THE UNSIGNED FACT IS AMBER IN BOTH PLACES IT APPEARS, and it started out
   dim. A real render at 1280 showed why that was wrong: the panel foot read
   "> SIGNED  NO — SEE BELOW" in the quietest ink on the card, so the single
   most consequential thing about this download - Windows is about to throw a
   blue wall at you - was the least visible line in its own panel. It is a
   CAUTION, the site's colour law makes caution amber, and it now matches the
   caution block further down the page so the two read as one statement rather
   than two unrelated notes. */
.lc-caution { color: var(--amber) }

/* ── LINKS IN RUNNING PROSE ────────────────────────────────────────────────
   ★ NEITHER SHARED SHEET STYLES AN ANCHOR INSIDE `.sub`, because until now no
   page had one: `a{color:inherit;text-decoration:none}` in `_term.css` is the
   site-wide reset and every other link on the site is a button, a nav cell or
   a chip that carries its own box. This page has two links inside sentences -
   the full checksum list and Discord - and rendered they were literally
   indistinguishable from the words around them. A hairline underline in the
   site's own leader colour is the quietest thing that makes a link a link. */
.lc-a { color: #79D9FF; border-bottom: 1px solid rgba(30,111,224,.6) }
.lc-a:hover { color: #A8E7FF; border-bottom-color: #79D9FF }

/* ── NARROW ────────────────────────────────────────────────────────────────
   Every width below is one the site already uses; no new breakpoint is
   introduced. At 420 the panel head's tag would otherwise sit alone on a line
   pushed hard right, which reads as a stray. */
@media (max-width: 420px) {
  .lc-sum-h { display: block }
  .lc-sum-h span { display: block; margin-top: 3px }
  .lc-acts .act { padding: 12px 12px; font-size: 11.5px }
}

/* ── CALM ──────────────────────────────────────────────────────────────────
   This sheet introduces exactly one transition of its own (`.lc-go`'s
   background, inherited from `.act`'s own transition list) and one hover
   shadow. Under calm the INFORMATION never changes - only the movement
   stops - which is the doctrine `_term.css:497` states for the cold-start
   curtain and the rule the rest of this tree follows. */
@media (prefers-reduced-motion: reduce) {
  .lc-pick:hover { box-shadow: inset 3px 0 0 var(--rule-hot) }
  .lc-go, .lc-go:hover { transition: none }
}
