/* ==========================================================================
   BarTest — THE TAPE

   The site is one place, and the place is a market.

   Scrolling does not move a page down; it moves a camera along and through a
   price chart. The route runs right, then down, then left, then down again —
   six stations wired together by the line itself, so the thing you travel
   along is the product. A tour of a house would have been somebody else's
   idea. This one is only available to a company that holds eleven years of
   verified minute history, which is the whole point of it.

   Everything is prefixed fd-. Nothing here touches the module panels, the
   overlays, the auth flow or the checkout: those are reached by calling the
   site's own openService(), exactly as the branches used to.
   ========================================================================== */

:root {
    --fd-ink:     #06050e;
    --fd-ground:  #0c0b18;
    --fd-raised:  #151327;
    --fd-hair:    rgba(236, 231, 221, .10);
    --fd-hair-2:  rgba(236, 231, 221, .22);
    --fd-vellum:  #ece7dd;
    --fd-smoke:   #948fa3;
    --fd-dim:     #635e78;
    --fd-brass:   #f7a600;
    --fd-brass-d: #b87c07;
    --fd-rise:    #20b26c;
    --fd-fall:    #ef454a;
}

html.fd-on, html.fd-on body { background: var(--fd-ink); }
html.fd-on body { overflow-x: hidden; }

.fd-display { font-family: 'Bodoni Moda', Didot, Georgia, serif;
              font-weight: 400; line-height: 1.03; letter-spacing: -.015em;
              text-wrap: balance; }
.fd-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.fd-tnum { font-variant-numeric: tabular-nums; }
.fd-up { color: var(--fd-rise); }
.fd-down { color: var(--fd-fall); }

.fd-eyebrow { margin: 0 0 16px; font-family: 'IBM Plex Mono', ui-monospace, monospace;
              font-size: .68rem; font-weight: 500; letter-spacing: .22em;
              text-transform: uppercase; color: var(--fd-brass); }

/* ================================================================ buttons ==*/
.fd-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: .86rem; font-weight: 500;
    padding: 10px 17px; min-height: 42px;
    background: transparent; color: var(--fd-vellum);
    border: 1px solid var(--fd-hair-2); border-radius: 2px;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: border-color .16s, background .16s, color .16s;
}
.fd-btn:hover { border-color: var(--fd-brass); color: var(--fd-brass); }
.fd-btn[disabled] { opacity: .34; cursor: default; }
.fd-btn[disabled]:hover { border-color: var(--fd-hair-2); color: var(--fd-vellum); }
.fd-btn.brass { background: var(--fd-brass); border-color: var(--fd-brass);
                color: #17130a; font-weight: 600; }
.fd-btn.brass:hover { background: var(--fd-brass-d); border-color: var(--fd-brass-d); color: #17130a; }
.fd-btn.long  { border-color: rgba(32,178,108,.5); color: var(--fd-rise); }
.fd-btn.long:hover { background: rgba(32,178,108,.14); border-color: var(--fd-rise); }
.fd-btn.short { border-color: rgba(239,69,74,.5); color: var(--fd-fall); }
.fd-btn.short:hover { background: rgba(239,69,74,.14); border-color: var(--fd-fall); }

/* ============================================================= navigation ==*/
#fd-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    display: flex; align-items: center; gap: 26px;
    padding: 14px clamp(16px, 3vw, 34px); padding-right: 232px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    background: transparent; border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, backdrop-filter .3s;
    pointer-events: none;
}
#fd-nav > * { pointer-events: auto; }
body.fd-stuck #fd-nav {
    background: rgba(6, 5, 14, .82); backdrop-filter: blur(14px);
    border-bottom-color: var(--fd-hair);
}
.fd-brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none;
            color: var(--fd-vellum); font-size: 1.18rem; letter-spacing: -.01em;
            white-space: nowrap; }
