/* tokeilab shared stylesheet (static pages and Worker-rendered town pages) */
:root {
  --fg: #1d232b; --muted: #5b6673; --bg: #ffffff; --line: #d9dee4; --accent: #b4540a; --bar: #e0912f; --code: #f3f5f7;
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #e6e9ed; --muted: #9aa4af; --bg: #14181d; --line: #2c333b; --accent: #f0a050; --bar: #d98a2b; --code: #1e242b; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif; }
header.site, main, footer.site { max-width: 960px; margin: 0 auto; padding: 12px 16px; }
header.site { border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
header.site a { color: inherit; }
header.site .lang { float: right; }
h1 { font-size: 1.6rem; line-height: 1.3; margin: 1.2rem 0 .6rem; }
h2 { font-size: 1.15rem; margin: 1.8rem 0 .6rem; }
a { color: var(--accent); }
p.note, .note { color: var(--muted); font-size: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.stats th { width: 60%; font-weight: normal; color: var(--muted); }
.scroll { overflow-x: auto; }
figure.hist { margin: 1rem 0; max-width: 480px; }
figure.hist svg { width: 100%; height: auto; }
figure.hist rect { fill: var(--bar); }
figure.hist line { stroke: var(--muted); }
figure.hist text { fill: var(--muted); font-size: 10px; text-anchor: middle; }
figure.hist figcaption { font-size: 13px; color: var(--muted); }
.charts { display: flex; flex-wrap: wrap; gap: 16px; }
.charts figure { flex: 1 1 300px; }
ol.ids { columns: 2; font-size: 13px; }
code { background: var(--code); padding: 0 4px; border-radius: 3px; font-size: 13px; }
pre { background: var(--code); padding: 12px; overflow-x: auto; font-size: 13px; }
button { font: inherit; padding: 6px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--code); color: var(--fg); cursor: pointer; }
footer.site { border-top: 1px solid var(--line); margin-top: 2rem; font-size: 13px; color: var(--muted); }
footer.site h2 { font-size: 14px; margin: .6rem 0; }
@media (max-width: 600px) { ol.ids { columns: 1; } h1 { font-size: 1.35rem; } }
/* sunlight: explanations, search, map, building */
p.lead { font-size: 1.02rem; }
.notice { border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--code); padding: 4px 12px; margin: 1rem 0; font-size: 14px; }
details.howto { border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; margin: 1rem 0; font-size: 14px; }
details.howto summary { cursor: pointer; font-weight: 600; }
details.howto ul { margin: .4rem 0; padding-left: 1.2rem; }
.search-box h2 { margin-top: 1.2rem; }
.town-search { position: relative; max-width: 560px; }
input[type=search] { font: inherit; width: 100%; max-width: 560px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
.town-search ul.results { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; max-height: 360px; overflow-y: auto; }
.town-search ul.results li { padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 15px; }
.town-search ul.results li:last-child { border-bottom: 0; }
input.table-filter { margin: 0 0 8px; }
th.sort { cursor: pointer; }
table.sortable td:first-child { white-space: nowrap; }
table.sortable th.num { min-width: 5.5em; }
th.sort[data-dir=desc]::after { content: " ▼"; font-size: 10px; }
th.sort[data-dir=asc]::after { content: " ▲"; font-size: 10px; }
.map { height: 460px; border: 1px solid var(--line); border-radius: 6px; margin: 1rem 0 .4rem; }
.legend { font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin: 0 3px 0 10px; vertical-align: -1px; border: 1px solid #333; }
.legend .c0 { background: #3b5b92; } .legend .c1 { background: #7fa7d1; } .legend .c2 { background: #f2b544; } .legend .c3 { background: #e2711d; } .legend .cn { background: #9aa0a6; }
table.faces td .note { font-size: 12px; font-weight: normal; }
figure.hist text.unit { text-anchor: end; }
select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
ul.contents li { margin-bottom: .6rem; }
@media (max-width: 600px) { .map { height: 380px; } }
figure.footprint { margin: .6rem 0; max-width: 360px; }
figure.footprint svg { width: 100%; height: auto; background: var(--code); border-radius: 6px; }
svg.footprint .fp { fill: var(--bg); stroke: var(--muted); stroke-width: 1; }
svg.footprint .face { stroke-width: 6; stroke-linecap: round; }
svg.footprint .face.short { stroke-width: 3; }
svg.footprint .shared { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 3; }
svg.footprint text.no { font-size: 12px; font-weight: 700; fill: var(--fg); text-anchor: middle; }
svg.footprint text.no.short { font-size: 10px; font-weight: 400; fill: var(--muted); }
svg.footprint text.north { font-size: 12px; fill: var(--muted); text-anchor: middle; }
svg.footprint .north-arrow { stroke: var(--muted); stroke-width: 1.5; }
details.small-faces { margin: .6rem 0; font-size: 14px; }
details.small-faces summary { cursor: pointer; color: var(--muted); }
footer.site p.tech { font-size: 12px; }