/* =====================================================================
   The Lantern Society - shared base stylesheet (tls-base.css)
   Canonical design tokens + common components for every page.
   Link it once in the page <head> (after the Google Fonts link):
       <link rel="stylesheet" href="assets/tls-base.css">
   Then put ONLY page-specific rules in the page's own <style>.
   This file doubles as the design-token reference. No em-dashes anywhere.
   ===================================================================== */

:root{
  /* ---- core palette ---- */
  --ink:#241a10;         /* darkest brown: text on light, app base */
  --ink2:#3d2c18;        /* secondary brown text on light */
  --bg:#241a10;          /* backdrop base colour (behind the parchment image) */
  --paper:#d8c4a0;       /* parchment */
  --paper2:#c9b187;
  --cream:#ecdcbb;       /* default light text on the dark backdrop */
  --gold:#ecd6a3;        /* LEGIBLE gold for subtitles/labels ON DARK.
                            Use this, not the old #b89352 which is too dim on the backdrop. */
  --brass:#9a6b2f;
  --brass-lt:#c8923f;
  --panel-edge:#6b4a22;  /* panel / card border */
  --green:#5fd36a;
  --red:#e0524b;
  --blue:#5aa9e6;
  --yellow:#e6c34a;
}

/* ---- reset ---- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;-webkit-text-size-adjust:100%;overscroll-behavior:none}

/* ---- iOS home-indicator "chin" fix (default for every player page) ----
   A short, non-scrolling page is sized by iOS to the SMALL viewport, so the fixed backdrop
   stops above the home-indicator strip and that strip shows the dark base colour (the "chin"
   bar). A page that CAN scroll is sized to the FULL screen, so the backdrop paints right
   through the chin. We force a single pixel of scrollability here: tall pages already exceed
   this and are unaffected; short ones (e.g. Standing Orders) gain the 1px and lose the bar.
   overscroll-behavior:none (above) stops the rubber-band bounce that pixel would allow.
   Suppressed on the staff Hall shell, which manages its own full-height desktop layout. */
body:not(.has-staff-shell){min-height:calc(100dvh + 1px)}

/* ---- body + the ONE fixed backdrop (never scrolls, on every page) ----
   Suppressed inside the staff Hall shell (body.has-staff-shell), which supplies its
   own wide backdrop. Player pages have no such class, so the backdrop applies normally. */
body{
  background:var(--bg);
  color:var(--cream);
  font-family:'IM Fell DW Pica',Georgia,serif;
}
body:not(.has-staff-shell)::before{
  /* Pinned to ALL FOUR edges (inset:0) rather than a height unit. As a real fixed box it
     paints the parchment edge-to-edge INCLUDING the iOS bottom safe-area inset under the
     home indicator. A height of 100vh/100lvh, or putting the image on <html>, leaves that
     bottom inset showing only the base colour -- that was the dark "brown bar" on iOS. */
  content:"";position:fixed;inset:0;z-index:-1;
  background:var(--bg) url('bg_raw.png?v=2') center/cover no-repeat;
}

/* ---- type system ----
   Display / titles:  IM Fell Great Primer SC
   Caps labels/buttons/subtitles:  Cinzel
   Body prose:  IM Fell DW Pica (set on body above) */
.title,h1.title,.topbar h2{font-family:'IM Fell Great Primer SC',Georgia,serif}
.btn,.lbl,.chip,.subtitle,.sub,.field label{font-family:'Cinzel',Georgia,serif;letter-spacing:.3px}

/* ---- page header (title + subtitle) ---- */
/* THE TITLE STANDARD (Keeper's ruling, 2026-07-01): Society pages speak Great Primer,
   32px, from this rule; pages override only color/shadow for their background.
   The ONE deliberate exception is the Bestiary (gallery.html), which uses the
   UnifrakturCook blackletter of the in-app instrument screens (Radar/Settings):
   instrument screens speak blackletter, Society pages speak Great Primer.
   Do not "fix" that difference. */
.head{text-align:center;margin-bottom:6px}
.head h1{font-family:'IM Fell Great Primer SC',Georgia,serif;font-weight:400;font-size:32px;margin:0;
  color:#f3e4c2;text-shadow:0 2px 6px #000}
.head .sub{font-family:'Cinzel',Georgia,serif;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);margin-top:2px;text-shadow:0 1px 4px rgba(0,0,0,.85)}

/* ---- buttons (legible cream-on-brass) ---- */
.btn{
  font-family:'Cinzel',Georgia,serif;font-size:15px;font-weight:bold;letter-spacing:.3px;
  color:#f5ead2;text-shadow:0 1px 1px rgba(0,0,0,.5);
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));
  border:2px solid #5e3f17;border-radius:10px;padding:9px 14px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 4px rgba(0,0,0,.3);
}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:rgba(255,250,235,.15);color:var(--ink);text-shadow:none}
.btn.sm{padding:6px 10px;font-size:13px}

/* ---- panel / card (dark parchment well; readable light text inside) ---- */
.panel{
  background:radial-gradient(130% 100% at 50% -8%,#3b2a17,#1a1108 74%);
  border:1px solid var(--panel-edge);border-radius:14px;padding:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}

/* ---- chip (small dark pill, cream text) ---- */
.chip{font-family:'Cinzel',Georgia,serif;font-size:12px;color:var(--cream);
  background:rgba(20,14,8,.66);border:1px solid rgba(200,160,90,.6);border-radius:9px;padding:5px 9px}

/* ---- the lantern back button (top-left) ---- */
.backbtn{position:fixed;top:max(14px,env(safe-area-inset-top));left:16px;z-index:40;
  height:44px;width:auto;cursor:pointer;
  filter:drop-shadow(0 0 6px rgba(255,186,86,.65)) drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.backbtn:active{transform:scale(.92)}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;
  background:rgba(20,12,6,.94);color:#f3e3c2;border:2px solid var(--brass-lt);border-radius:12px;
  padding:12px 18px;font-weight:bold;text-align:center;display:none;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.toast.show{display:block}
