/* ==========================================================================
   Kinara — Tibia : NOTICE BOARD SKIN
   --------------------------------------------------------------------------
   Loaded AFTER site.css and overrides it visually only: every layout rule,
   density override and page-specific class in site.css still applies, so
   reverting the look is one <link> away (see site_head() in common.php).

   The idea: the page is a tavern wall of dark planking; the content column is
   a framed notice board; every panel is a sheet of parchment tacked to it.

   Textures come from tools/theme/gen_board_assets.py (seamless, tileable):
     board/wood-wall.jpg  the wall            board/paper.jpg      panels
     board/wood-rail.jpg  frames + sidebar    board/paper-dark.jpg table heads
     board/pin.png        brass tack          board/tape.png       tape strip
   ========================================================================== */

:root{
  /* ---- ink & paper ------------------------------------------------------ */
  /* ⭐ Kept close to BLACK on purpose (owner, 2026-07-29: "make brown text more
     black — all across the website everywhere"). --ink-2 is what site.css paints
     most body copy with (.lead, .intro-steps, anything on var(--muted)), so a
     brown here browns the whole site. Keep the sheet-scope copy of this ramp in
     the CONTRAST PASS section identical to these four values. */
  --ink:#241505;            /* body text on parchment      */
  --ink-2:#2b1c09;          /* secondary / captions — a hair off --ink, NOT brown */
  --ink-3:#43331f;          /* faint                       */
  --ink-head:#301803;       /* headings, quill-dark        */
  --rust:#6f2f0d;           /* links, accents              */
  --rust-2:#8a4014;
  --wax:#7e1e18;            /* seals, drafts, danger       */
  --leaf:#1b5423;           /* "done" green, readable on paper */
  --amber:#7a4a08;

  /* ---- wood ------------------------------------------------------------- */
  --wood-dark:#20160e;
  --wood:#3a2718;
  --wood-lit:#6b4a2c;
  --wood-line:rgba(24,15,7,.75);

  /* ---- remapped site.css tokens (everything inherits these) ------------- */
  --bg:#18100a;
  --bg2:#1d140c;
  --panel:transparent;          /* the paper image is drawn per-panel */
  --panel-solid:#e3cea3;
  --line:rgba(96,66,36,.55);
  --line-soft:rgba(96,66,36,.30);
  --violet:#8a5a2b;            /* accent hue is now aged brass/rust  */
  --violet-2:#7a4a1c;
  --violet-glow:rgba(120,74,28,.35);
  --gold:#5c3407;
  --gold-2:#42200a;
  --gold-3:#33180a;
  --text:var(--ink);
  --muted:var(--ink-2);
  --muted-2:var(--ink-3);
  --err:#8e2b22;
  --ok:var(--leaf);

  --serif:"Cinzel","Trajan Pro","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --prose:Georgia,"Palatino Linotype","Book Antiqua","Times New Roman",serif;

  --paper:url("board/paper.jpg");
  --paper-dark:url("board/paper-dark.jpg");
  --wood-wall:url("board/wood-wall.jpg");
  --wood-rail:url("board/wood-rail.jpg");
  /* cross-grain tile for the menu buttons — a different PATTERN from the
     board they sit on, not just a different brightness. */
  --wood-slat:url("board/wood-slat.jpg");

  /* ============================ ITEM-BONUS PALETTE ============================
     ⭐⛔ ONE COLOUR PER DAMAGE TYPE, AND THIS IS THE ONLY PLACE THE VALUES LIVE
     (owner, 2026-09-05). Every surface that prints an item bonus reads these —
     equipment.php's Element / Atk / Resist columns, the hover item card's
     Resistance + Bonus rows (wikilib.php, shown on 8 pages), items.php's Special
     cell and market.php's listing note. ⛔ Never re-type one of these hexes in a
     page <style>: that is exactly how the Resist column ended up wearing the
     DARK-THEME colours at 1.03:1 on parchment for the whole of its existence —
     board.css darkened `.it-elem`/`.it-atke` for paper and the newer `.it-res`
     was simply never added to the list.

     ⛔ THESE ARE NOT TASTE, THEY ARE A CONTRAST SETTING, exactly like the
     parchment tiles' brightness. Each one is >=4.5:1 (WCAG AA for 11px bold)
     against the DARKEST 1% of paper.jpg after the table's own row tints, which
     is the strictest surface a chip lands on (a hovered even row). Measured, not
     eyeballed: tools/webdata/check_bonus_colours.py recomputes it from the real
     JPEG textures on every run and fails on any drift. If you regenerate
     paper.jpg / paper-dark.jpg, re-run it.
     ⛔ They also hold >=20 CIE76 dE from each other so the chips are still
     telling the reader something when several sit in one cell ("5% phys 6% ice").
     The tightest pairs are fire/melee 21.8, energy/magic 23.0, death/phys 24.5 —
     do not nudge a hue without re-running the gate.

     ⚠️ A VULNERABILITY KEEPS ITS ELEMENT'S COLOUR (owner: "fire is always
     orange, no matter if its protection or vulnerability"). The minus sign and
     the dotted underline are what mark it — see `.it-res.it-vuln` below.
     ⚠️ This palette is the WEBSITE's vocabulary and it deliberately differs from
     the engine's damage-number colours (src/game.cpp getCombatColor: death is
     DARKRED, energy is the cyan-ish index 65, ice the paler 143). Those are
     limited to Tibia's 216-colour palette on a black game floor; these have to
     read as ink on paper. docs/item-bonus-colours.md records both. */
  --el-fire:#7a3405;      /* burnt orange  */
  /* ⚠️ LIGHT BLUE (azure), NOT TEAL — owner, 2026-09-05, second pass: "make ice light blue,
     not green". It shipped for one afternoon as #04505f, hue 190°, which is cyan-teal and reads
     green-ish next to a green. This is hue 204°, the DARKENED form of the light blue you would
     name (deep-sky / dodger). ⛔ Do not lighten it toward that blue: measured on this paper,
     `lightblue` is 0.80:1, `skyblue` 0.91, `deepskyblue` 1.11, `dodgerblue` 1.70, `steelblue`
     2.16 -- the whole named family is unusable here, and `lightblue` is actually LIGHTER than the
     paper's dark patches. The hue is what carries the identity; the value belongs to the parchment.
     ⭐ It is also better separated than the teal was -- 36.7 dE from its nearest neighbour where
     the teal sat 22.9 from slate grey -- so ice/phys is no longer a tight pair at all. */
  --el-ice:#004d80;       /* dark azure — also `drown`, the other water type */
  --el-earth:#14571c;     /* forest green  */
  --el-energy:#26379c;    /* royal blue    */
  --el-death:#17120e;     /* near-black    */
  --el-holy:#5f4800;      /* dark gold     */
  --el-magic:#6b2091;     /* violet — also the `elemental` fold, which is the
                             same fact for four types instead of six */
  --el-phys:#4a4744;      /* slate grey — the mitigation stat, deliberately the
                             one NEUTRAL entry so it never reads as an element */
  /* the three damage CLASSES a bonus can raise. ⛔ Aliases on purpose: the owner
     named archery green and spell power purple, which are earth's and magic's
     greens/violets — one hue per meaning, not one hue per label. */
  --sk-melee:#8f1010;               /* deep red — melee/sword/axe/club/fist */
  --sk-archery:var(--el-earth);
  --sk-spell:var(--el-magic);
}

/* -------------------------------------------------------------- the wall */
body{ font-family:var(--prose); color:var(--ink); background:var(--wood-dark); }

body::before{                                   /* planking, full height */
  top:0 !important;
  background:var(--wood-wall) top center repeat !important;
  background-size:512px 512px !important;
  opacity:1 !important;
}
body::after{                                    /* torchlight + edge falloff */
  background:
    radial-gradient(1100px 620px at 50% -6%, rgba(255,196,110,.16), transparent 68%),
    radial-gradient(900px 900px at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(10,6,3,.42), rgba(10,6,3,.20) 30%, rgba(10,6,3,.55)) !important;
}

a{ color:var(--rust); }
a:hover{ color:var(--rust-2); text-decoration:underline; text-underline-offset:2px; }
h1,h2,h3{ font-family:var(--serif); color:var(--ink-head); }

/* --------------------------------------------------- the brand, in the sidebar
   ⛔⛔ THE TOP BANNER (.hero-band / .hero-band-art / .hero-band-brand / .hero-beta)
   WAS DELETED IN THE KINARA REBRAND (2026-08-21). The board now opens straight onto
   the page's own markup and the brand lives at the TOP OF THE SIDEBAR instead.
   Do not resurrect those four rules: the markup that used them is gone from
   common.php, so they would style nothing while reading as live layout. */

/* The wordmark. `.side-brand` / `.side-logo` are declared in site.css (they are
   the pre-board PWI theme's own sidebar-brand rules, dormant until now); these
   override the two things that theme gets wrong on timber. */
