/* Coffee Atlas.
 *
 * Every colour, radius and space is an Organic token. The plugin defines no
 * palette of its own — a component that invents colours is how a design system
 * stops being one — so restyling the Atlas means editing styles.css.
 */

.eca-atlas {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* The map leads, so it takes the wider column. It was the narrower of the two
   (5fr against 6fr) while carrying a viewBox a third of which was empty, so the
   artwork rendered small and its labels collided. Trimmed and widened together
   the drawing is about a fifth larger at the same page width. */
.eca-atlas__body {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .eca-atlas__body { grid-template-columns: minmax(0, 1fr); }
}

/* ── Map ─────────────────────────────────────────────────────────────────── */

/* Sticky, so the map stays put while the reader works down the chip column —
   it is the thing they are drilling into. The offset is the header token plus a
   step of space; it was a hardcoded 96px, which was --head-h at the time and
   would have pinned the map under the header the moment that changed. */
.eca-atlas__map { position: sticky; top: calc(var(--head-h) + var(--space-4)); }
.eca-atlas__map svg { width: 100%; height: auto; display: block; }

/* Dimming, never hiding: an area outside the current step keeps its place so
   the map keeps its shape and the reader keeps their bearings. */
.eca-atlas__map [data-kew] { transition: opacity 160ms ease, fill 160ms ease; }

/* ZONE COLOUR LIVES HERE, NOT IN THE SVG.
 *
 * The map is allowed to come from the Media Library so the team can replace it
 * (eca_atlas_map_svg), and the uploaded copy had the zone fills baked in as
 * inline `--fill: var(--color-…)` pointing at ROLE tokens. That went wrong two
 * ways: South West was painted --color-accent, the same token .is-picked uses,
 * so it looked permanently selected; and Harar was --color-ember, which stopped
 * existing when the palette moved to the approved nine, leaving it black.
 *
 * Keying off data-zone instead means the palette owns the colours, any uploaded
 * map inherits them, and a fill can never again reference a token that has been
 * retired. The five are the atlas palette: qualitative colour for data, the
 * same hex in both themes, and deliberately not the theme's own accents.
 */
.eca-atlas__map [data-zone="North"]      { fill: var(--atlas-charcoal); }
.eca-atlas__map [data-zone="Rift"]       { fill: var(--atlas-harvest-gold); }
.eca-atlas__map [data-zone="South West"] { fill: var(--atlas-cherry-berry); }
.eca-atlas__map [data-zone="South East"] { fill: var(--atlas-forest-leaf); }
.eca-atlas__map [data-zone="Harar"]      { fill: var(--atlas-moss-green); }

/* SHAPES ONLY. The name labels also carry data-kew, so an unscoped rule here
   painted the selected zone's TEXT in Heritage Clay on a Heritage Clay fill —
   the labels were not low-contrast, they were the same colour as the ground
   under them. `:not(text)` is the whole fix; everything below is making the
   two states legible rather than accidental. */
.eca-atlas__map :is(path, polygon, g)[data-kew].is-dimmed { opacity: 0.2; }
.eca-atlas__map :is(path, polygon, g)[data-kew].is-picked { fill: var(--color-accent); }

/* ── Region labels ────────────────────────────────────────────────────────
   The label was Morning Mist ink behind a dark 3px halo, which was drawn for a
   dark map ground and has been sitting on a pale one. Ink and halo now swap
   together with the fill beneath, so a name is dark-on-pale when its area is
   waiting and light-on-clay when it is chosen. The halo is always the colour of
   what the text sits on, which is what keeps a name readable where it crosses
   a boundary.

   Labels dim far less than shapes: a greyed-out region still has to be
   identifiable, or a reader cannot tell what they are about to pick. */
.eca-atlas__map text[data-kew].atlas-label {
  fill: var(--label-ink, var(--color-text));
  stroke: var(--label-halo, var(--color-bg));
  stroke-width: 3px;
  paint-order: stroke;
  transition: fill 160ms ease, stroke 160ms ease, opacity 160ms ease;
}

/* Ink follows the fill the name is sitting on, per zone. Four of the five zones
   are dark enough to need light type; Rift is Harvest Gold, where Morning Mist
   reads 2.6 and Charcoal reads 6.0, so it keeps dark ink. The halo is always
   the colour underneath, which is what holds a name together where it crosses
   a boundary between two areas. */
.eca-atlas__map [data-zone="North"]      { --label-ink: var(--eca-morning-mist); --label-halo: var(--atlas-charcoal); }
.eca-atlas__map [data-zone="South West"] { --label-ink: var(--eca-morning-mist); --label-halo: var(--atlas-cherry-berry); }
.eca-atlas__map [data-zone="South East"] { --label-ink: var(--eca-morning-mist); --label-halo: var(--atlas-forest-leaf); }
.eca-atlas__map [data-zone="Harar"]      { --label-ink: var(--eca-morning-mist); --label-halo: var(--atlas-moss-green); }
.eca-atlas__map [data-zone="Rift"]       { --label-ink: var(--eca-charcoal);     --label-halo: var(--atlas-harvest-gold); }
.eca-atlas__map text[data-kew].atlas-label.is-dimmed { opacity: 0.55; }
.eca-atlas__map text[data-kew].atlas-label.is-picked {
  fill: var(--eca-morning-mist);
  stroke: var(--color-accent);
}

/* ── Chips ───────────────────────────────────────────────────────────────── */

.eca-atlas__controls { display: flex; flex-direction: column; gap: var(--space-4); }

.eca-atlas__group-label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text);
}

