/* ==========================================================================
   MREMBO NATURALS — "FROM TANZANIA TO THE WORLD" SOURCING MAP
   ==========================================================================

   Everything here is prefixed .sm- and scoped under #sourcing-map. Nothing
   in this file can reach any other part of the site.

   --------------------------------------------------------------------------
   THE ONE COUPLING WITH THE JAVASCRIPT
   --------------------------------------------------------------------------
   The markers are HTML positioned in percentages on top of an SVG, so they
   only line up while the frame's aspect ratio equals the SVG's viewBox ratio.
   The JS renders BOTH crops and sets a coordinate pair for each; this file
   decides which is live. Three things therefore have to agree, and they are
   deliberately kept adjacent at the ≤700px breakpoint:

       which .sm-svg[data-crop] is displayed
       --sm-ratio on .sm-map
       whether .sm-pin reads --x or --xm

   Change one without the others and every marker lands in the wrong place.
   The numbers come from CROP in js/sourcing-map.js: 994/805 and 826/805.

   --------------------------------------------------------------------------
   COLOUR ON A DARK SECTION
   --------------------------------------------------------------------------
   Each location has two accent values, not one:

     --a       used on the cream landmass — the brand colour at full strength
     --a-lite  used on the dark green section — a lifted version of the same
               hue, because #000000 on #000000 is invisible

   Both were measured against the surface they actually sit on. Never use --a
   on the dark background or --a-lite on the map.

   --------------------------------------------------------------------------
   COLOUR IS NEVER THE ONLY SIGNAL
   --------------------------------------------------------------------------
   Operating, commissioning and planned each get a different marker SHAPE —
   solid, dashed ring, hollow — matched by the legend, and stated in words on
   the card. Selection is carried by size, a ring, a border weight change and
   aria-pressed, not by hue.
   ========================================================================== */

#sourcing-map{
  /* These three alphas are not taste. Each was measured against the LIGHTEST
     point of the backdrop it can land on — the top of the section gradient
     with the lime highlight over it, and again through the translucent
     picker button surface. At 0.52 the smallest of them measured 3.89:1 and
     failed AA; 0.72 is the value that clears 4.5:1 in every one of those
     positions. Lower any of them and small text starts failing at the top of
     the section only, which is easy to miss on screen. */
  --sm-fg:       #F5E3C0;
  --sm-fg-2:     rgba(245,227,192,0.84);
  --sm-fg-3:     rgba(245,227,192,0.72);
  --sm-hair:     rgba(245,227,192,0.16);
  --sm-hair-2:   rgba(245,227,192,0.10);
  --sm-surface:  rgba(245,227,192,0.06);
  --sm-ease:     cubic-bezier(.22,.9,.28,1);

  position:relative;
  color:var(--sm-fg);
  /* Top stop and highlight strength are also contrast-bound: the eyebrow is
     brand turmeric, and turmeric only clears 4.5:1 once the backdrop behind
     it is at or below #000000. */
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(216,143,4,0.06) 0%, rgba(216,143,4,0) 55%),
    linear-gradient(162deg, #000000 0%, #000000 48%, #000000 100%);
  border-top:1px solid rgba(216,143,4,0.14);
  border-bottom:1px solid rgba(216,143,4,0.14);
  overflow:hidden;
}

/* ==========================================================================
   1. LAYOUT
   ========================================================================== */

/* Copy and the location list on the left; the map, its legend and the
   card on the right. The card belongs with the map — clicking a marker
   should produce something directly under that marker — and putting it
   there is also what keeps the two columns close to the same height. */
.sm-shell{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "head  stage"
    "pick  stage"
    "foot  foot";
  column-gap:3.6rem;
  row-gap:2.2rem;
  align-items:start;
}
.sm-head        { grid-area:head; }
.sm-stage       { grid-area:stage; }
.sm-picker-block{ grid-area:pick; }
.sm-footnote    { grid-area:foot; }

.sm-stage{ display:flex; flex-direction:column; gap:1rem; }

@media (max-width:1080px){
  .sm-shell{ column-gap:2.4rem; }
}
@media (max-width:980px){
  .sm-shell{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    grid-template-areas:"head" "stage" "pick" "foot";
    row-gap:2rem;
  }
}

/* ==========================================================================
   2. THE COPY COLUMN
   ========================================================================== */

