/* The kommun pages about ongoing detaljplaner (/planer/). Builds on site.css and r.css. */
.pl { max-width: 1200px; margin: 0 auto; gap: clamp(48px, 6vw, 80px); padding-top: 24px; }
.pl-crumbs { color: var(--muted); }
.pl-crumbs a { color: var(--ink); }
.pl .page-head h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.pl-h-small { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

.pl-search { background: var(--field); color: var(--field-ink); padding: clamp(24px, 4vw, 44px); display: grid; gap: 14px; }
.pl-search h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
.pl-search p { max-width: 56ch; color: var(--field-muted); }
.pl-search .search { margin-top: 6px; }
.pl-search input { border-color: var(--field-ink); }
.pl-search .btn { background: var(--field-ink); color: var(--field); }
.pl-search .btn:hover { background: color-mix(in srgb, var(--field-ink) 85%, var(--field)); }
.pl-search :focus-visible { outline-color: var(--field-ink); }

.rp-mapblock h2 { margin-bottom: 8px; }
.pl-groups { display: grid; gap: 40px; }
.pl-group { display: grid; gap: 8px; }
.pl-group h3 { display: flex; align-items: baseline; gap: 12px; }
.pl-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 4px; margin-top: 6px; }
.pl-list li { background: var(--surface); padding: 12px 16px 14px; display: grid; gap: 6px; align-content: start; border-left: 6px solid var(--warn-mid); }
.pl-name { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.pl-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--step-small); color: var(--muted); }
.pl-meta a { color: var(--ink); }
.pl-show { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); min-height: 24px; }
.pl-show:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 34 kommuner in columns, not one narrow list beside an empty half (audit 9 Nov) */
.pl-kommuner { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 40px; }
.pl-kommuner a { grid-template-columns: minmax(0, 1fr) auto; }
.pl-count { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-note { max-width: 68ch; }
.pl-note h2 { margin-top: 0; }

/* Plan pages (/planer/<kommun>/<plan>.html) and area pages (/omraden/). */
.pl-name a { color: inherit; }
.pl-steps { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; counter-reset: s; }
.pl-steps li { counter-increment: s; background: var(--surface); padding: 10px 12px; font-size: var(--step-small); display: grid; gap: 2px; color: var(--muted); }
.pl-steps li::before { content: counter(s); font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.pl-steps li.done { color: var(--ink); }
.pl-steps li.now { background: var(--ink); color: var(--paper); font-weight: 600; }
.pl-steps li span { font-weight: 400; }
@media (max-width: 640px) { .pl-steps { grid-template-columns: 1fr; } .pl-steps li { grid-template-columns: 2rem 1fr; align-items: baseline; } .pl-steps li span { grid-column: 2; } }
.pl-stage { display: grid; gap: 8px; max-width: 72ch; }
.pl-areas { display: flex; flex-wrap: wrap; gap: 8px 16px; line-height: 1.5; }
.pl-links { margin-top: 12px; }

/* Veckans planer (/veckans-planer/) and the sign-up for the weekly email on the plan pages. */
.pl-news li { border-left-color: var(--accent); }
.pl-weeknav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pl-signup .signup { display: grid; gap: 12px; margin-top: 6px; }
.signup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.signup-row input, .signup-row select { border: 2px solid var(--field-ink); border-right: 0; }
.signup-row select { font: inherit; padding: 0 12px; background: var(--paper); color: var(--ink); min-height: 56px; max-width: 14rem; }
.signup-msg:empty { display: none; }
.signup-msg { color: var(--field-ink); font-weight: 600; }
@media (max-width: 640px) {
  .signup-row { grid-template-columns: 1fr; gap: 8px; }
  .signup-row input, .signup-row select { border-right: 2px solid var(--field-ink); max-width: none; }
  .signup-row .btn { width: 100%; }
}