/* DelveTalk's one stylesheet (docs/WEB.md): the front, the hand (which inlines it) and the site (site/front.css links it).
   One column, phone first; from 68rem a page uses the width its body's class names ("A wide screen", at the end). A place speaks in the body face; the exact card is monospace, folded beneath; everything that
   is bookkeeping (receipts, law, source) waits in a disclosure. Quiet by default: one primary action a page.
   The palette is the token blocks below and nothing else; tests/test_theme.py checks every text-on-surface pair in both
   for WCAG AA. A receipt's fate is a word and an icon in the markup; colour only repeats it. */

:root {
  color-scheme: light;
  --paper: #f2e9d8; --leaf: #fbf6ea; --tint: #ece0c6; --rtint: #f6e1d6; --rule: #d9c9a8;
  --ink: #261d14; --soft: #4a3e31; --muted: #6a5a45;
  --amber: #8a5300; --violet: #63368f; --silver: #575c63; --terracotta: #a3361f; --sage: #3a6833;
  --glow: #d99a1e; --button: #5d3389; --bink: #fbf6ea;
  --lamp: #fff4d6; --shade: rgba(60, 40, 15, .14);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --measure: 36rem; --frame: 80rem; --side: 23rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --paper: #15120e; --leaf: #1f1a14; --tint: #2a2319; --rtint: #35201b; --rule: #3d3428;
    --ink: #f0e7d7; --soft: #d8ccb8; --muted: #ab9d87;
    --amber: #ebb862; --violet: #c8aaff; --silver: #aeb1b6; --terracotta: #f2907a; --sage: #a2cf94;
    --glow: #e0913a; --button: #c8aaff; --bink: #15120e;
    --lamp: #2b2216; --shade: rgba(0, 0, 0, .45);
  }
}
[data-theme=dark] {
  color-scheme: dark;
  --paper: #15120e; --leaf: #1f1a14; --tint: #2a2319; --rtint: #35201b; --rule: #3d3428;
  --ink: #f0e7d7; --soft: #d8ccb8; --muted: #ab9d87;
  --amber: #ebb862; --violet: #c8aaff; --silver: #aeb1b6; --terracotta: #f2907a; --sage: #a2cf94;
  --glow: #e0913a; --button: #c8aaff; --bink: #15120e;
  --lamp: #2b2216; --shade: rgba(0, 0, 0, .45);
}

/* ---- the page */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.6 var(--serif); overflow-wrap: break-word;
  background-image: radial-gradient(ellipse 70rem 28rem at 50% -6rem, var(--lamp), transparent 70%); background-repeat: no-repeat; }
