/* The town page's own styles (moved out of By.cshtml 14.08.2026 when the page grew an answer
   sentence, a trend chart, a kommune row and a lookup box - docs/MAKEOVER-BY.md). Design tokens
   come from gv.css and must not be redeclared ([claim: pages-inherit-design-tokens]). The strip
   chassis is css/strib.css and the map is css/omraadekort.css. */
.noegle div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; }
/* A key figure that is also a link. It keeps the tile's own look rather than turning blue: the
   affordance is the arrow in the label and the hover border, the same language the pulse pills on
   the front page use. */
.noegle a { display:block; background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:.7rem .9rem; text-decoration:none; color:inherit; }
th:first-child, td:first-child { text-align:left; }
td a { color:var(--accent); text-decoration:none; }

/* The answer sentence. Bigger than body text and quotable in one line on a phone - this is what
   the Googleren came for and what the Deleren pastes. */
.svar { font-size:1.06rem; line-height:1.5; margin:.2rem 0 1rem; }
.svar strong { font-weight:700; }

/* Kommune-level figures. Visually a step DOWN from .noegle on purpose: they are true of the
   kommune, not of this town, and they must not read as the town's own key figures. */
.komfakta { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.6rem; margin:.4rem 0 .2rem; }
.komfakta a { display:block; padding:.55rem .8rem; border:1px solid var(--line); border-radius:10px;
    background:transparent; text-decoration:none; color:inherit; }
.komfakta b { display:block; font-family:"Source Serif 4", Georgia, serif; font-weight:700;
    font-size:1.15rem; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.komfakta span { display:block; font-size:.78rem; color:var(--muted); margin-top:.1rem; }

/* Address lookup. Same shape as the front page's box so the gesture is familiar, without any of
   its script stack (wwwroot/js/byopslag.js owns why). */
.opslagboks { position:relative; max-width:32rem; }
.opslagboks input { width:100%; padding:.75rem .95rem; font:inherit; font-size:1rem;
    border:2px solid var(--fg); border-radius:12px; background:var(--card); color:inherit; }
.opslagres { position:absolute; left:0; right:0; top:100%; z-index:30; margin-top:.3rem;
    background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden auto;
    max-height:min(50vh,22rem); box-shadow:var(--skygge); }
.opslagrad { display:block; padding:.55rem .85rem; text-decoration:none; color:var(--fg);
    border-bottom:1px solid var(--line); font-size:.95rem; }
.opslagrad:last-child { border-bottom:0; }

@media (hover:hover) {
    .noegle a:hover, .komfakta a:hover { border-color:var(--accent); }
    .opslagrad:hover { background:var(--accentbg); }
}