/*
  Stoneworks Market: a merchant's ledger printed like an ukiyo-e woodblock.
  Day: indigo sky shading down to the horizon, a vermilion sun, breaking waves, gold mist bands on washi.
  Night: the same print after dark, with a pale moon.
  Everything themeable is a variable below. If you change the dark values, change BOTH dark blocks (they are identical).
*/

:root {
  color-scheme: light;
  --bg: #f1ebdf;
  --sky: #dbe4ec;
  --paper: #fbf8f1;
  --paper-2: #f3eee3;
  --field: #fffdf8;
  --rule: #ddd5c3;
  --rule-strong: #b3a98f;
  --control-edge: #8a8270; /* borders of fields and buttons: at least 3:1 (WCAG 1.4.11) */
  --text: #1b1e25;
  --text-2: #464a53;
  --text-3: #66696e;
  --ai: #1f4672;
  --ai-deep: #142f50;
  --ai-text: #1d4877;
  --ai-tint: #dfe7f1;
  --on-ai: #f7f4ec;
  --shu: #c63f27;
  --shu-deep: #922c1a;
  --shu-text: #b0331f;
  --shu-tint: #f6dfd7;
  --on-shu: #ffffff;
  --kin: #b8893a;
  --patina: #3b6a58;
  --patina-tint: #dbe6df;
  --rust: #8a4a2a;
  --lamp: #8a6200;
  --lamp-tint: #f2e6c4;
  --iron: #15233a;
  --iron-2: #24426b;
  --iron-edge: #0c1526;
  --plate-text: #f3efe4;
  --plate-muted: #b3c1d6;
  --timber: #1a2230;
  --timber-2: #2a3446;
  --timber-text: #eef2f7;
  --noren: #1f4672;
  --noren-hi: #2a5a8f;
  --noren-text: #f5f2e8;
  --hdr-top: #0b1a31;
  --hdr-bottom: #23528c;
  --hdr-text: #eef3f9;
  --hdr-muted: #b9c8dc;
  --wave-back: #8fa9c6;
  --sun: #d2462b;
  --sun-glow: rgba(210, 70, 43, 0.3);
  --sea: url("/static/img/sea-light.svg");
  --foot-back: #9cb3cc;
  --foot-mid: #2d5a8c;
  --foot-front: #13284a;
  --foot-text: #e8eef6;
  --foot-muted: #a9bad0;
  --wood-a: #e6cc9e;
  --wood-b: #d8b884;
  --wood-edge: #a7834e;
  --wood-grain: rgba(120, 80, 30, 0.08);
  --wood-text: #2a1e10;
  --focus: #1f63b5;
  --wash: rgba(31, 70, 114, 0.07);
  --chart-1: #2f5f94;
  --chart-2: #c4552e;
  --chart-3: #2f8a5f;
  --chart-track: #e6dfcd;
  --shadow: rgba(25, 30, 45, 0.28);
  --row-hover: rgba(184, 137, 58, 0.1);
  --bronze: #a8703c;
  --bronze-hi: #d9a66b;
  --bronze-face: #f6ead6;
  --gold: #c9a227;
  --gold-hi: #f1d77a;
  --medal-ink: #2a1c10;
  --alert: #eba91a;
  --alert-edge: #c88a0b;
  --alert-text: #835800;
  --alert-tint: #f8edcd;
  --on-alert: #231603;
  --s-indigo: #1f4672;
  --s-sakura: #b8466b;
  --s-pine: #2c6a4c;
  --s-maple: #b4442a;
  --s-snow: #5d7088;
  --s-gold: #a57c1f;
  --lacquer: #5b2418;
  --lacquer-hi: #7d3523;
  --lacquer-deep: #3a140c;
  --fitting: #26282d;
  --fitting-hi: #5c6068;
  --brass: #c9a24a;
  --brass-deep: #8a6a24;
  --niche: #2a120b;
  --annal-paper: #f7f0dc;
  --annal-rule: rgba(198, 63, 39, 0.28);
  --annal-ink: #231a10;
  --veil: rgba(9, 18, 34, 0.78);
  --sec-hub: #1f4672;
  --sec-me: #1f4672;
  --sec-tutorial: #1b7a86;
  --sec-quests: #2c6a4c;
  --sec-events: #b4442a;
  --sec-lands: #5b6b2a;
  --sec-ministries: #3b4a8a;
  --sec-season: #66488f;
  --sec-history: #87571a;
  --sec-community: #a8466b;
  --sec-apply: #3d5a73;
  --on-sec: #fffaf1;
  --rod: #7a5a2e;
  --d-build: #8c5a24;
  --d-craft: #3b6a58;
  --d-explore: #1f5f8a;
  --d-community: #c0392b;
  --d-honour: #a57c1f;
  --tw-sky-top: #e3ebf1;
  --tw-sky-bottom: #f6eedd;
  --tw-sun: #d2462b;
  --tw-cloud: #f1d77a;
  --tw-hill-far: #c3cfbd;
  --tw-hill: #9db896;
  --tw-ground: #dccca6;
  --tw-road: #bdb092;
  --tw-water: #8fb3cf;
  --tw-wave: #f6f1e4;
  --tw-wall: #f6efdf;
  --tw-roof: #2f3c52;
  --tw-beam: #5b2418;
  --tw-window: #2a2f38;
  --tw-wood: #7a5a2e;
  --tw-stone: #aaa395;
  --tw-glow: #e8a23a;
  --tw-cloth: #1f4672;
  --tw-smoke: rgba(70, 74, 83, 0.22);
  --tw-boat: #6b4a26;
  --tw-sail: #faf6ec;
  --tw-ink: #1b1e25;

  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", Georgia, serif;
  --font-brush: "Yuji Syuku", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --font-sans: "IBM Plex Sans", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: 0.84rem;
  --step-0: 1rem;
  --step-1: 1.15rem;
  --step-2: 1.4rem;
  --step-3: 1.8rem;
  --step-4: 2.4rem;

  --radius: 7px;
  --radius-lg: 12px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
      color-scheme: dark;
      --bg: #0e131b;
      --sky: #111b2c;
      --paper: #161d28;
      --paper-2: #121821;
      --field: #1b2330;
      --rule: #29323f;
      --rule-strong: #46505e;
      --control-edge: #6b7686;
      --text: #ebe6d8;
      --text-2: #bfbaab;
      --text-3: #918e82;
      --ai: #3a6caa;
      --ai-deep: #2a5287;
      --ai-text: #93b6e0;
      --ai-tint: #1b2a3e;
      --on-ai: #f5f1e6;
      --shu: #c4412a;
      --shu-deep: #a93421;
      --shu-text: #ec6a52;
      --shu-tint: #35201c;
      --on-shu: #fff6ee;
      --kin: #d6ad62;
      --patina: #6fa691;
      --patina-tint: #1c2b26;
      --rust: #c98660;
      --lamp: #e3a64b;
      --lamp-tint: #33281a;
      --iron: #111a29;
      --iron-2: #1f3656;
      --iron-edge: #070b12;
      --plate-text: #f3efe4;
      --plate-muted: #9fb0c7;
      --timber: #0b1018;
      --timber-2: #1a2230;
      --timber-text: #e6ebf2;
      --noren: #1f3c62;
      --noren-hi: #2a4f7e;
      --noren-text: #eee8d6;
      --hdr-top: #04080f;
      --hdr-bottom: #1f416c;
      --hdr-text: #e8edf5;
      --hdr-muted: #97a9c2;
      --wave-back: #3a5d8c;
      --sun: #efe4c4;
      --sun-glow: rgba(239, 228, 196, 0.22);
      --sea: url("/static/img/sea-dark.svg");
      --foot-back: #22395a;
      --foot-mid: #172c4c;
      --foot-front: #0a1222;
      --foot-text: #dfe6f0;
      --foot-muted: #8597b1;
      --wood-a: #6f553a;
      --wood-b: #5d462f;
      --wood-edge: #2c1f14;
      --wood-grain: rgba(255, 235, 200, 0.06);
      --wood-text: #f4ead6;
      --focus: #93b6e0;
      --wash: rgba(147, 182, 224, 0.12);
      --chart-1: #5f93d0;
      --chart-2: #d9744d;
      --chart-3: #4fae88;
      --chart-track: #252d39;
      --shadow: rgba(0, 0, 0, 0.6);
      --row-hover: rgba(214, 173, 98, 0.08);
      --bronze: #c48a52;
      --bronze-hi: #e6b880;
      --bronze-face: #2b2219;
      --gold: #d9b443;
      --gold-hi: #f3df92;
      --medal-ink: #f4ead6;
      --alert: #f0b429;
      --alert-edge: #d99a12;
      --alert-text: #f2c45c;
      --alert-tint: #31270f;
      --on-alert: #1c1303;
      --s-indigo: #6f9bd4;
      --s-sakura: #e48aa8;
      --s-pine: #62b08b;
      --s-maple: #e47a57;
      --s-snow: #aebfd2;
      --s-gold: #dcb54a;
      --lacquer: #3e1810;
      --lacquer-hi: #57261a;
      --lacquer-deep: #220b06;
      --fitting: #15161a;
      --fitting-hi: #4a4e57;
      --brass: #cfa952;
      --brass-deep: #7c5f20;
      --niche: #150805;
      --annal-paper: #1c1a15;
      --annal-rule: rgba(236, 106, 82, 0.22);
      --annal-ink: #ece4cf;
      --veil: rgba(3, 6, 12, 0.84);
      --sec-hub: #6f9bd4;
      --sec-me: #6f9bd4;
      --sec-tutorial: #6cc6d2;
      --sec-quests: #62b08b;
      --sec-events: #e47a57;
      --sec-lands: #b3c26a;
      --sec-ministries: #9fb0ee;
      --sec-season: #a88cd8;
      --sec-history: #d6ad62;
      --sec-community: #e48aa8;
      --sec-apply: #8fb0cc;
      --on-sec: #10141c;
      --rod: #9a7848;
      --d-build: #d1a066;
      --d-craft: #7fb79d;
      --d-explore: #79aedb;
      --d-community: #ec8676;
      --d-honour: #e0bd6a;
      --tw-sky-top: #0b1424;
      --tw-sky-bottom: #22365a;
      --tw-sun: #efe3bd;
      --tw-cloud: #c9a24a;
      --tw-hill-far: #1d2b3d;
      --tw-hill: #18262c;
      --tw-ground: #262a2c;
      --tw-road: #3a3a36;
      --tw-water: #14304f;
      --tw-wave: #5d82ab;
      --tw-wall: #b9b09c;
      --tw-roof: #0f141d;
      --tw-beam: #3a140c;
      --tw-window: #f2c662;
      --tw-wood: #8a6a3e;
      --tw-stone: #5c616a;
      --tw-glow: #ffcf6b;
      --tw-cloth: #2a5a8f;
      --tw-smoke: rgba(200, 205, 215, 0.16);
      --tw-boat: #7d5a32;
      --tw-sail: #c9c2b0;
      --tw-ink: #07090d;
  }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0e131b;
    --sky: #111b2c;
    --paper: #161d28;
    --paper-2: #121821;
    --field: #1b2330;
    --rule: #29323f;
    --rule-strong: #46505e;
    --control-edge: #6b7686;
    --text: #ebe6d8;
    --text-2: #bfbaab;
    --text-3: #918e82;
    --ai: #3a6caa;
    --ai-deep: #2a5287;
    --ai-text: #93b6e0;
    --ai-tint: #1b2a3e;
    --on-ai: #f5f1e6;
    --shu: #c4412a;
    --shu-deep: #a93421;
    --shu-text: #ec6a52;
    --shu-tint: #35201c;
    --on-shu: #fff6ee;
    --kin: #d6ad62;
    --patina: #6fa691;
    --patina-tint: #1c2b26;
    --rust: #c98660;
    --lamp: #e3a64b;
    --lamp-tint: #33281a;
    --iron: #111a29;
    --iron-2: #1f3656;
    --iron-edge: #070b12;
    --plate-text: #f3efe4;
    --plate-muted: #9fb0c7;
    --timber: #0b1018;
    --timber-2: #1a2230;
    --timber-text: #e6ebf2;
    --noren: #1f3c62;
    --noren-hi: #2a4f7e;
    --noren-text: #eee8d6;
    --hdr-top: #04080f;
    --hdr-bottom: #1f416c;
    --hdr-text: #e8edf5;
    --hdr-muted: #97a9c2;
    --wave-back: #3a5d8c;
    --sun: #efe4c4;
    --sun-glow: rgba(239, 228, 196, 0.22);
    --sea: url("/static/img/sea-dark.svg");
    --foot-back: #22395a;
    --foot-mid: #172c4c;
    --foot-front: #0a1222;
    --foot-text: #dfe6f0;
    --foot-muted: #8597b1;
    --wood-a: #6f553a;
    --wood-b: #5d462f;
    --wood-edge: #2c1f14;
    --wood-grain: rgba(255, 235, 200, 0.06);
    --wood-text: #f4ead6;
    --focus: #93b6e0;
    --wash: rgba(147, 182, 224, 0.12);
    --chart-1: #5f93d0;
    --chart-2: #d9744d;
    --chart-3: #4fae88;
    --chart-track: #252d39;
    --shadow: rgba(0, 0, 0, 0.6);
    --row-hover: rgba(214, 173, 98, 0.08);
    --bronze: #c48a52;
    --bronze-hi: #e6b880;
    --bronze-face: #2b2219;
    --gold: #d9b443;
    --gold-hi: #f3df92;
    --medal-ink: #f4ead6;
    --alert: #f0b429;
    --alert-edge: #d99a12;
    --alert-text: #f2c45c;
    --alert-tint: #31270f;
    --on-alert: #1c1303;
    --s-indigo: #6f9bd4;
    --s-sakura: #e48aa8;
    --s-pine: #62b08b;
    --s-maple: #e47a57;
    --s-snow: #aebfd2;
    --s-gold: #dcb54a;
    --lacquer: #3e1810;
    --lacquer-hi: #57261a;
    --lacquer-deep: #220b06;
    --fitting: #15161a;
    --fitting-hi: #4a4e57;
    --brass: #cfa952;
    --brass-deep: #7c5f20;
    --niche: #150805;
    --annal-paper: #1c1a15;
    --annal-rule: rgba(236, 106, 82, 0.22);
    --annal-ink: #ece4cf;
    --veil: rgba(3, 6, 12, 0.84);
    --sec-hub: #6f9bd4;
    --sec-me: #6f9bd4;
    --sec-tutorial: #6cc6d2;
    --sec-quests: #62b08b;
    --sec-events: #e47a57;
    --sec-lands: #b3c26a;
    --sec-ministries: #9fb0ee;
    --sec-season: #a88cd8;
    --sec-history: #d6ad62;
    --sec-community: #e48aa8;
    --sec-apply: #8fb0cc;
    --on-sec: #10141c;
    --rod: #9a7848;
    --d-build: #d1a066;
    --d-craft: #7fb79d;
    --d-explore: #79aedb;
    --d-community: #ec8676;
    --d-honour: #e0bd6a;
    --tw-sky-top: #0b1424;
    --tw-sky-bottom: #22365a;
    --tw-sun: #efe3bd;
    --tw-cloud: #c9a24a;
    --tw-hill-far: #1d2b3d;
    --tw-hill: #18262c;
    --tw-ground: #262a2c;
    --tw-road: #3a3a36;
    --tw-water: #14304f;
    --tw-wave: #5d82ab;
    --tw-wall: #b9b09c;
    --tw-roof: #0f141d;
    --tw-beam: #3a140c;
    --tw-window: #f2c662;
    --tw-wood: #8a6a3e;
    --tw-stone: #5c616a;
    --tw-glow: #ffcf6b;
    --tw-cloth: #2a5a8f;
    --tw-smoke: rgba(200, 205, 215, 0.16);
    --tw-boat: #7d5a32;
    --tw-sail: #c9c2b0;
    --tw-ink: #07090d;
}

/* ---- base ------------------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  /* washi fibres over a bokashi sky: pale at the horizon under the header, paper further down */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .2  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.28'/></svg>"), linear-gradient(180deg, var(--sky) 0, var(--bg) 620px);
  background-repeat: repeat, no-repeat;
  background-blend-mode: multiply, normal;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The sea: seigaiha waves rising faintly toward the footer, under everything. */
body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 460px;
  z-index: -1;
  pointer-events: none;
  background: var(--sea) 0 0 / 44px 22px repeat;
  opacity: 0.32;
  -webkit-mask: linear-gradient(180deg, transparent, #000 75%);
  mask: linear-gradient(180deg, transparent, #000 75%);
}

:root[data-theme="dark"] body {
  background-blend-mode: soft-light, normal;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) body {
    background-blend-mode: soft-light, normal;
  }
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
}

h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-1);
}

p {
  margin: 0 0 0.8em;
}

a {
  color: var(--ai-text);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.05em 0.35em;
}

ul,
ol {
  margin: 0;
  padding-left: 1.2em;
}

dl,
dd {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

::selection {
  background: var(--lamp-tint);
  color: var(--text);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  background: var(--ai);
  color: var(--on-ai);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 8px;
}

.shell {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.muted {
  color: var(--text-3);
}

.small {
  font-size: var(--step--1);
}

.neg {
  color: var(--shu-text);
}

.strike {
  text-decoration: line-through;
  color: var(--text-3);
}

.pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.94em;
}

td.num,
th.num {
  text-align: right;
}

th.num {
  font-family: var(--font-sans);
  font-variant-numeric: normal;
  font-size: inherit;
}

.unit {
  font-family: var(--font-sans);
  font-size: 0.5em;
  color: var(--text-3);
  font-weight: 400;
}

.qty-sub {
  font-size: 0.82em;
  color: var(--text-3);
  white-space: nowrap;
}

.optional {
  font-weight: 400;
  color: var(--text-3);
  font-size: 0.85em;
}

[hidden] {
  display: none !important;
}

/* ---- header: a woodblock sky with the sun rising behind the waves ----------------------------- */

.site-header {
  position: relative;
  z-index: 20;
  color: var(--hdr-text);
  background-color: var(--hdr-top);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--hdr-top) 0%, var(--hdr-bottom) 100%);
  padding-bottom: 40px;
}

.site-header > .shell {
  position: relative;
  z-index: 1;
}

.hdr-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hdr-sun {
  position: absolute;
  right: max(28px, calc((100% - 1200px) / 2 + 70px));
  bottom: -12px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--sun) 78%, #ffffff), var(--sun) 62%);
  box-shadow: 0 0 70px 12px var(--sun-glow);
}

.hdr-wave-back,
.hdr-wave-front {
  position: absolute;
  left: 0;
  right: 0;
}

.hdr-wave-back {
  bottom: 0;
  height: 58px;
  background: var(--wave-back);
  opacity: 0.55;
  -webkit-mask: url("/static/img/wave-swell.svg") 120px 100% / 640px 58px repeat-x;
  mask: url("/static/img/wave-swell.svg") 120px 100% / 640px 58px repeat-x;
}

.hdr-wave-front {
  bottom: -1px;
  height: 46px;
  background: var(--sky);
  -webkit-mask: url("/static/img/wave-crest.svg") 0 100% / 700px 46px repeat-x;
  mask: url("/static/img/wave-crest.svg") 0 100% / 700px 46px repeat-x;
}

/* Inner pages: the same print, cut narrower. */
.site-header.is-compact {
  padding-bottom: 22px;
}

.is-compact .hdr-top {
  padding-block: 10px 0;
}

.is-compact .icon-seal {
  width: 36px;
  height: 36px;
}

.is-compact .brand-name {
  font-size: 1.3rem;
}

.is-compact .hdr-nav {
  padding-block: 4px 0;
}

.is-compact .nav-tab,
.is-compact .nav-realm {
  padding-block: 0.3rem 0.35rem;
}

.is-compact .hdr-sun {
  width: 70px;
  height: 70px;
  bottom: -8px;
  box-shadow: 0 0 50px 8px var(--sun-glow);
}

.is-compact .hdr-wave-back {
  height: 34px;
  -webkit-mask-size: 420px 34px;
  mask-size: 420px 34px;
}

.is-compact .hdr-wave-front {
  height: 26px;
  -webkit-mask-size: 420px 26px;
  mask-size: 420px 26px;
}

.site-header > .hdr-top {
  z-index: 3;
}

.hdr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 14px 4px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--hdr-text);
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.icon {
  width: 1.3em;
  height: 1.3em;
  flex: none;
}

.icon-seal {
  width: 42px;
  height: 42px;
  transform: rotate(-4deg);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.seal-fill {
  fill: var(--shu);
}

.seal-glyph {
  fill: #f7efe0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

.brand-sub {
  margin-top: 2px;
  font-family: var(--font-brush);
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  color: var(--hdr-muted);
}

.hdr-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0 0.95rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--hdr-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}

.hdr-btn:hover,
.hdr-btn.is-current {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.4);
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 38px;
  padding: 0 0.85rem 0 0.4rem;
  color: var(--hdr-text);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.user-chip-seal {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-brush);
  font-size: 0.95rem;
  color: var(--on-shu);
  background: var(--shu);
  border-radius: 999px;
}

.user-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  text-decoration: none;
}

.user-name {
  font-weight: 600;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--hdr-text);
  cursor: pointer;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.13);
}

.icon-btn[aria-pressed="true"] {
  color: #f3c97a;
  border-color: rgba(243, 201, 122, 0.6);
}

.bare-top {
  display: flex;
  justify-content: flex-end;
  padding: 12px var(--gutter) 0;
}

.bare-top .icon-btn {
  color: var(--text-2);
  border-color: var(--rule-strong);
  background: var(--paper);
}

/* Main navigation: kanji over the English name; the current page is stamped with a seal. */
.hdr-nav {
  padding-block: 8px 0;
}

.hdr-nav ul {
  display: flex;
  gap: 0.2rem;
  list-style: none;
  margin: 0 -0.4rem;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 4.9rem;
  padding: 0.45rem 0.75rem 0.5rem;
  color: var(--hdr-muted);
  text-decoration: none;
  border-radius: 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Eleven nation tabs plus Market and Manage: on middle-sized screens they sit closer so none has to scroll out of sight. */
@media (min-width: 721px) and (max-width: 1220px) {
  .hdr-nav ul { gap: 0.05rem; }
  .nav-tab { min-width: 0; padding: 0.45rem 0.5rem 0.5rem; }
}

.nav-tab:hover {
  color: var(--hdr-text);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.nav-kanji {
  font-family: var(--font-brush);
  font-size: 1.15rem;
  line-height: 1.2;
  padding: 0.08rem 0.32rem;
  border-radius: 4px;
  transition: transform 0.2s ease;
}

.nav-label {
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

.nav-tab.is-current {
  color: var(--hdr-text);
}

.nav-tab.is-current .nav-kanji {
  color: #fff8f0;
  background: var(--shu);
  box-shadow: inset 0 0 0 1.5px var(--shu), inset 0 0 0 2.5px rgba(255, 246, 238, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
  transform: rotate(-4deg);
}

.nav-tab.is-current .nav-label {
  font-weight: 700;
}

.count-badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--alert);
  color: var(--on-alert);
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 960px) {
  .hdr-sun {
    display: none;
  }
}

/* ---- page frame and the great-wave footer --------------------------------------------------- */

.page {
  flex: 1 0 auto;
  padding-block: 1.9rem 1.5rem;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  margin-bottom: 1.6rem;
}

.page-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  font-size: clamp(2rem, 1.55rem + 1.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.1;
}

/* the page's kanji, stamped as a small vermilion seal */
.page-kanji {
  display: inline-block;
  padding: 0.34rem 0.3rem;
  font-family: var(--font-brush);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.12;
  letter-spacing: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: var(--on-shu);
  background-color: var(--shu);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--shu), inset 0 0 0 2.5px rgba(255, 246, 238, 0.65), 0 2px 5px -1px rgba(0, 0, 0, 0.25);
  transform: rotate(-4deg);
}

.page-sub {
  margin: 0.55rem 0 0;
  max-width: 62ch;
  color: var(--text-2);
  font-size: 1.02rem;
}

.page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-footer {
  position: relative;
  margin-top: 150px;
  color: var(--foot-muted);
  background: var(--foot-front);
  font-size: var(--step--1);
}

.site-footer a {
  color: var(--foot-text);
}

.foot-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 2px);
  height: 152px;
  overflow: hidden;
  pointer-events: none;
}

.fw {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.fw-back {
  height: 150px;
  background: var(--foot-back);
  opacity: 0.55;
  -webkit-mask: url("/static/img/wave-great.svg") 300px 100% / 1100px 150px repeat-x;
  mask: url("/static/img/wave-great.svg") 300px 100% / 1100px 150px repeat-x;
}

.fw-mid {
  height: 118px;
  background: var(--foot-mid);
  -webkit-mask: url("/static/img/wave-great.svg") 0 100% / 880px 118px repeat-x;
  mask: url("/static/img/wave-great.svg") 0 100% / 880px 118px repeat-x;
}

.fw-front {
  height: 60px;
  background: var(--foot-front);
  -webkit-mask: url("/static/img/wave-swell.svg") 90px 100% / 700px 60px repeat-x;
  mask: url("/static/img/wave-swell.svg") 90px 100% / 700px 60px repeat-x;
}

.foot-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
  padding-block: 0.4rem 1.6rem;
}

.foot-inner > span:first-child {
  color: var(--foot-text);
}

.site-footer .muted {
  color: var(--foot-muted);
}

/* ---- layout helpers -------------------------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.grid-narrow {
  max-width: 660px;
}

.grid-2 + .hint,
.grid-main + .hint {
  margin-top: 0.9rem;
}

@media (max-width: 960px) {
  .grid-main,
  .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- panels: clean sheets of washi -------------------------------------------------------- */

.panel {
  position: relative;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.35rem 1.3rem;
  box-shadow: 0 1px 1px rgba(20, 25, 40, 0.04), 0 16px 36px -26px var(--shadow);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.85rem;
}

.panel-title {
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.panel-sub {
  margin: -0.4rem 0 0.9rem;
  color: var(--text-2);
  font-size: 0.93rem;
  max-width: 68ch;
}

.panel-actions {
  display: flex;
  gap: 0.4rem;
}

.panel-foot {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.panel-guide {
  margin-bottom: 1.25rem;
  border-color: color-mix(in srgb, var(--ai) 35%, var(--rule));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ai-tint) 55%, var(--paper)), var(--paper) 9rem);
}

