/*
 * grcx-style.css - the ONE shared look for the GRC-X website and X-Core.
 * First basics (Tim, 3 Nov 2026), read off the live website as rendered (Tim's Site Master, index.html):
 * its colours, type, header, sign-in button and cards. Nothing here is invented; where the site had no value
 * yet (spacing scale, status colours) the choice is marked "X-Core".
 *
 * Rules:
 *  - Pages use these tokens and classes. No colour, font or radius is typed into a page any more.
 *  - Change a value HERE and both places change. Sally designs from this file (it becomes her design system).
 *  - The website adopts this file after its go-live (not before: it publishes 4 Nov as it stands).
 *  - House rules: no pills (no radius of 30px or more on chips or tags), no eyebrows.
 *  - Pink is the GRC-X "X" accent and is being phased out over about six months (Tim + Sally, 3 Nov):
 *    do not give it any new jobs.
 */

:root {
  /* Colour: surfaces, darkest to lightest */
  --gx-page:        #070B16;   /* page background */
  --gx-surface:     #0D1528;   /* cards and panels */
  --gx-raised:      #16233F;   /* a panel on a panel, hover, selected */

  /* Colour: text */
  --gx-ink:         #F0EDE0;   /* main text (cream) */
  --gx-ink-soft:    #D9D6CA;   /* secondary text */
  --gx-mute:        #9C9D90;   /* labels, dates, hints */

  /* Colour: lines */
  --gx-line:        rgba(240, 237, 224, .16);   /* card border */
  --gx-line-strong: rgba(240, 237, 224, .32);   /* outline button border */

  /* Colour: accents */
  --gx-blue:        #6482FF;   /* primary action, active state */
  --gx-blue-bright: #5C8DFF;
  --gx-orange:      #F5811F;   /* NGSL's colour, NOT NGSP's (Gaffer, 3 Nov): no job in X-Core. Only the dashed word gaps use it. */
  --gx-pink:        #E82064;   /* the X in the marks; phasing out, no new uses */

  /* Colour: states (X-Core) */
  --gx-open:        var(--gx-blue);
  --gx-booked:      var(--gx-blue);   /* Booked is lit neon blue with a glow; Completed is solid green (Gaffer, 3 Nov) */
  --gx-done:        #4FC48A;
  --gx-off:         var(--gx-mute);

  /* Type: Questrial throughout, one weight */
  --gx-font:        'Questrial', Arial, sans-serif;
  --gx-text:        16px;
  --gx-small:       13px;
  --gx-nav:         18px;      /* header links, buttons */
  --gx-h3:          20px;
  --gx-h2:          28px;      /* section titles; line height 36px, tracking -0.01em */
  --gx-h1:          40px;
  --gx-track-nav:   .02em;
  --gx-track-head:  -.01em;

  /* Shape */
  --gx-radius:      8px;       /* cards */
  --gx-radius-sm:   4px;       /* buttons, inputs, small boxes */

  /* Space (X-Core scale) */
  --gx-1: 4px;  --gx-2: 8px;  --gx-3: 12px;  --gx-4: 16px;
  --gx-5: 24px; --gx-6: 32px; --gx-7: 48px;  --gx-8: 64px;
  --gx-gutter:      5vw;       /* the header's side margin */
  --gx-topbar-h:    88px;
}

/* DARKFORCE ANIMATION (LOCKED 3 Nov 2026, Gaffer: "lock that into our new style design system"). The house style for
   every small animated slot, X-Core and website. Designed by Sally (Espresso board v72, version A); built AS DRAWN.
   One object, one light moment, the motion teaches the title; reads at about 112x63 (no fine detail, no words in the
   art); the same piece loops small and plays big; slow 7 to 10s loops of differing lengths that build, hold the light
   3 to 4s and sink to dark; paused off screen; a still for reduced motion. Pink only for the ONE thing that matters.
   A (blue) is the house version. B (cream and grey) is on file for mood pieces only: its values are noted beside A. */
