/* =====================================================================
   The licence shelf — /licenses (public/license-shelf/). "Four moons"
   (owner's pick, 2026-09-20): one tile per registered landing, each in the
   material its own landing already wears — clinical white (Dental Books),
   the blueprint paper (Logbooks), onyx black metal (Agents), steel + gold
   (the Lineup) — laid over Webb's Arp 263. The family furniture is the
   landings' (public/accountant/styles.css, the model): brushed-black top
   bar, steel-navy + gold, on-dark hero text inside the ground's scrims.

   THE GROUND is cover, centred, fixed. The picture (potm2608a; shipped at
   2181 × 2200 from ESA/Webb's 4298 × 4335) is sky edge to edge — an
   irregular galaxy's star clusters and red clumps of star birth, a
   foreground star's diffraction spikes reaching down from the top — so the
   crop loses nothing that matters: on a wide viewport the galaxy's body
   sits behind the tiles and the spikes glint under the top scrim (the star
   itself, measured 2026-09-20 at 57.7% × 16.1% of the frame, falls just
   above the crop on 16:9); portrait keeps the full height and gives the
   sides, and there the star lands behind the hero, under a deeper scrim.
   background-attachment: fixed sizes the picture to the viewport, which is
   the intent. iOS Safari ignores `fixed` — the ground scrolls with the page
   — so that engine gets scroll explicitly (the -webkit-touch-callout
   guard). It replaced Webb's Jupiter (height-fit, for its auroras) the same
   day, on the owner's word.
     Arp 263 (Webb, NIRCam) — ESA/Webb, NASA & CSA, A. Leroy — CC BY 4.0.
     Credit rides .lic-sky-credit under the footer (owner rule).
   `lic-` namespace. Self-contained tokens (the Dental Books ladder: --subtle
   6.49:1 and --gold-ink 5.70:1 on the light tiles — re-measure before
   changing either).
   ===================================================================== */