[data-theme] { background: var(--paper); color: var(--ink); }
header, main, footer { max-width: calc(var(--measure) + 32px); margin: 0 auto; padding-inline: 16px; }
header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; padding-block: 1.1rem .4rem; }
header nav { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font: .85rem var(--sans); }
header nav a, header .who a { color: var(--soft); text-decoration: none; }
header nav a:hover, header .who a:hover { color: var(--violet); text-decoration: underline; }
header .who { margin-left: auto; color: var(--muted); font: .85rem var(--sans); }
.mark { color: var(--ink); text-decoration: none; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; }
main { padding-block: 1.25rem 3rem; }
body.wide header, body.wide main, body.wide footer { max-width: calc(58rem + 32px); }  /* the home page and the catalogue, between a phone and a desktop */
footer { padding-block: 1rem 2rem; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--rule); }
footer p { margin: .35rem 0; }
footer .links { display: flex; flex-wrap: wrap; gap: .1rem 1rem; font-family: var(--sans); font-size: .8rem; }
footer .links a { margin: 0; color: var(--soft); }
h1, h2 { font-weight: 400; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 2rem; margin: .1rem 0 .9rem; letter-spacing: -.01em; }
.eyebrow { margin: 0; color: var(--muted); font: 600 .72rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
h2.eyebrow { margin: 0 0 .5rem; }
h1.title small { display: block; margin-top: .3rem; font-size: .95rem; color: var(--muted); font-style: italic; }
h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
p { margin: .75rem 0; }
a { color: var(--violet); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.lede { font-size: 1.15rem; color: var(--soft); }
code, kbd { font: .86em var(--mono); background: var(--tint); padding: 0 .25em; border-radius: 3px; }
pre { font: 13.5px/1.5 var(--mono); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---- a place: its paint, its exact card folded beneath, what it wants, its doors */
.where { margin: 0 0 .25rem; color: var(--muted); font-size: .9rem; letter-spacing: .04em; }
.paint { margin: .25rem 0 1rem; font-size: 1.3rem; line-height: 1.55; color: var(--ink); white-space: pre-line; }
.scene { margin: .25rem 0 1rem; padding: 1.1rem 1.25rem .5rem; border: 1px solid var(--rule); border-radius: 10px;
  background: linear-gradient(170deg, var(--lamp), var(--leaf) 60%); box-shadow: 0 18px 40px -28px var(--shade); }
.scene .paint { margin-top: 0; font-size: 1.35rem; }
.scene .paint::first-letter { font-size: 1.15em; }
.scene > pre.card:only-child, .scene > pre.card:last-child { margin-bottom: .75rem; }
.scene details.card { margin-bottom: .5rem; }
.telling { margin: 0 0 1.25rem; padding: .75rem 1rem; border-left: 3px solid var(--amber); background: var(--tint); border-radius: 0 8px 8px 0; }
.telling .frame { margin: 0; color: var(--muted); font-size: .9rem; font-style: italic; }
.telling .paint { font-size: 1.1rem; margin-bottom: .25rem; }
details { margin: .5rem 0; }
details > summary { cursor: pointer; width: fit-content; color: var(--muted); font-size: .9rem; }
details > summary:hover { color: var(--violet); }
pre.card { margin: .5rem 0; padding: .9rem 1rem; background: var(--leaf); border: 1px solid var(--rule); border-radius: 6px;
  color: var(--ink); white-space: pre; overflow-x: auto; tab-size: 4; }
.wants { margin: .5rem 0; color: var(--soft); font-style: italic; }
.wants::before { content: "✦ "; color: var(--amber); font-style: normal; }
.doors { margin: .4rem 0; color: var(--muted); font-size: .95rem; }

/* ---- around a place: who is here, what lies here, its newest lines; its doors drawn small beside */
.around { display: grid; gap: 1rem 2rem; margin: 2rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.around > * { min-width: 0; }
@media (min-width: 46rem) { .around { grid-template-columns: 1fr 1fr; } }
.present { margin: 0 0 .5rem; font-size: 1.05rem; }
.present::before { content: "● "; color: var(--sage); font-size: .8em; }
.things { margin: 0 0 1rem; color: var(--soft); }
ol.lines { list-style: none; margin: 0; padding: 0; }
ol.lines li { padding: .35rem 0; border-bottom: 1px dotted var(--rule); font-size: .95rem; }
ol.lines .by { color: var(--ink); font-weight: 600; }
ol.lines .verb { color: var(--violet); font-style: italic; }
ol.lines q { display: block; color: var(--soft); quotes: "“" "”"; }
ol.lines .at { color: var(--muted); font: .72rem var(--sans); font-variant-numeric: tabular-nums; }
figure.local { margin: 0; }
figure.local figcaption { margin-top: .25rem; }
svg.local-map { display: block; max-width: 22rem; height: auto; color: var(--soft); overflow: visible; }
svg.local-map line { stroke: var(--rule); stroke-width: 1.5; }
svg.local-map line.in { stroke-dasharray: 3 3; }
svg.local-map circle { fill: var(--paper); stroke: var(--soft); stroke-width: 1.3; }
svg.local-map circle.here { fill: var(--amber); stroke: var(--amber); }
svg.local-map text { fill: var(--soft); font-family: var(--sans); }
svg.local-map text.name { fill: var(--ink); font-weight: 600; font-size: 12px; }
.state { background: var(--leaf); border: 1px solid var(--rule); border-radius: 6px; padding: .75rem 1rem; }

/* ---- what came back: speech first, the receipt on demand, a refusal or a wait as the answer */
.reply { margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.spoken { font-size: 1.15rem; white-space: pre-line; }
.turn { font-size: 1rem; }
.turn .stamp { color: var(--silver); font-family: var(--mono); }
.turn.refused .stamp { color: var(--terracotta); }
.turn.suspended .stamp { color: var(--amber); }
.receipt .turn { font: .85rem/1.5 var(--mono); color: var(--soft); }
.receipt .turn.admitted .stamp { color: var(--sage); }
.hob { display: flex; align-items: baseline; gap: .5rem; color: var(--soft); }
.quiet { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-style: italic; }
.quiet .stamp { font-style: normal; }

/* ---- the one box, and the spells offered under it */
form { display: grid; gap: .5rem; justify-items: start; margin: .75rem 0; }
label { display: grid; gap: .2rem; width: 100%; color: var(--muted); font-size: .9rem; }
form.say { margin-top: 1.5rem; }
textarea, input, select { width: 100%; font: 1rem/1.5 var(--serif); background: var(--leaf); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 8px; padding: .6rem .75rem; }
textarea { font-size: 1.05rem; resize: vertical; }
textarea:focus, input:focus { border-color: var(--violet); outline: none; }
form.say .acts { justify-self: end; display: flex; align-items: center; gap: 1rem; margin: 0; }
.suggest { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 1rem; }
a.say { padding: .15rem .6rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--soft); background: var(--leaf);
  font-size: .85rem; text-decoration: none; }
a.say:hover, a.say:focus-visible { color: var(--violet); border-color: var(--violet); }
button, a.go { display: inline-block; padding: .5rem 1rem; border: 1px solid var(--button); border-radius: 8px; cursor: pointer;
  background: var(--button); color: var(--bink); font: 600 .95rem/1.4 var(--serif); text-decoration: none; }
button:hover, a.go:hover { box-shadow: 0 0 0 2px var(--glow); }
button.quiet-button { display: inline; padding: 0; border: 0; background: none; color: var(--violet); font: inherit; text-decoration: underline;
  text-underline-offset: .2em; text-decoration-thickness: 1px; }
button.quiet-button:hover { box-shadow: none; }
.aside { color: var(--muted); font-size: .9rem; }

/* ---- the front page: the way in, then the town alive in columns on a wide screen */
.hero .lede { max-width: var(--measure); }
.ways { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.ways-in { display: grid; gap: 1rem; margin: 1.25rem 0; }
@media (min-width: 46rem) { .ways-in { grid-template-columns: 1fr 1fr; } }
.way { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--leaf); align-content: start; }
.way p { margin: .25rem 0 .75rem; }
.today { margin: 2rem 0; padding: 1.25rem 1.4rem .75rem; border: 1px solid var(--rule); border-radius: 12px;
  background: linear-gradient(170deg, var(--lamp), var(--leaf) 65%); box-shadow: 0 22px 48px -32px var(--shade); }
.today .paint { font-size: 1.4rem; margin-top: .4rem; }
.onward { margin: .25rem 0; font-size: .95rem; }
div.town { display: grid; gap: 1.5rem 2.5rem; }  /* div: a town's post on the feed is `.post.town`, never a grid */
@media (min-width: 46rem) { div.town { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.block { min-width: 0; }
ul.rows { list-style: none; margin: 0; padding: 0; }
ul.rows li { padding: .4rem 0; border-bottom: 1px dotted var(--rule); }
ul.rows .reading { display: block; color: var(--muted); font-size: .9rem; font-style: italic; }
.residents { color: var(--muted); }
.shelf { margin-top: 2.5rem; color: var(--muted); font: .8rem var(--mono); font-variant-numeric: tabular-nums; }
ul.list { padding-left: 1.2rem; }

/* ---- on demand: law, source, the journal; tickets are quiet rows, their fate a word and an icon */
details.more { margin: 0; padding: .5rem 0; border-top: 1px solid var(--rule); }
details.more:first-of-type { margin-top: 2rem; }
pre.listing { margin: .5rem 0; padding: .75rem 1rem; background: var(--leaf); border: 1px solid var(--rule); border-radius: 6px;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
pre.spell { margin: .75rem 0; padding: .6rem .9rem; background: var(--tint); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.slot { color: var(--muted); border-bottom: 1px dashed var(--muted); }
ol.receipts { list-style: none; padding: 0; margin: .5rem 0; }
.slip { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem; padding: .45rem 0; border-bottom: 1px dotted var(--rule);
  font-size: .9rem; }
.slip > * { min-width: 0; overflow-wrap: anywhere; }
.stamp { color: var(--silver); font: 600 .75rem/1.4 var(--mono); letter-spacing: .06em; white-space: nowrap; }
.slip.admitted .stamp { color: var(--sage); }
.slip.refused .stamp { color: var(--terracotta); }
.slip.suspended .stamp { color: var(--amber); }
.slip .name { font-variant: small-caps; letter-spacing: .06em; color: var(--ink); }
.slip .by { flex-basis: 100%; color: var(--muted); font: .75rem var(--mono); }
.slip .line { flex-basis: 100%; font: .85rem/1.5 var(--mono); white-space: pre-wrap; color: var(--ink); }
.slip .clause { flex-basis: 100%; color: var(--ink); }
.code { font: .75rem var(--mono); color: var(--silver); font-variant-numeric: tabular-nums; }
.codes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.yours { margin-left: .4em; color: var(--amber); font: 600 .78rem var(--mono); font-variant: small-caps; letter-spacing: .06em; }
.word { margin-left: .4em; color: var(--amber); font: .8rem var(--mono); }

/* ---- refusals and hints: never alarming, never hidden */
.refusal { padding: 1rem 1.1rem; background: var(--rtint); border-radius: 6px; }
.refusal .fate { margin: 0; color: var(--terracotta); font: .8rem var(--mono); letter-spacing: .08em; }
.hint { padding-left: .7rem; border-left: 2px solid var(--terracotta); color: var(--ink); }
.links a { margin-right: .75rem; }

/* ---- tables, definition lists (the catalogue, a reply as data) */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
td, th { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--muted); font: 600 .75rem var(--mono); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; font-size: .95rem; }
dt { color: var(--muted); font: .8rem var(--mono); }
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dd > dl, dd > ol { margin: .15rem 0 .35rem; padding-left: .75rem; border-left: 1px solid var(--rule); }

/* ---- the hand: doors are small link buttons, a slip's foot carries its links and its one form */
.door { display: inline-block; padding: .2rem .55rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--leaf);
  color: var(--violet); font: .8rem var(--mono); text-decoration: none; cursor: pointer; }
.door:hover { border-color: var(--violet); box-shadow: none; }
.doors.foot, p.doors:has(.door) { display: flex; flex-wrap: wrap; gap: .4rem; }
.slip .foot { flex-basis: 100%; font: .78rem/1.5 var(--mono); color: var(--muted); }
.slip .foot form, .slip form.foot { margin: .35rem 0 0; }
.slip details.line > summary { font: .8rem var(--mono); }
hr.root { border: 0; border-top: 6px solid var(--terracotta); margin: 1rem 0; }  /* the root page: a red rule across the top */

/* ---- the style specimen, and the frog (fwog-gpt6.delve.town): the colophon, and the quiet line's glyph */
.specimen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.specimen > div { min-width: 0; padding: 1rem; border: 1px solid var(--rule); border-radius: 6px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .4rem; padding: 0; list-style: none; font: .72rem var(--mono); }
.swatches li { display: flex; gap: .4rem; align-items: center; }
.swatches li::before { content: ""; width: 1.2rem; height: 1.2rem; border: 1px solid var(--rule); background: var(--c); flex: none; }
.frog { color: var(--sage); stroke-width: 1.2; }
.frog .bloom { color: var(--violet); }
.frog .vein { stroke-width: .6; }
.frog .eye { fill: currentColor; }
.frog .fill { fill: var(--paper); }
.frog.glyph { width: 1em; height: 1em; flex: none; align-self: center; color: var(--muted); stroke-width: 1.3; }
.colophon { display: flex; align-items: flex-end; gap: 1rem; margin: 1rem 0 1.5rem; color: var(--soft); font-style: italic; }
.colophon .frog { flex: none; width: 6rem; height: auto; }
.colophon p { margin: 0; }

@media (max-width: 34rem) {
  body { font-size: 17px; }
  h1 { font-size: 1.65rem; }
  .paint, .scene .paint, .today .paint { font-size: 1.2rem; }
  .scene, .today { padding-inline: 1rem; }
  pre.card { font-size: 12.5px; }
  dl { grid-template-columns: 1fr; }
}

/* The door map (pages.door_map): the page's width, its lines and labels in the text colour. */
figure.map { margin: 1rem 0; max-width: 100%; }
figure.map a:hover text { text-decoration: underline; }

/* The guest door (/enter): two small cards, one for a code, one for a key; the key a guest is shown once stands apart. */
form.door-in { margin: 1.25rem 0; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--leaf); }
form.door-in h2.eyebrow { margin: 0; }
form.door-in input { font-family: var(--mono); font-size: .95rem; }
label small { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.key { margin: 1.25rem 0; padding: 1rem 1.1rem; border: 1px solid var(--amber); border-radius: 10px; background: var(--lamp); }
pre.key { margin: .75rem 0; padding: .7rem .9rem; border: 1px dashed var(--amber); border-radius: 6px; background: var(--leaf);
  font: 600 .95rem/1.4 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }

/* The town's own feed (/feed): threads, each post who, when and what; the town's answers set apart, a reply indented. */
.threads { display: grid; gap: 1rem; margin-top: 1.5rem; }
.thread { padding: .25rem 0 .5rem; border-top: 1px solid var(--rule); }
article.post { margin: .5rem 0; }
article.post .meta { margin: 0; color: var(--muted); font: .8rem var(--sans); display: flex; flex-wrap: wrap; gap: .1rem .75rem; align-items: baseline; }
article.post .by { color: var(--ink); font-weight: 600; font-size: .9rem; }
article.post .said { white-space: pre-wrap; overflow-wrap: anywhere; margin: .2rem 0; }
article.post .acts { margin: 0; font: .8rem var(--sans); }
article.post.town { padding: .6rem .9rem; border-left: 3px solid var(--amber); background: var(--leaf); border-radius: 0 8px 8px 0; }
article.post.town .said { font: .88rem/1.5 var(--mono); }
article.post.just { outline: 2px solid var(--glow); outline-offset: 4px; border-radius: 4px; }
.replies { margin-left: clamp(.75rem, 4vw, 2rem); }
a.receipt { font-family: var(--mono); }
blockquote.under { margin: 0 0 .25rem; padding: .4rem .75rem; border-left: 2px solid var(--rule); color: var(--soft); font-size: .9rem; }

/* ---- a thing's own view (docs/VIEWS.md; transport/views.py): its tones are these classes and nothing else */
:root { --v-red: #c0392b; --v-orange: #d9731a; --v-yellow: #d8b41c; --v-green: #3f8f3a; --v-cyan: #1f9aa8; --v-blue: #2f63b8;
  --v-purple: #7a45b0; --v-magenta: #b83a8c; --v-white: #f7f3ea; --v-black: #1c1a17; --v-grey: #8a857c;
  --v-grass: #8fb860; --v-forest: #4f7a3a; --v-hills: #b49a5e; --v-mountain: #8c7f73; --v-water: #4a7fb5; --v-shallows: #86b6d6;
  --v-sand: #e2cf96; --v-snow: #eef1f4; --v-cave: #5b4e45; --v-village: #c98f5a; --v-castle: #a9a39a; --v-keep: #7f786e; --v-road: #cdb48a; }
.view { margin: .25rem 0 1.25rem; }
.view .v-stack { display: flex; flex-direction: column; gap: .5rem; }
.view .v-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.view .v-heading { margin: 0; font-size: 1.15rem; }
.view .v-text { margin: 0; white-space: pre-line; }
.view .z-small { font-size: .9rem; } .view .z-large { font-size: 2.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center; }
.view .v-act { display: inline; margin: 0; }
.view .v-button { min-width: 2.75rem; font-size: 1.15rem; }
.view .v-off { color: var(--muted); }
.view span.v-button.v-off { display: inline-block; padding: .5rem 1rem; border: 1px dashed var(--rule); border-radius: 8px; }
.view .v-ask { display: block; } .view .v-ask input { display: block; width: 100%; margin: .25rem 0 .5rem; font: inherit; padding: .4rem .5rem; }
.view .v-progress progress { width: min(16rem, 60%); vertical-align: middle; } .view .v-of { color: var(--muted); font: .85rem var(--sans); }
.view .v-table { border-collapse: collapse; font-size: .95rem; } .view .v-table th, .view .v-table td { padding: .2rem .6rem; border-bottom: 1px solid var(--rule); text-align: left; }
.view .v-rule { border: 0; border-top: 1px solid var(--rule); width: 100%; }
.view .v-image { max-width: 100%; height: auto; }
.view svg.v-board { display: block; width: 100%; max-width: 30rem; height: auto; }
.view svg.v-drawing { display: block; width: 100%; max-width: 30rem; height: auto; }
.view .v-ground { fill: var(--leaf); stroke: var(--rule); stroke-width: 1.2; }
.view .v-tile-label { fill: var(--ink); font: 11px var(--sans); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.view .v-disc { stroke: var(--paper); stroke-width: 1.5; }
.view a.v-acts { cursor: pointer; }
.view a.v-acts:hover .v-ground, .view a.v-acts:focus .v-ground { stroke: var(--glow); stroke-width: 2.5; }
.view a.v-acts:focus { outline: none; }
.view .v-shape { fill: none; stroke: none; } .view .v-shape-label { fill: var(--ink); font: 12px var(--sans); }
/* the tones (View.tones, transport/views.py TONES): words, fills, strokes */
.view .t-ink { color: var(--ink); } .view .t-soft { color: var(--soft); } .view .t-muted { color: var(--muted); } .view .t-paper { color: var(--paper); }
.view .t-leaf { color: var(--leaf); } .view .t-tint { color: var(--tint); } .view .t-rule { color: var(--rule); } .view .t-amber { color: var(--amber); }
.view .t-violet { color: var(--violet); } .view .t-silver { color: var(--silver); } .view .t-terracotta { color: var(--terracotta); } .view .t-sage { color: var(--sage); }
.view .t-glow { color: var(--glow); } .view .t-red { color: var(--v-red); } .view .t-orange { color: var(--v-orange); } .view .t-yellow { color: var(--v-yellow); }
.view .t-green { color: var(--v-green); } .view .t-cyan { color: var(--v-cyan); } .view .t-blue { color: var(--v-blue); } .view .t-purple { color: var(--v-purple); }
.view .t-magenta { color: var(--v-magenta); } .view .t-white { color: var(--v-white); } .view .t-black { color: var(--v-black); } .view .t-grey { color: var(--v-grey); }
.view .t-grass { color: var(--v-grass); } .view .t-forest { color: var(--v-forest); } .view .t-hills { color: var(--v-hills); } .view .t-mountain { color: var(--v-mountain); }
.view .t-water { color: var(--v-water); } .view .t-shallows { color: var(--v-shallows); } .view .t-sand { color: var(--v-sand); } .view .t-snow { color: var(--v-snow); }
.view .t-cave { color: var(--v-cave); } .view .t-village { color: var(--v-village); } .view .t-castle { color: var(--v-castle); } .view .t-keep { color: var(--v-keep); }
.view .t-road { color: var(--v-road); }
.view .f-ink { fill: var(--ink); } .view .f-soft { fill: var(--soft); } .view .f-muted { fill: var(--muted); } .view .f-paper { fill: var(--paper); }
.view .f-leaf { fill: var(--leaf); } .view .f-tint { fill: var(--tint); } .view .f-rule { fill: var(--rule); } .view .f-amber { fill: var(--amber); }
.view .f-violet { fill: var(--violet); } .view .f-silver { fill: var(--silver); } .view .f-terracotta { fill: var(--terracotta); } .view .f-sage { fill: var(--sage); }
.view .f-glow { fill: var(--glow); } .view .f-red { fill: var(--v-red); } .view .f-orange { fill: var(--v-orange); } .view .f-yellow { fill: var(--v-yellow); }
.view .f-green { fill: var(--v-green); } .view .f-cyan { fill: var(--v-cyan); } .view .f-blue { fill: var(--v-blue); } .view .f-purple { fill: var(--v-purple); }
.view .f-magenta { fill: var(--v-magenta); } .view .f-white { fill: var(--v-white); } .view .f-black { fill: var(--v-black); } .view .f-grey { fill: var(--v-grey); }
.view .f-grass { fill: var(--v-grass); } .view .f-forest { fill: var(--v-forest); } .view .f-hills { fill: var(--v-hills); } .view .f-mountain { fill: var(--v-mountain); }
.view .f-water { fill: var(--v-water); } .view .f-shallows { fill: var(--v-shallows); } .view .f-sand { fill: var(--v-sand); } .view .f-snow { fill: var(--v-snow); }
.view .f-cave { fill: var(--v-cave); } .view .f-village { fill: var(--v-village); } .view .f-castle { fill: var(--v-castle); } .view .f-keep { fill: var(--v-keep); }
.view .f-road { fill: var(--v-road); }
.view .s-ink { stroke: var(--ink); } .view .s-soft { stroke: var(--soft); } .view .s-muted { stroke: var(--muted); } .view .s-paper { stroke: var(--paper); }
.view .s-leaf { stroke: var(--leaf); } .view .s-tint { stroke: var(--tint); } .view .s-rule { stroke: var(--rule); } .view .s-amber { stroke: var(--amber); }
.view .s-violet { stroke: var(--violet); } .view .s-silver { stroke: var(--silver); } .view .s-terracotta { stroke: var(--terracotta); } .view .s-sage { stroke: var(--sage); }
.view .s-glow { stroke: var(--glow); } .view .s-red { stroke: var(--v-red); } .view .s-orange { stroke: var(--v-orange); } .view .s-yellow { stroke: var(--v-yellow); }
.view .s-green { stroke: var(--v-green); } .view .s-cyan { stroke: var(--v-cyan); } .view .s-blue { stroke: var(--v-blue); } .view .s-purple { stroke: var(--v-purple); }
.view .s-magenta { stroke: var(--v-magenta); } .view .s-white { stroke: var(--v-white); } .view .s-black { stroke: var(--v-black); } .view .s-grey { stroke: var(--v-grey); }
.view .s-grass { stroke: var(--v-grass); } .view .s-forest { stroke: var(--v-forest); } .view .s-hills { stroke: var(--v-hills); } .view .s-mountain { stroke: var(--v-mountain); }
.view .s-water { stroke: var(--v-water); } .view .s-shallows { stroke: var(--v-shallows); } .view .s-sand { stroke: var(--v-sand); } .view .s-snow { stroke: var(--v-snow); }
.view .s-cave { stroke: var(--v-cave); } .view .s-village { stroke: var(--v-village); } .view .s-castle { stroke: var(--v-castle); } .view .s-keep { stroke: var(--v-keep); }
.view .s-road { stroke: var(--v-road); }

/* ---- the town unfolded, an inspector, the library (transport/atlas.py; docs/WEB.md "The town at a glance"): the door graph in
   the text colours, rooms as quiet panels that unfold, Bend set in type with its keywords, strings and comments told apart
   by weight and the palette's own tokens */
.atlas-head .lede { max-width: 46rem; }
.atlas-links { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-family: var(--sans); }
.graph-wrap { margin: 1rem 0 1.5rem; }
.graph-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; background: linear-gradient(170deg, var(--lamp), var(--leaf) 70%);
  -webkit-overflow-scrolling: touch; }
svg.town-graph { display: block; width: 100%; min-width: 46rem; height: auto; font-family: var(--sans); }
svg.town-graph path.door { fill: none; stroke: var(--muted); stroke-opacity: .55; stroke-width: 1.3; }
svg.town-graph path.door.both { stroke: var(--soft); stroke-opacity: .7; marker-start: url(#arrow); }
svg.town-graph path.door:hover { stroke: var(--violet); stroke-opacity: 1; stroke-width: 2; }
svg.town-graph .arrowhead { fill: var(--muted); }
svg.town-graph a.node circle { fill: var(--paper); stroke: var(--soft); stroke-width: 1.5; }
svg.town-graph a.node.lit > circle { fill: var(--amber); stroke: var(--amber); }
svg.town-graph a.node text.nl { fill: var(--ink); font-size: 11.5px; text-anchor: middle; }
svg.town-graph a.node:hover text.nl, svg.town-graph a.node:focus text.nl { fill: var(--violet); text-decoration: underline; }
svg.town-graph a.node:focus { outline: none; }
svg.town-graph a.node.chosen > circle { stroke: var(--violet); stroke-width: 3; }
svg.town-graph g.count circle { stroke: var(--paper); stroke-width: 1.5; }
svg.town-graph g.count.who circle { fill: var(--sage); }
svg.town-graph g.count text { fill: var(--paper); font: 700 9.5px var(--sans); text-anchor: middle; }
section.rooms { display: grid; gap: .5rem; }
section.rooms > *, details.room .rbody > * { min-width: 0; }
details.room { border: 1px solid var(--rule); border-radius: 10px; background: var(--leaf); padding: 0 .9rem; scroll-margin-top: 1rem; transition: box-shadow .4s; }
details.room > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; padding: .6rem 0; width: auto; color: var(--ink); font-size: 1rem; }
details.room > summary::marker { color: var(--muted); }
details.room .rname { font-weight: 600; }
details.room .rsum { margin-left: auto; color: var(--muted); font: .8rem var(--sans); }
details.room.lit > summary .rname::before { content: "● "; color: var(--sage); font-size: .8em; }
details.room[open] { box-shadow: 0 14px 34px -26px var(--shade); }
details.room .rbody { padding-bottom: .5rem; border-top: 1px dotted var(--rule); }
details.room .lazy.loading::before { content: "unfolding…"; color: var(--muted); font-style: italic; font-size: .9rem; }
details.room .lazy .scene { margin-top: .75rem; }
details.room .lazy pre.card { max-height: 22rem; overflow: auto; }
.moved { box-shadow: 0 0 0 2px var(--glow) !important; }
.glance { display: grid; gap: 1rem 2.5rem; margin: .5rem 0 1rem; }
@media (min-width: 46rem) { .glance { grid-template-columns: 1fr 1fr; } }
.glance section { min-width: 0; }
.glance .ways { margin: .25rem 0 .5rem; }
.quiet-places { margin: 1.25rem 0; line-height: 1.9; }
.quiet-places .eyebrow { margin-right: .5rem; }
.quiet-places a { margin-right: .9rem; white-space: nowrap; }
details.room .rlast { flex-basis: 100%; color: var(--soft); font-size: .92rem; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.room .rlast b { font-style: normal; color: var(--ink); font-weight: 600; margin-right: .3rem; }
.around-now ul.rows li { padding: .25rem 0; }
details.room .books { margin: .25rem 0; font-size: .8rem; }
details.room p.ways { margin: .4rem 0 .2rem; font: .85rem var(--sans); gap: .4rem; }

/* the inspector */
.ins-head .facts { grid-template-columns: max-content 1fr; font-size: .9rem; margin: .75rem 0 1.25rem; }
.ins-head .facts a { font-family: var(--mono); font-size: .85rem; }
.ins-side > section, .ins-more > section { margin: 0 0 1.75rem; }
ul.verbs { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
li.verb { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .35rem 0; border-bottom: 1px dotted var(--rule); }
form.cast { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0; flex: 1 1 18rem; }
form.cast .vname { font: 600 .95rem var(--mono); color: var(--ink); }
form.cast .vfield { display: inline-flex; align-items: center; gap: .3rem; width: auto; flex: 1 1 9rem; font: .8rem var(--mono); }
form.cast code.vspell { font-size: .75rem; color: var(--soft); overflow-wrap: anywhere; }
form.cast .vact { margin-left: auto; white-space: nowrap; }
form.cast .vfield input, form.cast .vfield select { width: 100%; min-width: 5rem; padding: .2rem .45rem; font-size: .9rem; }
form.cast .vfield input[type=number] { min-width: 5rem; width: 6rem; }
form.cast button.cast-go { padding: .2rem .7rem; font-size: .85rem; }
form.cast.sending, form.ws.sending { opacity: .6; }
.grown { color: var(--amber); font: 600 .7rem var(--mono); font-variant: small-caps; letter-spacing: .06em; }
a.vline { font: .75rem var(--sans); color: var(--muted); }
.cast-reply { flex-basis: 100%; }
.cast-reply section.reply, .ws-reply section.reply { margin: .25rem 0 .5rem; padding: .5rem .75rem; border-left: 3px solid var(--amber); border-bottom: 0;
  background: var(--tint); border-radius: 0 8px 8px 0; font-size: .95rem; }
td.yes { color: var(--sage); white-space: nowrap; } td.no { color: var(--terracotta); } td.no .reading { display: block; color: var(--soft); font-size: .8rem; }
td.unknown { color: var(--muted); }
ul.clauses { list-style: none; margin: 0; padding: 0; }
li.clause { padding: .45rem 0; border-bottom: 1px dotted var(--rule); font-size: .92rem; }
li.clause .kw, ul.library .kw { color: var(--violet); font: 600 .75rem var(--mono); }
li.clause .reading { display: block; color: var(--soft); font-style: italic; }
li.clause code.expr { display: block; margin-top: .15rem; padding: .25rem .5rem; background: var(--leaf); font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
li.clause code.then::before { content: "then "; color: var(--muted); }
li.clause .by, li.clause .last { color: var(--muted); font: .78rem var(--sans); }
li.clause .last { display: block; }
dl.state-fields { grid-template-columns: max-content minmax(0, 1fr); font-size: .9rem; }
dl.state-fields dt { padding-top: .1rem; }
dl.state-fields .fempty { color: var(--muted); font-style: italic; font-size: .85rem; }
dl.state-fields .fnum { font: .9rem var(--mono); }
dl.state-fields dl.rec { margin: 0; font-size: .85rem; }
dl.state-fields ol.frows { margin: .25rem 0; padding-left: 1.25rem; }
dl.state-fields details { margin: 0; }
dl.state-fields .tag { color: var(--violet); font: .75rem var(--mono); }
details.bend { margin: .5rem 0 1rem; }
details.bend > summary { font: 600 .9rem var(--sans); color: var(--soft); }
nav.outline { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: .5rem 0; font: .78rem var(--mono); }
nav.outline details.odefs { flex-basis: 100%; margin: .15rem 0; }
nav.outline details.odefs[open] { display: flex; flex-wrap: wrap; gap: .25rem .5rem; max-height: 12rem; overflow: auto; }
nav.outline details.odefs > summary { font: .8rem var(--sans); flex-basis: 100%; }
nav.outline a { text-decoration: none; padding: .05rem .4rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--soft); background: var(--leaf); }
nav.outline a:hover { color: var(--violet); border-color: var(--violet); }
nav.outline .okw { color: var(--muted); }
pre.bend { margin: .5rem 0; padding: .6rem 0; background: var(--leaf); border: 1px solid var(--rule); border-radius: 6px; overflow: auto; max-height: 80vh;
  font: 12.5px/1.55 var(--mono); tab-size: 2; counter-reset: none; }
pre.bend .ln { display: block; padding-right: 1rem; white-space: pre; }
pre.bend .ln:target, pre.bend .ln:has(> i:target) { background: var(--lamp); box-shadow: inset 3px 0 var(--amber); }
pre.bend a.no { display: inline-block; width: 3.6em; padding-right: .9em; margin-right: .6em; text-align: right; color: var(--muted); opacity: .7;
  text-decoration: none; border-right: 1px solid var(--rule); user-select: none; }
pre.bend a.no:hover { color: var(--violet); opacity: 1; }
pre.bend i { font-style: normal; }
pre.bend .k { color: var(--violet); font-weight: 600; }
pre.bend .s { color: var(--sage); }
pre.bend .c { color: var(--muted); font-style: italic; }
pre.bend .n { color: var(--amber); }
pre.bend b.n { font-weight: 700; }
pre.bend a.mod { color: var(--violet); }
section.workshop form.ws { margin-top: .5rem; justify-items: stretch; }
section.workshop textarea.ws-text { font: 12.5px/1.5 var(--mono); white-space: pre; overflow: auto; tab-size: 2; }
section.workshop .acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem 1rem; margin: 0; }
section.workshop .ws-modes { display: inline-flex; gap: .75rem; margin-right: auto; font-size: .9rem; }
section.workshop .ws-modes .on { color: var(--ink); text-decoration: none; font-weight: 600; }
ol.diagnostics { margin: 0 0 .5rem; padding-left: 1.25rem; font: .85rem/1.5 var(--mono); }
ol.diagnostics a { font-weight: 600; }
ul.library li, ul.modules li, ul.kinds li { font-size: .98rem; }
pre.page-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }

/* ---- A wide screen (docs/WEB.md "A desktop"): from 68rem the frame widens and a page lays out in columns by its body's
   class. Nothing above this block changes, so a phone reads every page exactly as before. `wide`: the frame only (the
   catalogue). `place`: the place at a comfortable measure, its view the whole column, what is around it and what is
   happening elsewhere beside it. `home`: the way in beside today, then the town in three columns. `feed`: the threads
   beside the box. `surface`: the door map's text beside its drawing; a day's paint beside its exact text. `hand`: the
   owner's console, the frame. */
@media (min-width: 68rem) {
  body:is(.wide, .place, .feed, .surface, .hand) :is(header, main, footer) { max-width: calc(var(--frame) + 4rem); padding-inline: 2rem; }

  body.place main { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); grid-template-areas: "col side" "foot side";
    grid-template-rows: auto 1fr; column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
  body.place .col { grid-area: col; min-width: 0; }
  body.place .col-foot { grid-area: foot; min-width: 0; }
  body.place .col .paint { max-width: 34em; }
  body.place .col :is(form.say, .suggest, .wants, .ring, .spoken) { max-width: 46rem; }
  body.place .view :is(svg.v-board, svg.v-drawing) { max-width: 100%; max-height: 72vh; }
  body.place .side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 2rem; padding: .35rem 0 0 2rem;
    border-left: 1px solid var(--rule); }
  .side .around { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; }
  .side .around .here { display: contents; }
  .side .present { order: 1; } .side .things { order: 2; }
  .side figure.local { order: 3; margin-bottom: 1.75rem; }
  .side .around h2.eyebrow { order: 4; } .side ol.lines { order: 5; }
  .side .elsewhere[hidden] { display: flex; flex-direction: column; gap: 2rem; }
  .side ul.rows li { font-size: .95rem; }

  body.home main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "hero today" "town town" "shelf shelf";
    column-gap: 3.5rem; align-items: start; }
  body.home .hero { grid-area: hero; }
  body.home main:not(:has(> .today)) .hero { grid-column: 1 / -1; }
  body.home .today { grid-area: today; margin: .4rem 0 2.5rem; }
  body.home div.town { grid-area: town; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.home .shelf { grid-area: shelf; }

  body.feed main { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; grid-template-areas: "intro box" "threads box" "more box";
    grid-template-rows: auto auto 1fr; column-gap: 3.5rem; align-items: start; }
  body.feed .intro { grid-area: intro; } body.feed .intro .lede { max-width: 40rem; }
  body.feed .composer { grid-area: box; position: sticky; top: 1.25rem; padding-top: 1.6rem; }
  body.feed .composer form.say { margin-top: 0; }
  body.feed .composer textarea { min-height: 9rem; }
  body.feed .threads { grid-area: threads; margin-top: .5rem; }
  body.feed main > p { grid-area: more; }
  body.feed article.post .said { max-width: 46rem; }

  body.surface main:has(> figure.map) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
  body.surface main > h1 { grid-column: 1 / -1; }
  body.surface figure.map { margin: .25rem 0 0; position: sticky; top: 1.25rem; }
  body.surface .scene:has(> .paint) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 2.5rem; align-items: start; }
  body.surface .scene:has(> .paint) > pre.card { margin-top: 0; }

  /* the town unfolded: the drawing beside the rooms, kept in view; an inspector: its Bend beside what it is and does */
  body.atlas :is(header, main, footer) { max-width: calc(var(--frame) + 4rem); padding-inline: 2rem; }
  body.atlas .graph-wrap svg.town-graph { min-width: 0; max-height: 80vh; }
  body.atlas section.rooms { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); align-items: start; gap: .6rem .75rem; }
  body.atlas section.rooms > :is(details.room[open], h2) { grid-column: 1 / -1; }
  body.atlas details.room[open] .rbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 2rem; }
  body.atlas details.room[open] .rbody > :is(.now, .doors, .ways) { grid-column: 1; }
  body.atlas details.room[open] .rbody > .lazy { grid-column: 2; grid-row: 1 / span 6; }
  body.inspect main { display: grid; grid-template-columns: minmax(0, 1fr) 27rem; grid-template-areas: "head side" "src side" "src more" ". more";
    grid-template-rows: auto auto auto 1fr; column-gap: 2.5rem; align-items: start; }
  body.inspect .ins-head { grid-area: head; } body.inspect .ins-side { grid-area: side; }
  body.inspect .ins-src { grid-area: src; min-width: 0; } body.inspect .ins-more { grid-area: more; min-width: 0; }
  body.inspect .ins-side, body.inspect .ins-more { padding-left: 2rem; border-left: 1px solid var(--rule); }
  body.inspect pre.bend { max-height: 84vh; }
}