/* ---- tables: ledger -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: -0.25rem;
  padding-inline: 0.25rem;
}

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.ledger th {
  text-align: left;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-2);
  padding: 0.5rem 0.7rem;
  border-bottom: 3px double var(--text-2);
  white-space: nowrap;
}

.ledger td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.ledger tbody tr:hover td {
  background: var(--row-hover);
}

.ledger th.num,
.ledger td.num {
  text-align: right;
}


.ledger-tight th,
.ledger-tight td {
  padding: 0.38rem 0.55rem;
}

.ledger tfoot td {
  font-weight: 600;
  border-top: 3px double var(--text-2);
  border-bottom: 0;
}

.ledger .act {
  text-align: right;
  white-space: nowrap;
}

.ledger .note {
  margin-top: 0.25rem;
  font-size: 0.86rem;
  color: var(--text-2);
}

tr.is-archived td,
tr.is-voided td {
  color: var(--text-3);
}

tr.is-voided td:not(.act) a {
  color: var(--text-3);
}

tr.is-me td {
  background: var(--lamp-tint);
}

tr.row-error td {
  background: var(--shu-tint);
}

.item-link {
  font-weight: 600;
}

.proof-link::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.35em;
  border: 2px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg) scale(0.8);
}

@media (max-width: 720px) {
  .ledger-cards,
  .ledger-cards tbody,
  .ledger-cards tr,
  .ledger-cards td {
    display: block;
    width: 100%;
  }
  .ledger-cards thead {
    position: absolute;
    left: -9999px;
  }
  .ledger-cards tr {
    border: 1px solid var(--rule);
    border-left: 4px solid var(--rule-strong);
    border-radius: var(--radius);
    margin-bottom: 0.7rem;
    padding: 0.3rem 0.2rem;
    background: var(--paper-2);
  }
  .ledger-cards td {
    display: block;
    border-bottom: 0;
    padding: 0.28rem 0.6rem;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .ledger-cards td::before {
    content: attr(data-label);
    float: left;
    margin-right: 1rem;
    font-size: 0.84rem;
    color: var(--text-3);
    text-align: left;
  }
  .ledger-cards td::after {
    content: "";
    display: table;
    clear: both;
  }
  .ledger-cards td.act {
    text-align: right;
  }
  .ledger-cards td.act::before,
  .ledger-cards td:not([data-label])::before {
    content: none;
  }
  .ledger-cards td > div,
  .ledger-cards td .count-inputs {
    text-align: right;
  }
}

/* ---- buttons --------------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.05rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--control-edge);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.06s ease;
}

.btn:hover {
  background: var(--wash);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  color: var(--on-ai);
  background: var(--ai);
  border-color: var(--ai-deep);
  box-shadow: 0 2px 0 var(--ai-deep);
}

.btn-primary:hover {
  background: var(--ai);
  filter: brightness(1.12);
}

.btn-danger {
  color: var(--on-shu);
  background: var(--shu);
  border-color: var(--shu-deep);
  box-shadow: 0 2px 0 var(--shu-deep);
}

.btn-danger:hover {
  background: var(--shu);
  filter: brightness(1.1);
}

.btn-quiet {
  background: var(--field);
}

.btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.86rem;
}

.btn-block {
  width: 100%;
}

.btn:disabled,
.btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}

form.inline {
  display: inline;
  margin: 0;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.4rem;
}

form.spaced {
  margin-top: 0.9rem;
}

/* ---- forms ----------------------------------------------------------------------------------- */

.stack-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.field > label,
.field > legend,
.static-label {
  font-weight: 600;
  font-size: 0.93rem;
  padding: 0;
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--control-edge);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  min-height: 2.5rem;
}

textarea {
  resize: vertical;
  line-height: 1.45;
}

textarea.mono {
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

select {
  appearance: none;
  padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-3);
  opacity: 1;
}

.hint {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-2);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 560px) {
  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.input-suffix {
  display: flex;
  align-items: stretch;
}

.input-suffix input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  min-width: 0;
}

.input-suffix .suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.7rem;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-left: 0;
  border-radius: 0 2px 2px 0;
  color: var(--text-2);
  font-size: 0.9rem;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.check input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--ai);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.check-list legend {
  font-weight: 600;
  margin-bottom: 0.4rem;
  padding: 0;
}

.static-field {
  margin: 0;
}

.price-preview {
  margin: -0.4rem 0 0;
  min-height: 1.3em;
  font-size: 0.9rem;
  color: var(--patina);
}

.qty-field {
  gap: 0.5rem;
}

.qty-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
}

.qty-box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 9rem;
}

.qty-box-label {
  font-size: 0.84rem;
  color: var(--text-2);
}

.qty-stack-hint {
  color: var(--text-3);
}

.qty-plus {
  padding-bottom: 0.65rem;
  color: var(--text-3);
}

.qty-total {
  padding-bottom: 0.6rem;
  font-weight: 600;
  color: var(--patina);
}

.qty-field.is-single .qty-box:first-child,
.qty-field.is-single .qty-plus {
  display: none;
}

.count-inputs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.count-inputs input {
  width: 8.5rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem 0.9rem;
  margin-bottom: 1.1rem;
  padding: 0.85rem 1.1rem;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
}

.filters .field {
  min-width: 10rem;
}

.filters .check {
  min-height: 2.5rem;
}

.filters .field input[type="search"] {
  min-width: 14rem;
}

.filters-inline {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 0.6rem;
}

.filter-chips {
  margin: -0.4rem 0 1rem;
  color: var(--text-2);
}

.chip {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  background: var(--ai-tint);
  color: var(--ai-text);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
}

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  margin-left: auto;
  background: var(--paper);
}

.seg-btn {
  padding: 0.38rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-radius: 999px;
}

.seg-btn:hover {
  background: var(--wash);
  text-decoration: none;
}

.seg-btn.is-on {
  background: var(--ai);
  color: var(--on-ai);
}

.page-actions .seg {
  margin-left: 0;
}

/* ---- notices --------------------------------------------------------------------------------- */

.notice {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0 0 1.1rem;
  padding: 0.75rem 1rem 0.75rem 0.9rem;
  background: var(--ai-tint);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--ai);
  border-radius: var(--radius);
}

.notice > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.notice-ok { background: var(--patina-tint); border-left-color: var(--patina); }
.notice-warn { background: var(--lamp-tint); border-left-color: var(--lamp); }
.notice-error { background: var(--shu-tint); border-left-color: var(--shu); }

.notice-mark {
  display: none;
}

.panel .notice {
  margin-top: 0;
}

/* ---- stamps, tags ---------------------------------------------------------------------------- */

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.05rem 0.5rem 0.05rem 0.4rem;
  border: 2px solid currentColor;
  border-radius: 3px;
  color: var(--shu-text);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  transform: rotate(-2deg);
  box-shadow: inset 0 0 0 1px var(--paper);
}

.stamp-kanji {
  font-family: var(--font-brush);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1;
}

.stamp-en {
  font-size: 0.76rem;
}

.stamp-approved { color: var(--shu-text); }
.stamp-rejected { color: var(--text); }
.stamp-pending { color: var(--ai-text); }
.stamp-active { color: var(--patina); }
.stamp-locked { color: var(--rust); }
.stamp-short { color: var(--shu-text); }
.stamp-cancelled,
.stamp-voided,
.stamp-reversed {
  color: var(--text-3);
  border-style: dashed;
}

.stamp-lg {
  padding: 0.3rem 0.8rem 0.3rem 0.65rem;
  gap: 0.55em;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px currentColor;
}

.stamp-lg .stamp-kanji { font-size: 1.9rem; }
.stamp-lg .stamp-en { font-size: 0.86rem; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0 0.5em;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--text-2);
}

.tag-owner { color: var(--rust); }
.tag-manager { color: var(--ai-text); }
.tag-employee { color: var(--text-2); }
.tag-warn { color: var(--lamp); background: var(--lamp-tint); border-color: transparent; }
.tag-rate { color: var(--patina); }
.tag-own { color: var(--ai-text); background: var(--ai-tint); border-color: transparent; }

.site-header .tag { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); }
.site-header .tag-owner { color: #f6b8a8; }
.site-header .tag-manager { color: #bcd2ee; }
.site-header .tag-employee { color: #dcd6c6; }

.dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--text-3);
  margin-right: 0.3rem;
}

.dot-ok { background: var(--patina); box-shadow: 0 0 0 3px var(--patina-tint); }
.dot-off { background: var(--rule-strong); }

.status-line {
  font-weight: 600;
}

/* ---- facts, steps, lists --------------------------------------------------------------------- */

.facts > div {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  gap: 0.2rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.facts > div:last-child {
  border-bottom: 0;
}

.facts dt {
  color: var(--text-2);
  font-size: 0.92rem;
}

.facts dd {
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .facts > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 1.4em;
}

.steps li::marker {
  font-family: var(--font-brush);
  color: var(--ai-text);
  font-size: 1.1em;
}

.chips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
}

.cases {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.cases li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.cases li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.case-detail {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--text-2);
}

.case-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0;
}

.case-form input[type="text"] {
  width: 14rem;
  min-height: 2.1rem;
  padding: 0.3rem 0.55rem;
}

.inline-details {
  display: inline-block;
  text-align: left;
}

.inline-details summary {
  list-style: none;
  display: inline-flex;
}

.inline-details summary::-webkit-details-marker {
  display: none;
}

.inline-details[open] {
  display: block;
  margin-top: 0.4rem;
}

.attn-list {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.attn h3 {
  margin-bottom: 0.3rem;
}

.attn .hint {
  margin-bottom: 0.6rem;
}

.attn-flag {
  padding: 0.8rem 1rem;
  background: var(--alert-tint);
  border-left: 5px solid var(--alert);
  border-radius: var(--radius);
}

.all-clear {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.5rem 0;
}

.all-clear p {
  margin: 0;
}

.quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.short-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.action-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.action-stack form:not(.inline) {
  width: 100%;
}

.download-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.download-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.problem-list li {
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.audit-detail {
  font-size: 0.88rem;
  color: var(--text-2);
  overflow-wrap: anywhere;
  max-width: 46ch;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0 0.4rem;
  flex-wrap: wrap;
}

.pager-count {
  font-size: 0.9rem;
}

.error-panel .error-text {
  font-size: var(--step-1);
}

.actions {
  margin-top: 1rem;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--text-2);
}

.empty .icon-anvil {
  width: 4.2rem;
  height: 2.6rem;
  color: var(--rule-strong);
  margin-bottom: 0.5rem;
}

.empty-title {
  margin: 0;
  font-family: var(--font-brush);
  font-size: var(--step-2);
  color: var(--text);
}

.empty-text {
  margin: 0 0 0.9rem;
  max-width: 44ch;
}

/* ---- Hub: one lead item, then a slim strip of figures ---------------------------------------- */

.hub-lead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1.6rem 2rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--ai);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -30px var(--shadow);
}

/* Seigaiha waves fade in at the right edge, like the print the page is cut from. */
.hub-lead::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 45%;
  background: var(--sea) 0 0 / 44px 22px repeat;
  opacity: 0.55;
  -webkit-mask: linear-gradient(90deg, transparent, #000 85%);
  mask: linear-gradient(90deg, transparent, #000 85%);
  pointer-events: none;
}

.hub-lead.is-important {
  border-left-color: var(--alert);
}

.hub-lead-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-text);
}

.hub-lead.is-important .hub-lead-eyebrow {
  color: var(--alert-text);
}

.hub-lead-title {
  margin: 0 0 0.5rem;
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  line-height: 1.2;
}

.hub-lead-body {
  max-width: 62ch;
  font-size: 1.05rem;
}

.hub-lead-meta {
  margin: 0.8rem 0 0;
  font-size: 0.88rem;
  color: var(--text-3);
}

.hub-lead-road .road {
  max-width: 44rem;
  margin-block: 0.6rem 0.2rem;
}

.hub-strip {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.hub-strip li + li {
  border-left: 1px solid var(--rule);
}

.strip-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  height: 100%;
  padding: 0.7rem 1rem 0.75rem;
  color: var(--text);
  text-decoration: none;
}

.strip-item:hover {
  text-decoration: none;
  background: var(--wash);
}

.hub-strip li:first-child .strip-item {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.hub-strip li:last-child .strip-item {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.strip-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-3);
}

.strip-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
}

.strip-value .num {
  font-family: inherit;
}

.strip-value .rank-badge {
  font-size: 1rem;
}

.strip-sub {
  font-size: 0.78rem;
  color: var(--text-3);
}

.panel-road .road {
  margin-top: 0.2rem;
}

@media (max-width: 720px) {
  .type-card {
    min-height: 0;
  }
  .hub-lead {
    padding: 1.15rem 1.1rem 1.1rem;
    border-left-width: 5px;
  }
  .hub-lead::after {
    inset: 0 0 0 55%;
  }
  .hub-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hub-strip li + li {
    border-left: 0;
  }
  .hub-strip li:nth-child(even) {
    border-left: 1px solid var(--rule);
  }
  .hub-strip li:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
  .hub-strip li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .hub-strip li .strip-item {
    border-radius: 0;
  }
}

/* ---- figures: one stat-card style for the whole site (same look as the Hub's tiles) ------------ */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.95rem 1.1rem 1rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ai);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px -24px var(--shadow);
}

.kpi-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-2);
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.kpi-value .num {
  font-family: inherit;
  font-variant-numeric: proportional-nums;
  font-size: 1em;
}

.kpi-value .qty-sub {
  font-family: var(--font-sans);
  font-size: 0.45em;
  color: var(--text-3);
  font-weight: 400;
}

.kpi-sub {
  font-size: 0.84rem;
  color: var(--text-3);
}

.kpi-sub .num,
.kpi-sub .qty-sub,
.kpi-value .muted {
  color: inherit;
}

.kpi-alert {
  border-top-color: var(--alert);
}

.kpi-alert .kpi-value {
  color: var(--alert-text);
}

.kpi-good {
  border-top-color: var(--patina);
}

.kpi-good .kpi-value {
  color: var(--patina);
}

/* ---- item cards as ema: wooden votive plaques with a peaked roof and a red cord -------------- */

.plank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
}

.plank {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 2.3rem 0.95rem 0.95rem;
  color: var(--wood-text);
  background-color: var(--wood-a);
  background-image:
    repeating-linear-gradient(92deg, var(--wood-grain) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.03) 0 2px, transparent 2px 29px),
    linear-gradient(180deg, var(--wood-a), var(--wood-b));
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  clip-path: polygon(0 26px, 50% 0, 100% 26px, 100% 100%, 0 100%);
}

.plank::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
}

.plank::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 1.25rem;
  margin-left: -1.5px;
  background: repeating-linear-gradient(180deg, var(--shu) 0 4px, #f4ead6 4px 6px);
  border-radius: 2px;
}

.plank.is-archived {
  filter: saturate(0.4);
  opacity: 0.8;
}

.plank-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.plank-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--wood-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.plank-name:hover {
  text-decoration: underline;
}

.plank-cat {
  font-size: 0.84rem;
  opacity: 0.8;
}

.plank-prices {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--paper);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--wood-edge) 55%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.price-line {
  display: block;
  padding: 0.35rem 0;
}

.price-line + .price-line {
  border-top: 1px dotted var(--rule-strong);
}

.price-line dt {
  font-size: 0.82rem;
  color: var(--text-2);
}

.price-main {
  font-weight: 600;
  font-size: 1.05rem;
}

.price-per {
  font-size: 0.82rem;
  color: var(--text-2);
}

.price-each {
  display: block;
  font-size: 0.82rem;
  color: var(--text-3);
}

.plank-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.88rem;
}

.plank-stock.is-short {
  font-weight: 600;
}

.plank-stock .qty-sub {
  color: inherit;
  opacity: 0.8;
}

.plank-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.plank .tag {
  background: var(--paper);
}

.plank .tag-rate { color: var(--patina); }

/* ---- bulk review ----------------------------------------------------------------------------- */

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.2rem;
  padding: 0.7rem 1rem;
  margin-bottom: 0.8rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

.bulk-actions input[type="text"] {
  width: 17rem;
  min-height: 2.3rem;
}

.bulk-count {
  font-weight: 600;
}

/* ---- ranking --------------------------------------------------------------------------------- */

.rank-col {
  width: 4.5rem;
  text-align: center;
}

.ledger th.rank-col {
  text-align: center;
}

.rank {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-2);
}

.rank-top {
  border: 2px solid var(--shu-text);
  border-radius: 50%;
  color: var(--shu-text);
  font-weight: 600;
  transform: rotate(-4deg);
}

.rank-1 {
  background: var(--shu-text);
  color: var(--paper);
}

/* ---- charts ---------------------------------------------------------------------------------- */

.chart {
  margin: 0;
}

.chart-scroll {
  overflow-x: auto;
}

.chart-svg {
  display: block;
  width: 100%;
  max-width: 760px;
  min-width: 520px;
  height: auto;
  font-family: var(--font-sans);
}

.chart-svg .grid {
  stroke: var(--rule);
  stroke-width: 1;
}

.chart-svg .axis {
  stroke: var(--rule-strong);
  stroke-width: 1;
}

.chart-svg .axis-text {
  fill: var(--text-2);
}

.chart-svg .end-label {
  fill: var(--text);
  font-weight: 600;
}

.chart-svg .bar.c1 { fill: var(--chart-1); }
.chart-svg .bar.c2 { fill: var(--chart-2); }
.chart-svg .bar.c3 { fill: var(--chart-3); }

.chart-svg .line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-svg .line.c1 { stroke: var(--chart-1); }
.chart-svg .line.c2 { stroke: var(--chart-2); }

.chart-svg .dot {
  stroke: var(--paper);
  stroke-width: 2;
}

.chart-svg .dot.c1 { fill: var(--chart-1); }
.chart-svg .dot.c2 { fill: var(--chart-2); }

.chart-svg .hit {
  fill: transparent;
}

.chart-svg .hit.is-hover {
  fill: var(--wash);
}

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  padding: 0;
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  color: var(--text-2);
}

.swatch {
  display: inline-block;
  width: 1.1rem;
  height: 0.28rem;
  margin-right: 0.45rem;
  vertical-align: middle;
  border-radius: 2px;
}

.swatch.c1 { background: var(--chart-1); }
.swatch.c2 { background: var(--chart-2); }
.swatch.c3 { background: var(--chart-3); }

.chart-empty {
  padding: 1.4rem 0.5rem;
  color: var(--text-3);
  text-align: center;
}

.chart-table {
  margin-top: 0.6rem;
  font-size: 0.9rem;
}

.chart-table summary {
  cursor: pointer;
  color: var(--ai-text);
  width: fit-content;
}

.chart-tip {
  position: absolute;
  z-index: 60;
  max-width: 260px;
  padding: 0.35rem 0.6rem;
  background: var(--iron);
  color: var(--plate-text);
  border: 1px solid var(--iron-edge);
  border-radius: var(--radius);
  font-size: 0.86rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 6px 14px -6px var(--shadow);
}

.hbars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.hbar {
  display: grid;
  grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) 6.5rem;
  align-items: center;
  gap: 0.2rem 0.8rem;
}

.hb-label {
  overflow-wrap: anywhere;
  font-size: 0.93rem;
}

.hb-value {
  text-align: right;
  font-size: 0.9rem;
  white-space: nowrap;
}

.hb-sub {
  display: block;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--text-3);
}

.hb-bar {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 14px;
  border: 0;
  background: var(--chart-track);
  border-radius: 0 4px 4px 0;
  overflow: hidden;
}

.hb-bar::-webkit-progress-bar {
  background: var(--chart-track);
}

.hb-bar::-webkit-progress-value {
  background: var(--chart-1);
  border-radius: 0 4px 4px 0;
}

.hb-bar::-moz-progress-bar {
  background: var(--chart-1);
  border-radius: 0 4px 4px 0;
}

.hb-bar.c3::-webkit-progress-value { background: var(--chart-3); }
.hb-bar.c3::-moz-progress-bar { background: var(--chart-3); }

@media (max-width: 560px) {
  .hbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .hb-bar {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* ---- sign in: the shop front ----------------------------------------------------------------- */

.page-bare {
  display: grid;
  place-items: center;
  padding-block: 1.5rem 3rem;
}

.gate {
  width: 100%;
  max-width: 460px;
}

.gate-front {
  position: relative;
  margin-bottom: -1px;
}

.gate-rod {
  height: 14px;
  margin-inline: -10px;
  border-radius: 7px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 18px, rgba(0, 0, 0, 0.12) 18px 19px),
    linear-gradient(180deg, var(--timber-2), var(--timber));
  box-shadow: 0 2px 0 #130d08, inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.gate-noren {
  position: relative;
  display: flex;
  gap: 6px;
  height: 118px;
  margin-top: -2px;
}

.gate-cloth {
  flex: 1;
  background-color: var(--noren);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 45%),
    linear-gradient(180deg, transparent calc(100% - 14px), rgba(255, 255, 255, 0.12) calc(100% - 14px) calc(100% - 12px), transparent calc(100% - 12px));
  transform-origin: 50% 0;
}

.gate-mon {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f5f2e8;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
}

.gate-mon .icon-seal {
  width: 52px;
  height: 52px;
}

@media (prefers-reduced-motion: no-preference) {
  .gate-cloth {
    animation: noren-settle 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .gate-cloth + .gate-cloth {
    animation-name: noren-settle-r;
  }
}

@keyframes noren-settle-r {
  0% { transform: rotate(-2.2deg); }
  35% { transform: rotate(1.4deg); }
  65% { transform: rotate(-0.6deg); }
  100% { transform: rotate(0); }
}

.gate-card {
  position: relative;
  padding: 1.6rem 1.6rem 1.5rem;
  background-color: var(--paper);
  border: 1px solid var(--rule-strong);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 14px 24px -16px var(--shadow);
}

.gate-shop {
  margin: 0;
  color: var(--shu-text);
  font-weight: 600;
  font-size: 0.9rem;
}

.gate-title {
  font-size: var(--step-4);
  margin-bottom: 0.4rem;
}

.gate-intro {
  color: var(--text-2);
}

.gate-note {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  color: var(--text-3);
}

/* ---- refinement: ledger paper, engraved kanji, ensō, the sign-in sun ----------------------- */

/* Ledger paper: ruled in vermilion, the way account books were. */
.ledger th {
  border-bottom: 3px double var(--shu-text);
  color: var(--text);
}

.ledger td {
  border-bottom: 1px solid var(--rule);
}

.ledger:not(.ledger-cards) th + th,
.ledger:not(.ledger-cards) td + td {
  border-left: 1px solid color-mix(in srgb, var(--rule-strong) 22%, transparent);
}

@media (min-width: 721px) {
  .ledger-cards th + th,
  .ledger-cards td + td {
    border-left: 1px solid color-mix(in srgb, var(--rule-strong) 22%, transparent);
  }
}

/* Empty states sit inside a brushed ring (ensō). */
.empty-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 6.2rem;
  height: 6.2rem;
  margin-bottom: 0.4rem;
}

.empty-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--rule-strong);
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M62 11 C30 2 6 26 10 55 C14 82 44 96 69 86 C86 79 95 62 92 44' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/><path d='M62 11 C30 2 6 26 10 55 C14 82 44 96 69 86 C86 79 95 62 92 44' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' transform='translate(1.5 1.5) scale(.97)'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M62 11 C30 2 6 26 10 55 C14 82 44 96 69 86 C86 79 95 62 92 44' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/><path d='M62 11 C30 2 6 26 10 55 C14 82 44 96 69 86 C86 79 95 62 92 44' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' transform='translate(1.5 1.5) scale(.97)'/></svg>") center / contain no-repeat;
}

.empty .icon-anvil {
  position: relative;
  margin-bottom: 0;
}

/* Sign-in: a vertical shop sign on a vermilion sun disc beside the curtain. */
.gate {
  position: relative;
}

.gate-sign {
  display: none;
}

@media (min-width: 1000px) {
  .gate-sign {
    position: absolute;
    top: 2.6rem;
    right: calc(100% + 2.4rem);
    width: 13rem;
    height: 13rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    border-radius: 50%;
    color: var(--on-shu);
    background:
      radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.16), transparent 55%),
      var(--shu);
    box-shadow: 0 0 0 5px var(--bg), 0 0 0 6.5px var(--shu), 0 14px 24px -16px var(--shadow);
  }
  .gate-vert,
  .gate-vert-sub {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-brush);
    letter-spacing: 0.14em;
  }
  .gate-vert {
    font-size: 2.1rem;
    line-height: 1.05;
  }
  .gate-vert-sub {
    font-size: 0.82rem;
    line-height: 1.25;
    margin-top: 1.7rem;
    opacity: 0.92;
  }
}

/* ---- everyday ease: action row, menu, phone bar, forms ------------------------------------- */

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.25rem;
}

.btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex: 1 1 13rem;
  min-height: 3.4rem;
  padding: 0.6rem 1.2rem;
  font-size: 1.08rem;
}

.btn-alert {
  color: var(--on-alert);
  background: var(--alert);
  border-color: var(--alert-edge);
  box-shadow: 0 2px 0 var(--alert-edge);
}

.btn-alert:hover {
  background: var(--alert-edge);
  color: var(--on-alert);
}

.btn-alert .count-badge {
  background: var(--on-alert);
  color: var(--alert);
}

.kpis-after {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.6rem;
  min-height: 3.2rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

.menu-link:hover {
  background: var(--row-hover);
}

.menu-list li:last-child .menu-link {
  border-bottom: 0;
}

.menu-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu-name {
  font-weight: 600;
}

.menu-help {
  font-size: 0.88rem;
  color: var(--text-2);
}

.menu-me {
  margin: 0 0 0.5rem;
}

/* Optional parts of a form stay out of the way until asked for. */
details.more {
  margin: 0.2rem 0 1rem;
}

details.more > summary {
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--ai-text);
  font-weight: 600;
  cursor: pointer;
}

details.more[open] > summary {
  margin-bottom: 0.5rem;
}

.item-find {
  margin-bottom: 0.4rem;
}

/* The phone bar: four daily places and the Menu. Not shown on wide screens. */
.tabbar {
  display: none;
}

@media (max-width: 720px) {
  .hdr-nav,
  .user-chip,
  .hdr-tools form:not(.search-box) {
    display: none;
  }

  .site-header {
    padding-bottom: 30px;
  }

  .hdr-top {
    padding-block: 10px 8px;
  }

  .hdr-wave-front {
    height: 34px;
    -webkit-mask-size: 520px 34px;
    mask-size: 520px 34px;
  }

  .hdr-wave-back {
    height: 44px;
    -webkit-mask-size: 480px 44px;
    mask-size: 480px 44px;
  }

  .site-footer {
    margin-top: 100px;
  }

  .foot-waves {
    height: 102px;
  }

  .fw-back {
    height: 100px;
    -webkit-mask-size: 740px 100px;
    mask-size: 740px 100px;
  }

  .fw-mid {
    height: 80px;
    -webkit-mask-size: 600px 80px;
    mask-size: 600px 80px;
  }

  .fw-front {
    height: 42px;
    -webkit-mask-size: 480px 42px;
    mask-size: 480px 42px;
  }

  .tabbar {
    display: block;
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    color: var(--noren-text);
    background: var(--noren);
    border-top: 3px solid var(--timber);
    box-shadow: 0 -6px 14px -8px var(--shadow);
  }

  .tabbar ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-height: 3.6rem;
    padding: 0.35rem 0.1rem;
    color: var(--noren-text);
    text-decoration: none;
    font-size: 0.78rem;
    border-top: 3px solid transparent;
    margin-top: -3px;
  }

  .tab-kanji {
    font-family: var(--font-brush);
    font-size: 1.05rem;
    line-height: 1.1;
    opacity: 0.85;
  }

  .tab.is-current {
    background: var(--noren-hi);
    border-top-color: var(--lamp-tint);
    font-weight: 600;
  }

  .tab-badge {
    position: absolute;
    top: 0.2rem;
    right: 22%;
  }

  body.is-app {
    padding-bottom: 4.4rem;
  }

  .site-footer {
    margin-bottom: 0;
  }

  /* The title seal stays on the title line instead of dropping underneath it. */
  .page-title {
    display: block;
  }

  .page-kanji {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.22rem 0.2rem;
    font-size: 0.8rem;
    vertical-align: 0.35em;
  }

  /* Anything you tap should be comfortable to hit. */
  .btn,
  .btn-sm,
  .seg-btn,
  .icon-btn {
    min-height: 2.75rem;
  }

  .btn-sm {
    padding-inline: 0.9rem;
  }

  .menu-link {
    min-height: 3.6rem;
  }

  .btn-lg {
    flex-basis: 100%;
  }
}

