/* OPENCITY | app.css
   The visual language is taken from ok19kbely.cz -- palette, typefaces and the
   asymmetric corner. What is borrowed is the craft; the identity is not. There is
   no wordmark, no slogan and no ballot number here, because this is software a
   radnice of any politics has to be able to buy and put its own name on.

   Three things carry the whole design and none of them may be dropped:
     - the corner. Top-left rounded, bottom-right rounded much larger, the other
       two square. Without it the palette alone produces teal-coloured Bootstrap.
     - the type. Montserrat for anything that names something, Source Sans 3 for
       anything anyone reads. Both self-hosted, latin AND latin-ext.
     - buttons are the exception to the corner and are fully round, gold.

   Per-tenant theming still lands as a value on --teal and --navy, changed here.
   Budget: this file plus the markup is the first paint (X8). Keep it small. */

/* -- type --------------------------------------------------------------------
   Self-hosted, from /vendor/ rather than /css/ for the same reason Leaflet is:
   a font host sees every visitor's IP on every pageview and this app carries a
   notice naming who receives what. /vendor/ is also the location nginx caches
   for thirty days, which is right for a file that changes when the version does.

   Both files are variable fonts, so one file covers a weight range and the range
   is declared rather than a single weight. Montserrat is only ever used at 600
   and 700 here; asking it for 400 would get a synthesised weight.

   latin-ext carries the Czech diacritics. Do not drop it -- half the words on
   this site fall back to a system font without it. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/vendor/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/vendor/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/vendor/fonts/sourcesans3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/vendor/fonts/sourcesans3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -- tokens ------------------------------------------------------------------ */

:root {
  --teal:        #4AB0AA;
  --teal-deep:   #3D9993;
  --teal-tint:   #CAE8E6;
  --teal-wash:   #EAF6F5;
  --gold:        #FDC400;
  --gold-deep:   #E5AF00;
  --navy:        #00405D;
  --ink:         #221E20;
  --ink-soft:    #4A5560;
  --sky:         #E2F0FB;
  --paper:       #FFFFFF;
  --rule:        #D8E3E8;
  --warn:        #B8562F;
  --warn-ink:    #7D3A1E;
  --warn-wash:   #FDF1EC;

  --display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --body:    "Source Sans 3", "Segoe UI", Arial, sans-serif;

  /* The corner, measured off the printed panel: top-left rounded, bottom-right
     rounded roughly 3.5x larger, top-right and bottom-left square. Three sizes,
     for the three sizes of thing that carry it. */
  --c-tl:      18px;  --c-br:      64px;   /* cards, panels, bars */
  --c-tl-lg:   32px;  --c-br-lg:  110px;   /* page head, the one big shape */
  --c-tl-tile:  9px;  --c-br-tile: 24px;   /* tiles, inputs, photographs */

  --wrap: 46rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.18;
  text-wrap: balance;
  margin: 0 0 .5em;
}

a { color: var(--teal-deep); }
a:hover { color: var(--navy); }
strong, b { color: var(--navy); }

img { max-width: 100%; height: auto; }

/* Focus. One rule, everything, no exceptions -- a clerk may be doing this on a
   bad monitor in a bad room. The gold ring is the house style; the navy halo
   outside it is what makes the gold legible against white, which on its own it
   is not. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px rgba(0, 64, 93, .18);
}

/* -- layout ------------------------------------------------------------------ */

/* The header, the content column and the footer all measure to the same line,
   so the page has one left edge from top to bottom. */
.wrap, .bar__in, .foot__in {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}
.wrap { padding: 1.5rem 0 3rem; }

/* -- header ------------------------------------------------------------------ */

/* White and sticky rather than a solid colour band: the colour on this site is
   spent on the things a visitor is meant to act on, and a full-width slab of it
   at the top spends the loudest position on chrome. The hairline and the blur
   are what separate it from the page under it while scrolling. */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.bar__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .55rem 0;
}