.sm-eyebrow{ color:var(--turmeric); }
.sm-title{
  font-size:clamp(1.95rem,3.3vw,2.7rem);
  margin:0.85rem 0 1rem;
  max-width:15ch;
  color:#FFFFFF;
}
.sm-title::after{
  content:""; display:block; width:64px; height:3px; margin-top:1.1rem;
  border-radius:2px;
  background:linear-gradient(90deg,var(--turmeric),rgba(216,143,4,0));
}
.sm-lede{ color:var(--sm-fg-2); max-width:46ch; }

.sm-statement{
  margin:1.6rem 0 0;
  padding:0 0 0 1.15rem;
  border-left:2px solid var(--turmeric);
}
.sm-statement p{
  font-family:'Quicksand', sans-serif; font-weight:400; font-size:1.16rem;
  line-height:1.45; color:var(--sm-fg); max-width:26ch;
}
.sm-statement cite{
  display:block; margin-top:0.5rem; font-style:normal;
  font-family:'Quicksand',sans-serif; font-weight:600;
  font-size:0.66rem; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--sm-fg-3);
}

/* ---------- the Farm -> Processing -> Product -> Global market rail ------- */

.sm-chain{
  list-style:none; margin:2.1rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:0.15rem;
}
.sm-chain-step{
  position:relative;
  display:flex; align-items:flex-start; gap:0.85rem;
  padding:0.5rem 0;
}
/* The connector runs from the icon above into this one. */
.sm-chain-link{
  position:absolute; left:17px; top:-0.35rem; width:2px; height:calc(0.7rem + 2px);
  background:var(--sm-hair);
}
.sm-chain-mark{
  flex:none; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  border:0; background:var(--sm-surface);
  color:var(--sm-fg-3);
  transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--sm-ease);
}
.sm-chain-mark .sm-ico{ width:18px; height:18px; }
.sm-chain-label{
  display:block;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.86rem;
  color:var(--sm-fg-2); transition:color .3s ease;
}
.sm-chain-note{
  display:block; font-size:0.79rem; line-height:1.45; color:var(--sm-fg-3);
}
.sm-chain-step.is-on .sm-chain-mark{
  background:var(--turmeric); border-color:var(--turmeric); color:#000000;
  transform:scale(1.06);
}
.sm-chain-step.is-on .sm-chain-label{ color:#FFFFFF; }

/* ==========================================================================
   3. THE MAP FRAME
   ========================================================================== */

.sm-map{
  /* 994 / 805. The phone crop overrides this at the ≤700px breakpoint, in
     the same place it swaps the <svg> and the marker coordinates — all three
     move together or the markers land in the wrong country. */
  --sm-ratio:1.2348;
  position:relative;
  aspect-ratio:var(--sm-ratio);
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(216,143,4,0.18);
  /* Same constraint as the section: the lightest stop is what the inset
     caption and the ocean label sit on at small widths. */
  background:radial-gradient(118% 92% at 26% 8%, #000000 0%, #000000 44%, #000000 100%);
  box-shadow:0 44px 84px -46px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.05);
}
.sm-svg{ position:absolute; inset:0; width:100%; height:100%; }

/* Two crops of the same geometry are rendered; exactly one is ever shown. */
.sm-svg[data-crop="narrow"]{ display:none; }

.sm-graticule line{ stroke:rgba(245,227,192,0.055); stroke-width:1; }

/* Neighbouring landmass — present, never competing. */
.sm-region{ fill:#000000; stroke:rgba(216,143,4,0.14); stroke-width:1.2; }

/* Tanzania. The only cream shape on the map, which is what makes it read as
   the subject rather than one country among several. */
.sm-land{ stroke:#F5E3C0; stroke-width:1.6; }
.sm-svg[data-crop="wide"] .sm-land{ fill:url(#smLand-wide); }
.sm-svg[data-crop="narrow"] .sm-land{ fill:url(#smLand-narrow); }
.sm-water{ fill:#000000; stroke:rgba(245,227,192,0.10); stroke-width:1; }
.sm-island{ fill:#F5E3C0; stroke:#F5E3C0; stroke-width:1.2; }

.sm-country{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:26px;
  letter-spacing:0.18em; text-transform:uppercase;
  fill:#000000;
}
.sm-nb{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:19px;
  letter-spacing:0.13em; text-transform:uppercase;
  fill:rgba(245,227,192,0.58);
}
.sm-nb.is-ocean{ fill:#D88F04; font-style:normal; letter-spacing:0.16em; }

/* ---------- the export arc ---------- */

.sm-arc{
  fill:none; stroke:var(--turmeric); stroke-width:2.6;
  stroke-linecap:round; stroke-dasharray:2 14;
  opacity:0.42;
  transition:opacity .45s ease, stroke-width .45s ease;
}
.sm-arc-end{ fill:var(--turmeric); opacity:0.5; transition:opacity .45s ease; }
.sm-map.is-export .sm-arc{ opacity:1; stroke-width:3.2; }
.sm-map.is-export .sm-arc-end{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  .sm-map.is-export .sm-arc{ animation:smFlow 2.6s linear infinite; }
  @keyframes smFlow{ to{ stroke-dashoffset:-32; } }
}

/* ==========================================================================
   4. MARKERS
   HTML buttons over the SVG, so they get real focus rings, real 46px touch
   targets and real typography at every screen size.
   ========================================================================== */

.sm-pins{ position:absolute; inset:0; }

.sm-pin{
  position:absolute;
  /* Set by applyCrop() in the JS, which owns the mapping from longitude and
     latitude to a percentage of whichever crop is on screen. */
  left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  width:46px; height:46px;
  margin:0; padding:0; border:0; background:none;
  display:grid; place-items:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.sm-pin[data-accent="green"]      { --a:#000000; }
.sm-pin[data-accent="turmeric"]   { --a:#D88F04; }
.sm-pin[data-accent="terracotta"] { --a:#D88F04; }
.sm-pin[data-accent="neutral"]    { --a:#000000; }

.sm-pin-dot{
  position:relative; display:block; box-sizing:border-box;
  width:19px; height:19px; border-radius:50%;
  background:var(--a);
  box-shadow:0 0 0 3.5px #F5E3C0, 0 7px 16px -5px rgba(0,0,0,0.55);
  transition:transform .3s var(--sm-ease), box-shadow .3s ease;
}
/* Commissioning — solid, inside a dashed ring. */
.sm-pin[data-status="commissioning"] .sm-pin-dot::after{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  border:2px dashed var(--a); opacity:0.85;
}
/* Planned — hollow. Nothing is built here yet and the marker says so. */
.sm-pin[data-status="planned"] .sm-pin-dot{
  background:#FFFFFF; border:0;
  width:21px; height:21px;
  box-shadow:0 0 0 2.5px rgba(245,227,192,0.85), 0 7px 16px -5px rgba(0,0,0,0.5);
}

.sm-pin-pulse{ position:absolute; inset:0; border-radius:50%; }

.sm-pin-label{
  position:absolute; left:calc(100% - 9px); top:50%;
  transform:translateY(-50%);
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.79rem;
  line-height:1; white-space:nowrap;
  color:#000000; background:rgba(245,227,192,0.94);
  border:0;
  padding:0.3rem 0.6rem; border-radius:999px;
  box-shadow:0 4px 12px -6px rgba(0,0,0,0.5);
  pointer-events:none;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s var(--sm-ease);
}
.sm-pin.is-flip .sm-pin-label{ left:auto; right:calc(100% - 9px); }

/* ---- hover: desktop pointers only, per the site's interaction rules ---- */
@media (hover:hover) and (pointer:fine){
  .sm-pin:hover .sm-pin-dot{ transform:scale(1.18); }
  .sm-pin:hover .sm-pin-label{ border-color:var(--a); }
}
.sm-pin:focus-visible{ outline:none; }
.sm-pin:focus-visible .sm-pin-dot{
  box-shadow:0 0 0 3.5px #F5E3C0, 0 0 0 6.5px var(--turmeric), 0 7px 16px -5px rgba(0,0,0,0.5);
}
.sm-pin:active .sm-pin-dot{ transform:scale(1.06); }

/* ---- selected ---- */
.sm-pin.is-active .sm-pin-dot{ transform:scale(1.42); }
.sm-pin.is-active .sm-pin-label{
  border-color:var(--a); border-width:2px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,0.65);
  transform:translateY(-50%) scale(1.04);
}
.sm-pin.is-active .sm-pin-pulse{
  border:2px solid var(--a); opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .sm-pin.is-active .sm-pin-pulse{ animation:smPulse 2.6s ease-out infinite; }
  @keyframes smPulse{
    0%  { transform:scale(1);   opacity:0.55; }
    70% { transform:scale(2.6); opacity:0; }
    100%{ transform:scale(2.6); opacity:0; }
  }
}
/* Unselected markers step back once something is chosen. */
.sm-map.is-selecting .sm-pin:not(.is-active) .sm-pin-dot{ opacity:0.6; }
.sm-map.is-selecting .sm-pin:not(.is-active) .sm-pin-label{ opacity:0.72; }

/* ---- entrance ----
   Hidden ONLY while armed and not yet revealed, and written after the
   .is-selecting rules above so it wins over them for that window — otherwise
   a deep-linked selection pops its unselected markers in early.

   Two things have to be true for a marker to be invisible: the script ran and
   armed the animation, AND the reveal has not happened yet. The script never
   arms it under reduced motion, and it force-reveals on a timer if the
   observer never fires, so there is no path where the markers stay hidden. */
/* The redundant-looking .sm-pin in these two selectors is load-bearing: it
   lifts them to the same specificity as the .is-selecting rules above, and
   being later in the file is then what makes them win. */
.sm-map.is-armed:not(.is-revealed) .sm-pin .sm-pin-dot{ opacity:0; transform:scale(0.4); }
.sm-map.is-armed:not(.is-revealed) .sm-pin .sm-pin-label{ opacity:0; }

.sm-map.is-armed.is-revealed .sm-pin-dot{
  transition:opacity .5s ease calc(var(--i) * 110ms + 160ms),
             transform .6s var(--sm-ease) calc(var(--i) * 110ms + 160ms);
}
.sm-map.is-armed.is-revealed .sm-pin-label{
  transition:opacity .5s ease calc(var(--i) * 110ms + 320ms);
}

/* ==========================================================================
   5. IN-FRAME FURNITURE — locator inset, global markets
   ========================================================================== */

.sm-inset{
  position:absolute; left:1.1rem; bottom:1.1rem;
  width:22%; max-width:148px; min-width:84px;
  pointer-events:none;
}
.sm-inset svg{ width:100%; height:auto; overflow:visible; }
.sm-inset-land{ fill:rgba(245,227,192,0.13); stroke:rgba(245,227,192,0.22); stroke-width:1; }
.sm-inset-tz{ fill:var(--turmeric); stroke:#F5E3C0; stroke-width:1.2; }
.sm-inset-cap{
  display:block; margin-top:0.5rem;
  font-family:'Quicksand',sans-serif; font-weight:700;
  font-size:0.65rem; letter-spacing:0.11em; text-transform:uppercase;
  color:var(--sm-fg-2);
}
.sm-inset-cap span{
  display:block; font-weight:600; letter-spacing:0.09em;
  color:var(--sm-fg-3);
}

.sm-markets{
  position:absolute; right:1.1rem; top:1.1rem;
  width:min(44%,244px);
  background:rgba(0,0,0,0.78);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:0;
  border-radius:14px;
  padding:0.75rem 0.85rem 0.8rem;
  box-shadow:0 20px 40px -26px rgba(0,0,0,0.9);
}
.sm-markets-head{
  display:flex; align-items:center; gap:0.42rem;
  font-family:'Quicksand',sans-serif; font-weight:700;
  font-size:0.66rem; letter-spacing:0.11em; text-transform:uppercase;
  color:var(--turmeric); margin-bottom:0.5rem;
}
.sm-markets-head .sm-ico{ width:15px; height:15px; }
.sm-mkt-row{ display:flex; flex-wrap:wrap; gap:0.3rem; }
.sm-mkt{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.72rem;
  color:var(--sm-fg);
  background:rgba(245,227,192,0.10); border:0;
  border-radius:999px; padding:0.2rem 0.55rem; white-space:nowrap;
}
.sm-mkt.is-pipe{
  background:none; border-style:dashed;
  color:var(--sm-fg-2); font-weight:600;
}
.sm-mkt-pipe{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.3rem;
  margin-top:0.5rem; padding-top:0.5rem; border-top:1px dashed var(--sm-hair-2);
}
.sm-mkt-pipe-label{
  font-family:'Quicksand',sans-serif; font-weight:700;
  font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--sm-fg-3);
}

/* ---------- legend, under the frame ---------- */

.sm-legend{
  display:flex; flex-wrap:wrap; gap:0.5rem 1.4rem;
  padding:0 0.3rem;
}
.sm-legend-item{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.73rem;
  color:var(--sm-fg-2);
}
.sm-legend-sw{
  width:13px; height:13px; border-radius:50%; flex:none;
  box-sizing:border-box; background:#FFFFFF;
}
.sm-legend-item[data-status="commissioning"] .sm-legend-sw{
  background:#FFFFFF; box-shadow:0 0 0 2px rgba(245,227,192,0.35);
}
.sm-legend-item[data-status="operating"] .sm-legend-sw{ background:#D88F04; }
.sm-legend-item[data-status="planned"] .sm-legend-sw{
  background:none; border:2px dashed #F5E3C0;
}

/* ==========================================================================
   6. THE PICKER
   ========================================================================== */

.sm-picker-title{
  font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.32rem; color:#FFFFFF;
}
.sm-picker-hint{
  margin-top:0.4rem; font-size:0.88rem; line-height:1.55;
  color:var(--sm-fg-2); max-width:42ch;
}
.sm-picker{
  display:grid; grid-template-columns:1fr 1fr; gap:0.6rem;
  margin-top:1.1rem;
}
@media (max-width:1180px) and (min-width:981px){ .sm-picker{ grid-template-columns:1fr; } }
@media (max-width:460px){ .sm-picker{ grid-template-columns:1fr; } }

.sm-pick{
  display:flex; align-items:center; gap:0.7rem;
  /* A <button> does not inherit font-family or size from the page, so the
     role line underneath would otherwise render in the browser default. */
  font-family:'Quicksand', system-ui, sans-serif;
  font-size:1rem;
  text-align:left; cursor:pointer;
  padding:0.72rem 0.85rem;
  border-radius:14px;
  border:0;
  background:var(--sm-surface);
  color:var(--sm-fg);
  transition:background-color .2s ease, border-color .2s ease, transform .2s var(--sm-ease);
}
.sm-pick[data-accent="green"]      { --a-lite:#D88F04; }
.sm-pick[data-accent="turmeric"]   { --a-lite:#F5E3C0; }
.sm-pick[data-accent="terracotta"] { --a-lite:#D88F04; }
.sm-pick[data-accent="neutral"]    { --a-lite:#F5E3C0; }

.sm-pick-dot{
  flex:none; box-sizing:border-box;
  width:11px; height:11px; border-radius:50%;
  background:var(--a-lite);
}
.sm-pick[data-status="planned"] .sm-pick-dot{ background:none; border:2px dashed var(--a-lite); }
.sm-pick[data-status="commissioning"] .sm-pick-dot{ box-shadow:0 0 0 2.5px rgba(245,227,192,0.28); }

.sm-pick-name{
  display:block;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.88rem;
}
.sm-pick-role{
  display:block; margin-top:0.1rem;
  font-size:0.75rem; line-height:1.4; color:var(--sm-fg-3);
}
@media (hover:hover) and (pointer:fine){
  .sm-pick:hover{ background:rgba(245,227,192,0.11); border-color:rgba(245,227,192,0.28); transform:translateY(-2px); }
}
.sm-pick:focus-visible{ outline:2px solid var(--turmeric); outline-offset:3px; }
.sm-pick:active{ transform:translateY(0); }
.sm-pick.is-active{
  background:rgba(245,227,192,0.13);
  border-color:var(--a-lite);
  box-shadow:inset 3px 0 0 var(--a-lite);
}
.sm-pick.is-active .sm-pick-name{ color:#FFFFFF; }

/* ==========================================================================
   7. THE CARD
   In normal flow on desktop. A bottom sheet on phones — same element, same
   markup, different position.
   ========================================================================== */

.sm-cardslot{ position:relative; min-height:120px; }

.sm-card{
  position:relative;
  background:var(--white);
  color:var(--ink);
  border:0;
  border-radius:18px;
  padding:1.5rem 1.5rem 1.35rem;
  box-shadow:0 34px 64px -40px rgba(0,0,0,0.75);
}
.sm-card:focus{ outline:none; }
.sm-card:focus-visible{ outline:2px solid var(--turmeric); outline-offset:3px; }
.sm-card[data-accent="green"]      { --a:#000000; }
.sm-card[data-accent="turmeric"]   { --a:#000000; }
.sm-card[data-accent="terracotta"] { --a:#D88F04; }
.sm-card[data-accent="neutral"]    { --a:#000000; }
.sm-card.is-open{  }

/* Deliberately no `both` fill mode, here or on the sheet below. With `both`,
   an animation that never gets a frame — a throttled background tab, a
   browser that skips it — leaves the element parked on the `from` keyframe:
   invisible, or in the sheet's case slid entirely off the bottom of the
   screen. Without a fill mode the element always rests at its real CSS
   position and the animation is pure decoration on top of that. */
@media (prefers-reduced-motion: no-preference){
  .sm-card.is-open{ animation:smCardIn .42s var(--sm-ease); }
  @keyframes smCardIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
}

/* ---------- empty state ---------- */

.sm-card.is-empty{
  background:rgba(245,227,192,0.045);
  border:0;
  box-shadow:none;
  color:var(--sm-fg);
  padding:1.9rem 1.6rem;
}
.sm-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:0.55rem; }
.sm-empty-ico{ width:26px; height:26px; color:var(--turmeric); }
.sm-empty h3{
  font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.18rem; color:#FFFFFF;
}
.sm-empty p{ font-size:0.9rem; line-height:1.6; color:var(--sm-fg-2); max-width:42ch; }

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

.sm-card-grip{ display:none; }

.sm-card-close{
  position:absolute; top:0.85rem; right:0.9rem;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cream-2); border:0;
  color:var(--ink); cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.sm-card-close svg{ width:16px; height:16px; }
@media (hover:hover) and (pointer:fine){
  .sm-card-close:hover{ background:var(--terracotta); border-color:var(--terracotta); color:#FFFFFF; }
}
.sm-card-close:focus-visible{ outline:2px solid var(--turmeric); outline-offset:2px; }

.sm-card-head{ padding-right:2.6rem; }
.sm-card-region{
  font-family:'Quicksand',sans-serif; font-weight:700;
  font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--neutral);
}
.sm-card-name{
  font-family:'Quicksand', sans-serif; font-weight:500;
  font-size:1.72rem; line-height:1.12; margin:0.35rem 0 0;
  display:flex; align-items:baseline; gap:0.55rem; flex-wrap:wrap;
}
.sm-card-place{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.8rem;
  letter-spacing:0.05em; color:var(--neutral);
}
/* A real element rather than ::before content, so the separator survives
   copy-paste and is hidden from screen readers instead of being read out. */
.sm-card-sep{ color:var(--line); margin:0 -0.15rem; }
.sm-card-role{
  margin-top:0.3rem;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.88rem;
  color:var(--a);
}
.sm-badge{
  display:inline-flex; align-items:center; gap:0.4rem; margin-top:0.75rem;
  font-family:'Quicksand',sans-serif; font-weight:700;
  font-size:0.63rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.26rem 0.6rem; border-radius:999px;
  border:0; background:var(--cream); color:var(--ink);
}
.sm-badge-sw{
  width:9px; height:9px; border-radius:50%; box-sizing:border-box; flex:none;
  background:var(--green-2);
}
.sm-badge[data-status="commissioning"] .sm-badge-sw{ background:var(--turmeric); }
.sm-badge[data-status="planned"] .sm-badge-sw{ background:none; border:2px dashed var(--neutral); }

/* ---------- rows ---------- */

.sm-rows{ margin-top:1.25rem; display:flex; flex-direction:column; }
.sm-row{
  display:grid; grid-template-columns:132px minmax(0,1fr);
  gap:0.4rem 1rem;
  padding:0.85rem 0;
  border-top:1px solid var(--cream-2);
}
.sm-row:first-child{ border-top:0; padding-top:0; }
@media (max-width:520px){
  .sm-row{ grid-template-columns:1fr; gap:0.5rem; }
}

/* A two-up row grid was tried here and made the card TALLER, not shorter:
   halving the column width roughly doubles the wrap height of the notes.
   The card is kept single-column and the long logistics note is folded into
   the disclosure below instead. */

.sm-detail{ margin-top:0.55rem; }
.sm-detail > summary{
  display:inline-flex; align-items:center; gap:0.35rem;
  cursor:pointer; list-style:none;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.74rem;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--a, var(--green)); padding:0.18rem 0;
}
.sm-detail > summary::-webkit-details-marker{ display:none; }
.sm-detail > summary::after{
  content:""; width:7px; height:7px; flex:none;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .22s var(--sm-ease);
}
.sm-detail[open] > summary::after{ transform:translateY(1px) rotate(-135deg); }
.sm-detail > summary:focus-visible{ outline:2px solid var(--turmeric); outline-offset:2px; border-radius:4px; }
@media (hover:hover) and (pointer:fine){
  .sm-detail > summary:hover{ text-decoration:underline; text-underline-offset:3px; }
}
.sm-detail p{
  margin-top:0.45rem;
  font-size:0.84rem; line-height:1.6; color:var(--neutral);
  padding-left:0.75rem; border-left:2px solid var(--cream-2);
}
.sm-row-key{
  display:flex; align-items:center; gap:0.45rem;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.72rem;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--neutral);
  padding-top:0.1rem;
}
.sm-row-key .sm-ico{ width:17px; height:17px; color:var(--a); flex:none; }
.sm-row-val{ font-size:0.9rem; line-height:1.6; color:var(--neutral); min-width:0; }
.sm-row-val > * + *{ margin-top:0.5rem; }
.sm-strong{ font-weight:600; color:var(--ink); font-size:0.95rem; }
.sm-note{ font-size:0.84rem; line-height:1.6; color:var(--neutral); }

.sm-chips{ display:flex; flex-wrap:wrap; gap:0.34rem; }
.sm-chip{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.74rem;
  padding:0.24rem 0.6rem; border-radius:999px;
  background:var(--cream); border:0; color:var(--ink);
}
.sm-chip.is-prod{ background:var(--green-soft); border-color:#F5E3C0; color:#000000; }

/* A missing figure is styled to be conspicuous. It should look like a gap,
   because it is one. */
.sm-gap{
  display:inline-block;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.78rem;
  color:#000000; background:var(--turmeric-soft);
  border:0; border-radius:10px;
  padding:0.28rem 0.6rem;
}

/* The reason clause is a separate node so it can be translated on its own.
   The dash is punctuation and lives in CSS, not in either string. */
/* The reason clause is its own element so it can be translated separately
   from the label. The dash between them is punctuation and belongs to
   neither string, so it lives here. */
.sm-gap-why::before{ content:": "; }

/* "There is genuinely nothing here yet." Deliberately quiet — this is not a
   gap in the data and must not be mistaken for one. */
.sm-none{
  font-size:0.9rem; line-height:1.55; color:var(--neutral);
  padding-left:0.75rem; border-left:2px solid var(--line);
}

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

.sm-card-foot{
  margin-top:1.15rem; padding-top:1rem;
  border-top:1px solid var(--cream-2);
  display:flex; flex-direction:column; gap:0.7rem; align-items:flex-start;
}
.sm-flag{
  font-size:0.8rem; line-height:1.55; color:#000000;
  background:var(--turmeric-soft); border:0;
  border-radius:10px; padding:0.5rem 0.7rem;
}
.sm-src{
  font-family:'Quicksand',sans-serif; font-weight:600;
  font-size:0.68rem; letter-spacing:0.03em; color:var(--neutral);
}

/* ---------- provenance: how confident we are, and why ---------- */

.sm-prov{ width:100%; }
.sm-prov > summary{
  display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;
  cursor:pointer; list-style:none; padding:0.2rem 0;
}
.sm-prov > summary::-webkit-details-marker{ display:none; }
.sm-prov > summary:focus-visible{ outline:2px solid var(--turmeric); outline-offset:3px; border-radius:6px; }

.sm-verif{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-family:'Quicksand',sans-serif; font-weight:700;
  font-size:0.63rem; letter-spacing:0.09em; text-transform:uppercase;
  padding:0.24rem 0.6rem; border-radius:999px;
  border:0; background:var(--cream); color:var(--ink);
}
.sm-verif-dot{
  width:8px; height:8px; border-radius:50%; flex:none; box-sizing:border-box;
  background:var(--green-2);
}
/* Each level gets a different dot TREATMENT, not just a different hue, so
   the three read apart in greyscale and for colour-blind visitors. */
.sm-verif[data-verif="partially_verified"] .sm-verif-dot{
  background:linear-gradient(90deg,var(--turmeric) 50%,transparent 50%);
  border:1px solid var(--turmeric);
}
.sm-verif[data-verif="general_geographic_information"] .sm-verif-dot{
  background:none; border:2px dotted var(--neutral);
}

.sm-prov-label{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.72rem;
  color:var(--a, var(--green)); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
@media (hover:hover) and (pointer:fine){
  .sm-prov > summary:hover .sm-prov-label{ text-decoration-thickness:2px; }
}
.sm-prov-body{
  margin-top:0.6rem; padding-left:0.8rem;
  border-left:2px solid var(--cream-2);
  font-size:0.82rem; line-height:1.6; color:var(--neutral);
}
.sm-prov-body > * + *{ margin-top:0.5rem; }
.sm-prov-h{
  font-family:'Quicksand',sans-serif; font-weight:700;
  font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink);
}
.sm-prov-body ul{ margin:0.35rem 0 0; padding-left:1.05rem; }
.sm-prov-body li{ margin-top:0.3rem; }
.sm-more{ cursor:pointer; }

.sm-footnote{
  margin-top:0.6rem;
  font-size:0.79rem; line-height:1.6; color:var(--sm-fg-3);
  max-width:70ch;
}

/* ==========================================================================
   8. PHONES AND SMALL TABLETS
   A deliberate second layout, not a squeezed copy of the first.
   ========================================================================== */

@media (max-width:860px){

  /* ---- the card becomes a bottom sheet ---- */
  .sm-cardslot{ min-height:0; }

  /* The empty prompt is desktop furniture — it fills the space under the
     map. On a phone it would just be a third block of text between the map
     and the location list, saying what the list already says. */
  .sm-card.is-empty{ display:none; }

  .sm-scrim{
    position:fixed; inset:0; z-index:60;
    background:rgba(0,0,0,0.5);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; transition:opacity .3s ease;
    border:0; padding:0;
  }
  .sm-scrim.is-on{ opacity:1; }

  .sm-card.is-open{
    position:fixed; z-index:61;
    left:0; right:0; bottom:0;
    max-height:78vh; overflow-y:auto;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    border-radius:22px 22px 0 0;
    border-left:0; border-right:0; border-bottom:0;
    padding:1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    box-shadow:0 -18px 50px -18px rgba(0,0,0,0.55);
  }
  @media (prefers-reduced-motion: no-preference){
    /* No fill mode — see the note on smCardIn. */
    .sm-card.is-open{ animation:smSheetIn .34s var(--sm-ease); }
    @keyframes smSheetIn{ from{ transform:translateY(100%); } to{ transform:none; } }
  }

  /* The grab handle only exists in sheet mode. */
  .sm-card.is-open .sm-card-grip{
    display:block; width:40px; height:4px; border-radius:2px;
    background:var(--line); margin:-0.35rem auto 0.9rem;
  }
  /* 34px is fine for a mouse and too small for a thumb. */
  .sm-card.is-open .sm-card-close{ top:0.6rem; right:0.7rem; width:44px; height:44px; }
  .sm-card.is-open .sm-card-close svg{ width:18px; height:18px; }
  .sm-card.is-open .sm-card-head{ padding-right:3.2rem; }

  .sm-card.is-empty{ padding:1.5rem 1.3rem; }
}

@media (max-width:700px){

  /* ---- the phone crop ----
     These four rules move as one. The narrow <svg> becomes visible, the
     frame takes the narrow viewBox's ratio, and the markers switch to the
     coordinates computed against that same crop. Changing any one of them
     alone puts every marker in the wrong place. */
  .sm-svg[data-crop="wide"]{ display:none; }
  .sm-svg[data-crop="narrow"]{ display:block; }
  .sm-map{ --sm-ratio:1.0261; }          /* 826 / 805 */
  .sm-pin{ left:var(--xm); }

  /* The map is the one element worth breaking the page gutter for. Pulling
     it out to a 1.4rem bleed widens the frame by about 15%, which is what
     buys the markers their tap clearance. The radius stays, because rounded
     panels are the site's language everywhere else and an edge-to-edge map
     would read as a different product. */
  .sm-map{
    margin-left:-1.4rem; margin-right:-1.4rem;
    border-radius:18px;
  }

  /* Only the chosen marker keeps its label. Four pill labels on a 340px map
     is noise, and the picker below already names every location. */
  .sm-pin-label{ display:none; }
  .sm-pin.is-active .sm-pin-label{ display:block; }

  /* Global markets becomes a footer bar across the frame — no marker sits
     that low, so nothing is ever covered. */
  .sm-markets{
    right:0; left:0; top:auto; bottom:0;
    width:auto; border-radius:0; border-width:1px 0 0 0;
    padding:0.5rem 0.75rem 0.55rem;
    display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;
    background:rgba(0,0,0,0.88);
  }
  .sm-markets-head{ margin-bottom:0; }
  .sm-mkt-pipe{ display:none; }
  .sm-mkt{ font-size:0.68rem; padding:0.16rem 0.48rem; }

  /* Inset moves clear of that bar. */
  .sm-inset{ left:0.7rem; top:0.7rem; bottom:auto; width:24%; min-width:70px; }
  .sm-inset-cap{ font-size:0.58rem; margin-top:0.35rem; }
  .sm-inset-cap span{ display:none; }

  /* SVG text scales with the frame, so at phone widths these labels render
     at 7–8px. Illegible text is worse than no text, and the locator inset
     already carries the Africa context — so only Tanzania keeps its label. */
  .sm-country{ font-size:46px; }
  .sm-nb{ display:none; }

  .sm-legend{ gap:0.45rem 1rem; }
  .sm-legend-item{ font-size:0.7rem; }
}

@media (max-width:600px){
  .sm-shell{ row-gap:1.7rem; }
  .sm-title{ max-width:18ch; }
  .sm-chain-note{ display:none; }
  .sm-chain{ margin-top:1.7rem; }
  .sm-chain-step{ padding:0.38rem 0; }
  .sm-card-name{ font-size:1.5rem; }
}