/* Concelho pages. Built from tokens.css — nothing here invents a colour.
   Construction: the page floats as a white panel on a blush ground (the
   reference's inset-page treatment), the hero carries the live price card
   rather than a picture of one, and the station list is rows with a brand
   chip — not a spreadsheet.

   Everything that ranks is in the HTML before any script runs. */

body { background: var(--blush); }

.cpage {
  width: min(100% - 1.5rem, 1180px);
  margin: var(--s-4) auto var(--s-6);
  background: var(--paper);
  border-radius: clamp(24px, 3vw, 40px);
  padding: clamp(var(--s-5), 4vw, var(--s-10)) clamp(var(--s-4), 4vw, 4.5rem);
}

/* ─── Crumb: every level is a tappable way back ───────────────────────── */
.crumb {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: clamp(var(--s-6), 5vw, var(--s-8));
}
.crumb__pill {
  display: inline-flex; align-items: center;
  background: var(--cream); border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm); color: var(--ink-60);
  transition: background 160ms ease, color 160ms ease;
}
a.crumb__pill:hover { background: var(--blush); color: var(--ink); }
.crumb__pill--here { background: var(--ink-deep); color: var(--paper); }
.crumb__sep { color: var(--ink-50); font-size: var(--t-sm); }
.crumb__when {
  margin-left: auto; font-family: var(--font-doc);
  font-size: var(--t-xs); color: var(--ink-50);
}

/* ─── Brand mark: a real logo where we have one, initials where we don't ─ */
.mark {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--paper); border: 1px solid var(--hairline);
  display: grid; place-items: center; overflow: hidden;
}
.mark img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.mark--txt {
  border-color: transparent;
  font-family: var(--font-doc); font-size: 13px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.02em;
}
.mark--lg { width: 56px; height: 56px; border-radius: 14px; }
.mark--lg.mark--txt { font-size: 16px; }