.bar__home {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  color: var(--navy);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

/* The mark. Deliberately not a logo: it is the corner itself, at the size of a
   glyph, with the gold accent the buttons use. It names nothing, so a radnice
   can put its own arms beside it or delete this one line of markup. */
.bar__glyph {
  position: relative;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 7px 0 18px 0;
  background: var(--teal);
}
.bar__glyph::after {
  content: "";
  position: absolute;
  right: .34rem;
  bottom: .34rem;
  width: .42rem;
  height: .42rem;
  border-radius: 2px 0 5px 0;
  background: var(--gold);
}

.bar__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .15rem;
}
.bar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .25rem .7rem;
  border-radius: 999px;
  color: var(--navy);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bar__nav a:hover { background: var(--teal-wash); color: var(--teal-deep); }

/* The one thing the app exists for, from anywhere in the app. Gold, because gold
   is what this palette means by "do this". */
.bar__cta { background: var(--gold); }
.bar__cta:hover { background: var(--gold-deep); color: var(--ink); }

/* Who is signed in. Quieter than the links beside it: it is a statement of fact,
   not somewhere to go. */
.bar__who {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-left: .5rem;
  color: var(--ink-soft);
  font-size: .85rem;
}

/* Sign out. A glyph, at the right edge, next to the name it signs out. */
.bar__out { display: inline-flex; margin: 0; }
.bar__outbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.bar__outbtn:hover { background: var(--teal-wash); color: var(--navy); }

/* -- page head --------------------------------------------------------------- */

/* The signature shape, once per page, at the top, where it sets the tone for
   everything under it. Washed teal rather than solid: the heading sitting on it
   is navy, and navy on solid teal is not a contrast anyone should ship. */
.pagehead {
  background: var(--teal-wash);
  border-radius: var(--c-tl-lg) 0 var(--c-br-lg) 0;
  padding: clamp(1.1rem, 4vw, 1.8rem) clamp(1.15rem, 4vw, 2rem) clamp(1.3rem, 4vw, 2rem);
  margin: 0 0 1.5rem;
}
.pagehead .page__title { margin: 0; }
.pagehead--slim {
  border-radius: var(--c-tl) 0 var(--c-br) 0;
  padding: 1rem clamp(1.15rem, 4vw, 1.5rem) 1.05rem;
  margin-bottom: 1rem;
}

.page__title {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  letter-spacing: -.01em;
  margin: 0 0 1rem;
}

