/* Valor Tools — Slate & Fire (Oct 14, 2026). Valor Web's look (Fire & Slate UI Style Guide Rev. 11, Code/Valor Web/src/kit)
   brought to Valor Tools as a lighter version, because Tools is mostly dense data read on phones, often during an op:
   - Taken from Valor Web: the neutral charcoal palette and satin antique gold, Cinzel for titles with Source Sans 3 for the
     text and small labels (Valor Web's Oct 8 legibility choice), the stone-and-gold-rim buttons, adjoining tab tiles, the
     major gold rail, and a warm firelight glow from the selected tab.
   - Slate texture only on the frame: the page behind everything (faint), the top bar and the bottom tab bar. Data cards and
     tables get flat dark fills with a gold edge (no filigree), so numbers stay easy to read.
   - Admin keeps the plain charcoal page (no texture or glow).
   - The light theme (Limestone, light.css) keeps its look; only the fonts change there.
   Loaded last on every page (after nav.css and the page's own CSS). The dark-theme rules are scoped to
   html:not([data-theme=light]) so they also win over the page CSS without !important. Textures and Source Sans 3 come from
   Valor Web (public/art/ui, public/fonts); copy them again if Valor Web's change. Html.classic-fonts (Account › Display ›
   Classic fonts, assets/theme.js) puts EB Garamond and the Cinzel labels back. */