/* ─── Hero: statement left, the live card right ───────────────────────── */
.chero {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--s-6), 5vw, 4rem); align-items: start;
  padding-bottom: clamp(var(--s-8), 7vw, var(--s-10));
}
.chero h1 {
  font-size: clamp(2.2rem, 6vw, var(--t-xl));
  font-weight: 300; line-height: 1.04; letter-spacing: -0.02em;
  margin: 0 0 var(--s-5);
}
/* The passage an answer engine lifts. Sized as the answer, not a standfirst. */
.lede { font-size: var(--t-base); line-height: 1.5; max-width: 46ch; margin: 0; color: var(--ink-60); }
.lede b { color: var(--ink); font-weight: 500; }
.chero__cta { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* The product, not a picture of it. */
.pcard {
  background: var(--cream);
  border-radius: clamp(20px, 2.5vw, 28px);
  padding: var(--s-5);
  display: grid; gap: 2px;
}
.pcard__row {
  background: var(--paper); padding: var(--s-5);
  display: grid; gap: var(--s-1);
}
.pcard__row:first-child { border-radius: 20px 20px 4px 4px; }
.pcard__row:last-of-type { border-radius: 4px 4px 20px 20px; }
.pcard__label {
  font-family: var(--font-doc); font-size: var(--t-xs);
  color: var(--ink-50); letter-spacing: .03em;
}
.pcard__big {
  font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 400; line-height: 1;
  font-variant-numeric: tabular-nums; margin: 0;
}
.pcard__big small { font-size: var(--t-sm); color: var(--ink-50); font-weight: 400; margin-left: var(--s-2); }
.pcard__sub { font-size: var(--t-sm); color: var(--ink-60); margin: 0; }

/* The outcome line: what the spread is worth, in euros. */
.pcard__save {
  background: var(--ink-deep); color: var(--paper);
  border-radius: 20px; padding: var(--s-5); margin-top: 2px;
  display: grid; gap: var(--s-1);
}
.pcard__save b { color: var(--peach); font-size: var(--t-md); font-weight: 500; }
.pcard__save span { font-size: var(--t-sm); color: rgba(255,255,255,.72); }

/* ─── Section rhythm ──────────────────────────────────────────────────── */
.csec { padding-block: clamp(var(--s-8), 6vw, var(--s-10)); border-top: 1px solid var(--hairline); }
.csec > h2 {
  font-size: clamp(1.6rem, 4vw, var(--t-lg)); font-weight: 300;
  line-height: 1.1; margin: 0 0 var(--s-3); letter-spacing: -0.01em;
}
.csec__note { font-size: var(--t-sm); color: var(--ink-60); margin: 0 0 var(--s-6); max-width: 58ch; }

/* ─── Station rows ────────────────────────────────────────────────────── */
.postos { display: grid; gap: 2px; }
.posto {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: var(--s-4); align-items: center;
  background: var(--cream); padding: var(--s-4) var(--s-5);
}
.posto:first-child { border-radius: var(--r-card) var(--r-card) 6px 6px; }
.posto:last-child  { border-radius: 6px 6px var(--r-card) var(--r-card); }
.posto--best { background: var(--peach-pale); }

.posto__name { display: grid; gap: 2px; min-width: 0; }
.posto__name b { font-weight: 400; font-size: var(--t-sm); }
.posto__name span {
  font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.posto__price { font-variant-numeric: tabular-nums; font-size: var(--t-sm); text-align: right; white-space: nowrap; }
.posto__price small { display: block; font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50); }
.posto__tag {
  font-family: var(--font-doc); font-size: var(--t-xs); color: var(--peach-ink);
  white-space: nowrap;
}

/* The reference's "Show all": the rest stays in the DOM for crawlers.
   NOTE: never `display: contents` here — that dissolves the row into the
   parent grid and it loses its own columns the moment it is revealed. */
.maisrow { margin-top: var(--s-4); }
.postos[data-collapsed='true'] .posto--mais { display: none; }

/* ─── FAQ: identical construction to the homepage ─────────────────────── */
.faq__list { display: grid; gap: var(--s-4); }
.faq__item { display: grid; gap: var(--s-3); }
.faq__q {
  display: inline-flex; align-items: center; gap: var(--s-4); justify-self: start; max-width: 100%;
  background: var(--paper); border: 0; border-radius: var(--r-pill); box-shadow: var(--shadow-card);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); cursor: pointer; text-align: left;
  font: 400 var(--t-base)/1.3 var(--font-ui); color: var(--ink);
}
.faq__q i { width: 30px; height: 30px; border-radius: 50%; background: var(--cream); flex: none; position: relative; }
.faq__q i::before, .faq__q i::after {
  content: ''; position: absolute; inset: 50% 9px auto; height: 1.5px; background: var(--ink);
  transform: translateY(-50%); transition: transform 240ms cubic-bezier(.2,.8,.3,1);
}
.faq__q i::after { transform: translateY(-50%) rotate(90deg); }
.faq__q[aria-expanded='true'] i::before { transform: translateY(-50%) rotate(45deg); }
.faq__q[aria-expanded='true'] i::after { transform: translateY(-50%) rotate(-45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms cubic-bezier(.2,.8,.3,1); }
.faq__item[data-open='true'] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a > div > p {
  background: var(--tint-10); color: var(--ink); font-size: var(--t-base); line-height: 1.5;
  padding: var(--s-5); margin: 0; border-radius: var(--r-bubble-greg);
}
@media (prefers-reduced-motion: reduce) { .faq__a { transition: none; } }

/* ─── Alert capture ───────────────────────────────────────────────────── */
.calert {
  background: linear-gradient(160deg, var(--peach-pale) 0%, var(--blush) 100%);
  color: var(--ink);
  border-radius: clamp(20px, 3vw, var(--r-panel));
  padding: clamp(var(--s-6), 5vw, 3.5rem);
  margin-top: clamp(var(--s-8), 6vw, var(--s-10));
}
.calert h2 { font-size: clamp(1.6rem, 4vw, var(--t-lg)); font-weight: 300; margin: 0 0 var(--s-3); color: var(--ink); }
.calert p { font-size: var(--t-sm); color: var(--ink-60); max-width: 52ch; margin: 0; }
.calert__form { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.calert__form input[type=email] {
  flex: 1 1 260px; min-width: 0;
  background: var(--paper); border: 0; border-radius: var(--r-pill);
  padding: var(--s-4) var(--s-5); color: var(--ink); font: inherit; font-size: var(--t-sm);
}
.calert__form input[type=email]::placeholder { color: var(--ink-50); }
/* An optional extra field (the IUC aviso's month): a small label over a pill, like the email box. */
.calert__field { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--s-2); }
.calert__field label { font-size: var(--t-xs); color: var(--ink-60); line-height: 1.5; }
.calert__field select {
  appearance: none; -webkit-appearance: none; max-width: 100%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2347201C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right var(--s-5) center;
  border: 0; border-radius: var(--r-pill); padding: var(--s-4) calc(var(--s-5) * 2) var(--s-4) var(--s-5);
  color: var(--ink); font: inherit; font-size: var(--t-sm);
}
.calert__field select:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.calert__consent {
  flex: 1 1 100%; display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--t-xs); color: var(--ink-60); line-height: 1.5;
}
.calert__consent input { margin-top: 3px; flex: none; }
/* Outside the consent <span> on purpose: that sentence is stored word for word as the record. */
.calert__priv { flex: 1 1 100%; font-size: var(--t-xs); color: var(--ink-60); text-decoration: underline; text-underline-offset: 3px; }

/* ─── Legal pages ─────────────────────────────────────────────────────── */
.legal { max-width: 72ch; margin: var(--s-6) 0 var(--s-10); }
.legal h1 { font-size: clamp(2rem, 5vw, var(--t-xl)); font-weight: 300; margin: 0 0 var(--s-6); }
.legal h2 { font-size: var(--t-md); font-weight: 500; margin: var(--s-8) 0 var(--s-3); }
.legal h3 { font-size: var(--t-base); font-weight: 500; margin: var(--s-5) 0 var(--s-2); }
.legal p, .legal li { font-size: var(--t-sm); line-height: 1.65; color: var(--ink); }
.legal p { margin: 0 0 var(--s-4); max-width: none; }
.legal ul, .legal ol { margin: 0 0 var(--s-4); padding-left: 1.3em; display: grid; gap: var(--s-2); }
.legal a { color: var(--peach-ink); text-underline-offset: 3px; }
.legal code { font-family: var(--font-doc); font-size: .9em; background: var(--cream); padding: 1px 6px; border-radius: 6px; }
.legal__table { overflow-x: auto; margin: 0 0 var(--s-5); }
.legal table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: var(--s-3); border-bottom: 1px solid var(--hairline); line-height: 1.5; }
.legal th { font-weight: 500; background: var(--cream); }