/* ==== the nation ================================================================================ */
/*
  The nation pages speak the same woodblock language as the market: washi panels, indigo and
  vermilion, seals. Two things carry the boldness: medals (struck bronze, or vermilion and gold for
  honours) and the rank road on each person's page, drawn like a station map of an old highway.
*/

/* ---- header additions: nation/market switch, messages bell, Manage tab ------------------------ */

.nav-realm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 4.9rem;
  margin-left: 0.35rem;
  padding: 0.45rem 0.75rem 0.5rem;
  color: var(--hdr-text);
  text-decoration: none;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}

.hdr-nav li:first-child > .nav-realm {
  margin-left: 0;
  margin-right: 0.35rem;
}

.nav-realm:hover {
  background: rgba(255, 255, 255, 0.1);
  border-style: solid;
  text-decoration: none;
}

/* Manage: staff pages get their own tab, pushed to the far end of the row and set apart by a rule. */
.nav-manage-item {
  margin-left: 0.6rem;
  padding-left: 0.6rem;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.nav-manage {
  position: relative;
}

.nav-badge {
  margin-left: 0.15rem;
  font-size: 0.7rem;
  vertical-align: 0.05em;
}

/* The Manage page */
.waiting-strip {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.9rem;
}

.waiting-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 0.95rem 1.15rem;
  color: var(--text);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--alert);
  border-radius: var(--radius-lg);
}

.waiting-card:hover {
  text-decoration: none;
  border-color: var(--alert-edge);
  box-shadow: inset 0 0 0 1px var(--alert-edge);
}

.waiting-count {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--alert-text);
}

.waiting-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.waiting-name {
  font-weight: 600;
}

.waiting-go {
  font-size: 0.88rem;
  color: var(--ai-text);
}

.manage-section {
  margin-top: 2.2rem;
}

.manage-section-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.manage-section-head .section-title {
  margin: 0;
}

.manage-section-head p {
  margin: 0.1rem 0 0;
}

.manage-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
}

.manage-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  height: 100%;
  padding: 0.9rem 1rem;
  color: var(--text);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.manage-card:hover {
  text-decoration: none;
  border-color: var(--ai);
  box-shadow: inset 0 0 0 1px var(--ai);
}

.manage-card-name {
  font-weight: 700;
}

.manage-card-help {
  font-size: 0.86rem;
  color: var(--text-2);
}

.menu-manage {
  margin-bottom: 1rem;
}

.bell {
  position: relative;
  text-decoration: none;
}

.bell-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  box-shadow: 0 0 0 2px var(--hdr-top);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
}

.foot-links a {
  color: var(--foot-text);
}

/* ---- shared small pieces ---------------------------------------------------------------------- */

.section-title {
  margin: 1.8rem 0 0.8rem;
  font-size: var(--step-2);
}

.sub-title {
  margin: 1.1rem 0 0.45rem;
  font-size: 1rem;
}

.plain-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tag-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 0.8rem;
}

.inline-form .field {
  flex: 1 1 12rem;
  margin: 0;
}

.tool-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tool-stack > form + form,
.tool-stack > form + details,
.tool-stack > details + p {
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.panel-inset {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.hint-warn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--lamp);
  font-weight: 600;
}

.hint-warn .icon {
  width: 1.05em;
  height: 1.05em;
}

/* Spam trap: hidden from people, filled in by robots. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.seg-item {
  padding: 0.38rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
}

.seg-item:hover {
  background: var(--wash);
  text-decoration: none;
}

.seg-item.is-current {
  background: var(--ai);
  color: var(--on-ai);
}

.seg-count {
  margin-left: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.8em;
  opacity: 0.8;
}

main > .seg {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1.1rem;
  border-radius: 20px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 960px) {
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kpis-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .kpis-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.is-muted td {
  color: var(--text-3);
}

/* ---- nation role tags ------------------------------------------------------------------------ */

.tag-nowner { color: var(--shu-text); background: var(--shu-tint); border-color: transparent; }
.tag-nadmin { color: var(--ai-text); background: var(--ai-tint); border-color: transparent; }
.tag-ncitizen { color: var(--text-2); }

.stamp-logged { color: var(--patina); }
.stamp-waiting { color: var(--ai-text); }
.stamp-withdrawn {
  color: var(--text-3);
  border-style: dashed;
}

/* ---- rank badge: a small seal with the rank's character ------------------------------------------ */

.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.rank-seal {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  font-family: var(--font-brush);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  border-radius: 4px;
  transform: rotate(-4deg);
}

.rank-base .rank-seal {
  color: var(--ai-text);
  border: 1.5px solid currentColor;
  background: var(--paper);
}

.rank-level2 .rank-seal {
  color: var(--on-ai);
  background: var(--ai);
  box-shadow: inset 0 0 0 1.5px var(--ai), inset 0 0 0 2.5px rgba(255, 255, 255, 0.55);
}

.rank-nobility .rank-seal {
  color: #fff8f0;
  background: var(--shu);
  box-shadow: inset 0 0 0 1.5px var(--shu), inset 0 0 0 2.5px var(--gold-hi), 0 0 0 1.5px var(--gold);
}

.rank-nobility .rank-name {
  color: var(--shu-text);
}

.site-header .rank-name,
.tile .rank-name {
  color: inherit;
}

/* ---- medals: struck bronze, or vermilion and gold for honours ------------------------------------ */

.medal {
  --size: 2.6rem;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  vertical-align: middle;
}

.medal-sm { --size: 1.7rem; }
.medal-md { --size: 2.6rem; }
.medal-lg { --size: 3.7rem; }
.medal-xl { --size: 7.5rem; }

.medal-regular {
  color: var(--medal-ink);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), transparent 42%),
    radial-gradient(circle, var(--bronze-face) 0 57%, var(--bronze) 58% 63%, var(--bronze-hi) 64% 70%, var(--bronze) 71% 100%);
  box-shadow: 0 2px 4px -1px var(--shadow), inset 0 -2px 3px rgba(60, 30, 0, 0.35);
}

.medal-honorary {
  color: #fff6ec;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.4), transparent 40%),
    radial-gradient(circle, var(--shu) 0 56%, var(--gold) 57% 61%, var(--gold-hi) 62% 66%, var(--gold) 67% 73%, var(--shu-deep) 74% 100%);
  box-shadow: 0 0 0 1.5px var(--gold), 0 3px 8px -2px var(--shadow), inset 0 -2px 4px rgba(80, 10, 0, 0.35);
}

.medal-face {
  display: grid;
  place-items: center;
  width: calc(var(--size) * 0.5);
  height: calc(var(--size) * 0.5);
  line-height: 1;
}

.medal-face .art-emblem {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28));
}

.medal-honorary .medal-face .art-emblem {
  filter: drop-shadow(0 1px 0 rgba(80, 10, 0, 0.5));
}

.medal-count {
  position: absolute;
  right: -0.55rem;
  bottom: -0.25rem;
  padding: 0 0.32rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--on-ai);
  background: var(--ai);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--paper);
}

.medal-shelf {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.9rem 0.6rem;
}

.shelf-item {
  min-width: 0;
}

.shelf-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.3rem;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius);
}

.shelf-link:hover {
  background: var(--wash);
  text-decoration: none;
}

.shelf-name {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
}

.honors {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.honor {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 14%, var(--paper)), var(--paper) 70%);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--rule));
}

.honor-text {
  min-width: 0;
}

.honor-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
}

.honor-name a {
  color: var(--text);
  text-decoration: none;
}

.honor-name a:hover {
  text-decoration: underline;
}

.honor-meta {
  margin: 0.1rem 0 0.3rem;
  font-size: 0.85rem;
  color: var(--text-3);
}

.honor-reason {
  margin: 0;
  color: var(--text-2);
}

.panel-honors {
  border-color: color-mix(in srgb, var(--gold) 35%, var(--rule));
}

/* ---- the rank road: three stations of an old highway, walked as far as you have come --------- */

.road-panel {
  overflow: hidden;
  margin-bottom: 1.25rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ai-tint) 70%, var(--paper)), var(--paper) 11rem);
}

.road-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 26px;
  background: var(--ai);
  opacity: 0.07;
  pointer-events: none;
  -webkit-mask: url("/static/img/wave-crest.svg") 0 100% / 420px 26px repeat-x;
  mask: url("/static/img/wave-crest.svg") 0 100% / 420px 26px repeat-x;
}

.road-percent {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--shu-text);
}

.road-percent .num {
  font-family: inherit;
  font-size: 1em;
}

.road {
  position: relative;
  margin: 0.4rem 0 1.1rem;
}

/* The line runs between the centres of the first and last station (columns of one third). */
.road-line {
  position: absolute;
  top: 1.65rem;
  left: 16.667%;
  width: 66.667%;
  height: 10px;
  overflow: visible;
}

.road-track {
  fill: var(--rule-strong);
  opacity: 0.55;
}

.road-fill {
  fill: var(--shu);
}

.road-stations {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.station {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}

.station-seal {
  display: grid;
  place-items: center;
  width: 3.3rem;
  height: 3.3rem;
  font-family: var(--font-brush);
  font-size: 1.7rem;
  line-height: 1;
  border-radius: 50%;
  background: var(--paper);
  color: var(--text-3);
  border: 2px dashed var(--rule-strong);
}

.station-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-3);
}

.station-passed .station-seal {
  color: var(--on-ai);
  background: var(--ai);
  border: 2px solid var(--ai);
}

.station-passed .station-name {
  color: var(--text-2);
}

.station-here .station-seal {
  width: 3.9rem;
  height: 3.9rem;
  margin-top: -0.3rem;
  color: #fff8f0;
  background: var(--shu);
  border: 0;
  border-radius: 10px;
  transform: rotate(-5deg);
  box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 3.5px rgba(255, 246, 238, 0.7), 0 6px 14px -6px var(--shadow);
}

.station-here .station-name {
  color: var(--text);
  font-weight: 700;
}

.station-next .station-seal {
  color: var(--shu-text);
  border-color: var(--shu-text);
}

.station-next .station-name {
  color: var(--shu-text);
}

.station-ahead .station-seal {
  opacity: 0.75;
}

.road-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.checklist li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px dashed var(--rule);
}

.checklist li:last-child {
  border-bottom: 0;
}

.check-mark {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  color: transparent;
}

.checklist .is-done .check-mark {
  color: #fff8f0;
  background: var(--patina);
  border-color: var(--patina);
}

.checklist .is-done .check-text {
  color: var(--text-2);
}

.check-count {
  color: var(--text-2);
  white-space: nowrap;
}

/* ---- rank-up ceremony banner ------------------------------------------------------------------ */

.ceremony {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.3rem;
  color: #fff8ef;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 160% at 100% 0, color-mix(in srgb, var(--gold) 45%, transparent), transparent 60%),
    linear-gradient(110deg, var(--shu-deep), var(--shu));
  box-shadow: 0 0 0 1.5px var(--gold), 0 18px 34px -22px var(--shadow);
}

.ceremony::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 60%;
  height: 26px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-mask: url("/static/img/wave-crest.svg") 0 100% / 380px 26px repeat-x;
  mask: url("/static/img/wave-crest.svg") 0 100% / 380px 26px repeat-x;
}

.ceremony-seal {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  font-family: var(--font-brush);
  font-size: 1.9rem;
  color: var(--shu-deep);
  background: var(--gold-hi);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px rgba(255, 255, 255, 0.15);
}

.ceremony-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.ceremony-sub {
  margin: 0;
  opacity: 0.9;
  font-size: 0.9rem;
}

/* ---- Hub: tiles, notice board, tasks, staff queue ------------------------------------------ */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tiles-3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 7.4rem;
  padding: 0.95rem 1.1rem 1rem;
  color: var(--text);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ai);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px -24px var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tile:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -22px var(--shadow);
}

.tile-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-2);
}

.tile-value {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
}

.tile-value .num {
  font-family: inherit;
  font-size: 1em;
}

.tile-value .rank-badge {
  font-size: 1.05rem;
}

.tile-sub {
  font-size: 0.84rem;
  color: var(--text-3);
}

.tile-market {
  border-top-color: var(--kin);
}

.tile-alert {
  border-top-color: var(--alert);
}

.tile-alert .tile-value {
  color: var(--alert-text);
}

.notices-board {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.bulletin {
  padding: 0.9rem 1rem 0.8rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ai);
  border-radius: var(--radius);
  background: var(--paper);
}

.bulletin.is-important {
  border-left-color: var(--alert);
  background: linear-gradient(90deg, color-mix(in srgb, var(--alert-tint) 80%, var(--paper)), var(--paper) 75%);
}

.bulletin-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.bulletin-mark {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  font-family: var(--font-brush);
  font-size: 1.05rem;
  color: var(--on-alert);
  background: var(--alert);
  border-radius: 4px;
  transform: rotate(-5deg);
}

.bulletin-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.bulletin-body {
  color: var(--text-2);
}

.bulletin-meta {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--text-3);
}

.tasks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.task {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.75rem 0.1rem;
  border-bottom: 1px solid var(--rule);
}

.task:last-child {
  border-bottom: 0;
}

.task.is-mine {
  margin-inline: -0.6rem;
  padding-inline: 0.6rem;
  background: var(--ai-tint);
  border-radius: var(--radius);
  border-bottom-color: transparent;
}

.task-main {
  min-width: 0;
  flex: 1 1 16rem;
}

.task-title {
  margin: 0;
  font-weight: 600;
}

.task-desc {
  margin: 0.15rem 0 0;
  color: var(--text-2);
  font-size: 0.92rem;
}

.task-meta {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--text-3);
}

.task-act {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.queue-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.queue-list a {
  text-decoration: none;
}

.queue-list a:hover {
  text-decoration: underline;
}

.queue-list strong {
  display: inline-block;
  min-width: 1.8rem;
  color: var(--alert-text);
}

.panel-queue {
  border-top: 4px solid var(--alert);
}

.market-short {
  font-size: 1.05rem;
}

.notes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.notes li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0 0.55rem 0.8rem;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--rule);
}

.notes li:last-child {
  border-bottom: 0;
}

.notes li.is-new {
  border-left-color: var(--alert);
  font-weight: 600;
}

.notes time {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-3);
}

.timeline {
  list-style: none;
  padding: 0 0 0 1rem;
  margin: 0;
  border-left: 2px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.timeline li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1rem - 6px);
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ai);
}

.timeline time {
  min-width: 6.4rem;
  font-size: 0.86rem;
  color: var(--text-3);
}

.timeline-text {
  min-width: 0;
}

.timeline li.is-struck .timeline-text > a {
  text-decoration: line-through;
  color: var(--text-3);
}

/* ---- directory: name plates (nafuda) --------------------------------------------------------- */

.roster {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.9rem;
}

.roster-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "rank name" "rank tags" "medals medals" "seen seen";
  gap: 0.15rem 0.7rem;
  height: 100%;
  padding: 0.85rem 1rem 0.8rem;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  background: var(--paper);
}

.roster-link:hover {
  text-decoration: none;
  border-color: var(--ai);
  box-shadow: inset 0 0 0 1px var(--ai);
}

.roster-rank {
  grid-area: rank;
  align-self: start;
}

.roster-rank .rank-name {
  display: none;
}

.roster-rank .rank-seal {
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.3rem;
}

.roster-name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.roster-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-height: 0.2rem;
}

.roster-medals {
  grid-area: medals;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  color: var(--text-2);
}

.roster-seen {
  grid-area: seen;
  font-size: 0.8rem;
  color: var(--text-3);
}

.roster-card.is-quiet .roster-link {
  filter: saturate(0.4);
  opacity: 0.8;
}



.profile-facts {
  margin-bottom: 1.25rem;
}

.facts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}

.facts-row > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

.facts-row > div:last-child {
  border-bottom: 1px solid var(--rule);
}

.facts-row dd {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.facts-row dd .num {
  font-family: inherit;
  font-size: 1em;
}

.staff-tools {
  margin-top: 0;
}

/* ---- medals page -------------------------------------------------------------------------------- */

.medal-cards {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.medal-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  height: 100%;
  padding: 1.2rem 1rem 1rem;
  text-align: center;
  color: var(--text);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px -26px var(--shadow);
}

.medal-card-link:hover {
  text-decoration: none;
  border-color: var(--rule-strong);
}

.medal-card.is-honorary .medal-card-link {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--rule));
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 12%, var(--paper)), var(--paper) 7rem);
}

.medal-card-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
}

.medal-card-desc {
  font-size: 0.88rem;
  color: var(--text-2);
}

.medal-card-count {
  margin-top: auto;
  font-size: 0.82rem;
  color: var(--text-3);
}

.medal-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.holders {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.holders a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.holders .rank-name {
  display: none;
}

.emblems {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: 0.4rem;
}

.emblem-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.2rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}

.emblem-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.emblem-face {
  display: block;
  width: 2rem;
  height: 2rem;
  color: var(--text);
}

.emblem-face .art-emblem {
  width: 100%;
  height: 100%;
}

.emblem-label {
  font-size: 0.74rem;
  color: var(--text-3);
}

.emblem-opt:has(input:checked) {
  border-color: var(--ai);
  background: var(--ai-tint);
  box-shadow: inset 0 0 0 1px var(--ai);
}

.emblem-opt:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.emblem-pick {
  border: 0;
  padding: 0;
  margin: 0;
}

.req-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.req-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--rule);
}

.req-list li:last-child {
  border-bottom: 0;
}

/* ---- quests: posted notices ---------------------------------------------------------------------- */

.quests {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.quest-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 1rem 1.1rem 0.9rem 1.35rem;
  color: var(--text);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 14px 28px -24px var(--shadow);
}

/* the indigo roller of a hanging scroll along the left edge */
.quest-link::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 7px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: linear-gradient(90deg, var(--ai-deep), var(--ai));
}

.quest-link:hover {
  text-decoration: none;
  border-color: var(--rule-strong);
}

.quest.is-ended .quest-link {
  opacity: 0.7;
}

.quest.is-ended .quest-link::before {
  background: var(--rule-strong);
}

.quest.is-taken .quest-link {
  box-shadow: inset 0 0 0 1px var(--ai), 0 14px 28px -24px var(--shadow);
}

.quest-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.quest-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  font-family: var(--font-brush);
  color: var(--ai-text);
  border: 1.5px solid currentColor;
  border-radius: 4px;
}

.quest-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
}

.quest-reward {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--patina);
}

.quest-meta {
  margin-top: auto;
  font-size: 0.84rem;
  color: var(--text-3);
}

/* ---- requests ------------------------------------------------------------------------------------ */

.type-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.type-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.9rem;
}

.type-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  min-height: 9rem;
  padding: 1rem 1.1rem 1rem;
  color: var(--text);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.type-card:hover {
  text-decoration: none;
  border-color: var(--ai);
  box-shadow: inset 0 0 0 1px var(--ai);
}

.type-card-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.type-card-help {
  font-size: 0.88rem;
  color: var(--text-2);
}

.type-card-go {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ai-text);
}

.type-more-title {
  margin-top: 1.6rem;
}

.type-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.type-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  height: 100%;
  padding: 0.7rem 1rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

.type-row:hover {
  text-decoration: none;
  background: var(--wash);
}

.type-row-name {
  font-weight: 600;
}

.type-row-help {
  font-size: 0.84rem;
  color: var(--text-3);
}

.app-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.9rem;
}

.decide {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.decide > form + form {
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.panel-decide {
  border-top: 4px solid var(--alert);
}

.evidence {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.evidence li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  min-width: 0;
}

.evidence-link {
  overflow-wrap: anywhere;
}

.evidence-host {
  padding: 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.eligible li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ---- sign-ups ------------------------------------------------------------------------------------ */

.signups {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.signup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.signup-main {
  flex: 1 1 12rem;
}

.signup-main p {
  margin: 0;
}

.signup-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.signup-code {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.signup-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.code-card {
  margin: 0.4rem 0 1.2rem;
  padding: 1rem 1.1rem;
  text-align: center;
  border: 2px solid var(--shu-text);
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--shu-text);
}

.code-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.code-value {
  margin: 0.15rem 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--shu-text);
}

.signup-code .code-value {
  margin: 0;
  font-size: 1.35rem;
}

.gate-wide {
  max-width: 560px;
}

.gate-legal {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--text-3);
}

.consent {
  margin-top: 0.3rem;
  padding: 0.8rem 0.9rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.consent .check {
  align-items: flex-start;
  line-height: 1.45;
}

.consent .check input {
  flex: none;
  margin-top: 0.15rem;
}

.panel-foot > .hint {
  margin: 0;
}


/* ---- account: signed-in devices ---------------------------------------------------------------- */

.devices {
  list-style: none;
  padding: 0;
  margin: 0 0 0.8rem;
  display: flex;
  flex-direction: column;
}

.devices li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
}

.devices li.is-this .device-name {
  color: var(--ai-text);
}

.device-name {
  font-weight: 600;
}

.panel-danger {
  border-color: color-mix(in srgb, var(--shu) 35%, var(--rule));
}

/* ---- nation admin --------------------------------------------------------------------------------- */

.announce-admin li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.announce-admin li:last-child {
  border-bottom: 0;
}

.row-act {
  display: inline-flex;
  gap: 0.35rem;
  margin-left: auto;
}

/* ---- standings: a banzuke ranking sheet ---------------------------------------------------------- */

.banzuke {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.banzuke li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--shu) 16%, var(--rule));
}

.banzuke li:last-child {
  border-bottom: 0;
}

.banzuke .rank-name {
  display: none;
}

.banzuke-place {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  color: var(--text-2);
  border: 1px solid var(--rule-strong);
  font-size: 0.85rem;
}

.banzuke-name {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.banzuke-value {
  margin-left: auto;
  white-space: nowrap;
  font-size: 0.88rem;
  color: var(--text-2);
}

.banzuke .top-1 .banzuke-place {
  color: #fff8f0;
  background: var(--shu);
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-hi);
}

.banzuke .top-2 .banzuke-place {
  color: var(--on-ai);
  background: var(--ai);
  border-color: var(--ai);
}

.banzuke .top-3 .banzuke-place {
  color: var(--medal-ink);
  background: var(--bronze-face);
  border: 2px solid var(--bronze);
}

/* ---- legal pages: plain, readable sheets ------------------------------------------------------- */

.legal-nav {
  margin-bottom: 1.2rem;
}