:root {
  --df-ground:      var(--gx-page);   /* the dark ground, both versions */
  --df-light:       #8FA6FF;          /* the bright light            B: #F4F1E6 */
  --df-blue:        #6482FF;          /* structure and beam          B: #CFCBBB */
  --df-dim:         #5C6E9E;          /* resting parts               B: #8F8D84 */
  --df-deep:        #2A3A66;          /* far edges, ghosts           B: #34343C */
  --df-metal-hi:    #3A4A72;          /* object, lit face            B: #4A4C56 */
  --df-metal-mid:   #1A2547;          /* object, mid                 B: #22242C */
  --df-metal-lo:    #0B1430;          /* object, shadow side         B: #101116 */
  --df-fill-hi:     #16233F;          /* page and panel fills        B: #1A1C24 */
  --df-fill-lo:     #0F1A36;          /*                             B: #15161C */
  --df-pink:        var(--gx-pink);   /* the ONE thing that matters, both versions */
}

/* Base */
html, body { margin: 0; background: var(--gx-page); color: var(--gx-ink); }
body { font-family: var(--gx-font); font-size: var(--gx-text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 400; margin: 0; }
h1 { font-size: var(--gx-h1); line-height: 1.15; letter-spacing: var(--gx-track-head); }
h2 { font-size: var(--gx-h2); line-height: 36px; letter-spacing: var(--gx-track-head); }
h3 { font-size: var(--gx-h3); line-height: 1.3; }
.gx-mute { color: var(--gx-mute); }

/* Top bar, as the website's header */
.gx-topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--gx-topbar-h); padding: 0 var(--gx-gutter);
  display: flex; align-items: center; gap: var(--gx-6);
  background: rgba(7, 11, 22, .88); backdrop-filter: blur(8px);
}
.gx-nav { display: flex; gap: var(--gx-5); flex: 1; }
.gx-nav a, .gx-nav button {
  background: none; border: 0; cursor: pointer; padding: 6px 0;
  font-size: var(--gx-nav); letter-spacing: var(--gx-track-nav); color: var(--gx-ink-soft);
  border-bottom: 1px solid transparent;
}
.gx-nav a:hover, .gx-nav button:hover { color: var(--gx-ink); }
.gx-nav [aria-current="page"] { color: var(--gx-ink); border-bottom-color: var(--gx-blue); }

/* Buttons */
.gx-btn {
  display: inline-flex; align-items: center; gap: var(--gx-2);
  height: 44px; padding: 0 22px; cursor: pointer;
  font-size: var(--gx-nav); letter-spacing: var(--gx-track-nav);
  border-radius: var(--gx-radius-sm); border: 1px solid var(--gx-blue);
  background: var(--gx-blue); color: var(--gx-ink);
}
.gx-btn--outline { background: rgba(5, 8, 15, .35); border-color: var(--gx-line-strong); }   /* the website's Sign in */
.gx-btn--small { height: 34px; padding: 0 14px; font-size: 14px; }
.gx-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Player full screen button: the website's own (programme-explorer.html, aria-label "Full screen", glyph ⤢).
   Sits top right inside any player. One jump to full screen; the website has no middle size. */