/* What the form says back. One line, in the flow of the form, never a browser
   alert: the person is mid-task and the answer belongs where they are looking. */
.calert__status {
  flex: 1 1 100%; margin: 0;
  font-size: var(--t-sm); line-height: 1.5; max-width: 52ch;
  color: var(--ink-60);
}
.calert__status:empty { display: none; }
.calert__status[data-state='ok'] { color: var(--ink); }
.calert__status[data-state='erro'] { color: var(--peach-ink); }

/* ─── Confirm / cancel pages ──────────────────────────────────────────── */
/* Same panel as the sign-up, so arriving from the email lands somewhere that
   looks like where the person signed up. */
.calert h1 { font-size: clamp(1.6rem, 4vw, var(--t-lg)); font-weight: 300; margin: 0 0 var(--s-3); color: var(--ink); }
.tk__estado {
  margin: var(--s-6) 0 0;
  font-size: var(--t-base); line-height: 1.35; max-width: 52ch;
  color: var(--ink);
}
.tk__estado[data-state='espera'] { color: var(--ink-50); }
.tk__estado[data-state='erro'] { color: var(--peach-ink); }
.tk__saida { margin: var(--s-6) 0 0; }

/* ─── Source note ─────────────────────────────────────────────────────── */
.csource {
  font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50);
  line-height: 1.6; margin-top: var(--s-8); max-width: 70ch;
}
.csource a { color: var(--ink-50); text-decoration: underline; text-underline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 860px) {
  .chero { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .posto { grid-template-columns: 36px 1fr auto; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
  .chip { width: 36px; height: 36px; border-radius: 10px; font-size: 11px; }
  .posto__tag { display: none; }
}


/* ─── Named cheapest station, inside the price card ───────────────────── */
.pcard__best {
  background: var(--paper); border-radius: 20px; padding: var(--s-4) var(--s-5);
  margin-top: 2px; display: grid; grid-template-columns: 56px 1fr auto;
  gap: var(--s-4); align-items: center;
}
.pcard__bestname { display: grid; gap: 2px; min-width: 0; }
.pcard__bestname b { font-weight: 500; font-size: var(--t-sm); }
.pcard__bestname > span {
  font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard__bestprice { font-size: var(--t-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcard__bestprice small { font-size: var(--t-xs); color: var(--ink-50); }

/* ─── Range: the two ends named, with their marks ─────────────────────── */
.crange {
  display: grid; grid-template-columns: 1fr minmax(120px, 1.4fr) 1fr;
  gap: clamp(var(--s-4), 3vw, var(--s-8)); align-items: center;
}
.crange__end { display: grid; gap: var(--s-1); justify-items: start; }
.crange__end--hi { justify-items: end; text-align: right; }
.crange__lab {
  font-family: var(--font-doc); font-size: var(--t-xs);
  color: var(--ink-50); margin-top: var(--s-2);
}
.crange__end b { font-size: var(--t-lg); font-weight: 400; font-variant-numeric: tabular-nums; }
.crange__who { font-size: var(--t-sm); }
.crange__tank { font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50); }
.crange__bar { position: relative; padding-bottom: var(--s-6); }
.crange__track {
  position: relative; height: 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--peach), var(--mauve));
}
.crange__med {
  position: absolute; top: -5px; width: 2px; height: 20px;
  background: var(--ink); border-radius: 1px; transform: translateX(-1px);
}
.crange__medlab {
  position: absolute; top: 22px; transform: translateX(-50%);
  font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink);
  white-space: nowrap;
}

/* ─── Footer ──────────────────────────────────────────────────────────── */
.cfoot { width: min(100% - 1.5rem, 1180px); margin: 0 auto var(--s-4); }
.cfoot__panel {
  background: var(--ink-deep); color: var(--paper);
  border-radius: clamp(24px, 3vw, 40px);
  padding: clamp(var(--s-6), 4vw, 3.5rem);
}
.cfoot__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.cfoot__mark {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-md); font-weight: 500; color: var(--paper);
}
.cfoot__glyph { background: var(--peach); border-radius: 10px; padding: 4px; }
.cfoot__socials { display: flex; gap: var(--s-2); }
.cfoot__socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--on-dark-20); color: var(--paper);
  transition: background 160ms ease;
}
.cfoot__socials a:hover { background: var(--peach); color: var(--ink-deep); }

