/* ==========================================================================
   Bargio back-office — partner portal and admin panel share this sheet.
   Light, fresh green. Structure carried by hairlines and whitespace.
   ========================================================================== */

:root {
  /* Same brand book as the marketing site — see src/styles/01-tokens.css for
     why four of the handoff hexes are corrected for contrast. Kept as a
     separate copy because the back office ships from server/web/, not dist/. */
  --ink:        #1C2A20;
  --fern:       #2F7C3F;
  --basil:      #358646;   /* 4.52:1 with white; handoff #3E9E52 is 3.38:1 */
  --basil-hover:#2C7139;
  --honey:      #E9BC3F;
  --straw:      #F2D585;
  --straw-lite: #FAEFD2;
  --mint:       #ECF6E9;
  --lime:       #B9E04C;
  --paper:      #FCFCFA;
  --cream:      #FBF8F0;
  --on-green:   #EFF1E5;

  --bg:         var(--paper);
  --surface:    #FFFFFF;
  --surface-2:  var(--mint);
  --ink-muted:  #55604F;
  --ink-faint:  #6D7868;
  /* The handoff's caption grey. The marketing site darkens it to --ink-faint
     for body copy (#75806F is 4.03:1 on paper); the back-office labels the
     design calls out — KPI labels, table heads, the page-head date — keep the
     handoff value so the two panels read exactly as drawn. */
  --ink-soft:   #75806F;
  --line:       rgba(30, 58, 43, .10);
  --line-soft:  rgba(30, 58, 43, .06);

  --brand-800:  var(--fern);
  --brand-700:  var(--fern);
  --brand-600:  var(--basil-hover);
  --brand-500:  var(--basil);
  --brand-300:  #9ED3A6;
  --brand-100:  #D9EDDC;
  --brand-50:   var(--mint);

  --amber-600:  #8A5A18;
  --amber-100:  #FDF6E2;
  --amber-line: #EBD9A6;
  --danger:     #C4362C;
  --danger-100: #FBE6E4;
  --info:       #2B6CB0;
  --info-100:   #E4EFF9;

  --radius:     18px;
  --radius-sm:  12px;
  --radius-pill: 99px;
  --shadow:     0 1px 2px rgba(30,58,43,.05);
  --shadow-lg:  0 18px 40px rgba(30,58,43,.14);

  --font:         "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Anybody", var(--font);
  --font-word:    "Fraunces", Georgia, serif;
}

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

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  hyphens: none;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand-700); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.22;
}
h1 { font-size: 25px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.muted { color: var(--ink-muted); }
.small { font-size: 13px; }
.tiny  { font-size: 12px; line-height: 1.45; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }

/* ------------------------------------------------------------------ shell */
.shell { min-height: 100vh; }

/* One sticky header row per panel — the portal floats on translucent paper,
   the admin panel is a solid ink bar. The padding sits on the header so the
   inner row measures the designed 1240/1320px of content. */
.hdr { position: sticky; top: 0; z-index: 40; padding: 0 clamp(20px, 3vw, 40px); }
.shell--verslas .hdr {
  background: rgba(252,252,250,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30,58,43,.1);
}
.shell--admin .hdr { background: var(--ink); color: var(--cream); }

.hdr__in { margin: 0 auto; display: flex; align-items: center; gap: 20px; }
.shell--verslas .hdr__in { max-width: 1240px; height: 66px; }
.shell--admin   .hdr__in { max-width: 1320px; height: 62px; }
.hdr__spacer { flex: 1; }
.shell--admin .hdr__brand { font-size: 23px; color: var(--cream); }
.shell--admin .logo-mark__tag { color: var(--straw); }

.hdr__me { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.hdr__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--mint); color: var(--fern);
  display: grid; place-items: center; font-size: 14px;
}
.shell--admin .hdr__me { font-size: 13.5px; font-weight: 700; color: rgba(251,248,240,.8); }

.hdr__out {
  border: 1.5px solid rgba(30,58,43,.25); color: var(--ink);
  font-weight: 800; font-size: 13.5px; padding: 9px 18px;
  border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap;
  transition: border-color .13s, color .13s;
}
.hdr__out:hover { border-color: var(--brand-500); color: var(--brand-500); }
.shell--admin .hdr__out { border-color: rgba(251,248,240,.3); color: var(--cream); font-size: 13px; padding: 8px 16px; }
.shell--admin .hdr__out:hover { border-color: var(--straw); color: var(--straw); }