.eyebrow, .card__cat {
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

/* -- footer ------------------------------------------------------------------ */

/* Navy, and the full width of the window. It is the only dark surface on the
   page and it is what stops the layout ending in nothing. */
.foot {
  background: var(--navy);
  color: rgba(255, 255, 255, .82);
  font-size: .875rem;
}
.foot__in { padding: 1.4rem 0 1.6rem; }
.foot a { color: #fff; }
.foot__todo { margin: 0; }

/* -- place card -------------------------------------------------------------- */

/* Category, title and the five-second answer, together, on the shape. A11/A13:
   this block is what somebody standing in the street reads before deciding
   whether to keep reading, so it is set apart rather than merely first. */
.card__head {
  background: var(--teal-wash);
  border-radius: var(--c-tl-lg) 0 var(--c-br-lg) 0;
  padding: clamp(1.1rem, 4vw, 1.7rem) clamp(1.15rem, 4vw, 2rem) clamp(1.3rem, 4vw, 1.9rem);
  margin: 0 0 1.5rem;
}
.card__cat {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 .7rem;
}
.card__cat > span[aria-hidden] { font-size: 1.15rem; letter-spacing: 0; }

.chip {
  display: inline-block;
  padding: .15rem .65rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--body);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: none;
}

/* §7.3 RULE 7 -- section headings are set in caps by the tenant's own
   convention; the caps are in the data, so no text-transform here. */
.card__title {
  margin: 0;
  font-size: clamp(1.55rem, 5vw, 2.15rem);
  letter-spacing: -.015em;
}

/* A13 -- deliberately the largest text on the page after the title, and
   deliberately above every photograph. */
.card__summary {
  margin: .85rem 0 0;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
}

.card__photos {
  display: grid;
  gap: .6rem;
  margin: 0 0 1.5rem;
}
.card__photos img {
  width: 100%;
  display: block;
  border-radius: var(--c-tl-tile) 0 var(--c-br-tile) 0;
  background: var(--sky);
}

.card__body p { margin: 0 0 .85rem; }

/* -- video facade ------------------------------------------------------------ */

.video { margin: 0 0 1.5rem; }
.video__play {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  border-radius: var(--c-tl-tile) 0 var(--c-br-tile) 0;
  background: var(--sky) center / cover no-repeat;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.video__play span {
  display: inline-block;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  background: var(--navy);
  font-family: var(--display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.video__play:hover span { background: var(--gold); color: var(--ink); }
.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--c-tl-tile) 0 var(--c-br-tile) 0;
}

/* -- timeline ---------------------------------------------------------------- */

.timeline { margin: 2rem 0 0; }
.timeline h2 {
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 .9rem;
}
.timeline ol { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  display: flex;
  gap: .9rem;
  padding: .5rem 0 .5rem 1.9rem;
}
/* The dot with its wash halo, from the programme lists on the campaign site. It
   is what turns a bordered table into something that reads as a sequence. */
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 .25rem var(--teal-wash);
}
.timeline b {
  min-width: 3.5rem;
  font-family: var(--display);
  font-weight: 700;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}

/* -- place index ------------------------------------------------------------- */

/* Cards rather than rows. Each one is a place somebody may be about to walk to,
   and the icon gets the teal disc so the list scans by category at arm's length. */
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.places__item { }
.places__item a {
  display: flex;
  gap: .9rem;
  align-items: center;
  min-height: 44px;
  padding: .9rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--c-tl) 0 var(--c-br) 0;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
}
.places__item a:hover {
  border-color: var(--teal);
  background: var(--teal-wash);
}
.places__cat {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: var(--teal-tint);
  font-size: 1.35rem;
  line-height: 1;
}
.places__item a:hover .places__cat { background: var(--teal); }
.places__text { min-width: 0; }
.places__text b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
}
.places__text small { display: block; color: var(--ink-soft); font-size: .9rem; }

/* -- buttons ----------------------------------------------------------------- */

/* The exception to the corner: buttons are fully round, gold, ink text, and set
   in the display face. 44px is the smallest target a thumb hits reliably and
   every tappable thing in this app clears it -- J4 says the work is done from
   the phone, in the street, probably one-handed. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--gold-deep); color: var(--ink); }
.btn--ghost {
  background: var(--paper);
  border-color: var(--teal);
  color: var(--teal-deep);
}
.btn--ghost:hover { background: var(--teal-wash); color: var(--navy); border-color: var(--teal-deep); }
.btn[disabled] { opacity: .45; cursor: default; }

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* -- anketa ------------------------------------------------------------------ */

.poll {
  margin: 2rem 0 0;
  padding: clamp(1.1rem, 4vw, 1.5rem);
  border-radius: var(--c-tl) 0 var(--c-br) 0;
  background: var(--sky);
}
.poll__q { margin: 0 0 1rem; font-size: 1.2rem; }
.poll__options { display: grid; gap: .5rem; }

/* D3 -- each option is itself the submit button. One tap, no confirm step. */
.poll__opt {
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--c-tl-tile) 0 var(--c-br-tile) 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.poll__opt:hover { border-color: var(--teal); background: var(--teal-wash); color: var(--navy); }

.poll__other { display: grid; gap: .6rem; margin-top: 1rem; }
.poll__other label { font-weight: 600; color: var(--navy); }
.poll__other input {
  min-height: 44px;
  padding: .65rem .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--c-tl-tile) 0 var(--c-br-tile) 0;
  background: var(--paper);
  font: inherit;
}
.poll__done {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
}

/* -- map --------------------------------------------------------------------- */

/* overflow:hidden is load-bearing: without it Leaflet's tiles are square and the
   corner is drawn on an empty frame around them. */
.map {
  height: min(68vh, 520px);
  margin: 0 0 .7rem;
  border: 1px solid var(--rule);
  border-radius: var(--c-tl) 0 var(--c-br) 0;
  background: var(--teal-wash);
  overflow: hidden;
}
.map__attrib, .map__fallback { color: var(--ink-soft); font-size: .85rem; }