.legal {
  max-width: 76ch;
  padding: 1.4rem 1.6rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.prose h2 {
  margin: 1.6rem 0 0.5rem;
  font-size: 1.32rem;
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 1.1rem 0 0.35rem;
  font-size: 1.05rem;
}

.prose p,
.prose ul {
  max-width: 74ch;
  line-height: 1.6;
}

.prose ul {
  margin: 0 0 0.9em;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.legal-address {
  margin: 0.4rem 0 0.9rem;
  padding: 0.8rem 1rem;
  font-style: normal;
  line-height: 1.6;
  background: var(--paper-2);
  border-left: 4px solid var(--ai);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.legal-updated {
  font-size: 0.86rem;
  color: var(--text-3);
}

/* ---- phones -------------------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }
  .tile {
    min-height: 6.4rem;
    padding: 0.8rem 0.85rem;
  }
  .tile-value {
    font-size: 1.4rem;
  }
  .station-seal {
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.4rem;
  }
  .station-here .station-seal {
    width: 3.2rem;
    height: 3.2rem;
  }
  .road-line {
    top: 1.35rem;
  }
  .station-name {
    font-size: 0.82rem;
  }
  .legal {
    padding: 1rem 1rem 1.1rem;
  }
  .bell-badge {
    right: -4px;
  }
}

/* ---- print: a clean earnings statement ------------------------------------------------------- */

@media print {
  body {
    background: #fff !important;
    color: #000;
  }
  .site-header,
  .site-footer,
  .page-actions,
  .btn,
  .skip-link,
  .filters,
  .pager,
  .chart-table summary {
    display: none !important;
  }
  .page {
    padding: 0;
  }
  .panel,
  .kpi {
    box-shadow: none;
    background: #fff !important;
    color: #000;
    border: 1px solid #999;
    border-top: 2px solid #000;
  }
  .kpi-label,
  .kpi-sub,
  .kpi-value {
    color: #000 !important;
  }
  .ledger th,
  .ledger td {
    border-color: #999;
  }
  /* Everything that is only for using the site on screen stays off the paper. */
  .tabbar,
  .music-note,
  .cer-stage,
  .secband,
  .search-page-box,
  .search-filter,
  .foot-links,
  .form-actions,
  .how-actions,
  .how-again,
  .keys-dialog,
  .notice-link,
  button,
  input[type='submit'] {
    display: none !important;
  }
  /* Black on white whatever the theme, no decoration behind the words. */
  body,
  body * {
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* (Pictures, charts and progress bars keep their own colours, so they still show on paper.) */
  body *:not(svg):not(svg *):not(img):not([class*='bar']):not([class*='fill']):not([class*='seal']) {
    background: transparent !important;
  }
  .page-title {
    font-size: 1.6rem;
  }
  .panel,
  .how-box,
  .notice,
  .search-hit,
  tr {
    break-inside: avoid;
  }
  h1,
  h2,
  h3 {
    break-after: avoid;
  }
  a {
    text-decoration: underline;
  }
  /* Only addresses outside this site are written out; a page of this site has no use for its own address on paper. */
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    word-break: break-all;
  }
  .print-only {
    display: block !important;
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
}

.print-only {
  display: none;
}

/* ---- small screens --------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .chart-svg {
    min-width: 0;
  }
  .chart-svg .axis-text,
  .chart-svg .end-label {
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  .brand-name {
    font-size: 1.3rem;
  }
  .brand-sub {
    display: none;
  }
  .icon-seal {
    width: 34px;
    height: 34px;
  }
  .page {
    padding-block: 1.2rem 1rem;
  }
  .page-title {
    font-size: var(--step-3);
  }
  .panel {
    padding: 0.9rem 0.9rem 1rem;
  }
  .panel-title {
    font-size: var(--step-1);
  }
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .kpi {
    padding: 0.8rem 0.8rem 0.9rem;
  }
  .kpi-value {
    font-size: 1.45rem;
  }
  .kpi-sub {
    font-size: 0.78rem;
  }
  .filters {
    padding: 0.7rem;
  }
  .filters .field,
  .filters .field input[type="search"] {
    min-width: 0;
    width: 100%;
  }
  .seg {
    margin-left: 0;
  }
  .bulk-actions {
    margin-left: 0;
    width: 100%;
  }
  .bulk-actions input[type="text"] {
    flex: 1 1 10rem;
    width: auto;
  }
  .qty-box {
    width: calc(50% - 1.2rem);
  }
  .plank-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .gate-card {
    padding: 1.2rem 1.1rem 1.2rem;
  }
}

.tab-label {
  line-height: 1.15;
}

@media (max-width: 720px) {
  .tab-badge {
    right: 6%;
    top: 0.1rem;
  }
}

.spaced-top {
  margin-top: 1.25rem;
}

.cell-stamp {
  margin-top: 0.3rem;
}

/* ==== engagement: achievements, ceremonies, seasons, the cabinet, the Chronicle ======================== */

/* ---- season colours: one variable that every season-coloured part reads -------------------------- */

.season-indigo, .sroad-indigo, .frame-indigo { --season: var(--s-indigo); }
.season-sakura, .sroad-sakura, .frame-sakura { --season: var(--s-sakura); }
.season-pine, .sroad-pine, .frame-pine { --season: var(--s-pine); }
.season-maple, .sroad-maple, .frame-maple { --season: var(--s-maple); }
.season-snow, .sroad-snow, .frame-snow { --season: var(--s-snow); }
.season-gold, .sroad-gold, .frame-gold { --season: var(--s-gold); }

/* ---- sub-tabs and chips ----------------------------------------------------------------------------- */

main > .subtabs {
  margin: -0.35rem 0 1.25rem;
}

.subtabs .seg-item.is-current {
  box-shadow: inset 0 -2px 0 var(--shu);
}

a.chip {
  text-decoration: none;
  border: 1px solid transparent;
}

a.chip:hover {
  border-color: color-mix(in srgb, var(--ai) 40%, transparent);
  text-decoration: none;
}

a.chip.is-current {
  color: var(--on-ai);
  background: var(--ai);
}

nav.chips {
  margin: 0 0 1rem;
}

.ach-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
}

.ach-filters .seg {
  margin-left: 0;
}

@media (max-width: 720px) {
  main > .subtabs,
  .ach-filters .seg {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  main > .subtabs::-webkit-scrollbar,
  .ach-filters .seg::-webkit-scrollbar {
    display: none;
  }

  .subtabs .seg-item,
  .ach-filters .seg-item {
    flex: none;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
  }
}

/* ---- small shared marks -------------------------------------------------------------------------- */

.tag-mentor { color: var(--patina); background: var(--patina-tint); border-color: transparent; }
.tag-hidden { color: var(--shu-text); background: var(--shu-tint); border-color: transparent; }
.tag-ok { color: var(--patina); border-color: currentColor; }

.check-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.check-inline legend {
  width: 100%;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.2rem 1rem;
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
}

.field-grid legend {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.field-grid .field {
  margin: 0;
}

.check.is-locked {
  opacity: 0.55;
}

.head-title {
  margin-right: 0.6rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-2);
}

.head-sub {
  margin-left: 0.4rem;
  color: var(--text-3);
  font-size: 0.9rem;
}

.pname {
  font-weight: 600;
}

.ptitle {
  color: var(--text-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

.pname-link {
  color: var(--text);
  text-decoration: none;
}

.pname-link:hover {
  text-decoration: underline;
}

.countdown {
  font-weight: 600;
  color: var(--shu-text);
  white-space: nowrap;
}

.ev-time {
  white-space: nowrap;
}

.ev-time[data-your-time]::after {
  content: " (" attr(data-your-time) " your time)";
  color: var(--text-3);
  font-weight: 400;
}

.stat-strip {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;
  color: var(--text-2);
  font-size: 0.92rem;
}

.stat-strip li {
  padding: 0 0.9rem;
  border-left: 1px solid var(--rule-strong);
}

.stat-strip li:first-child {
  padding-left: 0;
  border-left: 0;
}

.stat-strip .num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-right: 0.15rem;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- moving progress bars -------------------------------------------------------------------------- */

.pbar {
  --pbar-fill: var(--ai);
  height: 10px;
  margin: 0.35rem 0;
}

.pbar-thin {
  height: 6px;
}

.pbar-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pbar-track {
  fill: var(--chart-track);
}

.pbar-fill {
  fill: var(--pbar-fill);
}

.pbar-season {
  --pbar-fill: var(--season, var(--shu));
}

.pbar-prosper {
  --pbar-fill: var(--kin);
}

.since-last {
  display: inline-block;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--patina);
  background: var(--patina-tint);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- header: search, title, decorations, fireworks --------------------------------------------------- */

.hdr-search {
  position: relative;
}

.hdr-search > summary {
  list-style: none;
}

.hdr-search > summary::-webkit-details-marker {
  display: none;
}

.hdr-search[open] > summary {
  background: rgba(255, 255, 255, 0.16);
}

.hdr-search-form {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: flex;
  gap: 0.4rem;
  width: min(22rem, calc(100vw - 2 * var(--gutter)));
  padding: 0.6rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -18px var(--shadow);
}

.hdr-search-form input {
  flex: 1 1 auto;
  min-width: 0;
}

.user-title {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--hdr-muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.88rem;
}

@media (max-width: 1100px) {
  .user-title {
    display: none;
  }
}

@media (max-width: 720px) {
  .hdr-tools .hdr-search-form {
    display: flex;
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    top: 64px;
    width: auto;
  }
}

/* Decorations: a touch of the season over the sky, unlocked by Prosperity. Purely visual. */
.hdr-deco {
  position: absolute;
  inset: 0;
  opacity: 0.85;
}

.deco-sakura .hdr-deco {
  background-image:
    radial-gradient(4px 3px at 10% 20%, #f6c1d1 60%, transparent 62%),
    radial-gradient(3px 4px at 28% 62%, #f3b3c6 60%, transparent 62%),
    radial-gradient(4px 3px at 47% 34%, #f8cad7 60%, transparent 62%),
    radial-gradient(3px 3px at 63% 74%, #f1abc0 60%, transparent 62%),
    radial-gradient(4px 3px at 81% 26%, #f6c1d1 60%, transparent 62%),
    radial-gradient(3px 4px at 92% 58%, #f3b3c6 60%, transparent 62%);
  background-size: 360px 160px;
}

.deco-fireflies .hdr-deco {
  background-image:
    radial-gradient(3px 3px at 14% 40%, #f6e27a 50%, rgba(246, 226, 122, 0.25) 70%, transparent 72%),
    radial-gradient(2px 2px at 36% 70%, #fff2a8 50%, rgba(246, 226, 122, 0.25) 70%, transparent 72%),
    radial-gradient(3px 3px at 58% 28%, #f6e27a 50%, rgba(246, 226, 122, 0.25) 70%, transparent 72%),
    radial-gradient(2px 2px at 77% 60%, #fff2a8 50%, rgba(246, 226, 122, 0.25) 70%, transparent 72%),
    radial-gradient(3px 3px at 90% 36%, #f6e27a 50%, rgba(246, 226, 122, 0.25) 70%, transparent 72%);
  background-size: 300px 140px;
}

.deco-maple .hdr-deco {
  background-image:
    radial-gradient(5px 4px at 12% 30%, #d9542c 60%, transparent 62%),
    radial-gradient(4px 5px at 33% 66%, #e7863a 60%, transparent 62%),
    radial-gradient(5px 4px at 54% 22%, #c43d22 60%, transparent 62%),
    radial-gradient(4px 4px at 72% 58%, #e7863a 60%, transparent 62%),
    radial-gradient(5px 4px at 88% 34%, #d9542c 60%, transparent 62%);
  background-size: 380px 170px;
}

.deco-snow .hdr-deco {
  background-image:
    radial-gradient(2px 2px at 8% 18%, #ffffff 60%, transparent 62%),
    radial-gradient(3px 3px at 22% 54%, #eef4fb 60%, transparent 62%),
    radial-gradient(2px 2px at 40% 30%, #ffffff 60%, transparent 62%),
    radial-gradient(3px 3px at 57% 70%, #eef4fb 60%, transparent 62%),
    radial-gradient(2px 2px at 73% 22%, #ffffff 60%, transparent 62%),
    radial-gradient(3px 3px at 89% 48%, #eef4fb 60%, transparent 62%);
  background-size: 240px 120px;
}

@media (prefers-reduced-motion: no-preference) {
  .deco-sakura .hdr-deco,
  .deco-maple .hdr-deco,
  .deco-snow .hdr-deco {
    animation: deco-fall 26s linear infinite;
  }

  .deco-fireflies .hdr-deco {
    animation: deco-glow 5s ease-in-out infinite alternate;
  }
}

@keyframes deco-fall {
  from { background-position: 0 0; }
  to { background-position: -360px 480px; }
}

@keyframes deco-glow {
  from { opacity: 0.35; }
  to { opacity: 0.95; }
}

/* Fireworks over the sky when Prosperity grows (once, on the page that shows the banner). */
.hdr-fireworks {
  position: absolute;
  inset: 0;
}

.fw-burst {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: 0;
  background:
    repeating-conic-gradient(from 0deg, var(--gold-hi) 0 4deg, transparent 4deg 24deg);
  -webkit-mask: radial-gradient(circle, transparent 0 28%, #000 30% 48%, transparent 50%);
  mask: radial-gradient(circle, transparent 0 28%, #000 30% 48%, transparent 50%);
}

.fw-burst.b1 { left: 18%; top: 8%; }
.fw-burst.b2 { left: 46%; top: 2%; width: 90px; height: 90px; background: repeating-conic-gradient(from 10deg, #f6b8a8 0 4deg, transparent 4deg 22deg); }
.fw-burst.b3 { left: 70%; top: 14%; width: 100px; height: 100px; }

@media (prefers-reduced-motion: no-preference) {
  .has-fireworks .fw-burst {
    animation: fw-pop 1.8s ease-out 3 both;
  }

  .has-fireworks .fw-burst.b2 { animation-delay: 0.5s; }
  .has-fireworks .fw-burst.b3 { animation-delay: 1s; }
}

@keyframes fw-pop {
  0% { opacity: 0; transform: scale(0.2); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ---- ceremonies --------------------------------------------------------------------------------- */

/*
  Without the page script, every moment waiting for the person is a plain card at the top of the page with
  a Close button (a normal form). The script marks the stage .is-enhanced and plays them one at a time.
  If the script is slow or blocked, the plain cards appear after two seconds anyway.
*/
.cer-stage {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0 0 1.4rem;
}

.js .cer-stage:not(.is-enhanced) {
  visibility: hidden;
  animation: cer-reveal 0s linear 2s forwards;
}

@keyframes cer-reveal {
  to { visibility: visible; }
}

.cer {
  position: relative;
}

.cer-veil,
.cer-noren,
.cer-lanterns,
.cer-petals,
.cer-burst {
  display: none;
}

.cer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.4rem 1.4rem 1.3rem;
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%),
    var(--paper);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule));
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper) 70%, transparent), 0 22px 50px -28px var(--shadow);
}

.cer-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shu-text);
}

.cer-title {
  margin: 0.3rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
}

.cer-sub {
  margin: 0;
  color: var(--text-2);
}

.cer-reason {
  max-width: 42ch;
  margin: 0.3rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-2);
}

.cer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.cer-form {
  display: inline;
}

/* The seal stamped onto the card. */
.cer-seal {
  display: grid;
  place-items: center;
  width: 5.4rem;
  height: 5.4rem;
  margin: 0.4rem 0;
  font-family: var(--font-brush);
  font-size: 3rem;
  line-height: 1;
  color: #fff8f0;
  background: var(--shu);
  border-radius: 14px;
  transform: rotate(-6deg);
  box-shadow: inset 0 0 0 3px var(--shu), inset 0 0 0 5px rgba(255, 246, 238, 0.75), 0 10px 24px -10px var(--shadow);
}

.cer-seal.rank-level2 {
  background: var(--ai);
  box-shadow: inset 0 0 0 3px var(--ai), inset 0 0 0 5px rgba(255, 255, 255, 0.6), 0 10px 24px -10px var(--shadow);
}

.cer-seal.rank-nobility {
  box-shadow: inset 0 0 0 3px var(--shu), inset 0 0 0 5px var(--gold-hi), 0 0 0 3px var(--gold), 0 10px 24px -10px var(--shadow);
}

.cer-seal-home {
  background: var(--patina);
  box-shadow: inset 0 0 0 3px var(--patina), inset 0 0 0 5px rgba(255, 255, 255, 0.65), 0 10px 24px -10px var(--shadow);
}

.cer-seal-ink {
  color: var(--paper);
  background: var(--text);
  box-shadow: inset 0 0 0 3px var(--text), inset 0 0 0 5px color-mix(in srgb, var(--paper) 70%, transparent), 0 10px 24px -10px var(--shadow);
}

.cer-medal {
  position: relative;
  display: inline-block;
  margin: 0.5rem 0;
  overflow: hidden;
  border-radius: 50%;
}

/* A thin line of light sweeps across a new medal. */
.cer-medal::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.65) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}

.cer-list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.cer-list li {
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--rule);
}

/* Quest and bounty: a hanging scroll with the quest written on it, then 完 ("complete"). */
.cer-scroll {
  position: relative;
  display: flex;
  align-items: stretch;
  max-width: 30rem;
  margin: 0.6rem 0;
}

.cer-scroll-rod {
  flex: none;
  width: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ai-deep), var(--ai) 50%, var(--ai-deep));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.cer-scroll-text {
  margin: 0;
  padding: 1.1rem 1.6rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  background: var(--annal-paper);
  color: var(--annal-ink);
  box-shadow: inset 0 8px 10px -10px rgba(0, 0, 0, 0.4), inset 0 -8px 10px -10px rgba(0, 0, 0, 0.4);
}

.cer-done {
  position: absolute;
  right: -0.8rem;
  bottom: -1rem;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  font-family: var(--font-brush);
  font-size: 1.9rem;
  color: #fff8f0;
  background: var(--shu);
  border-radius: 50%;
  transform: rotate(-10deg);
  box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 4px rgba(255, 246, 238, 0.7);
}

/* Toasts: small slips for achievements, thanks and milestones. */
.toasts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--kin);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px -20px var(--shadow);
}

.toast-thanks { border-left-color: var(--shu); }
.toast-milestone { border-left-color: var(--s-indigo); }
.toast-anniversary { border-left-color: var(--patina); }
.toast-mentor_settled { border-left-color: var(--patina); }
.toast.is-hidden-ach { border-left-color: var(--shu); background: linear-gradient(100deg, var(--shu-tint), var(--paper) 55%); }

.toast-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.toast-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.toast-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
}

.toast-sub {
  font-size: 0.86rem;
  color: var(--text-2);
}

.toast-more {
  position: absolute;
  right: 0.8rem;
  bottom: -1.3rem;
  font-size: 0.78rem;
  color: var(--text-3);
}

.toast-stamp {
  flex: none;
  padding: 0.25rem 0.35rem;
  font-family: var(--font-brush);
  font-size: 0.82rem;
  line-height: 1.15;
  writing-mode: vertical-rl;
  color: var(--shu-text);
  border: 2px solid currentColor;
  border-radius: 4px;
  transform: rotate(-4deg);
}

.toast-seal {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  font-family: var(--font-brush);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff8f0;
  background: var(--season, var(--patina));
  border-radius: 8px;
  transform: rotate(-5deg);
}

.cer-close-all {
  display: flex;
  justify-content: flex-end;
}

/* The Prosperity banner: gentle, full width, gold. */
.cer-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 0.85rem 1.1rem;
  color: var(--text);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--gold) 26%, var(--paper)), color-mix(in srgb, var(--gold) 8%, var(--paper)) 70%);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--rule));
  border-radius: var(--radius-lg);
}

.cer-banner-kanji {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  font-family: var(--font-brush);
  font-size: 1.5rem;
  color: var(--shu-deep);
  background: var(--gold-hi);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gold);
}

.cer-banner-text {
  flex: 1 1 18rem;
  margin: 0;
}

/* -- the enhanced stage: one big moment at a time over the page ------------------------------------------- */

.cer-stage.is-enhanced {
  margin: 0;
}

.cer-stage.is-enhanced .cer-close-all {
  display: none;
}

.cer-stage.is-enhanced .cer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: var(--gutter);
  overflow-y: auto;
}

.cer-stage.is-enhanced .cer.is-active {
  display: grid;
}

.cer-stage.is-enhanced .cer-veil {
  display: block;
  position: fixed;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, 0.06), transparent 70%),
    var(--veil);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.cer-stage.is-enhanced .cer-card {
  width: min(34rem, 100%);
  padding: 2rem 1.6rem 1.6rem;
  z-index: 2;
}

.cer-stage.is-enhanced .toasts {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  z-index: 190;
  width: min(24rem, calc(100vw - 2 * var(--gutter)));
}

.cer-stage.is-enhanced .toast {
  padding-right: 2.4rem;
}

.cer-stage.is-enhanced .toast.is-gone {
  display: none;
}

.toast-x {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.toast-x:hover {
  color: var(--text);
  background: var(--wash);
}

.cer-skip {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
}

@media (max-width: 720px) {
  .cer-stage.is-enhanced .toasts {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* Noren: two halves of an indigo curtain part to reveal the new rank. */
.cer-stage.is-enhanced .cer-noren {
  display: flex;
  position: fixed;
  inset: 0 0 auto;
  height: 46vh;
  z-index: 1;
  pointer-events: none;
}

.cer-noren-l,
.cer-noren-r {
  flex: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 12%),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 3px), rgba(0, 0, 0, 0.18) calc(25% - 3px) 25%),
    var(--noren);
  border-bottom: 3px solid var(--noren-hi);
}

/* Lanterns drift upward behind the card. */
.cer-stage.is-enhanced .cer-lanterns {
  display: block;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.lantern {
  position: absolute;
  bottom: -60px;
  width: 22px;
  height: 30px;
  border-radius: 45% 45% 40% 40%;
  background: radial-gradient(circle at 50% 40%, #ffd98a, #e2582f 70%);
  box-shadow: 0 0 22px 6px rgba(240, 150, 70, 0.4);
  opacity: 0;
}

.lantern::before,
.lantern::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 3px;
  background: #3a1d10;
  border-radius: 2px;
}

.lantern::before { top: -2px; }
.lantern::after { bottom: -2px; }

.lantern.l1 { left: 8%; }
.lantern.l2 { left: 22%; transform: scale(0.8); }
.lantern.l3 { left: 37%; }
.lantern.l4 { left: 52%; transform: scale(0.7); }
.lantern.l5 { left: 66%; }
.lantern.l6 { left: 80%; transform: scale(0.85); }
.lantern.l7 { left: 92%; transform: scale(0.75); }

/* Petals fall for the Nobility. */
.cer-stage.is-enhanced .cer-petals {
  display: block;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.petal {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 9px;
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #fbd3df, #ef9bb4);
  opacity: 0;
}

.petal.p1 { left: 4%; }
.petal.p2 { left: 11%; }
.petal.p3 { left: 18%; }
.petal.p4 { left: 26%; }
.petal.p5 { left: 33%; }
.petal.p6 { left: 41%; }
.petal.p7 { left: 49%; }
.petal.p8 { left: 56%; }
.petal.p9 { left: 63%; }
.petal.p10 { left: 70%; }
.petal.p11 { left: 77%; }
.petal.p12 { left: 84%; }
.petal.p13 { left: 90%; }
.petal.p14 { left: 96%; }

/* Rays of gold behind an honorary medal. */
.cer-stage.is-enhanced .cer-burst {
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 140vmax;
  height: 140vmax;
  margin: -70vmax 0 0 -70vmax;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 60%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 10%, transparent 45%);
  mask: radial-gradient(circle, #000 0 10%, transparent 45%);
}

@media (prefers-reduced-motion: no-preference) {
  .cer-stage.is-enhanced .cer.is-active .cer-veil {
    animation: cer-fade 0.35s ease-out both;
  }

  .cer-stage.is-enhanced .cer.is-active .cer-card {
    animation: cer-rise 0.55s cubic-bezier(0.2, 0.8, 0.25, 1) 0.15s both;
  }

  .cer-stage.is-enhanced .cer.is-active .cer-seal {
    animation: cer-stamp 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 0.6s both;
  }

  .cer-stage.is-enhanced .cer.is-active .cer-noren-l {
    animation: noren-part-l 1.1s cubic-bezier(0.6, 0, 0.3, 1) 0.1s both;
  }

  .cer-stage.is-enhanced .cer.is-active .cer-noren-r {
    animation: noren-part-r 1.1s cubic-bezier(0.6, 0, 0.3, 1) 0.1s both;
  }

  .cer-stage.is-enhanced .cer.is-active .lantern {
    animation: lantern-rise 7s ease-in 0.4s both;
  }

  .cer-stage.is-enhanced .cer.is-active .lantern.l2 { animation-delay: 1.2s; }
  .cer-stage.is-enhanced .cer.is-active .lantern.l3 { animation-delay: 0.8s; }
  .cer-stage.is-enhanced .cer.is-active .lantern.l4 { animation-delay: 1.9s; }
  .cer-stage.is-enhanced .cer.is-active .lantern.l5 { animation-delay: 0.2s; }
  .cer-stage.is-enhanced .cer.is-active .lantern.l6 { animation-delay: 1.5s; }
  .cer-stage.is-enhanced .cer.is-active .lantern.l7 { animation-delay: 2.4s; }

  .cer-stage.is-enhanced .cer.is-active .petal {
    animation: petal-fall 6s linear both;
  }

  .cer-stage.is-enhanced .cer.is-active .petal:nth-child(3n) { animation-duration: 7.5s; animation-delay: 0.6s; }
  .cer-stage.is-enhanced .cer.is-active .petal:nth-child(3n + 1) { animation-duration: 5.2s; animation-delay: 1.3s; }
  .cer-stage.is-enhanced .cer.is-active .petal:nth-child(4n) { animation-delay: 2.1s; }

  .cer-stage.is-enhanced .cer.is-active .cer-medal .medal {
    animation: medal-spin 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
  }

  .cer-stage.is-enhanced .cer.is-active .cer-medal::after {
    animation: medal-glint 1.1s ease-in-out 1.6s both;
  }

  .cer-stage.is-enhanced .cer.is-active .cer-burst {
    animation: burst-turn 24s linear infinite, cer-fade 1s ease-out both;
  }

  .cer-stage.is-enhanced .cer.is-active .cer-scroll-text {
    animation: scroll-open 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
  }

  .cer-stage.is-enhanced .cer.is-active .cer-done {
    animation: cer-stamp 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 1.35s both;
  }

  .cer-stage.is-enhanced .toast {
    animation: toast-in 0.45s cubic-bezier(0.2, 0.8, 0.25, 1) both;
  }

  .cer-stage.is-enhanced .toast:nth-child(2) { animation-delay: 0.25s; }
  .cer-stage.is-enhanced .toast:nth-child(3) { animation-delay: 0.5s; }

  .cer-stage.is-enhanced .toast.is-leaving {
    animation: toast-out 0.35s ease-in both;
  }
}

@keyframes cer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cer-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes cer-stamp {
  0% { opacity: 0; transform: scale(2.4) rotate(-18deg); }
  70% { opacity: 1; transform: scale(0.94) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}

@keyframes noren-part-l {
  from { transform: translateX(0); }
  to { transform: translateX(-102%); }
}

@keyframes noren-part-r {
  from { transform: translateX(0); }
  to { transform: translateX(102%); }
}

@keyframes lantern-rise {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 0.95; }
  85% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-110vh) translateX(30px); }
}

@keyframes petal-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-60px, 105vh) rotate(540deg); }
}

@keyframes medal-spin {
  from { transform: perspective(500px) rotateY(-540deg) scale(0.6); opacity: 0; }
  to { transform: perspective(500px) rotateY(0) scale(1); opacity: 1; }
}

@keyframes medal-glint {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes burst-turn {
  to { transform: rotate(360deg); }
}

@keyframes scroll-open {
  from { clip-path: inset(0 50% 0 50%); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(40px); }
}

@media (prefers-reduced-motion: reduce) {
  .cer-stage.is-enhanced .cer.is-active .cer-card {
    animation: cer-fade 0.2s linear both;
  }

  .cer-stage.is-enhanced .cer-lanterns,
  .cer-stage.is-enhanced .cer-petals,
  .cer-stage.is-enhanced .cer-noren {
    display: none;
  }
}

/* ---- achievements: octagonal seals, one colour per kind ----------------------------------------------- */

.ach-emblem {
  --ach: var(--ai);
  --ach-size: 2.6rem;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--ach-size);
  height: var(--ach-size);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: var(--ach);
}

.ach-emblem::before {
  content: "";
  position: absolute;
  inset: 3px;
  clip-path: inherit;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.28), transparent 55%),
    var(--ach);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
  outline: 1.5px solid rgba(255, 255, 255, 0.5);
  outline-offset: -4px;
}

.ach-sm { --ach-size: 1.8rem; }
.ach-md { --ach-size: 2.6rem; }
.ach-lg { --ach-size: 4.6rem; }

.ach-kanji {
  position: relative;
  font-family: var(--font-brush);
  font-size: calc(var(--ach-size) * 0.46);
  line-height: 1;
  color: #fffaf1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.ach-citizen { --ach: var(--ai); }
.ach-builder { --ach: var(--rust); }
.ach-explorer { --ach: var(--patina); }
.ach-honours { --ach: var(--shu); }
.ach-helper { --ach: #a2476a; }
.ach-events { --ach: #7b4fa0; }
.ach-market { --ach: var(--kin); }
.ach-seasons { --ach: var(--s-pine); }
.ach-nation { --ach: var(--ai-deep); }

.ach-emblem.is-locked {
  --ach: var(--rule-strong);
  opacity: 1;
}

.ach-emblem.is-locked::before {
  background: var(--paper-2);
  box-shadow: none;
  outline-color: var(--rule-strong);
  outline-style: dashed;
}

.ach-emblem.is-locked .ach-kanji {
  color: var(--text-3);
  text-shadow: none;
}

.ach-emblem.is-hidden.is-unlocked {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 70%, transparent));
}

.ach-plate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "count facts" "bar bar";
  align-items: center;
  gap: 0.4rem 1.6rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--shu);
  border-radius: var(--radius-lg);
}

.ach-plate .pbar {
  grid-area: bar;
}

.ach-plate-count {
  grid-area: count;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ach-plate-count .num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}

.ach-plate-of {
  font-size: 1.05rem;
  color: var(--text-2);
}

.ach-plate-label {
  width: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ach-plate-facts {
  grid-area: facts;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  margin: 0;
}

.ach-plate-facts dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ach-plate-facts dd {
  margin: 0;
}

@media (max-width: 560px) {
  .ach-plate {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "count" "bar" "facts";
  }
}

.ach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  gap: 0.7rem;
}

.ach-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.ach-row.is-locked {
  opacity: 1;
  background: var(--paper-2);
}

.ach-row.is-locked .ach-name {
  color: var(--text-2);
}

.ach-row.is-secret .ach-text {
  font-style: italic;
}

.ach-name {
  margin: 0;
  font-weight: 700;
}

.ach-title {
  margin-left: 0.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--text-3);
}

.ach-text {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
  color: var(--text-2);
}

.ach-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.ach-progress .pbar {
  flex: 1 1 auto;
  margin: 0;
}

.ach-count {
  font-size: 0.8rem;
  color: var(--text-3);
  white-space: nowrap;
}

.ach-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  text-align: right;
}

.ach-date {
  font-size: 0.8rem;
  color: var(--text-2);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .ach-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ach-side {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.rarity {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  min-width: 6rem;
}

.rarity-svg {
  display: block;
  width: 6rem;
  height: 4px;
}

.rarity-track { fill: var(--chart-track); }
.rarity-fill { fill: var(--text-3); }
.rarity-uncommon { fill: var(--patina); }
.rarity-rare { fill: var(--ai); }
.rarity-very-rare { fill: var(--shu); }

.rarity-text {
  font-size: 0.74rem;
  color: var(--text-3);
  white-space: nowrap;
}

/* ---- Me: almost there, moments, four figures ------------------------------------------------------- */

.kpis-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .kpis-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kpi-of {
  font-size: 0.6em;
  color: var(--text-3);
}

.panel-almost {
  border-top: 4px solid var(--patina);
}

.almost {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.almost-link {
  display: block;
  padding: 0.55rem 0.6rem;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
}

.almost-link:hover {
  background: var(--wash);
  text-decoration: none;
}

.almost-text strong {
  color: var(--patina);
}

.moments li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 0.6rem;
}

.panel-steps .pbar {
  height: 12px;
}

/* ---- the medal cabinet: a lacquered tansu with iron fittings -------------------------------------- */

.tansu {
  position: relative;
  max-width: 60rem;
  margin: 0.5rem auto 2.2rem;
  perspective: 1400px;
}

.tansu-crown {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 1.2rem;
  padding: 0.55rem 1rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--lacquer-hi), var(--lacquer));
  border-radius: 10px 10px 0 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

.tansu-plaque {
  margin: 0;
  padding: 0.3rem 1.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #2a1c08;
  background: linear-gradient(180deg, #f1d98d, var(--brass) 55%, var(--brass-deep));
  border-radius: 4px;
  box-shadow: 0 0 0 1px #6f5318, inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 6px -2px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.tansu-count {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  opacity: 0.8;
}

.tansu-body {
  position: relative;
  padding: 1.6rem 1.6rem 1.2rem;
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.022) 0 3px, transparent 3px 11px),
    radial-gradient(120% 70% at 30% 0, rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(180deg, var(--lacquer-hi), var(--lacquer) 30%, var(--lacquer-deep));
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.22),
    inset 0 0 0 5px rgba(255, 255, 255, 0.05),
    0 30px 50px -30px var(--shadow),
    0 10px 20px -12px var(--shadow);
}

.tansu-corner {
  position: absolute;
  width: 46px;
  height: 46px;
  z-index: 2;
}

.tansu-corner.tl { left: 2px; top: 2px; }
.tansu-corner.tr { right: 2px; top: 2px; transform: scaleX(-1); }
.tansu-corner.bl { left: 2px; bottom: 2px; transform: scaleY(-1); }
.tansu-corner.br { right: 2px; bottom: 2px; transform: scale(-1, -1); }

.iron {
  fill: var(--fitting);
  stroke: var(--fitting-hi);
  stroke-width: 0.8;
}

.iron-ring {
  fill: none;
  stroke: var(--fitting);
  stroke-width: 4;
  stroke-linecap: round;
}

.rivet {
  fill: var(--fitting-hi);
}

.tansu-shelf {
  position: relative;
  margin: 0 0 1rem;
  padding: 0.7rem 0.8rem 0.8rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.18));
  border-radius: 4px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tansu-shelf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  background: linear-gradient(180deg, var(--lacquer-hi), var(--lacquer-deep));
  border-radius: 0 0 3px 3px;
}