.eca-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* The split control. One border around both halves so it reads as a single
   chip, with a hairline between them showing there are two actions. */
/* The chip is 34px tall, which fixes the geometry the ⓘ depends on: a pill's
   right cap is a semicircle of radius 17px whose centre sits 17px in from the
   right edge, and the ⓘ is a 22px circle centred on exactly that point. That is
   what makes it read as sitting IN the chip rather than bolted onto the end. */
.eca-chip {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  min-height: 34px;
  border: 1px solid var(--color-taupe);
  border-radius: 999px;
  transition: opacity 160ms ease, border-color 120ms ease;
}

/* A dimmed chip is not available at this step of the drill-down, and its main
   half is genuinely disabled — it used to fade and still respond to a click,
   which is most of why the thing could not be understood.

   The ⓘ never dims and is never disabled. Reading about a place is not gated
   on having drilled down to it. */
/* 45% is the system's disabled opacity, set once in readme.md's states
   paragraph. This was 0.4, close enough to look deliberate and not be. */
.eca-chip.is-dimmed { opacity: 0.45; border-style: dashed; }
.eca-chip.is-dimmed .eca-chip__main { cursor: not-allowed; }
.eca-chip.is-dimmed .eca-chip__info { opacity: 1; cursor: pointer; }
.eca-chip__main:disabled { pointer-events: none; }

/* `hidden` is only display:none in the UA stylesheet, and it loses to ANY
   author display. Nearly everything in this widget sets one, so the attribute
   hid nothing: all four steps rendered at once, step two showed all sixteen
   areas, and Back sat on step one where there is nothing to go back to.

   Three separate bugs, one cause, and I fixed it twice element-by-element
   before writing the rule that covers the widget. Scoped to .eca-atlas so it
   cannot reach anything else. See .claude/rules/elementor.md, which documents
   this exact trap for the engine's role blocks. */
.eca-atlas [hidden] { display: none !important; }

/* A line of orientation under each step's number. The steps used to announce
   themselves with a label and nothing else, which said where you were but not
   what you were choosing between. */
.eca-atlas__group-hint {
  margin: 0 0 var(--space-4);
  max-width: 52ch;
  font-size: var(--text-md); line-height: 1.55;
  color: var(--color-text-secondary);
}

/* ── The buyer brief: step four ───────────────────────────────────────────
   The atlas can say what a coffee is. It cannot say whether you can buy it,
   and pretending otherwise would be the one dishonest thing on the page. */
.eca-atlas__brief-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-4xl); font-weight: var(--weight-medium);
  line-height: 1.25;
}
.eca-atlas__brief-note {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  font-size: var(--text-xl); line-height: 1.6;
}
.eca-atlas__brief-body {
  margin: 0 0 var(--space-6);
  max-width: 56ch;
  font-size: var(--text-xl); line-height: var(--leading-body);
  color: var(--color-text-secondary);
}
.eca-atlas__next { margin-top: var(--space-6); }

/* ── The record: step three ───────────────────────────────────────────────
   Where the drill-down ends. It used to be a modal sheet over the page, which
   made the destination read as an aside. */
.eca-atlas__record-zone {
  margin: 0 0 4px;
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.eca-atlas__record-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-4xl); font-weight: var(--weight-medium);
  line-height: 1.25;
}
/* A two-column definition list: the label narrow and quiet, the value doing the
   talking. It collapses to one column where there is no room for two. */
.eca-atlas__record-facts {
  margin: 0 0 var(--space-6);
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
}
.eca-atlas__record-facts dt {
  margin: 0; font-size: var(--text-md);
  color: var(--color-text-secondary);
}
.eca-atlas__record-facts dd {
  margin: 0; font-size: var(--text-xl); line-height: 1.5;
}
@media (max-width: 560px) {
  .eca-atlas__record-facts { grid-template-columns: minmax(0, 1fr); gap: 2px var(--space-4); }
  .eca-atlas__record-facts dd { margin-bottom: var(--space-3); }
}
/* The cup profile is inert on purpose: at the end of a geographic drill-down a
   flavour is a fact about where you arrived, not a control. Chip-shaped so it
   reads as familiar; no hover, no cursor, no press. */
.eca-atlas__record-tags .chip-plain { cursor: default; }

