/* THE ONE THEME FILE (owner call 2026-10-22, "the reading room"). Every shared page links this LAST
   in <head>, after its own inline tokens, so these values win. Dark is the house default for
   everyone; light is a choice made in Settings (account page), stored as localStorage "fb:theme" =
   "light" and applied as <html data-theme="light"> by the inline boot line next to this link.
   The phone's own dark/light setting is NOT consulted any more: every `@media (prefers-color-scheme:
   dark)` block on the site was rewritten to `:root:not([data-theme="light"]) ...` the same day, so
   that logic reads this attribute too. Keep it that way.
   The dark block below is keyed the same way ON PURPOSE: the pages' rewritten dark blocks carry
   the old brown values at that specificity, and this file, loaded last, has to beat them.
   Night: green-black walls, lamplight-ivory text, worn gilding, leather. Day: the same room at
   midday, sage paper and green-black ink. Mockup: scratchpad reading-room-theme.html (session
   2026-10-22). */
:root, :root:not([data-theme="light"]){
  color-scheme:dark;
  /* Cards (owner 2026-10-22, second live look): a near-black green, a shade under the old #0a1a10, laid as a slightly
     see-through box so the workshop shows faintly through every card. */
  --paper:#050906; --paper-2:#080f09; --tile:#07110b; --tile-rgb:7,17,11;
  --ink:#ece6d4; --ink-soft:#b1ae9a; --ink-faint:#8d917f;
  /* Brass (dull, greener gold) does the small hardware; bronze (reddish) the corner brackets and screw heads. */
  --brass:#b89a4a; --bronze:#8c6239;
  /* Clear glass (no blur): our own cards are a translucent tint of --tile; --glass-a rises when a player background is on. */
  --glass-a:.86; --glass-edge:rgba(217,180,90,.22); --glass-hi:rgba(255,255,255,.07);
  /* Workshop haze behind the page (feed/workshop-bg.js): light metal, brass, bronze, dark leather. */
  --gear-op:.12; --haze-light:#d8c48a; --haze-brass:#b89a4a; --haze-bronze:#8c6239; --haze-leather:#2a1a10;
  /* --crimson stays a RED for what must read as red (vote down, errors, "bad" marks, the danger
     fills); it is muted toward brick so it sits with the leather rather than shouting. */
  --crimson:#b4423a; --crimson-text:#e8857a;
  /* Leather: the accent the brand used red for. Fill carries ivory text (8.7:1); -text is the tan
     for small labels on paper/tile (6.9:1 on tile). */
  --leather:#6e4426; --leather-text:#d1a06f;
  --gold:#d9b45a; --gold-soft:rgba(217,180,90,.16);
  /* --gold-text: gold for SMALL text. Same as --gold at night; deeper in day, where plain gold is only 3.0:1 on sage. */
  --gold-text:#d9b45a;
  /* Worn gilding: a faint brushed gradient for gold FILLS (buttons, the headline bar, rules). Sheen halved 2026-10-22 (owner). */
  --gilt:linear-gradient(135deg,#bc9741 0%,#d9b45a 38%,#e4c672 50%,#d2ae52 64%,#bc9741 100%);
  --gilt-line:linear-gradient(90deg,rgba(217,180,90,.15),#d9b45a 35%,#e4c672 50%,#d9b45a 65%,rgba(217,180,90,.15));
  --leaf:#7fc97f; --leaf-text:#a5d9a5;
  --line:rgba(140,210,160,.14); --line-2:rgba(140,210,160,.07);
  --shadow:rgba(0,0,0,.7);
  --pop:#e2b14f; --pop-ink:#1b1510; --hard:#3a5a42;
  --display:"EB Garamond",Georgia,serif; --ui:"Inter",system-ui,sans-serif;
}
/* Day glass .9: measured worst case (card over the stacked haze) put ink-faint at 4.3:1 and gold-text at 4.2:1 at .78; .9 clears 4.5 on both. */
/* Measured 2026-10-22 (WCAG): ink on paper 12.4:1, ink-soft on tile 6.0:1 (4.6:1 on paper-2), crimson
   on tile 7.3:1, white on crimson 8.6:1, gold on tile 3.4:1 (large/decorative only, never small text). */
:root[data-theme="light"]{
  color-scheme:light;
  --paper:#d6e2d0; --paper-2:#c5d4be; --tile:#e6efe0;
  --ink:#172019; --ink-soft:#4e5c4f; --ink-faint:#566456;
  --crimson:#8a2a24; --crimson-text:#8a2a24;
  --leather:#5c3a21; --leather-text:#6b4423;
  --gold:#9a7a2a; --gold-soft:rgba(154,122,42,.16); --gold-text:#7a5e12;
  --gilt:linear-gradient(135deg,#94722a 0%,#a8863a 38%,#bfa050 50%,#a8863a 64%,#94722a 100%);
  --gilt-line:linear-gradient(90deg,rgba(154,122,42,.15),#9a7a2a 35%,#b2923a 50%,#9a7a2a 65%,rgba(154,122,42,.15));
  --brass:#8a7230; --bronze:#6e4a2a; --tile-rgb:230,239,224;
  --glass-a:.9; --glass-edge:rgba(110,74,42,.28); --glass-hi:rgba(255,255,255,.5);
  --gear-op:.11; --haze-light:#fff3c4; --haze-brass:#8a7230; --haze-bronze:#6e4a2a; --haze-leather:#8a6a4a;
  --leaf:#2f7a4a; --leaf-text:#276a40;
  --line:rgba(23,32,25,.18); --line-2:rgba(23,32,25,.08);
  --shadow:rgba(23,32,25,.16);
  --pop:#e2b14f; --pop-ink:#1b1510; --hard:#172019;
}
html{ background:var(--paper) }
/* A slow gradient down the page: a touch lighter and warmer at the head, the paper through the middle, a breath of green
   at the foot. Painted once with the page (no fixed attachment), so scrolling pays nothing. */
body{ background:var(--paper) linear-gradient(180deg, color-mix(in srgb, var(--paper) 88%, var(--haze-light)) 0%, var(--paper) 38%, color-mix(in srgb, var(--paper) 94%, var(--leaf)) 100%) no-repeat;
  position:relative; isolation:isolate }
/* The paper grain the pages paint in body::before, and the workshop layer, both sit at z-index -1 INSIDE the body's own
   stacking context, so content never needs a z-index to stay above them (a composited animated layer at z-index 0
   painted over the header on Android, 2026-10-22). Grain: a faint screen glow on the dark walls, not the old .6. */
body::before{ z-index:-1 }
:root:not([data-theme="light"]) body::before{ opacity:.3 }

/* WORKSHOP (feed/workshop-bg.js mounts .fb-workshop): a mostly solid page with a slow shifting haze of light metal, brass,
   bronze and dark leather, and faint gear outlines in two meshed pairs that turn with the scroll. Hidden whenever the
   player has picked a cosmetic background (#fbCosmeticBg carries a sheet), which has its own layer at the same depth. */
.fb-workshop{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; --u:min(1.1vw, 9px) }
/* body.fb-bg-on / .fb-bg-art are set by workshop-bg.js watching #fbCosmeticBg. Not :has(): a :has() on body is re-tested on every DOM change (check-repaint-cost). */
body.fb-bg-on .fb-workshop{ display:none }
.fb-workshop .haze{ position:absolute; inset:-20%; animation:fb-haze-drift 70s ease-in-out infinite alternate }
.fb-workshop .haze.two{ animation-duration:95s; animation-direction:alternate-reverse }
.fb-workshop .haze.one{ background:
  radial-gradient(42% 36% at 18% 22%, color-mix(in srgb, var(--haze-brass) 22%, transparent), transparent 70%),
  radial-gradient(36% 30% at 82% 30%, color-mix(in srgb, var(--haze-light) 13%, transparent), transparent 70%),
  radial-gradient(50% 40% at 70% 85%, color-mix(in srgb, var(--haze-leather) 65%, transparent), transparent 72%) }
.fb-workshop .haze.two{ background:
  radial-gradient(34% 30% at 60% 15%, color-mix(in srgb, var(--haze-bronze) 20%, transparent), transparent 70%),
  radial-gradient(44% 38% at 20% 80%, color-mix(in srgb, var(--haze-light) 11%, transparent), transparent 72%),
  radial-gradient(30% 26% at 90% 60%, color-mix(in srgb, var(--haze-brass) 17%, transparent), transparent 70%) }
@keyframes fb-haze-drift{ from{ transform:translate3d(-3%,-2%,0) scale(1) } to{ transform:translate3d(3%,2%,0) scale(1.06) } }
.fb-workshop svg{ position:absolute; opacity:var(--gear-op); will-change:transform }
/* Two meshed pairs, sized in --u so the rims stay touching at any width. */
.fb-workshop .gear-a{ width:calc(60 * var(--u)); right:calc(-14 * var(--u)); top:10vh; color:var(--bronze) }
.fb-workshop .gear-c{ width:calc(28 * var(--u)); right:calc(40 * var(--u)); top:calc(10vh + 38 * var(--u)); color:var(--gold) }
.fb-workshop .gear-b{ width:calc(34 * var(--u)); left:calc(-10 * var(--u)); top:46vh; color:var(--brass) }
.fb-workshop .gear-d{ width:calc(18 * var(--u)); left:calc(18 * var(--u)); top:calc(46vh - 9 * var(--u)); color:var(--brass) }
@media (prefers-reduced-motion: reduce){ .fb-workshop .haze{ animation:none } .fb-workshop svg{ transform:none !important } }

/* CLEAR GLASS on every feed card (owner 2026-10-22, second live look: "almost a black box with a slight transparency"):
   a near-black green tint, no blur, the workshop showing faintly through. A card type that paints its own background
   (ping, promo, the tinted dailies) keeps it. When a player background is on, the tint rises so text never fights it. */
.feed-card, .bsky-card{ background:rgba(var(--tile-rgb), var(--glass-a)); border-color:var(--glass-edge); /* Keep feed.css's hover easing (border, shadow, lift): a bare background-color transition here replaced it and made the hover snap. */
  transition:background-color .35s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease }
body.fb-bg-on{ --glass-a:.9 }
body.fb-bg-art{ --glass-a:.94 }

/* TYPE: reserved, literary, regal (owner call 2026-10-22). Same two faces as before (EB Garamond +
   Inter, self-hosted), used differently: Garamond capitals with wide tracking take over the small
   labels Inter used to shout in; headlines drop from semibold to medium so the words carry the
   weight. Specificity is kept low on purpose so a page can still override locally. */
/* Kicker as a specimen label: a small brass plate with a screw head at each end (the gold diamond becomes the left screw). */
.feed-type{ display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-size:11.5px; font-weight:600; letter-spacing:.18em; color:var(--leather-text);
  padding:3px 9px 2px; border:1px solid color-mix(in srgb, var(--brass) 55%, transparent); background:color-mix(in srgb, var(--brass) 12%, transparent); border-radius:2px }
.feed-type::before, .feed-type::after{ content:""; width:3px; height:3px; border-radius:50%; background:var(--bronze); flex:0 0 auto; letter-spacing:0 }
.feed-type:has(> .ki)::before{ content:"" }  /* feed.css sets content:none here at higher weight; restore the left screw so the plate is symmetric */
.feed-type{ max-width:100%; box-sizing:border-box; line-height:1.3 }
.feed-type .ki{ margin-right:0 }
/* Kicker colours that feed.css sets at higher specificity: gold and YouTube red were under 4.5:1 on a plate in Day (3.4) and Night (3.3). */
.feed-type.event, .feed-card.series-continue .feed-type{ color:var(--gold-text) }
.feed-type.yt{ color:var(--crimson-text) }
/* The Shorts strip header asked for display:block, which dropped the plate's screw heads; keep the plate shrink-wrapped. */
.shorts-strip h3 .feed-type{ display:inline-flex }
.shorts-strip .ss-all:hover, .shorts-strip .ss-all:focus-visible, .ss-clip:hover .ss-name, .ss-clip:focus-visible .ss-name{ color:var(--gold-text) }
.shorts-strip .ss-all:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px }
.home-link, .user-widget--out{ font-family:var(--display); font-size:14px; font-weight:500; letter-spacing:.14em;
  border-color:color-mix(in srgb, var(--gold) 45%, transparent) }
.home-link:hover{ background:var(--gilt); border-color:var(--gold); color:var(--pop-ink) }
.feed-card h3{ font-weight:500; font-size:22px }
.feed-card.compact h3{ font-size:18px }
.feed-card h3 a:hover{ color:var(--gold-text) }
.feed-meta a{ border-bottom-color:var(--gold) }
.feed-meta a:hover{ color:var(--gold-text) }
.intro h1{ font-weight:500; letter-spacing:-.01em }
/* ORNAMENT (owner ask 2026-10-22: Neo-Gothic / Victorian woodwork on the line work and boxes).
   All CSS, no requests, one tiny inline SVG mask: cheap to paint on a phone.
   Headline mark: three pointed arches (tracery) inked in gilt. */
.intro h1::before{ width:84px; height:18px; margin:0 0 14px; border-radius:0; background:var(--gilt);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 18' fill='none' stroke='black' stroke-width='1.6'><path d='M2 17V9Q2 2 14 1Q26 2 26 9V17M30 17V9Q30 2 42 1Q54 2 54 9V17M58 17V9Q58 2 70 1Q82 2 82 9V17M14 1V17M42 1V17M70 1V17'/><path d='M0 17h84' stroke-width='2'/></svg>") left/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 18' fill='none' stroke='black' stroke-width='1.6'><path d='M2 17V9Q2 2 14 1Q26 2 26 9V17M30 17V9Q30 2 42 1Q54 2 54 9V17M58 17V9Q58 2 70 1Q82 2 82 9V17M14 1V17M42 1V17M70 1V17'/><path d='M0 17h84' stroke-width='2'/></svg>") left/contain no-repeat }
.brand .sub{ color:var(--gold-text) }
/* MASTHEAD: the logo on an engraved brass nameplate with two bronze screw heads, inked gold; the header closes with a gilt rail. */
.brand{ position:relative; display:inline-flex; align-items:center; padding:10px 26px; border:1px solid var(--brass);
  background:linear-gradient(180deg, color-mix(in srgb, var(--brass) 14%, var(--tile)), var(--tile) 70%);
  box-shadow:inset 0 0 0 3px var(--tile), inset 0 0 0 4px color-mix(in srgb, var(--brass) 55%, transparent), 0 2px 0 color-mix(in srgb, var(--bronze) 60%, transparent) }
.brand::before, .brand::after{ content:""; position:absolute; top:50%; width:5px; height:5px; border-radius:50%; background:var(--bronze); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); transform:translateY(-50%) }
.brand::before{ left:9px } .brand::after{ right:9px }
.brand-logo{ background-color:var(--gold) }
header{ border-bottom:1px solid transparent; border-image:var(--gilt-line) 1 }
/* Section rule: the hand-inked stroke becomes a gilt line with a serif tick at each outer end, like a carved bracket. */
.rule{ color:var(--gold-text) }
.rule::before, .rule::after{ height:9px; -webkit-mask:none; mask:none; background:var(--gilt-line) center / 100% 1px no-repeat; opacity:.85 }
.rule::before{ border-left:2px solid var(--brass) }
.rule::after{ border-right:2px solid var(--brass) }
.rule span{ letter-spacing:.32em }
/* Nav as brass plaques: squared corners with a serif foot at each bottom corner. */
.home-link, .user-widget--out{ position:relative; border-radius:3px }
.home-link::before, .home-link::after{ content:""; position:absolute; bottom:-1px; width:5px; height:3px; border-bottom:1px solid var(--brass); pointer-events:none }
.home-link::before{ left:-3px; border-left:1px solid var(--brass) }
.home-link::after{ right:-3px; border-right:1px solid var(--brass) }
/* Cards: squared corners, a hairline, and carved corner brackets top-right and bottom-right (the left
   edge belongs to the rarity band). The brackets are absolutely placed so they take no grid cell. */
.feed-card, .bsky-card{ position:relative; border-radius:6px }
.feed-card::before, .feed-card::after, .bsky-card::before, .bsky-card::after{ content:""; position:absolute; width:10px; height:10px; pointer-events:none;
  border:0 solid var(--bronze) }
.feed-card::before, .bsky-card::before{ top:4px; right:4px; border-top-width:1px; border-right-width:1px }
.feed-card::after, .bsky-card::after{ bottom:4px; right:4px; border-bottom-width:1px; border-right-width:1px }
@media (hover:hover){
  .bsky-card:hover{ border-color:color-mix(in srgb, var(--gold) 50%, var(--line)); box-shadow:var(--band-sh) }
  /* A 1px nudge toward the 3px gilt offset: the old version's card lift, kept small so the see-through glass and brackets stay calm. */
  .feed-card:hover{ transform:translate(-1px,-1px); border-color:color-mix(in srgb, var(--gold) 50%, var(--line));
    box-shadow:var(--band-sh), 3px 3px 0 color-mix(in srgb, var(--gold) 28%, transparent) }
}
/* Vote rail: a leather tint rather than red. */
.feed-card:not(.compact) .vote, .bsky-card .bvote, .feed-card.rss .bvote{
  background:color-mix(in srgb, var(--leather) 18%, var(--paper-2));
  border-right-color:var(--line) }
.vote button.up[aria-pressed="true"], .bvote button.up[aria-pressed="true"], .vote button.up:hover, .bvote button.up:hover{ color:var(--leaf) }

/* Utility cards (ping, widget, promo, compact rows) stay plain: brackets on a one-line row read as clutter. */
.feed-card.compact::before, .feed-card.compact::after, .feed-card.ping::before, .feed-card.ping::after,
.feed-card.widget-card::before, .feed-card.widget-card::after{ display:none }
/* Lateral shelves drag with a mouse (feed/drag-scroll.js). While a drag is live, hover lifts and link hovers pause. */
.grid.arcade-shelf, .shorts-strip .ss-row{ cursor:grab }
.is-dragging{ cursor:grabbing !important; user-select:none; scroll-behavior:auto }
.is-dragging *{ pointer-events:none }
/* Nav row: every pill and the signed-in widget share one height and sit on one centre line (the /keys/ header had the
   widget riding high beside the plaques, owner screenshot 2026-10-22). The pending widget keeps the same height so the
   swap to the real one never shifts the row. */
.nav{ display:flex; align-items:center; flex-wrap:wrap }
.home-link, .user-widget, .user-widget--pending{ display:inline-flex; align-items:center; min-height:38px; box-sizing:border-box }
.user-widget--pending{ height:38px }
/* Touch: plaque nav keeps a 44px target (Garamond caps at 14px land near 38px). */
@media (pointer:coarse){ .home-link, .user-widget{ min-height:44px } .user-widget--pending{ height:44px } }
/* Shelf headings: the red underline and arrow become gold; the gold rule under the title is the one line of work here. */
.shelf-title a{ font-weight:500; border-bottom:2px solid var(--gold) }
.shelf-title a:hover, .shelf-title .arr2{ color:var(--gold-text) }
/* Footer: the plain hairline becomes the same gilt rule as the section dividers. */
footer{ border-top:1px solid transparent; border-image:var(--gilt-line) 1 }
footer a{ border-bottom-color:color-mix(in srgb, var(--gold) 70%, transparent) }
/* Links in the prose blocks and footer hovers read leather/gold, not brick: red is for errors and downvotes only. */
.home-about a{ color:var(--leather-text) }
.home-about a:hover, footer a:hover, footer .foot-hubs a:hover, footer .pref-src:hover, footer .social .more:hover, .lb-link:hover{ color:var(--gold-text) }
footer .foot-hubs a:hover{ border-bottom-color:var(--gold) }
/* Skeletons: a quiet green wash, not --ink-faint (which is body-text grey-green in day and was a heavy slab). Same selector weight as index.html's dark override; this file loads later. */
:root:not([data-theme="light"]) #feedMore:empty, :root:not([data-theme="light"]) .feed-skeleton .sk-head, :root:not([data-theme="light"]) .feed-skeleton .sk-card{ --ink-faint:#10261a }
:root[data-theme="light"] #feedMore:empty, :root[data-theme="light"] .feed-skeleton .sk-head, :root[data-theme="light"] .feed-skeleton .sk-card{ --ink-faint:#c5d4be }
/* Bluesky badge keeps the Bluesky blue on purpose (it names the source); light-mode value is 5.9:1 on tile. */
.brand:hover .brand-logo, .brand:focus-visible .brand-logo{ background-color:var(--gold-text) }
/* The arcade "Scroll" chip was the one brick-red pill on the page; red is reserved for errors and downvotes, so it becomes a gilt chip with dark ink (Day: deep gold with white, since Day's gilt is too dark for dark ink at 10px). */
.arcade-hint{ color:var(--pop-ink); background:var(--gilt) }
.arcade-hint:focus-visible{ outline-color:var(--ink) }
:root[data-theme="light"] .arcade-hint{ color:#fff; background:var(--gold-text) }

/* JUICE (owner 2026-10-22): small, one-shot, transform/opacity where it matters, nothing loops. Off under reduced motion. */
/* Nameplate: a gilt sweep across the plate on hover, one pass. */
.brand{ background:linear-gradient(100deg, var(--tile) 0%, color-mix(in srgb, var(--brass) 14%, var(--tile)) 42%, color-mix(in srgb, var(--gold) 34%, var(--tile)) 50%, color-mix(in srgb, var(--brass) 14%, var(--tile)) 58%, var(--tile) 100%);
  background-size:220% 100%; background-position:0 0; transition:background-position .7s ease, box-shadow .2s ease }
.brand:hover, .brand:focus-visible{ background-position:100% 0 }
/* Upvote lands with a leaf pop. */
@keyframes fb-vote-pop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.38) } 100%{ transform:scale(1) } }
.vote button.up[aria-pressed="true"], .bvote button.up[aria-pressed="true"]{ animation:fb-vote-pop .32s cubic-bezier(.2,.7,.2,1) }
/* Shorts ring swells a touch under the pointer. */
.ss-ring{ transition:transform .35s cubic-bezier(.2,.7,.2,1) }
.ss-clip:hover .ss-ring, .ss-clip:focus-visible .ss-ring{ transform:scale(1.07) }
/* Plaques press down a pixel and spring back. */
.home-link:active, .user-widget:active{ transform:translateY(1px) }
/* Gold focus rings wherever a keyboard can land on the dark cards. */
.home-link:focus-visible, .user-widget:focus-visible, .vote button:focus-visible, .bvote button:focus-visible, .ss-clip:focus-visible,
.feed-card a:focus-visible, .bsky-card a:focus-visible, .feed-card button:focus-visible, .bsky-card button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
@media (prefers-reduced-motion: reduce){
  .brand{ transition:none } .vote button.up[aria-pressed="true"], .bvote button.up[aria-pressed="true"]{ animation:none } .ss-ring{ transition:none } .ss-clip:hover .ss-ring{ transform:none }
}