.fd-brand b { font-weight: 700; }
.fd-brand span { font-weight: 300; color: var(--fd-smoke); }
.fd-links { display: flex; align-items: center; gap: 22px; }
.fd-links button {
    background: none; border: none; padding: 6px 0; cursor: pointer;
    font: inherit; font-size: .84rem; color: var(--fd-smoke);
    border-bottom: 1px solid transparent; transition: color .16s, border-color .16s;
}
.fd-links button:hover, .fd-links button.on {
    color: var(--fd-vellum); border-bottom-color: var(--fd-brass);
}
#fd-nav .fd-btn { margin-left: auto; }
@media (max-width: 940px) { .fd-links { display: none; } #fd-nav { padding-right: 210px; } }
@media (max-width: 560px) { #fd-nav .fd-btn { display: none; } }

/* ================================================================== stage ==

   The stage is fixed and the track behind it is tall: scrolling the track
   drives a camera over a world that never itself scrolls. The chart is
   painted on a viewport-sized canvas in camera space every time the camera
   moves — cheaper and sharper than a world-sized bitmap — and the station
   panels ride in a transformed layer above it. */

#fd-stage {
    position: fixed; inset: 0; z-index: 2;
    overflow: hidden; background: var(--fd-ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: var(--fd-vellum);
}
#fd-sky { position: absolute; inset: 0; display: block; }
#fd-world { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
#fd-track { position: relative; z-index: 1; pointer-events: none; }

/* Every station is one screen of the world, parked at its own cell. */
.fd-station {
    position: absolute;
    left: calc(var(--cx) * 100vw); top: calc(var(--cy) * 100dvh);
    width: 100vw; height: 100dvh;
    display: flex; align-items: center;
    padding: clamp(74px, 9vh, 104px) clamp(18px, 5vw, 74px) clamp(24px, 5vh, 56px);
    opacity: 0; transition: opacity .4s ease;
    pointer-events: none;
}
.fd-station.near { opacity: 1; pointer-events: auto; }
.fd-inner { width: min(1080px, 100%); margin-inline: auto; }
/* Station zero carries a terminal beside a paragraph, and a terminal wants
   the room a terminal has. It is the only station wide enough to need it. */
.fd-station:first-of-type .fd-inner { width: min(1400px, 100%); }

.fd-station h2 { margin: 0; font-size: clamp(1.8rem, 3.8vw, 3.1rem); }
.fd-station p  { color: var(--fd-smoke); line-height: 1.62; }
.fd-station b  { color: var(--fd-vellum); font-weight: 500; }

/* a number and a rule, so a station says where on the route it sits */
.fd-num {
    display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
    font-family: 'IBM Plex Mono', monospace; font-size: .66rem;
    letter-spacing: .22em; text-transform: uppercase; color: var(--fd-brass);
}
.fd-num i { font-style: normal; flex: 1 1 auto; height: 1px;
            background: var(--fd-hair); max-width: 170px; }

/* ------------------------------------------------------------ the compass */
#fd-rail {
    position: fixed; right: clamp(12px, 2vw, 26px); top: 50%; z-index: 880;
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 15px; align-items: flex-end;
}
#fd-rail button {
    display: flex; align-items: center; gap: 10px;
    background: none; border: none; padding: 2px 0; cursor: pointer;
    font-family: 'IBM Plex Mono', monospace; font-size: .58rem;
    letter-spacing: .16em; text-transform: uppercase; color: transparent;
    transition: color .2s;
}
#fd-rail button em { font-style: normal; white-space: nowrap; }
#fd-rail button::after {
    content: ''; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: var(--fd-dim);
    transition: background .25s, box-shadow .25s, transform .25s;
}
#fd-rail button:hover { color: var(--fd-smoke); }
#fd-rail button.on { color: var(--fd-brass); }
#fd-rail button.on::after {
    background: var(--fd-brass); transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(247,166,0,.16);
}
@media (max-width: 720px) { #fd-rail { display: none; } }

.fd-cue { position: fixed; left: 50%; bottom: clamp(14px, 4vh, 36px); z-index: 890;
          transform: translateX(-50%); display: flex; flex-direction: column;
          align-items: center; gap: 7px; pointer-events: none;
          font-family: 'IBM Plex Mono', monospace; font-size: .62rem;
          letter-spacing: .22em; text-transform: uppercase; color: var(--fd-brass);
          transition: opacity .4s ease; }
.fd-cue span { width: 1px; height: 24px; background: linear-gradient(var(--fd-brass), transparent);
               animation: fd-drip 1.9s ease-in-out infinite; }
@keyframes fd-drip { 0%,100% { opacity: .25; transform: scaleY(.5); transform-origin: top; }
                     50%     { opacity: 1;   transform: scaleY(1);  transform-origin: top; } }
body.fd-moved .fd-cue { opacity: 0; }

/* ================================================== station panels, shared */

.fd-two { display: grid; gap: clamp(18px, 3vw, 32px);
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.fd-two.wide { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
.fd-two.lede { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }

.fd-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.fd-list li { display: grid; grid-template-columns: 14px 1fr; gap: 11px; font-size: .9rem; }
.fd-list li::before { content: '\2014'; color: var(--fd-brass); }
.fd-list li.no { color: var(--fd-dim); }
.fd-list li.no::before { content: '\00B7'; color: var(--fd-dim); }

.fd-card { border: 1px solid var(--fd-hair); background: rgba(12,11,24,.74);
           backdrop-filter: blur(7px); padding: clamp(17px, 2.3vw, 25px);
           display: flex; flex-direction: column; gap: 12px; }
.fd-card.lead { border-color: rgba(247,166,0,.34);
                background: radial-gradient(90% 120% at 100% 0%, rgba(247,166,0,.14), transparent 58%),
                            rgba(21,19,39,.84); }
.fd-card h3 { margin: 0; font-size: clamp(1.35rem, 2.5vw, 1.95rem); }
.fd-card .role { font-family: 'IBM Plex Mono', monospace; font-size: .6rem;
                 letter-spacing: .2em; text-transform: uppercase; color: var(--fd-dim); }
.fd-card p { margin: 0; font-size: .92rem; }
.fd-card .foot { margin-top: auto; padding-top: 6px; }

/* the loop */
.fd-loop { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
.fd-loop > div { border-top: 2px solid var(--fd-brass); padding: 14px 0 0; }
.fd-loop h4 { margin: 0 0 6px; font-size: .98rem; font-weight: 600; }
.fd-loop p { margin: 0; font-size: .87rem; }
.fd-loop .k { display: block; margin-bottom: 8px; font-family: 'IBM Plex Mono', monospace;
              font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
              color: var(--fd-dim); }

/* the machine */
.fd-rules { margin: 0; padding: 13px; white-space: pre-wrap;
            font-family: 'IBM Plex Mono', monospace; font-size: .78rem; line-height: 1.7;
            color: var(--fd-vellum); border-left: 2px solid var(--fd-brass);
            background: rgba(247,166,0,.05); }
.fd-sent { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
           font-family: 'IBM Plex Mono', monospace; font-size: .62rem;
           letter-spacing: .18em; text-transform: uppercase; color: var(--fd-rise); }
.fd-sent::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
                   background: var(--fd-rise); box-shadow: 0 0 0 4px rgba(32,178,108,.16); }

.fd-report { border: 1px solid var(--fd-hair-2); background: rgba(21,19,39,.88);
             backdrop-filter: blur(7px); overflow: hidden; }
.fd-report-top { display: flex; align-items: baseline; justify-content: space-between;
                 gap: 14px; flex-wrap: wrap; padding: 13px 17px;
                 border-bottom: 1px solid var(--fd-hair); }
.fd-report-top h4 { margin: 0; font-size: .94rem; font-weight: 600; }
.fd-report-top .ex { font-family: 'IBM Plex Mono', monospace; font-size: .56rem;
                     letter-spacing: .18em; text-transform: uppercase;
                     color: var(--fd-ink); background: var(--fd-smoke);
                     padding: 3px 7px; border-radius: 2px; }
#fd-curve { display: block; width: 100%; height: clamp(88px, 14vh, 140px); }
#fd-curve path.line { fill: none; stroke: var(--fd-brass); stroke-width: 2;
                      stroke-linejoin: round; stroke-linecap: round; }
.fd-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
              background: var(--fd-hair); margin: 0; }
.fd-metrics > div { background: rgba(21,19,39,.97); padding: 10px 14px; }
.fd-metrics dt { font-family: 'IBM Plex Mono', monospace; font-size: .56rem;
                 letter-spacing: .16em; text-transform: uppercase; color: var(--fd-dim); }
.fd-metrics dd { margin: 3px 0 0; font-family: 'IBM Plex Mono', monospace;
                 font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 600; }

/* the tiers */
#fd-tiers { display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.fd-price { display: flex; align-items: baseline; gap: 7px; }
.fd-price b { font-family: 'Bodoni Moda', Georgia, serif;
              font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 400; line-height: 1;
              color: var(--fd-vellum); }
.fd-price i { font-style: normal; color: var(--fd-smoke); font-size: .8rem; }
.fd-billed { margin: -6px 0 0; font-size: .74rem; color: var(--fd-dim); }
.fd-cycle { display: inline-flex; border: 1px solid var(--fd-hair-2); border-radius: 2px;
            overflow: hidden; margin-top: 16px; }
.fd-cycle button { font: inherit; font-family: 'IBM Plex Sans', system-ui, sans-serif;
                   font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
                   padding: 9px 15px; min-height: 40px; background: transparent;
                   color: var(--fd-smoke); border: none; cursor: pointer; }
.fd-cycle button[aria-pressed="true"] { background: var(--fd-brass); color: #17130a; font-weight: 600; }

/* the last station */
.fd-map { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
          background: var(--fd-hair); border: 1px solid var(--fd-hair); margin-top: 22px; }
.fd-map button { background: rgba(12,11,24,.88); padding: 15px 17px; text-align: left;
                 border: none; cursor: pointer; color: var(--fd-vellum); font: inherit;
                 display: flex; flex-direction: column; gap: 4px; transition: background .16s; }
.fd-map button:hover { background: var(--fd-raised); }
.fd-map .t { font-weight: 600; font-size: .92rem; }
.fd-map .s { font-size: .79rem; color: var(--fd-smoke); }
.fd-map .soon { font-family: 'IBM Plex Mono', monospace; font-size: .56rem;
                letter-spacing: .18em; text-transform: uppercase; color: var(--fd-dim); }
.fd-fine { margin-top: 20px !important; font-size: .78rem; color: var(--fd-dim) !important;
           max-width: 64ch; }

@media (max-width: 980px) {
    .fd-two, .fd-two.wide, .fd-two.lede, .fd-loop, #fd-tiers { grid-template-columns: 1fr; }
    .fd-metrics { grid-template-columns: repeat(2, 1fr); }
    .fd-station { padding-top: 68px; align-items: flex-start; }
    .fd-inner { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* A camera is a choice. Someone who has asked not to be moved gets the same
   six stations stacked in order, with nothing sliding anywhere. */
@media (prefers-reduced-motion: reduce) {
    #fd-stage { position: static; height: auto; overflow: visible; }
    #fd-sky { display: none; }
    #fd-world { position: static; transform: none !important; }
    .fd-station { position: static; width: auto; height: auto; opacity: 1;
                  pointer-events: auto; padding-block: 56px;
                  border-top: 1px solid var(--fd-hair); }
    #fd-track, #fd-rail, .fd-cue { display: none; }
}

/* ==========================================================================
   THE FINISH

   Everything above builds the place. This makes it feel like somewhere
   expensive to be, and drags every surface the site had before — the service
   panel, the modals, the account chip, the reports — into the same language.
   No screen should look like it came from a different product.

   Three things do most of the work, in this order: light, material, and
   restraint. Light means the world is lit from somewhere rather than being
   flat black. Material means a panel has an edge catching that light and a
   shadow underneath it, not a one-pixel outline. Restraint means the accent
   appears about six times per screen and nowhere else.
   ========================================================================== */

/* ------------------------------------------------------------ 1 · the air */

/* A key light in the upper left and a vignette everywhere else, so the world
   has a direction to be lit from. Behind the panels, above the chart. */
#fd-sky   { z-index: 0; }
#fd-world { z-index: 2; }
#fd-stage::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(112% 82% at 16% 8%,  rgba(247,166,0,.13), transparent 56%),
        radial-gradient(90% 70%  at 88% 96%, rgba(90,169,240,.07), transparent 60%),
        radial-gradient(150% 130% at 50% 50%, transparent 42%, rgba(2,1,6,.82) 100%);
}

/* Grain. Four kilobytes of turbulence over the whole screen is the single
   cheapest thing that stops a dark page looking like a dark rectangle: it
   gives every gradient a surface and kills the banding they would otherwise
   show on a wide gamut display. */
#fd-stage::after {
    content: ''; position: fixed; inset: -50%; z-index: 60; pointer-events: none;
    opacity: .042;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- 2 · the material

   A premium surface is not a border. It is an edge that catches the light at
   the top, a body that is slightly lighter than what is behind it, and a
   shadow deep enough to say the thing is sitting above the page rather than
   drawn on it. Radius stays at two pixels throughout: precision reads as
   expensive here, roundness reads as an app. */

.fd-card, .fd-report, .fd-map, .fd-rules {
    border-radius: 2px;
    box-shadow:
        inset 0 1px 0 rgba(236,231,221,.07),
        0 1px 0 rgba(6,5,14,.9),
        0 28px 64px -28px rgba(0,0,0,.86);
}
.fd-card {
    background:
        linear-gradient(rgba(236,231,221,.028), rgba(236,231,221,0) 42%),
        rgba(13,12,26,.80);
}
.fd-card.lead {
    background:
        radial-gradient(88% 130% at 100% 0%, rgba(247,166,0,.16), transparent 56%),
        linear-gradient(rgba(236,231,221,.04), rgba(236,231,221,0) 44%),
        rgba(23,20,42,.88);
    box-shadow:
        inset 0 1px 0 rgba(247,166,0,.20),
        0 30px 70px -26px rgba(0,0,0,.9),
        0 0 0 1px rgba(247,166,0,.10);
}
.fd-report { background:
        linear-gradient(rgba(236,231,221,.03), rgba(236,231,221,0) 38%),
        rgba(21,19,39,.90); }

/* ------------------------------------------------------- 3 · the typography

   The display face is a didone, so it earns its keep at size and loses it at
   small sizes. Headlines go up; everything that is not a headline stays
   quiet and monospaced. */

.fd-station h2 { font-size: clamp(2.1rem, 4.6vw, 4.1rem); letter-spacing: -.022em; }
.fd-card h3    { font-size: clamp(1.4rem, 2.7vw, 2.1rem);  letter-spacing: -.016em; }

.fd-station p { font-size: clamp(.94rem, 1.15vw, 1.06rem); max-width: 62ch; }
.fd-two.lede p { max-width: 46ch; }

/* The station number, set once at the size a didone deserves and dropped
   behind the words. It is the only decoration on the page and it is telling
   the truth: it says which of six stops you are standing at. */
.fd-station { position: absolute; }
.fd-ghost {
    position: absolute; z-index: -1; pointer-events: none;
    right: clamp(18px, 6vw, 96px); top: 50%;
    transform: translateY(-50%);
    font-family: 'Bodoni Moda', Didot, Georgia, serif;
    font-size: clamp(12rem, 34vw, 30rem); line-height: .8; font-weight: 400;
    color: rgba(236,231,221,.028);
    font-variant-numeric: tabular-nums;
    user-select: none;
}
@media (max-width: 980px) { .fd-ghost { display: none; } }

.fd-num { letter-spacing: .28em; font-size: .62rem; }
.fd-num i { background: linear-gradient(90deg, rgba(247,166,0,.5), transparent); max-width: 220px; }

/* ---------------------------------------------------- 4 · the arrival

   Content assembles when the camera lands, in the order it should be read.
   One curve everywhere, so the whole site moves with the same hand. */

.fd-inner > *:not(.fd-note) {
    opacity: 0; transform: translateY(20px);
    transition: opacity .72s cubic-bezier(.16,.84,.3,1),
                transform .72s cubic-bezier(.16,.84,.3,1);
}
.fd-station.near .fd-inner > *:not(.fd-note) { opacity: 1; transform: none; }
/* The caption is not part of the arrival: it appears when the price says
   something, which is a different clock from the camera's. */
.fd-station.near .fd-inner > *:nth-child(1) { transition-delay: .06s; }
.fd-station.near .fd-inner > *:nth-child(2) { transition-delay: .14s; }
.fd-station.near .fd-inner > *:nth-child(3) { transition-delay: .22s; }
.fd-station.near .fd-inner > *:nth-child(4) { transition-delay: .30s; }
.fd-station.near .fd-inner > *:nth-child(5) { transition-delay: .38s; }
.fd-station.near .fd-inner > *:nth-child(6) { transition-delay: .46s; }

/* ------------------------------------------------------------ 5 · controls

   A button fills rather than changes colour. It costs one gradient and it is
   the difference between a control that responds and a control that blinks. */

.fd-btn, .tier-btn, .action-btn, .abort-btn, .rpt-btn,
.submit-system-btn, .crypto-pay-btn {
    background-image: linear-gradient(var(--fd-brass), var(--fd-brass));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size .34s cubic-bezier(.16,.84,.3,1),
                color .22s ease, border-color .22s ease;
}
.fd-btn:hover, .tier-btn:hover, .action-btn:hover, .rpt-btn:hover,
.submit-system-btn:hover, .crypto-pay-btn:hover {
    background-size: 100% 100%;
    color: #17130a !important;
    border-color: var(--fd-brass) !important;
}
.fd-btn.brass { background-size: 100% 100%; }
.fd-btn.brass:hover { background-image: linear-gradient(var(--fd-brass-d), var(--fd-brass-d)); }
.fd-btn.long:hover  { background-image: linear-gradient(var(--fd-rise), var(--fd-rise)); color: #06120c !important; }
.fd-btn.short:hover { background-image: linear-gradient(var(--fd-fall), var(--fd-fall)); color: #1a0708 !important; }

/* the compass gets a spine, so it reads as an instrument */
#fd-rail::before {
    content: ''; position: absolute; right: 3px; top: -8px; bottom: -8px; width: 1px;
    background: linear-gradient(transparent, rgba(236,231,221,.14) 12%,
                                rgba(236,231,221,.14) 88%, transparent);
}

/* ==========================================================================
   6 · EVERY SURFACE THE SITE ALREADY HAD

   The service panel, the modals, the account chip and the report screens
   were written in a different voice — uppercase monospace, hard cyan and
   green, corner brackets. They are the same product and they now look it.
   ========================================================================== */

/* One family across all of it. !important because a couple of these carry
   inline styles from before, and a half-converted screen is worse than an
   unconverted one. */
.module-details, .module-details *,
#subscription-modal-overlay, #subscription-modal-overlay *,
#auth-modal-overlay, #auth-modal-overlay *,
#tactical-modal-overlay, #tactical-modal-overlay *,
#crypto-modal-overlay, #crypto-modal-overlay *,
#reports-library, #reports-library *,
#report-dashboard, #report-dashboard *,
#auth-corner, #auth-corner * {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif !important;
    letter-spacing: normal;
}
.module-details .module-tag, .module-details .stat-title,
#subscription-modal-overlay .tier-name, #subscription-modal-overlay .tier-billed,
#subscription-modal-overlay .billing-toggle button,
#auth-modal-overlay label, #tactical-modal-overlay .modal-status-tag,
#crypto-modal-overlay #crypto-wallet-address, #crypto-modal-overlay #crypto-amount-due,
#reports-library .rl-counts, #report-dashboard .rpt-note {
    font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
}
.module-details h2, #subscription-modal-overlay h2,
#auth-modal-overlay h2, #tactical-modal-overlay h2,
#reports-library h2, #report-dashboard h2 {
    font-family: 'Bodoni Moda', Didot, Georgia, serif !important;
    font-weight: 400; letter-spacing: -.02em; text-transform: none;
}

:is(.module-details, #subscription-modal-overlay, #auth-modal-overlay,
     #tactical-modal-overlay, #crypto-modal-overlay, #reports-library,
     #report-dashboard, #auth-corner) .fa-solid,
:is(.module-details, #subscription-modal-overlay, #auth-modal-overlay,
     #tactical-modal-overlay, #crypto-modal-overlay, #reports-library,
     #report-dashboard, #auth-corner) .fa-regular {
    font-family: 'Font Awesome 6 Free' !important;
}
:is(.module-details, #subscription-modal-overlay, #auth-modal-overlay,
     #tactical-modal-overlay, #crypto-modal-overlay, #reports-library,
     #report-dashboard, #auth-corner) .fa-brands {
    font-family: 'Font Awesome 6 Brands' !important;
}

/* the corner brackets were the loudest thing in the old voice */
.corner-bracket { opacity: .22; filter: saturate(0) brightness(1.6); }

/* --------------------------------------------------------- service panel */
.module-details {
    background:
        linear-gradient(rgba(236,231,221,.03), rgba(236,231,221,0) 30%),
        rgba(10,9,20,.94) !important;
    backdrop-filter: blur(18px);
    border-left: 1px solid rgba(247,166,0,.34) !important;
    box-shadow: -40px 0 100px -40px rgba(0,0,0,.9);
}
.module-details .module-tag {
    font-size: .64rem !important; letter-spacing: .24em !important;
    text-transform: uppercase; color: var(--fd-brass) !important;
}
.module-details h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem) !important; color: var(--fd-vellum) !important; }
.module-details .module-rule { height: 1px !important; background: rgba(247,166,0,.5) !important; }
.module-details .module-lead { color: var(--fd-brass) !important; font-weight: 500; }
.module-details #module-desc, .module-details .mp-text { color: var(--fd-smoke) !important; }
.module-details .mp-title { color: var(--fd-vellum) !important; font-weight: 600; }
.module-details .module-point {
    border-top: 1px solid var(--fd-hair) !important;
    border-bottom: none !important; background: none !important;
}
.module-details .stat-card {
    background: rgba(236,231,221,.035) !important;
    border: 1px solid var(--fd-hair) !important; border-radius: 2px !important;
    box-shadow: inset 0 1px 0 rgba(236,231,221,.06);
}
.module-details .stat-title { font-size: .58rem !important; letter-spacing: .2em !important;
                              text-transform: uppercase; color: var(--fd-dim) !important; }