/* The one link that pays for all of this. */
.cfoot__cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5); margin: clamp(var(--s-6), 4vw, 2.5rem) 0 var(--s-6);
  color: var(--paper); transition: background 160ms ease, border-color 160ms ease;
}
.cfoot__cta:hover { border-color: var(--peach); }
.cfoot__cta, .cfoot__cta:hover, .cfoot__mark { text-decoration: none; }
.cfoot__cta:hover { background: rgba(255,255,255,.28); }
.cfoot__cta:hover b { text-decoration: underline; text-underline-offset: 4px; }
.cfoot__cta b { display: block; color: var(--peach); font-weight: 500; font-size: var(--t-sm); margin-bottom: var(--s-1); }
.cfoot__cta span span, .cfoot__cta > span { font-size: var(--t-sm); color: rgba(255,255,255,.75); max-width: 60ch; }
.cfoot__arrow { font-size: var(--t-md); color: var(--peach); flex: none; }

.cfoot__source, .cfoot__legal {
  font-family: var(--font-doc); font-size: var(--t-xs); line-height: 1.6;
  color: rgba(255,255,255,.5); margin: 0 0 var(--s-2); max-width: 78ch;
}
.cfoot__source a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 3px; }
.cfoot__contracts { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--t-sm); }
.cfoot__contracts b { font-weight: 500; color: rgba(255,255,255,.9); }
.cfoot__contracts a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 3px; }
.cfoot__contracts a:hover { color: var(--peach); }
.cfoot__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--t-xs); }
.cfoot__links a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 3px; }
.cfoot__links a:hover { color: var(--peach); }

@media (max-width: 720px) {
  .crange { grid-template-columns: 1fr; gap: var(--s-5); }
  .crange__end--hi { justify-items: start; text-align: left; }
  .cfoot__cta { flex-direction: column; align-items: flex-start; }
}


/* ─── District: grouped rows, three per row, the rest behind a disclosure ─ */
.grupos { display: grid; gap: var(--s-3); }
.grupo {
  background: var(--cream); border-radius: var(--r-card);
  padding: var(--s-5); display: grid;
  grid-template-columns: minmax(150px, 190px) 1fr auto;
  gap: var(--s-5); align-items: start;
}
.grupo__label { display: grid; gap: var(--s-1); }
.grupo__label b { font-weight: 500; font-size: var(--t-sm); }
.grupo__label span { font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50); }
.grupo__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-5); }
.grupo[data-open='false'] .grupo__item:nth-child(n+4) { display: none; }

.grupo__item { display: flex; align-items: center; gap: var(--s-3); min-width: 0; color: var(--ink); }
.grupo__item:hover .grupo__name { text-decoration: underline; text-underline-offset: 3px; }
.grupo__badge {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; text-align: center;
  background: var(--paper); border: 1px solid var(--hairline);
  font-family: var(--font-doc); font-size: 11px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.grupo__badge--lo { background: var(--peach-pale); border-color: transparent; }
.grupo__badge--hi { background: var(--mauve); border-color: transparent; color: var(--paper); }
.grupo__name { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; }
.grupo__more {
  background: none; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4); cursor: pointer; white-space: nowrap;
  font: 400 var(--t-sm) var(--font-ui); color: var(--ink);
}
.grupo__more:hover { background: var(--paper); }

/* Concelhos with too few stations to carry a page of their own. */
.semdados { font-size: var(--t-sm); color: var(--ink-60); line-height: 1.9; max-width: 72ch; }
.semdados span { white-space: nowrap; }

@media (max-width: 860px) {
  .grupo { grid-template-columns: 1fr; gap: var(--s-4); }
  .grupo__items { grid-template-columns: repeat(2, 1fr); }
  .grupo__more { justify-self: start; }
}
@media (max-width: 520px) {
  .grupo__items { grid-template-columns: 1fr; }
}


/* ─── Fuel filter ─────────────────────────────────────────────────────── */
.ftabs {
  display: inline-flex; gap: 2px; background: var(--cream);
  border-radius: var(--r-pill); padding: 3px; margin-bottom: var(--s-5);
}
.ftab {
  border: 0; background: none; cursor: pointer; border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-5); font: 400 var(--t-sm) var(--font-ui); color: var(--ink-60);
  transition: background 160ms ease, color 160ms ease;
}
.ftab[aria-selected='true'] { background: var(--ink-deep); color: var(--paper); }

/* Each row carries every fuel it sells; the filter only changes which is
   foregrounded, so the page still reads correctly with JavaScript off. */
.posto__prices { display: grid; gap: 2px; text-align: right; }
.posto__p {
  font-variant-numeric: tabular-nums; font-size: var(--t-sm); white-space: nowrap;
}
.posto__p small { font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50); margin-right: var(--s-2); }
.posto__p b { font-weight: 400; }
/* One switch governs the page: hero card, list and map read the same state. */
.cpage[data-fuel] .f-gasoleo,
.cpage[data-fuel] .f-gasolina { display: none; }
.cpage[data-fuel='gasoleo'] .f-gasoleo,
.cpage[data-fuel='gasolina'] .f-gasolina { display: grid; }
.cpage[data-fuel] .posto__p { display: none; }
.cpage[data-fuel='gasoleo'] .posto__p--gasoleo,
.cpage[data-fuel='gasolina'] .posto__p--gasolina { display: block; }
.posto__p--muted { color: var(--ink-50); }



/* Hero card: one fuel at a time, so the cheapest station and the saving can
   never read against the wrong price. */
.pcard .ftabs { margin: 0 0 2px; width: 100%; justify-content: stretch; }
.pcard .ftab { flex: 1; }
.f-gasoleo, .f-gasolina { gap: 2px; }