.side-brand{
  position:relative;                                   /* the BETA plate's containing block */
  border-bottom:1px solid rgba(150,110,64,.30) !important;
  padding:2px 2px 8px !important; margin-bottom:4px !important;
}
.side-logo{
  /* ⛔ site.css glows this VIOLET (rgba(168,85,247,.4)) -- that is the PWI base
     theme, and on the wood board it reads as a bruise around the gold. Replaced
     with the same doubled black drop-shadow the deleted banner logo carried, so
     the wordmark keeps its lift against the timber. */
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.95)) drop-shadow(0 0 18px rgba(0,0,0,.6)) !important;
  max-width:none !important; width:100% !important; margin:0 auto 2px !important;
}

/* The BETA plate — a wax stamp under the wordmark, on every page.
   ⛔ It paints its OWN fill, so its colours are pinned LITERALS, never tokens: it
   sits on the sidebar's dark timber, i.e. on no known parchment surface, and a
   token would be light-on-light the moment this block is reused. Cream on wax-red
   measures 8.19:1.  Solid fill for the same reason — an rgba() plate would take
   the colour of the wood grain behind it.
   ⛔⛔ IT MUST BE SELECTED AS `.side-brand .side-beta`, NOT `.side-beta`. board.css
   used to carry `.side-brand span{ color:#c8a273 }` for the dormant theme's tagline
   span; that selector is (0,1,1) and would OUT-SPECIFY a bare `.side-beta` (0,1,0),
   quietly repainting the plate tan-on-red. The tagline rule is deleted and this one
   is scoped so the collision cannot come back. */
.side-brand .side-beta{
  /* ⭐ TOP-RIGHT CORNER OF THE LOGO since 2026-08-21 (owner: "put it just on the right-top
     corner of the logo instead"). It sat centred UNDER the wordmark before that.
     ⛔ `.side-brand` must stay `position:relative` -- it is this plate's containing block.
     ⛔ pointer-events:none so the stamp never swallows the click through to index.php: the
     whole brand block is one <a>, and the plate now sits ON TOP of it rather than beside it.
     ⭐ The logo's top-right is the emptiest part of the artwork (the gem/rosette is centred
     and the wordmark sits lower), so the plate covers no glyph. */
  position:absolute; top:-3px; right:-4px; z-index:3; pointer-events:none;
  font-family:var(--serif); font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; line-height:1;
  color:#f7e6c6; background:#7e1e18;
  padding:3px 7px 3px 9px;            /* +2px left: letter-spacing pads the right */
  border:1px solid #4b0f0b; border-radius:2px;
  transform:rotate(-2.5deg);
  box-shadow:0 2px 7px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,222,170,.22);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}

/* The event budget plate: a board screwed under the wordmark, like the menu sections below it.
   Its card opens on hover / keyboard focus. */
.side-budget{
  position:relative; z-index:6; display:flex; align-items:center; gap:9px;
  margin:2px 0 8px; padding:9px 12px 8px 9px; border-radius:3px;
  text-decoration:none !important;
  background:
    radial-gradient(circle at 5px 5px, #e2c184 0 1.6px, #5c3f16 2.1px, transparent 2.8px) no-repeat left top,
    radial-gradient(circle at calc(100% - 5px) 5px, #e2c184 0 1.6px, #5c3f16 2.1px, transparent 2.8px) no-repeat right top,
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.46)),
    var(--wood-rail) center/300px 300px repeat, var(--wood);
  border:1px solid rgba(12,7,2,.9);
  box-shadow:0 5px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,222,170,.17),
    inset 0 -7px 14px rgba(0,0,0,.34), inset 0 0 0 1px rgba(226,193,132,.16);
  transition:filter .12s ease;
}
.side-budget:hover,.side-budget:focus-visible{ filter:brightness(1.12) }
.side-budget-coin{
  flex:none; width:32px; height:32px; image-rendering:pixelated;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.85));
}
.side-budget-text{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.side-budget-label{
  font-family:var(--serif); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:#f0d3a4; text-shadow:0 1px 2px rgba(0,0,0,.9);
}
.side-budget-value{
  font-family:var(--serif); font-size:18px; font-weight:700; line-height:1.1; letter-spacing:.03em;
  color:#f3cf7a; white-space:nowrap;
  background:linear-gradient(180deg, #fff1c4 0%, #f3cf7a 45%, #c98f34 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.95)) drop-shadow(0 0 6px rgba(0,0,0,.6));
}
.side-budget-tip{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
  padding:9px 11px; text-align:left; letter-spacing:0;
  font-family:var(--prose); font-size:12.5px; line-height:1.45; font-weight:400;
  color:#241505; background:var(--paper) center/512px 512px repeat, #ead6ad;
  border:1px solid rgba(96,66,36,.7); border-radius:3px; box-shadow:0 8px 18px rgba(0,0,0,.65);
}
.side-budget-tip::before{
  content:""; position:absolute; top:-6px; left:22px; width:10px; height:10px; transform:rotate(45deg);
  background:#ead6ad; border-left:1px solid rgba(96,66,36,.7); border-top:1px solid rgba(96,66,36,.7);
}
.side-budget:hover .side-budget-tip,.side-budget:focus-visible .side-budget-tip{ display:block }

/* --------------------------------------------------------- the board frame
   .main becomes the board: wooden rails around a dark backing panel that the
   parchment sheets are tacked to. */
/* Menu and board both start flush at the top of the page. */
.layout{ padding-top:8px !important; }
.side{ top:8px !important; max-height:calc(100vh - 16px) !important; }
/* The frame: solid timber, drawn as the element's own background + padding.
   (A sliced border-image lands on random light patches of the texture and reads
   as pale trim, not as a rail.) */
.main{
  position:relative; padding:8px;
  background:var(--wood-rail) center/300px 300px repeat, #3a2718;
  border:1px solid rgba(16,9,3,.9); border-radius:5px;
  box-shadow:
    0 26px 60px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,222,170,.14),
    inset 0 -10px 22px rgba(0,0,0,.45);
}
.main::before{                       /* corner screws, one per rail end */
  content:""; position:absolute; inset:5px; pointer-events:none; border-radius:3px;
  background:
    radial-gradient(circle at 4px 4px, #e2c184 0 2px, #5c3f16 2.6px, transparent 3.4px) no-repeat left top,
    radial-gradient(circle at calc(100% - 4px) 4px, #e2c184 0 2px, #5c3f16 2.6px, transparent 3.4px) no-repeat right top,
    radial-gradient(circle at 4px calc(100% - 4px), #e2c184 0 2px, #5c3f16 2.6px, transparent 3.4px) no-repeat left bottom,
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #e2c184 0 2px, #5c3f16 2.6px, transparent 3.4px) no-repeat right bottom;
}
/* The backing the sheets are pinned to: the wall, sunk into the frame. */
.board-in{
  position:relative; padding:10px 12px 12px; border-radius:2px;
  background:
    linear-gradient(180deg, rgba(28,18,9,.92), rgba(20,13,6,.95)),
    var(--wood-wall) center/512px 512px repeat;
  box-shadow:
    inset 0 0 0 1px rgba(14,8,3,.9),
    inset 0 16px 30px rgba(0,0,0,.60),
    inset 0 -8px 20px rgba(0,0,0,.45);
}
.main-foot{
  border-top:1px solid rgba(120,86,48,.35); color:#a68a63;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.main-foot a{ color:#c69a5e }

/* ------------------------------------------------------------- parchment
   Every sheet: paper texture, aged edge, soft cast shadow. */
.panel,.card,.table-wrap,.fp-content,.notice,.modal .card{
  background:var(--paper) center top/512px 512px repeat, #e3cea3 !important;
  color:var(--ink);
  border:1px solid rgba(120,90,52,.55) !important;
  border-radius:3px !important;
  backdrop-filter:none !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.45),
    inset 0 0 44px rgba(150,110,60,.20),
    inset 0 0 0 1px rgba(255,248,224,.30) !important;
}
.panel,.card,.table-wrap,.notice{ position:relative }
/* A sheet laid ON a sheet gets the dirtier paper, so nesting reads as depth
   instead of one flat expanse of beige. */
.panel .panel,.panel .table-wrap,.notice .table-wrap{
  background:var(--paper-dark) center top/512px 512px repeat, #cdb587 !important;
}
.panel .table-wrap,.notice .table-wrap{
  box-shadow:
    0 2px 5px rgba(0,0,0,.22),
    inset 0 0 44px rgba(150,110,60,.20),
    inset 0 0 0 1px rgba(255,248,224,.30) !important;
}
/* An item brick is the smallest sheet on the board (geometry: site.css .vg-item). Same
   dirtier paper, a real border, a lit top edge and a contact shadow — owner, 2026-09-10:
   *"item bricks don't stick out on the background"* — and it lifts on hover like a vocation
   tile, *"same effect as vocation bricks"*, 2px because a chip is a third of a tile's height
   and 2.5 there reads as a jump. */
.vg-item{
  background:var(--paper-dark) center top/512px 512px repeat, #cdb587;
  border-color:var(--line);
  box-shadow:0 2px 4px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,248,224,.30);
  transition:transform .15s ease, box-shadow .15s ease }
.vg-item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,248,224,.30) }
@media (prefers-reduced-motion:reduce){
  .vg-item{ transition:none }
  .vg-item:hover{ transform:none }
}
/* aged, slightly darkened edge on every sheet */
.panel::after,.card::after,.notice::after,.table-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:3px;
  box-shadow:inset 0 0 26px rgba(92,62,28,.30), inset 0 0 4px rgba(92,62,28,.25);
}
.card::before{ box-shadow:none !important }