:root {
    /* Surfaces. --bg is the PICTURE's own dark — measured 2026-09-20 as the mean of its 12px
       border band, rgb(29, 29, 32) — so the colour the page shows before the picture lands, and
       the base of the scrims, are the sky's own. */
    --bg: #1d1d20; --surface: #ffffff; --surface-2: #f7f7f7; --surface-3: #ebebeb;
    --ground: url('/components/files/images/arp263-nircam-webb.jpg');
    --line: #e4e4e4; --line-strong: #d2d2d2;
    /* Ink on the light tiles */
    --text: #2a2f3a; --muted: #5b6473; --subtle: #545a63; --on-accent: #ffffff;
    /* On the starfield and the dark tiles */
    --on-dark: #FFF6F6; --on-dark-muted: rgba(255, 255, 255, 0.76); --on-dark-faint: rgba(255, 255, 255, 0.55);
    --gold-light: #d9c08a; --gold-pale: #f3e6c2;
    /* Brand: steel-navy + gold signature */
    --accent: #3C486B; --accent-hover: #2e3a56; --accent-press: #283350;
    --accent-soft: #eef1f7; --accent-ring: rgba(60, 72, 107, 0.22);
    --gold: #c2a35a; --gold-soft: rgba(194, 163, 90, 0.40); --gold-ink: #7a5e17;
    --steel-grad: linear-gradient(-145deg, #2e3a56, #3C486B, #283350, #46557e, #2e3a56);
    --silver-grad: linear-gradient(-145deg, #f4f4f4, #e0e0e0, #fcfcfc, #d8d8d8, #eeeeee);
    --onyx-grad: linear-gradient(-145deg, #1c1c1c, #2a2a2a, #141414, #333333, #1c1c1c);
    /* Type */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Spacing */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    /* Radii */
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
    /* Elevation */
    --sh-sm: 0 1px 2px rgba(8, 12, 24, 0.18), 0 2px 6px rgba(8, 12, 24, 0.16);
    --sh-md: 0 1px 3px rgba(8, 12, 24, 0.22), 0 8px 22px rgba(8, 12, 24, 0.28);
    --sh-lg: 0 14px 38px rgba(5, 8, 18, 0.46);
    /* Motion */
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur: 160ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    min-height: 100vh;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-color: var(--bg);
    /* Two layers, back to front: the picture, cover and centred; and the top/bottom scrims for
       the on-dark hero and close — the page colour at 62% / 66%, letting go at 26% and 74% of
       the viewport. */
    background-image:
        linear-gradient(180deg, rgba(29, 29, 32, 0.62) 0%, rgba(29, 29, 32, 0) 26%, rgba(29, 29, 32, 0) 74%, rgba(29, 29, 32, 0.66) 100%),
        var(--ground);
    background-size: 100% 100%, cover;
    background-position: center top, center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
@media (orientation: portrait), (max-width: 700px) {
    /* The full height shows here and the foreground star (57.7% × 16.1% of the frame) lands
       behind the hero, so the top scrim reaches deeper before it lets go. */
    body {
        background-image:
            linear-gradient(180deg, rgba(29, 29, 32, 0.72) 0%, rgba(29, 29, 32, 0.42) 38%, rgba(29, 29, 32, 0) 60%, rgba(29, 29, 32, 0) 76%, rgba(29, 29, 32, 0.66) 100%),
            var(--ground);
    }
}
/* iOS Safari: no fixed backgrounds — see the header note. The ground scrolls with the page. */
@supports (-webkit-touch-callout: none) {
    body { background-attachment: scroll; }
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(217, 192, 138, 0.65); border-radius: var(--r-sm); }
h1, h2 { margin: 0; }
p { margin: 0; }

/* =====================================================================
   Top bar — brushed black metal, the family furniture.
   ===================================================================== */
.lic-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    background: var(--onyx-grad);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    color: var(--on-dark);
}
.lic-brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.lic-brand-logo {
    width: 30px; height: 30px; flex: 0 0 auto;
    background-image: url('/components/files/icons/OfficialSkyRockWhiteLogo.svg');
    background-size: contain; background-repeat: no-repeat; background-position: center;
}
.lic-brand-text { font-weight: 800; letter-spacing: 0.12em; font-size: 0.9rem; line-height: 1.1; }
.lic-brand-sub { display: block; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.02em; color: var(--gold-light); }
.lic-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1); font-size: 0.84rem; }
.lic-nav a {
    padding: 6px 10px; border-radius: var(--r-sm); color: var(--on-dark-muted);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lic-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.lic-nav a.lic-nav-cta { border: 1px solid var(--gold-soft); color: var(--gold-light); }
.lic-nav a.lic-nav-cta:hover { background: rgba(194, 163, 90, 0.16); color: #fff; }
.lic-lang { display: inline-flex; align-items: center; margin-right: var(--s-2); }
/* Phones: the bar stops following the scroll (three wrapped rows would own a quarter of the
   screen) and the in-page anchors go — the page is one short scroll, the doors are the tiles. */
@media (max-width: 700px) {
    .lic-topbar { position: static; padding: var(--s-3) var(--s-4); }
    .lic-nav { font-size: 0.8rem; gap: 2px; }
    .lic-nav a { padding: 5px 8px; }
    .lic-nav a[href^="#"] { display: none; }
}

/* =====================================================================
   Buttons + links
   ===================================================================== */
.lic-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid transparent;
    font: inherit; font-size: 0.86rem; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.lic-btn:hover { transform: translateY(-1px); }
.lic-btn:active { transform: translateY(0); }
.lic-btn--silver { background: var(--silver-grad); color: var(--accent); box-shadow: var(--sh-md); }
.lic-btn--silver:hover { filter: brightness(1.04); box-shadow: var(--sh-lg); }
.lic-btn--steel { background: var(--steel-grad); color: var(--on-accent); box-shadow: var(--sh-md); }
.lic-btn--steel:hover { filter: brightness(1.08); box-shadow: var(--sh-lg); }
.lic-btn--ghost { background: rgba(255, 255, 255, 0.08); color: var(--on-dark); border-color: rgba(255, 255, 255, 0.42); }
.lic-btn--ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.62); color: #fff; }
.lic-link { font-size: 0.84rem; font-weight: 600; color: var(--gold-ink); padding: 6px 4px; }
.lic-link:hover { text-decoration: underline; }

/* =====================================================================
   Hero — light text on the cosmos, inside the top scrim.
   ===================================================================== */
.lic-hero {
    max-width: 62rem; margin: 0 auto; padding: clamp(2.6rem, 7vw, 4.5rem) var(--s-5) clamp(1.4rem, 3vw, 2rem);
    text-align: center; color: var(--on-dark); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.lic-hero-badge {
    display: inline-block; padding: 4px 12px; border-radius: var(--r-pill);
    border: 1px solid var(--gold-soft); background: rgba(194, 163, 90, 0.16); color: var(--gold-light);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: none;
}
.lic-hero-title {
    font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; padding-bottom: 0.08em;
    background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-light) 55%, var(--gold) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-light); text-shadow: none;
}
.lic-hero-lead { max-width: 40rem; font-size: clamp(1rem, 2vw, 1.12rem); color: var(--on-dark-muted); }
.lic-hero-quals { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin: var(--s-2) 0 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--on-dark-muted); }
.lic-qual { display: inline-flex; align-items: center; gap: 7px; }
.lic-qual::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--gold-light); flex: 0 0 auto; }

