/* ============================================================
   ENTEL shared chrome : the site nav. Single source of truth.

   Linked as /entel-chrome.css by every entel.jrand.net page,
   including per-issue pages (there it sits inside a WEB-ONLY
   block that send_common.py strips before the issue is mailed).
   Edit HERE, never per page. No JavaScript in this file.

   Structure:
     <header class="entel-chrome">     the dark mass
       <div class="entel-bar">         row 1 : brand + Subscribe
       <nav  class="entel-tabs">       row 2 : destinations
         <div class="tabs-scroll">     scroll container (mobile)
           <ul class="tabs-strip">     the five links

   Current page: aria-current on exactly ONE <a>. That attribute
   is both the a11y contract and the styling hook, so they cannot
   drift. "page" for an exact match, "true" for a section parent
   (issue pages mark Archive).

   Human-readable reference: DESIGN-SYSTEM.md
   Token source: entel-tokens.css
   ============================================================ */

/* ---- 0. Token aliases --------------------------------------
   Values in the var() fallbacks are the canonical entel-tokens.css
   values, present only so the chrome renders on pages that do not
   link the token sheet (issue pages; fuelchain's inline :root).
   If a token changes in entel-tokens.css, change it here too. */
.entel-chrome {
  --c-bar:   var(--dark,        #0f1f0f);
  --c-green: var(--green,       #7aad6a);
  --c-hi:    var(--green-hi,    #8fc47d);
  --c-muted: var(--green-muted, #8a9e82);
  --c-line:  var(--green-line,  #1e3a1e);
  --c-pale:  var(--green-light, #d4e8cc);
  --c-white: var(--white,       #ffffff);
  --f-serif: var(--serif, Georgia, 'Times New Roman', serif);
  --f-sans:  var(--sans, -apple-system, BlinkMacSystemFont, 'Inter',
                   'Helvetica Neue', Arial, sans-serif);
  --f-mono:  var(--mono, 'SF Mono', Menlo, Consolas,
                   'Liberation Mono', monospace);
  --e-out:   var(--ease-out-cubic, cubic-bezier(0.33, 1, 0.68, 1));
  --e-back:  var(--ease-out-back,  cubic-bezier(0.34, 1.56, 0.64, 1));
  --rad:     var(--r-sm, 3px);

  --fade: 26px;   /* mobile strip edge-fade width */
  --pin:  26px;   /* inset the pinned current tab holds from the edge */

  position: relative;
  background: var(--c-bar);
  border-bottom: 1px solid var(--c-line);
  color-scheme: dark;
}

/* 300ms tap delay is a real cost on a nav. */
.entel-chrome a { touch-action: manipulation; }

/* Screen-reader-only text (link suffixes that must not be seen). */
.nav-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- 1. Row 1 : brand + Subscribe -------------------------- */
.entel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 32px 12px;
}

.nav-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex-shrink: 1;
  min-width: 0;
  text-decoration: none;
}
.nav-wordmark {
  font-family: var(--f-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-white);
  letter-spacing: -0.3px;
  line-height: 1;
}
.nav-tagline {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1;
  white-space: nowrap;
  transition: color 0.2s var(--e-out);
}
.nav-brand:hover .nav-tagline { color: var(--c-pale); }
.nav-brand:focus-visible {
  outline: 2px solid var(--c-hi);
  outline-offset: 5px;
  border-radius: 2px;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 16px;
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--c-bar);
  background: var(--c-green);
  border: 1px solid var(--c-green);
  border-radius: var(--rad);
  transition: background 0.18s var(--e-out),
              border-color 0.18s var(--e-out),
              transform 0.22s var(--e-back);
}
.nav-cta:hover { background: var(--c-hi); border-color: var(--c-hi); }
.nav-cta:active { transform: scale(0.97); }
.nav-cta:focus-visible {
  outline: 2px solid var(--c-hi);
  outline-offset: 3px;
}

/* ---- 2. Row 2 : destinations -------------------------------
   A scroll container at every width. On desktop it never
   overflows, so it behaves as a plain row. */
.entel-tabs { border-top: 1px solid var(--c-line); }

.tabs-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* keyboard focus scroll-into-view must clear the edge fade */
  scroll-padding-inline: var(--pin);
  /* room for the focus ring, which overflow would otherwise clip */
  padding-block: 4px;
}
.tabs-scroll::-webkit-scrollbar { display: none; }

.tabs-strip {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0 19px;          /* + the link's 13px = 32px gutter */
  list-style: none;
  width: max-content;
  min-width: 100%;
}
.tabs-strip > li { display: flex; }

.tabs-strip a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px 9px;    /* 26px of air between labels */
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);   /* 9.32:1 on --dark */
  transition: color 0.18s var(--e-out);
}
.tabs-strip a:hover { color: var(--c-white); }
.tabs-strip a:focus-visible {
  outline: 2px solid var(--c-hi);
  outline-offset: 1px;
  border-radius: 2px;
}

/* The rule. Sweeps in from the left, sweeps out to the right, so
   the exit is animated rather than a snap-back. */
.tabs-strip a::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 0;
  height: 2px;
  background: var(--c-green);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.32s var(--e-out);
}
.tabs-strip a:hover::after,
.tabs-strip a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Current page. Styled off the aria attribute, so the visual state
   and the announced state are the same fact. */
.tabs-strip a[aria-current] {
  color: var(--c-white);
  font-weight: 700;
}
.tabs-strip a[aria-current]::after {
  transform: scaleX(1);
  transform-origin: left center;
  transition: none;
}

