/* Empire & State: the pages' one stylesheet (job U3, research/interface-audit-2026-11-03/redesign.md,
   *The look, in short*). Loaded by web/templates/base.html.

   The Long Afternoon (his pick, 1 Nov): honey light over plum shadow. Each colour has one job:
   honey fills only the one thing to press on a page (button.main); the cold Far-Light only for
   what is rare or ancient; rust for costs that hurt.

   Two families and the world's voice (job UXB15, the UX audit's finding 13; fonts/, with their SIL Open
   Font Licences; no font service): Cinzel's carved capitals only for names and page titles; the
   device's own readable face (--plain) for everything else (buttons in ordinary capitals, figures that
   line up); Cormorant Garamond's italic for the world speaking (the morning's stories, rumours, relics,
   the Crier). tests/test_type_and_colour.py holds all of it, and computes the 4.5-to-1 contrast of every
   colour pair below. */
@font-face { font-family:"Cinzel"; src:url("fonts/cinzel-latin.e7ed1ab78a17.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Cormorant Garamond"; font-style:italic; font-weight:400;
  src:url("fonts/cormorant-garamond-italic-latin.aa6bdaf51a40.woff2") format("woff2"); font-display:swap; }

:root { --night:#2A1D35; --violet:#5C4772; --card:#3A2A48; --bone:#EAD8B6; --honey:#F2C06A;
        --amber:#E0A061; --rust:#A4512D; --rust-fill:#924526; --far:#8FE3D6; --dim:#B9A88E;
        --carved:"Cinzel", Georgia, serif; --world:"Cormorant Garamond", Georgia, serif;
        --plain:system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin:0; background:var(--night); color:var(--bone); font:17px/1.5 var(--plain);
       font-variant-numeric:tabular-nums; }   /* figures of one width, so a column of them lines up */
main { max-width:640px; margin:0 auto; padding:12px 16px 40px; }
a { color:var(--honey); }
/* the four tabs, at the bottom where a thumb reaches (job U5) */
nav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:3; background:#21162b;
      border-top:1px solid var(--violet); padding:6px 4px calc(6px + env(safe-area-inset-bottom));
      font-family:var(--plain); font-size:12px; justify-content:center; }
nav a { flex:1; max-width:160px; display:flex; flex-direction:column; align-items:center; gap:2px;
        padding:4px 0; text-decoration:none; color:var(--dim); }
nav a.on { color:var(--honey); }
nav svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6;
          stroke-linecap:round; stroke-linejoin:round; }
/* the strip: coin, meals, pack and the night, on every signed-in page (job UXB8); one slim row that stays at the top */
header.strip { position:sticky; top:0; z-index:3; background:#21162b; border-bottom:1px solid var(--violet);
               padding:max(0px, env(safe-area-inset-top)) 8px 0; font-family:var(--plain); font-size:12.5px; }
