/* Skin B, "Sky and sunset" (owner 2026-10-09: "the color we are using are somewhat default for the vibe coded websites";
 * he picked B from the mock: white pages, a sky header, deep sea blue, a warm orange button, rounded game lettering).
 *
 * LIVE for everyone since 2026-10-09 (owner: "i like it. ship it"). header.php loads this file and puts class="skin-b" on <html> unless
 * the pro_skin cookie is "old" (set with ?skin=old on any page, cleared with ?skin=b), which shows the previous look.
 * With that cookie nothing here is even downloaded.
 *
 * It is a LAYER over site.css, landing.css, v2.css and home.css, not a rewrite: every rule is prefixed html.skin-b so
 * it wins over the "body.v2 ..." rules it replaces, and deleting this file returns the old look. One light look for
 * now; a matching dark version comes after the owner approves the light one.
 * Contrast: PRO_SKIN=b python tools/check_contrast.py runs the readability sweep with this skin on. White on the
 * orange only passes because the orange is this deep (#D24C13 to #BC410D); a brighter orange fails it.
 * Converted: tokens, top bar, page header, section tabs, panels, tables, buttons, closing band, footer, News,
 * Download, Wiki front, Shop and FAQ feature cards (kept dark on purpose, retinted to sea blue).
 * Left as they were, because they are pictures first: the home scroll story and the pre-register scene. */

/* :root in the selector on purpose: the light tokens in site.css are ":root:not([data-theme=dark])", which outranks a bare html.skin-b */
html.skin-b:root, html.skin-b:root[data-theme="light"], html.skin-b:root[data-theme="dark"] {
  --ink: #0F4C75; --ink-2: #2F5168; --blue: #1B6CA8; --blue-deep: #0F4C75;
  --gold: #D24C13; --gold-lt: #FFC857; --gold-text: #A03E12;
  --paper: #F3FAFA; --paper-2: #E6F4F5; --panel: #FFFFFF; --rule: #CFE3E6;
  --text: #13324A; --muted: #4F6C80; --ok: #197A4F;
  --shadow: rgba(15, 76, 117, .14);
  --wash: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.7));
  --sb-sea: #0F4C75; --sb-sea-2: #0B3A5A; --sb-sky: #8FD3F4; --sb-mist: #E8F7FA; --sb-sun: #BC410D; --sb-sun-2: #D24C13;
  --sb-display: "Lilita One", "Nunito Sans", system-ui, sans-serif;
  color-scheme: light;
}
html.skin-b body { background: var(--paper); color: var(--text); }

/* ---- lettering: rounded game face instead of the carved serif ---- */
html.skin-b h1, html.skin-b h2, html.skin-b h3, html.skin-b .panel-title,
html.skin-b .foot-col b, html.skin-b .nwx-card__body b, html.skin-b .ph__title {
  font-family: var(--sb-display); font-weight: 400; letter-spacing: .01em; text-transform: none; font-variant: normal; }
html.skin-b .btn { font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 800; letter-spacing: .04em; font-variant: normal; }

/* ---- buttons: sunset orange is the one call to action ---- */
html.skin-b .btn { background: linear-gradient(180deg, var(--sb-sun-2), var(--sb-sun)); color: #fff; border-color: #9E3509;
  text-shadow: 0 1px 0 rgba(120, 40, 0, .35); }