/* ------------------------------------------------------------------ type */
.h-title{
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:var(--ink-head) !important;
  color:var(--ink-head) !important; text-shadow:0 1px 0 rgba(255,250,232,.55);
}
.rule{
  height:2px !important;
  background:
    linear-gradient(90deg, rgba(90,60,26,.65), rgba(90,60,26,.18) 70%, transparent) !important;
}
.eyebrow{ color:var(--rust); letter-spacing:3px }
.lead{ color:var(--ink-2) }
.card h1,.modal h1{
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:var(--ink-head) !important;
  color:var(--ink-head) !important;
}
code,.intro-steps code{
  /* solid fill + literal ink: inline code appears on both surfaces */
  background:#efe1c2 !important; border:1px solid rgba(80,54,26,.42);
  color:#4a2408 !important; font-family:"Consolas",monospace; font-size:.92em;
}

/* --------------------------------------------------------------- buttons
   Stamped leather with a hot-iron edge. */
.btn,.card button{
  color:#fce9c0 !important;
  background:linear-gradient(180deg,#6b4620,#4a2d12 55%,#3a2210) !important;
  border:1px solid #24150a !important; border-radius:4px !important;
  font-family:var(--serif); font-weight:600; letter-spacing:.10em;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  box-shadow:
    0 4px 12px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,214,150,.28),
    inset 0 -6px 12px rgba(0,0,0,.35) !important;
}
.btn:hover,.card button:hover{
  color:#fff3d6 !important; filter:none; transform:translateY(-1px);
  background:linear-gradient(180deg,#7c5326,#563518 55%,#42280f) !important;
}
.btn.ghost{
  color:#5d3208 !important; background:rgba(120,86,40,.10) !important;
  border:1px solid rgba(96,66,36,.55) !important; text-shadow:none;
  box-shadow:inset 0 0 0 1px rgba(255,250,230,.35) !important;
}
.btn.ghost:hover{ background:rgba(120,86,40,.20) !important; color:#3f1f04 !important }
.btn.danger,.btn.wax{
  background:linear-gradient(180deg,#8e2c22,#6a1c15) !important; border-color:#3d0f0a !important;
}

/* --- every FILTER control is the same 3px box as the selects ---------------
   `input,select,textarea` below stamps 3px on the character selector (.fp-select)
   and the search fields; site.css still draws the checkbox/button filters as
   999px pills, which read as a different control on the same row. Pin them all
   to the selects' radius: the checkbox filter chips (.qfilters label), the
   single-select button groups (.vbtn — bestiary class/status, spells, items,
   museum, highscores, vocations) and the clickable chips (character switcher,
   quest toggle). Drop this file and the pills come back with the violet look. */
:is(.qfilters label,.vbtn,.chip,.pager button){ border-radius:3px !important }

/* ---------------------------------------------------------------- inputs */
input,select,textarea{
  /* literal ink, not var(--ink): these paint their own pale field, so on the
     dark board the light token would make them light-on-light. */
  background:#f2e5c6 !important; color:#241505 !important;
  border:1px solid rgba(96,66,36,.55) !important; border-radius:3px !important;
  font-family:var(--prose);
  box-shadow:inset 0 2px 5px rgba(120,88,48,.22) !important;
}
input:focus,select:focus,textarea:focus{ border-color:var(--rust) !important; outline:none }
label{ color:var(--ink-2); letter-spacing:.06em }
.tbl-tools label{ color:var(--ink-3) }
.tbl-tools select{ min-width:150px }

/* ---------------------------------------------------------------- tables */
table.data{ color:var(--ink) }
table.data th{ color:#33200c !important; letter-spacing:.06em;
  background:var(--paper-dark) center/512px 512px repeat; }
table.data thead th{ border-bottom:1px solid rgba(96,66,36,.55) !important;
  box-shadow:inset 0 -1px 0 rgba(255,248,224,.35) }
table.data th,table.data td{ border-bottom:1px solid rgba(96,66,36,.22) !important }
table.data tbody tr:nth-child(even){ background:rgba(122,88,44,.055) }
table.data:where(:not(.otf-table), .mnt-table) tbody tr:hover{ background:rgba(160,110,40,.13) }
table.data td.name{ color:#381c04 }
.table-wrap{ overflow-x:auto }

/* --- character dashboard: plain rows, not a sheet inside a sheet ------------
   Every `.dash-grid` table already lives in a `.panel`, so the generic
   `.panel .table-wrap` parchment above lays a second, DARKER sheet inside the
   first — a box in a box, next to a Skills list that is plain rows on the panel
   itself. site.css already declares these wrappers flat
   (`.dash-grid .table-wrap,.otf-wrap,.sp-panel .table-wrap{border:0;…}`); the
   skin has to say it again only because the parchment rules carry !important.
   ⛔ ONLY THE SHEET GOES. `overflow` is untouched, so every scrolling list
   (questlog, bestiary, spells, level progress) still scrolls — and the per-row
   `border-bottom` stays, which is what makes the rows read like the Skills
   list. Same reason the table HEAD loses its paper-dark band: on a flat wrapper
   it would float as a stray strip across the panel's own parchment. */
.dash-grid .table-wrap{
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
}
.dash-grid .table-wrap::after{ content:none !important }
.dash-grid table.data th{ background:none !important }
/* the zebra was the last thing still reading as "a table": row tracking comes
   from the border-bottom here, exactly as it does in the Skills list. Hover
   stays — that one is feedback, not decoration. */
.dash-grid table.data tbody tr:nth-child(even){ background:none }

/* progress row colours — dark enough to read on paper */
table.data tr.r-done td,table.data tr.r-done td.name,table.data tr.r-done .spwords{ color:var(--leaf) }
table.data tr.r-prog td,table.data tr.r-prog td.name,table.data tr.r-prog .spwords{ color:var(--ink-2) }
table.data tr.r-none td,table.data tr.r-none td.name,table.data tr.r-none .spwords{ color:var(--ink-3) }
.hcount{ color:var(--leaf) }

/* badges */
.chip{ background:rgba(122,74,20,.14); color:#3d1e05; border:1px solid rgba(96,66,36,.45) }
.pill{ border-color:rgba(96,66,36,.45); color:var(--ink-2) }
.pill.pvp{ color:var(--wax); border-color:rgba(142,43,34,.45); background:rgba(142,43,34,.10) }
.pill.pve{ color:#3d1e05; border-color:rgba(154,106,34,.45); background:rgba(154,106,34,.10) }
.yn.no{ color:var(--leaf); background:rgba(47,107,52,.12); border-color:rgba(47,107,52,.40) }
.yn.yes{ color:var(--wax); background:rgba(142,43,34,.12); border-color:rgba(142,43,34,.40) }
.spwords{ color:#5a2a0c; font-style:italic }
.sp-free{ color:var(--ink-3) }
.sp-quest{ color:var(--amber) }
.fact b{ color:#3d1e05 } .fact span{ color:var(--ink-3) }
.feat h3{ color:var(--ink-head) }
.feat h3 .dot{ background:var(--rust); box-shadow:0 0 8px rgba(138,63,20,.5) }
.step::before{ color:#fce9c0; background:linear-gradient(180deg,#6b4620,#3f2410);
  box-shadow:0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,214,150,.25) }
.step h3{ color:var(--ink-head) }
.msg.err{ background:rgba(142,43,34,.10); border-color:rgba(142,43,34,.45); color:var(--wax) }
.msg.ok{ background:rgba(47,107,52,.10); border-color:rgba(47,107,52,.45); color:var(--leaf) }
.spnote{ background:rgba(122,88,44,.10); border-left-color:var(--rust); color:var(--ink-2) }
.spnote b{ color:#3d1e05 }
.info-raw,.info-rates{ color:var(--ink-2) }
.info-raw b,.info-rates b{ color:var(--ink-head) }
.prem-num.is-ok{ color:var(--leaf) } .prem-num.is-low{ color:var(--amber) }
.prem-num.is-unknown{ color:var(--ink-3) }
.prem-cap,.pkg-name,.pkg-unit,.pkg-blurb{ color:var(--ink-2) }
.pkg-days{ color:#3d1e05 }
.vbtn{ color:var(--ink); background:rgba(122,88,44,.10); border:1px solid rgba(96,66,36,.45) }
.vbtn:hover{ border-color:var(--rust); color:var(--ink-head) }
.vbtn.on{ background:linear-gradient(180deg,#6b4620,#3f2410); color:#fce9c0; border-color:#24150a }
.intro-spoiler{ background:var(--paper) center/512px 512px repeat, #e3cea3;
  border-color:rgba(120,90,52,.55) }
.intro-spoiler summary{ color:var(--ink-head) }
.intro-spoiler summary::before{ color:var(--rust) }
.intro-steps{ color:var(--ink-2) } .intro-steps b{ color:var(--ink) }
.mech-fig.noimg::before{ background:rgba(122,88,44,.10); border-color:rgba(96,66,36,.45);
  color:var(--ink-3) }
.intro-img img,.mech-fig img,.yt-embed{ border-color:rgba(60,40,20,.75); border-radius:3px }
.fish-hero{ background:var(--paper) center/512px 512px repeat, #e3cea3;
  border-color:rgba(120,90,52,.55) }
.fish-cap{ color:var(--ink-3) } .fish-arrow{ color:#3d1e05 }

/* --------------------------------------------------------------- sidebar
   A dark plank WALL with individual boards screwed onto it: each menu section is
   one board, and each link inside it is a thinner slat nailed to that board.
   Three wood surfaces stacked, so each has to be a different VALUE or the whole
   sidebar turns to mush: wall = darkest, section board = mid, link slat = lightest.
   All three use the same two textures; only the overlaid gradient changes. */
.side{
  background:
    linear-gradient(180deg, rgba(14,9,3,.84), rgba(9,5,2,.90)),
    var(--wood-wall) center/512px 512px repeat !important;
  border:1px solid rgba(10,6,2,.95) !important; border-radius:4px !important;
  backdrop-filter:none !important;
  box-shadow:0 20px 46px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,222,170,.10),
    inset 0 -8px 18px rgba(0,0,0,.5) !important;
  padding:9px 7px !important;
}
/* ⛔ `.side-brand` is styled in the BRAND block near the top of this file (Kinara
   rebrand, 2026-08-21). The two rules that used to sit here are gone:
     .side-brand{ border-bottom:... }  -> superseded there, with !important;
     .side-brand span{ color:#c8a273 } -> DELETED. It was for the dormant PWI theme's
       tagline <span>, which is not emitted, but its (0,1,1) specificity silently beat
       a bare `.side-beta` (0,1,0) and repainted the BETA plate tan-on-wax-red. The
       plate is now selected as `.side-brand .side-beta` so it cannot be out-specified
       by a stray descendant rule again. */

/* ---- a section = one board bolted to the wall ---- */
.menu-sec{
  position:relative; margin:7px 0 !important; padding:7px 7px 8px; border-radius:3px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.46)),
    var(--wood-rail) center/300px 300px repeat, var(--wood);
  border:1px solid rgba(12,7,2,.9);
  box-shadow:0 5px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,222,170,.17),
    inset 0 -7px 14px rgba(0,0,0,.34);
}
/* two brass screws, one per top corner — the same detail the board frame uses */
.menu-sec::before{
  content:""; position:absolute; top:4px; left:4px; right:4px; height:6px;
  pointer-events:none;
  background:
    radial-gradient(circle at 3px 3px, #e2c184 0 1.6px, #5c3f16 2.1px, transparent 2.8px) no-repeat left top,
    radial-gradient(circle at calc(100% - 3px) 3px, #e2c184 0 1.6px, #5c3f16 2.1px, transparent 2.8px) no-repeat right top;
}
/* the section title is burnt into its board */
.menu-sec h4{
  color:#f0d3a4; opacity:1; font-family:var(--serif); font-size:10.5px;
  letter-spacing:.18em; text-shadow:0 1px 2px rgba(0,0,0,.9);
  border-bottom:1px solid rgba(8,4,1,.5); box-shadow:0 1px 0 rgba(255,222,170,.10);
  padding:0 2px 4px; margin:1px 0 6px;
}

/* ---- a link = a slat nailed to the board ---- */
.menu-link{
  display:block; margin:3px 0; padding:5px 9px !important;
  color:#f4e2c2 !important; font-family:var(--prose); font-weight:600; font-size:13.5px;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  background:
    linear-gradient(180deg, rgba(255,214,150,.18), rgba(255,214,150,.04) 42%, rgba(0,0,0,.14)),
    var(--wood-slat) center/260px 260px repeat, var(--wood-lit) !important;
  border:1px solid rgba(8,4,1,.9) !important; border-radius:3px !important;
  box-shadow:
    0 3px 7px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,232,190,.30),
    inset 0 -2px 5px rgba(0,0,0,.34) !important;
  transition:transform .12s ease, filter .12s ease;
}
.menu-link:hover{
  filter:brightness(1.18); transform:translateY(-1px);
  color:#fff4dc !important; text-decoration:none;
  border-color:rgba(190,140,70,.6) !important;
  box-shadow:0 4px 9px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,232,190,.24) !important;
}
/* the current page's slat is pressed INTO the board, not raised off it */
.menu-link.is-active{
  color:#ffe6b4 !important; transform:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(255,196,120,.10)),
    var(--wood-slat) center/260px 260px repeat, var(--wood-lit) !important;
  border-color:rgba(120,80,34,.8) !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6), inset 3px 0 0 var(--rust-2) !important;
}
/* the danger red has to clear 4.5:1 against the slat's own lighter timber
   (--wood-lit): the old #f2a99c measured 4.14 once the slats got their own fill. */
.menu-link.menu-danger{ color:#ffc0b2 !important }
.menu-link.menu-danger:hover{ color:#ffd6cc !important;
  border-color:rgba(180,60,40,.65) !important }
.menu-toggle{ padding-top:2px }
.menu-toggle .caret{ color:#f0d3a4 }
.side-status{ border-top-color:rgba(150,110,64,.30); color:#c8a273 }
.side-burger{ background:var(--wood); color:#f0dcbb; border-color:var(--wood-line) }

/* --- sidebar: the inline log-in form + the plain (header-less) link group --- */
.menu-plain{ margin-top:2px }
/* (.menu-cta styled the "I'm New, Help Me!" sidebar link, removed 2026-08-02 in
   favour of the one-time slide-down hint in common.php render_newbie_hint().) */
/* ⭐ .side-login IS LIVE AGAIN as of 2026-08-21. History: it was the sidebar log-in form,
   went dead on 2026-08-19 when the account bundle moved to the full-width top bar
   (`.tb-login`), and came back when that strip was deleted for the RIGHT menu. This is the
   ONE log-in form on the site (site_right_menu() explains why there must never be two).
   ⛔ The fields need no colour of their own: board.css pins literal dark ink on every input
   globally, so these pale fields are readable on the dark timber. */
.side-login{ margin:0 0 5px; padding:0 2px; display:flex; flex-direction:column; gap:5px }
.side-login input{
  width:100%; padding:6px 8px !important; font-size:12.5px !important;
  font-family:var(--sans) !important; border-radius:3px !important;
}
.side-login input::placeholder{ color:#8a7454; opacity:1 }
.side-login .btn{ width:100%; margin:0; padding:6px 9px !important; font-size:12px }

/* ⛔⛔⛔ `.side-who` WAS DELETED ON 2026-08-21 AND MUST NOT COME BACK. It styled a
   "Signed in as <account>" line in the right menu, and the owner's instruction is absolute:
   "DO NOT EVER WRITE ANYWHERE THE ACCOUNT NUMBER, NEVER, IT CAN NEVER BE VISIBLE ANYWHERE."
   The rule is deliberately enforced by having NO STYLE for it: a leftover `.side-who` block
   is an invitation to re-add the markup it was written for. If you find yourself needing a
   class for a "logged in as" line, that is the signal to stop, not to write the CSS.
   ⚠️ The two places the number legitimately appears (once at registration, and on
   resetpassword.php's recovery plaque) carry their own page-local styles. */

/* ------------------------------------------------------------------ hero
   Kept, but framed and warmed so it sits on a wooden wall. */
.hero{
  padding:6px; border:1px solid rgba(16,9,3,.9); border-radius:4px;
  background:var(--wood-rail) center/300px 300px repeat, #3a2718;
  box-shadow:0 20px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,222,170,.14);
}
.hero img{ filter:sepia(.55) saturate(.8) contrast(1.05) brightness(.95);
  box-shadow:0 0 0 1px rgba(16,9,3,.8) }
.hero-grad{ background:linear-gradient(180deg,transparent 38%,rgba(28,16,6,.55) 74%,rgba(24,14,6,.92)) }
.hero-tag{ color:#e6c08a }

/* ------------------------------------------------------- modal / dropdown */
.modal-overlay{ background:rgba(14,8,3,.82) }
.modal .modal-close{
  background:rgba(120,86,40,.14); border-color:rgba(96,66,36,.45); color:var(--ink-2) }
.modal .modal-close:hover{ background:rgba(120,86,40,.26); color:var(--ink) }
.dl-item{ background:rgba(122,88,44,.10); border-color:rgba(96,66,36,.35) }
.dl-item:hover{ background:rgba(160,110,40,.18); border-color:rgba(96,66,36,.6) }
.dl-item b{ color:#3d1e05 } .dl-item b::after{ color:var(--rust) }
.dl-item span{ color:var(--ink-2) }
.dl-item.disabled b{ color:var(--ink-3) }
.dropdown-menu{ background:var(--panel-solid); border-color:rgba(96,66,36,.55) }
.dropdown-menu a{ color:var(--ink) } .dropdown-menu a:hover{ background:rgba(160,110,40,.14) }
.fp-toast{ background:#2a1a0c; border-color:#8a5a2b; color:#f7dfae }

/* ==========================================================================
   NOTICE BOARD — the news feed itself
   ========================================================================== */

.board-head{
  display:flex; align-items:flex-end; gap:9px; flex-wrap:wrap;
  margin:2px 2px 10px;
}
.board-head h1,.board-head h2{
  font-size:20px; color:#f0d3a0 !important; -webkit-text-fill-color:#f0d3a0 !important;
  letter-spacing:.06em; text-shadow:0 2px 3px rgba(0,0,0,.85);
}
.board-head .board-sub{
  color:#bd9a6c; font-size:12px; font-family:var(--prose); margin-left:auto;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.board-head .board-sub a{ color:#e0b47e }

/* one pinned sheet */
.notice{ padding:12px 15px 11px !important; margin:0 0 13px; }
.notice:nth-child(odd){ transform:rotate(-.28deg) }
.notice:nth-child(even){ transform:rotate(.24deg) }
.notice::before{                                  /* the tack */
  content:""; position:absolute; top:-9px; left:50%; margin-left:-14px;
  width:28px; height:28px; z-index:3;
  background:url("board/pin.png") center/28px 28px no-repeat;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));
}
.notice.is-taped::before{                         /* variant: taped, not tacked */
  content:""; top:-12px; left:50%; margin-left:-64px; width:128px; height:38px;
  background:url("board/tape.png") center/128px 38px no-repeat;
  transform:rotate(-1.6deg); opacity:.95;
}
.notice-head{ margin:0 0 6px }
.notice-title{ font-size:19px; line-height:1.25; margin:0 0 3px }
.notice-title a{ color:var(--ink-head) }
.notice-title a:hover{ color:var(--rust); text-decoration:none }
.notice-meta{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-family:var(--sans); font-size:11.5px; color:var(--ink-3);
  padding-bottom:6px; border-bottom:1px solid rgba(96,66,36,.28);
}
.notice-meta .n-date{ letter-spacing:.04em }
.notice-meta .n-by{ font-style:italic }
.notice-tag{
  font-family:var(--serif); font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:1px 7px; border-radius:2px;
  color:#40200a; background:rgba(154,106,34,.16); border:1px solid rgba(96,66,36,.45);
}
.notice-body{ font-size:14px; line-height:1.6; color:var(--ink) }
.notice-body p{ margin:.7em 0 }
.notice-body h2,.notice-body h3,.notice-body h4{
  font-family:var(--serif); color:var(--ink-head); margin:.9em 0 .3em; font-size:16px }
.notice-body a{ color:var(--rust); text-decoration:underline; text-underline-offset:2px }
/* a CTA button inside a post is a button, not a link — the rule above would
   underline it (it sets no text-decoration of its own, so .notice-body a wins) */
.notice-body a.btn{ text-decoration:none }
.notice-body ul,.notice-body ol{ margin:.6em 0; padding-left:1.5em }
.notice-body li{ margin:.22em 0 }
.notice-body blockquote{
  margin:.9em 0; padding:.5em 0 .5em 14px; border-left:3px solid rgba(138,63,20,.5);
  color:var(--ink-2); font-style:italic }
.notice-body hr{ border:0; height:1px; background:rgba(96,66,36,.35); margin:1.2em 0 }
.notice-body code,.notice-body pre{
  background:rgba(120,86,40,.14); border:1px solid rgba(120,86,40,.28); border-radius:3px }
.notice-body pre{ padding:6px 9px; overflow:auto; font-size:12px }
.notice-body table{ border-collapse:collapse; margin:.7em 0; font-size:13px }
.notice-body th,.notice-body td{ border:1px solid rgba(96,66,36,.32); padding:3px 7px }
.notice-body th{ background:rgba(120,86,40,.12) }
/* images inside a post: a photograph laid on the sheet */
.notice-body img{
  max-width:100%; height:auto; margin:.8em 0; border:1px solid rgba(60,40,20,.55);
  border-radius:2px; padding:5px; background:#f6ecd3;
  box-shadow:0 6px 14px rgba(0,0,0,.28) }
.notice-body img.left{ float:left; margin:.4em 16px .6em 0; max-width:44% }
.notice-body img.right{ float:right; margin:.4em 0 .6em 16px; max-width:44% }
.notice-lead-img{
  display:block; width:100%; margin:0 0 14px; border:1px solid rgba(60,40,20,.55);
  border-radius:2px; padding:5px; background:#f6ecd3; box-shadow:0 6px 14px rgba(0,0,0,.28) }

/* ---- corner stamps -------------------------------------------------------
   Every notice is stamped with its CONTENT TYPE (Update / Event / Info / …),
   and staff additionally get DRAFT or SCHEDULED above it. They stack down the
   top-right corner, so `.has-stamps` reserves the room — the title must never
   run underneath one, and now that published notices carry a stamp too that is
   a player-visible collision, not just a staff one.
   ⛔ Colours are pinned LITERALS, not tokens: a stamp has no fill of its own, so
   it is always read against parchment, and the ink must stay dark there. */
.notice.is-draft{ box-shadow:0 10px 22px rgba(0,0,0,.45),
  inset 0 0 44px rgba(150,110,60,.20), inset 0 0 0 2px rgba(126,30,24,.45) !important }
.stamps{
  position:absolute; top:7px; right:9px; z-index:4; pointer-events:none;
  /* the gap has to clear the opposed tilts below, or a stacked pair's corners
     intersect and read as a layout bug rather than two presses */
  display:flex; flex-direction:column; align-items:flex-end; gap:7px;
}
.stamp{
  font-family:var(--serif); font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#6b3d12;
  border:2px solid rgba(107,61,18,.65); border-radius:4px; padding:2px 8px;
  transform:rotate(-7deg); opacity:.95;
  text-shadow:0 1px 0 rgba(255,245,220,.4);
}
/* alternate the tilt so a stack reads as two separate presses of the stamp */
.stamps .stamp:nth-child(even){ transform:rotate(5deg) }
/* state stamps (staff-only) */
.stamp-draft{ color:#71160f; border-color:rgba(113,22,15,.7) }
.stamp-sched{ color:#6d4212; border-color:rgba(109,66,18,.65) }
/* the three content types; any other tag keeps the neutral brown above */
.stamp-update{ color:#6b3d12; border-color:rgba(107,61,18,.65) }
.stamp-event { color:#1f5a26; border-color:rgba(31,90,38,.62) }
.stamp-info  { color:#1f5a7a; border-color:rgba(31,90,122,.62) }
/* events.php: an event's state */
.stamp-active { color:#1f5a26; border-color:rgba(31,90,38,.62) }
.stamp-planned{ color:#1f5a7a; border-color:rgba(31,90,122,.62) }
.stamp-ended  { color:#5a4a3a; border-color:rgba(90,74,58,.55) }
.notice.has-stamps .notice-head{ padding-right:92px }
@media (max-width:520px){
  .stamp{ font-size:11.5px; letter-spacing:.12em; padding:1px 6px }
  .notice.has-stamps .notice-head{ padding-right:84px }
}

/* empty board */
.board-empty{
  padding:18px 14px; text-align:center; color:#bd9a6c; font-style:italic;
  border:1px dashed rgba(150,110,64,.35); border-radius:3px }

/* pager */
.board-pager{ display:flex; gap:6px; justify-content:center; align-items:center;
  margin:4px 0 2px; font-family:var(--sans); font-size:12px; color:#bd9a6c }
.board-pager a,.board-pager span{ padding:3px 8px; border-radius:3px;
  border:1px solid rgba(150,110,64,.35); color:#e8c795 }
.board-pager a:hover{ background:rgba(255,196,120,.12); text-decoration:none }
.board-pager .is-cur{ background:rgba(255,196,120,.16); color:#fff1d6 }
.board-pager .is-off{ opacity:.35 }

/* ---------------------------------------------------- news admin (editor) */
.news-editor textarea{ width:100%; font-family:"Consolas","Courier New",monospace;
  font-size:13px; line-height:1.55; min-height:340px; resize:vertical }
.news-editor .fld-row{ display:flex; gap:8px; flex-wrap:wrap }
.news-editor .fld-row > div{ flex:1; min-width:180px }
.news-rows td.st{ font-family:var(--sans); font-size:12px; font-weight:700 }
.news-rows td.st.pub{ color:var(--leaf) } .news-rows td.st.draft{ color:var(--wax) }
.news-actions{ display:flex; gap:5px; flex-wrap:wrap; align-items:center }
.news-actions form{ margin:0 } .news-actions .btn{ margin-top:0 }
.news-hint{ color:var(--ink-2); font-size:12px; line-height:1.55 }

/* ==========================================================================
   CONTRAST PASS — the page has TWO surfaces, so every piece of text has to
   declare which one it is painted on:

     the board backing (dark timber)  ->  light, warm text
     a parchment sheet (.panel &co)   ->  dark ink

   ⭐ This is done by RE-SCOPING THE SHARED TOKENS, not by listing classes.
   Almost every rule in site.css and in the pages' own <style> blocks paints with
   var(--muted) / var(--muted-2) / var(--text) / var(--gold*) / var(--violet*), so
   flipping those tokens per surface fixes the whole site at once — including
   pages and classes nobody has enumerated, and any added later. Custom
   properties inherit, so depth does not matter.

   Only two kinds of rule remain below: elements that hard-code a literal colour
   (they need one rule per surface), and the badges, which get SOLID fills
   because a translucent one takes the colour of whatever is behind it — the bug
   that made the quest-log pills unreadable on the board.

   Verify with:  python3 tools/theme/contrast_audit.py --cookie PHPSESSID=<id>
   ========================================================================== */

/* --- on the board: the tokens go light --------------------------------------
   Including the ink/accent tokens: a rule that says `color:var(--ink-2)` is
   asking for "secondary text", not for brown — so the token decides, and any
   rule anywhere resolves correctly on whichever surface it lands on.
   ⛔ The one exception is an element that paints its OWN light background
   (inputs, badges, paper tags): those must pin a literal dark ink, or they end
   up light-on-light here. They are marked in the badge block below. */
/* ⛔⛔ .side-r IS LISTED HERE BESIDE .board-in, AND THE REASON IS THE ONE THE TOP BAR USED
   TO CARRY. Any dark surface OUTSIDE .board-in inherits the PARCHMENT tokens -- --ink
   #241505, --gold #5c3407, i.e. nearly black -- so light-on-light is the default failure and
   text renders unreadable. The right menu is such a surface (it is a column of .layout, not
   of the board), so it re-scopes them here: one selector list, two dark surfaces, and they
   can never drift apart.
   ⚠️ `.topbar` was in this list from 2026-08-19 until 2026-08-21, when the full-width strip
   was deleted for the right menu. ⛔ It is DEFENSIVE for .side-r rather than strictly needed
   today: every rule the right menu's markup actually uses (.menu-sec h4, .menu-link,
   .menu-danger, .side-login input, .side-who) pins LITERAL light colours, exactly as the left
   menu does. Keep it anyway -- it is what makes the NEXT thing added to that menu readable by
   default instead of by luck.
   ⚠️ The LEFT menu (.side) is deliberately NOT in this list: it has always relied on those
   same literals, and adding it now would change token-driven properties there for no reason. */
.board-in, .side-r{
  --ink:#f2dfbf; --ink-2:#d3b691; --ink-3:#b8996f; --ink-head:#f2d7a2;
  --rust:#e3a86f; --rust-2:#f2c391;
  --leaf:#8ada9c; --wax:#ff9f97; --amber:#f0b860;
  --text:#f2dfbf; --muted:#d3b691; --muted-2:#b8996f;
  --gold:#d0a45f; --gold-2:#edc994; --gold-3:#f7e3af;
  --violet:#d5a76b; --violet-2:#e5ba85;
  --line:rgba(190,140,70,.40); --line-soft:rgba(190,140,70,.24);
  --panel-solid:#2a1b0d;
  --ok:#84dc99; --err:#ff9f97;
  color:var(--text);
}
.board-in .h-title{
  color:var(--ink-head) !important; -webkit-text-fill-color:var(--ink-head) !important;
  text-shadow:0 2px 3px rgba(0,0,0,.85);
}
.board-in .rule{
  background:linear-gradient(90deg, rgba(206,156,92,.65), rgba(206,156,92,.16) 70%, transparent) !important;
}
.board-in .info-raw b,.board-in .info-rates b{ color:#fbeacd !important }
.board-in code{ background-color:#efe1c2 !important; color:#4a2408 !important }
.main-foot{ color:#c9a97e }

/* --- inside a parchment sheet: the tokens go to ink ------------------------- */
:is(.panel,.card,.notice,.table-wrap,.intro-spoiler,.fish-hero,.modal,
    .spnote,.skill-list li,.info-list li,.fact,.step){
  --ink:#241505; --ink-2:#2b1c09; --ink-3:#43331f; --ink-head:#301803;
  --rust:#6f2f0d; --rust-2:#8a4014;   /* links: 4.5:1 even on the darker table paper */
  --leaf:#164a1d; --wax:#71160f; --amber:#6f4207;
  --text:var(--ink); --muted:var(--ink-2); --muted-2:var(--ink-3);
  --gold:#5c3407; --gold-2:#42200a; --gold-3:#33180a;
  --violet:#8a5a2b; --violet-2:#7a4a1c;
  --line:rgba(96,66,36,.55); --line-soft:rgba(96,66,36,.30);
  --panel-solid:#e3cea3;
  --ok:#1f5a26; --err:#8e2b22;
  color:var(--ink);
}
:is(.panel,.card,.notice,.intro-spoiler,.fish-hero,.modal,.spnote,.fact,.step) :is(.h-title,h1,h2,h3,h4){
  color:var(--ink-head) !important; -webkit-text-fill-color:var(--ink-head) !important;
  text-shadow:0 1px 0 rgba(255,250,232,.5);
}
:is(.panel,.card,.notice,.intro-spoiler,.fish-hero) .rule{
  background:linear-gradient(90deg, rgba(90,60,26,.65), rgba(90,60,26,.18) 70%, transparent) !important;
}
:is(.panel,.card,.notice,.intro-spoiler,.fish-hero) :is(.info-raw,.info-rates) b{
  color:var(--ink-head) !important;
}
/* names and headings in tables: the ink-side gold is still too pale on the
   darker table paper, so pin them darker again */
table.data td.name,.cr-name,.mm-catsec h3,.fg-ident .ci-name{ color:#381c04 }

/* --- card-shaped list items ARE sheets: give them paper ------------------- */
.skill-list li,.info-list li,.spnote,.fact,.step{
  background:var(--paper) center top/512px 512px repeat, #e3cea3 !important;
  border:1px solid rgba(120,90,52,.55) !important; border-radius:3px !important;
  box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 0 30px rgba(150,110,60,.18) !important;
}
.info-list li{ border-radius:0 !important; box-shadow:none !important; border-width:0 0 1px 0 !important }
.spnote{ border-left:3px solid var(--rust) !important; border-radius:0 3px 3px 0 !important }
.skill-list b,.info-list b{ color:var(--ink-head) }
.skill-list .who{
  color:#40200a; background:rgba(154,106,34,.16); border:1px solid rgba(96,66,36,.45);
}

/* --- badges & small controls: SOLID fills, bright on either surface --------
   ⛔ Never a translucent background here. A `rgba(...,.16)` pill reads as pale
   green on parchment and as mud on the dark board; these are opaque paper tags
   that pop on both, with their meaning carried by a saturated dark ink. */
.btn.ghost,.vbtn,.chip,.qs,.obadge,.pill,.yn,.notice-tag,.loot-chip,.qfilters label,
.pager button,.pager .pinfo,.fp-select,.bcls,.voc-badge,.hid-tag,
.tbl-tools select,.cr-search,.board-pager a,.board-pager span{
  background-color:#eddfbd !important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.34),rgba(90,60,26,.07)) !important;
  color:#3f2405 !important; border:1px solid rgba(80,54,26,.62) !important;
  text-shadow:none !important; box-shadow:none !important;
}
.btn.ghost:hover,.vbtn:hover,.chip:hover,.board-pager a:hover,.qfilters label:hover,
.pager button:hover{
  background-color:#f8eed4 !important; color:#2b1704 !important;
}
.vbtn.on,.chip.on,.board-pager .is-cur{
  background-color:#4a2d12 !important;
  background-image:linear-gradient(180deg,#6b4620,#3f2410) !important;
  color:#fce9c0 !important; border-color:#24150a !important;
  text-shadow:0 1px 2px rgba(0,0,0,.7) !important;
}
.chip.on small{ color:#f0dcb6 !important }
.chip small{ color:#43331f !important }
/* the four meanings, each a bright tinted tag */
.qs.done,.obadge.free,.pill.always,.voc-badge.live,.bcls.c-harmless,.bck.done{
  background-color:#cde7c4 !important; color:#15501d !important;
  border-color:rgba(31,90,38,.5) !important;
}
/* ⛔ .fg-pickup is NOT one of those paper tags — it is a line of text sitting straight on the
   Fighters Guild parchment, so it gets ink, never a green fill (owner's call 2026-08-03). */
.fg-pickup{
  background:none !important; border:0 !important;
  color:var(--leaf);   /* ⛔ no !important on color/text-shadow — an !important declaration
     outranks a keyframe and would freeze the pulse below. board.css loads after site.css, so
     plain specificity already beats its #6fff9f. */
  animation-name:fg-pulse-ink !important;
}
/* The pulse runs dark-green ink -> light green (owner's call 2026-08-03) and NEVER by fading:
   opacity dropped the ink to 2.1:1 on parchment. ⛔ The light half carries a dark halo — light
   green alone is ~2:1 on paper, and the halo is the only thing holding the letters readable at
   the top of the swing. Change the light colour and the halo goes with it. */
@keyframes fg-pulse-ink{
  0%,100%{ color:#164a1d; text-shadow:none }
  50%{ color:#5fd38a; text-shadow:0 0 2px rgba(11,38,14,.95), 0 1px 3px rgba(11,38,14,.8) }
}
.qs.prog,.obadge.prem,.pill.rare,.bcls.c-medium{
  background-color:#f7e3ae !important; color:#6a3d05 !important;
  border-color:rgba(154,106,34,.55) !important;
}
.qs.none,.obadge.quest,.pill.uncommon,.voc-badge.soon,.bcls.c-trivial{
  background-color:#e6ddc7 !important; color:#4b3d2c !important;
  border-color:rgba(96,66,36,.5) !important;
}
.qs.bad,.pill.very-rare,.bcls.c-challenging,.bcls.c-nemesis{
  background-color:#f4d4cf !important; color:#6e150e !important;
  border-color:rgba(126,30,24,.5) !important;
}
.bcls.c-hard{ background-color:#f8dcc0 !important; color:#7c3a06 !important;
  border-color:rgba(154,74,16,.5) !important }
.loot-chip.r-always{ border-color:rgba(31,90,38,.6) !important }
.loot-chip.r-rare{ border-color:rgba(154,106,34,.65) !important }
.loot-chip.r-very-rare{ border-color:rgba(126,30,24,.6) !important }
/* the primary button is stamped leather; the solid colour keeps it opaque */
.btn,.card button{ background-color:#4a2d12 !important }
.btn.danger,.btn.wax{ background-color:#7a2419 !important }

/* --- page-level <style> blocks load AFTER this file, so these need force --- */
/* account.php */
.ord-b,.vis-b{ color:#3f2405 !important }
.ord-b:hover,.vis-b:hover{ color:#2f1a04 !important; background:rgba(160,110,40,.28) !important }
.del-tag{ color:var(--wax) !important }
.del-btn:hover{ color:#5c110c !important; background:rgba(126,30,24,.16) !important }
/* ============================ ITEM BONUSES ==================================
   ⭐⛔ EVERY SURFACE THAT PRINTS AN ITEM BONUS IS COLOURED HERE, FROM THE ONE
   TOKEN SET AT THE TOP OF THIS FILE. Three shapes, one vocabulary:
     .it-elem   the Element pill      (equipment.php, wands/rods/sceptres)
     .it-atke   "+ 11 fire" in Atk    (equipment.php, melee weapons)
     .it-res    the Resist chips      (equipment.php, armour/shields/jewels/quivers)
     .it-b-*    one phrase of a free-text Bonus / Resistance line, wrapped by
                wikilib.php's item_bonus_html() — the hover item CARD (8 pages),
                items.php's Special cell and market.php's listing note.
   ⛔ `!important` because page-level <style> blocks load AFTER this file (see the
   CONTRAST PASS note below). It is what stops a page re-declaring one of these.
   ⛔ Do not add a literal colour here — add a token above and point at it, so
   check_bonus_colours.py has exactly one value per meaning to measure. */
.it-elem.it-fire,.it-atke.it-fire,.it-res.it-r-fire,.it-b-fire{ color:var(--el-fire) !important }
.it-elem.it-ice,.it-atke.it-ice,.it-res.it-r-ice,.it-b-ice,
.it-res.it-r-drown,.it-b-drown{ color:var(--el-ice) !important }
.it-elem.it-earth,.it-atke.it-earth,.it-res.it-r-earth,.it-b-earth{ color:var(--el-earth) !important }
.it-elem.it-energy,.it-atke.it-energy,.it-res.it-r-energy,.it-b-energy{ color:var(--el-energy) !important }
.it-elem.it-death,.it-atke.it-death,.it-res.it-r-death,.it-b-death{ color:var(--el-death) !important }
.it-elem.it-holy,.it-atke.it-holy,.it-res.it-r-holy,.it-b-holy{ color:var(--el-holy) !important }
/* ⛔ `magic` and `elem` are the SIX-type and FOUR-type folds of the same fact
   (gen_items.py _shared_magic / _shared_elemental), so they share the hue on
   purpose -- the WORD is what separates them. `it-r-magic` had NO rule at all
   until 2026-09-05, the day the magic fold shipped: it inherited the ink and was
   the only readable chip in the column, by accident. */
.it-res.it-r-magic,.it-b-magic,.it-res.it-r-elem,.it-b-elemental{ color:var(--el-magic) !important }
/* physical is the mitigation stat, not an element -- the one neutral entry */
.it-res.it-r-phys,.it-b-physical{ color:var(--el-phys) !important }
/* the three damage classes a bonus can raise */
.it-b-melee{ color:var(--sk-melee) !important }
.it-b-archery{ color:var(--sk-archery) !important }
.it-b-spell{ color:var(--sk-spell) !important }
/* ⛔ THE ELEMENT PILL'S BORDER IS ITS OWN TEXT COLOUR, not a seventh hard-coded
   tint per element: six more literals were six more chances to drift out of step
   with the six above (which is what happened to `.it-res`). */
.it-elem{ border-color:rgba(96,66,36,.42) !important }
@supports (color: color-mix(in srgb, red 40%, transparent)){
  .it-elem{ border-color:color-mix(in srgb, currentColor 42%, transparent) !important }
}
/* quests.php / outfits.php / afterrookgaard.php — the wiki links are a hard
   #6fb1ff in the pages' own CSS; route them through the accent token instead. */
.wlink{ color:var(--rust) !important }
.wlink:hover{ color:var(--rust-2) !important }
/* mymuseum.php — each category is now a sheet (.mm-catsec.panel), so the item
   chips sit ON parchment. Only a DONATED item is a tag: it gets the dirtier
   paper + the aged border, so the owned ones read as tacked onto the sheet and
   the missing ones recede into it. A missing item paints nothing at all —
   border stays in the box model (transparent) so nothing shifts.
   ⛔ Never the page's rgba(95,211,138,.08)/.45 tints here: a translucent fill
   just takes the colour of the paper behind it. */
.mm-catsec .mm-item{
  background:none !important; border-color:transparent !important;
}
.mm-catsec .mm-item.own{
  background:var(--paper-dark) center top/512px 512px repeat, #cdb587 !important;
  border-color:rgba(96,66,36,.5) !important;
}
.mm-catsec .mm-item.own span{ color:#123f17 !important }
.mm-catsec .mm-item.miss{ opacity:.82 }
/* creatures.php / quests.php / namechange.php  (vocations.php was removed 2026-09-08) */
.bst-stat.done{ color:var(--leaf) !important }
.bst-bar.done span{ background:linear-gradient(90deg,#2f6b34,#4f9a56) !important }
.bst-kills{ color:var(--ink-2) !important }
.wlink:hover{ color:var(--ink-head) !important }
.nc-lock h3,.nc-warn{ color:var(--wax) !important }
/* common.php premium block */
.prem-num.is-ok{ color:var(--leaf) !important }
.prem-num.is-low{ color:var(--amber) !important }
.prem-num.is-unknown{ color:var(--ink-3) !important }
/* spelltip.php — the card wears `.panel`, so the sheet block above already paints it: paper
   texture, aged border, ink tokens. ⛔ Do not re-add a dark #spellTip override here (it was one
   until 2026-09-12); it would be the light-on-light trap itemtip.php documents. */
.sp-has-tip{ border-bottom-color:rgba(122,74,20,.55) }

@media (max-width:860px){
  .main{ border-width:8px; padding:8px 8px 10px }
  .notice{ padding:10px 10px 9px !important }
  .notice:nth-child(odd),.notice:nth-child(even){ transform:none }
  .notice-body img.left,.notice-body img.right{ float:none; max-width:100%; margin:.8em 0 }
}

/* ============================================================================
   THE RIGHT-HAND MENU  (.side-r)
   ----------------------------------------------------------------------------
   ⛔⛔ THE FULL-WIDTH TOP BAR AND ITS ~110 LINES OF CSS WERE DELETED HERE ON
      2026-08-21 (owner: "put download there, and community stuff there, and then remove
      the top bar"). Gone with it: `.topbar`, `.topbar-in`, `.topbar-account`, `.tb-login`,
      `.tb-link`, `.tb-danger`, `.tb-who`, `.topbar-items`, `.topbar-item`, `.topbar-value`,
      `.topbar-note`, `.topbar-label` and three media queries. ⛔ Do not resurrect any of
      them: the markup that used them is gone from common.php, so they would style nothing
      while reading as live layout.

   ⭐ THE RIGHT MENU NEEDS ALMOST NO CSS OF ITS OWN, BY DESIGN. Its markup reuses the left
      menu's classes -- `.side` (the whole wood-board look), `.menu-sec`, `.menu-sec h4`,
      `.menu-link`, `.menu-link.menu-danger` -- plus `.side-login` and `.side-who` above.
      That is why it matches the left menu exactly and why there is no second skin to keep
      in step. Only the COLUMN is new, and it lives in site.css beside `.layout`
      (`max-width:1586px`, `.side-r{order:1}`) because it is layout, not skin.

   ⛔ ITS SECTIONS CARRY NO `data-sec`, SO THEY NEVER COLLAPSE. The collapse handler in
      common.php scopes itself to `.side .menu-sec[data-sec]`, and `.side-r` does match
      `.side` -- the missing attribute is the whole guard. That is deliberate: logging in
      must never be one click away behind a collapsed header.
   ============================================================================ */
.side-r .menu-sec:first-child{ margin-top:0 !important }

/* ⛔⛔ "Log out" NEEDS ITS COLOUR RESTATED HERE, WITH !important, OR IT IS NOT RED.
   site.css declares `.menu-link.menu-danger{ color:#ff9b9b }` (0,2,0) but board.css's
   `.menu-link{ color:#f4e2c2 !important }` beats it -- an !important declaration outranks a
   more specific normal one -- so the destructive action rendered identical to every other
   link. The top bar it replaced had its own `.tb-danger`, which is why the distinction
   existed before 2026-08-21 and silently vanished with the strip.
   ⛔ Literal, not a token (this is a dark surface outside .board-in) and solid, not rgba()
   (the plank texture would show through and shift the hue). Measured on the rendered plank
   fill: 9.81:1. */
.menu-link.menu-danger{ color:#ff9f97 !important }
.menu-link.menu-danger:hover{ color:#ffc4be !important }

/* ---- the Discord plaque (right menu, 2026-08-23) ----------------------------
   Owner: "a little section with big discord logo, saying little text 'Join our Discord'".

   ⭐ IT IS A `.menu-link` WITH A LAYOUT MODIFIER, NOT A NEW SKIN. Everything that carries
      colour -- the cream text, the slat fill, the border, the hover lift -- comes from
      `.menu-link` above, already measured against `--wood-lit` by the contrast audit. This
      block only turns the slat from a one-line block into a centred column and sizes the
      mark, so there is no second set of colours to keep in step.
   ⛔ DO NOT paint this plaque Discord blurple. White on #5865F2 measures 4.56:1 -- it clears
      4.5 by four hundredths, i.e. one theme tweak from failing -- and a flat brand button is
      the one thing on this page that would not belong to the timber board. The brand colour
      lives in the LOGO; the plaque stays wood.
   ⛔ `padding` needs !important here: `.menu-link`'s own padding is !important, so a plain
      declaration loses however specific this selector is. `display` does not (that one is
      a normal declaration up there).
   ⛔ The mark is `assets/discord-mark.svg` via <img>, so the path exists once. The file
      carries a literal `fill="#5865F2"` -- `currentColor` inside an <img> has no context and
      resolves to BLACK, which on this timber is a dark blob that still looks deliberate. */
.discord-cta{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:11px 8px 9px !important; text-align:center;
}
.discord-cta .discord-mark{
  /* ⭐ 33% smaller than the first cut (owner, 2026-08-23): 78% -> 52%, 112px -> 75px. */
  display:block; width:52%; max-width:75px; height:auto;
  /* the same doubled black drop-shadow the wordmark uses, so the mark lifts off the grain
     instead of sitting flat on it */
  filter:drop-shadow(0 3px 9px rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(0,0,0,.5));
  transition:transform .12s ease;
}
.discord-cta span{
  font-family:var(--serif); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.2;
}
.discord-cta:hover .discord-mark{ transform:scale(1.04) }

/* ============================ THE SITE FOOTER BAR ============================
   Moved out of `.board-in` on 2026-09-03 (owner: "actual full website footer,
   position fixed at the bottom, full width, still pretty thin").

   ⛔ THIS BLOCK MUST STAY AT THE END OF board.css. Three earlier rules style
      `.main-foot` -- site.css:831 (margin-top/padding-top/border-top, written for an
      IN-FLOW footer inside the sheet), board.css:183 and board.css:723 (colour) --
      and this one has to win on the layout properties. Moving it up the file, or
      into site.css, puts it BEFORE those and the bar silently goes back to being a
      24px-margin block that scrolls away with the page.
   ⛔ `body` needs the matching padding-bottom or the bar covers the last line of
      every page. The two numbers are one decision: --foot-h is the single source. */
:root{ --foot-h:24px }

.main-foot{
  position:fixed; left:0; right:0; bottom:0; z-index:250;
  margin:0; padding:0 10px;
  height:var(--foot-h); line-height:var(--foot-h);
  font-size:11.5px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* Opaque: content scrolls UNDER a fixed bar, and a translucent one turns the
     text into noise the moment a parchment sheet passes behind it. */
  background:#1a1108;
  border-top:1px solid rgba(120,86,48,.55);
  box-shadow:0 -6px 18px rgba(0,0,0,.45);
}

/* ⛔ site.css:1003 hovers the Regulamin link to var(--gold-2), which THIS file
      remaps globally to the parchment ink #42200a -- black-on-black over the bar's
      #1a1108 wood. On wood the hover has to go lighter than the resting #c69a5e. */
.main-foot .foot-link:hover{ color:#fff4dc }

/* Reserve the strip so nothing is hidden behind the bar. */
body{ padding-bottom:var(--foot-h) }

/* ⛔ The toast sits 28px from the bottom by default (site.css) -- i.e. UNDER the bar.
      Lift it clear, or every "Copied!" renders behind the footer. */
.fp-toast{ bottom:calc(var(--foot-h) + 18px) }

@media (max-width:520px){
  .main-foot{ font-size:10.5px; padding:0 6px }
}

/* ⛔ THE STICKY SIDE MENUS HAVE TO GIVE THE BAR ITS STRIP BACK. `.side` is
   `position:sticky; top:12px` with `max-height:calc(100vh - 24px)` (board.css:151,
   itself !important), so its bottom lands 12px from the viewport floor -- i.e.
   UNDERNEATH a 30px fixed footer, hiding the last menu entry with nothing to show
   that anything is wrong. `!important` and last-in-file, because the rule it has to
   beat is also `!important`. */
.side{ max-height:calc(100vh - 16px - var(--foot-h)) !important }

/* ================================================== Notice Board modal (skin)
   The modal IS the board: a timber frame around the dark wall, with four parchment
   notes tacked to it. Metrics live in site.css; only fill, ink, pin and shadow here.
   ⛔ The frame and the head sit on WOOD, so they need LIGHT ink -- `.modal` is in the
      parchment token scope above, which would otherwise paint them dark-on-dark. */
.nbrd-frame{
  background:var(--wood-rail) center/300px 300px repeat, #3a2718;
  border:1px solid rgba(16,9,3,.9);
  box-shadow:
    0 26px 60px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,222,170,.14),
    inset 0 -10px 22px rgba(0,0,0,.45);
}
/* ⛔ THE CLOSE BUTTON SITS ON WOOD HERE, NOT ON PARCHMENT. board.css's own `.modal
   .modal-close` paints it in --ink-2 because every other modal on the site is a parchment
   card -- on this one that is dark-on-dark and the button vanishes. */
.nbrd-modal .modal-close{
  color:#efd6a8; background:rgba(20,12,5,.55); border-color:rgba(238,208,158,.38);
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.nbrd-modal .modal-close:hover{ color:#fff3d8; background:rgba(120,86,40,.55) }
/* a sheet tacked ON the wall -- the shadow is what lifts it off the timber */
.nbrd-note{
  background:var(--paper) center top/512px 512px repeat, #e3cea3;
  border:1px solid rgba(120,90,52,.55);
  box-shadow:
    0 18px 34px rgba(0,0,0,.62),
    0 6px 12px rgba(0,0,0,.42),
    inset 0 0 44px rgba(150,110,60,.20),
    inset 0 0 0 1px rgba(255,248,224,.30);
  position:relative;
}
.nbrd-note::after{                                   /* aged edge, as on every sheet */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:3px;
  box-shadow:inset 0 0 26px rgba(92,62,28,.30), inset 0 0 4px rgba(92,62,28,.25);
}
.nbrd-note::before{                                  /* the brass tack */
  content:""; position:absolute; top:-10px; left:50%; margin-left:-13px;
  width:26px; height:26px; z-index:3;
  background:url("board/pin.png") center/26px 26px no-repeat;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));
}
/* hand-pinned, not laid out by a machine */
.nbrd-note:nth-child(1){ transform:rotate(-1.5deg) }
.nbrd-note:nth-child(2){ transform:rotate(1.1deg) }
.nbrd-note:nth-child(3){ transform:rotate(1.4deg) }
.nbrd-note:nth-child(4){ transform:rotate(-1deg) }

.nbrd-body{ scrollbar-width:none }
.nbrd-body::-webkit-scrollbar{ width:0; height:0; display:none }

.nbrd-wx-row b{ color:var(--ink-head) }
.nbrd-sky.is-calm{ fill:#9a6a12; stroke:#9a6a12 }
.nbrd-sky.is-storm{ fill:#4d5a6b }
.nbrd-sky.is-storm .bolt{ fill:#9a6a12 }
.nbrd-sky.is-unknown{ fill:#5c4e3c; stroke:#5c4e3c }

.nbrd-guest{ color:var(--ink-3) }
.nbrd-lim li b{ color:var(--ink-head) }
.nbrd-lim li.is-ready b{ color:var(--leaf) }
.nbrd-lim li span{ color:var(--ink-2) }
/* ⛔ spent = the WHOLE line drops back, title included (owner: "this entire line should be
   grayed out"). No strike-through: the numbers still have to be readable. */
.nbrd-lim li.is-spent b,.nbrd-lim li.is-spent span{ color:#5c4e3c }

.nbrd-ev li{ color:var(--ink-2) }
.nbrd-ev li.is-shut::before{ background:#8a7a63; box-shadow:inset 0 0 0 1px rgba(60,44,22,.5) }
.nbrd-ev li.is-open{ color:var(--ink) }
.nbrd-ev li.is-open::before{ background:#2f7a37; box-shadow:0 0 6px rgba(47,122,55,.55) }

.nbrd-boss li{ color:var(--ink-2); border-bottom:1px solid rgba(96,66,36,.22) }
.nbrd-boss li:last-child{ border-bottom:0 }