header.strip div { display:flex; justify-content:space-between; gap:4px; max-width:640px; margin:0 auto; }
header.strip a { color:var(--dim); text-decoration:none; white-space:nowrap; padding:7px 6px; }
header.strip b { color:var(--bone); font-weight:600; }
header.strip a.meals.low { background:var(--amber); color:var(--night); border-radius:8px; padding:7px 8px; }
header.strip a.meals.out { background:var(--rust); color:#fff; border-radius:8px; padding:7px 8px; }
header.strip a.meals.low b, header.strip a.meals.out b { color:inherit; }
.box.low-food { border-left:4px solid var(--amber); }
.box.low-food.none { border-left-color:var(--rust); }
.box.low-food ul { margin:6px 0 0; padding-left:20px; }
main.tabbed { padding-bottom:84px; }   /* nothing hides under the tabs */

/* --- pages that slide (job UXB14, the UX audit's finding 12) ------------------------------------------------
   The browser animates from one page to the next itself (Chrome and Safari; Firefox changes page as it
   always did). Only for a player who has not asked for less motion. The tab bar and the status strip are named
   so they are drawn once and stay still; a day card's picture (named by the script in base.html) grows into
   the opened card's header, and back. The opt-in itself is not here but inline in base.html's
   head (job PS1c): from this sheet the browser did not always know it by the arriving page's first render. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: slide-out .16s ease-in both; }
  ::view-transition-new(root) { animation: slide-in .26s .04s ease-out both; }
  ::view-transition-group(card-picture) { animation-duration: .3s; animation-timing-function: ease-in-out; }
}
@keyframes slide-out { to { opacity:0; transform:translateX(-18px); } }
@keyframes slide-in { from { opacity:0; transform:translateX(18px); } }
nav { view-transition-name: tabbar; }
.strip { view-transition-name: strip; }   /* UXB8's strip of coin, meals, pack and the night's clock */
::view-transition-old(tabbar), ::view-transition-old(strip) { display:none; }
::view-transition-new(tabbar), ::view-transition-new(strip) { animation:none; }
::view-transition-group(tabbar), ::view-transition-group(strip) { animation:none; }
header.card-head { height:150px; }
section.opened > header.card-head img { view-transition-name: card-picture; }
main.tabbed .orderbar { bottom:61px; }   /* an opened card's button rides above them */

/* --- the carved voice: titles and the day --------------------------------------------------- */
h1 { font:500 23px/1.3 var(--carved); letter-spacing:.06em; color:var(--honey); margin:12px 0 10px; }
h2 { font:500 17px/1.35 var(--carved); letter-spacing:.06em; color:var(--amber); margin:22px 0 8px; }
h2.sec { font:600 14px var(--plain); letter-spacing:.02em; color:var(--amber); margin:14px 0 6px; }

/* --- the world's voice ---------------------------------------------------------------------- */
.line, .motto, .world, blockquote.relic, details.card > p:first-of-type,
.page-crier .box p { font-family:var(--world); font-style:italic; font-size:20px; line-height:1.35; }
.line { color:var(--dim); }
.holds-line { font:14px var(--plain); margin:0 0 8px; }   /* the first day's tools, one line (job UXB8) */
.world { color:var(--bone); margin:6px 0 12px; }
details.card > p:first-of-type { color:var(--bone); }
.rare > summary { color:var(--far) !important; }
blockquote.relic { margin:6px 0 12px; padding:2px 12px; border-left:3px solid var(--far); }
h1.masthead, h1.masthead + .motto { text-align:left; }   /* left, like every other page's title (job UXB4) */
h1.masthead { margin-bottom:2px; }
.motto { text-align:center; color:var(--honey); margin:2px 0; }

/* --- cards and boxes ------------------------------------------------------------------------ */
.card { background:var(--card); border-radius:10px; margin:10px 0; padding:2px 14px; }
details.card > summary { cursor:pointer; list-style:none; color:var(--honey); font-size:18px; padding:16px 0; }
details.card[open] > summary { color:var(--dim); }
/* Old Ama's almanac (job TS2): the date on Today, tapped. */
details.almanac > summary { cursor:pointer; list-style:none; }
details.almanac > summary::-webkit-details-marker { display:none; }
details.almanac > summary h1::after { content:""; display:inline-block; width:8px; height:8px; margin-left:12px; vertical-align:4px;
  border-right:2px solid var(--dim); border-bottom:2px solid var(--dim); transform:rotate(45deg); }
details.almanac[open] > summary h1::after { vertical-align:0; transform:rotate(-135deg); }
.almanac-hint { display:block; margin:-2px 0 6px; color:var(--dim); font:13px var(--plain); }   /* says what the chevron opens (job UXB4) */
.layers { list-style:none; margin:8px 0; padding:0; display:flex; gap:6px; }
.layers li { flex:1; padding:8px 6px; border-radius:8px; text-align:center; font-size:14px; line-height:1.3; }
.layers li b { display:block; font-weight:500; }
.layers li.now { background:var(--honey); color:#2A1D35; }
.layers li.now .grey { color:#2A1D35; }
.layers li.dark { background:#241a2c; color:var(--dim); border:1px dashed var(--dim); }
details.card[open] > p { animation: turn .45s ease-out; }
@keyframes turn { from { opacity:0; transform: rotateX(70deg); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { details.card[open] > p { animation:none; } }
details.card:not([open]) { border:1px solid var(--violet); box-shadow:0 3px 0 #1d1426; }
details.card.rare:not([open]) { box-shadow:0 0 14px rgba(143,227,214,.45); border-color:var(--far); }
/* --- the present (job U6, mockup 4): face down and alone, then turned; one card at a time, and
   the notes, the reaction and the day's choice only once the last is turned --- */
details.present { padding:0; overflow:hidden; border:1px solid var(--honey); border-radius:16px; }
details.present > summary { display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:360px; padding:20px; color:var(--bone);
  background: radial-gradient(circle at 50% 45%, rgba(242,192,106,.18), transparent 60%),
    repeating-linear-gradient(45deg, rgba(242,192,106,.07) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(242,192,106,.07) 0 2px, transparent 2px 22px), var(--card);
  box-shadow:0 6px 0 #1d1426, 0 0 30px rgba(242,192,106,.12); }
details.present > summary::-webkit-details-marker { display:none; }
details.present .mark { font-size:30px; color:var(--honey); }
details.present .from { font:600 17px var(--plain); margin:14px 10px 6px; }
details.present .tap { font:13px var(--plain); color:var(--dim); }
details.present[open] > summary { min-height:0; padding:10px 14px 0; display:block; text-align:left;
  background:none; box-shadow:none; pointer-events:none; }
details.present[open] .mark, details.present[open] .tap { display:none; }
details.present[open] .from { font-size:13px; color:var(--honey); margin:0; }
details.present > img.find { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
details.present > :not(summary):not(img) { margin-left:14px; margin-right:14px; }
details.present:not([open]) ~ details.present { display:none; }
main:has(details.present:not([open])) .after-present { display:none; }
.fresh details.present[open] > img.find { animation: turn .6s ease-out both; }
.fresh details.present[open] > :not(summary):not(img) { animation: rise .5s .45s ease-out both; }
.turning .after-present { animation: rise .5s .8s ease-out both; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .fresh details.present[open] > *, .turning .after-present { animation:none !important; } }
.box { background:var(--card); border-radius:10px; padding:10px 14px; margin:10px 0; }
.next { border-left:3px solid var(--honey); padding-left:8px; }
.also { font:15px/1.45 var(--plain); }   /* the morning's tally: wages, experience, meals */
/* a find met on the land: Today, Here and the Map's square card (the review of 5 Nov) */
.found { display:grid; grid-template-columns:72px 1fr; gap:6px 12px; align-items:start; padding:10px 12px;
  margin:8px 0; background:var(--card); border-radius:10px; font:15px/1.4 var(--plain); }
.found.bare { display:block; }
.found img { width:72px; height:72px; object-fit:cover; border-radius:8px; }
.found p { margin:0 0 4px; }
.found strong { color:var(--bone); font:500 15px var(--carved); }
.found > :not(img):not(.found-words) { grid-column:1 / -1; }
.found form p { margin:6px 0 0; font-size:14px; }
.found button { width:100%; }
/* The Codex's book of creatures (job UXB18): a grid of portraits, a gold edge on the player's own */
ul.portraits { list-style:none; padding:0; margin:8px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.portrait { display:flex; flex-direction:column; gap:3px; padding:6px 6px 8px; background:var(--card);
  border:2px solid var(--violet); border-radius:10px; font:13px/1.35 var(--plain); color:var(--dim); }
.portrait.mine { border-color:var(--honey); box-shadow:0 0 10px rgba(242,192,106,.35); }
.portrait img, .portrait .blank { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:7px; background:var(--night); }
.portrait strong { font:500 14px var(--carved); letter-spacing:.04em; color:var(--bone); margin-top:3px; }
ul.plain { list-style:none; padding:0; }
ul.plain li { padding:4px 0; }
ul.plain.box { padding:10px 14px; }
.test-tools { margin-top:24px; padding:8px 12px; border:1px dashed var(--dim); border-radius:8px;
  font-family:var(--plain); font-size:15px; color:var(--dim); }   /* only he sees it: never part of the game */
.msg { padding:10px 14px; border-radius:8px; margin:8px 0; background:var(--violet); }
.msg.error { background:var(--rust-fill); }   /* a fill that words sit on: bone on it is over 4.5 to 1 */
.msg.hurt { background:transparent; border:1px solid var(--rust); color:#e9b9a2; }   /* a cost that hurts */
a.msg.swap-waiting { display:block; color:var(--bone); border:1px solid var(--honey); text-decoration:none; }
.swap-answer { display:flex; gap:8px; margin-top:8px; }
form[data-offer-form] select { width:100%; }
.grey { color:var(--dim); }
table { border-collapse:collapse; width:100%; font-family:var(--plain); font-size:15px; }
td, th { text-align:left; padding:5px 4px; border-bottom:1px solid var(--violet); }
/* Feedback: the small button at the top of every page (job WL5; his 10 Nov answer): a speech bubble at the end of the
   strip, so no page loses a line to it; a page with no strip (the testers' notes) gets a small row of its own */
header.strip a.feedback-top { flex:none; display:flex; align-items:center; padding:0 6px; }   /* no taller than the words beside it */
header.strip a.feedback-top svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
div.feedback-top { position:relative; z-index:1; display:flex; justify-content:flex-end; margin:2px 0 6px; font:13px var(--plain); }
div.feedback-top a { color:var(--dim); text-decoration:none; padding:3px 12px; border:1px solid var(--violet); border-radius:14px; }
.feedback { margin-top:36px; font-family:var(--plain); font-size:15px; }
svg a:hover rect { stroke:var(--honey); stroke-width:.12; }
@media (min-width: 1000px) {
  main.page-today, main.page-map { max-width:1100px; }
  .today-grid { display:grid; grid-template-columns: 3fr 2fr; gap:28px; align-items:start; }
  .today-next { position:sticky; top:12px; }
}

/* --- a computer's screen (job UXB16, the UX audit's finding 14) ------------------------------------------------
   From 840 pixels wide the four tabs are a rail down the left edge and a page with a `.two` block (You, Here,
   the town, the market) lays that block out in two columns; the Map's own card sits beside it (map.html). Below
   840 none of this applies, so a phone is exactly as it was (tests/test_wide_screen.py compares the pictures). */
@media (min-width: 840px) {
  nav { top:0; right:auto; bottom:0; width:88px; flex-direction:column; justify-content:flex-start; gap:6px;
        padding:16px 6px; border-top:0; border-right:1px solid var(--violet); font-size:13px; }
  nav a { flex:none; max-width:none; padding:10px 0; border-radius:10px; }
  nav a.on { background:var(--card); }
  nav a:hover:not(.on) { color:var(--bone); }
  body:has(> nav) { padding-left:88px; }
  main.tabbed { padding-bottom:40px; }
  main.tabbed .orderbar { bottom:0; }
  main.page-map, main:has(> .two) { max-width:1100px; }
  .two { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:28px; align-items:start; }
  .two.paths-and-pack { grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); }
  .two > * { min-width:0; }
  .two > .col:only-child { grid-column:1 / -1; }   /* one column alone (a town selling no lots) takes the width */
  /* You: the professions on the left, what you own over the settings on the right (on a phone it is pack, professions, settings) */
  .two.paths-and-pack > .col { grid-column:1; grid-row:1 / span 2; }
  .two.paths-and-pack > .own { grid-column:2; grid-row:1; }
  .two.paths-and-pack > .settings { grid-column:2; grid-row:2; }
  .two.choices { row-gap:0; }
  .two.choices > .opt, .two.choices > a.opt { margin:6px 0; }
}

/* --- a place header: where you stand, before any text (the land type's picture) ------------- */
header.place { position:relative; margin:0 -16px 6px; height:120px; overflow:hidden; }
main > header.place:first-child { margin-top:-12px; }   /* flush with the top, unless a message is first */
header.place img { display:block; width:100%; height:100%; object-fit:cover; }
header.place::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(42,29,53,0) 35%, var(--night) 100%); }
header.place .name { position:absolute; left:16px; right:16px; bottom:8px; z-index:1; margin:0;
  font:500 17px var(--carved); letter-spacing:.12em; color:var(--bone); text-shadow:0 1px 6px #000; }
@media (min-width: 700px) { header.place { margin-left:0; margin-right:0; border-radius:12px; height:160px; } }

/* --- buttons: quiet by default; one main button a page is filled honey ----------------------- */
button, input, select, textarea { font:16px var(--plain); border-radius:8px;
  border:1px solid var(--violet); background:#efe3c9; color:#2A1D35; padding:7px 10px; }
select { max-width:100%; }   /* a resource's whole name never widens the page on a phone */
button { background:transparent; color:var(--honey); border-color:var(--honey); cursor:pointer; }
button.quiet { border-color:var(--violet); }
button[disabled] { color:var(--dim); border-color:var(--violet); cursor:default; }
/* The music switch (jobs M2, UXB1): a slim row of its own at the very top of the page, right-aligned,
   in the flow so it can never lie over words (it sits in the page's 12px top padding, so the page
   below loses only 22px); its tap area is wider than it looks; the 3D view has its own, worded the same. */
.music-switch { position:relative; display:block; margin:-12px 0 0 auto; height:22px; min-height:0; padding:0 10px;
  font-size:12px; line-height:20px; border-radius:999px; background:rgba(42,29,53,.78); color:var(--bone);
  border-color:rgba(234,216,182,.3); }
.music-switch::after { content:""; position:absolute; inset:-12px -6px; }   /* a thumb's size to tap */
a.button { display:inline-block; background:transparent; color:var(--honey); border:1px solid var(--honey);
  border-radius:8px; padding:6px 12px; text-decoration:none; font:16px var(--plain); }
button.main, a.button.main { background:var(--honey); color:var(--night); border:0; border-radius:10px;
  padding:13px 14px; font:600 16px var(--plain); }   /* ordinary capitals, so a long label wraps like words */
.tap button.chip { background:transparent; color:var(--dim); border:1px solid var(--violet); font-size:14px;
  padding:4px 10px; border-radius:16px; }
.tap button { margin:4px 6px 4px 0; }
form.inline { display:inline; }
textarea { width:100%; min-height:70px; }
input[size="3"], input[size="4"] { width:4.2em; }
label.choice { display:block; padding:8px 10px; margin:4px 0; border-radius:8px; background:var(--card); }
input[type=checkbox] { accent-color:var(--honey); }
input[type=radio] { appearance:none; width:18px; height:18px; padding:0; margin:0 4px 0 0; border-radius:50%;
  border:2px solid var(--dim); background:transparent; vertical-align:-3px; cursor:pointer; }   /* not the browser's white dots */
input[type=radio]:checked { border-color:var(--honey); background:radial-gradient(var(--honey) 40%, transparent 46%); }
:focus-visible { outline:2px solid var(--honey); outline-offset:2px; }
summary::marker { color:var(--amber); }

/* --- Today (job U2): the day's cards, each with its picture ---------------------------------- */
.daycards { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 14px; }
.daycard, .daycards form button { position:relative; display:block; width:100%; min-height:84px; overflow:hidden;
  padding:0 10px 9px; border-radius:12px; background:var(--card); border:1px solid var(--violet);
  color:var(--dim); text-decoration:none; text-align:left; font:13.5px/1.35 var(--plain);
  box-shadow:0 3px 0 #1d1426; }
.daycard img { display:block; width:calc(100% + 20px); height:auto; margin:0 -10px 6px; aspect-ratio:2.4/1;
  object-fit:cover; background:var(--violet); }
.daycard strong { display:block; color:var(--bone); font:500 15px/1.3 var(--carved); letter-spacing:.06em;
  margin-bottom:2px; }
.daycard .tag { position:absolute; top:7px; left:7px; font:12px var(--plain); color:var(--honey);
  background:rgba(42,29,53,.85); border:1px solid var(--honey); border-radius:12px; padding:1px 8px; }
.daycard.lack, .daycard.needs { box-shadow:none; border-style:dashed; }
.daycard.lack img, .daycard.needs img { filter:grayscale(.85) brightness(.7); }
.daycard.lack strong, .daycard.needs strong { color:var(--dim); }
.daycard.needs .why { color:var(--dim); }   /* "Not yet: you need ...": dimmed, but it still opens to say who supplies it (UXB9) */
.daycard .practice { display:block; font-style:normal; color:var(--honey); font-size:12.5px; }
.practice-note { color:var(--dim); font:13px/1.35 var(--plain); margin:0 0 10px; }
.compass .step .known { display:block; color:var(--dim); font-size:12px; line-height:1.25; }
.daycards form { margin:0; }
form.same { margin:22px 0 4px; }
form.same label.choice { display:block; padding:12px; border-radius:10px; background:var(--card); }
form.same strong { color:var(--honey); font:600 17px var(--plain); }   /* the one pre-selected choice (UXB11); the gold bar gives it (UXB12) */
.day-bar { z-index:2; }
.train-now { margin:8px 0 2px; }
.train-now button, a.train-now { display:inline-block; padding:8px 14px; font-weight:600; }
a.train-now { border:1px solid var(--honey); border-radius:8px; text-decoration:none; }
.train-now small { display:block; color:var(--dim); font-size:13px; margin-top:4px; }
.free, .chips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
.free a, .chips a { border:1px solid var(--violet); border-radius:16px; padding:5px 12px; text-decoration:none;
  font:15px var(--plain); }
.back { display:inline-block; margin:6px 0 0; text-decoration:none; font:15px var(--plain); }
.compass { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:6px 0; }
.compass label, .compass .here { display:block; min-height:64px; padding:8px 6px; border-radius:8px;
  background:var(--card); text-align:center; font:14px/1.3 var(--plain); }
.compass .here { background:transparent; border:1px dashed var(--violet); color:var(--dim); padding-top:20px; }
.compass .none { opacity:.35; }
.compass .walked { padding-top:10px; color:var(--dim); border-style:solid; }
.compass .walked strong { color:var(--dim); }
.compass strong { display:block; color:var(--honey); font-weight:600; }
.compass input { margin:0 0 2px; }
.compass label:has(input:checked) { outline:2px solid var(--honey); }
/* Beasts and plants' step onto the land next to you (job B9): two choices in each way's cell. */
.compass .step { padding:4px 3px; border-radius:8px; background:var(--card); text-align:center; font:14px/1.3 var(--plain); }
.compass .step label { min-height:0; padding:1px 2px; margin:0; line-height:1.15; background:transparent; }
.compass .step input { margin:0 2px 0 0; }
/* fixed (job IB10a): with UXB14's picture above it, the step's nine cells took the wild Beasts screen to 944 px
   of a phone's 844; tighter cells and a lower picture on a screen with the step bring it to 831 */
section.opened:has(.compass) > header.card-head { height:80px; }
label.choice small, .note { display:block; color:var(--dim); font:13px/1.35 var(--plain); margin-left:1.6em; }
label.choice:has(input:checked) { outline:2px solid var(--honey); }
html { scroll-padding-bottom:90px; }  /* a choice scrolled into view is never under the bar */
.orderbar { position:sticky; bottom:0; padding:10px 0; background:linear-gradient(transparent, var(--night) 30%);
  pointer-events:none; }
.orderbar button { width:100%; pointer-events:auto; }
.done { border:1px solid var(--honey); }
.done strong { color:var(--honey); }
p.choice.lack { padding:8px 10px; margin:4px 0; border:1px dashed var(--violet); border-radius:8px;
  color:var(--dim); font:14px/1.35 var(--plain); }

/* --- each profession's screen (job U2b, mockup 7) -------------------------------------------- */
a.opt, details.opt, div.opt { display:block; padding:10px 12px; margin:6px 0; border-radius:10px;
  background:var(--card); border:1px solid var(--violet); color:var(--bone); text-decoration:none;
  font:15px/1.35 var(--plain); }
a.opt strong, details.opt strong, div.opt strong { color:var(--bone); font:500 15px var(--carved);
  letter-spacing:.05em; }
a.opt small, details.opt small, div.opt small { display:block; color:var(--dim); font-size:13px; }
a.opt .go, details.opt .go { float:right; color:var(--honey); font-size:22px; line-height:1;
  transition:transform .2s; }
.lackrow { padding:7px 10px; margin:5px 0; border:1px dashed var(--violet); border-radius:8px;
  color:var(--dim); font:14px/1.35 var(--plain); }
.lackrow b { color:var(--bone); font-weight:600; }
.lackrow button { font-size:14px; padding:3px 10px; margin-left:4px; }
.lackrow form.buy { display:inline; margin:0; }
a.market { display:block; border:1px solid var(--honey); border-radius:10px; padding:10px 12px;
  text-decoration:none; font:16px var(--plain); }
a.market small { display:block; color:var(--dim); font-size:13px; }

/* --- Here and Trade (job U4): places as rows, Buy or Sell, one kind of goods ---------------------- */
details.opt > summary { cursor:pointer; list-style:none; }
details.opt[open] .go { transform:rotate(90deg); }
div.opt.lack { background:transparent; border-style:dashed; }
div.opt form p { margin:8px 0 0; }
.work { margin:6px 0 10px; font:15px/1.35 var(--plain); }
.seg { display:flex; gap:6px; margin:8px 0 10px; }
.seg a { flex:1; text-align:center; padding:8px 0; border:1px solid var(--violet); border-radius:8px;
  text-decoration:none; font:600 15px var(--plain); }
.seg a.on, .chips a.on { border-color:var(--honey); color:var(--honey); background:var(--card); }
.chips { margin-bottom:10px; }
.chips a { color:var(--bone); }
table.shop td { vertical-align:middle; }
table.shop td small { display:block; color:var(--dim); font-size:13px; }
form.buy { display:flex; align-items:center; gap:4px; justify-content:flex-end; flex-wrap:wrap; }
.stepper { display:inline-flex; align-items:center; }
.stepper button { min-width:34px; padding:6px 0; color:var(--honey); }
.stepper input { width:3em; text-align:center; padding:6px 2px; }
form.buy button.total { white-space:nowrap; }
.qual { height:8px; border-radius:4px; background:var(--violet); overflow:hidden; margin:4px 0 2px; }
.qual i { display:block; height:100%; background:linear-gradient(90deg, var(--amber), var(--honey)); }
.qual + p { font:14px/1.4 var(--plain); margin-top:2px; }   /* the bar's caption: a number */
/* A resource's stat (job UXB15): its name and number, then the bar with a pale tick where the average of its kind
   stands, and how far above or below it is written beside it, so colour is never the only thing that says it. */
.stat-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; }
.stat .vs { font:600 14px var(--plain); color:var(--bone); }
.qual.statbar { position:relative; overflow:visible; height:10px; margin:6px 0 4px; }
.qual.statbar > i { border-radius:5px 0 0 5px; }
.qual.statbar > .avg { position:absolute; top:-4px; bottom:-4px; width:3px; margin-left:-1.5px; border-radius:1px;
  background:var(--bone); box-shadow:0 0 0 1px var(--night); }
/* a quality's colour against the average of its kind read so far (job RC1): five steps in the
   town's palette. No mark beside the colour (job RC2; his words, 8 Nov night: "I don't need color
   coding and triangles, they give me the same information") */
/* the resource's picture, when the art line has an approved one (job RC2): the whole width, in
   the picture's own shape; with none there is no element at all, so no gap */
section.resource > img.find { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:8px; margin:8px 0; }
/* A map's worth (job MV1): its line takes the colour of its rarest find; common is white, legendary gold */
.worth-common { color:#fff; }
.worth-uncommon { color:#8FD98F; }
.worth-rare { color:#6FB1F2; }
.worth-very-rare { color:#C58BF0; }
.worth-legendary { color:#FFD24A; font-weight:600; }
.band { padding:1px 7px; border-radius:4px; border:1px solid var(--violet); white-space:nowrap; }
.band-top { background:var(--far); color:var(--night); border-color:var(--far); }
.band-above { background:var(--honey); color:var(--night); border-color:var(--honey); }
.band-below { background:#C97A4A; color:var(--night); border-color:#C97A4A; }
.band-low { background:var(--rust-fill); color:var(--bone); border-color:var(--rust-fill); }
.work > .band-top ~ .qual i { background:var(--far); }      /* the bar agrees with its tag */
.work > .band-above ~ .qual i { background:var(--honey); }
.work > .band-below ~ .qual i { background:#C97A4A; }
.work > .band-low ~ .qual i { background:var(--rust); }
p.key.note { margin-left:0; line-height:2; }
.wall-note { margin:.6em 0; padding:.4em .7em; border-left:3px solid #8FE3D6; font:14px/1.4 var(--plain); }

/* --- Lots and homes (job P3): the town page's rows, one lot's page ----------------------------- */
.lotrow { display:flex; align-items:center; gap:8px; padding:8px 10px; margin:4px 0; border-radius:8px;
  background:var(--card); border:1px solid var(--violet); }
.lotrow.mine, .lotrow.ready { border-color:var(--honey); }
.lotname { flex:1; min-width:0; color:var(--bone); text-decoration:none; font:15px/1.35 var(--plain); }
.lotname strong { font:500 15px var(--carved); letter-spacing:.05em; }
.lotfacts { color:var(--dim); font-size:14px; }
.lotname small { display:block; color:var(--dim); font-size:13px; }
.lotname small.good { color:var(--honey); }
.lotbuy { flex:none; padding:7px 16px; border:1px solid var(--honey); border-radius:8px; color:var(--honey);
  text-decoration:none; font:600 15px var(--plain); }
.credit-line { color:var(--amber); font:15px/1.35 var(--plain); }
ul.needs li.need { padding:8px 10px; margin:4px 0; border:1px dashed var(--violet); border-radius:8px;
  font:15px/1.4 var(--plain); }
ul.needs li.need.enough { border-style:solid; border-color:var(--amber); }
ul.needs li.need small { display:block; font-size:13px; }
ul.needs form.inline { display:block; margin:6px 0 0; }
section.lot button.main[disabled] { background:transparent; color:var(--dim); border:1px dashed var(--violet); }
ol.steps { list-style:none; counter-reset:step; margin:10px 0; padding:0; }
li.step { counter-increment:step; position:relative; padding:3px 0 3px 30px; font:15px/1.4 var(--plain); }
li.step::before { content:counter(step); position:absolute; left:0; top:3px; width:21px; line-height:19px; text-align:center;
  border:1px solid var(--violet); border-radius:50%; font-size:13px; }
li.step.done { color:var(--dim); border:0; }
li.step.done::before { content:"\2713"; color:var(--amber); border-color:var(--amber); }

/* --- small icons (game-icons.net, CC BY 3.0: icons/CREDITS.txt), in the colour of their text -- */
i.icon { display:inline-block; width:1.15em; height:1.15em; vertical-align:-.22em; margin-right:.3em;
  background:currentColor; -webkit-mask:var(--icon) center / contain no-repeat;
  mask:var(--icon) center / contain no-repeat; }
i.icon.way { --icon:url("icons/way.dc9af6115765.svg"); }
i.icon.coin { --icon:url("icons/coin.163eeb19a617.svg"); }
i.icon.meal { --icon:url("icons/meal.a001ce700715.svg"); }
i.icon.seed { --icon:url("icons/seed.7fb3a43e25b5.svg"); }
.credit { font:12px var(--plain); color:var(--dim); margin:14px 0 0; }
.credit a { color:var(--dim); }

/* --- You: the professions' round portraits --------------------------------------------------- */
img.face { width:46px; height:46px; border-radius:50%; border:2px solid var(--amber); vertical-align:middle;
  margin-right:10px; object-fit:cover; }
.chips span { padding:3px 10px; border:1px solid var(--violet); border-radius:16px; font:14px var(--plain); }
.path { display:flex; align-items:flex-start; padding:6px 0; border-bottom:1px solid var(--violet); }
.path img.face { flex:none; }
.path-body { flex:1; min-width:0; }
.path .n { font:500 16px/1.2 var(--carved); letter-spacing:.05em; color:var(--bone); }
.path .s, .path li.box { font:14px/1.3 var(--plain); margin:2px 0; }
.path li.box { padding:2px 0; }
.path li.box strong { color:var(--honey); font-weight:600; margin-right:4px; }
.path.new img.face { filter:grayscale(.6); opacity:.8; }
.path.new .n { color:var(--dim); }
.path details.release, .path details.release summary { display:inline; margin-left:4px; font-size:13px; cursor:pointer; }
.path .next form { margin:4px 0 2px; }
.bar { height:6px; border-radius:3px; background:var(--violet); overflow:hidden; margin:2px 0 6px; }
.bar i { display:block; height:100%; background:linear-gradient(90deg, var(--amber), var(--honey)); }
/* You's folds (job U5): your finds, what you carry and store, sign out (feedback and the three questions are their own tab since U8) */
.folds { margin-top:0; font-family:var(--plain); }
.folds > :first-child { border-top:0; }   /* the last profession's rule is enough */
.fold { display:flex; justify-content:space-between; align-items:center; margin:0; padding:12px 4px;
  border-top:1px solid var(--violet); color:var(--bone); text-decoration:none; font-size:16px; }
/* job FW10: Groups shares the Codex's row; the Codex row's own look lives here so its link stays a plain fold */
.codex-row { display:flex; gap:16px; }
.codex-row > .fold:first-child { flex:1; border-top:0; white-space:nowrap; }
.fold .count { color:var(--honey); margin:0 10px 0 auto; }
a.fold::after, details.fold > summary::after { content:"\203A"; color:var(--dim); }
details.fold { display:block; }
details.fold > summary { display:flex; justify-content:space-between; cursor:pointer; list-style:none; }
details.fold > summary::-webkit-details-marker { display:none; }
details.fold[open] > summary::after { transform:rotate(90deg); }
form.fold { border-bottom:1px solid var(--violet); }
details.box > summary { cursor:pointer; }
/* The phone section (job PH1): the one big button, then the taps for this browser */
.phone-box { padding:12px 4px; border-top:1px solid var(--violet); font-size:16px; }
.phone-box[hidden] { display:none; }
/* the phone prompt on the first Today (job UXB7): one slim row, the button and "Not now" */
.phone-strip { display:flex; align-items:center; gap:12px; padding:4px 10px; margin:6px 0; }
.phone-strip .phone-box { flex:1; border-top:0; padding:0; }
.phone-strip .phone-box button[data-install] { margin-top:0; }
.phone-strip .not-now { font:14px var(--plain); white-space:nowrap; }
.phone-box button[data-install] { display:block; width:100%; margin-top:8px; }
.phone-box ol { margin:10px 0 6px; padding-left:22px; }
.phone-box li { margin:6px 0; }

/* --- Tester feedback (job U8): Rose, Thorn or Root, a few words, an optional photo ------------ */
fieldset.kinds { border:0; padding:0; margin:4px 0 6px; }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:0; border:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }
label.kind { cursor:pointer; }
label.choice, label.addphoto, .photo button { -webkit-tap-highlight-color:transparent; }   /* no blue flash on a tap */
label.kind strong { font:500 16px var(--carved); letter-spacing:.05em; color:var(--bone); }
label.field { display:block; margin:10px 0 4px; font:15px var(--plain); color:var(--bone); }
textarea { box-sizing:border-box; }
.photo { margin:12px 0 0; font-family:var(--plain); }
.photo [hidden] { display:none !important; }   /* over .chosen and .addphoto own display */
label.addphoto { display:block; padding:11px 12px; border:1px dashed var(--honey); border-radius:10px;
  color:var(--honey); text-align:center; font-size:15px; cursor:pointer; }
.photo input:focus-visible + label.addphoto { outline:2px solid var(--honey); outline-offset:2px; }
.photo .chosen { display:block; padding:9px 12px; border:1px solid var(--violet); border-radius:10px;
  color:var(--bone); font-size:15px; }
.photo .chosen button { font-size:14px; padding:3px 10px; margin-left:4px; }
.photo small { display:block; color:var(--dim); font-size:13px; margin-top:4px; }
.notes button.main { width:100%; }
p.tell { font:13px/1.35 var(--plain); color:var(--dim); margin:4px 0 10px; }
ul.sent li { font:14px/1.4 var(--plain); border-bottom:1px solid var(--violet); }
ul.sent strong, .tnote .meta strong { color:var(--honey); font-weight:600; margin-right:4px; }
.tnote .meta, .tnote .browser { font:13px var(--plain); color:var(--dim); margin:6px 0; }
.tnote .browser { font-size:12px; overflow-wrap:anywhere; }
.tnote .text { font:16px/1.4 var(--plain); margin:6px 0; }
.tnote img { display:block; width:auto; max-width:100%; max-height:45vh; object-fit:contain; border-radius:8px; }
/* The whole skill trees (job S2): each profession a picture of its boxes, then what each box does */
.whole-tree { float:right; padding:6px 0 6px 12px; margin:-6px 0; font:13px/1.3 var(--plain); letter-spacing:0; white-space:nowrap; }
.tree { border-bottom:1px solid var(--violet); scroll-margin-top:8px; }
.tree > summary { display:flex; align-items:center; padding:10px 0; cursor:pointer; list-style:none; }
.tree > summary::-webkit-details-marker { display:none; }
.tree > summary::after { content:"›"; margin-left:auto; padding-left:8px; color:var(--honey); font-size:24px; line-height:1; transition:transform .15s; }
.tree[open] > summary::after { transform:rotate(90deg); }
.tree img.face { flex:none; }
.tree:not([open]) img.face { filter:grayscale(.3); }
.tree-title { display:flex; flex-direction:column; min-width:0; }
.tree .n { font:500 16px/1.3 var(--carved); letter-spacing:.05em; color:var(--bone); }
.tree .s { font:14px/1.4 var(--plain); margin:3px 0; }
.tree .bar { margin-top:4px; }
.tree-map { display:flex; flex-direction:column; margin:2px 0 14px; }
.tree-map > .node { width:50%; align-self:center; box-sizing:border-box; }
.tree-lines { display:flex; gap:10px; }
.tree-line { display:flex; flex-direction:column; flex:1; min-width:0; }
.tree-line::after { content:""; flex:1; align-self:center; border-left:2px solid var(--violet); }
.node { display:block; position:relative; box-sizing:border-box; min-height:40px; padding:10px 4px; border:1px solid var(--violet); border-radius:10px;
  color:var(--bone); font:14px/1.2 var(--plain); text-align:center; text-decoration:none; overflow-wrap:anywhere; }
.tree-line .node + .node { margin-top:16px; }
.tree-line .node + .node::before { content:""; position:absolute; top:-17px; left:50%; height:16px; margin-left:-1px; border-left:2px solid var(--violet); }
.node.held { background:var(--violet); border-color:var(--amber); font-weight:600; }
.node.held::after { content:" ✓"; color:var(--honey); }
.node.next { background:var(--card); border:2px solid var(--honey); color:var(--honey); padding:9px 3px; }
.node.ready { box-shadow:0 0 10px var(--honey); font-weight:600; }
.node.begin { background:var(--card); border:2px dashed var(--amber); padding:9px 3px; }
.node.ahead { color:var(--dim); }
.node.waits { color:var(--dim); border-style:dashed; background:none; }
.node-bar { display:block; height:4px; margin:5px 4px 0; border-radius:2px; background:var(--violet); overflow:hidden; }
.node-bar i { display:block; height:100%; background:var(--honey); }
.fork { position:relative; height:16px; }
.fork::before { content:""; position:absolute; top:0; left:50%; height:100%; margin-left:-1px; border-left:2px solid var(--violet); }
.fork.split::before { height:8px; }
.fork.split::after { content:""; position:absolute; top:8px; left:calc(25% - 3px); right:calc(25% - 3px); height:8px; border:2px solid var(--violet); border-bottom:0; box-sizing:border-box; }
.fork.join::before { top:auto; bottom:0; }
.fork.join::after { top:0; border:2px solid var(--violet); border-top:0; }
.fork.join.half::after { right:calc(50% - 1px); border-right:0; }
.tree-boxes { margin:0 0 12px; }
.tree-box { padding:10px 8px; border-top:1px solid var(--violet); scroll-margin-top:8px; font:14px/1.4 var(--plain); }
.tree-box strong { color:var(--bone); font-weight:600; }
.tree-box.held strong, .tree-box.next strong { color:var(--honey); }
.tree-box .mark { color:var(--honey); font-size:13px; margin-left:4px; }
.tree-box.waits .mark { color:var(--dim); }
.tree-box:target { background:var(--card); border-radius:8px; }

/* A resource's name opens its card (job T1). A small circled "i" after it says it explains itself: a phone
   has no hover for a dotted line to hint at (job UXB15). */
a.res { text-decoration:none; padding:3px 0; }
a.res.see { font-size:13px; white-space:nowrap; }
a.res::after, button.word::after { content:"i"; display:inline-block; width:1.15em; height:1.15em; margin-left:.3em;
  border:1px solid var(--honey); border-radius:50%; color:var(--honey); font:600 .66em/1.15em var(--plain);
  text-align:center; vertical-align:.18em; }
a.res.see::after { content:none; }
/* A resource's own made-up name, beneath its type (the UX audit, 10 Nov). */
small.spawn { display:block; color:var(--dim); font-size:13px; }
/* The odd word (job T2): the same mark, and one line beneath it on a tap. */
button.word { font:inherit; color:inherit; background:none; border:0;
  border-radius:0; padding:3px 0; margin:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.word-line { font:14px/1.4 var(--plain); color:var(--bone); margin:2px 0 10px; padding:6px 10px;
  border-left:2px solid var(--honey); background:var(--card); border-radius:0 8px 8px 0; }
.see-row { display:block; color:var(--dim); font-size:13px; line-height:1.9; margin:2px 0; }
.opt-see { display:flex; align-items:center; gap:10px; }
.opt-see a.opt { flex:1; min-width:0; }
.resource .opt p { margin:4px 0 0; font-size:14px; }
/* The Goals tab (job GT2; the designer's four screens, research/first-goal-ux/proposal.png). */
nav a { position:relative; }
nav .dot { position:absolute; top:2px; left:calc(50% + 7px); width:8px; height:8px; border-radius:50%; background:var(--rust);
  box-shadow:0 0 0 2px #21162b; }
.goal-ask { font:italic 20px/1.35 var(--world); margin:4px 0 14px; }
a.goal-card { display:block; background:var(--card); border:1px solid var(--violet); border-radius:14px; padding:12px 14px;
  margin:8px 0; color:var(--bone); text-decoration:none; font:15px/1.4 var(--plain); }
a.goal-card.most, a.goal-card.following { border:2px solid var(--honey); padding:11px 13px; }
.goal-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:3px; }
.goal-head .t { font:500 16px var(--carved); letter-spacing:.04em; color:var(--bone); }
.goal-head .tag { font:600 12.5px var(--plain); color:var(--honey); white-space:nowrap; }
.goal-head .pct { font:13px var(--plain); color:var(--dim); }
.goal-next b { color:var(--honey); font-weight:600; }
.goal-card small { display:block; color:var(--dim); font-size:13px; margin-top:3px; }
.goal-card .said { display:block; color:var(--dim); font-size:13px; margin-top:6px; }
.goal-card .moved { display:block; color:var(--honey); font-size:12.5px; margin-top:4px; }
.goal-bar { height:8px; border-radius:4px; background:var(--violet); overflow:hidden; margin:6px 0 8px; }
.goal-bar i { display:block; height:100%; background:var(--honey); }
details.goal-more { background:var(--card); border:1px solid var(--violet); border-radius:14px; padding:12px 14px; margin:8px 0; font:15px/1.4 var(--plain); }
details.goal-more summary { list-style:none; cursor:pointer; color:var(--bone); }
details.goal-more summary .t { font:500 16px var(--carved); letter-spacing:.04em; }
details.goal-more summary .count { color:var(--dim); font-size:13px; }
details.goal-more summary small { display:block; color:var(--dim); font-size:13px; }
details.goal-more[open] summary small { display:none; }
ol.goal-steps { list-style:none; margin:8px 0; padding:0; font:15px/1.4 var(--plain); }
ol.goal-steps li { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--violet); }
ol.goal-steps li:last-child { border-bottom:0; }
ol.goal-steps .num { flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--violet); color:var(--dim);
  display:flex; align-items:center; justify-content:center; font-size:13px; }
ol.goal-steps li.goal-lit .num { border-color:var(--honey); color:var(--honey); }
ol.goal-steps li.goal-done .num { background:var(--honey); border-color:var(--honey); color:var(--night); }
ol.goal-steps li.goal-done { color:var(--dim); }
ol.goal-steps li.goal-lit { color:var(--bone); font-weight:500; }
.goal-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.goal-chips button { background:transparent; color:var(--dim); border:1px solid var(--violet); border-radius:16px; padding:5px 11px; font-size:14px; }
.goal-chips button[aria-pressed="true"] { color:var(--honey); border-color:var(--honey); }
.goal-week { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; margin:8px 0; }
.goal-week .box { background:transparent; border:1px solid var(--violet); border-radius:8px; padding:4px 1px; margin:0; text-align:center; font:11.5px/1.3 var(--plain); color:var(--honey); }
.goal-week .box.today { border-color:var(--dim); color:var(--dim); }
.goal-week .box b { display:block; font-weight:500; color:var(--bone); }
.goal-reached { border:2px solid var(--honey); border-radius:14px; padding:12px 14px; margin:8px 0; background:var(--card); font:15px/1.4 var(--plain); }
.goal-reached .from { color:var(--honey); font:600 13px var(--plain); margin:0; }
.goal-reached h2 { margin:2px 0 6px; }
.goal-later { border:1px dashed var(--violet); border-radius:12px; padding:10px 12px; margin:8px 0; color:var(--dim); font:14.5px/1.4 var(--plain); }
a.opt[hidden] { display:none; }   /* the ways to earn: one shown at a time */
form.goal-follow { margin:6px 0 10px; }
/* which resource goes in (job CD4): a slot, closed on your best, opened on its spawns */
.slot { background:var(--card); border:1px solid var(--violet); border-radius:10px; padding:8px 12px; margin:6px 0; }
.slot summary { position:relative; padding-right:18px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; }
.slot summary::-webkit-details-marker { display:none; }
.slot summary::after { content:"›"; position:absolute; right:0; top:50%; margin-top:-.6em; color:var(--honey); transition:transform .15s; }
.slot[open] summary::after { transform:rotate(90deg); }
.slot .picked { display:block; color:var(--dim); font:14px/1.35 var(--plain); }
.slot label.choice { background:none; }
.slot .chips { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 2px 1.6em; font:13px/1.5 var(--plain); }
.slot .effect { display:block; margin-left:1.6em; font:14px/1.35 var(--plain); }
.slot .effect b { color:var(--honey); font-weight:500; }
.slot p.choice.short { padding:8px 10px; margin:4px 0; border:1px dashed var(--violet); border-radius:8px; color:var(--dim); }
.slot p.choice.short small { display:block; font:13px/1.35 var(--plain); margin-left:1.6em; }
.slot p.choice.short .chips { margin-left:1.6em; }
/* Carried and the home store, side by side with both totals (the UX audit, 10 Nov). */
.holds { display:flex; gap:8px; margin:8px 0; }
.holds div { flex:1; background:var(--card); border-radius:8px; padding:8px 10px; }
.holds b, .holds span { display:block; }
.holds span { color:var(--dim); font-size:13px; }

/* The market and the pack as picture tiles (job UXB19; the UX audit, research/ux-audit/result.md, section 16):
   a grid of what there is, the picture, the count, a frame coloured by quality; a tap opens one sheet (sheet.js)
   with the stats, a slider and the one button (tiles.js). The frame is the same five-step band as the tags. */
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; margin:10px 0 14px; }
.tile { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
        padding:5px 5px 8px; background:var(--card); border:2px solid var(--violet); border-radius:12px;
        color:var(--bone); text-decoration:none; font:13px/1.25 var(--plain); min-width:0; }
.tile[data-band="top"] { border-color:var(--far); }
.tile[data-band="above"] { border-color:var(--honey); }
.tile[data-band="below"] { border-color:#C97A4A; }
.tile[data-band="low"] { border-color:var(--rust); }
.tile .pic { display:block; width:100%; aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--night); }
.tile .pic img { display:block; width:100%; height:100%; object-fit:cover; }
.tile .pic i { display:flex; width:100%; height:100%; align-items:center; justify-content:center;
               font:normal 34px var(--carved); color:var(--dim); }
.tile .n { font-weight:600; overflow-wrap:anywhere; }
.tile .spawn { display:block; color:var(--dim); font-size:11px; }
.tile .count { position:absolute; top:9px; right:9px; background:rgba(33,22,43,.88); border-radius:10px;
               padding:1px 7px; font:700 12px var(--plain); }
.tile .note { color:var(--honey); font-size:12.5px; }
.tile.off { opacity:.55; }
/* what a tile opens: kept on the page for the sheet to copy, shown only when the page is the whole thing */
.sheet-src { display:none; }
.sheet-src:target, .sheet .sheet-src { display:block; }
.tile-sheet { text-align:left; font-family:var(--plain); }
.tile-sheet h2 { font:500 19px var(--carved); margin:4px 0; }
.tile-sheet img.big { float:right; width:84px; height:84px; object-fit:cover; border-radius:10px; margin:0 0 6px 10px; }
.tile-sheet .stats { font:14px/1.45 var(--plain); color:var(--dim); margin:4px 0 10px; }
.tile-sheet form { margin:10px 0; }
.tile-sheet .slide { display:block; margin:0 0 8px; font:14px var(--plain); }
.tile-sheet .slide output { color:var(--honey); font-weight:700; margin-left:4px; }
.tile-sheet input[type=range] { display:block; width:100%; height:32px; accent-color:var(--honey); }
.tile-sheet button.total { width:100%; min-height:44px; }
.tile-sheet details.opt summary { cursor:pointer; list-style:none; }

/* --- You opens on what you own (UXB10): the totals of what the skills do, and release on the tree page --------- */
/* Scoped to .totals: button.total is the tile sheet's one button (UXB19). */
.totals { margin:18px 0 8px; font:14px/1.4 var(--plain); }
.totals h2 { margin:0 0 6px; }
.totals .total { padding:8px 0; border-top:1px solid var(--violet); }
.totals .total b { color:var(--honey); font-weight:600; }
.totals .total ul { margin:2px 0 0; }
.totals .total li { padding:1px 0; }
.tree-box details.release, .tree-box details.release summary { display:inline; margin-left:4px; font-size:13px; cursor:pointer; }
.folds.own .fold { padding-top:8px; padding-bottom:8px; }   /* a new player's five ways to begin still fit one screen under them */

/* --- The library (job WL2; research/world-mysteries-design/library/library.css and mock.html): the Mysteries tab's front,
   a mystery with its status bar, a site and a relic. Every colour and face is the game's. Scoped to .page-library, as
   the game's other pages already use some of these names (.tiles, .new, .mark). --------------------------------------- */
.page-library .entry[hidden], .page-library .shelf[hidden], .page-library #nofind[hidden] { display:none; }
.page-library form.find { display:flex; gap:8px; margin:6px 0 8px; }
.page-library form.find input { flex:1; height:42px; padding:0 12px 0 36px; border-radius:10px; font:15px var(--plain);
  background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9A88E' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='6'/><path d='M20 20l-4.5-4.5'/></svg>") no-repeat 10px 50% / 18px;
  color:var(--bone); border:1px solid var(--violet); }
.page-library .seg.four a { font:14px var(--plain); padding:7px 0; }
.page-library .toggles { display:flex; gap:8px; margin:-2px 0 8px; }
.page-library .toggles a { flex:none; padding:4px 11px; border:1px dashed var(--violet); border-radius:16px; font:13px var(--plain);
  color:var(--bone); text-decoration:none; }
.page-library .toggles a.on { border-style:solid; border-color:var(--honey); color:var(--honey); }
.page-library .new { display:inline-block; min-width:20px; padding:0 7px; border-radius:10px; background:var(--honey);
  color:var(--night); font:600 12px/20px var(--plain); text-align:center; white-space:nowrap; }
.page-library .since { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--honey);
  border-radius:12px; padding:10px 12px; margin:8px 0 6px; font:14.5px/1.4 var(--plain); }
.page-library .since b { color:var(--honey); font-weight:600; }
.page-library .since a { margin-left:auto; flex:none; padding:6px 12px; border:1px solid var(--honey); border-radius:8px;
  text-decoration:none; font:14px var(--plain); }
.page-library .shelf-head { display:flex; justify-content:space-between; align-items:baseline; margin:16px 0 4px; }
.page-library .shelf-head h2 { margin:0; }
.page-library .tiles { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:6px 0; }
.page-library a.tile-l { position:relative; display:block; background:var(--card); border:1px solid var(--violet); border-radius:10px;
  overflow:hidden; color:var(--bone); text-decoration:none; font:13px/1.3 var(--plain); }
.page-library a.tile-l.fresh { border-color:var(--honey); }
.page-library a.tile-l img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.page-library img.unseen { filter:grayscale(1) brightness(.7) contrast(.95); }
.page-library a.tile-l strong { display:block; padding:5px 7px 0; font:500 13px/1.25 var(--carved); letter-spacing:.03em; }
.page-library a.tile-l small { display:block; padding:1px 7px 7px; color:var(--dim); font-size:11.5px; }
.page-library a.tile-l .mark { position:absolute; top:6px; left:6px; padding:1px 7px; border-radius:9px; font:600 10.5px/16px var(--plain);
  background:rgba(42,29,53,.85); color:var(--far); border:1px solid var(--far); }
.page-library a.tile-l .badge { position:absolute; top:6px; right:6px; }
.page-library .owner { display:inline-block; margin:2px 7px 7px; padding:1px 8px; border:1px solid var(--violet); border-radius:10px;
  font:11.5px var(--plain); color:var(--bone); }
.page-library .walkline { margin:16px 0 4px; padding:10px 12px; border:1px solid var(--violet); border-radius:12px; font:14px/1.45 var(--plain); }
.page-library a.mcard { display:grid; grid-template-columns:92px minmax(0,1fr); gap:4px 12px; padding:10px; margin:8px 0;
  background:var(--card); border:1px solid var(--violet); border-radius:12px; color:var(--bone); text-decoration:none;
  font:14px/1.4 var(--plain); }
.page-library a.mcard.fresh { border-color:var(--honey); }
.page-library a.mcard img { grid-row:1 / span 3; width:92px; height:92px; object-fit:cover; border-radius:8px; }
.page-library a.mcard strong { font:500 16px/1.25 var(--carved); letter-spacing:.05em; }
.page-library a.mcard small { color:var(--dim); font-size:13px; }
/* the status bar: reached steps only, then an open end that fades out, "Unsolved" */
.page-library .sbar { display:flex; align-items:center; gap:4px; margin:6px 0 2px; }
.page-library .sbar a, .page-library .sbar i { flex:0 0 34px; height:10px; border-radius:5px; background:var(--far); opacity:.55; }
.page-library .sbar a { position:relative; }
.page-library .sbar a::before { content:""; position:absolute; inset:-17px -2px; }   /* a thumb-sized target round a thin segment */
.page-library .sbar a.on { opacity:1; }
.page-library .sbar a.cur, .page-library .sbar i.cur { opacity:1; background:var(--honey); box-shadow:0 0 0 2px var(--night), 0 0 0 3.5px var(--honey); }
.page-library .sbar .open { flex:1; height:10px; border-radius:5px; min-width:30px;
  background:linear-gradient(90deg, rgba(143,227,214,.35), rgba(143,227,214,0)); }
.page-library .sbar .state { flex:none; font:600 11.5px var(--plain); letter-spacing:.1em; text-transform:uppercase; color:var(--far); }
.page-library .sbar.small a, .page-library .sbar.small i { flex-basis:18px; height:7px; }
.page-library .sbar.small i.cur { box-shadow:none; }
.page-library .sbar.small .open { height:7px; }
/* the open step's card */
.page-library .stepcard { touch-action:pan-y; /* a sideways swipe is ours (it walks the steps); up and down still scrolls */ margin:10px 0; padding:12px 14px; background:var(--card); border:1px solid var(--far); border-radius:12px;
  box-shadow:0 0 14px rgba(143,227,214,.18); }
.page-library .stepcard .from { margin:0; font:600 11.5px var(--plain); letter-spacing:.14em; text-transform:uppercase; color:var(--far); }
.page-library .stepcard .said { margin:4px 0 6px; font:italic 22px/1.25 var(--world); }
.page-library .stepcard .more-said { margin:0 0 8px; font:italic 18px/1.35 var(--world); color:var(--bone); }
.page-library .stepcard .mine { margin:8px 0 0; padding:6px 10px; border:1px dashed var(--violet); border-radius:8px;
  font:italic 16px/1.3 var(--world); color:var(--dim); }
.page-library .stepcard .mine small { display:block; font:12px var(--plain); font-style:normal; color:var(--far); }
.page-library .stepnav { display:flex; justify-content:space-between; align-items:center; margin:8px 0 0; font:14px var(--plain); min-height:24px; }
.page-library .stepnav a { text-decoration:none; padding:6px 4px; }
.page-library .stepnav span { color:var(--dim); font-size:13px; }
.page-library .credits { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0; font:13px var(--plain); color:var(--dim); }
.page-library .hand { display:inline-block; padding:2px 10px; border:1px solid var(--honey); border-radius:14px; color:var(--honey);
  font:600 13px var(--plain); }
.page-library .hand.helped { border-color:var(--violet); color:var(--bone); font-weight:400; }
.page-library ol.roll { list-style:none; margin:4px 0; padding:0; font:15px/1.4 var(--plain); }
.page-library ol.roll li { padding:6px 0; border-bottom:1px solid rgba(92,71,114,.6); }
.page-library ol.roll li b { color:var(--honey); font-weight:600; }
.page-library ol.roll li span { color:var(--dim); font-size:13px; }
.page-library details.more > summary { list-style:none; cursor:pointer; padding:8px 2px; font:14px var(--plain); color:var(--honey); }
.page-library details.more > summary::-webkit-details-marker { display:none; }
.page-library details.more > summary::after { content:" \203A"; }
/* the picture: grey or colour */
.page-library .hero { position:relative; margin:6px 0 4px; border-radius:12px; overflow:hidden; border:1px solid var(--violet); }
.page-library .hero img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.page-library .hero .seen { position:absolute; left:10px; bottom:10px; padding:3px 10px; border-radius:999px; background:rgba(42,29,53,.85);
  font:12.5px var(--plain); color:var(--bone); }
.page-library .hero .seen.grey { color:var(--dim); }
.page-library .titlehead { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.page-library .titlehead h1 { margin:8px 0 4px; }
.page-library .relic-head { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; align-items:center; margin:10px 0; }
.page-library .relic-head img { width:110px; height:110px; object-fit:cover; border-radius:12px; border:1px solid var(--far);
  box-shadow:0 0 14px rgba(143,227,214,.3); }
.page-library .relic-head h1 { margin:0 0 4px; }
.page-library .facts { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; font:13px var(--plain); }
.page-library .facts span { padding:2px 9px; border:1px solid var(--violet); border-radius:12px; }
.page-library a.partof { display:inline-block; margin:4px 0 2px; font:14px var(--plain); text-decoration:none; border:1px solid var(--violet);
  border-radius:16px; padding:5px 12px; }
.page-library .empty { margin:8px 0; padding:14px; border:1px dashed var(--violet); border-radius:12px; text-align:left; }
.page-library .empty p.world, .page-library .empty .world { margin:0 0 4px; font-size:20px; }
.page-library .empty p.grey { margin:0 0 10px; font:14px/1.4 var(--plain); }
@media (min-width: 1000px) {
  .page-library .tiles { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .page-library .lib .tiles { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .page-library .hero img { aspect-ratio:21/9; }
}

/* --- Talk under the library's pages (job TK2) ----------------------------------------------------------------------
   Copied from research/mystery-talk-design/ui/mock.css and research/world-mysteries-design/library/library.css: the
   stream, a step's topic, players' topics, What we think (the most-liked posts; nothing is fixed to the top), the box
   with the world's line over it, and the "···" sheet. Every colour and face is the game's. Scoped to .page-library. */
.page-library h2.sec .aside { float:right; font:13px var(--plain); letter-spacing:0; text-transform:none; color:var(--dim); }
.page-library .count { font:13px var(--plain); color:var(--dim); white-space:nowrap; }
.page-library .talkof { display:inline-block; font:13.5px var(--plain); text-decoration:none; padding:6px 4px; }
.page-library .liked { border-left:3px solid var(--honey); background:var(--card); border-radius:0 10px 10px 0; padding:8px 12px; margin:6px 0;
  font:15px/1.45 var(--plain); overflow-wrap:anywhere; }
.page-library .liked .by { display:block; margin-top:3px; font:13px var(--plain); color:var(--dim); }
.page-library .liked .by b { color:var(--honey); font-weight:600; }
.page-library .liked .by .likes { color:var(--honey); }
.page-library a.morelink { display:inline-block; padding:6px 2px; font:14px var(--plain); text-decoration:none; }
.page-library .stream { background:#241a2c; border:1px solid var(--violet); border-radius:12px; padding:4px 12px 10px; margin:6px 0 4px; }
.page-library .stream-head { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0 2px; font:13px var(--plain); color:var(--dim); }
.page-library .stream-head a { text-decoration:none; }
.page-library .sline { font:15px/1.4 var(--plain); padding:4px 0; overflow-wrap:anywhere; }
.page-library .sline .n { color:var(--honey); font-weight:600; margin-right:5px; }
.page-library .sline time { color:var(--dim); font-size:12px; margin-left:6px; }
.page-library .sline.same { padding-top:0; }
.page-library .sline.same .n { display:none; }
.page-library .sline .acts { display:inline-flex; margin:0 0 0 8px; gap:10px; vertical-align:baseline; }
.page-library .daymark { display:flex; align-items:center; gap:10px; margin:12px 0 4px; font:12px var(--plain); letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); }
.page-library .daymark::before, .page-library .daymark::after { content:""; flex:1; border-top:1px solid var(--violet); }
.page-library .newline { display:flex; align-items:center; gap:10px; margin:10px 0 4px; font:600 12px var(--plain);
  letter-spacing:.08em; text-transform:uppercase; color:var(--honey); }
.page-library .newline::after { content:""; flex:1; border-top:1px solid var(--honey); }
.page-library p.heard { font:italic 16px/1.3 var(--world); color:var(--dim); margin:8px 0 6px; }
.page-library .composer { display:flex; gap:8px; align-items:flex-end; }
.page-library .composer textarea { flex:1; min-height:42px; height:42px; resize:vertical; padding:9px 10px; line-height:1.4; }
.page-library .composer textarea:focus, .page-library .composer textarea:not(:placeholder-shown) { height:72px; }
.page-library .composer button { flex:none; height:42px; padding:0 16px; background:var(--honey); color:var(--night); border:0; font:600 15px var(--plain); }
.page-library .composer button[disabled] { background:transparent; color:var(--dim); border:1px solid var(--violet); }
.page-library .composer-note { font:13px var(--plain); color:var(--dim); margin:4px 0 0; }
.page-library .composer-note.wait { color:var(--amber); }
.page-library .replybar { position:sticky; bottom:61px; z-index:2; margin:0 -16px; padding:6px 16px 10px;
  background:linear-gradient(rgba(42,29,53,0), var(--night) 18%); }
.page-library .topics-head { display:flex; justify-content:space-between; align-items:center; margin:16px 0 2px; }
.page-library .topics-head h3 { margin:0; font:500 15px var(--carved); letter-spacing:.06em; color:var(--bone); }
.page-library a.topic { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:10px 2px;
  border-bottom:1px solid var(--violet); color:var(--bone); text-decoration:none; font:15px/1.4 var(--plain); }
.page-library a.topic .t { font-weight:600; overflow-wrap:anywhere; }
.page-library a.topic small { color:var(--dim); font-size:13px; }
.page-library a.topic .side { grid-column:2; grid-row:1 / span 2; align-self:center; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.page-library p.note { font:13px var(--plain); }
.page-library .post { padding:10px 0; border-bottom:1px solid rgba(92,71,114,.6); font:16px/1.45 var(--plain); overflow-wrap:anywhere; }
.page-library .post .head { display:flex; gap:8px; align-items:baseline; font-size:14px; }
.page-library .post .head b { color:var(--honey); font-weight:600; }
.page-library .post .head time { color:var(--dim); font-size:12.5px; }
.page-library .post p { margin:3px 0 2px; }
.page-library .post.reported { color:var(--dim); font-size:14px; }
.page-library .post.reported summary { display:inline; cursor:pointer; color:var(--honey); }
.page-library .acts { display:flex; gap:16px; align-items:center; margin-top:4px; font:13px var(--plain); }
.page-library .acts form { display:inline; margin:0; }
.page-library .acts button { background:none; border:0; padding:4px 0; color:var(--dim); font:13px var(--plain); min-height:0; }
.page-library .acts button.on, .page-library .acts .likes { color:var(--honey); }
.page-library .acts a.more { margin-left:auto; padding:0 4px; font-size:18px; line-height:1; letter-spacing:.1em; text-decoration:none; color:var(--dim); }
.page-library .sline .acts a.more { margin-left:0; font-size:15px; }
.page-library details.fold-replies > summary { list-style:none; cursor:pointer; padding:10px 0; font:14px var(--plain); color:var(--honey);
  border-bottom:1px solid rgba(92,71,114,.6); }
.page-library details.fold-replies > summary::-webkit-details-marker { display:none; }
.page-library .gamepost { margin:10px 0 6px; padding:12px 14px; background:var(--card); border:1px solid var(--far);
  border-radius:12px; box-shadow:0 0 14px rgba(143,227,214,.22); }
.page-library .gamepost .from { margin:0; font:600 11.5px var(--plain); letter-spacing:.14em; text-transform:uppercase; color:var(--far); }
.page-library .gamepost .said { margin:4px 0 6px; font:italic 23px/1.25 var(--world); color:var(--bone); }
.page-library .gamepost .more-said { margin:0 0 8px; font:italic 18px/1.35 var(--world); color:var(--bone); }
.page-library .newpill { position:absolute; left:50%; transform:translateX(-50%); top:-30px; z-index:4; padding:7px 16px; border:0;
  border-radius:999px; background:var(--honey); color:var(--night); font:600 13px var(--plain); box-shadow:0 4px 14px rgba(0,0,0,.45); }
.page-library .newpill[hidden] { display:none; }
.page-library .talkpage .intro { font:14px/1.4 var(--plain); margin:0 0 6px; }
.page-library .talkpage .startedby { font:14px var(--plain); margin:-4px 0 6px; }
.page-library .talkpage label.field { display:block; margin:10px 0 4px; font:14px var(--plain); color:var(--dim); }
.page-library .talkpage input[name=title] { width:100%; box-sizing:border-box; }
.page-library .talkpage .newtopic textarea[name=text] { min-height:150px; }
.page-library .talkpage .newtopic button.main { width:100%; }
/* the "···" sheet: its source sits hidden beside each post; sheet.js shows a copy (with no script, the address shows it) */
.page-library .postmore { display:none; }
.page-library .postmore:target, .sheet .postmore { display:block; }
.postmore .sheet-title { display:block; margin:.2rem 0 .4rem; font:500 1.3rem var(--carved); }
.postmore .preview { display:block; margin:6px 0 10px; padding:8px 12px; border-left:3px solid var(--amber); background:var(--card);
  border-radius:0 10px 10px 0; font:15px/1.45 var(--plain); overflow-wrap:anywhere; }
.postmore .preview b { color:var(--honey); }
.postmore .tell { display:block; margin:8px 0; font:14px/1.4 var(--plain); color:var(--dim); }
.postmore label.choice { display:block; padding:6px 0; font:15px var(--plain); }
.postmore textarea { min-height:56px; margin-top:6px; }
.postmore button.main { width:100%; }
@media (min-width: 840px) { .page-library .replybar { bottom:0; } }
@media (min-width: 1000px) {
  main.page-library:has(> .lib) { max-width:1100px; }
  .page-library .lib { display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:32px; align-items:start; }
  .page-library .lib > .left { position:sticky; top:12px; }
  .page-library .lib > .right > h2.sec:first-child { margin-top:14px; }
  .page-library .replybar { margin:0; padding-left:0; padding-right:0; }
}

/* A keepsake on your wall at home (job PX5): the picture of the piece it was, greyed and dimmed with a small Kept
   ribbon across its corner, as it no longer works; its line beside it. */
.line.keepsake { display:flex; gap:10px; align-items:center; margin:6px 0; }
.line.keepsake small { display:block; font:13px var(--plain); font-style:normal; }
.kept { position:relative; flex:0 0 120px; height:80px; overflow:hidden; border-radius:6px;
        border:1px solid var(--violet); }
.kept img { display:block; width:120px; height:80px; object-fit:cover; filter:grayscale(1) brightness(.75); }
.kept-ribbon { position:absolute; top:10px; right:-26px; width:96px; transform:rotate(35deg); text-align:center;
               background:var(--rust-fill); color:var(--bone); font:600 11px/18px var(--plain);
               letter-spacing:.08em; text-transform:uppercase; font-style:normal; }