/* 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. 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;
}
@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); }
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; }
.town { display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 46rem) { .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; }