/* The picker on the podnet form. Shorter than the full map: it sits inside a
   form that has to stay scrollable with one thumb. */
.map--pick { height: min(46vh, 340px); margin-top: .7rem; }

/* One point on an admin page, beside the text it belongs to. */
.map--mini { height: min(40vh, 300px); }

.filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.filter__chip { display: inline-flex; }
.filter__chip input { position: absolute; opacity: 0; pointer-events: none; }
.filter__chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .35rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: .9rem;
  cursor: pointer;
}
.filter__chip span:hover { border-color: var(--teal); color: var(--navy); }
.filter__chip input:checked + span {
  border-color: var(--teal-deep);
  background: var(--teal);
  color: #fff;
  font-weight: 600;
}
.filter__chip input:focus-visible + span {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px rgba(0, 64, 93, .18);
}

.pin {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--teal-deep);
  font-size: 17px;
  box-shadow: 0 1px 4px rgba(0, 64, 93, .35);
}
.pin--podnet { border-color: var(--warn); }
.pin__go {
  display: inline-block;
  margin-top: .35rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* -- forms ------------------------------------------------------------------- */

.form { display: grid; gap: 1.15rem; margin: 0 0 1.5rem; }
.form__group { display: grid; gap: .4rem; border: 0; padding: 0; margin: 0; }
.form__label, .form legend {
  font-family: var(--display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}
.form__label small, .form legend small {
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.form textarea,
.form input[type="email"],
.form input[type="text"],
.form input[type="password"],
.form select {
  width: 100%;
  min-height: 44px;
  padding: .65rem .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--c-tl-tile) 0 var(--c-br-tile) 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.form textarea { line-height: 1.5; }
.form textarea:hover,
.form input[type="email"]:hover,
.form input[type="text"]:hover,
.form input[type="password"]:hover,
.form select:hover { border-color: var(--teal); }
.form input[disabled] { background: var(--teal-wash); color: var(--ink-soft); }
.form input[type="file"] { padding: .5rem 0; }
.form__row { display: flex; flex-wrap: wrap; gap: .7rem; }
.form__row > * { flex: 1 1 12rem; }

.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.cats__item input { position: absolute; opacity: 0; pointer-events: none; }
.cats__item span {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 52px;
  padding: .7rem .85rem;
  border: 1px solid var(--rule);
  border-radius: var(--c-tl-tile) 0 var(--c-br-tile) 0;
  background: var(--paper);
  cursor: pointer;
}
.cats__item span:hover { border-color: var(--teal); background: var(--teal-wash); }
.cats__item input:checked + span {
  border-color: var(--teal-deep);
  background: var(--teal-wash);
  color: var(--navy);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--teal-deep);
}
.cats__item input:focus-visible + span {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px rgba(0, 64, 93, .18);
}

.check { display: flex; gap: .6rem; align-items: center; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--teal-deep); }
.btnrow { display: flex; flex-wrap: wrap; gap: .6rem; }

.hint { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.error {
  margin: 0 0 1.2rem;
  padding: .8rem 1rem;
  border: 1px solid var(--warn);
  border-left-width: 5px;
  border-radius: var(--c-tl-tile) 0 var(--c-br-tile) 0;
  background: var(--warn-wash);
  color: var(--warn-ink);
}
.error strong, .error b { color: var(--warn-ink); }

/* X2 -- the honeypot is moved off-screen rather than display:none, which the
   more careful form-fillers check for, and it is aria-hidden in the markup. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -- admin --------------------------------------------------------------------
   The administration is four people on a desktop, not a citizen in the street,
   so it optimises for scanning a list rather than for weight. It carries the
   same palette, type and corner: a second design system for six pages is a cost
   with no payer, and a clerk who has seen the public side already knows this one. */

.adminnav {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  align-items: center;
  margin: 0 0 1.5rem;
  padding: 0 0 .5rem;
  border-bottom: 1px solid var(--rule);
}
.adminnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .25rem .8rem;
  border-radius: 999px;
  color: var(--navy);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.adminnav a:hover { background: var(--teal-wash); color: var(--teal-deep); }
.adminnav__out { margin-left: auto; }

.linkish {
  min-height: 44px;
  padding: 0 .2rem;
  border: 0;
  background: none;
  color: var(--teal-deep);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.linkish:hover { color: var(--navy); }
.linkish--warn { color: var(--warn); }
.linkish--warn:hover { color: var(--warn-ink); }
.inline { display: inline; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .6rem;
  margin: 0 0 1.5rem;
}
.stat {
  padding: 1rem .8rem;
  border-radius: var(--c-tl-tile) 0 var(--c-br-tile) 0;
  background: var(--teal-wash);
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--navy);
}
.stat span { color: var(--ink-soft); font-size: .82rem; }

/* Something waiting to be done. Gold, because that is what gold means here. */
.notice {
  margin: 0 0 1.5rem;
  padding: .9rem 1.1rem;
  border-left: 5px solid var(--gold);
  border-radius: var(--c-tl-tile) 0 var(--c-br-tile) 0;
  background: var(--teal-wash);
}
.notice b { font-family: var(--display); font-size: 1.15rem; }

/* An admin h2. Set as an eyebrow with a rule above it, so a long editing page
   reads as a stack of named blocks rather than one scroll. */
.section {
  margin: 2.25rem 0 .9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td {
  padding: .6rem .55rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.table th {
  font-family: var(--display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-deep);
  border-bottom-width: 2px;
}
.table tbody tr:hover { background: var(--teal-wash); }
.nowrap { white-space: nowrap; }

/* Wide tables scroll inside themselves rather than pushing the page sideways.
   Nothing else on the page may clip, or the focus ring goes with it. */
.table { display: block; overflow-x: auto; }

.adminlist { list-style: none; margin: 0; padding: 0; }
.adminlist li { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.adminlist li:last-child { border-bottom: 0; }

.tag {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .55rem;
  border-radius: 999px;
  background: var(--teal-tint);
  color: var(--navy);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.2rem; }
.tabs__tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .3rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tabs__tab:hover { border-color: var(--teal); color: var(--navy); }
.tabs__tab.is-on { border-color: var(--teal-deep); background: var(--teal); color: #fff; }

.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .3rem 1.1rem;
  margin: 0 0 1.2rem;
  padding: 1rem 1.2rem;
  border-radius: var(--c-tl) 0 var(--c-br) 0;
  background: var(--teal-wash);
}
.meta dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-deep);
  padding-top: .25em;
}
.meta dd { margin: 0; }

.adminphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; }
.adminphotos figure { margin: 0; }
.adminphotos img {
  width: 100%;
  border-radius: var(--c-tl-tile) 0 var(--c-br-tile) 0;
  background: var(--sky);
}
.adminphotos figcaption { font-size: .85rem; color: var(--ink-soft); }
.podnetphoto {
  max-width: 100%;
  border-radius: var(--c-tl) 0 var(--c-br) 0;
  background: var(--sky);
}

.results__bar { width: 55%; }
.results__bar span {
  display: block;
  height: 14px;
  min-width: 3px;
  border-radius: 999px;
  background: var(--teal);
}

/* -- narrow ------------------------------------------------------------------ */

/* The big corner is measured against a wide panel. Left alone on a phone it eats
   the panel it is supposed to shape, so all three sizes come down together. */
@media (max-width: 640px) {
  :root {
    --c-tl: 14px;  --c-br: 44px;
    --c-tl-lg: 22px; --c-br-lg: 64px;
  }
  .bar__in { padding: .4rem 0; }
  .bar__home { font-size: 1rem; }
  .bar__nav { gap: .1rem; }
  .bar__nav a { padding: .25rem .55rem; font-size: .72rem; }
  .card__actions .btn, .btnrow .btn { flex: 1 1 auto; }
}

@media print {
  .bar, .foot, .adminnav, .tabs, .card__actions, .filter { display: none; }
  body { font-size: 11pt; }
  .pagehead, .card__head, .poll, .meta { background: none; padding-inline: 0; }
}