/* Shared inner-page navigation.
   The 16 content pages had a sticky header carrying only a wordmark and the
   Download button, so home or download were the only ways out of any of them.
   This adds the links. Approved as option D-without-the-underline
   (mockups/inner-page-nav.html): the page you are on is bold orange, and
   nothing else in the bar gains color.

   Home is deliberately NOT included. Its .home-topbar stays hidden until you
   scroll past the hero so it never competes with the hero CTA.

   The headers are already position:sticky on every page, so this file only
   styles the links. It rides in the existing flex row (wordmark | nav | CTA),
   which is already justify-content: space-between. */

.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.site-nav a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted, #6e6e73);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.site-nav a:hover {
  color: var(--text, #1d1d1f);
  text-decoration: none;
}

/* Where you are. Bold plus color, never color alone, so the current page is
   still identifiable without seeing the difference between orange and gray. */
.site-nav a[aria-current="page"] {
  color: var(--accent-dark, #d96400);
  font-weight: 650;
}

/* The bar's job is to carry the Download button, so the nav gives way first.
   Below 900px the links go and the header returns to wordmark + CTA, which is
   exactly what these pages shipped with. */
@media (max-width: 900px) {
  .site-nav { display: none; }
}

/* ---------- Hold the bar still between pages ----------
   Steve: "the bar and Download Tellie jump left and right when I navigate."
   Two causes, and the breadcrumb was one of them.

   1. The header row was justify-content: space-between with three children,
      so the middle item's position depended on the width of the first. A
      longer crumb ("/ Scripting" vs "/ Blog") pushed the nav sideways.
      Centering the nav absolutely pins it to the true center of the bar no
      matter how long the crumb is, and, unlike a three-column grid, it does
      not care how many other things are in the row. /developers has GitHub
      and npm links in its header and a grid mangled it.

   2. Two pages ran a different container width (blog 860, developers 1000,
      everyone else 980). Fixed at source in those two files.

   Scoped to headers that actually have the nav, so no other .row is touched. */
header .row:has(.site-nav) { position: relative; }
header .row > .site-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Below 900px the nav is hidden anyway, so nothing is positioned and the row
   keeps the plain flex layout these pages shipped with. */

/* /developers is the one page with extra links (GitHub, npm) beside the CTA.
   With the nav centered they collide with it, and its header container is a
   fixed 980px so the collision happens at every viewport width. Dropping the
   two to icon-only frees about 85px, which clears it. The links keep an
   accessible name via aria-label in the markup, and a title tooltip on hover,
   so nothing is lost but the visible word. */
header .header-right .header-link .lbl { display: none; }

/* ---------- Home's bar, held to the same grid ----------
   Steve: "the home page one still jumps around comparatively." Same two
   causes as the inner pages had.

   1. Its container is the page-wide .wrap, 1080px with 28px padding, against
      980/24 everywhere else. So the wordmark and the Download button sat
      100px further apart than on every other page. Scoped to .home-topbar,
      so the rest of the home page keeps its wider 1080px layout.

   2. Its row was justify-content: space-between, so the nav's position
      depended on the wordmark. Centered absolutely, as elsewhere.

   The show/hide behavior is deliberately untouched: the bar still appears
   only once you have scrolled past the hero, so it never competes with the
   hero CTA. */
.home-topbar .wrap {
  max-width: 980px;
  padding: 0 24px;
}
.home-topbar .row { position: relative; }
.home-topbar .row > .home-topbar-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 900px) {
  .home-topbar .row > .home-topbar-nav { position: static; transform: none; }
}

/* The two Download buttons were built separately and differed by a pixel here
   and there (gap 7 vs 6, padding 9/17 vs 8/16), which left home's button about
   7px wider than everyone else's and its right edge out of line. Same numbers
   everywhere now, so the bar is identical on every page. */
.home-topbar-cta,
header .header-cta {
  gap: 6px;
  padding: 8px 16px;
}

/* Last difference: home's bar was 13px of vertical padding against 22px on
   every other page, so it was about 18px shorter. Navigating home -> anywhere
   changed the bar's height as well as its contents. Home matches the rest
   rather than the other way round, so this moves one page instead of sixteen. */
.home-topbar { padding: 22px 0; }
@media (max-width: 760px) {
  .home-topbar { padding: 14px 0; }
}