.tansu-label {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f1d98d;
}

.shelf-honorary .tansu-label::before { content: "勲 "; font-family: var(--font-brush); }
.shelf-regular .tansu-label::before { content: "章 "; font-family: var(--font-brush); }
.shelf-season .tansu-label::before { content: "季 "; font-family: var(--font-brush); }

.tansu-note {
  margin: 0;
  color: rgba(255, 240, 220, 0.7);
  font-size: 0.9rem;
}

.tansu-niches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr));
  gap: 0.7rem;
}

.niche {
  min-width: 0;
}

.niche-details > summary {
  list-style: none;
  cursor: pointer;
}

.niche-details > summary::-webkit-details-marker {
  display: none;
}

.niche-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  height: 100%;
  padding: 0.8rem 0.4rem 0.55rem;
  background:
    radial-gradient(80% 60% at 50% 35%, rgba(255, 220, 160, 0.09), transparent 70%),
    var(--niche);
  border-radius: 4px;
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.15s ease;
}

.niche-face:hover,
.niche-details[open] > .niche-face {
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.7), 0 0 0 2px var(--brass);
}

.niche-face:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.niche-stand {
  position: relative;
  padding-bottom: 6px;
}

.niche-stand::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  filter: blur(2px);
}

.niche-plate {
  max-width: 100%;
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: #2a1c08;
  background: linear-gradient(180deg, #ecd28a, var(--brass));
  border-radius: 2px;
  box-shadow: 0 0 0 1px #6f5318;
  overflow-wrap: anywhere;
}

.niche.is-empty .niche-plate {
  color: rgba(255, 240, 220, 0.62);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* An empty niche shows the medal's shape in shadow. */
.medal-silhouette {
  filter: grayscale(1) brightness(0.32) contrast(0.9);
  opacity: 0.75;
  box-shadow: none;
}

.medal-silhouette .medal-face {
  opacity: 0.55;
}

.medal-gilded {
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px var(--gold-hi), 0 0 16px 2px color-mix(in srgb, var(--gold) 50%, transparent);
}

/* Season medals: struck in the colour of their season, ringed in silver. */
.medal-season {
  color: #fffaf1;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.45), transparent 40%),
    radial-gradient(circle, var(--season, var(--s-indigo)) 0 56%, #d9dee6 57% 62%, #a8b1bd 63% 70%, #7d8794 71% 100%);
  box-shadow: 0 2px 5px -1px var(--shadow), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}

.niche-card {
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  top: calc(100% + 4px);
  z-index: 6;
  max-width: 26rem;
  margin: 0 auto;
  padding: 0.9rem 1rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6);
}

.niche-card p {
  margin: 0 0 0.35rem;
}

.niche-card-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.niche-card-kind {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.niche-card-text {
  color: var(--text-2);
}

.niche-card-awards {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: 0.88rem;
}

.niche-card-awards li {
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--rule);
}

.niche-card-more {
  font-size: 0.88rem;
}

.tansu-shelf.is-bare {
  padding-bottom: 1rem;
}

.tansu-drawers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.tansu-drawer {
  display: grid;
  place-items: center;
  height: 3rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 3px, transparent 3px 10px),
    linear-gradient(180deg, var(--lacquer-hi), var(--lacquer));
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 0 rgba(0, 0, 0, 0.25);
}

.tansu-handle {
  width: 64px;
  height: 32px;
}

.tansu-feet {
  display: flex;
  justify-content: space-between;
  padding: 0 1.6rem;
}

.tansu-feet span {
  width: 3.4rem;
  height: 0.7rem;
  background: var(--lacquer-deep);
  border-radius: 0 0 4px 4px;
}

/* The doors open once per visit (the page script decides), then step aside. */
.tansu-doors {
  display: none;
}

.tansu.is-opening .tansu-doors {
  position: absolute;
  inset: 3.1rem 0 0.7rem;
  z-index: 8;
  display: flex;
  pointer-events: none;
}

.tansu-door {
  flex: 1;
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.03) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, var(--lacquer-hi), var(--lacquer) 40%, var(--lacquer-deep));
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.3), inset 0 0 0 6px rgba(255, 255, 255, 0.04);
  backface-visibility: hidden;
}

.door-l {
  transform-origin: left center;
  border-radius: 6px 0 0 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}

.door-r {
  transform-origin: right center;
  border-radius: 0 6px 6px 0;
}

.tansu.is-opening .door-l {
  animation: door-open-l 1.3s cubic-bezier(0.55, 0, 0.25, 1) 0.25s both;
}

.tansu.is-opening .door-r {
  animation: door-open-r 1.3s cubic-bezier(0.55, 0, 0.25, 1) 0.25s both;
}

@keyframes door-open-l {
  0% { transform: rotateY(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: rotateY(-105deg); opacity: 0; }
}

@keyframes door-open-r {
  0% { transform: rotateY(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: rotateY(105deg); opacity: 0; }
}

@media (max-width: 560px) {
  .tansu-body {
    padding: 1.2rem 0.7rem 0.9rem;
  }

  .tansu-corner {
    width: 32px;
    height: 32px;
  }

  .tansu-niches {
    grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr));
    gap: 0.5rem;
  }

  .tansu-crown {
    margin: 0 0.5rem;
  }
}

/* ---- profiles: a name plate, the showcase, thank-you slips --------------------------------------- */

.profile-plate {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.5rem;
  align-items: center;
  margin: 0 0 1.25rem;
  padding: 1.3rem 1.5rem;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--ai-tint) 70%, var(--paper)), var(--paper) 60%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 36px -26px var(--shadow);
}

.profile-plate[class*="frame-"] {
  border: 2px solid var(--season);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--season) 18%, transparent), 0 16px 36px -26px var(--shadow);
  background: linear-gradient(110deg, color-mix(in srgb, var(--season) 14%, var(--paper)), var(--paper) 60%);
}

.profile-id {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.profile-id .page-title {
  margin: 0;
  overflow-wrap: anywhere;
}

.profile-seal .rank-badge .rank-seal {
  width: 3.4rem;
  height: 3.4rem;
  font-size: 2rem;
  border-radius: 8px;
}

.profile-seal .rank-name {
  display: none;
}

.profile-title {
  margin: 0.1rem 0 0.3rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-2);
}

.profile-facts {
  grid-column: 1 / -1;
  margin: 0;
}

.profile-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (min-width: 900px) {
  .profile-facts {
    grid-column: 2;
    grid-row: 2;
  }
}

.showcase {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.showcase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.1rem 0.8rem 0.9rem;
  text-align: center;
  background:
    radial-gradient(70% 50% at 50% 30%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
    var(--paper);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--rule));
  border-radius: var(--radius-lg);
}

.showcase-name {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
}

.showcase-meta {
  font-size: 0.8rem;
  color: var(--text-3);
}

@media (max-width: 560px) {
  .showcase {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-item {
    flex-direction: row;
    text-align: left;
  }

  .showcase-item .medal-xl {
    --size: 3.7rem;
  }
}

.cabinet-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.8rem;
  background: linear-gradient(180deg, var(--lacquer-hi), var(--lacquer-deep));
  border-radius: var(--radius);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.45);
}

.cabinet-preview .muted {
  margin: 0;
  color: rgba(255, 240, 220, 0.7);
}

.preview-medal {
  display: inline-grid;
  padding: 0.25rem;
  border-radius: 50%;
}

.preview-medal:hover {
  box-shadow: 0 0 0 2px var(--brass);
}

.roster-title {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--text-3);
}

.slips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.8rem;
}

.slip {
  position: relative;
  padding: 0.85rem 2.6rem 0.75rem 1rem;
  background:
    repeating-linear-gradient(180deg, transparent 0 1.55rem, color-mix(in srgb, var(--shu) 10%, transparent) 1.55rem calc(1.55rem + 1px)),
    var(--annal-paper);
  color: var(--annal-ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 10px 22px -18px var(--shadow);
}

.slip:nth-child(3n + 1) { transform: rotate(-0.6deg); }
.slip:nth-child(3n + 2) { transform: rotate(0.5deg); }

.slip.is-hidden {
  opacity: 0.6;
}

.slip p {
  margin: 0;
}

.slip-stamp {
  position: absolute;
  top: 0.6rem;
  right: 0.55rem;
  padding: 0.2rem 0.15rem;
  font-family: var(--font-brush);
  font-size: 0.8rem;
  line-height: 1.1;
  writing-mode: vertical-rl;
  color: var(--shu-text);
  border: 1.5px solid currentColor;
  border-radius: 3px;
  transform: rotate(6deg);
  opacity: 0.85;
}

.slip-who {
  font-weight: 600;
  font-size: 0.9rem;
}

.slip-who a {
  color: inherit;
}

.slip-arrow {
  color: var(--shu-text);
}

.slip .slip-reason {
  margin: 0.25rem 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.55rem;
}

.slip-meta {
  font-size: 0.78rem;
  opacity: 0.75;
}

.slip-hide {
  margin-top: 0.4rem;
}

.thank-box {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}

.panel-wall {
  background:
    radial-gradient(100% 50% at 0 0, color-mix(in srgb, var(--shu-tint) 60%, transparent), transparent 60%),
    var(--paper);
}

.spot {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
}

.spot-lamp {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.8rem;
  font-family: var(--font-brush);
  font-size: 1.2rem;
  color: #fff6e0;
  background: radial-gradient(circle at 50% 40%, #ffcf73, #d9542c 75%);
  border-radius: 45% 45% 40% 40%;
  box-shadow: 0 0 18px 2px rgba(240, 150, 70, 0.4);
}

.annal-mini li {
  font-family: var(--font-display);
}

/* ---- mentorship ------------------------------------------------------------------------------------- */

.mentor-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.8rem;
}

.mentor-card {
  position: relative;
  padding: 0.9rem 1rem 0.8rem 3.6rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.mentor-card.is-full {
  opacity: 0.8;
}

.mentor-card p {
  margin: 0;
}

.mentor-seal {
  position: absolute;
  left: 0.9rem;
  top: 0.95rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-brush);
  color: #fff8f0;
  background: var(--patina);
  border-radius: 6px;
  transform: rotate(-5deg);
}

.mentor-name {
  font-weight: 700;
}

.mentor-meta {
  font-size: 0.86rem;
  color: var(--text-2);
}

.mentor-hello {
  font-size: 1.05rem;
}

.panel-lead {
  border-top: 4px solid var(--patina);
}

.steps-mini {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: flex;
  gap: 4px;
}

.steps-mini li {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--chart-track);
}

.steps-mini li.is-done {
  background: var(--patina);
}

.steps-mini li.is-waiting {
  background: repeating-linear-gradient(45deg, var(--lamp) 0 4px, var(--lamp-tint) 4px 8px);
}

.newcomers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.newcomer {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.newcomer:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.newcomer-name {
  margin: 0;
  font-weight: 700;
}

.assign-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.assign-list > li + li {
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.assign-list p {
  margin: 0 0 0.4rem;
}

/* ---- first steps: stepping stones across a garden ---------------------------------------------------- */

.stones {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stone {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 0.6rem 0;
}

.stone + .stone {
  border-top: 1px dashed var(--rule);
}

.stone-mark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.1rem;
  font-weight: 700;
  color: var(--text-2);
  background: var(--paper-2);
  border: 1.5px solid var(--rule-strong);
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
}

.stone.is-done .stone-mark {
  color: #fff8f0;
  background: var(--patina);
  border-color: var(--patina);
}

.stone.is-waiting .stone-mark {
  color: var(--lamp);
  border-color: var(--lamp);
  background: var(--lamp-tint);
}

.stone-text p {
  margin: 0;
}

.stone-label {
  font-weight: 700;
}

.stone.is-done .stone-label {
  color: var(--text-2);
}

.stone-hint {
  font-size: 0.9rem;
  color: var(--text-2);
}

.stone-text .btn {
  margin-top: 0.4rem;
}

.hub-steps {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) auto;
  align-items: center;
  gap: 0.6rem 1.2rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(100deg, var(--patina-tint), var(--paper) 70%);
  border: 1px solid color-mix(in srgb, var(--patina) 40%, var(--rule));
  border-radius: var(--radius-lg);
}

.hub-steps .pbar {
  --pbar-fill: var(--patina);
  margin: 0;
}

.hub-steps-title {
  margin: 0;
  font-size: 1.05rem;
}

.hub-steps-text p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-2);
}

@media (max-width: 640px) {
  .hub-steps {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hub-steps .pbar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ---- events: festival notices and a month calendar ------------------------------------------------- */

.ev-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}

.ev-card {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px -26px var(--shadow);
}

.ev-card.is-lead {
  grid-column: 1 / -1;
  grid-template-columns: 5rem minmax(0, 1fr);
  padding: 1.4rem 1.5rem;
  background:
    radial-gradient(90% 120% at 100% 0, color-mix(in srgb, var(--shu) 14%, transparent), transparent 60%),
    var(--paper);
  border-color: color-mix(in srgb, var(--shu) 35%, var(--rule));
}

.ev-card.is-lead .ev-title {
  font-size: 1.6rem;
}

.ev-card.is-cancelled {
  opacity: 0.65;
}

.ev-date {
  display: grid;
  place-items: center;
  align-self: start;
  aspect-ratio: 3 / 4;
  color: #fff6e8;
  background: radial-gradient(circle at 50% 38%, #f3a35a, var(--shu) 72%);
  border-radius: 45% 45% 38% 38%;
  box-shadow: 0 0 18px 0 color-mix(in srgb, var(--shu) 35%, transparent), inset 0 3px 0 rgba(0, 0, 0, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.ev-kanji {
  font-family: var(--font-brush);
  font-size: 1.5rem;
  line-height: 1;
}

.is-lead .ev-kanji {
  font-size: 2.2rem;
}

.ev-main {
  min-width: 0;
}

.ev-main p,
.ev-next p {
  margin: 0 0 0.2rem;
}

.ev-kind {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shu-text);
}

.ev-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
}

.ev-title a {
  color: var(--text);
  text-decoration: none;
}

.ev-title a:hover {
  text-decoration: underline;
}

.ev-when,
.ev-where,
.ev-who {
  font-size: 0.92rem;
  color: var(--text-2);
}

.rsvp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.ev-past li {
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--rule);
}

.guests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.guest .rank-name {
  display: none;
}

.guest-no {
  opacity: 0.6;
}

.guest.is-attended a {
  font-weight: 700;
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.8rem;
}

.cal-month {
  margin: 0;
  font-size: var(--step-2);
}

.cal-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 4px;
  margin: 0 -4px;
}

.cal-grid th {
  padding: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
}

.cal-day {
  height: 6.2rem;
  padding: 0.35rem 0.4rem;
  vertical-align: top;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.cal-day.is-empty {
  background: transparent;
  border-color: transparent;
}

.cal-day.is-today {
  border-color: var(--shu);
  box-shadow: inset 0 0 0 1px var(--shu);
}

.cal-day.has-events {
  background: linear-gradient(180deg, color-mix(in srgb, var(--shu-tint) 55%, var(--paper)), var(--paper));
}

.cal-num {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-3);
}

.is-today .cal-num {
  color: var(--shu-text);
  font-weight: 700;
}

.cal-ev {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cal-ev:hover {
  text-decoration: underline;
}

.cal-ev.is-cancelled {
  text-decoration: line-through;
  color: var(--text-3);
}

.cal-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--shu);
}

.cal-agenda {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 720px) {
  .cal-grid {
    display: none;
  }

  .cal-agenda {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .cal-agenda li {
    padding: 0.6rem 0.8rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
  }
}

/* ---- bounties: three notices pinned to a wooden board ------------------------------------------------- */

.notice-board {
  margin: 0 0 1.5rem;
  padding: 1.4rem;
  background:
    repeating-linear-gradient(0deg, var(--wood-grain) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--wood-a), var(--wood-b));
  border: 6px solid var(--wood-edge);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 20px 40px -28px var(--shadow);
}

.bounty-notices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.4rem;
}

.bounty {
  --tier: var(--patina);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.1rem 1.1rem;
  color: var(--annal-ink);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.03), transparent 20%),
    var(--annal-paper);
  border-top: 5px solid var(--tier);
  box-shadow: 0 12px 18px -12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bounty-notices > .bounty:nth-child(1) { transform: rotate(-1.2deg); }
.bounty-notices > .bounty:nth-child(2) { transform: rotate(0.8deg); }
.bounty-notices > .bounty:nth-child(3) { transform: rotate(-0.4deg); }

.bounty-medium { --tier: var(--ai); }
.bounty-group { --tier: var(--shu); }

.bounty p {
  margin: 0 0 0.45rem;
}

.bounty-pin {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-left: -0.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f08a6e, var(--shu-deep) 70%);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.45);
}

.bounty-seal {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  font-family: var(--font-brush);
  font-size: 1.2rem;
  color: #fff8f0;
  background: var(--tier, var(--patina));
  border-radius: 6px;
  transform: rotate(-6deg);
}

.bounty-tier {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tier, var(--patina));
}

.bounty-title {
  margin: 0 2.4rem 0.4rem 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
}

.bounty-body,
.bounty-proof {
  font-size: 0.92rem;
}

.bounty-reward {
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  background: color-mix(in srgb, var(--kin) 16%, transparent);
  border-radius: 4px;
}

.bounty-goal {
  margin: 0 0 0.4rem;
}

.bounty-goal-text,
.bounty-done,
.bounty-time {
  font-size: 0.86rem;
  opacity: 0.85;
}

.bounty-act {
  margin-top: auto;
  padding-top: 0.5rem;
}

.bounty.is-past {
  opacity: 0.7;
}

.bounty-week {
  margin: 0 0 1rem;
}

/* The Hub's compact version of the same three. */
.bounty-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bounty-mini-item {
  --tier: var(--patina);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.7rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--tier);
  border-radius: var(--radius);
}

.bounty-mini-item.bounty-medium { --tier: var(--ai); }
.bounty-mini-item.bounty-group { --tier: var(--shu); }

.bounty-mini-item .bounty-seal {
  position: static;
  width: 2rem;
  height: 2rem;
  font-size: 1.05rem;
}

.bounty-mini-main p {
  margin: 0;
}

.bounty-mini-title {
  font-weight: 600;
}

.bounty-mini-act .stamp {
  font-size: 0.85rem;
}

.panel-bounties {
  border-top: 4px solid var(--wood-edge);
}

/* Manage › Bounties */
.bounty-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bounty-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--patina);
  border-radius: var(--radius);
}

.slot-medium { border-left-color: var(--ai); }
.slot-group { border-left-color: var(--shu); }

.bounty-slot.is-empty {
  border-style: dashed;
  border-left-style: solid;
  background: var(--paper-2);
}

.bounty-slot-tier {
  width: 100%;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.bounty-slot-title {
  font-weight: 700;
}

.bounty-slot .inline-details {
  width: 100%;
}

.suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.suggestion {
  padding: 0.75rem 0.9rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.suggestion p {
  margin: 0 0 0.35rem;
}

.suggestion-body {
  color: var(--text-2);
  font-size: 0.92rem;
}

.suggestion-why {
  font-size: 0.86rem;
  color: var(--text-2);
}

/* ---- Hub additions --------------------------------------------------------------------------------- */

.prosper-line {
  display: grid;
  grid-template-columns: auto minmax(6rem, 1fr) auto;
  align-items: center;
  gap: 0.4rem 1rem;
  margin: -0.5rem 0 1.25rem;
  padding: 0.45rem 0.9rem;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(100deg, color-mix(in srgb, var(--kin) 14%, var(--paper)), var(--paper) 70%);
  border: 1px solid color-mix(in srgb, var(--kin) 35%, var(--rule));
  border-radius: 999px;
}

.prosper-line:hover {
  text-decoration: none;
  border-color: var(--kin);
}

.prosper-line .pbar {
  margin: 0;
}

.prosper-level {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
}

.prosper-kanji {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  font-family: var(--font-brush);
  font-size: 0.95rem;
  color: var(--shu-deep);
  background: var(--gold-hi);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--gold);
}

.prosper-next {
  font-size: 0.84rem;
  color: var(--text-2);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .prosper-line {
    grid-template-columns: minmax(0, 1fr) auto;
    border-radius: var(--radius-lg);
  }

  .prosper-line .pbar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.panel-event {
  border-top: 4px solid var(--shu);
}

.ev-next .ev-title {
  font-size: 1.3rem;
}

.ev-count {
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.ev-count .countdown {
  font-weight: 700;
}

.panel-season {
  border-top: 4px solid var(--season, var(--ai));
}

.panel-around .panel-title::before {
  content: "便り ";
  font-family: var(--font-brush);
  font-weight: 400;
  color: var(--shu-text);
}

.around {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.around li {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  font-size: 0.93rem;
}

.around-mark {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  font-family: var(--font-brush);
  font-size: 0.95rem;
  color: var(--shu-text);
  border: 1.5px solid currentColor;
  border-radius: 4px;
  transform: rotate(-4deg);
}

.around-spot .around-mark {
  color: #fff6e0;
  background: var(--kin);
  border-color: var(--kin);
}

.around .annal-name {
  font-weight: 600;
}

/* ---- the Chronicle: an annal on washi, ruled in vermilion --------------------------------------------- */

.annal {
  max-width: 54rem;
  margin: 0 auto;
  color: var(--annal-ink);
  background:
    linear-gradient(90deg, transparent 0 7.6rem, var(--annal-rule) 7.6rem calc(7.6rem + 1px), transparent calc(7.6rem + 1px) calc(7.6rem + 4px), var(--annal-rule) calc(7.6rem + 4px) calc(7.6rem + 5px), transparent calc(7.6rem + 5px)),
    var(--annal-paper);
  border: 1px solid color-mix(in srgb, var(--shu) 22%, var(--rule));
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 26px 50px -34px var(--shadow), inset 0 0 60px rgba(150, 110, 40, 0.07);
}

.annal-cover {
  padding: 2.2rem 1.5rem 1.6rem;
  text-align: center;
  border-bottom: 3px double var(--annal-rule);
  background: var(--annal-paper);
  border-radius: 4px 4px 0 0;
}

.annal-seal .icon {
  width: 3.4rem;
  height: 3.4rem;
}

.annal-title {
  margin: 0.4rem 0 0.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.annal-title-ja {
  margin: 0;
  font-family: var(--font-brush);
  font-size: 1.15rem;
  letter-spacing: 0.4em;
  color: var(--shu-text);
}

.annal-kept {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-2);
}

.annal-contents {
  padding: 1.1rem 1.5rem 1.1rem 8.6rem;
  border-bottom: 1px solid var(--annal-rule);
  background: var(--annal-paper);
}

.annal-contents-title {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shu-text);
}

.annal-contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2 16rem;
  column-gap: 2rem;
}

.annal-contents li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.18rem 0;
  break-inside: avoid;
  font-family: var(--font-display);
}

.annal-contents li a {
  color: inherit;
  text-decoration: none;
}

.annal-contents li a:hover {
  text-decoration: underline;
}

.annal-contents li.is-current a {
  font-weight: 700;
  color: var(--shu-text);
}

.annal-no {
  display: inline-block;
  min-width: 2.4rem;
  font-variant: small-caps;
  color: var(--shu-text);
}

.annal-count {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-3);
  white-space: nowrap;
}

.annal-jump {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
}

.annal-chapter {
  padding: 1.5rem 1.5rem 1.2rem 0;
}

.annal-chapter-head {
  padding-left: 8.6rem;
  margin-bottom: 1.2rem;
}

.annal-chapter-no {
  margin: 0;
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--shu-text);
}

.annal-chapter-title {
  margin: 0.1rem 0 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
}

.annal-chapter-theme {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-2);
}

.annal-rule {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.annal-rule::before,
.annal-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--annal-rule);
}