.module-details .stat-value { font-family: 'IBM Plex Mono', monospace !important;
                              font-variant-numeric: tabular-nums; }
.module-details .action-btn, .module-details #return-btn {
    border-radius: 2px !important; letter-spacing: .1em !important;
    text-transform: none !important; font-weight: 600;
}

/* ------------------------------------------------------------ the modals */
#subscription-modal-overlay, #auth-modal-overlay,
#tactical-modal-overlay, #crypto-modal-overlay {
    background: rgba(4,3,10,.86) !important;
    backdrop-filter: blur(14px) !important;
}
.subscription-modal-card, #auth-modal-overlay .auth-modal-card,
#tactical-modal-overlay > div, #crypto-modal-overlay > div,
#auth-modal-overlay > div {
    background:
        linear-gradient(rgba(236,231,221,.03), rgba(236,231,221,0) 26%),
        rgba(11,10,22,.97) !important;
    border: 1px solid var(--fd-hair-2) !important;
    border-radius: 3px !important;
    box-shadow: inset 0 1px 0 rgba(236,231,221,.07), 0 40px 90px -30px rgba(0,0,0,.92) !important;
}

#subscription-modal-overlay .tier-card {
    background:
        linear-gradient(rgba(236,231,221,.028), rgba(236,231,221,0) 40%),
        rgba(15,13,29,.9) !important;
    border: 1px solid var(--fd-hair) !important; border-radius: 2px !important;
    box-shadow: inset 0 1px 0 rgba(236,231,221,.06), 0 24px 56px -26px rgba(0,0,0,.8);
}
#subscription-modal-overlay .tier-name {
    font-size: .62rem !important; letter-spacing: .22em !important; color: var(--fd-brass) !important;
}
#subscription-modal-overlay .tier-price .amt {
    font-family: 'Bodoni Moda', Georgia, serif !important; font-weight: 400 !important;
    font-size: clamp(2.4rem, 4vw, 3.2rem) !important; color: var(--fd-vellum) !important;
}
#subscription-modal-overlay .tier-price .cur,
#subscription-modal-overlay .tier-price .per { color: var(--fd-smoke) !important; }
#subscription-modal-overlay .tier-desc,
#subscription-modal-overlay .tier-features li { color: var(--fd-smoke) !important; }
#subscription-modal-overlay .tier-features .fa-check { color: var(--fd-brass) !important; }
#subscription-modal-overlay .tier-features .unavailable { color: var(--fd-dim) !important; }
#subscription-modal-overlay .billing-toggle { border-radius: 2px !important; }
#subscription-modal-overlay .billing-toggle .bt-opt {
    letter-spacing: .12em !important; border-radius: 0 !important;
}
#subscription-modal-overlay .tier-btn { border-radius: 2px !important; letter-spacing: .06em !important; }

#auth-modal-overlay input, #auth-modal-overlay .input-group input {
    background: rgba(236,231,221,.045) !important;
    border: 1px solid var(--fd-hair) !important; border-radius: 2px !important;
    color: var(--fd-vellum) !important; font-size: 16px !important;
}
#auth-modal-overlay input:focus { border-color: var(--fd-brass) !important; outline: none; }
#auth-modal-overlay label { font-size: .6rem !important; letter-spacing: .2em !important;
                            text-transform: uppercase; color: var(--fd-dim) !important; }

/* --------------------------------------------------------- account chip */
#auth-corner .hud-slot {
    background: rgba(11,10,22,.8) !important;
    border: 1px solid var(--fd-hair) !important; border-radius: 2px !important;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(236,231,221,.06);
    transition: border-color .2s, background .2s;
}
#auth-corner .hud-slot:hover { border-color: rgba(247,166,0,.5) !important; }
#auth-corner .hud-label-box { font-family: 'IBM Plex Mono', monospace !important;
                              font-size: .58rem !important; letter-spacing: .18em !important; }

/* ----------------------------------------------------------- the reports */
#reports-library, #report-dashboard { background: rgba(4,3,10,.9) !important;
                                      backdrop-filter: blur(14px) !important; }
#reports-library .rl-card, #report-dashboard .rpt-card {
    background: linear-gradient(rgba(236,231,221,.028), rgba(236,231,221,0) 40%),
                rgba(15,13,29,.92) !important;
    border: 1px solid var(--fd-hair) !important; border-radius: 2px !important;
    box-shadow: inset 0 1px 0 rgba(236,231,221,.06), 0 24px 56px -26px rgba(0,0,0,.8);
}
#report-dashboard .rpt-kpis .metric-box {
    background: rgba(236,231,221,.035) !important;
    border: 1px solid var(--fd-hair) !important; border-radius: 2px !important;
}
#reports-library .rl-filter { border-radius: 2px !important; letter-spacing: .1em !important; }

/* -------------------------------------------------------------- motion off */
@media (prefers-reduced-motion: reduce) {
    .fd-inner > * { opacity: 1 !important; transform: none !important; }
    #fd-stage::after { display: none; }
    .fd-ghost { display: none; }
}


/* A service panel is a room you have stepped into. The route furniture —
   the nav and the compass — belongs to the journey, so it stands down while
   you are in there rather than sitting on top of the panel. */
body.warping #fd-nav,
body.warping #fd-rail,
body.warping .fd-cue {
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
}


/* ==========================================================================
   NO DESCRIPTION CARDS

   A boxed panel with a heading, a paragraph and five ticks is the shape every
   software page has had for a decade, and it is the shape people have learnt
   to skip. What replaces it here is typography and rules: the headline
   carries the claim, one paragraph carries the argument, and the specifics
   sit in a row of facts where a reader can compare them at a glance.

   Two things keep an edge, because they are not descriptions: the rule you
   send to the desk, and the report that comes back. Those are documents.
   ========================================================================== */

/* the row of facts that replaced the feature list */
.fd-spec {
    display: grid; gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
    margin: 30px 0 0; border-top: 1px solid var(--fd-hair);
}
.fd-spec > div { padding: 15px 20px 15px 0; border-right: 1px solid var(--fd-hair); }
.fd-spec > div:last-child { border-right: none; }
.fd-spec dt { font-family: 'IBM Plex Mono', monospace; font-size: .58rem;
              letter-spacing: .2em; text-transform: uppercase; color: var(--fd-dim); }