/* =====================================================================
   The four moons — one tile per registered landing, in its own material.
   ===================================================================== */
.lic-moons {
    max-width: 62rem; margin: 0 auto; padding: var(--s-4) var(--s-5) var(--s-3);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5);
}
@media (max-width: 760px) { .lic-moons { grid-template-columns: 1fr; } }
.lic-moon {
    position: relative; overflow: hidden; min-height: 17rem;
    display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-3);
    padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: var(--sh-md);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lic-moon:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.lic-orb { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: inline-grid; place-items: center; }
.lic-orb svg { width: 1.6rem; height: 1.6rem; }
.lic-moon-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lic-moon-t { font-size: 1.32rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1.15; }
.lic-kind {
    display: inline-block; padding: 2px 9px; border-radius: var(--r-pill);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    border: 1px solid var(--gold-soft); background: rgba(194, 163, 90, 0.12); color: var(--gold-ink);
}
.lic-moon-p { font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.lic-moon-foot { display: flex; flex-direction: column; gap: var(--s-2); }
.lic-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding-top: var(--s-3); border-top: 1px solid currentColor; }
.lic-price-amt { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--accent); font-variant-numeric: tabular-nums; }
.lic-price--stand .lic-price-amt { font-size: 1.05rem; }
.lic-price-from { font-size: 0.86rem; font-weight: 700; color: var(--subtle); }
.lic-price-per { font-size: 0.84rem; color: var(--subtle); }
.lic-req { font-size: 0.8rem; color: var(--subtle); }
.lic-doors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }

/* Dental Books: clinical white, a steel band at the top. */
.lic-moon--clinic { background: var(--surface); color: var(--text); }
.lic-moon--clinic::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--steel-grad); }
.lic-moon--clinic .lic-orb { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line-strong); }
.lic-moon--clinic .lic-price { border-top-color: var(--line-strong); }

/* Logbooks: the blueprint — dotted paper at 22px, a steel-to-gold rail on the left. */
.lic-moon--blueprint {
    background-color: var(--surface); color: var(--text);
    background-image: radial-gradient(#cfd5e3 1px, transparent 1.2px); background-size: 22px 22px;
}
.lic-moon--blueprint::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(180deg, var(--accent), var(--gold)); }
.lic-moon--blueprint .lic-orb { background: var(--surface); color: var(--accent); border: 1px dashed var(--accent); }
.lic-moon--blueprint .lic-price { border-top-color: var(--line-strong); }