.annal-rule span {
  width: 8px;
  height: 8px;
  background: var(--shu);
  transform: rotate(45deg);
}

.annal-entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.annal-entry {
  position: relative;
  display: grid;
  grid-template-columns: 7.6rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 2.6rem 0.75rem 0;
}

.annal-entry + .annal-entry {
  border-top: 1px dotted var(--annal-rule);
}

.annal-date {
  padding: 0.2rem 0.8rem 0 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-align: right;
  color: var(--shu-text);
}

.annal-body p {
  margin: 0;
}

.annal-text {
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.7;
}

/* An illuminated initial opens each chapter. */
.annal-entry.is-first .annal-text::first-letter {
  float: left;
  margin: 0.15rem 0.5rem 0 0;
  padding: 0.1rem 0.35rem;
  font-size: 2.9rem;
  line-height: 0.9;
  font-weight: 700;
  color: #fff8f0;
  background: var(--shu);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 3.5px var(--gold-hi);
}

.annal-entry.is-notable .annal-text {
  font-weight: 600;
}

.annal-entry.is-hidden {
  opacity: 0.55;
}

.annal-name {
  color: var(--ai-text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ai-text) 35%, transparent);
}

.annal-name:hover {
  border-bottom-color: currentColor;
  text-decoration: none;
}

.annal-body .annal-link,
.annal-body .annal-note {
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--text-3);
}

.annal-mark {
  position: absolute;
  right: 0.4rem;
  top: 0.8rem;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  font-family: var(--font-brush);
  font-size: 1rem;
  color: var(--shu-text);
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transform: rotate(-8deg);
}

.annal-empty {
  margin: 0 0 1rem 8.6rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-2);
}

.annal-pager {
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  border-top: 1px solid var(--annal-rule);
}

@media (max-width: 720px) {
  .annal {
    background: var(--annal-paper);
  }

  .annal-contents,
  .annal-chapter-head {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .annal-chapter {
    padding: 1.2rem 0;
  }

  .annal-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
    padding: 0.7rem 2.6rem 0.7rem 1.1rem;
  }

  .annal-date {
    padding: 0;
    text-align: left;
  }

  .annal-empty {
    margin-left: 1.1rem;
  }
}

/* ---- landmarks -------------------------------------------------------------------------------------- */

.lm-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-2);
  border: 1.5px dashed currentColor;
  border-radius: 3px;
  white-space: nowrap;
  transform: rotate(-2deg);
}

.lm-stamp [lang="ja"] {
  font-family: var(--font-brush);
  font-weight: 400;
  font-size: 0.95rem;
}

.lm-building { color: var(--ai-text); border-style: solid; }
.lm-finished { color: var(--shu-text); border-style: solid; }

.lm-stamp.lm-building,
.lm-stamp.lm-finished {
  border-style: solid;
}

.lm-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}

.lm-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--rule-strong);
  border-radius: var(--radius-lg);
}

.lm-card.lm-building { border-top-color: var(--ai); }
.lm-card.lm-finished { border-top-color: var(--shu); }

.lm-card p {
  margin: 0;
}

.lm-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.lm-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.lm-name a {
  color: var(--text);
  text-decoration: none;
}

.lm-name a:hover {
  text-decoration: underline;
}

.lm-desc {
  color: var(--text-2);
  font-size: 0.92rem;
}

.lm-coords,
.lm-builders {
  font-size: 0.88rem;
}

.lm-goals {
  list-style: none;
  margin: 0.3rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
}

.lm-goal-name {
  font-weight: 600;
}

.lm-goal-edit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.lm-goal-edit > li {
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed var(--rule);
}

.goal-row .field {
  flex: 1 1 6rem;
}

/* ---- seasons: the road, milestones, Prosperity, the recap ----------------------------------------------- */

.season-panel {
  margin-bottom: 0;
  border-top: 5px solid var(--season, var(--ai));
  background:
    radial-gradient(90% 100% at 100% 0, color-mix(in srgb, var(--season, var(--ai)) 14%, transparent), transparent 60%),
    var(--paper);
}

.season-days {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--season, var(--ai-text));
}

.season-theme {
  margin: -0.4rem 0 0.8rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-2);
}

.season-points {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.season-points .num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--season, var(--text));
}

.sroad {
  margin: 0.6rem 0 0.8rem;
}

.sroad .pbar {
  height: 8px;
  margin: 0 0 0.8rem;
}

.sroad-stones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
}

.sstone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.sstone-seal {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  font-weight: 700;
  color: var(--text-3);
  background: var(--paper);
  border: 2px dashed var(--rule-strong);
  border-radius: 50%;
}

.sstone.is-reached .sstone-seal {
  color: #fffaf1;
  background: var(--season, var(--ai));
  border: 2px solid var(--season, var(--ai));
}

.sstone.is-next .sstone-seal {
  color: var(--season, var(--ai));
  border: 2px solid var(--season, var(--ai));
}

.sstone:nth-child(5).is-reached .sstone-seal {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px #c9ced6;
}

.sstone:nth-child(6).is-reached .sstone-seal {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold);
}

.sstone-need {
  font-size: 0.74rem;
  color: var(--text-3);
  white-space: nowrap;
}

.sstone-reward {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}

.sroad-compact .sstone-seal {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.82rem;
}

@media (max-width: 560px) {
  .sroad:not(.sroad-compact) .sroad-stones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0.8rem;
  }
}

.milestones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.milestones li {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
}

.ms-n {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text-2);
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
}

.milestones .is-reached .ms-n {
  color: #fffaf1;
  background: var(--season, var(--patina));
  border-color: var(--season, var(--patina));
}

.season-badges {
  display: inline-flex;
  gap: 0.25rem;
  vertical-align: middle;
}

.season-badge {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-family: var(--font-brush);
  font-size: 0.8rem;
  color: #fffaf1;
  background: var(--season, var(--ai));
  border-radius: 4px;
  transform: rotate(-4deg);
}

.prosper-panel {
  margin-bottom: 1.25rem;
  border-top: 5px solid var(--kin);
}

.prosper-panel .panel-title .prosper-kanji {
  vertical-align: 0.15em;
}

.prosper-now {
  font-size: 1.05rem;
}

.prosper-panel .pbar {
  height: 12px;
}

.prosper-levels {
  list-style: none;
  margin: 1rem 0 0.8rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.prosper-levels li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.3rem;
  text-align: center;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.prosper-levels .is-reached {
  background: color-mix(in srgb, var(--kin) 16%, var(--paper));
  border-color: color-mix(in srgb, var(--kin) 50%, var(--rule));
}

.prosper-levels .is-next {
  border: 2px dashed var(--kin);
}

.pl-n {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--kin);
}

.pl-name {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.25;
}

.pl-need {
  font-size: 0.74rem;
  color: var(--text-3);
}

@media (max-width: 640px) {
  .prosper-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.banzuke-gap {
  margin: 0.2rem 0;
  text-align: center;
  color: var(--text-3);
  letter-spacing: 0.3em;
}

.banzuke-near {
  padding: 0.2rem 0.4rem;
  background: var(--paper-2);
  border-radius: var(--radius);
}

.banzuke li.is-me {
  font-weight: 700;
  background: color-mix(in srgb, var(--ai-tint) 70%, transparent);
  border-radius: var(--radius);
}

.banzuke-foot {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
}

.boards .panel {
  height: 100%;
}

/* The recap: seven cards, read one after the other. */
.recap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
}

.recap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 15rem;
  padding: 1.4rem 1.4rem;
  background:
    radial-gradient(90% 80% at 100% 0, color-mix(in srgb, var(--season, var(--ai)) 16%, transparent), transparent 65%),
    var(--paper);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--season, var(--ai));
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.recap-card p {
  margin: 0 0 0.35rem;
}

.recap-1,
.recap-share {
  color: #fffaf1;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 6px),
    linear-gradient(160deg, color-mix(in srgb, var(--season, var(--ai)) 75%, #000), var(--season, var(--ai)));
  border-color: transparent;
}

.recap-1 .muted,
.recap-share .muted {
  color: rgba(255, 250, 241, 0.75);
}

.recap-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.recap-big {
  margin: 0.1rem 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.recap-head {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--season, var(--ai-text));
}

.recap-line {
  font-size: 1.02rem;
}

.recap-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.recap-numbers .num {
  display: inline-block;
  min-width: 2.6rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.recap-stamp {
  position: absolute;
  right: 1rem;
  top: 1rem;
  padding: 0.3rem 0.25rem;
  font-family: var(--font-brush);
  font-size: 1.1rem;
  line-height: 1.1;
  writing-mode: vertical-rl;
  color: #fffaf1;
  border: 2px solid rgba(255, 250, 241, 0.85);
  border-radius: 4px;
  transform: rotate(5deg);
}

.recap-share {
  grid-column: 1 / -1;
  min-height: 12rem;
}

/* ---- review queue, sign-ups ----------------------------------------------------------------------------- */

.recognition li {
  display: block;
}

.signup-approve {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

.signup-approve .field {
  margin: 0;
  min-width: 14rem;
}

/* ---- small finishing touches ------------------------------------------------------------------------- */

.cer-link {
  white-space: nowrap;
}

.cer-summary .cer-list {
  width: 100%;
  max-height: 40vh;
  overflow-y: auto;
}

.toast-emblem {
  --ach-size: 2.6rem;
}

.suggestion-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.almost-item + .almost-item {
  border-top: 1px dashed var(--rule);
}

.ach-main,
.ms-text {
  min-width: 0;
}

.lm-stamp-en {
  letter-spacing: 0.02em;
}

/* While a celebration plays over the page, the page itself stays still. */
html.cer-open,
html.cer-open body {
  overflow: hidden;
}

.around-text {
  min-width: 0;
}

/* In the Hub's narrow figures, the nation's time is enough. */
.strip-value .ev-time[data-your-time]::after {
  content: none;
}

.ach-list {
  margin-bottom: 1rem;
}

/* Room above the eyebrow for the Skip all button. */
.cer-stage.is-enhanced .cer-card {
  padding-top: 2.9rem;
}

.strip-value .ev-time {
  font-size: 0.78em;
  white-space: normal;
}

/* ==== wayfinding: sections, the section band, noren tabs, the map of the nation ============================ */

/* Each section of the nation has its own colour; every part of a section reads --sec. */
.sec-hub, .in-hub { --sec: var(--sec-hub); }
.sec-me, .in-me { --sec: var(--sec-me); }
.sec-tutorial, .in-tutorial { --sec: var(--sec-tutorial); }
.sec-quests, .in-quests { --sec: var(--sec-quests); }
.sec-events, .in-events { --sec: var(--sec-events); }
.sec-lands, .in-lands { --sec: var(--sec-lands); }
.sec-ministries, .in-ministries { --sec: var(--sec-ministries); }
.sec-season, .in-season { --sec: var(--sec-season); }
.sec-history, .in-history { --sec: var(--sec-history); }
.sec-community, .in-community { --sec: var(--sec-community); }
.sec-apply, .in-apply { --sec: var(--sec-apply); }

/* The page's own seal takes the colour of its section. */
main[class*=" in-"] .page-head .page-kanji {
  color: var(--on-sec);
  background-color: var(--sec);
  box-shadow: inset 0 0 0 1.5px var(--sec), inset 0 0 0 2.5px rgba(255, 246, 238, 0.65), 0 2px 5px -1px rgba(0, 0, 0, 0.25);
}

/* -- the band: where you are, and the section's pages ---------------------------------------------- */

.secband {
  margin: -0.4rem 0 1.6rem;
}

.secband-id {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.55rem 0.2rem;
  color: var(--text);
  text-decoration: none;
}

.secband-id:hover {
  text-decoration: none;
}

.secband-id:hover .secband-name {
  text-decoration: underline;
}

.secband-seal {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 0.3rem;
  font-family: var(--font-brush);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--on-sec);
  background: var(--sec);
  border-radius: 6px;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 1.5px var(--sec), inset 0 0 0 2.5px rgba(255, 250, 241, 0.6), 0 3px 8px -4px var(--shadow);
}

.secband-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.secband-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sec);
}

.secband-line {
  font-size: 0.86rem;
  color: var(--text-2);
}

/* Noren: the section's pages hang from a wooden rod like shop curtains. The current one is dyed in the
   section's colour and hangs a little lower. Filters elsewhere stay round pills, so the two never mix. */
.noren ul {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  padding: 0 0.9rem;
  list-style: none;
  border-top: 5px solid var(--rod);
  border-radius: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.noren ul::-webkit-scrollbar {
  display: none;
}

.noren ul::before,
.noren ul::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--wood-a), var(--rod) 70%);
}

.noren ul::before { left: -2px; }
.noren ul::after { right: -2px; }

.noren li {
  flex: none;
}

.noren-tab {
  position: relative;
  display: block;
  padding: 0.6rem 1.15rem 0.75rem;
  font-weight: 600;
  font-size: 0.93rem;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sec) 10%, var(--paper)), color-mix(in srgb, var(--sec) 16%, var(--paper)));
  border: 1px solid color-mix(in srgb, var(--sec) 28%, var(--rule));
  border-top: 0;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 6px 10px -10px var(--shadow);
  transform-origin: 50% 0;
  transition: background-color 0.15s ease, padding 0.15s ease;
}

.noren-tab:hover {
  text-decoration: none;
  border-color: var(--sec);
}

.noren-tab.is-current {
  padding-bottom: 1.05rem;
  color: var(--on-sec);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sec) 88%, #000), var(--sec));
  border-color: var(--sec);
  box-shadow: 0 10px 16px -12px var(--shadow);
}

.noren-tab .count-badge {
  margin-left: 0.2rem;
}

@media (prefers-reduced-motion: no-preference) {
  .noren-tab:hover:not(.is-current) {
    animation: noren-sway 0.9s ease-in-out;
  }
}

@keyframes noren-sway {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(1.6deg); }
  65% { transform: rotate(-1deg); }
}

@media (max-width: 720px) {
  .secband {
    margin-top: -0.6rem;
  }

  .secband-line {
    display: none;
  }

  .noren ul {
    padding: 0 0.4rem;
    gap: 0.3rem;
  }

  .noren-tab {
    padding: 0.55rem 0.85rem 0.7rem;
    font-size: 0.88rem;
  }

  .noren-tab.is-current {
    padding-bottom: 0.9rem;
  }
}

/* -- the Hub: three cards for today ---------------------------------------------------------------------- */

.today-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
}

@media (max-width: 960px) {
  .today-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.today {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem 1.15rem 1.05rem;
  background:
    radial-gradient(90% 70% at 100% 0, color-mix(in srgb, var(--sec) 12%, transparent), transparent 70%),
    var(--paper);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--sec);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px -26px var(--shadow);
}

.today p {
  margin: 0;
}

.today-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sec);
}

.today-seal {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-family: var(--font-brush);
  font-size: 0.85rem;
  letter-spacing: 0;
  color: var(--on-sec);
  background: var(--sec);
  border-radius: 4px;
  transform: rotate(-4deg);
}

.today-title {
  margin: 0.35rem 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
}

.today-title a {
  color: var(--text);
  text-decoration: none;
}

.today-title a:hover {
  text-decoration: underline;
}

.today-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.today-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.93rem;
}

.today-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--patina);
}

.tier-medium .today-dot { background: var(--ai); }
.tier-group .today-dot { background: var(--shu); }

.today-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-sp {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sec);
}

.today-tag {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
}

.today .today-foot,
.today .today-meta {
  margin-top: auto;
  font-size: 0.86rem;
  color: var(--text-2);
}

.today .today-count {
  margin-bottom: 0.2rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
}

.today-count .countdown {
  color: var(--sec);
}

.today-unit {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--text-2);
}

.today-empty {
  color: var(--text-2);
  font-size: 0.92rem;
}

.today .rsvp {
  margin-top: 0.6rem;
}

.today .sroad {
  margin: 0.3rem 0 0;
}

.today.season-indigo,
.today.season-sakura,
.today.season-pine,
.today.season-maple,
.today.season-snow,
.today.season-gold {
  --sec: var(--season);
}

/* -- the Menu: a map of the nation ---------------------------------------------------------------------- */

.nation-map {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.9rem;
}

.map-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.95rem 1rem 1rem;
  background:
    radial-gradient(100% 80% at 0 0, color-mix(in srgb, var(--sec) 10%, transparent), transparent 70%),
    var(--paper);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--sec);
  border-radius: var(--radius-lg);
}

.map-head,
.map-manage {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
  text-decoration: none;
}

.map-head:hover,
.map-manage:hover {
  text-decoration: none;
}

.map-head:hover .map-name,
.map-manage:hover .map-name {
  text-decoration: underline;
}

.map-seal {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 2.8rem;
  height: 2.8rem;
  padding: 0 0.35rem;
  font-family: var(--font-brush);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--on-sec);
  background: var(--sec, var(--ai));
  border-radius: 8px;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 1.5px var(--sec, var(--ai)), inset 0 0 0 3px rgba(255, 250, 241, 0.55);
}

.map-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.map-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.map-line {
  font-size: 0.88rem;
  color: var(--text-2);
}

.map-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.map-pages a {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--sec, var(--ai)) 12%, var(--paper));
  border-radius: 4px;
}

.map-pages a:hover {
  background: color-mix(in srgb, var(--sec, var(--ai)) 22%, var(--paper));
}

.map-pages-plain {
  margin: 0.6rem 0 0.8rem;
}

.map-manage {
  --sec: var(--rust);
  margin: 0 0 1rem;
  padding: 0.95rem 1rem;
  background: linear-gradient(100deg, color-mix(in srgb, var(--alert) 18%, var(--paper)), var(--paper) 70%);
  border: 1px solid color-mix(in srgb, var(--alert) 45%, var(--rule));
  border-radius: var(--radius-lg);
}

/* -- small pieces of the new pages ------------------------------------------------------------------------ */

.kpi-link {
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.kpi-link:hover {
  text-decoration: none;
  border-color: var(--rule-strong);
  transform: translateY(-1px);
}

.profile-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.5rem 2rem;
}

.profile-settings .sub-title {
  margin-top: 0;
}

@media (max-width: 720px) {
  .profile-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-settings .sub-title {
    margin-top: 1rem;
  }
}

.people-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 0.6rem;
}

.person-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.person-seal {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-brush);
  color: var(--on-sec);
  background: var(--sec-community);
  border-radius: 6px;
  transform: rotate(-5deg);
}

.person-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: 600;
}

.person-text .muted {
  font-weight: 400;
  font-size: 0.82rem;
}

.panel-new {
  border-top: 4px solid var(--sec-community);
}

.panel-spot {
  background: linear-gradient(100deg, color-mix(in srgb, var(--kin) 14%, var(--paper)), var(--paper) 70%);
}

.season-past li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
}

.deco-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.deco-list li:not(.is-reached) {
  opacity: 0.7;
}

.deco-chip {
  flex: none;
  width: 2.6rem;
  height: 1.4rem;
  border-radius: 4px;
  background-color: var(--hdr-bottom);
  background-size: 26px 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.deco-chip-sakura { background-image: radial-gradient(3px 2px at 30% 40%, #f6c1d1 60%, transparent 62%), radial-gradient(2px 3px at 75% 70%, #f3b3c6 60%, transparent 62%); }
.deco-chip-fireflies { background-image: radial-gradient(2px 2px at 30% 40%, #fff2a8 50%, transparent 70%), radial-gradient(2px 2px at 70% 65%, #f6e27a 50%, transparent 70%); }
.deco-chip-maple { background-image: radial-gradient(3px 3px at 30% 40%, #d9542c 60%, transparent 62%), radial-gradient(3px 2px at 72% 70%, #e7863a 60%, transparent 62%); }
.deco-chip-snow { background-image: radial-gradient(2px 2px at 30% 40%, #fff 60%, transparent 62%), radial-gradient(2px 2px at 70% 70%, #eef4fb 60%, transparent 62%); }

.stack > .road-panel,
.stack > .season-panel,
.stack > .prosper-panel {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .cer-stage.is-enhanced .cer-card {
    padding-top: 3.6rem;
  }
}
.people-cards + .hint { margin-top: 0.7rem; }

/* ==== 3.2: the town, districts, civic works, premade seasons, the bounty library ======================== */

/* ---- district colours ---------------------------------------------------------------------------- */

.dist-build { --d: var(--d-build); }
.dist-craft { --d: var(--d-craft); }
.dist-explore { --d: var(--d-explore); }
.dist-community { --d: var(--d-community); }
.dist-honour { --d: var(--d-honour); }
.dist-all { --d: var(--kin); }

.dist-fill-build { fill: var(--d-build); background: var(--d-build); }
.dist-fill-craft { fill: var(--d-craft); background: var(--d-craft); }
.dist-fill-explore { fill: var(--d-explore); background: var(--d-explore); }
.dist-fill-community { fill: var(--d-community); background: var(--d-community); }
.dist-fill-honour { fill: var(--d-honour); background: var(--d-honour); }

.pbar-dist-build { --pbar-fill: var(--d-build); }
.pbar-dist-craft { --pbar-fill: var(--d-craft); }
.pbar-dist-explore { --pbar-fill: var(--d-explore); }
.pbar-dist-community { --pbar-fill: var(--d-community); }
.pbar-dist-honour { --pbar-fill: var(--d-honour); }

.pbar-sm {
  height: 7px;
}

/* A district's seal: its kanji, stamped in the district's colour. */
.dist-seal {
  --d: var(--kin);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-brush);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--d);
  background: color-mix(in srgb, var(--d) 13%, var(--paper));
  border: 1.5px solid var(--d);
  border-radius: 6px;
}

.dist-seal.dist-build { --d: var(--d-build); }
.dist-seal.dist-craft { --d: var(--d-craft); }
.dist-seal.dist-explore { --d: var(--d-explore); }
.dist-seal.dist-community { --d: var(--d-community); }
.dist-seal.dist-honour { --d: var(--d-honour); }

.dist-seal-sm {
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.8rem;
  border-radius: 4px;
  vertical-align: -0.35em;
}

.dist-seal-lg {
  width: 3rem;
  height: 3rem;
  font-size: 1.65rem;
  border-width: 2px;
  border-radius: 9px;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--d) 45%, transparent);
  transform: rotate(-3deg);
}

/* ---- the town picture ---------------------------------------------------------------------------- */

.prosper-lv {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--kin);
  white-space: nowrap;
}

.prosper-lv .muted {
  font-size: var(--step-0);
}

.town-frame {
  position: relative;
  margin: 0.25rem 0 1rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--tw-sky-top), var(--tw-sky-bottom) 72%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--paper) 55%, transparent);
}

.town-svg {
  display: block;
  width: 100%;
  height: auto;
}

.town-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.82rem;
  color: var(--text-2);
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
}

.town-key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.tw-sun { fill: var(--tw-sun); opacity: 0.9; }
.tw-cloud { fill: var(--tw-cloud); opacity: 0.75; }
.tw-hill-far { fill: var(--tw-hill-far); }
.tw-hill { fill: var(--tw-hill); }
.tw-ground { fill: var(--tw-ground); }
.tw-ground-dark { fill: color-mix(in srgb, var(--tw-ground) 70%, var(--tw-ink)); }
.tw-road { fill: var(--tw-road); }
.tw-water { fill: var(--tw-water); }
.tw-wave { fill: none; stroke: var(--tw-wave); stroke-width: 2; stroke-linecap: round; opacity: 0.8; }
.tw-isle { fill: color-mix(in srgb, var(--tw-hill) 80%, var(--tw-water)); }
.tw-wall { fill: var(--tw-wall); stroke: color-mix(in srgb, var(--tw-wall) 60%, var(--tw-ink)); stroke-width: 0.8; }
.tw-wall-stone { stroke: color-mix(in srgb, var(--tw-stone) 60%, var(--tw-ink)); stroke-width: 1; }
.tw-roof { fill: var(--tw-roof); }
.tw-beam { fill: var(--tw-beam); }
.tw-window { fill: var(--tw-window); }
.tw-wood { fill: var(--tw-wood); }
.tw-wood-line { fill: none; stroke: var(--tw-wood); stroke-width: 2.5; }
.tw-stone { fill: var(--tw-stone); }
.tw-glow { fill: var(--tw-glow); }
.tw-shu { fill: var(--shu); }
.tw-accent { fill: var(--d-community); }
.tw-gold { fill: var(--gold); }
.tw-ink { fill: var(--tw-ink); }
.tw-cloth { fill: var(--tw-cloth); }
.tw-cloth-slit { fill: var(--tw-wall); }
.tw-smoke { fill: var(--tw-smoke); }
.tw-boat { fill: var(--tw-boat); }
.tw-sail { fill: var(--tw-sail); }
.tw-rope { fill: none; stroke: var(--tw-wood); stroke-width: 1.5; }
.tw-bridge { fill: var(--shu); }
.tw-honour .tw-accent { fill: var(--d-honour); }
.tw-torii,
.tw-lantern-stone { shape-rendering: geometricPrecision; }

@media (prefers-reduced-motion: no-preference) {
  .tw-smoke {
    animation: tw-smoke 7s ease-in-out infinite alternate;
  }

  .tw-beacon,
  .tw-paper-lantern {
    animation: tw-flicker 3.4s ease-in-out infinite alternate;
  }

  .tw-wave {
    animation: tw-wave 6s ease-in-out infinite alternate;
  }
}

@keyframes tw-smoke {
  from { transform: translate(0, 0); opacity: 0.6; }
  to { transform: translate(6px, -8px); opacity: 1; }
}

@keyframes tw-flicker {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

@keyframes tw-wave {
  from { transform: translateX(0); }
  to { transform: translateX(-12px); }
}

/* ---- this week in the town ----------------------------------------------------------------------- */

.week-report {
  border-top: 5px solid var(--kin);
}

.wr-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.wr-strip > li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.8rem 0.95rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.wr-big {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.1;
}

.wr-seal {
  line-height: 1;
}

.wr-of {
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--text-3);
}

.wr-label {
  font-size: 0.9rem;
  font-weight: 600;
}

.wr-diff {
  font-size: 0.8rem;
  color: var(--text-3);
}

.wr-diff.is-up {
  font-weight: 600;
  color: var(--patina);
}

.wr-mine .pbar {
  margin-top: auto;
}

@media (max-width: 760px) {
  .wr-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- the five districts -------------------------------------------------------------------------- */

.district-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.85rem;
}

.district-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.95rem 1rem 0.9rem;
  background: linear-gradient(165deg, color-mix(in srgb, var(--d) 11%, var(--paper)), var(--paper) 62%);
  border: 1px solid color-mix(in srgb, var(--d) 28%, var(--rule));
  border-top: 4px solid var(--d);
  border-radius: var(--radius-lg);
}

.district-card p {
  margin: 0;
}

.district-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.district-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
}

.district-stage {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--d);
}

.district-stage .muted {
  font-weight: 400;
}

.stage-dots {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0.25rem 0 0;
  padding: 0;
}

.stage-dots li {
  flex: 1;
  height: 5px;
  background: var(--chart-track);
  border-radius: 3px;
}

.stage-dots li.is-on {
  background: var(--d);
}

.district-card .pbar {
  margin: 0.1rem 0;
}

.district-next {
  font-size: 0.88rem;
}