/* ─── League tables ───────────────────────────────────────────────────── */
.ligas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.liga { display: grid; gap: 2px; align-content: start; }
.liga__head {
  font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50);
  letter-spacing: .04em; margin-bottom: var(--s-2);
}
.liga__row {
  display: grid; grid-template-columns: 26px 1fr auto; gap: var(--s-4);
  align-items: center; background: var(--cream); padding: var(--s-3) var(--s-4);
  color: var(--ink);
}
.liga__row:first-of-type { border-radius: var(--r-card) var(--r-card) 6px 6px; }
.liga__row:last-child { border-radius: 6px 6px var(--r-card) var(--r-card); }
.liga__row:hover { background: var(--blush); }
.liga__rank {
  font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50);
  font-variant-numeric: tabular-nums;
}
.liga__name { display: grid; gap: 1px; min-width: 0; }
.liga__name b { font-weight: 400; font-size: var(--t-sm); }
.liga__name span {
  font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.liga__price {
  text-align: right; font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.liga__price small { display: block; font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50); }
.liga__price--lo { color: var(--peach-ink); }

/* ─── Findings: three numbers worth quoting ───────────────────────────── */
.achados { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.achado {
  background: var(--cream); border-radius: var(--r-card);
  padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start;
}
.achado b {
  font-size: clamp(1.8rem, 4vw, var(--t-lg)); font-weight: 400; line-height: 1;
  color: var(--peach-ink); font-variant-numeric: tabular-nums;
}
.achado span { font-size: var(--t-sm); color: var(--ink-60); line-height: 1.5; }
.achado i { font-style: italic; }

@media (max-width: 720px) { .ligas { grid-template-columns: 1fr; gap: var(--s-8); } }

/* ─── Forecast card: the decomposition the incumbents publish ─────────── */
.prev { background: var(--paper); border-radius: 20px; padding: var(--s-5); display: grid; gap: var(--s-1); }
.prev + .prev { margin-top: 2px; }
.dec {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--hairline);
}
.dec__part {
  font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50);
  display: inline-flex; gap: var(--s-2); align-items: baseline;
}
.dec__part b { font-size: var(--t-sm); color: var(--ink); font-variant-numeric: tabular-nums; }
.dec__part--net b, .dec__part--net { color: var(--peach-ink); }
.dec__op { color: var(--ink-50); font-family: var(--font-doc); font-size: var(--t-xs); }

/* ─── Past weeks, each with its error ─────────────────────────────────── */
.semanas { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 2px; }
.semana {
  background: var(--cream); padding: var(--s-3) var(--s-4);
  display: grid; gap: 1px; border-radius: 8px;
}
.semana__wk { font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50); }
.semana__d { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.semana__d--up { color: var(--ink); }
.semana__d--down { color: var(--peach-ink); }
.semana__e { font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-50); }

/* The survey page's four answers (site/alertas/pergunta): the linked one is pre-selected, a click confirms. */
.tk__respostas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-4); }
.tk__respostas [aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ── The map shell (spec 2026-10-14) ─────────────────────────────────────
   Measured from Porto Layers at 1440 × 900: panel 400 px, inset 12, radius 20;
   pills 32 px high; band bar centred on the visible map.
   Panel width: one third of the screen, 400–560 px (the owner, 2026-10-14). */
.cshell { --cpanel-w: clamp(400px, 33.333vw, 560px); margin: 0; height: 100dvh; overflow: hidden; background: var(--map-land); color: var(--ink); }
.cstage { position: fixed; inset: 0; }
.cstage .cstage__map { position: absolute; inset: 0; width: 100%; height: 100%; } /* beats maplibre-gl.css .maplibregl-map { position: relative } */
.cstage__fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; max-width: none; margin: 0; padding: 0 24px 0 calc(var(--cpanel-w) + 36px);
  font: 400 15px/1.5 var(--font-ui); color: var(--ink-60); text-align: center; }
.cstage__fail[hidden] { display: none; }
.cshell .cpage { width: auto; margin: 0; padding: 0; background: none; border-radius: 0; }
.cmap-failed .cbands, .cmap-failed .cctl__toggle { display: none; }
/* JavaScript off: the band bar, «Dicas do Greg» and «Esconder painel» would do nothing */
html:not(.js) .cbands, html:not(.js) .cctl [data-dicas], html:not(.js) .cctl [data-painel] { display: none; }

.cpanel { position: fixed; z-index: 3; top: 12px; left: 12px; bottom: 12px; width: var(--cpanel-w); display: flex; flex-direction: column;
  background: var(--paper); border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(41,18,16,.06), 0 12px 40px rgba(41,18,16,.12); transition: transform .3s ease; }
[data-painel="off"] .cpanel { transform: translateX(calc(-100% - 24px)); }