.fd-spec dd { margin: 6px 0 0; font-size: .92rem; font-weight: 500; color: var(--fd-vellum); }

.fd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* what you send: a left rule and a monospace block, no frame */
.fd-send { margin-top: 22px; display: flex; flex-direction: column; gap: 12px;
           align-items: flex-start; }
.fd-send .role { font-family: 'IBM Plex Mono', monospace; font-size: .58rem;
                 letter-spacing: .2em; text-transform: uppercase; color: var(--fd-dim); }
.fd-rules { box-shadow: none !important; background: transparent !important;
            padding: 2px 0 2px 16px !important; }

/* the tiers, as columns in a catalogue */
#fd-tiers { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 26px;
            border-top: 1px solid var(--fd-hair); }
.fd-tier {
    display: flex; flex-direction: column; gap: 11px;
    padding: 24px 26px 24px 0; border-right: 1px solid var(--fd-hair);
}
.fd-tier:last-child { border-right: none; padding-right: 0; }
.fd-tier.lead { padding-left: 26px; border-left: 1px solid rgba(247,166,0,.3);
                margin-left: -1px; }
.fd-tier .role { font-family: 'IBM Plex Mono', monospace; font-size: .6rem;
                 letter-spacing: .2em; text-transform: uppercase; color: var(--fd-dim); }
.fd-tier.lead .role { color: var(--fd-brass); }
.fd-tier .fd-tier-desc { font-size: .88rem; color: var(--fd-smoke); margin: 0; }
.fd-tier .fd-list { gap: 7px; }
.fd-tier .fd-list li { font-size: .84rem; }
.fd-tier .foot { margin-top: auto; padding-top: 10px; }

/* destinations: a list with rules, not tiles */
.fd-map { background: none; border: none; border-top: 1px solid var(--fd-hair);
          gap: 0; margin-top: 26px; }
.fd-map button { background: none !important; border-bottom: 1px solid var(--fd-hair);
                 border-right: 1px solid var(--fd-hair); padding: 18px 22px 18px 0;
                 box-shadow: none; }
.fd-map button:last-child { border-right: none; }
.fd-map button:hover { background: rgba(236,231,221,.035) !important; }
.fd-map .t { font-size: 1rem; }

@media (max-width: 980px) {
    #fd-tiers { grid-template-columns: 1fr; }
    .fd-tier { border-right: none; border-bottom: 1px solid var(--fd-hair);
               padding-right: 0; }
    .fd-tier.lead { padding-left: 0; border-left: none; margin-left: 0; }
    .fd-spec > div { border-right: none; border-bottom: 1px solid var(--fd-hair); }
    .fd-map button { border-right: none; }
}

/* ==========================================================================
   THE HEADER, THE CONSOLE, AND NO PANELS IN BETWEEN
   ========================================================================== */

/* The account controls were a floating chip parked over the page. They are
   part of the header now: bare icons at the top right, on the same baseline
   as the wordmark, sitting in the space the nav already reserves for them. */
#auth-corner {
    top: 12px !important; right: clamp(14px, 3vw, 30px) !important;
    z-index: 901 !important;
    display: flex; align-items: center; gap: 4px;
}
#auth-corner .hud-slot {
    background: transparent !important; border: 1px solid transparent !important;
    box-shadow: none !important; backdrop-filter: none !important;
    width: 42px; height: 42px; min-width: 0 !important;
    display: grid !important; place-items: center;
    border-radius: 2px !important; padding: 0 !important;
}
#auth-corner .hud-slot:hover {
    background: rgba(236,231,221,.06) !important;
    border-color: var(--fd-hair) !important;
}
#auth-corner .hud-icon-box { color: var(--fd-smoke); font-size: 1rem; }
#auth-corner .hud-slot:hover .hud-icon-box { color: var(--fd-brass); }
/* The labels are what made it a chip. The icons say enough, and the title
   attributes are still there for anyone who hovers or uses a reader. */
#auth-corner .hud-label-box { display: none !important; }
body.fd-stuck #auth-corner .hud-slot { border-color: transparent !important; }

/* The description panel between a click and the thing it opens is gone.
   It stays in the document so app.js keeps its references, and never shows. */
#cinematic-overlay { display: none !important; }

/* ---------------------------------------------------------- the console

   The submission screen is the product for anyone who came to have a system
   tested, so it reads as a page rather than a terminal: one column of
   questions in plain words, and what comes back stated beside it. */

#gas-giant-atmosphere .gas-clouds,
#gas-giant-atmosphere .lightning-flash { display: none !important; }
#gas-giant-atmosphere {
    background:
        radial-gradient(110% 80% at 14% 6%, rgba(247,166,0,.12), transparent 56%),
        radial-gradient(150% 130% at 50% 50%, transparent 40%, rgba(2,1,6,.9) 100%),
        var(--fd-ink) !important;
}
.submission-console {
    font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
    color: var(--fd-vellum);
}
.submission-console .console-kicker {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: .64rem !important; letter-spacing: .24em !important;
    text-transform: uppercase; color: var(--fd-brass) !important;
}
.submission-console .console-header h2 {
    font-family: 'Bodoni Moda', Didot, Georgia, serif !important;
    font-weight: 400 !important; text-transform: none !important;
    letter-spacing: -.02em !important; line-height: 1.05;
    font-size: clamp(1.8rem, 3.4vw, 2.9rem) !important;
    color: var(--fd-vellum) !important; max-width: 20ch;
}
.submission-console .console-header p {
    color: var(--fd-smoke) !important; max-width: 62ch;
    font-size: .96rem; line-height: 1.62;
}
.submission-console .input-group label {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: .62rem !important; letter-spacing: .2em !important;
    text-transform: uppercase; color: var(--fd-dim) !important;
}
.submission-console .ig-step {
    color: var(--fd-brass) !important; background: none !important;
    border: none !important; margin-right: 4px;
}
.submission-console input, .submission-console textarea {
    font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
    font-size: 16px !important;
    background: rgba(236,231,221,.045) !important;
    border: 1px solid var(--fd-hair) !important;
    border-radius: 2px !important; color: var(--fd-vellum) !important;
    box-shadow: inset 0 1px 0 rgba(236,231,221,.05);
}
.submission-console textarea { line-height: 1.62; }
.submission-console input:focus, .submission-console textarea:focus {
    border-color: var(--fd-brass) !important; outline: none;
    background: rgba(236,231,221,.06) !important;
}
.submission-console input::placeholder,
.submission-console textarea::placeholder { color: var(--fd-dim) !important; }
.submission-console .ig-hint { color: var(--fd-dim) !important; font-size: .8rem !important; }
.submission-console .submit-system-btn,
.submission-console .rail-btn, .submission-console #abort-console-btn {
    border-radius: 2px !important; text-transform: none !important;
    letter-spacing: .01em !important;
    font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
}
.submission-console .rail-card {
    background: linear-gradient(rgba(236,231,221,.03), rgba(236,231,221,0) 40%),
                rgba(15,13,29,.9) !important;
    border: 1px solid var(--fd-hair) !important; border-radius: 2px !important;
    box-shadow: inset 0 1px 0 rgba(236,231,221,.06);
}
.submission-console .rail-title {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: .6rem !important; letter-spacing: .2em !important;
    text-transform: uppercase; color: var(--fd-dim) !important;
}
.submission-console .rail-credit-n {
    font-family: 'Bodoni Moda', Georgia, serif !important; font-weight: 400 !important;
    color: var(--fd-vellum) !important;
}
.submission-console .rail-list b { color: var(--fd-vellum) !important; }
.submission-console .rail-list span, .submission-console .rail-foot {
    color: var(--fd-smoke) !important;
}
.submission-console .rail-list i, .submission-console .rail-foot i { color: var(--fd-brass) !important; }

/* the last station's contact row, as links rather than tiles */
.fd-map a {
    background: none; padding: 18px 22px 18px 0; text-decoration: none;
    color: inherit; display: flex; flex-direction: column; gap: 4px;
    border-bottom: 1px solid var(--fd-hair); border-right: 1px solid var(--fd-hair);
    transition: background .16s;
}
.fd-map a:hover { background: rgba(236,231,221,.035); }
.fd-map a:last-of-type { border-right: none; }
.fd-map .soon-cell {
    padding: 18px 22px 18px 0; display: flex; flex-direction: column; gap: 4px;
    border-bottom: 1px solid var(--fd-hair); opacity: .6;
}


/* The container was still a chip: a rounded box with a border drawn around
   the account controls. Sign in and sign up are icons in the header exactly
   like the pricing one beside them, so the box goes and the icons stand on
   their own. */
#auth-corner {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
#auth-corner > * { margin: 0 !important; }


/* The chip was a child element, not the container: .hud-bar carried the amber
   border and the ten-pixel radius. The account controls are icons in the
   header now, so the bar around them goes. */
#auth-corner .hud-bar {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    gap: 2px !important;
}


/* ==========================================================================
   THE SUBMISSION PAGE

   It is a page, not a dialog: a header of its own, a document down the left
   and a reading of that document down the right. The reading is the reason
   this is worth designing at all — the thing that stops somebody submitting
   is not knowing whether they have said enough, so the page marks off the
   seven things a rule set needs before anyone can code it, as they type.
   ========================================================================== */

#gas-giant-atmosphere { overflow-y: auto; }
.submission-console {
    max-width: min(1240px, 94vw) !important;
    width: 100% !important; margin: 0 auto !important;
    padding: 0 0 60px !important;
    background: none !important; border: none !important; box-shadow: none !important;
}

.sc-top {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 18px;
    padding: 16px 0 14px; margin-bottom: 26px;
    border-bottom: 1px solid var(--fd-hair);
    background: linear-gradient(rgba(6,5,14,.97) 70%, rgba(6,5,14,0));
}
.sc-top .fd-brand { font-size: 1.15rem; }
.sc-where {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
    color: var(--fd-brass); padding-left: 18px; border-left: 1px solid var(--fd-hair);
}
.sc-top #abort-console-btn {
    position: static !important; margin-left: auto;
    background: transparent !important; color: var(--fd-smoke) !important;
    border: 1px solid var(--fd-hair-2) !important;
}

.sc-body { display: grid; gap: clamp(24px, 4vw, 54px);
           grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
           align-items: start; }

.sc-write .console-header h2 { max-width: 17ch; }
.sc-write .console-header p { margin-top: 14px; }
.sc-write form { display: flex; flex-direction: column; gap: 22px; margin-top: 32px; }
.sc-write .input-group { display: flex; flex-direction: column; gap: 8px; }
.sc-write textarea { min-height: 240px; resize: vertical; }
.sc-write .submit-system-btn {
    align-self: flex-start; padding: 13px 22px !important; font-size: .92rem !important;
    background: var(--fd-brass) !important; color: #17130a !important;
    border: 1px solid var(--fd-brass) !important; font-weight: 600 !important;
}