.district-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  font-size: 0.84rem;
  color: var(--text-2);
}

.district-what {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-3);
  border-top: 1px dashed var(--rule);
}

/* ---- civic works --------------------------------------------------------------------------------- */

.works-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.85rem;
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--d);
  border-radius: var(--radius);
}

.work-card p {
  margin: 0;
}

.work-card.is-done {
  background: color-mix(in srgb, var(--kin) 9%, var(--paper));
}

.work-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
}

.work-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.25;
}

.work-stamp {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  font-family: var(--font-brush);
  font-size: 1.2rem;
  color: var(--shu-text);
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: rotate(-10deg);
  opacity: 0.9;
}

.work-where {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-2);
}

.work-desc {
  font-size: 0.9rem;
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  font-size: 0.82rem;
  color: var(--text-3);
}

.work-reward {
  font-size: 0.84rem;
}

.sub-title {
  margin: 1.3rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
}

/* ---- twelve weeks -------------------------------------------------------------------------------- */

.wchart {
  margin: 0.25rem 0 0.4rem;
}

.wchart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.wchart-grid {
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.wchart-axis {
  fill: var(--text-3);
  font-family: var(--font-sans);
  font-size: 11px;
}

.wchart-axis.is-now {
  font-weight: 700;
  fill: var(--text);
}

.wchart-now {
  fill: none;
  stroke: var(--kin);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.wchart-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 0.84rem;
}

.wchart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.wchart-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
}

.wchart-table summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--ai-text);
}

.wchart-table .table-wrap {
  margin-top: 0.5rem;
}

/* ---- the ten levels: annals with what each brings -------------------------------------------------- */

.annals {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.annals::before {
  content: "";
  position: absolute;
  left: calc(1rem - 1px);
  top: 0.8rem;
  bottom: 0.8rem;
  width: 2px;
  background: var(--rule);
}

.annals > li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.45rem 0;
}

.an-n {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-3);
  background: var(--paper-2);
  border: 2px solid var(--rule-strong);
  border-radius: 50%;
}

.annals .is-reached .an-n {
  color: var(--paper);
  background: var(--kin);
  border-color: var(--kin);
}

.annals .is-next .an-n {
  color: var(--kin);
  border-style: dashed;
  border-color: var(--kin);
}

.an-body p {
  margin: 0;
}

.annals li:not(.is-reached):not(.is-next) .an-name {
  color: var(--text-2);
}

.an-when {
  font-size: 0.84rem;
  color: var(--text-2);
}

.an-you {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--patina);
}

.an-body .an-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.perk {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.05rem 0.55rem;
  font-size: 0.76rem;
  color: var(--text-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.perk .deco-chip {
  width: 1.1rem;
  height: 0.7rem;
  background-size: 14px 8px;
}

.perk-ach {
  border-color: color-mix(in srgb, var(--kin) 55%, var(--rule));
}

.your-part .num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--kin);
}

.grow-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

/* ---- season motifs: drawn softly behind a season's panel, its Hub card and its premade card --------- */

