/* 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.

   Three voices, from our own site (fonts/, with their SIL Open Font Licences; no font service):
   Cinzel's carved capitals for titles, the day and the main button; Cormorant Garamond's italic
   for the world speaking (the morning's stories, rumours, relics, the Crier); plain type for what
   a tap does, costs and numbers. */
@font-face { font-family:"Cinzel"; src:url("fonts/cinzel-latin.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.woff2") format("woff2"); font-display:swap; }

:root { --night:#2A1D35; --violet:#5C4772; --card:#3A2A48; --bone:#EAD8B6; --honey:#F2C06A;
        --amber:#E0A061; --rust:#A4512D; --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 Georgia, "Times New Roman", serif; }
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; }
main.tabbed { padding-bottom:84px; }   /* nothing hides under the tabs */
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:500 12.5px var(--carved); letter-spacing:.1em; text-transform:uppercase; 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); }
.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 { text-align:center; 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); }
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:500 17px var(--carved); letter-spacing:.12em; margin:14px 10px 6px; }
details.present .tap { font:13px system-ui, sans-serif; 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 */
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); }
.msg.hurt { background:transparent; border:1px solid var(--rust); color:#e9b9a2; }   /* a cost that hurts */
.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 { 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 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; }
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; }
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 15px var(--carved); letter-spacing:.08em; }
.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 { box-shadow:none; border-style:dashed; }
.daycard.lack img { filter:grayscale(.85) brightness(.7); }
.daycard.lack strong { color:var(--dim); }
.daycards form { margin:0; }
form.same { margin:22px 0 4px; }
form.same button { display:block; width:100%; text-align:left; background:transparent; color:var(--honey);
  border:1px solid var(--honey); border-radius:10px; padding:10px 12px; font:17px var(--plain); }
form.same small { display:block; color:var(--dim); font-size:13px; }
.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:6px 4px; border-radius:8px; background:var(--card); text-align:center; font:14px/1.3 var(--plain); }
.compass .step label { min-height:0; padding:3px 2px; margin:2px 0; background:transparent; }
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:8px 10px; margin:6px 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:500 15px var(--carved); letter-spacing:.05em; }
.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 */

/* --- 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.svg"); }
i.icon.coin { --icon:url("icons/coin.svg"); }
i.icon.meal { --icon:url("icons/meal.svg"); }
i.icon.seed { --icon:url("icons/seed.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:10px 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.3 var(--carved); letter-spacing:.05em; color:var(--bone); }
.path .s, .path li.box { font:14px/1.4 var(--plain); margin:3px 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; }
.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; }

/* --- 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; }
.seg .count { font:15px var(--plain); letter-spacing:0; }   /* numbers in plain type: Cinzel's 1 reads as I */