/* The prototype is one screen and carries no navigation; the shipped panels
   have a dozen pages, so the nav rides as a second row under the designed
   header row rather than being dropped. */
.hdr__nav { margin: 0 auto; display: flex; gap: 6px; overflow-x: auto; border-top: 1px solid var(--line-soft); }
.shell--verslas .hdr__nav { max-width: 1240px; }
.shell--admin   .hdr__nav { max-width: 1320px; border-top-color: rgba(251,248,240,.14); }
.hdr__navgroup { display: flex; gap: 6px; }
.hdr__navgroup + .hdr__navgroup { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-soft); }
.shell--admin .hdr__navgroup + .hdr__navgroup { border-left-color: rgba(251,248,240,.14); }
.hdr__link {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  margin: 5px 0; padding: 8px 12px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 700; color: var(--ink-muted); text-decoration: none;
  transition: background .13s, color .13s;
}
.hdr__link svg { width: 16px; height: 16px; flex: 0 0 auto; }
.hdr__link:hover { background: var(--mint); color: var(--fern); }
.hdr__link.is-active { background: var(--mint); color: var(--fern); font-weight: 800; }
.shell--admin .hdr__link { color: rgba(251,248,240,.72); }
.shell--admin .hdr__link:hover,
.shell--admin .hdr__link.is-active { background: rgba(251,248,240,.12); color: var(--cream); }
.hdr__badge {
  background: var(--straw); color: var(--ink);
  font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------------- main */
.content { margin-inline: auto; padding: clamp(24px, 3.5vw, 40px) clamp(20px, 3vw, 40px) 64px; }
.shell--verslas .content { max-width: 1240px; padding-top: clamp(24px, 3.5vw, 44px); }
.shell--admin   .content { max-width: 1320px; }
.content > * + * { margin-top: 18px; }

.pagehead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pagehead h1 { flex: 0 0 auto; }
/* Only the portal has a designed page-head heading; the admin panel keeps the
   quieter base h1 so its title does not outweigh the KPI row. */
.shell--verslas .pagehead h1 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; }
.pagehead__sub { color: var(--ink-muted); font-size: 13.5px; }
.pagehead__date { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.pagehead__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pagehead__date + .pagehead__actions { margin-left: 0; }
/* The design sets the page head 26px clear of the first card. */
.content > .pagehead + * { margin-top: 26px; }

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card__h {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
}
.card__h h2 { flex: 0 0 auto; }
.card__h .muted { font-size: 13px; }
.card__tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card__b { padding: 24px 26px; }
.card__b--flush { padding: 0; }
/* A tip or hint reads as a note, not as another record — mint, no hairline. */
.card--mint { background: var(--mint); border-color: transparent; box-shadow: none; }

.grid { display: grid; gap: 16px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--2-1 { grid-template-columns: 1.5fr 1fr; align-items: start; }
.grid--17-1 { grid-template-columns: 1.7fr 1fr; align-items: start; }
.grid--1-2 { grid-template-columns: 1fr 2fr; }
@media (max-width: 1180px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--2-1, .grid--17-1, .grid--1-2, .grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grid--4, .grid--2 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- stat tiles */
.stat { padding: 22px 24px; box-shadow: none; }
.shell--admin .stat { padding: 20px 22px; border-radius: 16px; }
.stat__label {
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); line-height: 1.3; padding-bottom: .09em;
}
.shell--admin .stat__label { font-size: 12px; }
.stat__value {
  font-family: var(--font-display); font-weight: 900;
  font-size: 34px; line-height: 1.1;
  margin-top: 8px;
}
.shell--admin .stat__value { font-size: 30px; margin-top: 6px; }
/* The tile a panel leads with is filled, so the eye lands on it first. */
.stat--fern { background: var(--fern); color: var(--cream); border: 0; box-shadow: none; }
.stat--fern .stat__label { color: var(--straw); }
.stat--fern .tiny.muted, .stat--fern .stat__delta { color: rgba(251,248,240,.8); }
.stat--amber .stat__value { color: var(--amber-600); }
.stat__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }
.stat__delta { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.stat__delta--up   { color: var(--brand-600); }
.stat__delta--down { color: var(--danger); }
.stat__delta--flat { color: var(--ink-muted); }
.spark { width: 110px; height: 32px; overflow: visible; }
.spark path { fill: none; stroke: var(--brand-300); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ----------------------------------------------------------------- charts */
.chart { width: 100%; height: auto; overflow: visible; }
.chart__grid  { stroke: var(--line-soft); stroke-width: 1; }
.chart__ylab, .chart__xlab { font-size: 11px; fill: var(--ink-muted); font-family: var(--font); }
.chart__line  { fill: none; stroke: var(--brand-500); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart__dot   { fill: transparent; }
.chart__dot:hover { fill: var(--brand-500); fill-opacity: .18; }
.chart-empty {
  display: grid; place-items: center;
  color: var(--ink-muted); font-size: 13.5px;
  background: var(--surface-2); border-radius: var(--radius-sm);
}

.barlist { display: grid; gap: 11px; }
.barlist__row { display: grid; grid-template-columns: minmax(90px, 1.25fr) 3fr auto; align-items: center; gap: 12px; }
.barlist__label { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: .09em; }
.barlist__track { height: 9px; background: var(--surface-2); border-radius: 20px; overflow: hidden; }
.barlist__fill  { height: 100%; background: var(--brand-500); border-radius: 20px; }
.barlist__value { font-size: 13px; font-weight: 600; white-space: nowrap; }

.columns { display: flex; align-items: flex-end; gap: 10px; }
.columns__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
/* The bars stand on nothing — no track behind them — at the designed 120px,
   which is why the inline --col-h charts.php sets is not read here. */
.columns__bar { width: 100%; height: 120px; display: flex; align-items: flex-end; background: none; }
.columns__fill {
  width: 100%; max-width: 44px; margin: 0 auto; min-height: 3px;
  background: #CBE3C6; border-radius: 8px 8px 4px 4px;
}
/* A graphic fill, not text: the handoff basil needs no contrast correction. */
.columns__col--peak .columns__fill { background: #3E9E52; }
.columns__label { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding-bottom: .09em; }

.donutwrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { width: 168px; height: 168px; flex: 0 0 auto; }
.donut__track { stroke: var(--surface-2); }
.donut__seg--0 { stroke: var(--brand-600); } .donut__seg--1 { stroke: var(--brand-300); }
.donut__seg--2 { stroke: var(--amber-600); } .donut__seg--3 { stroke: var(--info); }
.donut__seg--4 { stroke: var(--brand-800); }
.donut__legend { list-style: none; padding: 0; display: grid; gap: 9px; flex: 1; min-width: 150px; }
.donut__legend li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.donut__legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.donut__key { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.donut__key--0 { background: var(--brand-600); } .donut__key--1 { background: var(--brand-300); }
.donut__key--2 { background: var(--amber-600); } .donut__key--3 { background: var(--info); }
.donut__key--4 { background: var(--brand-800); }

/* -------------------------------------------------------------------- map */
.map { width: 100%; height: auto; border-radius: var(--radius-sm); }
.map__bg { fill: var(--surface-2); }
.map__water { stroke: #BFD9EC; }
.map__district {
  font-size: 11px; fill: var(--ink-muted); font-family: var(--font);
  letter-spacing: .04em; font-weight: 600;
  /* Halo, so a label stays readable where it crosses a pin. */
  paint-order: stroke fill; stroke: var(--surface-2); stroke-width: 3.5px; stroke-linejoin: round;
}
.map__halo { fill: var(--brand-500); opacity: .13; }
.map__dot  { fill: var(--brand-500); stroke: #fff; stroke-width: 2.5; }
.map__pin.is-suspended .map__dot { fill: var(--danger); }
.map__pin.is-suspended .map__halo { fill: var(--danger); }
.map__pin.is-pending .map__dot { fill: var(--amber-600); }
.map__pin.is-pending .map__halo { fill: var(--amber-600); }
.map__pin { cursor: default; transition: transform .15s; transform-origin: center; }
.map__pin:hover .map__dot { stroke-width: 3.5; }

/* ----------------------------------------------------------------- tables */
.tablewrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th, table.tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.tbl thead th {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 800;
  background: none; white-space: nowrap;
  border-bottom: 1px solid rgba(30,58,43,.1);
  padding-bottom: calc(11px + .09em);
  position: sticky; top: 0; z-index: 1;
}
table.tbl tbody tr:hover { background: var(--brand-50); }
/* A partner who is not active is still listed, just stood down. */
/* Not scoped to .tbl: the partners list is a CSS grid, not a table, precisely
   so a suspended row can dim as one block. */
.is-dim { opacity: .55; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td.right, table.tbl th.right { text-align: right; }
.tbl__main { font-weight: 600; }
.tbl__sub { font-size: 12px; color: var(--ink-muted); }
.tbl a { color: inherit; text-decoration: none; }
.tbl a:hover { color: var(--brand-700); text-decoration: underline; }

/* ------------------------------------------------------------------ chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 800; line-height: 1.35;
  padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
/* The portal shows one chip per bundle, at reading size rather than table size. */
.chip--lg { font-size: 12.5px; padding: 5px 12px; }
.chip--ok    { background: var(--mint); color: var(--fern); }
.chip--warn  { background: var(--amber-100); color: var(--amber-600); }
.chip--bad   { background: var(--danger-100); color: var(--danger); }
.chip--info  { background: var(--info-100); color: var(--info); }
.chip--muted { background: var(--surface-2); color: var(--ink-muted); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font); font-weight: 800; font-size: 13.5px;
  line-height: 1.3; padding: 9px 15px; min-height: 38px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .13s, border-color .13s, color .13s, box-shadow .13s;
}
.btn svg { width: 15px; height: 15px; }
.btn--primary { background: var(--brand-500); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.btn--primary:hover { background: var(--brand-600); }
.btn--ghost { border-color: var(--line); background: var(--surface); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-muted); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #A62A22; }
.btn--sm { font-size: 12.5px; padding: 6px 11px; min-height: 32px; }
.btn--lg { font-size: 16px; padding: 15px; }
/* The publish button carries a section on its own, so it sits between the two. */
.btn--md { font-size: 14.5px; padding: 12px 26px; }
/* "Add another" reads as an empty slot waiting to be filled, not as an action. */
.btn--dashed {
  border: 1.5px dashed rgba(30,58,43,.25); border-radius: var(--radius-sm);
  padding: 11px; width: 100%; color: var(--ink-muted); background: none;
}
.btn--dashed:hover { border-color: var(--brand-500); color: var(--brand-500); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- forms */
.field { margin-bottom: 15px; }
.field label, .flabel { display: block; font-size: 13px; font-weight: 800; color: var(--ink-muted); margin-bottom: 6px; }
.inp, select.inp, textarea.inp {
  width: 100%; background: var(--surface);
  border: 1.5px solid rgba(30,58,43,.2); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; line-height: 1.45;
  transition: border-color .13s, box-shadow .13s;
}
/* Sign-in fields are the only thing on the screen, so they run larger. */
.auth .inp { padding: 13px 16px; font-size: 15px; }
/* Inline fields inside a card sit tighter than a standalone form. */
.inp--compact { border-radius: 10px; padding: 11px 13px; }
/* A lone filter in a section header reads as a search pill. */
.inp--pill {
  border: 1.5px solid rgba(30,58,43,.18); border-radius: var(--radius-pill);
  padding: 9px 16px; font-size: 13.5px; background: var(--paper); width: 220px;
}
.inp:hover { border-color: var(--ink-muted); }
.inp:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
select.inp {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C6E62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px;
  padding-right: 34px;
}
textarea.inp { min-height: 92px; resize: vertical; }
.fhint { font-size: 12px; color: var(--ink-muted); margin-top: 5px; }
.ferr  { font-size: 12.5px; color: var(--danger); margin-top: 5px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frow--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) { .frow, .frow--3 { grid-template-columns: 1fr; } }

.filters { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.filters .field { margin: 0; }
.filters .inp { min-width: 130px; }

/* ------------------------------------------------------------------ misc */
.flash {
  padding: 11px 15px; border-radius: var(--radius-sm);
  font-size: 13.5px; display: flex; align-items: center; gap: 9px;
  border: 1px solid;
}
.flash--ok   { background: var(--brand-100); border-color: var(--brand-300); color: var(--brand-800); }
.flash--err  { background: var(--danger-100); border-color: var(--danger); color: var(--danger); }
/* Amber, and quieter than the red one: a warning is not a failure. */
.flash--warn {
  background: #FDF1E4; border-color: #E5C89E; color: var(--amber-600);
  font-weight: 700; padding: 11px 14px; border-radius: var(--radius-sm);
}

.empty { text-align: center; padding: 44px 20px; color: var(--ink-muted); }
.empty h3 { color: var(--ink); margin-bottom: 6px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 13.5px; }
.kv dt { color: var(--ink-muted); }
.kv dd { margin: 0; font-weight: 500; }

.pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 12px 18px; }
.pager a, .pager span {
  min-width: 32px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 13px; text-decoration: none; color: var(--ink);
}
.pager a:hover { border-color: var(--brand-500); }
.pager .is-current { background: var(--brand-500); border-color: var(--brand-500); color: #fff; font-weight: 600; }
.pager .is-disabled { opacity: .4; pointer-events: none; }

/* --------------------------------------------------------------- sign-in */
.auth { min-height: 100vh; }
.auth__form { display: grid; place-items: center; padding: clamp(28px, 4vw, 56px) 24px; }
.auth__form > div { width: 100%; max-width: 400px; }
.auth__h { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
.auth__lead { font-size: 15px; color: var(--ink-muted); margin-bottom: 26px; }
.auth__foot { font-size: 13px; color: var(--ink-soft); text-align: center; margin: 18px 0 0; }
.auth__foot a { color: var(--fern); font-weight: 800; }

/* Partner sign-in: the green panel is the left half, the form the right. */
.auth--split { display: grid; grid-template-columns: 1fr 1fr; background: var(--fern); }
.auth--split .auth__form { background: var(--paper); }
.auth__aside {
  color: rgba(251,248,240,.85);
  padding: clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.auth__aside .logo-mark { font-size: 27px; color: var(--cream); }
.auth__aside .logo-mark__tag { font-size: 13px; color: inherit; opacity: .8; }
.auth__aside h2 {
  color: var(--cream); font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800; line-height: 1.05; margin-bottom: 14px;
}
.auth__aside p { font-size: 16px; line-height: 1.6; max-width: 400px; }
.auth__copy { font-size: 13px; color: rgba(251,248,240,.7); }

/* Admin sign-in: no marketing half — one card on ink. */
.auth--solo {
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); padding: 24px;
}
.auth--solo .auth__form { padding: 0; width: 100%; max-width: 400px; }
.auth--solo .auth__form > div {
  background: var(--paper); border-radius: 22px; padding: clamp(28px, 4vw, 44px);
}
.auth--solo .logo-mark { font-size: 26px; }
.auth--solo .auth__lead { font-size: 14.5px; margin: 14px 0 24px; }
/* Ink, not fern: the admin panel signs in on its own colour. */
.auth--solo .btn--primary { background: var(--ink); color: var(--cream); }
.auth--solo .btn--primary:hover { background: var(--fern); }

@media (max-width: 900px) {
  .auth--split { grid-template-columns: 1fr; }
  .auth__aside { padding: 32px 24px; gap: 24px; }
}

/* The wordmark: Fraunces italic 600, lowercase, after the clock mark.
   The size is set on the block so the clock, drawn in em, tracks the letters. */
.logo-mark {
  display: inline-flex; align-items: center; gap: .28em;
  text-decoration: none; color: var(--ink); font-size: 24px;
}
.logo-mark b {
  font-family: var(--font-word); font-style: italic; font-weight: 600;
  letter-spacing: -.01em; text-transform: lowercase;
}
.logo-mark__tag {
  font-family: var(--font); font-style: normal; font-weight: 800;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fern); margin-left: 4px;
}
.wordmark__clock {
  width: .5em; height: .5em; border-radius: 50%;
  border: .055em solid currentColor; position: relative; flex: 0 0 auto;
}
.wordmark__clock::before, .wordmark__clock::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: currentColor; border-radius: .05em;
}
.wordmark__clock::before { width: .05em; height: .17em; transform: translate(-50%, -100%); }
.wordmark__clock::after  { width: .15em; height: .05em; transform: translate(0, -50%); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .hdr { padding: 0 16px; }
  /* The name is the first thing to go: the avatar still identifies the account. */
  .hdr__name { display: none; }
  .shell--admin .hdr__me { display: none; }
  .shell .content { padding: 20px 16px 48px; }
}

/* ------------------------------------------------------------ leaflet -- */
.leafmap {
  width: 100%; height: 520px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  z-index: 0;                 /* keep tiles under the sticky topbar */
}
.leafmap--pick { height: 340px; }
.leaflet-container { font: inherit; }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.5; }
.leaflet-popup-content b { font-family: var(--font-display); font-size: 14px; }
.leaflet-popup-content-wrapper { border-radius: var(--radius-sm); }
.leaflet-popup-content a { color: var(--brand-700); font-weight: 600; }
.mapop { color: var(--ink-muted); font-size: 12px; }

.mapin__dot {
  display: block; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pin, #27A35C);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(22,38,28,.4);
}
.mapin__dot::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: var(--pin, #27A35C); opacity: .18;
}

.maplegend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--ink-muted); }
.maplegend span { display: inline-flex; align-items: center; gap: 7px; }
.maplegend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

.geocode-row { display: flex; gap: 8px; align-items: flex-end; }
.geocode-row .field { flex: 1; margin-bottom: 0; }
.nogeo { display: inline-flex; align-items: center; gap: 6px; }