/* Measured public layout: https://memleket.lol/, 2026-10-12.
   Utilities are kept in their original layers; this boundary excludes legacy
   page rules from the reconstructed components while preserving SVG hooks. */
.reference-ui,
.reference-ui :where(*:not(.tr-map, .tr-map *, .district-map, .district-map *)) { all: revert-layer; }

html[data-theme] {
    color-scheme: light;
    --ink: var(--background); --ink-2: var(--muted);
    --surface: var(--card); --surface-2: var(--muted); --surface-3: var(--muted);
    --line: var(--border); --line-strong: #d4d4d8;
    --text: var(--foreground); --text-2: var(--muted-foreground); --text-3: #a1a1aa;
    --gold: var(--primary); --gold-2: #c90814; --text-accent: var(--primary);
    --gold-soft: rgb(227 10 23 / 8%); --gold-line: rgb(227 10 23 / 25%);
    --mint: #10b981; --accent-ink: #fff; --font: var(--font-sans); --mono: var(--font-mono);
    --wrap: 816px; --header-h: 64px;
    --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: var(--radius);
    --heat-0: #fed7d7; --heat-1: #fac5c9; --heat-2: #f6aab0; --heat-3: #f38f98;
    --heat-4: #ee7480; --heat-5: #ea5868; --heat-6: #e73b4f; --heat-7: #e30a17;
    --heat-8: #b50c20; --heat-9: #7f0d28; --map-line: #71717a;
}
html.dark[data-theme] { color-scheme: dark; --line-strong: #3f3f46; --text-3: #71717a; }
body.reference-layout {
    margin: 0; background: var(--background); color: var(--foreground);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
html:has(body.reference-layout), body.reference-layout { overflow-x: clip; overflow-y: visible; }
body.reference-layout #main { flex: 1; width: 100%; }
body.reference-layout .maker-badge[hidden] { display: none !important; }
.reference-ui .ico { flex-shrink: 0; }
.reference-ui .ico:not([class*="size-"]):not(.reference-search-icon) { width: 1em; height: 1em; }
.reference-ui a, .reference-ui button { -webkit-tap-highlight-color: transparent; }
.reference-ui [hidden] { display: none !important; }
.reference-ui a:focus-visible, .reference-ui button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.reference-search-icon { position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--muted-foreground); }

.reference-hub-tabs > button { border-color: transparent; color: var(--muted-foreground); }
.reference-hub-tabs > button.is-active { border-color: #dc2626; color: var(--foreground); font-weight: 900; }
.reference-tab-count { background: var(--muted); color: var(--muted-foreground); }
.reference-hub-tabs > button.is-active .reference-tab-count { background: rgb(220 38 38 / 10%); color: #dc2626; }
.reference-hub-sort > button { color: var(--muted-foreground); }
.reference-hub-sort > button.is-active { background: var(--foreground); color: var(--background); font-weight: 700; }
.reference-hub-sort > button.is-active svg { color: inherit; }
.reference-region-filter > button { background: color-mix(in srgb, var(--muted) 40%, transparent); color: var(--muted-foreground); border-color: transparent; }
.reference-region-filter > button.is-active { background: var(--muted); color: var(--foreground); border-color: color-mix(in srgb, var(--border) 80%, transparent); font-weight: 700; }
.reference-city-row { --row-color: #ef4444; --row-text: #dc2626; }
.reference-city-row[data-reference-tone="emerald"] { --row-color: #10b981; --row-text: #047857; }
.reference-city-row[data-reference-tone="orange"] { --row-color: #f97316; --row-text: #c2410c; }
.reference-city-row[data-reference-tone="amber"] { --row-color: #f59e0b; --row-text: #b45309; }
.reference-city-plate, .reference-city-vote { color: var(--row-text); background: color-mix(in srgb, var(--row-color) 15%, transparent); border-color: color-mix(in srgb, var(--row-color) 30%, transparent); }
.reference-city-vote svg { fill: currentColor; stroke: currentColor; }
.reference-city-vote:hover, .reference-city-vote.is-voted { background: color-mix(in srgb, var(--row-color) 25%, transparent); }
.reference-city-rank { color: var(--row-color); font-size: 14px; font-weight: 700; }
.reference-city-row[data-reference-tone="emerald"] .reference-city-rank { color: #059669; font-size: 18px; font-weight: 900; }
.reference-city-row[data-reference-tone="orange"] .reference-city-rank { color: #ea580c; font-size: 16px; font-weight: 800; }
.reference-city-row[data-reference-tone="amber"] .reference-city-rank { color: #d97706; font-size: 16px; font-weight: 800; }
.reference-city-bar { background: color-mix(in srgb, var(--row-color) 15%, transparent); }
.reference-city-bar > div { background: var(--row-color); }
.reference-city-row > div { background: color-mix(in srgb, var(--row-color) 10%, transparent); border-color: color-mix(in srgb, var(--row-color) 30%, transparent); }
.reference-city-row[data-reference-tone="red"] > div { background: color-mix(in srgb, #ef4444 4%, transparent); border-color: rgb(239 68 68 / 20%); }
.reference-directory-kind { color: var(--muted-foreground); border-color: transparent; }
.reference-directory-kind { white-space: nowrap; flex-shrink: 0; }
.reference-directory-kinds { overflow-x: auto; scrollbar-width: none; }
.reference-directory-kind.is-active { color: var(--foreground); border-color: #dc2626; font-weight: 900; }
.reference-directory-tabs a { color: var(--muted-foreground); }
.reference-directory-tabs a.is-active { color: var(--background); background: var(--foreground); font-weight: 700; }
.dark .reference-city-vote, .dark .reference-city-plate { color: color-mix(in srgb, var(--row-color) 60%, white); }

/* Reference SVG and badge metrics. SVG geometry stays in the existing renderer. */
#referenceMapStage .tr-map { display: block; width: 100%; height: auto; min-width: 0; max-width: 1140px; margin: 0 auto; overflow: visible; }
#referenceMapStage .tr-city path { stroke: #71717a; stroke-width: .8px; stroke-linejoin: round; paint-order: stroke fill; vector-effect: none; transition: opacity .12s ease, stroke .12s ease, stroke-width .12s ease; }
#referenceMapStage .tr-city:hover path { opacity: .75; }
#referenceMapStage .tr-city.is-active path { stroke: #27272a; stroke-width: 1.6px; }
#referenceMapStage .tr-city.is-voted path { stroke: #10b981; stroke-width: 2px; }
#referenceMapStage .map-reis-marker { pointer-events: none; filter: none; }
#referenceMapStage .map-reis-marker__halo { r: 24px; fill: #f59e0b; fill-opacity: .35; }
#referenceMapStage .map-reis-marker__ring { r: 16px; fill: #fff; stroke: #f59e0b; stroke-width: 2.5px; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 50%)); }
#referenceMapStage .map-reis-marker__face { r: 11px; fill: #fff; stroke: none; }
#referenceMapStage .map-reis-marker__image { x: -11px; y: -11px; width: 22px; height: 22px; clip-path: inset(0 round 9999px); }
#referenceMapStage .map-reis-marker__crown { fill: #f59e0b; stroke: #78350f; stroke-width: 1px; }
#referenceMapWrap:fullscreen { background: var(--card); display: flex; align-items: center; overflow: auto; }
#referenceMapWrap:fullscreen #referenceMapStage { min-width: 100%; }

/* Measured 272px floating city panel, shared by hover and touch. */
.reference-map-popover.reference-map-popover { position: fixed; width: 272px; max-width: calc(100vw - 32px); padding: 16px; border: 2px solid #fda4af; border-radius: 16px; background: var(--card); color: var(--foreground); box-shadow: 0 20px 40px rgb(0 0 0 / 18%); z-index: 80; font-size: 12px; line-height: 1.4; transition: left .12s cubic-bezier(.2,.8,.2,1), top .12s cubic-bezier(.2,.8,.2,1); }
.reference-popover-head { display: flex; align-items: center; gap: 8px; }
.reference-popover-head strong { font-size: 16px; font-weight: 800; flex: 1; min-width: 0; }
.reference-popover-plate { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #fda4af; border-radius: 50%; background: #fee2e2; color: #e30a17; font: 700 12px var(--font-mono); }
.reference-popover-rank { display: inline-flex; align-items: center; gap: 3px; background: #94a3b8; border-radius: 99px; color: #fff; padding: 3px 7px; font-size: 10px; font-weight: 700; }
.reference-popover-head button { border: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); cursor: pointer; }
.reference-map-popover .ico { width: 14px; height: 14px; flex-shrink: 0; }
.reference-popover-tagline { display: flex; gap: 6px; color: var(--muted-foreground); margin: 12px 0; }
.reference-popover-tagline svg { color: var(--primary); }
.reference-popover-votes { display: flex; align-items: center; gap: 6px; padding: 10px 0; border-block: 1px solid var(--border); color: var(--muted-foreground); }
.reference-popover-votes b { color: var(--foreground); font-size: 14px; }
.reference-popover-votes svg { color: var(--primary); fill: var(--primary); }
.reference-popover-votes > span { margin-left: auto; color: var(--primary); font-family: var(--font-mono); font-weight: 700; }
.reference-popover-vote, .reference-popover-visit, .reference-popover-take, .reference-popover-district { display: flex; width: 100%; justify-content: center; align-items: center; gap: 6px; border-radius: 14px; border: 1px solid transparent; padding: 8px 10px; cursor: pointer; font-size: 12px; font-weight: 700; text-decoration: none; }
.reference-popover-vote, .reference-popover-visit { background: var(--primary); color: #fff; }
.reference-popover-vote { margin-top: 12px; height: 36px; }
.reference-popover-owner { border: 1px solid #fda4af; border-radius: 14px; background: rgb(239 68 68 / 10%); padding: 10px; margin-top: 12px; }
.reference-popover-owner-head { display: flex; align-items: center; gap: 4px; color: var(--primary); font-size: 10px; font-weight: 800; }
.reference-popover-owner-head span { margin-left: auto; border: 1px solid var(--border); background: var(--muted); color: var(--foreground); border-radius: 5px; padding: 3px 8px; font: 400 12px var(--font-mono); }
.reference-popover-identity { display: flex; gap: 8px; margin: 8px 0 12px; min-width: 0; }
.reference-popover-identity > div { min-width: 0; flex: 1; }
.reference-popover-identity strong { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reference-popover-identity small { display: block; color: var(--muted-foreground); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reference-popover-owner > p { margin: 12px 0; color: var(--muted-foreground); }
.reference-popover-visit { height: 32px; }
.reference-popover-take { border-color: #fda4af; background: rgb(239 68 68 / 10%); color: var(--primary); margin-top: 6px; padding: 6px; border-radius: 12px; }
.reference-popover-district { margin-top: 12px; background: var(--muted); border-color: var(--border); color: var(--muted-foreground); height: 34px; }
.reference-map-popover [data-reference-popover]:not([hidden]) { animation: reference-popover-content-in .12s ease-out both; }
@keyframes reference-popover-content-in { from { opacity: .7; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.reference-map-popover[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    #referenceMapStage .tr-city path, .reference-map-popover.reference-map-popover { transition: none; }
    .reference-map-popover [data-reference-popover]:not([hidden]) { animation: none; }
}

/* Shared public pages use the same neutral surfaces and content width. */
.reference-layout .page-head { background: none; padding-top: 32px; padding-bottom: 24px; }
.reference-layout .page-head h1 { font-size: 30px; line-height: 1.25; font-weight: 900; letter-spacing: -.025em; }
.reference-layout .page-head p { font-size: 14px; }
.reference-layout .page-head .eyebrow { display: none; }
.reference-layout .btn { border-radius: 12px; box-shadow: none; }
.reference-layout .btn--gold { background: var(--primary); border-color: var(--primary); color: #fff; }
.reference-layout .modal { background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 25px 60px rgb(0 0 0 / 20%); }
.reference-layout .modal__head { background: none; }
.reference-layout .modal-backdrop { background: rgb(0 0 0 / 60%); backdrop-filter: blur(5px); }
.reference-layout .modal--reign[data-step="choice"] { width: 448px; max-width: calc(100vw - 32px); }
.reference-layout .modal--reign[data-step="reclaim"] { width: 448px; max-width: calc(100vw - 32px); }
.reference-layout .modal--reign[data-step="reclaim"] .steps { display: none; }
.reference-layout .modal--reign[data-step="choice"] .modal__head { padding: 20px; border-bottom: 0; gap: 12px; }
.reference-layout .modal--reign[data-step="choice"] .modal__body { padding: 0 20px 20px; }
.reference-layout .modal--reign[data-step="choice"] .steps,
.reference-layout .modal--reign[data-step="choice"] .modal__sub { display: none; }
.reference-layout .modal--reign[data-step="choice"] .modal__title { font-size: 18px; font-weight: 900; letter-spacing: -.025em; }
.reference-layout .modal--reign[data-step="choice"] .modal__close { width: 32px; height: 32px; border: 0; background: var(--muted); border-radius: 50%; }
.reference-layout .modal--reign[data-step="choice"] .modal__crown-badge { width: 40px; height: 40px; border-radius: 14px; border: 1px solid #fda4af; background: rgb(239 68 68 / 10%); }
.reference-layout .modal--reign[data-step="choice"] .modal__crown-badge svg { fill: var(--primary); }
.reference-checkout-owner { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: color-mix(in srgb, var(--muted) 40%, transparent); border: 1px solid var(--border); border-radius: 14px; font-size: 12px; color: var(--muted-foreground); margin-bottom: 16px; }
.reference-checkout-owner svg { width: 14px; height: 14px; color: var(--primary); }
.reference-checkout-owner > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reference-checkout-owner strong { color: var(--foreground); }
.reference-checkout-owner b { font: 400 12px var(--font-mono); color: var(--foreground); background: var(--muted); border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px; }
.reference-checkout-option { width: 100%; display: flex; align-items: center; gap: 12px; background: rgb(239 68 68 / 5%); border: 1px solid #fda4af; padding: 14px 16px; border-radius: 16px; margin-top: 8px; cursor: pointer; text-align: left; color: var(--foreground); }
.reference-checkout-option-icon { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: rgb(239 68 68 / 15%); color: var(--primary); font-size: 24px; }
.reference-checkout-option strong { display: block; font-size: 14px; font-weight: 700; }
.reference-checkout-option small { display: block; font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.reference-checkout-option > .ico { width: 14px; height: 14px; color: var(--muted-foreground); }
.reference-checkout-option--reclaim { background: rgb(245 158 11 / 10%); border-color: #fcd34d; }
.reference-checkout-option--reclaim .reference-checkout-option-icon { background: rgb(245 158 11 / 15%); color: #d97706; }
#reisChoiceHistoryCount { color: #d97706; font-size: 11px; font-weight: 600; white-space: nowrap; }
.reference-layout [data-district-map] { min-width: 600px; width: 100%; }
.reference-layout [data-district-explorer] {
    --district-0: #fce8e8;
    --district-1: #f7c7ca;
    --district-2: #ee9ca3;
    --district-3: #e66c78;
    --district-4: #d93646;
    --district-5: #86151f;
}
.reference-layout [data-district-map] .district-map { width: 100%; height: auto; max-height: 420px; display: block; }
.reference-layout [data-district-map-selection].is-empty { display: none; }
.reference-layout [data-district-map-selection] { padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: 0 5px 20px rgb(0 0 0 / 15%); }
.reference-layout [data-district-map-selection] .ico { width: 16px; height: 16px; }
.reference-layout [data-selection-reis] { display: flex; align-items: center; gap: 10px; padding-block: 12px; font-size: 12px; }
.reference-layout [data-selection-reis] img { width: 28px; height: 28px; object-fit: contain; }
.reference-layout [data-selection-reis] > div { flex: 1; }
.reference-layout [data-selection-reis] strong { display: block; }
.reference-layout [data-selection-reis] > b { margin-left: auto; font-family: var(--font-mono); }
.reference-layout .input, .reference-layout .textarea, .reference-layout .select { background: var(--card); border-color: var(--border); color: var(--foreground); border-radius: 12px; }
.reference-layout .feed-stack { display: none; }
@media (min-width: 768px) { .reference-layout .page-head h1 { font-size: 36px; } }
@media (max-width: 639px) {
    .reference-city-row .reference-city-rank { font-size: 14px; }
    .reference-city-row[data-reference-tone="emerald"] .reference-city-rank { font-size: 14px; }
    .reference-city-row[data-reference-tone="orange"] .reference-city-rank,
    .reference-city-row[data-reference-tone="amber"] .reference-city-rank { font-size: 14px; }
    .reference-ui .reference-hub-sort { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .reference-ui *, #referenceMapStage .tr-city path { animation-duration: .01ms; transition-duration: .01ms; } }