/* ------------------------------------------------------------ the reading */
.sc-read { display: flex; flex-direction: column; gap: 22px;
           position: sticky; top: 84px; }

.sc-meter { border: 1px solid var(--fd-hair); background: rgba(21,19,39,.7);
            padding: 16px 18px; border-radius: 2px;
            box-shadow: inset 0 1px 0 rgba(236,231,221,.06); }
.sc-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sc-meter-l { font-family: 'IBM Plex Mono', monospace !important; font-size: .58rem;
              letter-spacing: .2em; text-transform: uppercase; color: var(--fd-dim); }
#sc-score { font-family: 'IBM Plex Mono', monospace !important; font-size: .95rem;
            font-weight: 600; color: var(--fd-vellum); }
.sc-bar { height: 3px; margin-top: 11px; background: rgba(236,231,221,.10); overflow: hidden; }
.sc-bar i { display: block; height: 100%; width: 0;
            background: linear-gradient(90deg, var(--fd-brass-d), var(--fd-brass));
            transition: width .5s cubic-bezier(.16,.84,.3,1); }
.sc-meter-note { margin: 11px 0 0 !important; font-size: .8rem; color: var(--fd-smoke) !important; }

.sc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
             border-top: 1px solid var(--fd-hair); }
.sc-checks li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start;
                padding: 11px 0; border-bottom: 1px solid var(--fd-hair);
                opacity: .45; transition: opacity .3s ease; }
.sc-checks li.got { opacity: 1; }
.sc-checks li > i {
    width: 12px; height: 12px; margin-top: 4px; border-radius: 50%;
    border: 1px solid var(--fd-dim); background: transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sc-checks li.got > i { background: var(--fd-rise); border-color: var(--fd-rise);
                        box-shadow: 0 0 0 3px rgba(32,178,108,.16); }
.sc-checks span { display: flex; flex-direction: column; gap: 2px; font-size: .82rem;
                  color: var(--fd-smoke) !important; }
.sc-checks b { color: var(--fd-vellum) !important; font-weight: 600; font-size: .86rem; }

.sc-rail { display: flex; flex-direction: column; gap: 10px; }
.sc-rail .rail-card { padding: 16px 18px !important; text-align: center; }
.sc-rail .rail-credit-n { font-size: 2rem !important; line-height: 1; }
.sc-rail .rail-credit-l { font-family: 'IBM Plex Mono', monospace !important;
                          font-size: .58rem !important; letter-spacing: .2em !important;
                          text-transform: uppercase; color: var(--fd-dim) !important;
                          margin-top: 6px; }
.sc-rail .rail-credit-who { font-size: .76rem !important; color: var(--fd-smoke) !important;
                            margin-top: 6px; }
/* app.js has always hidden the upgrade button once a plan is unlimited, but
   `.rail-btn` sets display:flex and an author rule beats the browser's own
   [hidden] {display:none} whatever the specificity. So it was still offering
   the plans to somebody already on one. */
.sc-rail .rail-btn[hidden] { display: none; }
.sc-rail .rail-btn { justify-content: center; width: 100%;
                     border: 1px solid var(--fd-hair-2) !important;
                     background: transparent !important; color: var(--fd-vellum) !important;
                     padding: 11px 14px !important; }

.sc-back { border-top: 1px solid var(--fd-hair); padding-top: 16px; }
.sc-back .rail-title { margin-bottom: 12px; }
.sc-back .rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.sc-back .rail-list li { display: grid; grid-template-columns: 17px 1fr; gap: 11px; }
.sc-back .rail-list span { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; }
.sc-back .rail-list b { font-size: .84rem; }

@media (max-width: 900px) {
    .sc-body { grid-template-columns: 1fr; }
    .sc-read { position: static; }
    .sc-write textarea { min-height: 190px; }
}

/* The submission page was painting underneath the tape: the stage is a fixed
   layer at z-index 2 and the console had nothing above it. It is a page, so
   it takes the screen — and the route furniture and the stage itself stand
   down while it has it, rather than showing through. */
#gas-giant-atmosphere { z-index: 950 !important; }
body.fd-console #fd-stage { visibility: hidden; }
body.fd-console #fd-nav,
body.fd-console #fd-rail,
body.fd-console .fd-cue { opacity: 0; pointer-events: none; }
body.fd-console #auth-corner { opacity: 0 !important; pointer-events: none !important; }

/* Coming back from the submission page left the header invisible. The cause
   was a leftover: `body.landed` is the old ship-and-planet state, and the one
   rule of it still standing says "hide the title and the account controls" —
   with !important, so the inline opacity the legacy close handler set could
   never win. That call is gone now; this states the invariant as well, since
   the header is part of the page rather than something a panel hides. The
   submission page above is the single exception, and it says so. */
body.landed #auth-corner { opacity: 1 !important; pointer-events: auto !important; }
body.fd-console.landed #auth-corner { opacity: 0 !important; pointer-events: none !important; }

/* ==========================================================================
   THE PHONE

   A station is one screen, and on a phone a screen is small. Two things
   follow: everything tightens, and the one station that can never fit — three
   price columns — stops trying and becomes a swipe, which is the gesture a
   phone already has for "there is more beside this".
   ========================================================================== */

@media (max-width: 820px) {

    .fd-station { padding: 68px clamp(16px, 5vw, 26px) 22px; align-items: center; }

    /* Every station may scroll inside itself on a phone except this one. A
       scrollable box under a thumb eats the swipe that was meant to move the
       route, and the route is the whole page. So the hero is sized to fit and
       then told it may not scroll - and on a screen too short for the spec,
       the spec goes rather than the swipe. */
    .fd-station:first-of-type .fd-inner { overflow: hidden; }

    /* On a short phone the spec is what will not fit, and a spec you cannot
       see all of is worse than one that waited for a bigger screen. The
       sentence stays: it is the part that explains the machine. */
    @media (max-height: 700px) {
        .fd-slots { display: none; }
        .fd-replay .rt-main { min-height: 104px; }
        .fd-replay .rt-pane { height: 104px; }
    }

    /* The cue is a fixed overlay, so on a short screen it lands on the last
       line of whatever station is under it. It keeps its words and drops the
       stroke below them, which is the half of it that took up the room. */
    .fd-cue { bottom: 8px; }
    .fd-cue span { display: none; }
    .fd-inner { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain; }

    .fd-station h2 { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
    .fd-say h1     { font-size: clamp(2rem, 9vw, 2.9rem); }
    .fd-station p  { font-size: .92rem; line-height: 1.56; }
    .fd-num { font-size: .58rem; margin-bottom: 10px; }

    .fd-two, .fd-two.wide, .fd-two.lede { gap: 14px; }
    .fd-actions { margin-top: 18px; }
    .fd-spec { grid-template-columns: 1fr 1fr; margin-top: 20px; }
    .fd-spec > div { padding: 11px 14px 11px 0; border-right: 1px solid var(--fd-hair);
                     border-bottom: 1px solid var(--fd-hair); }
    .fd-spec > div:nth-child(2n) { border-right: none; }
    .fd-spec dd { font-size: .86rem; }

    .fd-loop { gap: 12px; margin-top: 18px; }
    .fd-loop p { font-size: .82rem; }

    .fd-rules { font-size: .74rem !important; }

    /* The example report was the one thing on the route that did not fit a
       phone: two columns of figures over three rows, under a title that wrapped
       and a curve sized for a desk, and the last row of it fell off the bottom
       of the screen. Three columns over two rows is the same six figures in one
       row less, and the rest is trimmed to match. */
    .fd-report-top { padding: 10px 14px; gap: 10px; flex-wrap: nowrap; }
    .fd-report-top h4 { font-size: .82rem; line-height: 1.3; }
    .fd-report-top .ex { font-size: .5rem; letter-spacing: .14em; padding: 3px 6px;
                         white-space: nowrap; }
    .fd-metrics { grid-template-columns: repeat(3, 1fr); }
    .fd-metrics > div { padding: 8px 10px; }
    .fd-metrics dt { font-size: .52rem; letter-spacing: .1em; }
    .fd-metrics dd { font-size: .92rem; }
    #fd-curve { height: 78px; }

    /* and the contact rows give back the height the fine print needs, which
       is set at the size fine print is set at anyway */
    .fd-map a, .fd-map .soon-cell { padding: 13px 18px 13px 0; }
    .fd-station .fd-fine { margin-top: 12px !important; font-size: .72rem;
                           line-height: 1.5; }

    /* the plans, as a swipe rather than a column that never ends */
    .fd-cycle { margin-top: 14px; }
    #fd-tiers {
        display: flex; gap: 0; margin-top: 18px;
        overflow-x: auto; scroll-snap-type: x mandatory;
        scrollbar-width: none; border-top: none;
        margin-inline: calc(clamp(16px, 5vw, 26px) * -1);
        padding-inline: clamp(16px, 5vw, 26px);
    }
    #fd-tiers::-webkit-scrollbar { display: none; }
    .fd-tier {
        flex: 0 0 78%; scroll-snap-align: start;
        padding: 18px 20px 18px 0; border-right: 1px solid var(--fd-hair);
        border-bottom: none;
    }
    .fd-tier.lead { padding-left: 20px; margin-left: 0; }
    .fd-tier:last-child { padding-right: 20px; }
    .fd-swipe {
        display: flex; align-items: center; gap: 8px; margin-top: 12px;
        font-family: 'IBM Plex Mono', monospace; font-size: .58rem;
        letter-spacing: .18em; text-transform: uppercase; color: var(--fd-dim);
    }
    .fd-swipe::after { content: '\203A'; font-size: 1.1rem; color: var(--fd-brass);
                       line-height: 1; letter-spacing: 0; }

    .fd-map { grid-template-columns: 1fr; margin-top: 18px; }
    .fd-map a, .fd-map .soon-cell { padding: 13px 0; border-right: none; }
    .fd-map .t { font-size: .92rem; }
    .fd-map .s { font-size: .78rem; }
    .fd-fine { font-size: .74rem; margin-top: 14px !important; }

    /* the submission page */
    .sc-top { padding: 12px 0 11px; margin-bottom: 18px; }
    .sc-where { display: none; }
    .sc-write .console-header h2 { font-size: 1.6rem !important; max-width: none; }
    .sc-write form { gap: 16px; margin-top: 22px; }
    .sc-read { gap: 16px; }
    .sc-checks li { padding: 9px 0; }
}

/* A phone on its side has no height at all; the stations stop pretending. */
@media (max-width: 940px) and (max-height: 480px) {
    .fd-station { padding-top: 58px; }
    .fd-say h1 { font-size: 1.7rem; }
    .fd-station h2 { font-size: 1.5rem; }
}

/* the swipe cue is a phone thing */
.fd-swipe { display: none; }

/* The carousel bled past the station's padding with a negative margin, which
   gave the station itself something to scroll sideways — two horizontal
   scrollers nested, and the one that moved was the wrong one. It stays inside
   its padding, and the station never scrolls sideways at all. */
@media (max-width: 820px) {
    .fd-inner { overflow-x: hidden; }
    #fd-tiers { margin-inline: 0; padding-inline: 0; }
    .fd-tier { flex: 0 0 84%; }
    .fd-tier:first-child { padding-left: 0; }
}

/* One scroller, not two. The console was a flex item capped at 92vh with its
   own overflow, so the page inside a page had to be scrolled while the thing
   around it stayed put — on a phone that put the submit button somewhere a
   thumb could not reach. The overlay scrolls and the console simply flows,
   which is what makes the sticky header behave and what makes it a page. */
#gas-giant-atmosphere {
    display: block !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 clamp(16px, 3vw, 30px) !important;
}
.submission-console {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
}


