/* v1 theme merge · Fable · 2026-10-31. One theme from round 2 (proto/v1/theme-r2: Fable = A, Argon = B, Astra = C), lead's recipe in briefs/v1/theme-merge.md.
   A: the palette and calm text tokens, the 3px top rule, the note tag / plaque.  B: "For the Horde / For the Alliance" on the stand bar,
   forge-iron and limestone frames, 3px row markers.  C: the switcher (review.html), the incised headings, the inset bevel, the pin reset.
   Cut: every tiled fill (C's timber/hide/stone wallpaper, A's grain and weave, B's slat gradient and radial washes), C's opaque slabs,
   A's dashed stitch outline and light city bands, B's dark-ink card button.  Panels are warm glass the map shows through (alpha .66 top / .71 bottom and cards, blur 20px; Nate 10-31: one notch down from .75, more later).
   Everything is gated by html[data-side], which theme.js sets from the picked race (URL race=); no race = the rc frame untouched. Cities stay behind the URL city= flag, no UI (later). Map, pins, labels, runes, badges and access chips are never themed. */

/* ======================= HORDE: charred timber glass, forge iron, worn red cloth ======================= */
html[data-side="horde"]{
 --th-pine-0:#150d09;--th-pine-1:#1c120c;--th-pine-2:#231710;--th-pine-3:#3b2718;--th-pine-4:#43301f;
 --th-glass:rgba(30,20,15,.66);--th-glass-2:rgba(22,14,10,.71);--th-card:rgba(30,20,15,.71);--th-deep:rgba(18,11,8,.92);--th-well:rgba(0,0,0,.36);
 --th-row:rgba(255,236,200,.05);--th-hover:rgba(255,236,200,.11);--th-row-edge:rgba(255,236,200,.13);
 --th-ink:#efe6d4;--th-cream:#fff6e0;--th-sand:#dcc6a8;--th-fog:#cbb69f;--th-heading:#f5dbad;--th-title-shadow:0 2px 0 #090604;
 --th-trim:#d2b08a;--th-metal:#e8cfa8;--th-edge:#5d5655;--th-line:rgba(210,176,138,.30);--th-strong:rgba(210,176,138,.58);
 --th-cloth:#950215;--th-shadow:#52010a;--th-light:#d00020;--th-sel:#950215;--th-acc:#950215;
 --th-card-top:#561018;--th-card-bot:#360a0e;--th-card-edge:rgba(216,139,108,.55);--th-tag:#e8a07a;
 --th-note-bg:rgba(74,50,32,.78);--th-note-edge:#6c6560;--th-meter:linear-gradient(90deg,#950215,#e07f4a);
 --th-polish:inset 0 1px 0 rgba(255,236,200,.14),inset 0 0 0 1px rgba(0,0,0,.28);
 --th-you-edge:#d88b6c;--th-you-after:#ffd8c4;--th-rule-style:solid;
}
/* the logo badge is Argon's (r2 B): dark timber behind the mark, no cloth fill (Nate 10-31: the red and blue squares were "too much") */
html[data-side="horde"] .logo-badge{background:linear-gradient(180deg,#2d1913,#190e0b);border-color:#8c6543;box-shadow:inset 0 0 0 1px rgba(239,216,181,.08),0 2px 6px rgba(0,0,0,.65);--mark-ink:#efd8b5;--mark-accent:#d00020}

/* ======================= ALLIANCE: harbour slate glass, dressed limestone, blue cloth, gilt ======================= */
html[data-side="alliance"]{
 --th-pine-0:#111419;--th-pine-1:#171a1f;--th-pine-2:#1e2228;--th-pine-3:#2c3139;--th-pine-4:#343a43;
 --th-glass:rgba(20,26,36,.66);--th-glass-2:rgba(15,19,27,.71);--th-card:rgba(20,26,36,.71);--th-deep:rgba(12,15,21,.92);--th-well:rgba(0,0,0,.36);
 --th-row:rgba(255,245,220,.05);--th-hover:rgba(255,245,220,.11);--th-row-edge:rgba(255,245,220,.13);
 --th-ink:#eeeadf;--th-cream:#fbf7ec;--th-sand:#cfcabb;--th-fog:#afb7c3;--th-heading:#fff1d3;--th-title-shadow:0 1px 0 #070c17;
 --th-trim:#d8b964;--th-metal:#ead596;--th-edge:#b2aba0;--th-line:rgba(212,180,90,.30);--th-strong:rgba(212,180,90,.60);
 --th-cloth:#0d44a5;--th-shadow:#002060;--th-light:#2a63c9;--th-sel:#ead596;--th-acc:#0d44a5;
 --th-card-top:#1f3a66;--th-card-bot:#142544;--th-card-edge:rgba(234,213,150,.55);--th-tag:#9fc6f2;
 --th-note-bg:rgba(43,48,56,.78);--th-note-edge:rgba(212,180,90,.45);--th-meter:linear-gradient(90deg,#3b546f,#ead596);
 --th-polish:inset 0 1px 0 rgba(255,245,211,.24),inset 0 0 0 1px rgba(0,0,0,.22);
 --th-you-edge:#f7e2a4;--th-you-after:#f7e2a4;--th-rule-style:solid;
}
html[data-side="alliance"] .logo-badge{background:linear-gradient(180deg,#1b3150,#0f1d31);border-color:#e7b960;box-shadow:inset 0 0 0 1px rgba(247,240,211,.16),0 2px 6px rgba(0,0,0,.6);--mark-ink:#f7e2a4;--mark-accent:#5294ff}

/* ======================= cities: accents on the side's base (top rule, row markers, dividers, trim). Never a new surface. ======================= */
html[data-side][data-city="orgrimmar"]{--th-acc:#9c4819;--th-trim:#d4b08a;--th-metal:#efd8b5;--th-line:rgba(198,158,107,.40);--th-rule-style:dashed}
html[data-side][data-city="thunderbluff"]{--th-acc:#c2995f;--th-trim:#dcc09a;--th-metal:#f0dcb8;--th-edge:#6c5a44}
html[data-side][data-city="undercity"]{--th-acc:#5f9b3d;--th-trim:#c9b58c;--th-metal:#dfcf9a;--th-edge:#58544a;--th-fog:#cbbfa6}
html[data-side][data-city="stormwind"]{--th-acc:#29619c;--th-edge:#e7e3de;--th-line:rgba(231,227,222,.30);--th-fog:#bfc6d0}
html[data-side][data-city="ironforge"]{--th-acc:#b99341;--th-trim:#dcb46a;--th-metal:#f0d08a;--th-edge:#8f6630;--th-line:rgba(185,147,65,.34)}
html[data-side][data-city="darnassus"]{--th-acc:#aabfca;--th-trim:#c8d4da;--th-metal:#e4ecf0;--th-edge:#7c6a8a;--th-line:rgba(184,192,200,.32)}
html[data-side][data-city="zephras"]{--th-acc:#c9b96a;--th-trim:#d6c9a8;--th-metal:#e9dcb0;--th-edge:#a69f90;--th-line:rgba(177,170,153,.34)}

/* ======================= where the side reaches: frame tokens re-pointed on the chrome surfaces only (Astra's scope) ======================= */
html[data-side] :is(.strip,.trail,.cartouche.rail,.answer,.drawer,.tcard,.plist,.zoom,.zstrip,.site-foot,.water-key,.reopen,.dtab){
 --pine-0:var(--th-pine-0);--pine-1:var(--th-pine-1);--pine-2:var(--th-pine-2);--pine-3:var(--th-pine-3);--pine-4:var(--th-pine-4);
 --panel:var(--th-glass);--panel-2:var(--th-glass-2);--inset:var(--th-row);--inset-2:var(--th-hover);--well:var(--th-well);
 --ivory:var(--th-ink);--cream:var(--th-cream);--sand:var(--th-sand);--fog:var(--th-fog);--dim:var(--th-fog);
 --brass:var(--th-trim);--brass-2:var(--th-metal);--brass-3:var(--th-edge);--brass-line:var(--th-line);--brass-strong:var(--th-strong);
 --hud-bg:var(--th-glass);--hud-edge:1px solid var(--th-line);--card-bg:var(--th-card);--card-edge:1px solid var(--th-edge);
 --merlot:var(--th-card-top);--merlot-2:var(--th-card-bot);--merlot-accent:var(--th-tag);--alliance:var(--th-card-top);--alliance-2:var(--th-card-bot);--alliance-accent:var(--th-tag);
 color:var(--th-ink);
}
/* pins, runes, legend symbols and badges keep the app's own colours inside any themed surface */
html[data-side] :is(.rune,.lg-pin,.water-key .bdg,.water-key-types,.badge){--brass-2:#e5cb90;--brass-3:#9d8453;--ivory:#ede6d3}
html[data-side] .water-key-types svg{color:#ede6d3}

/* ---- panels: warm glass the map shows through; the side's cloth (or the city's accent) as a 3px top rule; iron / limestone frame; one inset bevel ---- */
html[data-side] .trail,
html[data-side] .mapfirst .cartouche.rail,
html[data-side] .app.mapfirst #drawer-you,
html[data-side] .app.mapfirst #drawer-layers,
html[data-side] .app.mapfirst .answer{
 background:linear-gradient(var(--th-acc),var(--th-acc)) 0 0/100% 3px no-repeat,linear-gradient(180deg,var(--th-glass),var(--th-glass-2));
 -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
 border-color:var(--th-edge);outline:0;
 box-shadow:0 16px 40px rgba(0,0,0,.62),var(--th-polish)}
html[data-side] .app.mapfirst #drawer-you{border-top:0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html[data-side] .trail,html[data-side] .mapfirst .cartouche.rail,html[data-side] .app.mapfirst #drawer-you,html[data-side] .app.mapfirst #drawer-layers,html[data-side] .app.mapfirst .answer{background-color:var(--th-deep)}}

/* ---- the strip: mast on the side's timber / slate, a breath of cloth under the logo; the stand bar carries the cloth rule and the allegiance line (B) ---- */
html[data-side] .app.mapfirst .strip .mast{
 background:radial-gradient(600px 54px at 12% 0%,color-mix(in srgb,var(--th-cloth) 22%,transparent),transparent 70%),linear-gradient(180deg,var(--th-pine-1),var(--th-pine-0));
 border-bottom-color:var(--th-line)}
html[data-side] .app.mapfirst .strip .stand-bar{
 background:linear-gradient(90deg,color-mix(in srgb,var(--th-shadow) 55%,transparent),var(--th-pine-2) 38%,var(--th-pine-2));
 border-bottom:2px solid var(--th-cloth);
 box-shadow:var(--th-polish),0 4px 16px rgba(0,0,0,.5)}
html[data-side] .app.mapfirst .sbtn.you .you-l{
 background:linear-gradient(180deg,var(--th-cloth),var(--th-shadow));border:1px solid var(--th-you-edge);color:#fff5e4;
 box-shadow:inset 0 1px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.5)}
html[data-side="horde"] .app.mapfirst .sbtn.you .you-l::after{content:" · For the Horde";color:var(--th-you-after);font-weight:700}
html[data-side="alliance"] .app.mapfirst .sbtn.you .you-l::after{content:" · For the Alliance";color:var(--th-you-after);font-weight:700}
html[data-side] .app.mapfirst .strip .search input[type=search]{background:var(--th-well);border-color:var(--th-line);color:var(--th-ink)}
html[data-side] .app.mapfirst .strip .results{background:var(--th-card);border-color:var(--th-line);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
html[data-side] .app.mapfirst input::placeholder{color:var(--th-fog);opacity:1}
/* the one colour: the active tab, the current chart chip, the selected row, the current cast, the meter, the card's foot */
html[data-side] .paths a.chip[aria-current=page]{color:var(--th-cream);background:linear-gradient(180deg,rgba(255,240,220,.03),rgba(255,240,220,.10));box-shadow:inset 0 -3px var(--th-sel)}
html[data-side][data-maplevel="03"] .zs-chips a[aria-current=page]{background:rgba(255,240,220,.10);box-shadow:inset 0 -2px var(--th-sel)}
html[data-side] .zs-chips a:hover,html[data-side] .zstrip #tiers button.on{background:rgba(255,240,220,.08)}
html[data-side] .back-chip{background:var(--th-cloth);color:#fff3e6}

/* ---- incised headings (C): title text with physical presence, no stripe behind it ---- */
html[data-side] .app.mapfirst :is(.brand,.rail-title,.t-title,.t-at,.answer h2,.tcard h3){color:var(--th-heading);text-shadow:var(--th-title-shadow)}
html[data-side] .app.mapfirst .strip h1.brand small{color:var(--th-trim)}
/* ---- frame rules carry the city: the pane header, the card title, the casts list, the cast steps ---- */
html[data-side] .rail-head{border-bottom:1px var(--th-rule-style) color-mix(in srgb,var(--th-acc) 45%,var(--th-line))}
html[data-side] .trail .t-title,html[data-side] .trail .t-band{border-bottom-style:var(--th-rule-style)}
html[data-side] .trail .dots{border-top-style:var(--th-rule-style)}
html[data-side] .trail .t-skill{border-top-color:var(--th-line)}

/* ---- rows and reading wells: clean, see-through, no grain. Selection is a 3px bar; in a city every row wears a thin bar in the city's colour (B) ---- */
html[data-side] .app.mapfirst :is(.rail-row,.trail .dot,#layers .layer){background:var(--th-row);border-color:var(--th-row-edge);box-shadow:inset 0 1px 0 rgba(255,236,200,.05)}
html[data-side] .app.mapfirst :is(.rail-row:hover,.rail-row.hot,.trail .dot:hover,#layers .layer:hover){background:var(--th-hover);border-color:var(--th-strong)}
html[data-side] .app.mapfirst :is(.rail-row.sel,.trail .dot.cur){background:var(--th-hover);border-color:var(--th-strong);box-shadow:inset 3px 0 0 var(--th-sel)}
html[data-side][data-city] .app.mapfirst :is(.rail-row,.trail .dot){box-shadow:inset 3px 0 0 color-mix(in srgb,var(--th-acc) 70%,transparent)}
html[data-side][data-city] .app.mapfirst :is(.rail-row.sel,.trail .dot.cur){box-shadow:inset 3px 0 0 var(--th-metal)}
html[data-side] .app.mapfirst :is(.rail-row.sel,.trail .dot.cur) b{color:var(--th-cream)}
html[data-side] .trail .dot i{background:var(--th-pine-4);border-color:var(--th-metal);color:var(--th-cream)}
html[data-side] .rail-row .rr-fish span{background:var(--th-well);border-color:var(--th-line)}
html[data-side] .rail-count,html[data-side] .trail .t-band b{background:rgba(255,240,220,.08);border-color:var(--th-strong);color:var(--th-metal)}
html[data-side] .app.mapfirst #race button[aria-checked=true],html[data-side] .app.mapfirst #drawer-you .seg button[aria-checked=true],html[data-side] .app.mapfirst #drawer-you .chip[aria-pressed=true]{background:rgba(255,240,220,.10);border-color:var(--th-metal)}
html[data-side] .app.mapfirst #drawer-you .btn{background:var(--th-pine-4);border-color:var(--th-edge)}
html[data-side] .app.mapfirst #start-list .pick.later{opacity:1}
html[data-side] .app.mapfirst #start-list .pick.later span{color:var(--th-fog)}
html[data-side] .app.mapfirst #layers .layer:has(input:not(:checked)){opacity:1}
html[data-side] .app.mapfirst :is(.t-foot,.ghost,.t-skip){opacity:1}
html[data-side] .trail .t-enter{background:rgba(255,240,220,.07);border-color:var(--th-strong)}
html[data-side] .trail .t-enter:hover{background:rgba(255,240,220,.14)}
html[data-side] .app.mapfirst .zoom button:hover{background:var(--th-hover)}
html[data-side] .app.mapfirst .zoom #layers-btn[aria-expanded=true]{background:rgba(255,240,220,.16)}

/* ---- the player card: cloth block in the side's shade (muted, not a flag), tag in the side's accent ---- */
html[data-side] .trail .t-top::before,html[data-side] .app[data-faction=alliance] .trail .t-top::before{background:linear-gradient(180deg,var(--th-card-top),var(--th-card-bot));border-color:var(--th-card-edge);box-shadow:inset 0 1px rgba(255,255,255,.10),0 6px 16px rgba(0,0,0,.45)}
html[data-side] .trail .t-tag,html[data-side] .app[data-faction=alliance] .trail .t-tag{color:var(--th-tag)}
html[data-side] .trail .t-skill .sk-meter i{background:var(--th-meter)}
html[data-side] .trail .t-foot{background:var(--th-deep);border-left:3px solid var(--th-sel);border-top-color:var(--th-line)}

/* ---- the note box (a card's Classic line, the guide's note, the drawer's landing note): a hide tag on Horde, a carved plaque on Alliance (A) ---- */
html[data-side] .card-baseline,html[data-side] .tcard .t-note:not(.t-foot),html[data-side] .answer .note,html[data-side] #drawer-you .you:not([hidden]){
 display:block;margin:10px 0 8px;padding:7px 10px;background:var(--th-note-bg);border:1px solid var(--th-note-edge);color:var(--th-ink);font-size:11.5px;line-height:1.4}
html[data-side="horde"] .card-baseline,html[data-side="horde"] .tcard .t-note:not(.t-foot),html[data-side="horde"] .answer .note,html[data-side="horde"] #drawer-you .you:not([hidden]){border-left:3px solid var(--th-cloth)}
html[data-side="alliance"] .card-baseline,html[data-side="alliance"] .tcard .t-note:not(.t-foot),html[data-side="alliance"] .answer .note,html[data-side="alliance"] #drawer-you .you:not([hidden]){border-top:3px solid var(--th-cloth);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
html[data-side] .trail .card-baseline{display:none}   /* the frame says the Classic line once, in the masthead */
html[data-side] .app.mapfirst :is(.mast-note,.c-base){color:var(--th-sand);border-color:var(--th-line)}
/* the skill legend inside Layers keeps its place; its rule and caps take the side */
html[data-side] .app.mapfirst #drawer-layers .water-key{border-top:1px var(--th-rule-style) color-mix(in srgb,var(--th-acc) 45%,var(--th-line));color:var(--th-ink)}
html[data-side] .water-key,html[data-side] .legend{background:var(--th-note-bg);color:var(--th-ink);border-color:var(--th-note-edge)}
html[data-side] .app.mapfirst #drawer-layers .water-key{background:none}

/* ---- map cards and hover lists: the side's glass with a cloth top rule; what is inside stays the app's ---- */
html[data-side] .tcard,html[data-side] .tcard.water-card{background:linear-gradient(var(--th-acc),var(--th-acc)) 0 0/100% 3px no-repeat,var(--th-card);border:1px solid var(--th-edge);box-shadow:0 12px 30px rgba(0,0,0,.6),var(--th-polish)}
html[data-side] .plist{background:var(--th-card);border:1px solid var(--th-edge);box-shadow:0 12px 30px rgba(0,0,0,.6),var(--th-polish)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[data-side] .tcard,html[data-side] .tcard.water-card,html[data-side] .plist{background-color:var(--th-deep)}}

/* ---- the hud: zoom stack, chart strip, pane tabs, footer ---- */
html[data-side] .app.mapfirst :is(.zoom,.zstrip,.reopen,.dtab,.rail-x){border-color:var(--th-edge)}
/* the pane handles (Waters, Your leg, tuck) keep the frame's pine teal on every side (Nate 11-01: "I liked that it was blue") */
html[data-side] .app.mapfirst :is(.reopen,.dtab,.rail-x){background:#152723;color:#e5cb90;border-color:#9d8453;backdrop-filter:none}   /* literal frame values: the theme remaps --pine-2 on these */
html[data-side] .site-foot{background:var(--th-pine-0);border-top-color:var(--th-line)}