/* The Register, Add a country and the chart in the folio (the Register, AddCountry and Chart boards, group 8C, 2026-10-05).
   Their dress (17-stats and 17d-worldmap) went with the deck log's sheets on 1 Oct. */

/* ---- the Register ---- */
.rg-page.active { min-height: 100vh; min-height: 100dvh; background: var(--fo-paper); color: var(--fo-ink); font-family: var(--fo-sans); }
.rg-page .stats-scroll { padding-bottom: 0; }
.rg-page .stats-bar { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; box-sizing: content-box; height: 44px; padding: env(safe-area-inset-top, 0px) var(--fo-gutter) 0; border-bottom: 1px dashed var(--fo-hair); background: var(--fo-paper); }
.rg-page .stats-back, .rg-page .stats-share { min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.rg-page .stats-back { justify-self: start; }
.rg-page .stats-share { justify-self: end; color: var(--fo-pale); }   /* sharing is being rebuilt: the word is there, pale */
.rg-page .stats-title { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.rg-page .stats-head { display: flex; flex-direction: column; gap: 12px; padding: 30px var(--fo-gutter) 24px; text-align: center; }
.rg-page .stats-head h1 { margin: 0; font-family: var(--fo-serif); font-weight: 400; font-size: 24px; letter-spacing: -0.035em; line-height: 1; }
.rg-page .stats-head p { margin: 0; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.rg-page .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 var(--fo-gutter); border-top: 1px solid var(--fo-ink); border-bottom: 1px solid var(--fo-ink); }
.rg-page .stats-cell { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px 0; }
.rg-page .stats-cell:nth-child(even) { padding-left: 20px; padding-right: 0; border-left: 1px dashed var(--fo-hair); }
.rg-page .stats-cell:nth-child(-n+2) { border-bottom: 1px dashed var(--fo-hair); }
.rg-page .stats-figure { font-family: var(--fo-serif); font-size: 24px; letter-spacing: -0.03em; line-height: 1; }
.rg-page .stats-label { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.rg-page .stats-note { font-size: 12px; line-height: 1.4; color: var(--fo-graphite); }
/* the plates, the band and the paper by turns */
.rg-page .stats-plate { padding: 28px var(--fo-gutter) 30px; }
.rg-page .stats-plate:nth-of-type(odd) { background: #EFEEE9; }
.rg-page .stats-grid + .stats-plate { margin-top: 28px; }
.rg-page .stats-plate-rule { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px dashed var(--fo-hair); }
.rg-page .stats-plate-name { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.rg-page .stats-plate-n { color: var(--fo-pale); }
.rg-page .stats-plate-action { position: relative; padding: 0; border: none; background: none; font: inherit; font-size: 12px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rg-page .stats-plate-action::after { content: ''; position: absolute; left: -6px; right: -6px; top: -14px; bottom: -14px; }
.rg-page .reg-map-wrap svg { display: block; width: 100%; height: auto; }
.rg-page .reg-map-wrap path { fill: #FDFCFA; stroke: #D9D7D0; stroke-width: 0.4; }
.rg-page .reg-map-wrap path.is-visited { fill: var(--fo-ink); stroke: #FDFCFA; stroke-width: 0.6; }
.rg-page .reg-map-wrap path.is-speck { stroke-width: 6; stroke-linejoin: round; }
.rg-page .stats-quiet, .rg-page .stats-caption { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.rg-page .stats-caption.is-lede { margin: 0 0 8px; font-size: 14px; color: var(--fo-ink); }
.rg-page .stats-marks { display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 3px; }
.rg-page .stats-mark { display: block; aspect-ratio: 1; box-sizing: border-box; border: 1px solid #D6D5D0; }
.rg-page .stats-mark.is-inked { border-color: var(--fo-ink); background: var(--fo-ink); }
.rg-page .stats-manual { padding: 0; border: none; background: none; font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.rg-page .stats-row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--fo-hair); }
.rg-page .stats-row-name { font-family: var(--fo-serif); font-size: 16px; letter-spacing: -0.01em; }
.rg-page .stats-row-meta { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.rg-page .stats-row-count { font-family: var(--fo-serif); font-size: 16px; }
.rg-page .stats-write { position: relative; padding: 0; border: none; background: none; font: inherit; font-size: 12px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rg-page .stats-write::after { content: ''; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px; }
.rg-page .stats-year { display: grid; grid-template-columns: 36px 1fr 64px; align-items: center; gap: 12px; padding: 8px 0; }
.rg-page .stats-year-n { font-family: var(--fo-serif); font-size: 16px; }
.rg-page .stats-year-bar { height: 6px; }
.rg-page .stats-year-bar i { display: block; height: 6px; background: var(--fo-ink); }
.rg-page .stats-year-d { text-align: right; font-size: 12px; color: var(--fo-graphite); }
.rg-page .stats-extreme { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--fo-hair); }
.rg-page .stats-extreme-n { font-family: var(--fo-serif); font-size: 16px; letter-spacing: -0.02em; line-height: 1.1; }
.rg-page .stats-extreme-t { display: flex; flex-direction: column; gap: 3px; }
.rg-page .stats-extreme-t b { font-size: 14px; font-weight: 500; }
.rg-page .stats-extreme-w { font-family: var(--fo-serif); font-style: italic; font-size: 14px; line-height: 1.35; color: var(--fo-graphite); }
.rg-page .stats-foot { display: flex; flex-direction: column; gap: 10px; padding: 28px var(--fo-gutter) calc(env(safe-area-inset-bottom, 0px) + 40px); background: #EFEEE9; text-align: center; }
.rg-page .stats-foot p { margin: 0; font-family: var(--fo-serif); font-size: 12px; line-height: 1.35; }
.rg-page .stats-foot b { font-weight: 400; font-style: italic; }
.rg-page .stats-imprint { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--fo-hair); display: flex; flex-direction: column; gap: 6px; }
.rg-page .stats-imprint-name { font-family: var(--fo-serif); font-size: 16px; }
.rg-page .stats-imprint-name i { color: var(--fo-graphite); }   /* the wordmark, as the board sets it */
.rg-page .stats-imprint-line { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.rg-page .rg-waiting { display: flex; flex-direction: column; }
.rg-page .rg-waiting__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 var(--fo-gutter); border-top: 1px solid var(--fo-ink); border-bottom: 1px solid var(--fo-ink); }
.rg-page .rg-waiting__grid i { height: 96px; margin: 10px 0; background: #EFEEE9; }
.rg-page .rg-waiting__grid i:nth-child(odd) { margin-right: 12px; }
.rg-page .rg-waiting__grid i:nth-child(even) { margin-left: 12px; }
.rg-page .rg-waiting__plate { display: block; height: 200px; margin-top: 28px; background: #EFEEE9; }
.rg-page .rg-waiting:not(.is-failed) i { animation: rg-breathe 1.6s ease-in-out infinite alternate; }
.rg-page .rg-waiting-word { margin: 16px var(--fo-gutter) 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--fo-serif); font-style: italic; font-size: 16px; }
.rg-page .rg-waiting-word span, .rg-page .rg-waiting-word.is-late { font-family: var(--fo-sans); font-style: normal; font-size: 12px; color: var(--fo-graphite); }
.rg-page .rg-waiting.is-late .rg-waiting-word.is-soon, .rg-page .rg-waiting:not(.is-late) .rg-waiting-word.is-late { display: none; }
.rg-page .rg-again { padding: 0; border: none; border-bottom: 1px solid currentColor; background: none; font: inherit; color: var(--fo-ink); cursor: pointer; }
@keyframes rg-breathe { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .rg-page .rg-waiting i { animation: none; } }
.rg-page .stats-loading { margin: 60px var(--fo-gutter) 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--fo-serif); font-style: italic; font-size: 16px; text-align: center; }
.rg-page .stats-loading span { font-family: var(--fo-sans); font-style: normal; font-size: 12px; color: var(--fo-graphite); }
/* empty */
.rg-page .rg-none { margin: 0 var(--fo-gutter) 36px; display: flex; flex-direction: column; gap: 12px; }
.rg-page .rg-none__plate { position: relative; padding: 14px 0 12px; background: #EFEEE9; }
.rg-page .rg-none__plate svg { display: block; width: 100%; height: auto; }
.rg-page .rg-none__plate path { fill: #FDFCFA; stroke: #D9D7D0; stroke-width: 0.4; }
.rg-page .rg-none__plate > span { position: absolute; left: 10px; bottom: 10px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-pale); }
.rg-page .rg-none__say { margin: 4px 0 0; font-family: var(--fo-serif); font-style: italic; font-size: 16px; line-height: 1.35; }
.rg-page .rg-none__line { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.rg-page .rg-btn { align-self: flex-start; height: 44px; padding: 0 18px; border: none; background: var(--fo-ink); font: inherit; font-size: 14px; font-weight: 500; color: #FDFCFA; cursor: pointer; }
.rg-page :focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
.rg-page .stats-back:focus-visible, .rg-page .stats-share:focus-visible { outline-offset: -4px; }

/* ---- Add a country: a sheet from the foot (put on <body>) ---- */
.ac { position: fixed; inset: 0; z-index: 800; display: none; background: rgba(26,22,20,0.42); font-family: var(--fo-sans); color: var(--fo-ink); }
.ac.is-open { display: block; }
.ac .ac-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 48px); display: flex; flex-direction: column; overflow: hidden; border-radius: 20px 20px 0 0; background: var(--fo-paper); }
.ac .ac-handle { align-self: center; width: 36px; height: 4px; margin-top: 10px; border-radius: 9999px; background: var(--fo-rule); }
.ac .ac-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 48px; padding: 0 var(--fo-gutter); border-bottom: 1px dashed var(--fo-hair); }
.ac .ac-cancel { justify-self: start; min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.ac .ac-title { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.ac .ac-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px var(--fo-gutter) 12px; display: flex; flex-direction: column; gap: 10px; }
.ac .ac-body > * { flex-shrink: 0; }   /* with the keyboard up the body scrolls; nothing in it is squeezed (owner, 2026-10-05: 行高会变小) */
.ac .ac-intro { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.ac .ac-label { margin-top: 6px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.ac .ac-input { height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--fo-rule); border-radius: 0; background: var(--fo-card); outline: none; font-family: var(--fo-sans); font-size: 16px; color: var(--fo-ink); -webkit-appearance: none; appearance: none; }
.ac .ac-input::placeholder { color: var(--fo-pale); }
.ac .ac-input:focus { border-color: var(--fo-ink); }
.ac .ac-yr { width: 120px; -moz-appearance: textfield; }
.ac .ac-yr::-webkit-outer-spin-button, .ac .ac-yr::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }   /* no stepping through years one at a time */
.ac .ac-list:empty { display: none; }
.ac .ac-list { margin-top: -10px; display: flex; flex-direction: column; border: 1px solid var(--fo-rule); border-top: none; background: var(--fo-card); }
.ac .ac-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; font: inherit; font-size: 14px; color: var(--fo-ink); text-align: left; cursor: pointer; }
.ac .ac-row:last-child { border-bottom: none; }
.ac .ac-row-tag { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.ac .ac-empty { padding: 12px; font-family: var(--fo-serif); font-style: italic; font-size: 14px; }
.ac .ac-year { display: flex; flex-direction: column; gap: 10px; }
/* While the answers are under the box, only the box and its answers (the board's typing state): the keyboard leaves no room for the rest. */
.ac .ac-body:has(.ac-list:not(:empty)) .ac-intro, .ac .ac-body:has(.ac-list:not(:empty)) .ac-year { display: none; }
.ac .ac-help { font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.ac .ac-foot { padding: 10px var(--fo-gutter) max(calc(env(safe-area-inset-bottom, 0px) + 8px), 34px); }
.ac .ac-go { width: 100%; height: 52px; border: none; background: var(--fo-ink); font-family: var(--fo-sans); font-size: 16px; font-weight: 500; color: #FDFCFA; cursor: pointer; }
.ac .ac-go[disabled] { background: var(--fo-rule); color: var(--fo-pale); cursor: default; }
.ac :focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
.ac .ac-cancel:focus-visible, .ac .ac-row:focus-visible { outline-offset: -2px; }
.ac .ac-input:focus-visible { outline: none; }   /* the ink border is the focus; a ring as well drew every box twice (owner, 2026-10-05) */

/* ---- the chart ---- */
.wm-page.active { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--fo-paper); color: var(--fo-ink); font-family: var(--fo-sans); }
.wm-page .wm-bar { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; box-sizing: content-box; height: 44px; padding: env(safe-area-inset-top, 0px) var(--fo-gutter) 0; border-bottom: 1px dashed var(--fo-hair); }
.wm-page .wm-back { justify-self: start; min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.wm-page .wm-title { margin: 0; font-family: var(--fo-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.wm-page .wm-acts { justify-self: end; display: flex; gap: 18px; }
.wm-page .wm-act { position: relative; min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.wm-page .wm-act.is-way { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wm-page .wm-count.is-world { flex: none; margin: 10px var(--fo-gutter) 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.wm-page .wm-count.is-world:empty { display: none; }
.wm-page .wm-plate { position: relative; flex: 1; min-height: 0; }
.wm-page .wm-map { position: absolute; inset: 0; background: #EFEEE9; }
.wm-page .wm-card { position: absolute; left: var(--fo-gutter); right: var(--fo-gutter); bottom: max(calc(env(safe-area-inset-bottom, 0px) + 8px), 22px); z-index: 2; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--fo-rule); background: rgba(253,252,250,0.96); display: flex; flex-direction: column; gap: 4px; }
.wm-page .wm-card[hidden] { display: none; }
.wm-page .wm-card__say { font-family: var(--fo-serif); font-size: 16px; }
.wm-page .wm-card__line { font-size: 12px; line-height: 1.4; color: var(--fo-graphite); }
.wm-page .wm-pick { border-style: dashed; border-color: rgba(26,22,20,0.28); padding: 12px 14px 4px; gap: 0; max-height: 50%; overflow-y: auto; }
.wm-page .wm-pick__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--fo-hair); }
.wm-page .wm-pick__name { font-family: var(--fo-serif); font-size: 16px; }
.wm-page .wm-pick__sub { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.wm-page .wm-pick__row { width: 100%; min-height: 48px; padding: 8px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: none; border-bottom: 1px dashed var(--fo-hair); background: none; font: inherit; color: var(--fo-ink); text-align: left; cursor: pointer; }
.wm-page .wm-pick__row:last-child { border-bottom: none; }
.wm-page .wm-pick__trip { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.wm-page .wm-pick__line { font-size: 12px; color: var(--fo-graphite); }
.wm-page .wm-pick__chev { color: var(--fo-pale); font-size: 16px; }
.wm-page .wm-label { font-family: var(--fo-mono) !important; letter-spacing: 0.12em; transform: translateX(calc(50% + 4px)); text-shadow: 0 0 2px #FDFCFA, 0 0 2px #FDFCFA; }
.wm-page .wm-quiet { margin: 40px var(--fo-gutter) 0; font-family: var(--fo-serif); font-style: italic; font-size: 16px; display: flex; flex-direction: column; gap: 6px; }
.wm-page .wm-quiet span { font-family: var(--fo-sans); font-style: normal; font-size: 12px; color: var(--fo-graphite); }
.wm-page .wm-quiet .wm-act { min-height: 0; font-size: 12px; text-decoration: underline; }
/* the whole world, as a sheet: turned on a tall plate, with its papers and Download turned with it (owner, 2026-09-07,
   kept 2026-10-05) */
.wm-page .wm-world { position: absolute; inset: 12px var(--fo-gutter) max(calc(env(safe-area-inset-bottom, 0px) + 8px), 16px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wm-page .wm-turned { position: relative; flex: none; display: flex; flex-direction: column; gap: 10px; }
.wm-page .wm-turned.is-turned { transform: rotate(90deg); }
.wm-page .wm-turned svg { display: block; box-shadow: 0 1px 0 var(--fo-rule), 0 6px 18px rgba(26,22,20,0.08); }
.wm-page .wm-words { height: 30px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wm-page .wm-papers { display: flex; gap: 4px; }
.wm-page .wm-paper { position: relative; height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--fo-rule); background: transparent; font: inherit; font-size: 12px; font-weight: 500; color: var(--fo-ink); cursor: pointer; }
.wm-page .wm-paper.is-on { border-color: var(--fo-ink); background: var(--fo-ink); color: #FDFCFA; }
.wm-page .wm-paper.is-act { border-color: var(--fo-ink); background: var(--fo-ink); color: #FDFCFA; }
.wm-page .wm-swatch { width: 9px; height: 9px; box-sizing: border-box; border: 1px solid var(--fo-pale); }
.wm-page .wm-swatch.is-stock { background: #F2EEE6; }
.wm-page .wm-swatch.is-oilskin { background: #201E1B; }
.wm-page .wm-swatch.is-atlas { background: #DCE4E8; }
.wm-page :focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
.wm-page .wm-back:focus-visible, .wm-page .wm-act:focus-visible, .wm-page .wm-pick__row:focus-visible { outline-offset: -2px; }