/* ==========================================================================
   STATION ZERO - THE DESK READS YOUR SENTENCE

   Two openings failed here before this one. The first was a mood: a headline
   about a candle over a chart that did nothing until you scrolled, which read
   as atmosphere rather than as a business. The second ran the machine - a
   sentence churning character by character into code - which was alive but
   showed the wrong thing. Nobody buys the typing.

   What is unusual on this desk is the reading. So the opening reads: a rule
   in the words a trader would use is taken phrase by phrase, and every phrase
   lands in the slot of the specification it fills. Six labelled gaps become a
   spec while you watch, and the contrast does the explaining - what has been
   read is bright, what has not is not.

   No figures are quoted here. The one set of numbers on this site lives at
   station one, attached to the example report it came out of, and this screen
   is careful not to imply a second one.
   ========================================================================== */

/* Words on the left, the thing itself on the right. A reader who does not
   want to read a sentence still gets an object turning at them, and a reader
   who does gets the explanation beside it.

   Words down the left, the terminal beside them, both standing in the middle
   of the row. Running the terminal the whole width underneath pushed it off
   the bottom of an ordinary laptop and left the words crowded into a corner;
   at half the width it is still every panel the platform has, and it sits
   where a reader is already looking.

   The paragraph that used to close this screen is gone. It described two
   products that are now both on the screen doing their jobs - the reading on
   the left is the Machine, the terminal on the right is Replay - and a
   caption under a demonstration is a caption too many. */
.fd-open {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    column-gap: clamp(20px, 2.6vw, 44px); row-gap: clamp(12px, 1.8vh, 22px);
}
.fd-open-head { grid-column: 1; grid-row: 1; min-width: 0; align-self: end; }
.fd-open-body { grid-column: 1; grid-row: 2; min-width: 0; align-self: start; }
.fd-model     { grid-column: 2; grid-row: 1 / span 2; min-width: 0; align-self: center; }
/* The compass is fixed to the right edge of the window and its label reaches
   about a hundred pixels in from it. Everywhere else on the route that strip
   lands on a paragraph, which survives it; here it would land on the corner
   of the object, so the opening keeps the strip clear. */
@media (min-width: 721px) { .fd-open { padding-right: 104px; } }
/* Past a certain width the row stops growing - it is capped at 1400 - so the
   compass drifts away from it on its own and the strip is no longer needed.
   Giving it back is a hundred pixels of headline. */
@media (min-width: 1680px) { .fd-open { padding-right: 0; } }

/* the running light. The word after the dot is swapped by front.js, so the
   badge says which phase the reading is in rather than a fixed slogan. */
.fd-live {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'IBM Plex Mono', monospace; font-size: .62rem;
    letter-spacing: .22em; text-transform: uppercase; color: var(--fd-brass);
}
.fd-live b { font-weight: inherit; }
.fd-live i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--fd-brass);
    animation: fd-pulse 2.6s ease-out infinite;
}
@keyframes fd-pulse {
    0%        { box-shadow: 0 0 0 0 rgba(247,166,0,.45); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(247,166,0,0); }
}

.fd-open h1 {
    margin: 12px 0 22px; max-width: none;
    font-size: clamp(1.85rem, 2.7vw, 3rem); line-height: 1.04; letter-spacing: -.024em;
    color: var(--fd-vellum); text-shadow: 0 2px 34px rgba(6,5,14,.95);
}

/* the sentence. Unread text sits at the dimmest colour on the page and read
   text at the brightest, so the wave of attention moving through it is the
   whole animation - no cursor, no typing, no glyphs pretending to be code. */
.fd-sentence {
    margin: 0; max-width: none; min-height: 5.5em;
    font-size: clamp(1rem, 1.45vw, 1.17rem); line-height: 1.85;
    color: var(--fd-dim); text-shadow: 0 1px 20px rgba(6,5,14,.96);
}
.fd-sentence mark {
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding: 2px 2px; border-radius: 2px;
    color: var(--fd-smoke);
    background-color: transparent;
    background-image: linear-gradient(rgba(247,166,0,.17), rgba(247,166,0,.17));
    background-repeat: no-repeat; background-size: 0% 100%;
    transition: background-size .5s cubic-bezier(.3,.9,.3,1), color .5s ease;
}
.fd-sentence mark.on { background-size: 100% 100%; color: var(--fd-vellum); }

/* what the reading fills in. Every slot is labelled from the start, so the
   shape of a finished specification is on screen before any of it is known,
   and each rule turns brass as its own phrase is reached. */
.fd-slots {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px clamp(12px, 1.6vw, 22px);
    margin-top: 22px; max-width: none;
}
.fd-slot { position: relative; padding: 12px 0 0; border-top: 1px solid var(--fd-hair); }
.fd-slot::before {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
    background: var(--fd-brass);
    transform: scaleX(0); transform-origin: left;
    transition: transform .45s cubic-bezier(.3,.9,.3,1);
}
.fd-slot.on::before { transform: scaleX(1); }
.fd-slot .k {
    display: block; font-family: 'IBM Plex Mono', monospace;
    font-size: .55rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--fd-dim); transition: color .4s ease;
}
.fd-slot.on .k { color: var(--fd-brass); }
.fd-slot .v {
    display: block; margin-top: 7px;
    font-family: 'IBM Plex Mono', monospace; font-size: .8rem; line-height: 1.45;
    color: var(--fd-vellum);
    opacity: 0; transform: translateY(7px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.3,.9,.3,1);
}
.fd-slot.on .v { opacity: 1; transform: none; }

/* one system hands over to the next. Only the sentence and the slots go -
   the headline and the paragraph are the page, not the demonstration. */
.fd-sentence, .fd-slots { transition: opacity .34s ease; }
.fd-open.out .fd-sentence, .fd-open.out .fd-slots { opacity: 0; }


/* ==========================================================================
   THE TERMINAL, RUNNING

   A drawing of a terminal proves nothing, and a simplified one proves less -
   what makes a replay terminal legible at a glance is the furniture around
   the chart. So this is the furniture: the top bar, the ticker with the
   account on it, the drawing rail, the chart with its legend, watermark and
   both axes, the order ticket down to the five figures it computes, and the
   dock with all six tabs.

   It plays the loop and then shows what the loop is for. Everything in it
   comes off one fixed series in front.js, so it is the same session on every
   load, and it says Example session underneath.
   ========================================================================== */

.fd-model { margin: 0; min-width: 0; }

.fd-replay {
    display: block; width: 100%; padding: 0; text-align: left;
    font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--fd-smoke);
    cursor: pointer; background: #0a0a0f;
    border: 1px solid var(--fd-hair-2); border-radius: 6px;
    overflow: hidden; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fd-replay:hover {
    border-color: rgba(247,166,0,.4);
    box-shadow: 0 26px 74px rgba(0,0,0,.65);
    transform: translateY(-2px);
}
.fd-replay b, .fd-replay em, .fd-replay i, .fd-replay u { font-style: normal; }
.fd-replay .rt-vr { width: 1px; height: 15px; background: var(--fd-hair); flex: 0 0 auto; }