.cpanel__hero { position: relative; padding: 24px 24px 28px; color: #fff; min-height: 220px; box-sizing: border-box; flex: none; display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(160deg, var(--ink-deep) 0%, var(--ink) 45%, #B8621B 80%, var(--peach) 100%); }
.cpanel__hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cpanel__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cpanel__top .crumb { margin: 0; gap: 6px; flex: 1; min-width: 0; }
.cpanel__top .crumb__pill { padding: 6px 12px; font-size: 13px; text-decoration: none; background: rgba(255,255,255,.14); color: #fff; }
.cpanel__top a.crumb__pill:hover { background: rgba(255,255,255,.26); color: #fff; }
.cpanel__top .crumb__pill--here { background: rgba(255,255,255,.28); }
.cpanel__when { flex: none; padding-top: 8px; white-space: nowrap; font: 400 12px/1 var(--font-doc); color: var(--on-dark-75); }
.cpanel__hero h1 { margin: 28px 0 0; font: 300 31.7px/1.08 var(--font-ui); letter-spacing: -.01em; color: #fff; }
.cpanel__hero h1 b { font-weight: 400; color: var(--peach); }

.ctabs { display: flex; gap: 8px; padding: 25px 24px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--tint-10); flex: none; }
.ctab { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--cream); color: var(--ink);
  font: 500 14px/18px var(--font-ui); text-decoration: none; }
.ctab--on { background: var(--ink-deep); color: #fff; }

.cpanel__body { flex: 1; overflow-y: auto; padding: 24px 24px 32px; scroll-behavior: smooth; }
.cpanel__body .csec { padding: 24px 0; border-bottom: 1px solid var(--tint-10); scroll-margin-top: 8px; }
.cpanel__body .csec h2 { font: 300 23.8px/1.15 var(--font-ui); margin: 0 0 12px; }

/* Top controls */
.cctl { position: fixed; z-index: 4; top: 12px; left: calc(var(--cpanel-w) + 24px); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; transition: left .3s ease; }
[data-painel="off"] .cctl { left: 12px; }
.cctl__home img { display: block; border-radius: 999px; }
.cctl__pill, .cctl .ftabs { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--paper); color: var(--ink); font: 500 14px/1 var(--font-ui); box-shadow: 0 1px 3px rgba(41,18,16,.12); cursor: pointer; }
.cctl .ftabs { padding: 3px; gap: 2px; margin: 0; } /* the page-wide .ftabs carries a bottom margin that pushed the row off-centre */
.cctl .ftab { height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.cctl .ftab[aria-selected="true"] { background: var(--ink-deep); color: #fff; }
/* Panel icon on «Esconder painel», as the reference's "Hide guide" */
.cctl__pill[data-painel]::before { content: ''; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='1.2' y='1.7' width='11.6' height='10.6' rx='2'/%3E%3Cpath d='M5.2 1.7v10.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='1.2' y='1.7' width='11.6' height='10.6' rx='2'/%3E%3Cpath d='M5.2 1.7v10.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.cctl__toggle i { width: 28px; height: 16px; border-radius: 999px; background: var(--ink-60); position: relative; transition: background .2s; }
.cctl__toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cctl__toggle[aria-pressed="true"] i { background: var(--ink-deep); }
.cctl__toggle[aria-pressed="true"] i::after { transform: translateX(12px); }

/* Bottom band bar, centred on the visible map */
.cbands { position: fixed; z-index: 4; bottom: 20px; left: calc(var(--cpanel-w) + 24px + (100vw - var(--cpanel-w) - 24px) / 2); transform: translateX(-50%);
  display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--paper); box-shadow: 0 1px 3px rgba(41,18,16,.12), 0 8px 24px rgba(41,18,16,.10); }
[data-painel="off"] .cbands { left: 50%; }
.cband { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); font: 500 14px/1 var(--font-ui); cursor: pointer; }
.cband span { font: 400 13px/1 var(--font-doc); color: var(--ink-60); }
.cband i { width: 8px; height: 8px; border-radius: 50%; }
.cband[data-band="barato"] i { background: var(--band-barato); }
.cband[data-band="normal"] i { background: var(--band-normal); }
.cband[data-band="caro"] i { background: var(--band-caro); }
.cband[aria-pressed="true"] { background: var(--ink-deep); color: #fff; }
.cband[aria-pressed="true"] span { color: var(--on-dark-75); }

/* Rows inside the panel: the name column shrinks, the price never clips */
.cpanel .ligas { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.cpanel .posto { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
.cpanel .posto .mark { width: 36px; height: 36px; }
.cpanel .posto__name b { overflow-wrap: anywhere; }
.cpanel .posto__prices { flex: none; }
.cpanel .posto__p > small:first-child { display: none; }
.cpanel .posto__p > small:last-child { display: block; margin: 0; }
.cpanel .posto__tag { grid-column: 2 / -1; grid-row: 2; margin-top: -4px; }
.cpanel .pcard__best { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
.cpanel .pcard__best .mark { width: 40px; height: 40px; }
.cpanel .pcard__bestname b { overflow-wrap: anywhere; }
.cpanel .pcard__bestname > span { white-space: normal; }
.cpanel .liga__row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }

/* Closed sections (spec 2026-10-14, the owner: «the panel is too noisy»): the text
   is in the HTML for crawlers; the panel shows the answer and the ask first. */
.cfold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.cfold > summary::-webkit-details-marker { display: none; }
.cfold > summary h2 { margin: 0; font: 300 20px/1.2 var(--font-ui); }
.cfold > summary::after { content: '+'; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--cream);
  display: grid; place-items: center; font: 400 18px/1 var(--font-ui); color: var(--ink); }
.cfold[open] > summary { margin-bottom: 16px; }
.cfold[open] > summary::after { content: '−'; }
.cfold > summary:focus-visible { outline: 2px solid var(--ink-deep); outline-offset: 4px; border-radius: 8px; }
.cpanel__body .csec:has(> .cfold) { padding: 18px 0; }

/* The answer card: the cheapest station and what it saves, once */
.canswer { padding: 0; background: none; margin-top: 20px; }
.cpanel .canswer .pcard__best { border-radius: 16px 16px 4px 4px; background: var(--cream); padding: 12px 14px; }
.canswer .pcard__save { border-radius: 4px 4px 16px 16px; padding: 14px 16px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.canswer .pcard__save > span { grid-column: 1; }
.canswer__map { grid-column: 2; grid-row: 1 / span 2; height: 36px; background: var(--paper); color: var(--ink-deep); }
html:not(.js) .canswer__map, .cmap-failed .canswer__map { display: none; }

/* The Tuesday email sits second in the panel: the same card, tighter */
.cpanel .calert { margin-top: 0; padding: 20px; }
.cpanel .calert__form { margin-top: 16px; }
/* The answer and the ask follow the lede without section gaps, so the email field is in the first screen at 1440 × 900 */
.cpanel__body > #resumo { padding-top: 0; padding-bottom: 16px; border-bottom: 0; }
.cpanel__body > #resumo:has(.canswer) + #alerta { padding-top: 0; }
.cpanel .calert h2 { font-size: 23.8px; }
.calert__next { display: grid; gap: 6px; margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--cream); color: var(--ink); text-decoration: none; }
.calert__next[hidden] { display: none; }
.calert__next span { font-size: var(--t-sm); color: var(--ink-60); }

/* The hub's concelho finder */
.cfind { margin-top: 24px; }
.cfind h2 { margin: 0 0 8px; font: 300 23.8px/1.15 var(--font-ui); }
.cfind p { margin: 0; font-size: var(--t-sm); color: var(--ink-60); }
.cfind__form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cfind__form input { flex: 1 1 100%; box-sizing: border-box; height: 48px; padding: 0 16px; border: 1px solid var(--tint-10); border-radius: 999px;
  background: var(--paper); font: 400 16px/1 var(--font-ui); color: var(--ink); }
.cfind__form input:focus-visible { outline: 2px solid var(--ink-deep); outline-offset: 2px; }
.cfind__form [data-perto][hidden] { display: none; }
.cfind__status { flex: 1 1 100%; margin: 0; font-size: var(--t-xs); color: var(--peach-ink); }
.cfind__status:empty { display: none; }

/* League tables: ranks 1–3 shown, 4–10 in the DOM behind «Ver os 10» */
.ligas[data-collapsed='true'] .liga__row--mais { display: none; }
.ligas[data-collapsed='true'] .liga__row:nth-child(4) { border-radius: 6px 6px var(--r-card) var(--r-card); }

/* Keyboard focus */
.cband:focus-visible, .ctab:focus-visible, .cctl__pill:focus-visible, .ftab:focus-visible { outline: 2px solid var(--ink-deep); outline-offset: 2px; }

/* MapLibre controls in Greg's pills */
.cshell .maplibregl-ctrl-group { border-radius: 10px; box-shadow: 0 1px 3px rgba(41,18,16,.12); }
.cshell .maplibregl-ctrl-top-right { top: 0; right: 0; }

/* Station card and Greg's tip */
.cpop .maplibregl-popup-content, .ctip .maplibregl-popup-content { border-radius: 16px; padding: 14px 16px; box-shadow: 0 8px 28px rgba(41,18,16,.18); font-family: var(--font-ui); color: var(--ink); }
.ccard__brand { margin: 0; font: 400 11px/1 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-60); display: flex; align-items: center; gap: 8px; }
/* The brand tile in the card (shared cardHtml; hub.css has the full .mk rules for the hubs) */
.ccard__brand .mk { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid var(--hairline); font: 600 11px/1 var(--font-ui); color: var(--ink); letter-spacing: .02em; }
.ccard__brand .mk--t { border: 0; }
.ccard__brand .mk--l img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.ccard__name { margin: 6px 0 2px; font: 500 16px/1.25 var(--font-ui); }
.ccard__where { margin: 0 0 10px; font-size: 13px; color: var(--ink-60); }
.ccard__price { margin: 0; } .ccard__price b { font: 400 23.8px/1 var(--font-ui); } .ccard__price small { margin-left: 4px; color: var(--ink-60); }
.ccard__tank { margin: 4px 0 10px; font-size: 13px; }
.ccard__band { margin: 0 0 12px; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ccard__band i { width: 8px; height: 8px; border-radius: 50%; background: var(--band-normal); }
.ccard--barato .ccard__band i { background: var(--band-barato); } .ccard--caro .ccard__band i { background: var(--band-caro); }
.ccard__go { display: inline-flex; height: 32px; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--ink-deep); color: #fff; font: 500 14px/1 var(--font-ui); text-decoration: none; }
.ccard__ways { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.ccard__waze { display: inline-flex; height: 32px; align-items: center; padding: 0 14px; border-radius: 999px; background: transparent; color: var(--ink-deep); box-shadow: inset 0 0 0 1px var(--ink-deep); font: 500 14px/1 var(--font-ui); text-decoration: none; }
.ccard__go, .ccard__waze { gap: 7px; } .ccard__go img, .ccard__waze img { width: 18px; height: 18px; border-radius: 4px; flex: none; }
.ccard__go img { background: #fff; border-radius: 50%; padding: 1px; box-sizing: border-box; }
.ccard__go:focus-visible, .ccard__waze:focus-visible { outline: 2px solid var(--ink-deep); outline-offset: 2px; }
/* Tip bubble measured on the reference's team tip: 236 px wide, radius 12, 26 px avatar, 13/20 text */
.ctip .maplibregl-popup-content { display: flex; gap: 8px; align-items: flex-start; box-sizing: border-box; max-width: 236px; padding: 8px 12px 10px 8px; border-radius: 12px; font-size: 13px; line-height: 20px; }
.ctip img { width: 26px; height: 26px; border-radius: 999px; flex: none; } .ctip p { margin: 0; }

/* ── Phone: the panel becomes a bottom sheet ───────────────────────────── */
.csheet__grip { display: none; }
@media (max-width: 760px) {
  .cstage__fail { padding: 0 24px; }
  .canswer .pcard__save { grid-template-columns: minmax(0, 1fr); }
  .canswer__map { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  /* The sheet is sized per state, not slid down: the scrolling body always ends
     on-screen, so the footer is reachable in every state. JavaScript off: full. */
  .cpanel { top: auto; left: 0; right: 0; bottom: 0; width: auto; border-radius: 20px 20px 0 0; height: 92dvh;
    transition: height .3s ease, transform .3s ease; }
  .js .cpanel { height: 45dvh; }
  .js [data-sheet="closed"] .cpanel { height: 132px; }
  .js [data-sheet="full"] .cpanel { height: 92dvh; }
  [data-painel="off"] .cpanel { transform: translateY(100%); }
  .js .csheet__grip { display: block; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 22px; border: 0; background: transparent; cursor: grab; }
  .csheet__grip::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255,255,255,.6); }
  .cpanel__hero { min-height: 0; padding: 26px 20px 20px; }
  .ctabs { padding: 14px 20px; }
  .cpanel__hero h1 { margin-top: 16px; font-size: 23.8px; }
  .cctl { left: 12px; right: 12px; }
  .cshell .maplibregl-ctrl-top-right { top: 92px; }
  .cshell .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) { display: none; } /* the reference has no zoom buttons on a phone: pinch */
  .cbands { left: 12px; right: 12px; transform: none; justify-content: space-between; bottom: calc(45dvh + 12px); }
  .cband { flex: 1 1 auto; justify-content: center; gap: 4px; padding: 0 6px; font-size: 13px; }
  .cband span { font-size: 11px; }
  [data-sheet="closed"] .cbands { bottom: 144px; }
  [data-sheet="full"] .cbands, [data-sheet="full"] .cctl { display: none; }
  /* panel hidden: beat the desktop [data-painel=off] rules (same specificity, later) */
  [data-painel="off"] .cbands { left: 12px; right: 12px; transform: none; bottom: 20px; }
  [data-painel="off"] .cctl { left: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cpanel, .cctl, .cctl__toggle i, .cctl__toggle i::after { transition: none; }
  .cpanel__body { scroll-behavior: auto; }
}

/* QA 2026-10-29 · B5: the station card above the map controls and the credit; P3: a 36 px close button */
.maplibregl-popup.cpop, .maplibregl-popup.ctip { z-index: 3; }
.cpop .maplibregl-popup-close-button { width: 36px; height: 36px; font-size: 22px; line-height: 1; border-radius: 50%; right: 2px; top: 2px; }
.cpop .maplibregl-popup-content { padding-right: 40px; }

/* QA 2026-10-29 · S11: the cheapest station's price never clips («2,181 €/»); the name gives way instead */
.cpanel .pcard__best { grid-template-columns: 40px minmax(0, 1fr) max-content; }
.pcard__bestprice { justify-self: end; padding-right: 2px; }
/* QA 2026-10-29 · tap targets ≥ 40 px on phones: map controls, fuel switch, sheet grip, crumbs */
@media (max-width: 760px) {
  .cctl__pill { height: 40px; } .cctl .ftabs { height: 46px; }
  .cctl .ftab { height: 40px; padding: 0 12px; }
  .ctab { min-height: 40px; display: inline-flex; align-items: center; }
  .cctl .ftabs { padding: 3px; }
  .cctl .ftab::after { content: ''; position: absolute; inset: -3px 0; } /* the 3 px rim of the switch counts as the tab */
  .cctl .ftab { position: relative; }
  .js .csheet__grip { top: -10px; height: 40px; }
  .csheet__grip::before { top: 18px; }
  .cpanel__top .crumb__pill { min-height: 40px; padding: 0 14px; }
  .cband { min-height: 40px; }
  .cshell .maplibregl-ctrl-top-right { top: 114px; } /* below the two rows of 40–46 px controls */
}