/* Source Sans 3 (OFL, fonts/SourceSans3-OFL.txt) */
@font-face{font-family:"Source Sans 3";src:url(fonts/SourceSans3-Latin.woff2) format("woff2");font-style:normal;font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";src:url(fonts/SourceSans3-Latin-Italic.woff2) format("woff2");font-style:italic;font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";src:url(fonts/SourceSans3-LatinExt.woff2) format("woff2");font-style:normal;font-weight:200 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";src:url(fonts/SourceSans3-LatinExt-Italic.woff2) format("woff2");font-style:italic;font-weight:200 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ================================================================ type (both themes) ================================ */
:root{
  --text:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --caps:var(--text);      /* small capitals labels: eyebrows, column heads, stat labels (were Cinzel) */
  --caps-ls:.13em;
  --serif-text:"EB Garamond","Baskerville","Hoefler Text",Georgia,serif;
}
html.classic-fonts{--text:var(--serif-text);--caps:var(--title);--caps-ls:.18em}
body{font-size:16px;line-height:1.42}
html.classic-fonts body{font-size:16.5px;line-height:1.45}
em,i,.it{font-synthesis:none}

/* small labels: Source Sans 3 capitals instead of 10-px Cinzel */
.eyebrow,.lbl,.crumb .eyebrow,.menu-pop .mgroup,.gotopop .mgroup,.gorow .where,.trail .trow .k,.vpop .foot2 .lbl,
.stepbtn small,.pill.wpill .wlbl,.tagline{font-family:var(--caps);letter-spacing:var(--caps-ls)}
.eyebrow{font-size:11.5px;font-weight:700}
.lbl{font-size:11px;font-weight:700}

/* buttons: Source Sans 3 labels (Valor Web Rev. 11 §5) */
.btn{font:600 15px/1 var(--text);letter-spacing:.02em;text-transform:none;padding:10px 16px;min-height:40px}
.btn.big{font-size:16.5px;padding:12px 22px;min-height:46px}
.mini{font:600 13.5px/1 var(--text);letter-spacing:.01em;text-transform:none;padding:6px 10px}
.seg button{font:600 13.5px/1 var(--text);letter-spacing:.01em;text-transform:none}
html.classic-fonts .btn{font:600 12px/1 var(--title);letter-spacing:.12em;text-transform:uppercase}
html.classic-fonts .btn.big{font-size:13.5px}
html.classic-fonts .mini{font:600 10.5px/1 var(--title);letter-spacing:.1em;text-transform:uppercase}
html.classic-fonts .seg button{font:600 10.5px/1 var(--title);letter-spacing:.14em;text-transform:uppercase}

/* the tool tabs: text tabs in Source Sans 3 (Valor Web's nav) */
.mast .tabs a{font:600 15.5px/1 var(--text);letter-spacing:.01em;text-transform:none}
.subnav a,.subnav button{font-weight:600}
html.classic-fonts .mast .tabs a{font:600 13.5px/1 var(--title);letter-spacing:.1em;text-transform:uppercase}

/* ================================================================ dark: Slate & Fire ================================= */
html:not([data-theme=light]){
  color-scheme:dark;
  /* neutral charcoal stone (Rev. 11 §3); warmth belongs to the selected control */
  --page:#141414; --card:#1A1B1B; --row:#161717; --navfill:#121312;
  --bg:#141414; --panel:#1A1B1B; --raised:#222323; --well:#111212; --hover:#232423;
  --g-dim:#5E492D; --g-frame:#8C6A35; --g-inner:#3A2E1E; --g-body:#AE843F; --g-text:#D8BC7A; --g-hi:#EDD69D;
  --gold:#AE843F; --gold-ink:#D8BC7A; --gold-hi:#EDD69D; --gold-dim:rgba(174,132,63,.15); --gold-line:rgba(174,132,63,.5); --gold-glow:rgba(174,132,63,.35);
  --cream-t:#F7EEDD; --cream:#F0E6D2; --ink:#F7EEDD; --ink2:#F0E6D2;
  --grey:#B9B1A3; --grey2:#7F786D; --mut:#B9B1A3; --mut2:#7F786D;
  --line:#2A251E; --line2:#3B3022;
  --field:#0C0B09; --chip:#1E1E1D; --chip-ink:#F0E6D2;
  --ctx-bg:#161616; --tab:#F0E6D2;
  /* Valor Web's materials (tokens.css) */
  --slate:#141414;
  --slate-ground:url(art/slate/slate-ground.webp);
  --slate-quiet:url(art/slate/slate-quiet.webp);
  --slate-fascia:url(art/slate/slate-fascia.webp);
  --slate-grain:512px;
  --fascia-base:#25201B;
  --metal-quiet:#5E492D; --metal:#AE843F; --metal-hi:#DFC887; --title-gold:#D8BC7A; --ivory:#F0E6D2;
  --ember-light:#B4743A;
  --face-solid:linear-gradient(180deg,rgba(28,29,29,.97),rgba(19,20,20,.97));
  --face-card:linear-gradient(180deg,rgba(30,31,31,.95),rgba(21,22,22,.95));
  --face-tile:linear-gradient(180deg,rgba(32,33,33,.62),rgba(10,10,10,.76));
  --stone-face:linear-gradient(180deg,rgba(44,43,41,.36),rgba(11,10,8,.52));
  --warm-face:linear-gradient(180deg,rgba(128,74,36,.90) 0%,rgba(90,52,26,.90) 36%,rgba(36,21,11,.94) 100%);
  --warm-face-2:linear-gradient(180deg,rgba(100,60,30,.82) 0%,rgba(66,40,21,.84) 40%,rgba(24,16,10,.90) 100%);
  --metal-edge:linear-gradient(160deg,#CDB57C 0%,#AE843F 26%,#6E5530 60%,#8C6A35 84%,#4A3A24 100%);
  --gold-face:linear-gradient(180deg,rgba(255,238,196,.20) 0%,rgba(255,238,196,0) 40%),
    repeating-linear-gradient(90deg,rgba(255,240,205,.03) 0 1px,rgba(0,0,0,.02) 1px 3px),
    linear-gradient(180deg,#C4A672 0%,#B39253 38%,#9E7B44 72%,#87683A 100%);
  --gold-face-shadow:inset 0 1px 0 rgba(255,238,196,.32),inset 0 -1px 0 rgba(60,40,15,.5),0 0 0 1px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5);
  /* the major rail (Valor Web --rail, Quests v8 profile) */
  --rail-h:7px;
  --rail-cap-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M0 6 L11 10.6 L0 15.2 Z' fill='%230C0906'/%3E%3Cpath d='M0 6 L11 10.6 L0 15.2' fill='none' stroke='%23B08E54' stroke-width='1' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --rail-cap-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M18 6 L7 10.6 L18 15.2 Z' fill='%230C0906'/%3E%3Cpath d='M18 6 L7 10.6 L18 15.2' fill='none' stroke='%23B08E54' stroke-width='1' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --rail-face:linear-gradient(180deg,#050302 0%,#050302 4.5%,#D9C58C 6.5%,#D8B866 11%,#AE7E2C 17%,#9C6A1C 25%,#A87428 31%,#7A511E 36%,#3E270E 41%,#4E3618 45%,#5C421D 55%,#66491F 62%,#5A411E 66%,#1C1208 70%,#170D03 75%,#8A5F1C 79%,#9E6A1E 85%,#3A2008 91%,#070300 97%);
  --rail-sheen:linear-gradient(180deg,transparent 4.5%,rgba(255,244,200,.42) 7%,rgba(255,236,180,.16) 13%,transparent 22%);
  --rail:var(--rail-cap-l) left top/auto 100% no-repeat,var(--rail-cap-r) right top/auto 100% no-repeat,var(--rail-sheen),var(--rail-face);
  --rule-thin:linear-gradient(90deg,rgba(174,132,63,.18),rgba(174,132,63,.50) 6%,rgba(174,132,63,.50) 94%,rgba(174,132,63,.18));
}

/* ---------- the page: the slate behind everything, faint, and a low warm glow from the tab bar ----------
   One fixed layer (no background-attachment:fixed: slow on iOS). The html element carries the colour so this layer can sit
   under the body's content. */
html:not([data-theme=light]){background:var(--slate)}
html:not([data-theme=light]) body{background:transparent}
html:not([data-theme=light]) body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,20,.30),rgba(20,20,20,.42)),var(--slate-ground) 0 0/var(--slate-grain) var(--slate-grain) repeat,var(--slate)}
html:not([data-theme=light]) body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:46vh;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(150,96,48,.13),rgba(120,78,40,.05) 45%,transparent 80%)}
@media (min-width:761px){ html:not([data-theme=light]) body::after{display:none} }   /* on a computer the light comes from the tab at the top */
/* Admin: the plain charcoal page */
html:not([data-theme=light]) body:has(#atabs)::before{background:var(--slate)}
html:not([data-theme=light]) body:has(#atabs)::after{display:none}
/* framed tabs in the app (Sim, Guild, Dashboard): the same stone inside the frame */
html.embed:not([data-theme=light]) body{background:transparent}
html:not([data-theme=light]) .toprule{display:none}
html:not([data-theme=light]) ::selection{background:var(--g-body);color:#140E06}
html:not([data-theme=light]) ::-webkit-scrollbar-track{background:#0E0E0E}
html:not([data-theme=light]) ::-webkit-scrollbar-thumb{background:#3A2E1E;border-color:#0E0E0E}

/* ---------- the top bar: the fascia stone, closed by the rail ---------- */
html:not([data-theme=light]) .mast{padding-bottom:var(--rail-h)}
html:not([data-theme=light]) .mast::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,238,214,.035),rgba(255,238,214,0) 45%,rgba(0,0,0,.16)),var(--slate-fascia) 0 0/var(--slate-grain) var(--slate-grain) repeat,var(--fascia-base)}
html:not([data-theme=light]) .mast::after{height:var(--rail-h);background:var(--rail)}
html:not([data-theme=light]) .mast{isolation:isolate}
@media (min-height:420px){
  html.pinhead:not([data-theme=light]) .mast::before{background:linear-gradient(180deg,rgba(255,238,214,.035),rgba(255,238,214,0) 45%,rgba(0,0,0,.16)),var(--slate-fascia) 0 0/var(--slate-grain) var(--slate-grain) repeat,var(--fascia-base)}
}
html:not([data-theme=light]) .ptl b,html:not([data-theme=light]) .crumb h1{color:var(--title-gold);text-shadow:0 2px 2px rgba(0,0,0,.85)}
html:not([data-theme=light]) .wordmark{background:linear-gradient(180deg,#F1E2B4 0%,#D8BC7A 40%,#A47B3B 70%,#C9A45C 100%);-webkit-background-clip:text;background-clip:text}
html:not([data-theme=light]) .ptl span{color:var(--grey)}

/* medallions and the World crest: neutral stone inside the satin gold ring */
html:not([data-theme=light]) .medal{background:radial-gradient(circle at 40% 35%,#242423 0%,#0E0E0D 72%) padding-box,linear-gradient(145deg,#DFC887 0%,#AE843F 45%,#5E4425 100%) border-box}
html:not([data-theme=light]) .wcrest{background:linear-gradient(180deg,#1C1C1B,#0D0D0C);border-color:var(--metal-quiet);box-shadow:inset 0 1px 0 rgba(223,200,135,.10)}
html:not([data-theme=light]) .pill{background:linear-gradient(180deg,#1A1918,#0B0C0C);border-color:var(--metal-quiet)}

/* ---------- the tool tabs on a computer or tablet: adjoining tiles standing on the rail ---------- */
@media (min-width:761px){
  html:not([data-theme=light]) .mast .tabs{gap:3px}
  html:not([data-theme=light]) .mast .tabs a{height:48px;padding:0 18px;border:1px solid;border-bottom:0;border-color:#8C6A35 #6A5030 #4E3B22;border-radius:2px 2px 0 0;color:var(--ivory);
    background:var(--face-tile);box-shadow:inset 0 1px 0 rgba(223,200,135,.13),inset 0 -8px 12px rgba(0,0,0,.35);text-shadow:0 1px 2px rgba(0,0,0,.85)}
  html:not([data-theme=light]) .mast .tabs a:hover{color:var(--cream-t);background:linear-gradient(180deg,rgba(48,46,42,.7),rgba(14,13,12,.8))}
  html:not([data-theme=light]) .mast .tabs a.on{color:var(--ivory);background:var(--warm-face);border-color:#C9A35A #A07A40 #7A5D33;
    box-shadow:inset 0 1px 0 rgba(255,226,170,.36),inset 0 0 18px rgba(150,96,48,.18)}
  html:not([data-theme=light]) .mast .tabs a.on svg{color:var(--g-hi)}
  html:not([data-theme=light]) .mast .tabs a.on::before{display:none}
  /* the firelight: the selected tab is the source; it warms the rail under it and the top of the bar below */
  html:not([data-theme=light]) .mast .tabs a.on::after{content:"";position:absolute;width:auto;left:-40%;right:-40%;top:auto;bottom:-60px;height:68px;background:radial-gradient(ellipse 50% 60% at 50% 8%,rgba(190,124,64,.34),rgba(150,96,48,.10) 55%,transparent 100%);
    mix-blend-mode:screen;pointer-events:none;z-index:7}
}

/* ---------- the context bar (the page's name and its sections) ---------- */
html:not([data-theme=light]) .ctx{background:linear-gradient(180deg,rgba(150,96,48,.06),rgba(0,0,0,0) 60%),var(--slate-quiet) 0 0/var(--slate-grain) var(--slate-grain) repeat,#151515;border-bottom:0;padding-bottom:var(--rail-h);box-shadow:0 8px 18px rgba(0,0,0,.4)}
html:not([data-theme=light]) .ctx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--rail-h);background:var(--rail);pointer-events:none}
html:not([data-theme=light]) .subnav a,html:not([data-theme=light]) .subnav button{border-radius:2px;color:var(--ivory)}
html:not([data-theme=light]) .subnav a:hover,html:not([data-theme=light]) .subnav button:hover{border-color:var(--metal-quiet)}
html:not([data-theme=light]) .subnav .on{color:var(--ivory)!important;background:var(--warm-face-2);border-color:#B8945A #8C6A35 #5E492D!important;
  box-shadow:inset 0 1px 0 rgba(255,226,170,.30),inset 0 0 14px rgba(150,96,48,.16)}
html:not([data-theme=light]) .subnav .on svg{color:var(--g-hi)}
html:not([data-theme=light]) .goto{background:var(--field);border-color:var(--metal-quiet);border-radius:3px}
html:not([data-theme=light]) .psteps{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.4)),var(--slate-quiet) 0 0/var(--slate-grain) var(--slate-grain) repeat,#151515;border-bottom:1px solid var(--g-inner)}
html:not([data-theme=light]) .psteps .on{background:var(--warm-face-2);border-color:#B8945A;color:var(--ivory)}

/* ---------- phones (≤760 px): sections as adjoining tiles, the tab bar at the bottom ---------- */
@media (max-width:760px){
  html:not([data-theme=light]) .ctx .subnav{gap:3px}
  html:not([data-theme=light]) .ctx .subnav a,html:not([data-theme=light]) .ctx .subnav button{border-radius:2px;border-color:#6E5530 #4A3820 #2E2214;background:var(--face-tile);
    box-shadow:inset 0 1px 0 rgba(223,200,135,.14),inset 0 -6px 10px rgba(0,0,0,.30);text-shadow:0 1px 2px rgba(0,0,0,.8)}
  html:not([data-theme=light]) .ctx .subnav .on{background:var(--warm-face)}
  /* the bottom tab bar: dark quiet slate under the rail; tiles like Valor Web's nav, keeping Tools' icons */
  html:not([data-theme=light]) .mast .tabs{padding-top:calc(var(--rail-h) + 4px);gap:3px;border-top:0;
    background:linear-gradient(180deg,rgba(8,8,8,.38),rgba(5,5,4,.58)),var(--slate-quiet) 0 0/var(--slate-grain) var(--slate-grain) repeat,var(--slate);box-shadow:0 -6px 18px rgba(0,0,0,.6)}
  html:not([data-theme=light]) .mast .tabs::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--rail-h);background:var(--rail);pointer-events:none;z-index:2}
  html:not([data-theme=light]) .mast .tabs a{gap:4px;margin-bottom:4px;border:1px solid;border-color:#8C6A35 #6A5030 #4E3B22;border-radius:1px;color:var(--ivory);
    background:var(--face-tile)!important;box-shadow:inset 0 1px 0 rgba(223,200,135,.13),inset 0 0 0 1px rgba(0,0,0,.4),inset 0 -8px 12px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.7);
    font:600 12px/1 var(--text);letter-spacing:.01em;text-transform:none;text-shadow:0 1px 2px rgba(0,0,0,.85)}
  html.classic-fonts:not([data-theme=light]) .mast .tabs a{font:600 10px/1 var(--title);letter-spacing:.06em;text-transform:uppercase}
  html:not([data-theme=light]) .mast .tabs a svg{padding:0;width:22px;height:22px;color:var(--g-text);background:none!important;box-shadow:none!important}
  html:not([data-theme=light]) .mast .tabs a.on{background:var(--warm-face)!important;border-color:#C9A35A #A07A40 #7A5D33;
    box-shadow:inset 0 1px 0 rgba(255,226,170,.36),inset 0 0 0 1px rgba(0,0,0,.35),inset 0 0 18px rgba(150,96,48,.18),0 1px 3px rgba(0,0,0,.7)}
  html:not([data-theme=light]) .mast .tabs a.on svg{color:var(--g-hi)}
  html:not([data-theme=light]) .mast .tabs a.on::before{display:none}
  /* the firelight: a warm pool on the stone around the selected tile, spilling a little up over the rail */
  html:not([data-theme=light]) .mast .tabs a.on::after{content:"";display:block;position:absolute;left:50%;right:auto;width:260px;margin-left:-130px;top:-78px;bottom:-14px;height:auto;z-index:-1;pointer-events:none;mix-blend-mode:screen;
    background:radial-gradient(ellipse 44% 48% at 50% 68%,rgba(206,134,68,.62),rgba(166,106,52,.24) 46%,rgba(140,90,44,.07) 74%,transparent 100%)}
  html:not([data-theme=light]) .mast .tabs .n{border-color:rgba(0,0,0,.6);box-shadow:0 0 0 2px rgba(10,9,8,.85)}
  html:not([data-theme=light]) .psteps button{border-radius:2px}
}
@media (max-width:400px){ html:not([data-theme=light]) .mast .tabs a{font-size:11px;letter-spacing:0} }
@media (max-width:350px){ html:not([data-theme=light]) .mast .tabs a{font-size:10px} }

/* ---------- cards: flat dark faces with a gold edge (no filigree, no inner hairline) ---------- */
html:not([data-theme=light]) .frame{border:1px solid #5E492D;border-top-color:#8C6A35;border-radius:3px;background:var(--face-card);
  box-shadow:inset 0 1px 0 rgba(223,200,135,.10),0 2px 10px rgba(0,0,0,.45)}
html:not([data-theme=light]) .frame::before,html:not([data-theme=light]) .frame::after{display:none}
html:not([data-theme=light]) :is(.vpop,.menu-pop,.gotopop,.trail,.mcard,.mbox).frame{background:var(--face-solid);border-color:#6E5530;border-top-color:#AE843F;box-shadow:inset 0 1px 0 rgba(223,200,135,.16),0 18px 40px rgba(0,0,0,.7)}
html:not([data-theme=light]) .sechead h2,html:not([data-theme=light]) .sechead h3,html:not([data-theme=light]) .mhead h2,html:not([data-theme=light]) .mhead h3{color:var(--title-gold)}
html:not([data-theme=light]) .sechead .rule{background:linear-gradient(90deg,rgba(174,132,63,.6),transparent)}
html:not([data-theme=light]) .painted::after{box-shadow:inset 0 0 0 1px rgba(174,132,63,.45),inset 0 0 40px rgba(0,0,0,.55)}
html:not([data-theme=light]) .modal{background:rgba(6,5,4,.72)}
html:not([data-theme=light]) .toast{background:var(--face-solid);border-color:var(--g-body)}
html:not([data-theme=light]) .eyebrow{color:var(--g-text)}
html:not([data-theme=light]) .lbl{color:var(--grey)}

/* ---------- buttons: stone faces in satin gold rims (Valor Web .btn) ---------- */
html:not([data-theme=light]) .btn{color:var(--ivory);border:1.2px solid transparent;border-radius:3px;text-shadow:0 1px 1px rgba(0,0,0,.7);
  background:var(--stone-face) padding-box,var(--slate-quiet) 0 0/var(--slate-grain) var(--slate-grain) padding-box,var(--metal-edge) border-box;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.09),inset 0 -1px 2px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.45)}
html:not([data-theme=light]) .btn:hover{color:var(--cream-t);background:linear-gradient(180deg,rgba(70,64,56,.42),rgba(20,18,15,.52)) padding-box,var(--slate-quiet) 0 0/var(--slate-grain) var(--slate-grain) padding-box,var(--metal-edge) border-box}
html:not([data-theme=light]) .btn:active{transform:translateY(.5px);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.6)}
html:not([data-theme=light]) .btn.primary{color:var(--cream-t);font-weight:700;background:linear-gradient(180deg,#B84C37 0%,#7A2A20 50%,#501614 100%);border:1.4px solid var(--g-body);
  box-shadow:inset 0 0 0 2px rgba(216,138,106,.28),0 0 0 1px rgba(0,0,0,.7),0 3px 10px rgba(80,22,20,.4)}
html:not([data-theme=light]) .btn.primary:hover{background:linear-gradient(180deg,#C8583F 0%,#8A3024 50%,#5A1916 100%);border-color:var(--g-hi)}
html:not([data-theme=light]) .btn.goldb{color:#22170A;font-weight:700;border:1.2px solid #6A5030;text-shadow:0 1px 0 rgba(255,236,190,.18);background:var(--gold-face);box-shadow:var(--gold-face-shadow),0 0 10px rgba(150,98,52,.12)}
html:not([data-theme=light]) .btn.goldb:hover{filter:brightness(1.06)}
html:not([data-theme=light]) .btn:disabled,html:not([data-theme=light]) .btn[disabled]{opacity:.5;filter:saturate(.35);box-shadow:none}
html:not([data-theme=light]) .mini{color:var(--title-gold);border-color:var(--metal-quiet);background:linear-gradient(180deg,#191817,#0E0E0D);box-shadow:inset 0 1px 0 rgba(223,200,135,.07)}
html:not([data-theme=light]) .mini:hover{color:var(--g-hi);border-color:var(--g-body)}
html:not([data-theme=light]) .xbtn:hover,html:not([data-theme=light]) .x:hover{background:rgba(174,132,63,.12)}

/* ---------- segmented controls: adjoining tiles; the selected one is the warm brown face ---------- */
html:not([data-theme=light]) .seg{border:1px solid #4A3820;border-radius:2px;background:rgba(7,7,6,.5)}
html:not([data-theme=light]) .seg button{color:var(--ivory);background:var(--face-tile);text-shadow:0 1px 2px rgba(0,0,0,.8)}
html:not([data-theme=light]) .seg button+button{border-left:1px solid #6E5530}
html:not([data-theme=light]) .seg button:hover{color:var(--cream-t)}
html:not([data-theme=light]) .seg button.on{color:var(--ivory);background:var(--warm-face);box-shadow:inset 0 1px 0 rgba(255,226,170,.30),inset 0 0 14px rgba(150,96,48,.16)}

/* ---------- inputs ---------- */
html:not([data-theme=light]) :is(input.t,input.n,input.tin,select.s,textarea,.tin){background-color:var(--field);border-color:var(--metal-quiet);color:var(--cream-t)}
html:not([data-theme=light]) :is(input,select,textarea):focus{border-color:var(--g-body);box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 0 0 2px rgba(174,132,63,.2)}
html:not([data-theme=light]) input::placeholder,html:not([data-theme=light]) textarea::placeholder{color:#6F695F}

/* ---------- popovers and sheets ---------- */
html:not([data-theme=light]) .wrow.on,html:not([data-theme=light]) .gorow.on{background:linear-gradient(90deg,rgba(128,74,36,.45),rgba(60,36,18,.2))}
html:not([data-theme=light]) .wrow:hover,html:not([data-theme=light]) .menu-pop a:hover,html:not([data-theme=light]) .menu-pop button:hover{background:rgba(174,132,63,.10)}
html:not([data-theme=light]) .menu-pop .seg2 button.on{background:var(--warm-face-2);color:var(--ivory)}
html:not([data-theme=light]) .grab{background:var(--metal-quiet)}

/* ---------- the Planner's step rail ---------- */
html:not([data-theme=light]) .step.on{background:linear-gradient(90deg,rgba(128,74,36,.45),rgba(60,36,18,.12));box-shadow:inset 0 0 0 1px #6E5530}
html:not([data-theme=light]) .step .num{background:var(--field)}
html:not([data-theme=light]) .step .t{color:var(--ivory)}
html:not([data-theme=light]) .step.on .t{color:var(--g-hi)}
html:not([data-theme=light]) .stepbtn.fwd{background:var(--warm-face-2);color:var(--ivory);border-color:#B8945A}

/* ---------- the footer ---------- */
html:not([data-theme=light]) .vfoot a{color:var(--grey)}
html:not([data-theme=light]) .vfoot a:hover{color:var(--g-text)}
@media (max-width:400px){ html.classic-fonts:not([data-theme=light]) .mast .tabs a{font-size:8.5px;letter-spacing:.02em} }