/* Agents: onyx — the profile's brushed black metal, gold ink. */
.lic-moon--onyx { background: var(--onyx-grad); color: var(--on-dark); border-color: rgba(255, 255, 255, 0.10); box-shadow: var(--sh-md), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.lic-moon--onyx .lic-orb { background: rgba(217, 192, 138, 0.12); color: var(--gold-light); border: 1px solid var(--gold-soft); }
.lic-moon--onyx .lic-moon-t { color: var(--gold-light); }
.lic-moon--onyx .lic-kind { color: var(--gold-light); background: rgba(217, 192, 138, 0.10); }
.lic-moon--onyx .lic-moon-p { color: var(--on-dark-muted); }
.lic-moon--onyx .lic-price { border-top-color: rgba(255, 255, 255, 0.18); }
.lic-moon--onyx .lic-price-amt { color: var(--on-dark); }
.lic-moon--onyx .lic-price-from, .lic-moon--onyx .lic-price-per, .lic-moon--onyx .lic-req { color: var(--on-dark-muted); }
.lic-moon--onyx .lic-link { color: var(--gold-light); }

/* The Lineup: steel and gold — the Lineup's own signature. */
.lic-moon--steel { background: var(--steel-grad); color: var(--on-dark); border-color: rgba(255, 255, 255, 0.18); }
.lic-moon--steel .lic-orb { background: rgba(255, 255, 255, 0.10); color: var(--gold-light); border: 1px solid var(--gold-soft); }
.lic-moon--steel .lic-moon-t { color: var(--gold-pale); }
.lic-moon--steel .lic-kind { color: var(--gold-pale); background: rgba(243, 230, 194, 0.10); border-color: rgba(243, 230, 194, 0.40); }
.lic-moon--steel .lic-moon-p { color: var(--on-dark-muted); }
.lic-moon--steel .lic-price { border-top-color: rgba(255, 255, 255, 0.22); }
.lic-moon--steel .lic-price-amt { color: #ffffff; }
.lic-moon--steel .lic-price-from, .lic-moon--steel .lic-price-per, .lic-moon--steel .lic-req { color: var(--on-dark-muted); }
.lic-moon--steel .lic-link { color: var(--gold-light); }

/* =====================================================================
   The three kinds — onyx cards, the one thing the About grid never says.
   ===================================================================== */
.lic-kinds { max-width: 62rem; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-4); text-align: center; color: var(--on-dark); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.lic-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); }
.lic-h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; line-height: 1.2; margin-top: var(--s-2); }
.lic-kind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); text-align: left; text-shadow: none; }
@media (max-width: 700px) { .lic-kind-grid { grid-template-columns: 1fr; } }
.lic-kind-card {
    display: flex; flex-direction: column; gap: var(--s-1);
    padding: var(--s-4) var(--s-4); border-radius: var(--r-md);
    background: var(--onyx-grad); border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: var(--sh-md), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.lic-kind-card b { font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark); }
.lic-kind-card span { font-size: 0.84rem; color: var(--on-dark-muted); }

/* =====================================================================
   Close + footer + credit — on the southern aurora, inside the bottom scrim.
   ===================================================================== */
.lic-close {
    max-width: 62rem; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-4);
    text-align: center; color: var(--on-dark); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.lic-close-h { font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 800; line-height: 1.15; }
.lic-close-p { max-width: 40rem; color: var(--on-dark-muted); }
.lic-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); text-shadow: none; }
.lic-cta-tag { font-size: 0.8rem; color: var(--on-dark-faint); margin-top: var(--s-2); }
.lic-foot {
    max-width: 62rem; margin: 0 auto; padding: var(--s-5) var(--s-5) var(--s-2);
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-3);
    font-size: 0.8rem; color: var(--on-dark-faint);
}
.lic-foot a { color: var(--on-dark-muted); }
.lic-foot a:hover { color: #fff; text-decoration: underline; }
.lic-foot-dot { color: var(--on-dark-faint); }
.lic-sky-credit { text-align: center; font-size: 0.72rem; color: var(--on-dark-faint); padding: 0 var(--s-5) var(--s-5); }

@media (prefers-reduced-motion: reduce) {
    .lic-btn, .lic-moon, .lic-nav a { transition: none; }
    .lic-btn:hover, .lic-moon:hover { transform: none; }
}