.gx-fs {
  position: absolute; right: 16px; top: 16px; z-index: 6;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(240, 237, 224, .45); border-radius: var(--gx-radius);
  background: rgba(5, 8, 15, .6); color: var(--gx-ink); font-size: 24px; line-height: 1; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.gx-fs:hover { background: rgba(240, 237, 224, .14); border-color: rgba(240, 237, 224, .8); }

/* Step menu: the website's Explorer menu (programme-explorer.html, the numbered panels down the left of a course,
   ending in Book Your Place), lifted value for value. Markup:
   <div class="gx-menu [has-on]"><span class="gx-menu__line"></span>
     <button class="gx-step [is-on]"><span class="gx-step__num">1</span>
       <span class="gx-step__body"><span class="gx-step__title">..</span><span class="gx-step__text">..</span></span></button>
     ... <a class="gx-step gx-step--book">..</a></div>
   While one step is on, the others dim to .66, as on the website. */
.gx-menu { position: relative; display: flex; flex-direction: column; gap: 14px; }
.gx-menu__line { position: absolute; left: 39px; top: 40px; bottom: 40px; width: 2px; background: rgba(100, 130, 255, .35); pointer-events: none; }
.gx-step {
  flex: 1 1 0; display: flex; align-items: center; gap: 18px; padding: 10px 20px 10px 18px; min-height: 72px;
  text-align: left; font: inherit; color: var(--gx-ink); cursor: pointer;
  border: 1px solid rgba(100, 130, 255, .22); border-radius: 12px;
  background: linear-gradient(180deg, rgba(36, 54, 107, .32), rgba(20, 28, 58, .12));
  transition: border-color .2s ease, opacity .3s ease, box-shadow .2s ease;
}
.gx-step:hover { border-color: var(--gx-blue); opacity: 1; }
.gx-menu.has-on .gx-step:not(.is-on):not(.gx-step--book) { opacity: .66; }
.gx-step.is-on { border-color: var(--gx-blue); background: linear-gradient(180deg, rgba(60, 86, 170, .45), rgba(20, 28, 58, .2)); box-shadow: 0 0 24px rgba(100, 130, 255, .4); }
.gx-step__num {
  position: relative; z-index: 2; flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #B3B1A5;
  border: 2px solid rgba(100, 130, 255, .45); background: var(--gx-raised);
}
.gx-step.is-on .gx-step__num { border-color: var(--gx-blue); color: #fff; box-shadow: 0 0 14px rgba(100, 130, 255, .7); }
.gx-step__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gx-step__title { font-size: 22px; line-height: 1.15; }
.gx-step.is-on .gx-step__title { color: #fff; }
.gx-step__text { font-size: 15px; line-height: 1.35; color: #B3B1A5; }
/* The last step on the WEBSITE's Explorer only (pink). In X-Core, Book Your Place is a normal blue step (Gaffer, 3 Nov). */
.gx-step--book { flex: none; border-color: rgba(232, 32, 100, .5); background: linear-gradient(180deg, rgba(232, 32, 100, .16), rgba(232, 32, 100, .05)); transition: background .25s ease, border-color .25s ease; }
.gx-step--book:hover { background: var(--gx-pink); border-color: var(--gx-pink); }
.gx-step--book .gx-step__num { border-color: var(--gx-pink); background: rgba(232, 32, 100, .25); color: #fff; }
.gx-step--book .gx-step__text { color: var(--gx-ink-soft); }

/* Credits meter (Gaffer, 3 Nov, via Sally board v39): one block per credit, used ones lit neon blue; the count in
   plain text beside them. Updating: the blocks pulse until the real number comes back. */
.gx-credits { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; cursor: pointer; }
.gx-credits__blocks { display: flex; gap: 5px; }
.gx-credits__blocks i { display: block; width: 12px; height: 12px; border-radius: 2px;
  background: rgba(100, 130, 255, .08); border: 1px solid rgba(100, 130, 255, .45); }
.gx-credits__blocks i.used { background: var(--gx-blue); border-color: #8FA6FF; box-shadow: 0 0 8px rgba(100, 130, 255, .85); }
.gx-credits__txt { font-size: 14px; color: var(--gx-ink-soft); white-space: nowrap; }
.gx-credits.is-updating .gx-credits__blocks { animation: gx-credits-pulse 1.1s ease-in-out infinite; }
.gx-credits.is-updating .gx-credits__txt { color: var(--gx-mute); }
@keyframes gx-credits-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .gx-credits.is-updating .gx-credits__blocks { animation: none; opacity: .6; } }

/* Cards */
.gx-card { background: var(--gx-surface); border: 1px solid var(--gx-line); border-radius: var(--gx-radius); }
.gx-card--raised { background: var(--gx-raised); }
.gx-card[aria-pressed="true"], .gx-card.is-active { border-color: var(--gx-blue); }

/* Status marks: a small square, never a pill */
.gx-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--gx-small); white-space: nowrap; }
.gx-status::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.gx-status--open { color: var(--gx-open); }
.gx-status--booked { color: var(--gx-booked); }
.gx-status--done { color: var(--gx-done); }
.gx-status--off { color: var(--gx-off); }

/* A visible gap where Gaffer's or Daisy's words go */
.gx-gap { display: inline-block; border: 1px dashed var(--gx-orange); color: var(--gx-orange); border-radius: var(--gx-radius-sm); padding: 2px 8px; font-size: 12px; }