/* ---------- The wordmark becomes a mark ----------
   Steve, seeing "Tellie." on the new share cards: "should we sprinkle that
   look on the site as well? maybe at least in the easter egg menu? or in the
   upper left of every page?"

   Both, and it costs one file. The dot lives in CSS rather than in the markup
   on purpose: it is a logo treatment, not part of the name. Keeping it as a
   pseudo-element means the accessible name stays "Tellie", nobody copies
   "Tellie." into running prose by accident, and reverting is deleting this
   block.

   The type now matches the cards too. Same family already (both stacks
   resolve to SF Pro on a Mac); the cards just ran 800 with tighter tracking
   against the site's 700. */

.wordmark,
.home-topbar-mark {
  font-weight: 800;
  letter-spacing: -0.028em;
}

/* Two cases. Inner pages read "Tellie / Scripting", so the dot has to land
   between the name and the crumb, not after the whole thing.

   .wordmark is an inline-flex row with gap:10px, so the space between the
   name and the crumb is that gap, not a text space. Closing the gap and
   giving the crumb its own left margin puts the dot tight against the "e"
   where a logo's period belongs, and keeps the crumb where it was. */
.wordmark { gap: 0; }
.wordmark .crumb { margin-left: 0.42em; }
.wordmark .crumb::before {
  content: ".";
  color: var(--accent, #ff7a00);
  font-weight: 800;
  margin-left: -0.42em;
  margin-right: 0.42em;
}
/* Everywhere else the name stands alone, so the dot simply follows it. */
.wordmark:not(:has(.crumb))::after,
.home-topbar-mark::after,
.menu-btn.app-name::after {
  content: ".";
  color: var(--accent, #ff7a00);
}

/* ---------- The use-case switcher ----------
   Steve: "it's hard to navigate between different use cases. Can we make a 2nd
   header on the top of each of the 6 pages ... so once you are on one of those
   pages you can navigate to the others?"

   He was right, and it was worse than awkward: the six segment pages had no
   lateral links at all. The only route between them was the main nav's "Use
   cases", which LEAVES the page for /#use-cases on home. And below 900px the
   rule above hides the main nav, so on a phone those pages had no navigation
   beyond the wordmark and Download.

   Approved as candidate A in mockups/usecase-switcher.html: a segmented strip,
   centered, on the warm ground. Markup is generated by
   scripts/build-usecase-switcher.py, so the set is defined in one place.

   The warm band is doing real work. Two bars stacked on the same white ground
   read as one tall header; a different ground makes the second one legible as
   its own thing, and ties it to the header above rather than to the page below.

   NOT sticky, deliberately. The main header already is, and a second sticky bar
   would cost about 46px of every screen forever. You land on it, you use it. */

.uc-switch {
  background: var(--bg-warm, #fffaf2);
  border-bottom: 1px solid var(--line, #e5e5e7);
  position: relative;
}

/* Centered when the six fit, scrollable when they do not, with one rule doing
   both: a flex container plus `margin: 0 auto` on the nav. Auto margins
   collapse to zero once the content overflows, so the left-hand pills stay
   reachable. `justify-content: center` would strand them, which is the classic
   overflowing-flex-row bug. */
.uc-switch-scroll {
  display: flex;
  overflow-x: auto;
  padding: 13px 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.uc-switch-scroll::-webkit-scrollbar { display: none; }

.uc-switch nav {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.045);
  border-radius: 999px;
  padding: 4px;
}
.uc-switch nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted, #6e6e73);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.uc-switch nav a:hover {
  color: var(--text, #1d1d1f);
  text-decoration: none;
}

/* Where you are: the same convention as the main nav, bold plus color, never
   color alone, so it survives being seen by someone who cannot separate orange
   from gray. The white fill and hairline lift it out of the group. */
.uc-switch nav a[aria-current="page"] {
  background: #fff;
  color: var(--accent-dark, #d96400);
  font-weight: 650;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 .5px rgba(0, 0, 0, 0.04);
}

.uc-icon { width: 15px; height: 15px; flex: none; }

/* Narrow: the strip scrolls, so it needs to say so. The fade is a hint you
   cannot tap and cannot mistake for a control, which a chevron would be.
   Above this width the six always fit and a fade would be a lie. */
@media (max-width: 780px) {
  .uc-switch-scroll { padding: 11px 18px; }
  .uc-switch::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 1px;
    width: 34px;
    background: linear-gradient(90deg, rgba(255, 250, 242, 0), #fffaf2 70%);
    pointer-events: none;
  }
}