/* ------------------------------------------------------------- top bar */
.fd-replay .rt-top {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 10px; background: #12121a;
    border-bottom: 1px solid var(--fd-hair);
    font-size: .62rem; white-space: nowrap;
}
.fd-replay .rt-back { color: var(--fd-dim); font-size: .6rem; padding-right: 2px; }
.fd-replay .rt-brandbox { display: flex; align-items: center; gap: 6px; }
.fd-replay .rt-brand { color: var(--fd-vellum); font-weight: 600; letter-spacing: -.01em; }
.fd-replay .rt-brand b { font-weight: 600; }
.fd-replay .rt-brand em {
    margin-left: 6px; padding: 2px 5px; border-radius: 3px;
    background: rgba(247,166,0,.14); color: var(--fd-brass);
    font-family: 'IBM Plex Mono', monospace; font-size: .48rem;
    font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.fd-replay .rt-sec { display: flex; align-items: center; gap: 5px; color: var(--fd-vellum);
                     font-weight: 500; }
.fd-replay .rt-inst {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border: 1px solid var(--fd-hair); border-radius: 4px;
    background: rgba(236,231,221,.03);
}
.fd-replay .rt-inst em {
    padding: 1px 5px; border-radius: 3px; background: rgba(247,166,0,.16);
    color: var(--fd-brass); font-family: 'IBM Plex Mono', monospace;
    font-size: .46rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.fd-replay .rt-inst b { color: var(--fd-vellum); font-weight: 600; }
.fd-replay .rt-inst i, .fd-replay .rt-field i { font-size: .48rem; color: var(--fd-dim); }
.fd-replay .rt-field { display: flex; align-items: center; gap: 7px; }
.fd-replay .rt-field em { font-family: 'IBM Plex Mono', monospace; font-size: .46rem;
                          letter-spacing: .14em; text-transform: uppercase; color: var(--fd-dim); }
.fd-replay .rt-field b {
    display: flex; align-items: center; gap: 8px; padding: 4px 8px;
    border: 1px solid var(--fd-hair); border-radius: 4px;
    background: rgba(236,231,221,.03); color: var(--fd-vellum); font-weight: 500;
}
.fd-replay .rt-tool {
    display: flex; align-items: center; gap: 5px; padding: 4px 7px;
    border: 1px solid var(--fd-hair); border-radius: 4px; color: var(--fd-smoke);
}
.fd-replay .rt-tool i { font-size: .58rem; color: #5aa9f0; }
.fd-replay .rt-tool:nth-of-type(2) i { color: var(--fd-brass); }
.fd-replay .rt-tool:nth-of-type(5) i { color: #c58af0; }
.fd-replay .rt-mode {
    margin-left: auto; display: flex; align-items: center; gap: 6px;
    font-family: 'IBM Plex Mono', monospace; font-size: .48rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--fd-brass);
}
.fd-replay .rt-mode::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; animation: fd-pulse 2.6s ease-out infinite;
}

/* -------------------------------------------------------- ticker strip */
.fd-replay .rt-tick {
    display: flex; align-items: center; gap: clamp(10px, 1.5vw, 26px);
    padding: 7px 11px; border-bottom: 1px solid var(--fd-hair);
    font-family: 'IBM Plex Mono', monospace; font-size: .55rem; white-space: nowrap;
}
.fd-replay .rt-sym { display: flex; align-items: center; gap: 7px; }
.fd-replay .rt-coin {
    width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(247,166,0,.16); color: var(--fd-brass);
    font-size: .55rem; font-weight: 700;
}
.fd-replay .rt-names b { display: block; color: var(--fd-vellum); font-size: .68rem;
                         font-weight: 600; letter-spacing: .02em; }
.fd-replay .rt-names em { display: block; margin-top: 1px; font-size: .46rem;
                          letter-spacing: .1em; text-transform: uppercase; color: var(--fd-dim); }
.fd-replay .rt-last { display: flex; align-items: baseline; gap: 8px; }
.fd-replay .rt-last b { color: #ef454a; font-size: .96rem; font-weight: 600;
                        font-variant-numeric: tabular-nums; }
.fd-replay .rt-last b.up { color: #20b26c; }
.fd-replay .rt-last u { text-decoration: none; color: #ef454a; font-size: .58rem; }
.fd-replay .rt-last u.up { color: #20b26c; }
.fd-replay .rt-stats, .fd-replay .rt-acct { display: flex; align-items: center;
                                            gap: clamp(9px, 1.3vw, 22px); }
.fd-replay .rt-acct { margin-left: auto; }
.fd-replay .rt-stats i, .fd-replay .rt-acct i {
    display: block; font-size: .44rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--fd-dim);
}
.fd-replay .rt-stats b, .fd-replay .rt-acct b {
    display: block; margin-top: 2px; color: var(--fd-vellum);
    font-size: .64rem; font-variant-numeric: tabular-nums;
}
.fd-replay .rt-stats b.up, .fd-replay .rt-acct b.up { color: #20b26c; }
.fd-replay .rt-stats b.down, .fd-replay .rt-acct b.down { color: #ef454a; }

/* ---------------------------------------- rail, chart and order ticket */
.fd-replay .rt-main {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) 186px;
    min-height: clamp(230px, 34vh, 360px);
}

.fd-replay .rt-rail {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 5px 0; border-right: 1px solid var(--fd-hair); background: #0d0d14;
    font-size: .58rem; color: var(--fd-dim);
}
.fd-replay .rt-t { width: 23px; height: 22px; display: grid; place-items: center;
                    border-radius: 4px; }
.fd-replay .rt-t svg { width: 14px; height: 14px; display: block; }
.fd-replay .rt-t.on { background: rgba(247,166,0,.13); }
.fd-replay .rt-sep { width: 15px; height: 1px; background: var(--fd-hair); margin: 4px 0; }

.fd-replay .rt-stage { position: relative; display: block; min-width: 0; }
/* The chart takes whatever room the ticket beside it leaves, which is what a
   chart does in a terminal - it is not a picture sitting in a box. */
#rt-chart { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fd-replay .rt-legend {
    position: absolute; left: 8px; top: 6px; z-index: 2;
    display: flex; align-items: center; gap: 7px;
    font-family: 'IBM Plex Mono', monospace; font-size: .5rem; white-space: nowrap;
}
.fd-replay .rt-legend b { color: var(--fd-vellum); font-weight: 600; }
.fd-replay .rt-legend em { padding: 1px 5px; border-radius: 3px;
                           background: rgba(236,231,221,.06); color: var(--fd-smoke); }
.fd-replay .rt-legend .up { color: #20b26c; }
.fd-replay .rt-legend .down { color: #ef454a; }
.fd-replay .rt-wm {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    font-family: 'Bodoni Moda', Didot, Georgia, serif; font-size: clamp(1.4rem, 3vw, 2.6rem);
    color: rgba(236,231,221,.035); letter-spacing: .04em; pointer-events: none;
}
.fd-replay .rt-transport {
    position: absolute; left: 50%; top: 26px; transform: translateX(-50%); z-index: 2;
    display: flex; align-items: center; gap: 9px;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(18,18,26,.94); border: 1px solid var(--fd-hair);
    font-family: 'IBM Plex Mono', monospace; font-size: .5rem; color: var(--fd-smoke);
}
.fd-replay .rt-transport i:first-child { color: var(--fd-brass); }
.fd-replay .rt-track { display: block; width: clamp(50px, 8vw, 120px); height: 2px;
                       background: rgba(236,231,221,.16); border-radius: 2px; }
.fd-replay .rt-track b { display: block; height: 100%; width: 0;
                         background: var(--fd-brass); border-radius: 2px; }

.fd-replay .rt-trade {
    display: flex; flex-direction: column; gap: 3px; padding: 6px;
    border-left: 1px solid var(--fd-hair); background: #0d0d14;
    font-size: .55rem;
}
.fd-replay .rt-tr-top { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fd-replay .rt-tr-top b {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 3px 7px; border: 1px solid var(--fd-hair); border-radius: 4px;
    background: rgba(236,231,221,.03); color: var(--fd-vellum); font-weight: 500;
}
.fd-replay .rt-tr-top i { font-size: .44rem; color: var(--fd-dim); }
.fd-replay .rt-tr-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--fd-hair);
                         padding-bottom: 3px; }
.fd-replay .rt-tr-tabs b { color: var(--fd-dim); font-weight: 500; }
.fd-replay .rt-tr-tabs b.on { color: var(--fd-vellum); }
.fd-replay .rt-seg {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px;
    border-radius: 4px; background: rgba(236,231,221,.05);
}
.fd-replay .rt-seg b { padding: 3px 0; text-align: center; border-radius: 3px;
                       color: var(--fd-smoke); font-weight: 500; }
.fd-replay .rt-seg b.on { background: rgba(236,231,221,.1); color: var(--fd-vellum); }
.fd-replay .rt-seg.sm { font-size: .5rem; }
.fd-replay .rt-inp {
    display: flex; align-items: center; gap: 6px; padding: 4px 7px;
    border: 1px solid var(--fd-hair); border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
}
.fd-replay .rt-inp i { color: var(--fd-dim); }
.fd-replay .rt-inp b { margin-left: auto; color: var(--fd-vellum); font-weight: 600;
                       font-variant-numeric: tabular-nums; }
.fd-replay .rt-inp b.ph { color: var(--fd-dim); font-weight: 400; }
.fd-replay .rt-inp u { text-decoration: none; color: var(--fd-dim); }
.fd-replay .rt-inp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fd-replay .rt-inp2 .rt-inp { padding: 4px 6px; }
.fd-replay .rt-slider { display: block; padding: 2px 0 0; }
.fd-replay .rt-slider .bar { display: block; height: 3px; border-radius: 3px;
                             background: rgba(236,231,221,.12); position: relative; }
.fd-replay .rt-slider .bar b { display: block; height: 100%; width: 0; border-radius: 3px;
                               background: var(--fd-brass); position: relative; }
.fd-replay .rt-slider .bar b::after {
    content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%; background: var(--fd-brass);
}
.fd-replay .rt-slider .ticks { display: flex; justify-content: space-between; margin-top: 3px;
                               font-family: 'IBM Plex Mono', monospace; font-size: .44rem;
                               color: var(--fd-dim); }
.fd-replay .rt-read { display: block; border-top: 1px solid var(--fd-hair); padding-top: 4px;
                      margin-top: 2px; }
.fd-replay .rt-read > span { display: flex; justify-content: space-between; gap: 8px;
                             padding: 1px 0; font-family: 'IBM Plex Mono', monospace;
                             font-size: .5rem; }
.fd-replay .rt-read i { color: var(--fd-dim); }
.fd-replay .rt-read b { color: var(--fd-vellum); font-variant-numeric: tabular-nums; }
.fd-replay .rt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2px; }
.fd-replay .rt-actions b {
    display: block; padding: 5px 0; text-align: center; border-radius: 4px;
    font-size: .58rem; font-weight: 600; line-height: 1.15;
}
.fd-replay .rt-actions em { display: block; font-size: .44rem; font-weight: 400; opacity: .8; }
.fd-replay .rt-actions .buy  { background: #1f9d63; color: #04150c; }
.fd-replay .rt-actions .sell { background: #d94046; color: #1a0407; }
.fd-replay .rt-close {
    display: block; padding: 4px 0; text-align: center; border-radius: 4px;
    border: 1px solid var(--fd-hair); color: var(--fd-dim); font-size: .52rem;
}
.fd-replay .rt-hint { display: block; color: var(--fd-dim); font-size: .48rem; line-height: 1.45; }

/* ---------------------------------------------------------- the dock */
.fd-replay .rt-dock { display: block; border-top: 1px solid var(--fd-hair); background: #0d0d14; }
.fd-replay .rt-tabs {
    display: flex; align-items: center; gap: 0;
    border-bottom: 1px solid var(--fd-hair); font-size: .58rem; white-space: nowrap;
}
.fd-replay .rt-tabs b {
    padding: 7px 11px; font-weight: 500; color: var(--fd-dim);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .3s ease, border-color .3s ease;
}
.fd-replay .rt-tabs b.on { color: var(--fd-vellum); border-bottom-color: var(--fd-brass); }
.fd-replay .rt-tabs .sp { flex: 1; }
.fd-replay .rt-tabs em { display: flex; align-items: center; gap: 5px; padding: 0 11px;
                         color: var(--fd-dim); font-size: .54rem; }
/* Positions and Performance are different heights, and a dock that grows
   when the tab changes drags the paragraph under it down the page. The pane
   is one height and keeps it. */
.fd-replay .rt-pane { display: block; background: #0a0a0f; height: 116px; overflow: hidden; }

/* positions and orders, as the table they are */
.fd-replay .rt-tbl { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: .52rem; }
.fd-replay .rt-tbl .hd, .fd-replay .rt-tbl .rw {
    display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px; padding: 6px 11px;
}
.fd-replay .rt-tbl .hd { color: var(--fd-dim); font-size: .44rem; letter-spacing: .12em;
                         text-transform: uppercase; border-bottom: 1px solid var(--fd-hair); }
.fd-replay .rt-tbl .rw { color: var(--fd-vellum); font-variant-numeric: tabular-nums; }
.fd-replay .rt-tbl .rw .long { color: #20b26c; }
.fd-replay .rt-tbl .rw .up { color: #20b26c; }
.fd-replay .rt-tbl .rw .down { color: #ef454a; }
.fd-replay .rt-empty { display: block; padding: 22px 11px; color: var(--fd-dim);
                       font-family: 'IBM Plex Mono', monospace; font-size: .54rem; }

/* the performance page, which is what the replay was for */
.fd-replay .rt-perf { display: block; padding: 9px 11px; }
.fd-replay .rt-hero { display: flex; align-items: flex-end; justify-content: space-between;
                      gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--fd-hair); }
.fd-replay .rt-hero .lab { display: block; font-family: 'IBM Plex Mono', monospace;
                           font-size: .44rem; letter-spacing: .14em; text-transform: uppercase;
                           color: var(--fd-dim); }
.fd-replay .rt-hero .val { display: block; margin-top: 2px; font-size: 1.15rem; font-weight: 600;
                           font-variant-numeric: tabular-nums; color: #20b26c; }
.fd-replay .rt-hero .sub { display: block; margin-top: 2px;
                           font-family: 'IBM Plex Mono', monospace; font-size: .5rem;
                           color: var(--fd-smoke); }
.fd-replay .rt-hero .rt-hr { text-align: right; }
.fd-replay .rt-hero .rt-hr span { display: block; font-family: 'IBM Plex Mono', monospace;
                                  font-size: .5rem; color: var(--fd-dim); }
.fd-replay .rt-hero .rt-hr b { display: block; margin-top: 3px; font-size: .68rem;
                               color: #20b26c; }
.fd-replay .rt-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
                      gap: 1px; margin-top: 8px; background: var(--fd-hair); }
.fd-replay .rt-kpi { display: block; padding: 6px 8px; background: #0a0a0f; }
.fd-replay .rt-kpi i { display: block; font-family: 'IBM Plex Mono', monospace;
                       font-size: .42rem; letter-spacing: .1em; text-transform: uppercase;
                       color: var(--fd-dim); }
.fd-replay .rt-kpi b { display: block; margin-top: 3px; font-family: 'IBM Plex Mono', monospace;
                       font-size: .68rem; font-variant-numeric: tabular-nums;
                       color: var(--fd-vellum); }
.fd-replay .rt-kpi b.up { color: #20b26c; }
.fd-replay .rt-kpi b.down { color: #ef454a; }
.fd-replay .rt-kpi u { display: block; margin-top: 2px; text-decoration: none;
                       font-size: .42rem; color: var(--fd-dim); }

/* A terminal has a fixed amount of furniture in it, so on a short screen the
   answer is not to take the furniture out - it is to stand further back. The
   whole thing scales, which keeps every proportion the terminal has. */
@media (max-height: 820px) { .fd-replay { zoom: .92; } }
@media (max-height: 720px) { .fd-replay { zoom: .84; } }

/* the affordance, which only has to be there once you are looking at it */
.fd-replay .rp-go {
    position: absolute; right: 10px; bottom: 10px; z-index: 3;
    padding: 6px 11px; border-radius: 3px;
    background: var(--fd-brass); color: #1a1200;
    font-family: 'IBM Plex Mono', monospace; font-size: .52rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
    opacity: 0; transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
}
.fd-replay:hover .rp-go, .fd-replay:focus-visible .rp-go { opacity: 1; transform: none; }

.fd-model figcaption {
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 9px;
    font-family: 'IBM Plex Mono', monospace; font-size: .55rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--fd-dim);
}
.fd-model .say { text-transform: none; letter-spacing: .02em; font-size: .74rem;
                 font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--fd-smoke); }

/* the opening arrives in order, once */
.fd-open-head > *, .fd-open-body > *, .fd-model {
    animation: fd-rise .8s cubic-bezier(.16,.84,.3,1) both;
}
.fd-open-head > *:nth-child(1) { animation-delay: .10s; }
.fd-open-head > *:nth-child(2) { animation-delay: .20s; }
.fd-model                      { animation-delay: .30s; }
.fd-open-body > *:nth-child(1) { animation-delay: .40s; }
.fd-open-body > *:nth-child(2) { animation-delay: .48s; }
.fd-open-body > *:nth-child(3) { animation-delay: .56s; }
@keyframes fd-rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    /* front.js paints one system fully read and stops, so nothing here needs
       to move for the screen to make sense. */
    .fd-open-head > *, .fd-open-body > *, .fd-model { animation: none !important; }
    .fd-live i { animation: none !important; }
    .fd-sentence mark, .fd-slot::before, .fd-slot .k, .fd-slot .v,
    .fd-sentence, .fd-slots { transition: none !important; }
    .fd-replay .rp-live { animation: none !important; }
    .fd-replay .rp-go { opacity: 1; transform: none; }
}

/* Between the phone and a wide desk the words share the row with the object,
   so the headline is sized against the column it is actually in rather than
   against the window - otherwise the second line breaks in the middle. */
/* The row is the full width now, but on a narrow desk that is still not
   twenty-four characters of a didone at five per cent of the window. */
@media (min-width: 721px) and (max-width: 1180px) {
    .fd-open h1 { font-size: clamp(1.75rem, 3.1vw, 2.3rem); margin-bottom: 16px; }
}

@media (max-width: 720px) {
    /* One column, and the object sits between the headline and the reading
       rather than at the bottom - a phone screen is short enough that
       anything under the paragraph is something nobody saw. */
    .fd-open { grid-template-columns: 1fr; row-gap: 11px; padding-right: 0; }
    .fd-open-head, .fd-open-body, .fd-model {
        grid-column: auto; grid-row: auto; align-self: auto; }
    /* A phone keeps the chart, the clock and the score. The tool rail, the
       order ticket, the balances and the toolbar are furniture you cannot
       press at this size, and the terminal reads better without them than
       squeezed into a third of a thumb. */
    .fd-replay { zoom: 1; }
    .fd-replay .rt-top { padding: 6px 9px; gap: 7px; }
    .fd-replay .rt-top .rt-sec,
    .fd-replay .rt-top .rt-field,
    .fd-replay .rt-top .rt-tool,
    .fd-replay .rt-top .rt-vr { display: none; }
    .fd-replay .rt-tick { gap: 10px; padding: 6px 9px; }
    .fd-replay .rt-stats { display: none; }
    .fd-replay .rt-acct > span:not(.clk) { display: none; }
    .fd-replay .rt-main { grid-template-columns: 1fr; min-height: 116px; }
    .fd-replay .rt-pane { height: 118px; }
    .fd-replay .rt-rail, .fd-replay .rt-trade { display: none; }
    .fd-replay .rt-legend em:nth-of-type(2) { display: none; }
    .fd-replay .rt-tabs .sp, .fd-replay .rt-tabs em,
    .fd-replay .rt-tabs b:nth-of-type(n+5) { display: none; }
    .fd-replay .rt-tabs b { padding: 6px 9px; font-size: .54rem; }
    .fd-replay .rt-tbl .hd, .fd-replay .rt-tbl .rw {
        grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px 9px; }
    .fd-replay .rt-tbl .hd > span:nth-child(n+5):nth-child(-n+8),
    .fd-replay .rt-tbl .rw > span:nth-child(n+5):nth-child(-n+8) { display: none; }
    .fd-replay .rt-hero { display: block; }
    .fd-replay .rt-hero .rt-hr { text-align: left; margin-top: 5px; }
    .fd-replay .rt-hero .val { font-size: .95rem; }
    .fd-replay .rt-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fd-replay .rt-kpi:nth-child(n+5) { display: none; }
    .fd-replay .rt-kpi u { display: none; }
    .fd-replay .rt-perf { padding: 7px 9px; }

    /* A hover badge floating over the dock has nothing to hover on a phone and
       lands on the third readout, so it becomes the bar along the bottom that
       a phone would have wanted in the first place. The caption's second line
       goes with it - the bar says the same thing, in a place you can press. */
    .fd-replay .rp-go {
        position: static; display: block; width: 100%;
        padding: 8px 10px; border-radius: 0; text-align: center;
        opacity: 1; transform: none;
    }
    .fd-model figcaption { margin-top: 8px; }
    .fd-model .say { display: none; }

    .fd-open h1 { margin-bottom: 14px; }
    .fd-model figcaption { flex-direction: row; align-items: baseline;
                           gap: 6px 14px; flex-wrap: wrap; margin-top: 7px; }

    .fd-open h1 { font-size: clamp(1.8rem, 7.8vw, 2.4rem); max-width: none; }
    .fd-sentence { margin-top: 0; max-width: none; min-height: 0;
                   font-size: .9rem; line-height: 1.66; }
    .fd-slots { grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 10px 12px; margin-top: 14px; }
    .fd-slot { padding-top: 8px; }
    .fd-slot .k { font-size: .52rem; letter-spacing: .16em; }
    .fd-slot .v { margin-top: 4px; font-size: .74rem; }
}


/* ==========================================================================
   THE DOCK SAYS WHICH PLAN YOU ARE ON

   A coin and a gem were two icons for one fact, so they became one word. But
   the word sat in a hard box, which made it look like a button, and what the
   button did was offer the plans to somebody who had already bought one.

   So on a plan it is a readout: a live dot and the plan in words, no box, and
   pressing it goes to the account page - where the renewal date and CHANGE
   PLAN actually are. The one person who should be looking at a button is the
   one without a plan, and for them the whole chip becomes it.
   ========================================================================== */

#auth-corner .hud-slot.plan {
    width: auto !important; height: 42px;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
}
#auth-corner .hud-slot.plan .hud-icon-box {
    display: flex; align-items: center; gap: 9px;
    width: auto; font-size: inherit;
}
#auth-corner .plan-pip {
    flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
    background: var(--fd-dim);
    transition: background .2s ease, box-shadow .2s ease;
}
#auth-corner .plan-tag {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: .58rem; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; white-space: nowrap;
    color: var(--fd-smoke); transition: color .18s ease;
}

/* on a plan - a status, not an offer */
#auth-corner .hud-slot.plan.is-paid .plan-pip {
    background: #35d07f; box-shadow: 0 0 0 3px rgba(53,208,127,.15);
}
#auth-corner .hud-slot.plan.is-paid .plan-tag { color: var(--fd-vellum); }
#auth-corner .hud-slot.plan.is-paid:hover { border-color: var(--fd-hair) !important; }

/* no plan - the one place on this dock a button belongs */
#auth-corner .hud-slot.plan.is-free {
    background: var(--fd-brass) !important;
    border-color: var(--fd-brass) !important;
    box-shadow: 0 0 18px rgba(247,166,0,.20);
}
#auth-corner .hud-slot.plan.is-free .plan-pip { display: none; }
#auth-corner .hud-slot.plan.is-free .plan-tag { color: #1a1200; font-weight: 600; }
#auth-corner .hud-slot.plan.is-free:hover { filter: brightness(1.08); }

body.fd-stuck #auth-corner .hud-slot.plan.is-paid { border-color: transparent !important; }

@media (max-width: 560px) {
    /* On a phone the dock is three things wide already. The plan keeps its
       word but loses the tracking that made it long. */
    #auth-corner .hud-slot.plan { padding: 0 9px !important; }
    #auth-corner .hud-slot.plan .hud-icon-box { gap: 7px; }
    #auth-corner .plan-tag { font-size: .54rem; letter-spacing: .1em; }
}