/* ---- 2b. Home tab -------------------------------------------
   Home is a real destination, not just the wordmark. Icon AND label:
   an icon-only home is the same discoverability problem as a clickable
   wordmark, just smaller. Lucide "house", 2px stroke on a 24 viewBox,
   which lands near a 1.2px hairline at this size and matches the rules
   already used across the chrome. */
.nav-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-right: -1px;   /* optical: the roof apex reads as extra space */
  overflow: visible;
}
.tab-home a { gap: 7px; }

/* Outbound affordance. Nudges on the horizontal axis to match the
   site's existing .arw arrow rather than inventing a second gesture. */
.nav-out {
  display: inline-block;
  font-size: 0.92em;
  color: var(--c-muted);
  transition: transform 0.24s var(--e-out), color 0.18s var(--e-out);
}
.tabs-strip a:hover .nav-out {
  color: var(--c-green);
  transform: translateX(3px);
}


/* ---- 3. 1024px and down ------------------------------------ */
@media (max-width: 1024px) {
  .entel-bar   { padding: 12px 24px 11px; }
  .tabs-strip  { padding: 0 11px; }
}

/* ---- 4. Touch widths : the strip ---------------------------
   <=900 catches tablets in portrait as well as every phone. */
@media (max-width: 900px) {
  .entel-bar { padding: 8px 16px; }
  .tabs-strip { padding: 0 5px; }

  .nav-cta {
    min-height: 44px;
    padding: 0 18px;
    font-size: 12px;
  }

  .tabs-strip a {
    min-height: 44px;
    padding: 0 11px;
    font-size: 12.5px;
  }
  .tabs-strip a::after { left: 11px; right: 11px; }

  /* Keep the marked tab on screen at any scroll offset. Both insets
     are set, so a current tab that would leave to the LEFT pins at
     the left edge and one that would leave to the RIGHT pins at the
     right edge. The pin inset matches the fade width so the pinned
     label never sits under the gradient. */
  .tabs-strip > li:has(> a[aria-current]) {
    position: sticky;
    /* Insets are 0, NOT --pin. A non-zero inset displaces the tab even
       when the strip sits at scroll origin, so a current tab that is
       first in the strip gets shoved inward and occludes its neighbour.
       At 0 the pin stays a no-op until the tab would leave the box. */
    left: 0;
    right: 0;
    z-index: 2;
    background: var(--c-bar);
    box-shadow:  10px 0 10px -10px rgba(0, 0, 0, 0.55),
                -10px 0 10px -10px rgba(0, 0, 0, 0.55);
  }
}

/* ---- 5. Edge fade, static fallback -------------------------
   Browsers without scroll-driven animations get a right-edge fade
   below 430px, where the five labels overflow on every phone. */
@media (max-width: 430px) {
  .tabs-scroll {
    -webkit-mask-image: linear-gradient(to right,
      #000 0 calc(100% - var(--fade)), transparent 100%);
            mask-image: linear-gradient(to right,
      #000 0 calc(100% - var(--fade)), transparent 100%);
  }
}

/* ---- 6. Edge fade, live ------------------------------------
   The fade tracks real scroll position off the container's own
   scroll timeline: left edge fades in once you have scrolled, right
   edge fades out when you reach the end. When the strip does NOT
   overflow the timeline is inactive, the animations do not apply,
   and both widths stay at their 0px initial values, so no fade is
   drawn. That is the "only show it when there IS more" behavior,
   with no JavaScript and no resize listener.

   Ordered after section 6 so it wins in supporting browsers. */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }

@keyframes entel-fade-l { from { --fade-l: 0px }  to { --fade-l: 26px } }
@keyframes entel-fade-r { from { --fade-r: 26px } to { --fade-r: 0px  } }

@supports (animation-timeline: scroll()) {
  @media (max-width: 900px) {
    .tabs-scroll {
      -webkit-mask-image: linear-gradient(to right,
        transparent 0, #000 var(--fade-l),
        #000 calc(100% - var(--fade-r)), transparent 100%);
              mask-image: linear-gradient(to right,
        transparent 0, #000 var(--fade-l),
        #000 calc(100% - var(--fade-r)), transparent 100%);
      animation: entel-fade-l linear both, entel-fade-r linear both;
      animation-timeline: scroll(self inline), scroll(self inline);
      animation-range: 0 36px, calc(100% - 36px) 100%;
    }
  }
}

/* ---- 7. Small phones --------------------------------------- */
@media (max-width: 360px) {
  .nav-tagline { font-size: 9px; letter-spacing: 0.14em; }
  .nav-cta { padding: 0 14px; }
}
@media (max-width: 340px) {
  .cta-free { display: none; }
}

/* ---- 8. Reduced motion -------------------------------------
   Transitions off, press scale off, and the rule switches from a
   scale sweep to a plain show/hide. The section 6 fade is kept on
   purpose: it does not move on its own, it tracks the reader's own
   scroll 1:1, the same way a scrollbar does. */
@media (prefers-reduced-motion: reduce) {
  .nav-cta,
  .nav-tagline,
  .nav-out,
  .tabs-strip a,
  .tabs-strip a::after { transition: none; }

  .nav-cta:active { transform: none; }
  .tabs-strip a:hover .nav-out { transform: none; }
  .tabs-scroll { scroll-behavior: auto; }

  .tabs-strip a::after { transform: scaleX(1); opacity: 0; }
  .tabs-strip a:hover::after,
  .tabs-strip a:focus-visible::after,
  .tabs-strip a[aria-current]::after { opacity: 1; }
}