.motif-petals {
  --motif:
    radial-gradient(5px 3px at 12% 18%, #f2a9bf 60%, transparent 64%),
    radial-gradient(3px 5px at 34% 64%, #eea0b8 60%, transparent 64%),
    radial-gradient(5px 3px at 58% 30%, #f6bfd0 60%, transparent 64%),
    radial-gradient(4px 4px at 76% 72%, #ec98b1 60%, transparent 64%),
    radial-gradient(5px 3px at 90% 22%, #f2a9bf 60%, transparent 64%);
  --motif-size: 260px 170px;
  --motif-move: -260px 340px;
}

.motif-rain {
  --motif: repeating-linear-gradient(105deg, transparent 0 22px, color-mix(in srgb, var(--s-indigo) 30%, transparent) 22px 23px, transparent 23px 46px);
  --motif-size: 120px 120px;
  --motif-move: -60px 240px;
}

.motif-fireflies {
  --motif:
    radial-gradient(3px 3px at 14% 30%, #f6e27a 50%, rgba(246, 226, 122, 0.3) 75%, transparent 78%),
    radial-gradient(2px 2px at 40% 72%, #fff2a8 50%, rgba(246, 226, 122, 0.3) 75%, transparent 78%),
    radial-gradient(3px 3px at 66% 24%, #f6e27a 50%, rgba(246, 226, 122, 0.3) 75%, transparent 78%),
    radial-gradient(2px 2px at 86% 64%, #fff2a8 50%, rgba(246, 226, 122, 0.3) 75%, transparent 78%);
  --motif-size: 240px 150px;
  --motif-move: 0 0;
}

.motif-moon {
  --motif: radial-gradient(circle at 88% 18%, color-mix(in srgb, #f1d77a 60%, transparent) 0 34px, color-mix(in srgb, #f1d77a 18%, transparent) 36px 58px, transparent 60px);
  --motif-size: 100% 100%;
  --motif-move: 0 0;
}

.motif-leaves {
  --motif:
    radial-gradient(6px 4px at 14% 22%, #d9542c 60%, transparent 64%),
    radial-gradient(4px 6px at 38% 68%, #e7863a 60%, transparent 64%),
    radial-gradient(6px 4px at 62% 30%, #c43d22 60%, transparent 64%),
    radial-gradient(5px 5px at 84% 70%, #e7a23a 60%, transparent 64%);
  --motif-size: 300px 190px;
  --motif-move: -300px 380px;
}

.motif-snow {
  --motif:
    radial-gradient(3px 3px at 10% 20%, color-mix(in srgb, var(--s-snow) 35%, #ffffff) 60%, transparent 64%),
    radial-gradient(2px 2px at 30% 60%, color-mix(in srgb, var(--s-snow) 35%, #ffffff) 60%, transparent 64%),
    radial-gradient(3px 3px at 52% 34%, color-mix(in srgb, var(--s-snow) 35%, #ffffff) 60%, transparent 64%),
    radial-gradient(2px 2px at 72% 76%, color-mix(in srgb, var(--s-snow) 35%, #ffffff) 60%, transparent 64%),
    radial-gradient(3px 3px at 90% 42%, color-mix(in srgb, var(--s-snow) 35%, #ffffff) 60%, transparent 64%);
  --motif-size: 200px 130px;
  --motif-move: -100px 260px;
}

.motif-waves {
  --motif:
    radial-gradient(circle at 50% 100%, transparent 0 9px, color-mix(in srgb, var(--season, var(--ai)) 22%, transparent) 9px 10.5px, transparent 10.5px 15px, color-mix(in srgb, var(--season, var(--ai)) 22%, transparent) 15px 16.5px, transparent 16.5px 21px, color-mix(in srgb, var(--season, var(--ai)) 22%, transparent) 21px 22.5px, transparent 22.5px);
  --motif-size: 48px 24px;
  --motif-move: 48px 0;
}

.motif-lanterns {
  --motif:
    radial-gradient(7px 9px at 16% 22%, #e2553a 55%, rgba(232, 162, 58, 0.35) 75%, transparent 80%),
    radial-gradient(7px 9px at 50% 30%, #e8a23a 55%, rgba(232, 162, 58, 0.35) 75%, transparent 80%),
    radial-gradient(7px 9px at 84% 20%, #e2553a 55%, rgba(232, 162, 58, 0.35) 75%, transparent 80%);
  --motif-size: 210px 150px;
  --motif-move: 0 0;
}

.motif-clouds {
  --motif:
    radial-gradient(40px 12px at 20% 26%, color-mix(in srgb, #e3bf56 55%, transparent) 60%, transparent 64%),
    radial-gradient(26px 10px at 30% 22%, color-mix(in srgb, #e3bf56 55%, transparent) 60%, transparent 64%),
    radial-gradient(44px 12px at 74% 60%, color-mix(in srgb, #e3bf56 55%, transparent) 60%, transparent 64%),
    radial-gradient(28px 10px at 84% 55%, color-mix(in srgb, #e3bf56 55%, transparent) 60%, transparent 64%);
  --motif-size: 360px 180px;
  --motif-move: -360px 0;
}

.season-panel[class*="motif-"],
.today[class*="motif-"],
.tpl-art {
  position: relative;
  isolation: isolate;
}

.season-panel[class*="motif-"]::before,
.today[class*="motif-"]::before,
.tpl-card[class*="motif-"] .tpl-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--motif, none);
  background-size: var(--motif-size, auto);
  border-radius: inherit;
  opacity: 0.6;
}

.motif-none::before {
  display: none;
}

.tpl-card[class*="motif-"] .tpl-art::before {
  opacity: 0.85;
  z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .season-panel[class*="motif-"]::before,
  .today[class*="motif-"]::before,
  .tpl-card[class*="motif-"]:hover .tpl-art::before {
    animation: motif-drift 40s linear infinite;
  }

  .motif-fireflies.season-panel::before,
  .motif-fireflies.today::before,
  .motif-lanterns.season-panel::before,
  .motif-lanterns.today::before {
    animation: deco-glow 4.5s ease-in-out infinite alternate;
  }
}

@keyframes motif-drift {
  from { background-position: 0 0; }
  to { background-position: var(--motif-move, 0 0); }
}

/* ---- header decorations unlocked at levels 5 and 10 ------------------------------------------------- */

.deco-lanterns .hdr-deco {
  background-image:
    linear-gradient(transparent 17px, rgba(240, 220, 180, 0.35) 17px 18px, transparent 18px),
    radial-gradient(6px 8px at 10% 30px, #e2553a 55%, rgba(232, 162, 58, 0.4) 75%, transparent 80%),
    radial-gradient(6px 8px at 35% 32px, #e8a23a 55%, rgba(232, 162, 58, 0.4) 75%, transparent 80%),
    radial-gradient(6px 8px at 60% 30px, #e2553a 55%, rgba(232, 162, 58, 0.4) 75%, transparent 80%),
    radial-gradient(6px 8px at 85% 32px, #e8a23a 55%, rgba(232, 162, 58, 0.4) 75%, transparent 80%);
  background-size: 100% 100%, 260px 100%, 260px 100%, 260px 100%, 260px 100%;
}

.deco-goldclouds .hdr-deco {
  background-image:
    radial-gradient(46px 11px at 18% 30%, rgba(227, 191, 86, 0.75) 60%, transparent 64%),
    radial-gradient(28px 9px at 26% 24%, rgba(241, 215, 122, 0.8) 60%, transparent 64%),
    radial-gradient(50px 12px at 66% 62%, rgba(227, 191, 86, 0.7) 60%, transparent 64%),
    radial-gradient(30px 9px at 74% 56%, rgba(241, 215, 122, 0.8) 60%, transparent 64%);
  background-size: 520px 150px;
}

@media (prefers-reduced-motion: no-preference) {
  .deco-lanterns .hdr-deco {
    animation: deco-glow 4s ease-in-out infinite alternate;
  }

  .deco-goldclouds .hdr-deco {
    animation: deco-drift 60s linear infinite;
  }
}

@keyframes deco-drift {
  from { background-position: 0 0; }
  to { background-position: -520px 0; }
}

.deco-chip-lanterns { background-image: radial-gradient(3px 4px at 30% 50%, #e2553a 60%, transparent 64%), radial-gradient(3px 4px at 72% 50%, #e8a23a 60%, transparent 64%); }
.deco-chip-goldclouds { background-image: radial-gradient(8px 3px at 35% 40%, #e3bf56 60%, transparent 64%), radial-gradient(7px 3px at 70% 70%, #f1d77a 60%, transparent 64%); }

/* ---- bounties: the kind of work on the board ---------------------------------------------------------- */

.bounty-kind {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--annal-ink);
}

.bounty-kind .dist-seal {
  background: transparent;
}

/* ---- Manage: premade seasons ----------------------------------------------------------------------- */

.tpl-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.9rem;
}

.tpl-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.tpl-card.is-suggested {
  border-color: var(--season, var(--kin));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--season, var(--kin)) 40%, transparent);
}

.tpl-card.is-chosen {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.tpl-art {
  height: 5.5rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--season, var(--ai)), color-mix(in srgb, var(--season, var(--ai)) 50%, var(--iron)));
}

.tpl-kanji {
  position: absolute;
  z-index: 1;
  right: 0.8rem;
  bottom: -0.5rem;
  font-family: var(--font-brush);
  font-size: 4.2rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
}

.tpl-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.4rem;
  padding: 0.8rem 1rem 1rem;
}

.tpl-body p {
  margin: 0;
}

.tpl-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.25;
}

.tpl-when {
  font-size: 0.8rem;
}

.tpl-theme {
  font-size: 0.88rem;
}

.tpl-bounties summary {
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--ai-text);
}

.tpl-bounties ul {
  margin: 0.45rem 0 0;
  font-size: 0.84rem;
}

.tpl-bounties li {
  margin-bottom: 0.25rem;
}

.tpl-body .form-actions {
  margin-top: auto;
}

.tag-suggest {
  color: var(--text);
  background: color-mix(in srgb, var(--season, var(--kin)) 18%, var(--paper));
  border-color: var(--season, var(--kin));
}

.tag-season {
  color: var(--sec-season);
}

/* ---- Manage: the bounty library and civic works -------------------------------------------------------- */

.lib-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
}

.lib-filters .seg {
  margin-left: 0;
  flex-wrap: wrap;
}

.seg-sm .seg-item {
  font-size: 0.8rem;
}

.lib-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 0.6rem;
}

.lib-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--d);
  border-radius: var(--radius);
}

.lib-item.is-season {
  background: color-mix(in srgb, var(--sec-season) 7%, var(--paper));
}

.lib-main {
  flex: 1;
  min-width: 0;
}

.lib-main p {
  margin: 0;
}

.lib-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.lib-main .lib-body {
  margin-top: 0.2rem;
  font-size: 0.86rem;
  color: var(--text-2);
}

.lib-main .lib-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-3);
}

.fill-form {
  margin-top: 0.7rem;
}

.fill-btn span {
  font-family: var(--font-brush);
}

.ptpl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ptpl {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--d);
  border-radius: var(--radius);
}

.ptpl p {
  margin: 0.2rem 0;
  font-size: 0.86rem;
}

.ptpl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.works-admin li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.works-admin li:last-child {
  border-bottom: 0;
}

.works-admin p {
  margin: 0 0 0.25rem;
}

@media (max-width: 640px) {
  .lib-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .lib-item {
    flex-direction: column;
  }
}

.library-panel {
  border-top: 4px solid var(--sec-quests);
}

.ptpl .ptpl-desc {
  color: var(--text-2);
}

.perk-deco {
  border-color: color-mix(in srgb, var(--hdr-bottom) 40%, var(--rule));
}

.works-panel {
  border-top: 4px solid var(--kin);
}

.works-done {
  opacity: 0.95;
}

.lib-more {
  margin: 0.9rem 0 0;
}

@media (max-width: 640px) {
  .town-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .town-scroll .town-svg {
    width: 580px;
    max-width: none;
  }
}

/* ---- 3.3 wave 1 ---- */
.gate-invite { margin: 0.9rem 0 0; text-align: center; font-size: 0.95rem; }

/* "Start here" card on the Hub */
.start-here { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0 0 1.25rem; padding: 1.1rem 1.25rem; background: var(--paper); border: 2px solid var(--ai); border-radius: var(--radius); }
.start-main { display: grid; gap: 0.5rem; align-content: start; }
.start-eyebrow { margin: 0; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.start-seal { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-right: 0.5rem; border: 1px solid currentColor; border-radius: 3px; color: var(--ai); font-family: var(--font-display, serif); }
.start-title { margin: 0; font-size: 1.35rem; }
.start-hint { margin: 0; color: var(--text-3); }
.start-go { justify-self: start; padding: 0.7rem 1.4rem; font-size: 1.05rem; }
.start-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.start-dismiss { justify-self: end; }
@media (min-width: 760px) { .start-here { grid-template-columns: 1.6fr 1fr; } .start-links { flex-direction: column; } .start-dismiss { grid-column: 1 / -1; } }
.slim-empty { margin: 0; padding: 0.15rem 0; color: var(--text-3); }
.toast-group .toast-sub a { text-decoration: underline; }

/* Names and wording */
.names-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.names-row { display: grid; grid-template-columns: 1fr; gap: 0.25rem 1rem; align-items: center; }
.names-label { font-weight: 600; }
.names-search { margin: 0 0 1rem; }
@media (min-width: 700px) { .names-row { grid-template-columns: 1.2fr 1fr auto; } }

/* ======================================================================================================
   3.3 the traditional look ("wa"): on by default, switchable in Nation settings.
   Everything is scoped to body.look-wa and built from the existing colour tokens, so dark mode follows.
   The block at the end of this file ("wa, site-wide") carries it to every component and page.
   ====================================================================================================== */
.look-wa {
  --wa-ink: color-mix(in srgb, var(--text) 78%, var(--paper));
  --wa-frame: color-mix(in srgb, var(--rule-strong) 80%, var(--text));
  --wa-brush: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='10' viewBox='0 0 260 10' preserveAspectRatio='none'><path d='M0 6 C30 2 60 8 110 5 C160 2 210 7 260 4 L260 7 C210 9 160 5 110 8 C60 10 30 5 0 8 Z' fill='%23c63f27'/></svg>");
  --wa-seigaiha: radial-gradient(circle at 50% 100%, transparent 0 38%, color-mix(in srgb, var(--ai) 20%, transparent) 39% 42%, transparent 43% 55%, color-mix(in srgb, var(--ai) 16%, transparent) 56% 59%, transparent 60%);
}

/* Frames: square shoji-style panels with a thin inner line and a small corner mark. */
.look-wa .panel,
.look-wa .today,
.look-wa .hub-lead,
.look-wa .start-here {
  border-radius: 2px;
  border: 1.5px solid var(--wa-frame);
  border-left-width: 1.5px;
  border-top-width: 1.5px;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px color-mix(in srgb, var(--wa-frame) 45%, transparent), 0 14px 26px -22px var(--shadow);
}
.look-wa .today { border-top: 1.5px solid var(--wa-frame); }
.look-wa .today::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--sec); }
.look-wa .hub-lead { border-left: 1.5px solid var(--wa-frame); }
.look-wa .hub-lead::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ai); }

/* Headings: Mincho serif, with a brush stroke drawn under panel and page titles. */
.look-wa .panel-title,
.look-wa .page-title,
.look-wa .today-title,
.look-wa .hub-lead-title,
.look-wa .start-title { font-family: var(--font-display); letter-spacing: 0.02em; }
.look-wa .panel-head { position: relative; padding-bottom: 0.55rem; }
.look-wa .panel-head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 4.5rem; height: 6px; background: var(--wa-brush) left center / 100% 100% no-repeat; opacity: 0.75; }
.look-wa .today-count,
.look-wa .num { font-variant-numeric: tabular-nums lining-nums; }
.look-wa .today-count { font-family: var(--font-display); }

/* Buttons: lacquer plaques; quiet ones are paper tags with an ink edge. */
.look-wa .btn { border-radius: 2px; letter-spacing: 0.02em; }
.look-wa .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ai) 82%, white) 0, var(--ai) 45%, var(--ai-deep) 100%);
  border: 1px solid var(--ai-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 0 var(--ai-deep), 0 6px 10px -6px var(--shadow);
}
.look-wa .btn-danger { background: linear-gradient(180deg, color-mix(in srgb, var(--shu) 82%, white) 0, var(--shu) 45%, var(--shu-deep) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 0 var(--shu-deep); }
.look-wa .btn-quiet, .look-wa .btn:not(.btn-primary):not(.btn-danger) { background: var(--paper-2); border: 1px solid var(--control-edge); box-shadow: 0 1px 0 var(--wa-frame); }

/* Tags and statuses: small square stamps, set a hair off-level like a pressed hanko. */
.look-wa .tag { border-radius: 2px; border-width: 1.5px; font-family: var(--font-display); letter-spacing: 0.04em; transform: rotate(-0.8deg); background: color-mix(in srgb, currentColor 6%, var(--paper)); }

/* Seigaiha in the corner of the big Hub blocks, quiet enough to read over. */
.look-wa .start-here::after,
.look-wa .today::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 7rem; height: 3.2rem; pointer-events: none; opacity: 0.55;
  background: var(--wa-seigaiha) 0 0 / 1.6rem 0.8rem;
  -webkit-mask-image: linear-gradient(135deg, transparent 35%, #000);
  mask-image: linear-gradient(135deg, transparent 35%, #000);
}
.look-wa .start-title, .look-wa .start-hint, .look-wa .start-main, .look-wa .start-links, .look-wa .today > * { position: relative; z-index: 1; }

/* Section band and tabs keep their shape; the seal squares off to match. */
.look-wa .secband-seal, .look-wa .page-kanji, .look-wa .today-seal { border-radius: 2px; }
.look-wa .noren-tab { border-radius: 0 0 2px 2px; }
.rank-items { margin: 0.5rem 0 0.8rem; }

/* Questionnaire */
.quiz-q { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.quiz-q legend { padding: 0 0.4rem; font-weight: 600; }
.quiz-review { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.7rem; }
.quiz-review .is-wrong { border-left: 3px solid var(--shu); padding-left: 0.6rem; }
.quiz-review .is-right { border-left: 3px solid var(--patina); padding-left: 0.6rem; }
.quiz-opt { display: flex; gap: 0.5rem; align-items: center; }
.quiz-opt input[type="text"] { flex: 1; }
.levels-list { margin: 0.4rem 0 0.8rem; }

/* ---- 3.3 bounty presets ---- */
.lib-item.is-retired { opacity: 0.6; }
.lib-item .inline-details { margin-top: 0.5rem; }
.queue-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.queue-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }
.queue-item.is-running { opacity: 0.85; }
.queue-moves { margin-left: auto; display: inline-flex; gap: 0.25rem; }

/* ---- 3.3 Lands ---- */
.place-card .place-leader { margin: 0 0 0.35rem; }
.place-card .place-desc { margin: 0 0 0.5rem; }
.place-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.place-row .place-name { font-weight: 600; }
.place-state, .place-town, .place-crownlands { border-left: 4px solid var(--sec-lands); }
.place-towns { margin: 0; }
.tag-office { border-color: var(--sec-lands); }

/* ---- 3.3 maps ---- */
.map-tools { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.map-fig { margin: 0 0 1rem; }
.map-svg { display: block; width: 100%; height: auto; max-width: 100%; border: 1px solid var(--rule); background: var(--paper); touch-action: manipulation; }
.map-svg.is-drawing { cursor: crosshair; touch-action: none; }
.map-svg.is-calibrating { cursor: crosshair; }
.map-svg text { fill: var(--text); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; font-family: inherit; pointer-events: none; }
.map-svg .pin circle { fill: var(--sec-lands); stroke: var(--paper); stroke-width: 2px; }
.map-svg .pin-landmark circle { fill: var(--sec-history); }
.map-svg .pin-crownlands circle { fill: var(--sec-events); }
.map-svg .pin:hover circle, .map-svg .pin:focus circle { stroke: var(--text); }
.map-svg .unit circle { stroke-width: 3px; fill-opacity: 0.38; }
.map-svg .unit-empty circle { fill: #2f9e5b; stroke: #1c6b3b; stroke-dasharray: 8 5; }
.map-svg .unit-part circle { fill: #e0b01f; stroke: #8a6a00; }
.map-svg .unit-full circle { fill: #c8402f; stroke: #7a1d12; stroke-width: 5px; }
.map-svg .unit-preview { fill: #2f6fb5; fill-opacity: 0.3; stroke: #2f6fb5; stroke-width: 3px; stroke-dasharray: 6 4; pointer-events: none; }
.map-svg .calib-mark { fill: #c8402f; stroke: #fff; stroke-width: 2px; pointer-events: none; }
.layer-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.layer-actions { margin-left: auto; display: inline-flex; gap: 0.25rem; }
.calib-point { border: 1px solid var(--rule); padding: 0.5rem 0.75rem; margin: 0 0 0.75rem; }

/* Lands: homes (release a) */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.subhead { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.home-list { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); margin-top: 0.75rem; }
.home-card { border: 1px solid var(--rule); border-left-width: 6px; padding: 0.75rem 0.9rem; background: var(--paper); }
.home-empty { border-left-color: #2f9e5b; border-left-style: dashed; }
.home-part { border-left-color: #e0b01f; }
.home-full { border-left-color: #c8402f; border-left-width: 8px; }
.home-head { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; justify-content: space-between; }
.home-name { font-size: 1.05rem; margin: 0; }
.home-state { font-size: 0.85rem; color: var(--text-2); }
.home-notes { margin: 0.4rem 0; }
.home-residents { margin: 0.4rem 0; }
.home-actions { margin: 0.5rem 0; }
.resident { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.home-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.85rem; margin: 0.5rem 0; }
.legend-dot { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; vertical-align: -0.1rem; border: 3px solid; }
.legend-empty { background: #2f9e5b66; border-color: #1c6b3b; border-style: dashed; }
.legend-part { background: #e0b01f66; border-color: #8a6a00; }
.legend-full { background: #c8402f66; border-color: #7a1d12; border-width: 5px; }
.request-list { display: grid; gap: 0.75rem; }
.request-row { border-bottom: 1px solid var(--rule); padding-bottom: 0.6rem; }
.request-answer { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin-top: 0.4rem; }
.inline-field { display: inline-block; min-width: 14rem; }
.tag-pending { color: var(--text-2); }
.tag-approved { color: var(--text); }
.tag-rejected { color: var(--text-2); }
.tag-withdrawn { color: var(--text-2); }
.profile-home { margin: 0.25rem 0 0; }


/* ======================================================================================================
   wa, site-wide: the traditional look carried to every component. Square corners come from the radius
   tokens, ink frames from --wa-frame, headings from the Mincho serif. Colours and dark mode follow the tokens.
   ====================================================================================================== */
.look-wa { --radius: 2px; --radius-lg: 3px; }
.look-wa h3, .look-wa h4 { font-family: var(--font-display); letter-spacing: 0.015em; }

/* Notices and toasts: a framed slip with a coloured bar, like a paper tag. */
.look-wa .notice, .look-wa .toast {
  border: 1.5px solid var(--wa-frame);
  border-left-width: 6px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px color-mix(in srgb, var(--wa-frame) 35%, transparent);
}
.look-wa .notice { border-left-color: var(--ai); }
.look-wa .notice-ok { border-left-color: var(--patina); }
.look-wa .notice-warn { border-left-color: var(--lamp); }
.look-wa .notice-error { border-left-color: var(--shu); }
.look-wa .toast { border-left-color: var(--kin); }
.look-wa .toast-thanks { border-left-color: var(--shu); }
.look-wa .toast-milestone { border-left-color: var(--s-indigo); }
.look-wa .ceremony { outline: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); outline-offset: -6px; }

/* Figures: framed like the Hub blocks, with the number in the serif. */
.look-wa .kpi { border: 1.5px solid var(--wa-frame); border-top: 5px solid var(--ai); box-shadow: inset 0 0 0 3px var(--paper), 0 14px 26px -22px var(--shadow); }
.look-wa .kpi-value, .look-wa .stat-strip strong { font-family: var(--font-display); font-variant-numeric: tabular-nums lining-nums; }

/* Forms: ink-edged fields, square. The focus ring keeps its own colour. */
.look-wa input:not([type="checkbox"]):not([type="radio"]):not(:focus),
.look-wa select:not(:focus),
.look-wa textarea:not(:focus) { border-color: var(--control-edge); }
.look-wa fieldset { border: 1.5px solid var(--wa-frame); border-radius: 2px; }
.look-wa legend { font-family: var(--font-display); }

/* Tables: a double ink rule under the header (already there), serif headings, quiet row lines. */
.look-wa .ledger th { font-family: var(--font-display); letter-spacing: 0.03em; }
.look-wa .ledger td { border-bottom-color: var(--rule); }
.look-wa .table-wrap { border-top: 1px solid var(--wa-frame); }

/* Segmented switches and tab-like links: square plaques instead of pills. */
.look-wa .seg, .look-wa .seg-item { border-radius: 2px; }
.look-wa .seg { border: 1px solid var(--wa-frame); }

/* Empty states: a dashed ink outline, like a blank slip waiting to be filled. */
.look-wa .empty { border: 1.5px dashed var(--rule-strong); border-radius: 2px; }
.look-wa .slim-empty { border: 0; }

/* Cards of the Lands and Manage pages follow the panels. */
.look-wa .home-card, .look-wa .place-card { border-top-color: var(--wa-frame); border-right-color: var(--wa-frame); border-bottom-color: var(--wa-frame); }
.look-wa .map-svg { border: 1.5px solid var(--wa-frame); border-radius: 2px; }
.look-wa .btn-sm { border-radius: 2px; }
.look-wa details.inline-details[open] { border-radius: 2px; }
.look-wa .count-badge { border-radius: 2px; }
.look-wa .site-footer { border-top: 1.5px solid var(--wa-frame); }

/* A banner that stands alone on a page keeps a gap to the page heading. */
.cer-stage.is-enhanced .cer-banner:last-of-type { margin-bottom: 1.2rem; }

/* ---- Prosperity by place ------------------------------------------------------------------------------ */
.pl-panel { scroll-margin-top: 1rem; }
.pl-top { margin: 0 0 0.75rem; }
.pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.pl-row {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  background: var(--paper);
}
.pl-row.pl-nested { margin-left: clamp(0.75rem, 4vw, 2rem); border-left-width: 3px; }
.pl-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; align-items: baseline; }
.pl-name { font-weight: 600; overflow-wrap: anywhere; }
.pl-week { color: var(--text-3); font-size: 0.9rem; }
.pl-week.is-up { color: var(--text); font-weight: 600; }
.pl-stage, .pl-points { margin: 0.25rem 0; }
.pl-points { font-size: 0.9rem; }
.pl-stagebadge {
  display: inline-block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.1rem 0.6rem;
  font-size: 0.9rem;
}
.pl-kinds { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.4rem; }
.pl-kinds li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pl-kind { flex: 1 1 10rem; }
.pl-list + .hint { margin-top: 0.75rem; }

/* ---- Shops, houses, polls, ideas, drives, apprenticeships ------------------------------------------- */
.entry-list { display: grid; gap: 0.75rem; }
.entry {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  background: var(--paper);
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}
.entry-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; }
.entry-name { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.entry-meta { color: var(--text-3); font-size: 0.9rem; }
.entry-text { margin: 0; overflow-wrap: anywhere; }
.entry-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.entry.is-answered { opacity: 0.85; }
.idea { grid-template-columns: auto 1fr; align-items: start; gap: 0.75rem; }
.idea.is-answered { grid-template-columns: 1fr; }
.idea-votes { min-width: 3.5rem; }
.idea-count { display: inline-block; border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.2rem 0.6rem; }
.idea-body { display: grid; gap: 0.35rem; min-width: 0; }
.result-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.6rem; }
.result-top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.result-label { overflow-wrap: anywhere; }
.result-row.is-leading .result-label { font-weight: 600; }
.skill-list { margin: 0.25rem 0; }
.skill.is-done { color: var(--text-3); }
.skill .is-done { text-decoration: line-through; }
.result-num { white-space: nowrap; }
.map-svg .pin-shop circle { fill: var(--sec-quests); }
.map-svg .pin .ring { fill: none; stroke-width: 3px; fill-opacity: 0; }
.map-svg .pin .ring-empty { stroke: #2f9e5b; stroke-dasharray: 8 5; }
.map-svg .pin .ring-part { stroke: #e0b01f; }
.map-svg .pin .ring-full { stroke: #c8402f; stroke-width: 5px; }

/* ==== ministries =========================================================================================== */
.ministry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.ministry-card { border-left: 4px solid var(--sec-ministries); }
.min-card-head { display: flex; gap: 0.75rem; align-items: flex-start; }
.min-card-seal {
  flex: none; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem;
  background: var(--sec-ministries); color: var(--paper); font-size: 1.5rem;
}
.min-badge {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.5rem 0.1rem 0.15rem;
  border: 1px solid var(--sec-ministries); color: var(--text); font-size: 0.85rem; border-radius: 999px;
}
.min-badge-seal {
  display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--sec-ministries); color: var(--paper); font-size: 0.8rem;
}
.member-rank { display: inline-block; min-width: 8rem; color: var(--text-3); font-size: 0.9rem; }
.tier-tag {
  display: inline-block; min-width: 2.2rem; padding: 0 0.4rem; text-align: center; font-weight: 700;
  border: 1px solid var(--sec-ministries); color: var(--text);
}
.war-win { color: var(--text); font-weight: 600; }
.war-loss { color: var(--text-3); }
.war-ongoing { color: var(--text); }
.profile-ministries { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }

/* ---- Tutorial -------------------------------------------------------------------------------- */
.toc { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.25rem; }

/* ---- My plans and the weekly report ------------------------------------------------------------ */
.plans { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.plan { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.plan-tick { width: 1.2em; flex: none; color: var(--text-3); }
.plan-done .plan-tick { color: var(--ai-text); font-weight: 700; }
.plan-done .plan-main a { text-decoration: line-through; text-decoration-thickness: 1px; }
.plan-main { flex: 1 1 12rem; }
.weekly { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; }

/* ---- Hall of Fame ------------------------------------------------------------------------------ */
.hall-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.hall-podium { margin: 0.35rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.hall-awards { margin: 0.25rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.15rem; }
.hall-names { margin: 0.25rem 0 0; color: var(--text-2); }

/* ---- Nation calendar ---------------------------------------------------------------------------- */
.cal-ev-season .cal-dot, .cal-dot-season { background: var(--patina); }
.cal-ev-ministry .cal-dot, .cal-dot-ministry { background: var(--lamp); }
.cal-ev-work .cal-dot, .cal-dot-work { background: var(--ai-text); }
.cal-key { margin: 0.75rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; color: var(--text-2); font-size: 0.85rem; }
.cal-key li { display: inline-flex; align-items: center; gap: 0.35rem; }
.cal-key .cal-dot-event { background: var(--shu); }

/* ---- Needs a hand ------------------------------------------------------------------------------- */
.help { border-left: 3px solid var(--patina); }

/* ---- Civic work steps and pictures ---------------------------------------------------------------- */
.stages { margin: 0.6rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.stage { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-3); font-size: 0.85rem; }
.stage.is-done { color: var(--text); }
.stage.is-current { color: var(--text); font-weight: 600; }
.stage-mark { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--rule-strong); font-size: 0.75rem; flex: none; }
.is-done > .stage-mark { background: var(--patina); border-color: var(--patina); color: var(--paper); }
.is-current > .stage-mark { border-color: var(--shu); color: var(--shu-text); }
.stage-list { margin: 0.75rem 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.stage-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.stage-text { flex: 1 1 14rem; }
.work-more { margin: 0.5rem 0 0; }
.work-gallery { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.9rem; }
.work-gallery figure { margin: 0; }
.work-gallery img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.work-gallery figcaption { margin-top: 0.3rem; font-size: 0.85rem; }
.stage-label { overflow-wrap: anywhere; }

/* ---- Art set: round pictures, banners, header scenes, music ------------------------------------- */

/* The emblem pictures themselves (.art-emblem, .emb-*) are in art.css, generated by tools/build-art.js. */
.art-emblem { display: block; }

.avatar {
  --av: var(--s-indigo);
  --size: 2.6rem;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  color: #fffaf1;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.35), transparent 45%),
    var(--av);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--av) 40%, #fff), 0 2px 5px -1px var(--shadow), inset 0 -2px 3px rgba(0, 0, 0, 0.25);
  vertical-align: middle;
}

.avatar .art-emblem { width: 58%; height: 58%; }
.avatar-sm { --size: 1.8rem; }
.avatar-md { --size: 2.6rem; }
.avatar-lg { --size: 4rem; }
.avatar-xl { --size: 5.4rem; }
.avatar-indigo { --av: var(--s-indigo); }
.avatar-sakura { --av: var(--s-sakura); }
.avatar-pine { --av: var(--s-pine); }
.avatar-maple { --av: var(--s-maple); }
.avatar-snow { --av: var(--s-snow); }
.avatar-gold { --av: var(--s-gold); }
.avatar-shu { --av: var(--shu); }

.user-chip .avatar { --size: 28px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }

.profile-banner {
  grid-column: 1 / -1;
  grid-row: 1;
  height: 7.5rem;
  margin: -1.3rem -1.5rem 0;
  background-color: var(--ai-tint);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.profile-picture {
  align-self: flex-start;
  margin-top: -3.4rem;
  position: relative;
}

.profile-picture .avatar { box-shadow: 0 0 0 4px var(--paper), 0 3px 8px -2px var(--shadow); }

.look-form { max-width: 60rem; }
.look-preview { min-height: 4rem; display: flex; align-items: center; }
.emblem-none { font-size: 1.4rem; color: var(--text-3); line-height: 2rem; }

.accent-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.accent-opt,
.banner-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}

.accent-opt input,
.banner-opt input { position: absolute; opacity: 0; pointer-events: none; }

.accent-opt:has(input:checked),
.banner-opt:has(input:checked) {
  border-color: var(--ai);
  background: var(--ai-tint);
  box-shadow: inset 0 0 0 1px var(--ai);
}

.accent-opt:has(input:focus-visible),
.banner-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.banner-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; }
.banner-opt { align-items: stretch; }
.banner-opt.is-locked { opacity: 0.55; cursor: not-allowed; }

.banner-thumb {
  display: block;
  height: 3.2rem;
  border-radius: 4px;
  background-color: var(--ai-tint);
  background-size: cover;
  background-position: center;
}

/* The running season's scene along the header, in the colour of the night sky so it works in both themes. */
.hdr-scene {
  --h: 64px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  height: var(--h);
  background: color-mix(in srgb, var(--hdr-top) 62%, #000);
  opacity: 0.55;
  -webkit-mask: var(--scene) 0 100% / auto var(--h) repeat-x;
  mask: var(--scene) 0 100% / auto var(--h) repeat-x;
}

.is-compact .hdr-scene { --h: 44px; bottom: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .hdr-scene { animation: scene-drift 360s linear infinite; }
}

@keyframes scene-drift {
  to {
    -webkit-mask-position: calc(var(--h) * -12) 100%;
    mask-position: calc(var(--h) * -12) 100%;
  }
}

/* Floats above the page: it appears on the first click of the day, and must never push the content
   down, or that first click lands on the wrong thing. */
.music-note {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(42rem, calc(100% - 2rem));
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0;
  padding: 0.55rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--patina);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.music-note[hidden] { display: none; }

@media (max-width: 720px) {
  .music-note { bottom: 4.8rem; }
}

.music-note-text { font-weight: 600; }
.music-note-link { margin-left: auto; }

/* ---- Launch checklist ----------------------------------------------------------------------------- */
.launch-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
.launch-item { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: start; padding: 0.55rem 0; border-top: 1px solid var(--rule); }
.launch-item:first-child { border-top: 0; }
.launch-mark { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--rule-strong); font-size: 0.8rem; color: var(--text-3); }
.launch-item.is-done .launch-mark { background: var(--patina); border-color: var(--patina); color: var(--paper); }
.launch-item.is-skip { opacity: 0.7; }
.launch-label { margin: 0; font-weight: 600; }
.launch-detail { margin: 0.15rem 0 0; }
.launch-text { min-width: 0; }

/* ---- The permanent quest (history questionnaire) on the quest board ----------------------------------- */
.quests-permanent { margin-bottom: 1rem; grid-template-columns: 1fr; }
.quest-permanent .quest-link { border-left: 4px solid var(--gold); }
.quest-permanent.is-done .quest-link { opacity: 0.85; }

/* ---- Homes beside the town map: a list you can point at, and the window that names a new home ------------- */
.map-split { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 900px) {
  .map-split { grid-template-columns: minmax(0, 2.2fr) minmax(15rem, 1fr); }
}
.map-split .map-fig { margin: 0; }
.unit-aside { border: 1px solid var(--rule); background: var(--paper); padding: 0.7rem 0.8rem; }
.unit-aside .hint { margin: 0 0 0.5rem; }
.unit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; }
.unit-item { border: 1px solid var(--rule); border-left-width: 6px; background: var(--paper); }
.unit-item a { display: grid; gap: 0.1rem; padding: 0.4rem 0.6rem; color: inherit; text-decoration: none; }
.unit-item-name { font-weight: 600; }
.unit-item-meta { color: var(--text-3); font-size: var(--step--1); }
.unit-item-empty { border-left-color: #2f9e5b; border-left-style: dashed; }
.unit-item-part { border-left-color: #e0b01f; }
.unit-item-full { border-left-color: #c8402f; opacity: 0.8; }
.unit-item-off .unit-item-meta { font-style: italic; }
.unit-item.is-hot, .unit-item:focus-within { background: var(--paper-2); outline: 2px solid var(--text); outline-offset: -2px; }
.map-svg .unit.is-hot circle { stroke-width: 7px; fill-opacity: 0.7; stroke: var(--text); }
.map-svg .unit.is-hot text { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .map-svg .unit.is-hot circle { animation: unit-glow 0.9s ease-in-out infinite alternate; }
}
@keyframes unit-glow { from { stroke-width: 5px; } to { stroke-width: 9px; } }
.home-dialog { border: 2px solid var(--rule-strong); background: var(--paper); color: var(--text); padding: 1.1rem 1.2rem; width: min(26rem, calc(100vw - 2rem)); }
.home-dialog::backdrop { background: rgba(10, 18, 36, 0.55); }

/* ---- "How this works" boxes ------------------------------------------------------------------- */
.how-box { background: var(--paper-2); border: 1px solid var(--rule); border-left: 4px solid var(--ai); border-radius: var(--radius); padding: 0.1rem 1rem; margin: 0 0 1rem; }
.how-title { cursor: pointer; font-weight: 700; padding: 0.7rem 0; list-style: none; display: flex; align-items: center; gap: 0.6rem; }
.how-title::-webkit-details-marker { display: none; }
.how-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ai); color: var(--on-ai); font-weight: 700; flex: none; }
.how-body { padding: 0 0 0.8rem; }
.how-body p { margin: 0 0 0.5rem; }
.how-steps { margin: 0 0 0.5rem 1.2rem; padding: 0; }
.how-steps li { margin: 0.25rem 0; }
.how-more { color: var(--text-3); font-size: 0.92em; }
.how-box[hidden], .how-again[hidden] { display: none; }
.how-actions { display: flex; justify-content: flex-end; margin: 0.4rem 0 0; }
.how-again { margin: 0 0 1rem; }
.how-again-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.7rem 0.2rem 0.3rem; font: inherit; font-size: 0.88rem; color: var(--text-2); background: transparent; border: 1px dashed var(--rule); border-radius: 999px; cursor: pointer; }
.how-again-btn:hover, .how-again-btn:focus-visible { color: var(--text); border-color: var(--ai); border-style: solid; }
.how-again-btn .how-mark { width: 1.2rem; height: 1.2rem; font-size: 0.78rem; }

/* ---- Search -------------------------------------------------------------------------------------- */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.search-icon {
  display: none;
}

.search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 0.9rem;
  font: inherit;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}

.search-go {
  min-height: 44px;
  padding: 0 1.1rem;
  font: inherit;
  font-weight: 700;
  color: var(--on-ai);
  background: var(--ai);
  border: 1px solid var(--ai-deep);
  border-radius: var(--radius);
  cursor: pointer;
}

.search-go:hover {
  background: var(--ai-deep);
}

.search-page-box {
  margin: 0 0 1.25rem;
  max-width: 40rem;
}

/* The small field in the header (wide screens). */
.search-box-compact .search-input {
  width: 11rem;
  min-height: 38px;
  padding: 0 0.9rem 0 2.4rem;
  color: var(--hdr-text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.search-box-compact .search-input::placeholder {
  color: var(--hdr-muted);
}

.search-box-compact .search-input:focus {
  width: 17rem;
  background: rgba(255, 255, 255, 0.16);
}

.search-box-compact .search-go {
  position: absolute;
  left: 2px;
  top: 2px;
  display: grid;
  place-items: center;
  width: 34px;
  min-height: 34px;
  height: 34px;
  padding: 0;
  color: var(--hdr-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.search-box-compact .search-go:hover {
  color: var(--hdr-text);
  background: rgba(255, 255, 255, 0.12);
}

/* The magnifier button for phones; the field itself opens from it. */
.hdr-tools .search-open {
  display: none;
}

.search-suggest {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 18rem;
  max-height: 70vh;
  overflow-y: auto;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -18px var(--shadow);
}

.search-box-compact .search-suggest {
  left: auto;
  right: 0;
  width: 26rem;
  max-width: calc(100vw - 2rem);
}

.search-suggest-list {
  margin: 0;
  padding: 0.3rem;
  list-style: none;
}

.search-suggest-item a {
  display: block;
  padding: 0.5rem 0.65rem;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
}

.search-suggest-item a:hover,
.search-suggest-item.is-active a {
  background: var(--ai-tint);
}

.search-suggest-all a {
  font-weight: 700;
  color: var(--ai-text);
  border-top: 1px solid var(--rule);
  border-radius: 0 0 var(--radius) var(--radius);
}

.search-group {
  margin: 0 0 0.5rem;
}

.search-hits {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-hit a {
  display: block;
  padding: 0.6rem 0.8rem;
  color: var(--text);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.search-hit a:hover {
  border-color: var(--ai);
  background: var(--ai-tint);
}

.search-hit-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.search-hit-title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.search-kind {
  flex: none;
  padding: 0.05rem 0.55rem;
  font-size: 0.75rem;
  color: var(--text-3);
  white-space: nowrap;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
}

.search-hit-context {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9rem;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.search-hit mark,
.search-suggest-item mark {
  padding: 0 0.1em;
  font-weight: 700;
  color: inherit;
  background: var(--lamp-tint);
  border-radius: 2px;
}

.search-more {
  margin: 0.4rem 0 0;
}

.search-examples {
  margin: 0 0 0.75rem 1.2rem;
  padding: 0;
}

.search-none {
  font-weight: 700;
}

@media (max-width: 720px) {
  .hdr-tools .search-open {
    display: inline-grid;
  }

  .search-box-compact {
    display: none;
  }

  .search-box-compact.is-open {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 0.6rem var(--gutter);
    background: var(--paper);
    box-shadow: 0 10px 30px -12px var(--shadow);
  }

  .search-box-compact.is-open .search-input {
    width: auto;
    min-height: 44px;
    padding: 0 0.9rem;
    color: var(--text);
    background: var(--field);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
  }

  .search-box-compact.is-open .search-input::placeholder {
    color: var(--text-3);
  }

  .search-box-compact.is-open .search-go {
    position: static;
    width: auto;
    height: 44px;
    min-height: 44px;
    padding: 0 1rem;
    color: var(--on-ai);
    background: var(--ai);
    border: 1px solid var(--ai-deep);
    border-radius: var(--radius);
  }

  .search-box-compact.is-open .search-suggest {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-width: none;
    top: calc(100% - 0.2rem);
  }
}

kbd { display: inline-block; padding: 0.05rem 0.4rem; font: inherit; font-size: 0.85em; font-weight: 600; color: var(--text); background: var(--paper-2); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; }

.notice-link { font-weight: 700; white-space: nowrap; }

/* ---- search: the row of groups above the results ---- */
.search-filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-filter-link {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  color: var(--text);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
}

.search-filter-link:hover {
  border-color: var(--ai);
  background: var(--ai-tint);
}

.search-filter-link.is-current {
  font-weight: 700;
  color: var(--ai-text);
  background: var(--ai-tint);
  border-color: var(--ai);
}

/* ---- the list of keyboard shortcuts ---- */
.keys-dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.1rem 1.2rem;
  color: var(--text);
  background: var(--paper);
  border: 2px solid var(--rule-strong);
}

.keys-dialog::backdrop {
  background: rgba(10, 18, 36, 0.55);
}

.keys-list {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.keys-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.9rem;
}

.keys-keys {
  min-width: 11rem;
}

.keys-what {
  color: var(--text-2);
}

/* ---- staff tools: the morning list and the ready answers ---- */
.today-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-item {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.today-count {
  min-width: 2.2rem;
  font-size: var(--step-2);
  font-weight: 700;
  text-align: right;
}

.today-text {
  overflow-wrap: anywhere;
}

.ready-list {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.ready-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 0.8rem;
}

.ready-edit {
  display: flex;
  flex: 1 1 22rem;
  align-items: flex-end;
  gap: 0.5rem;
}

.ready-edit .field {
  flex: 1;
}

.ready-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ready-pick {
  display: block;
  max-width: 100%;
  margin: 0 0 0.35rem;
}

/* ---- bulk bar: a reason field with its ready-answer select next to its button ----------------- */
.bulk-reason {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* ---- save as picture (profile and event pages) ---- */
.share-card { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.share-card[hidden] { display: none; }
.share-note { margin: 0; }

/* ---- the public front door (/welcome) ---- */
.front-steps { margin: 0.5rem 0 1.25rem; padding-left: 1.4rem; display: grid; gap: 0.35rem; }

/* ---- uploaded profile pictures ---- */
.avatar-photo { object-fit: cover; padding: 0; background: var(--paper-2); }
.photo-states { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.75rem; }
.photo-state { margin: 0; display: flex; align-items: center; gap: 0.6rem; }
.photo-state figcaption { font-size: 0.9rem; color: var(--text-2); }
.photo-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.photo-case { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; padding: 0.9rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.photo-review { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--paper-2); }
.photo-case-text { flex: 1 1 16rem; display: grid; gap: 0.5rem; }

/* ---- newspapers (History › Newspapers) ---- */
.paper-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.paper-card { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: start; padding: 0.9rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.paper-card.is-hidden { border-style: dashed; opacity: 0.85; }
.paper-cover { display: block; aspect-ratio: 3 / 4; border: 1px solid var(--rule-strong); background: var(--paper-2); overflow: hidden; }
.paper-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paper-mast { display: grid; place-items: center; height: 100%; font-size: 2.4rem; color: var(--text-3); }
.paper-title { margin: 0 0 0.25rem; font-size: 1.15rem; }
.paper-text p { margin: 0.2rem 0; }
.paper-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.paper-page { margin: 0; }
.paper-page img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--rule-strong); background: var(--paper-2); }
.paper-page figcaption { margin-top: 0.4rem; text-align: center; font-size: 0.92rem; }
.paper-slot { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.75rem 0.9rem; display: grid; gap: 0.6rem; }
.paper-slot legend { font-weight: 600; padding: 0 0.3rem; }
.paper-edit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.paper-edit-row { display: grid; grid-template-columns: 5rem 1fr; gap: 0.8rem; align-items: start; }
.paper-thumb { width: 5rem; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--rule-strong); background: var(--paper-2); }
.paper-edit-forms { display: grid; gap: 0.5rem; }
.paper-staff { margin-top: 1.5rem; }
.gazette { display: grid; gap: 1rem; }
.gazette-part .plain-list li { margin: 0.25rem 0; }
.lede { font-size: 1.08rem; color: var(--text-2); }
@media (max-width: 560px) {
  .paper-card { grid-template-columns: 5rem 1fr; }
}

/* ---- questlines (quest board cards, their page and the making of them) ---- */
.qline-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1rem; }
.qline-card { padding: 1rem 1.1rem; border: 1px solid var(--rule-strong); border-left: 4px solid var(--kin); border-radius: var(--radius); background: var(--paper); display: grid; gap: 0.5rem; }
.qline-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.qline-title { margin: 0; font-size: 1.15rem; }
.qline-intro { margin: 0; color: var(--text-2); }
.qline-where { margin: 0; font-weight: 600; }
.qline-steps { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.qline-step { display: flex; gap: 0.6rem; align-items: baseline; }
.qline-step-text { min-width: 0; overflow-wrap: anywhere; }
.qline-num { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--rule-strong); font-size: 0.85rem; font-weight: 600; background: var(--paper-2); }
.qline-step.is-done .qline-num { background: var(--patina-tint); border-color: var(--patina); }
.qline-step.is-locked { color: var(--text-2); }
.qline-step.is-locked .qline-num { border-style: dashed; }
.qline-steps-big .qline-step { padding: 0.3rem 0; }
.qline-manage { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.qline-manage-row { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.6rem 0.8rem; display: grid; gap: 0.5rem; }
.qline-manage-row summary { cursor: pointer; }

/* ---- Accessibility (WCAG 2.2 AA, Block G) ---------------------------------------------------------------- */
/* 2.4.11 Focus not obscured: on phones the bar at the bottom never covers what has the focus. */
@media (max-width: 720px) {
  html { scroll-padding-bottom: 5.5rem; }
}
/* Forced colours (Windows high contrast): keep borders, focus rings and state marks visible. */
@media (forced-colors: active) {
  .btn, input, select, textarea, .panel, .tag, .count-badge, .quest, .qline-card, .paper-card, .photo-case, .notice { border: 1px solid CanvasText; }
  .btn-primary, .btn-danger { border: 2px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .noren-tab.is-current, .nav-tab.is-current, .tab.is-current, .seg-item.is-current { outline: 2px solid Highlight; }
  .pbar { border: 1px solid CanvasText; }
  .avatar, .avatar-photo { forced-color-adjust: none; }
  [aria-hidden="true"].hdr-art, .gate-front { display: none; }
}
/* 2.5.8 Target size: small buttons keep at least 24 × 24 CSS pixels. */
.btn-sm { min-height: 1.75rem; min-width: 1.75rem; }
/* Headings that became h2 for a correct outline keep the look they had as h3. */
h2.tansu-label, h2.ev-title, h2.bounty-title, h2.lm-name, h2.entry-name, h2.sub-title { font-family: var(--font-sans); }
.look-wa h2.tansu-label, .look-wa h2.ev-title, .look-wa h2.bounty-title, .look-wa h2.lm-name, .look-wa h2.entry-name, .look-wa h2.sub-title { font-family: var(--font-display); letter-spacing: 0.015em; }
/* 1.4.10 Reflow: at 320 CSS pixels (or 400 % zoom) the header fits without sideways scrolling. */
@media (max-width: 400px) {
  .hdr-top { gap: 0.4rem; }
  .hdr-tools { gap: 0.25rem; }
  .hdr-tools .icon-btn { width: 34px; height: 34px; }
  .brand { gap: 0.45rem; min-width: 0; }
  .brand-name { font-size: 1.15rem; }
}