html.skin-b .btn-alt, html.skin-b .ph__ghost, html.skin-b .cta-band__ghost { background: #fff; color: var(--sb-sea); border-color: rgba(15, 76, 117, .45); text-shadow: none; }
html.skin-b .btn-alt:hover, html.skin-b .ph__ghost:hover, html.skin-b .cta-band__ghost:hover { color: var(--sb-sea-2); border-color: var(--sb-sea); }

/* ---- top bar: solid sea blue ---- */
html.skin-b .topbar.is-solid, html.skin-b body.is-page .topbar { background: rgba(15, 76, 117, .97); box-shadow: 0 2px 14px rgba(11, 58, 90, .3); }
html.skin-b .topbar-nav a:hover { color: var(--gold-lt); background: rgba(255, 255, 255, .12); }
html.skin-b .topbar-nav a[aria-current="page"] { color: var(--gold-lt); }
html.skin-b .topbar-toggle:hover { color: var(--gold-lt); border-color: rgba(255, 200, 87, .7); }

/* ---- page header: day sky instead of night ---- */
html.skin-b .ph { background: var(--sb-sky); color: var(--text); }
html.skin-b .ph::before { background: linear-gradient(90deg, rgba(232,247,250,.97) 0%, rgba(232,247,250,.88) 38%, rgba(143,211,244,.22) 68%, rgba(143,211,244,.32) 100%); }
html.skin-b .ph__title { color: var(--sb-sea); text-shadow: 0 2px 0 #fff; }
html.skin-b .ph__sub { color: var(--ink-2); }
html.skin-b .ph__crumb, html.skin-b .ph__crumb a, html.skin-b .ph__crumb span { color: var(--sb-sea); }
html.skin-b .ph__crumb a:hover { color: var(--sb-sea-2); text-decoration: underline; }
html.skin-b .ph__meta { color: var(--sb-sea); }
html.skin-b .ph__meta > span { background: rgba(255, 255, 255, .78); border-color: rgba(15, 76, 117, .2); color: var(--sb-sea); }
html.skin-b .ph__face { filter: drop-shadow(0 18px 26px rgba(11, 58, 90, .35)); }
@media (max-width: 760px) {
  html.skin-b .ph::before { background: linear-gradient(180deg, rgba(232,247,250,.15) 0%, rgba(232,247,250,.6) 34%, rgba(232,247,250,.97) 52%); }
}

/* ---- section tabs: a white bar with blue pills, the open page in orange ---- */
html.skin-b body.v2 #page-body > .g-lnb { background: #fff; border-color: var(--rule); box-shadow: 0 6px 16px rgba(15, 76, 117, .08); }
html.skin-b body.v2 .g-lnb a { background: var(--sb-mist); color: var(--sb-sea); border-color: transparent; }
html.skin-b body.v2 .g-lnb a:hover { border-color: var(--sb-sea); color: var(--sb-sea-2); }
html.skin-b body.v2 .g-lnb a[aria-current] { background: linear-gradient(180deg, var(--sb-sun-2), var(--sb-sun)); color: #fff; border-color: #9E3509; }

/* ---- panels and tables ---- */
html.skin-b .panel, html.skin-b body.v2 .panel { background-image: none; background-color: #fff; border-color: var(--rule); box-shadow: 0 10px 26px -18px rgba(15, 76, 117, .35); }
html.skin-b .panel-eyebrow { color: var(--gold-text); }
html.skin-b table.req th { color: var(--sb-sea); }
html.skin-b .btn { color: #fff; } html.skin-b .btn-alt, html.skin-b .btn.ph__ghost, html.skin-b .btn.cta-band__ghost { color: var(--sb-sea); }
html.skin-b .g-lnb a { color: var(--sb-sea); } html.skin-b .g-lnb a[aria-current] { color: #fff; }

/* ---- closing band and footer ---- */
html.skin-b .cta-band { background: linear-gradient(120deg, #BFE6F7, var(--sb-mist)); color: var(--text); }
html.skin-b .cta-band__glow { opacity: .25; }
html.skin-b .cta-band__eyebrow { color: var(--gold-text); }
html.skin-b .cta-band h2 { color: var(--sb-sea); }
html.skin-b .cta-band p { color: var(--ink-2); }
html.skin-b .cta-band p b { color: var(--gold-text); }
html.skin-b .cta-band__art { filter: drop-shadow(0 16px 22px rgba(11, 58, 90, .3)); }
html.skin-b .foot--v2 { background: var(--sb-sea-2); color: #CFE6F2; }
html.skin-b .foot-col b { color: #fff; }
html.skin-b .foot-col a { color: #CFE6F2; }
html.skin-b .foot-col a:hover { color: var(--gold-lt); }
html.skin-b .foot-social a { border-color: rgba(255, 200, 87, .6); color: var(--gold-lt); }

/* ---- News ---- */
html.skin-b .nwx-chips a[aria-current] { background: linear-gradient(180deg, var(--sb-sun-2), var(--sb-sun)); color: #fff; border-color: #9E3509; }
html.skin-b .nwx-lead { background: #fff; color: var(--text); box-shadow: 0 0 0 1px var(--rule), 0 26px 44px -30px rgba(15, 76, 117, .55); }
html.skin-b .nwx-lead:hover { color: var(--text); box-shadow: 0 0 0 2px var(--sb-sun), 0 30px 50px -28px rgba(15, 76, 117, .6); }
html.skin-b .nwx-lead h2 { color: var(--sb-sea); }
html.skin-b .nwx-lead p { color: var(--ink-2); }
html.skin-b .nwx-lead .nwx-meta { color: var(--muted); }
html.skin-b .nwx-read { color: var(--gold-text); }
html.skin-b .nwx-card__body b { color: var(--sb-sea); }
html.skin-b .nwx-lead .nwx-pin { color: var(--gold-text); }
html.skin-b .nwx-road { background-color: var(--sb-mist); color: var(--text); box-shadow: 0 0 0 1px var(--rule); }
html.skin-b .nwx-road::before { background: linear-gradient(90deg, rgba(232, 247, 250, .97) 30%, rgba(232, 247, 250, .6)); }
html.skin-b .nwx-road span { color: var(--gold-text); }
html.skin-b .nwx-road b { color: var(--sb-sea); font-family: var(--sb-display); font-weight: 400; }
html.skin-b .nwx-road i { color: var(--ink-2); }
html.skin-b .nwx-road:hover { color: var(--text); }

/* ---- small card titles that named the old serif themselves ---- */
html.skin-b .dlx-acct b, html.skin-b .steps b, html.skin-b .shopx-link b, html.skin-b .wkx-start b, html.skin-b .wkx-body b,
html.skin-b .fqx-help b, html.skin-b .pr-ref > div > b, html.skin-b body.v2 .pr-card h3, html.skin-b body.v2 .pr-why b,
html.skin-b .pr-h1, html.skin-b .pr-h2, html.skin-b .pr-scar b, html.skin-b .pr-count b {
  font-family: var(--sb-display); font-weight: 400; letter-spacing: .01em; }

/* ---- Download ---- */
html.skin-b .dlx-main { background: linear-gradient(135deg, #BFE6F7, #E8F7FA 70%); color: var(--text);
  box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -34px rgba(15, 76, 117, .55); }
html.skin-b .dlx-main::before { background: radial-gradient(circle at 85% 20%, rgba(255, 200, 87, .45), transparent 45%), radial-gradient(circle at 10% 110%, rgba(143, 211, 244, .7), transparent 55%); }
html.skin-b .dlx-os { color: var(--sb-sea); background: rgba(255, 255, 255, .7); }
html.skin-b .dlx-os svg { color: var(--blue); }
html.skin-b .dlx-main h2 { color: var(--sb-sea); }
html.skin-b .dlx-note { color: var(--ink-2); }
html.skin-b .dlx-size { color: var(--ink-2); }
html.skin-b .dlx-size b { color: var(--sb-sea); }
html.skin-b .dlx-alt { border-top-color: rgba(15, 76, 117, .18); color: var(--ink-2); }
html.skin-b .dlx-alt a { color: var(--gold-text); }
html.skin-b .steps li::before { font-family: var(--sb-display); font-weight: 400; color: #fff; background: linear-gradient(180deg, var(--sb-sun-2), var(--sb-sun)); }

/* ---- Wiki front ---- */
html.skin-b .wkx-start { background-color: var(--sb-mist); color: var(--text); box-shadow: 0 0 0 1px var(--rule); }
html.skin-b .wkx-start::before { background: linear-gradient(90deg, rgba(232, 247, 250, .97) 35%, rgba(232, 247, 250, .55)); }
html.skin-b .wkx-start span, html.skin-b .wkx-start i { color: var(--gold-text); }
html.skin-b .wkx-start b { color: var(--sb-sea); }
html.skin-b .wkx-start p { color: var(--ink-2); }
html.skin-b .wkx-start:hover { color: var(--text); }

/* ---- dark feature cards (Shop intro, FAQ search): still dark, but sea blue instead of navy, and their own text colours
 * win back over the lettering rule above ---- */
html.skin-b .shopx, html.skin-b .fqx { background: var(--sb-sea-2); box-shadow: 0 30px 60px -34px rgba(11, 58, 90, .8); }
html.skin-b .shopx h2, html.skin-b .shopx-cols h3, html.skin-b .fqx h2 { color: #fff; }
html.skin-b .shopx-eyebrow, html.skin-b .mcpx-eyebrow, html.skin-b .shopx-open strong, html.skin-b .shopx-honest strong, html.skin-b .shopx-honest a { color: var(--gold-lt); }
html.skin-b .shopx-open p, html.skin-b .shopx-cols span { color: #CFE6F2; }
html.skin-b .shopx-link b { color: #fff; }
html.skin-b .shopx-link::before { background: linear-gradient(0deg, rgba(11, 58, 90, .95) 25%, rgba(11, 58, 90, .25)); }
html.skin-b .shopx-link span { color: var(--gold-lt); }
html.skin-b .fqx-cats a span { color: #CFE6F2; }
html.skin-b .fqx-cats a[aria-current] { background: linear-gradient(180deg, var(--sb-sun-2), var(--sb-sun)); border-color: #9E3509; }
html.skin-b .fqx-cats a[aria-current] b, html.skin-b .fqx-cats a[aria-current] span { color: #fff; }
html.skin-b h3.fqx-cat { font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
html.skin-b table.req th { background: var(--sb-mist); }
html.skin-b .ph__meta a { color: var(--gold-text); }
html.skin-b .foot-legal, html.skin-b .foot-legal small { color: #A9C4D6; }
html.skin-b .foot-legal a { color: #CFE6F2; }
html.skin-b .ph__crumb span { opacity: 1; }

/* ---- the article reader (pop-up) is a dark sheet with its own light text: keep it dark, in sea blue, and keep the
 * white panel and pale table-head rules above out of it ---- */
html.skin-b .l-modal { background: rgba(11, 58, 90, .98); }
html.skin-b .l-modal .panel, html.skin-b body.v2 .l-modal .panel { background: none; border: 0; box-shadow: none; }
html.skin-b .l-modal .panel-eyebrow, html.skin-b .l-modal table.req th { color: var(--gold-lt); }
html.skin-b .l-modal table.req th { background: rgba(255, 200, 87, .12); }
html.skin-b table.req .qb-earn th { background: none; color: var(--muted); }