/* Back sits with the step line, ahead of the status it undoes. */
.eca-atlas__back {
  font: inherit; font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  background: none; border: 0; padding: 0;
  color: var(--color-accent); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.eca-atlas__back::before { content: "\2190"; }

/* The step line: where the reader is, and the way back up. */
.eca-atlas__step {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 34px; flex-wrap: wrap;
}
.eca-atlas__status {
  margin: 0; font-size: var(--text-base);
  font-weight: var(--weight-medium); color: var(--color-text);
}
.eca-atlas__reset {
  font: inherit; font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  background: none; border: 0; padding: 0;
  color: var(--color-accent); cursor: pointer; text-decoration: underline;
}

.eca-chip__main,
.eca-chip__info {
  font: inherit;
  cursor: pointer;
  color: var(--color-text);
  background: transparent;
  border: 0;
  transition: background-color 120ms ease, color 120ms ease;
}

.eca-chip__main {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-transform: capitalize;
  border-radius: 999px;
}
/* The region chips carry their own zone colour, which makes the row the map's
   legend as well as its control — five colours, named, right where they are
   used. There was no legend anywhere before, and the five zones were explained
   in prose below the widget. */
.eca-chip--zone .eca-chip__main::before {
  content: '';
  width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: var(--swatch, var(--color-taupe));
}
.eca-chip--zone[data-zone="North"]      { --swatch: var(--atlas-charcoal); }
.eca-chip--zone[data-zone="Rift"]       { --swatch: var(--atlas-harvest-gold); }
.eca-chip--zone[data-zone="South West"] { --swatch: var(--atlas-cherry-berry); }
.eca-chip--zone[data-zone="South East"] { --swatch: var(--atlas-forest-leaf); }
.eca-chip--zone[data-zone="Harar"]      { --swatch: var(--atlas-moss-green); }
/* On a chosen chip the fill is Heritage Clay, so the dot needs its own edge to
   stay a colour rather than a hole. */
.eca-chip--zone.is-on .eca-chip__main::before {
  box-shadow: 0 0 0 1.5px var(--eca-morning-mist);
}

/* Room for the ⓘ, so a long label never runs under it. */
.eca-chip:has(.eca-chip__info) .eca-chip__main { padding-right: 36px; }

.eca-chip__count {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Concentric with the right cap: a 22px hit area, (34 - 22) / 2 = 6px from the
   edge, vertically centred. No disc and no padding — the glyph carries the
   chip's own foreground, so it is white on a selected chip and the type colour
   on an unselected one. It was a filled light-blue circle, which read as a
   badge stuck on the end rather than as part of the control. */
.eca-chip__info {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* Ink, not transparency — it was 0.75 over the chip label's own colour. */
  color: var(--color-text-secondary);
}
.eca-chip__info svg { width: 18px; height: 18px; display: block; }
.eca-chip__info:hover,
.eca-chip__info:focus-visible { background: transparent; color: var(--color-text); }

.eca-chip__main:hover { background: var(--tint-hover); }

/* A selected chip is a Heritage Clay fill with a Morning Mist label, and the ⓘ
   is the same ink — it inherits, so there is one place that decides. The fill
   sits on __main, which spans the whole chip, so the absolutely-positioned ⓘ
   lands on it. */
.eca-chip.is-on { border-color: var(--color-accent); }
.eca-chip.is-on .eca-chip__main {
  background: var(--color-accent);
  color: var(--eca-morning-mist);
}
.eca-chip.is-on .eca-chip__info { color: var(--eca-morning-mist); }

.eca-chip__main:focus-visible,
.eca-chip__info:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* Silence is the wrong answer to a filter that matches nothing. */
.eca-atlas__empty {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  border: 1px dashed var(--color-taupe);
  border-radius: var(--radius-lg);
}

/* ── The sheet ───────────────────────────────────────────────────────────── */

.eca-atlas__scrim {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(27, 27, 27, 0.45);
  opacity: 0;
  transition: opacity 200ms ease;
}

.eca-atlas__scrim.is-open { opacity: 1; }

.eca-atlas__sheet {
  position: fixed;
  z-index: 901;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 76vh;
  overflow-y: auto;
  padding: 26px 28px 34px;
  background: var(--color-surface);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -12px 40px rgba(27, 27, 27, 0.22);
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.eca-atlas__sheet.is-open { transform: translateY(0); }

@media (min-width: 900px) {
  /* Still a bottom sheet on desktop, deliberately: it rises over the page
     without displacing it, so the map and the chips stay where the reader
     left them. A side panel reflows the layout and loses that. */
  .eca-atlas__sheet {
    right: auto;
    left: 50%;
    width: min(880px, 92vw);
    transform: translate(-50%, 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .eca-atlas__sheet.is-open { transform: translate(-50%, 0); }
}

.eca-atlas__sheet-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  font-size: var(--text-4xl);
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.eca-atlas__sheet-close:hover { background: var(--tint-hover); }

.eca-atlas__sheet-zone {
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text);
}

.eca-atlas__sheet-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
}

.eca-atlas__sheet-body p { margin: 0 0 var(--space-3); font-size: var(--text-xl);
  line-height: var(--leading-body); }
.eca-atlas__sheet-body strong { color: var(--color-accent-2); }