/* =============================================================================
   ReLeaf: site navigation
   -----------------------------------------------------------------------------
   A full-width drop panel, redrawn in September 2026 after apple.com's global
   nav, and still ReLeaf:

   · The bar and the panel are frosted glass, not a white card with a shadow
     under it, and the page behind softens while a panel is open. One surface
     over the page, rather than a second page dropped on top of it.
   · The panel has no section title and no paragraph: the tab the reader just
     opened is already lit in the bar. What is left is one full-width grid of
     pages, lined up with the logo, each with a caption of three to five words
     on a single line.
   · The panel is revealed downwards rather than faded in, and the entries rise
     one after another, 25ms apart.
   · What stays ReLeaf: line art in a leaf-green tile, the green bar that grows
     down the left edge of an entry, the thread of green across the top of the
     panel, Inter, and one accent family of four greens.
   ========================================================================== */

/* Colours that exist in tokens.css point at the token. The hardware pages load
   this file without tokens.css, so each carries the token's own value as the
   fallback. */
:root {
  --nv-h:       68px;
  --nv-max:     1280px;
  --nv-900:     #14402b;
  --nv-700:     #23684a;
  --nv-500:     #4f9c6f;
  --nv-200:     #cfe4d8;
  --nv-100:     var(--leaf-100, #e3f0e8);
  --nv-50:      #f4f9f6;
  --nv-ink:     #171717;
  --nv-muted:   var(--gray-450, #6e6e6e);   /* was #6b7280; gray-500 would be 4.45:1 on --nv-50 */
  --nv-line:    #e5e5e5;
  /* one frosting recipe for the bar, the panel and the drawer */
  --nv-frost:   saturate(180%) blur(20px);
}

.sitenav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
}

/* ---- bar ----------------------------------------------------------------- */

/* Translucent enough that the page moving under it reads through the frost,
   opaque enough to carry the labels. It firms up while a panel is open, so the
   bar and the panel are one surface. */
.sitenav__bar {
  background: rgb(251 252 251 / .8);
  -webkit-backdrop-filter: var(--nv-frost); backdrop-filter: var(--nv-frost);
  border-bottom: 1px solid var(--nv-line);
  transition: background .25s, border-color .25s;
}
.sitenav.has-panel .sitenav__bar {
  background: rgb(251 252 251 / .94);
  border-bottom-color: transparent;
}

.sitenav__inner {
  max-width: var(--nv-max);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: var(--nv-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) { .sitenav__inner { padding: 0 2rem; } }

.sitenav__brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--nv-ink);
  flex: none;
}
.sitenav__logo {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 1px rgb(23 23 23 / .08);
}
.sitenav__word {
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.015em;
}

/* ---- tabs ---------------------------------------------------------------- */

.sitenav__tabs { display: none; align-items: stretch; height: var(--nv-h); }
@media (min-width: 940px) { .sitenav__tabs { display: flex; } }

.sitenav__tab {
  position: relative;
  display: flex; align-items: center; gap: .4rem;
  height: var(--nv-h);
  padding: 0 1.15rem;
  font: inherit;
  font-size: .95rem; font-weight: 600;
  color: var(--gray-700, #404040);
  background: none; border: 0;
  cursor: pointer;
  transition: color .25s;
}
.sitenav__tab:hover, .sitenav__tab.is-open { color: var(--nv-900); }

/* the tab you are currently inside keeps a permanent mark */
.sitenav__tab.is-section { color: var(--nv-700); }
.sitenav__tab.is-section::before {
  content: "";
  position: absolute; left: 1.15rem; right: 1.15rem; bottom: 0;
  height: 2px; background: var(--nv-500);
  border-radius: 2px 2px 0 0;
}
.sitenav__tab.is-open::after {
  content: "";
  position: absolute; left: .8rem; right: .8rem; bottom: 0;
  height: 3px; background: var(--nv-700);
  border-radius: 3px 3px 0 0;
}

/* chevron drawn in CSS, no icon font */
.sitenav__chev {
  width: 7px; height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .55;
  transition: transform .3s, opacity .25s;
}
.sitenav__tab.is-open .sitenav__chev,
.sitenav__grouptop[aria-expanded="true"] .sitenav__chev {
  transform: translateY(1px) rotate(-135deg);
  opacity: 1;
}

/* ---- panel --------------------------------------------------------------- */

.sitenav__panels { position: relative; }

/* Frosted, the same recipe as the bar, and no border or drop shadow: the panel
   is the bar growing downwards, not a card landing on the page. The only edge
   is a hairline to part it from whatever it covers. */
.sitenav__panel {
  position: absolute; top: 0; left: 0; right: 0;
  display: none;
  background: rgb(251 252 251 / .94);
  -webkit-backdrop-filter: var(--nv-frost); backdrop-filter: var(--nv-frost);
  box-shadow: 0 1px 0 rgb(20 64 43 / .06);
}
/* revealed downwards rather than faded in: the panel is uncovered, the way a
   blind is drawn, so nothing about it appears to move */
.sitenav__panel.is-open { display: block; animation: nv-drop .32s cubic-bezier(.4, 0, .2, 1); }
@keyframes nv-drop {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* a thread of green across the top of the open panel, the page's signature */
.sitenav__panel::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--nv-900), var(--nv-500) 55%, var(--nv-100));
}

.sitenav__panelinner {
  max-width: var(--nv-max);
  margin: 0 auto;
  padding: 1.75rem 1.25rem 2.25rem;
}
@media (min-width: 640px) {
  .sitenav__panelinner { padding: 1.75rem 2rem 2.25rem; }
}
@media (min-width: 1040px) {
  .sitenav__panelinner { padding: 2rem 2rem 2.5rem; }
}

/* ---- entries ------------------------------------------------------------- */

/* One grid across the whole panel. `auto-fill` gives four columns on a laptop
   and folds to three and two on the way down, without a breakpoint per page
   count. The negative inset is the entry's own padding given back, so the icon
   tiles start exactly on the logo's left edge. */
.sitenav__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .35rem 1.5rem;
  align-content: start;
  margin-inline: -.75rem;
}

.sitenav__entry {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: .85rem;
  padding: .7rem .75rem;
  border-radius: 12px;
  text-decoration: none;
  transition: background .22s;
  /* resting state of the rise below; handed back under reduced motion */
  opacity: 0;
  transform: translateY(6px);
}
.sitenav__panel.is-open .sitenav__entry {
  animation: nv-rise .38s cubic-bezier(.2, .7, .3, 1) forwards;
  animation-delay: calc(60ms + var(--i, 0) * 25ms);
}
@keyframes nv-rise { to { opacity: 1; transform: none; } }

.sitenav__entry::before {          /* accent grows down the left edge */
  content: "";
  position: absolute; left: 0; top: 50%; bottom: 50%;
  width: 3px; border-radius: 3px;
  background: var(--nv-500);
  transition: top .25s cubic-bezier(.2,.7,.3,1), bottom .25s cubic-bezier(.2,.7,.3,1);
}
.sitenav__entry:hover { background: var(--nv-50); }
.sitenav__entry:hover::before,
.sitenav__entry.is-current::before { top: 18%; bottom: 18%; }

.sitenav__tile {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--nv-100);
  color: var(--nv-700);
  transition: background .22s, color .22s;
}
.sitenav__tile svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sitenav__entry:hover .sitenav__tile { background: var(--nv-700); color: #fff; }

.sitenav__entrytext { display: grid; gap: .1rem; min-width: 0; }
.sitenav__entrytitle {
  font-size: 1rem; font-weight: 600;
  color: var(--nv-ink);
  letter-spacing: -.01em; line-height: 1.25;
}
/* Captions are written to three to five words so that the longest of them,
   "Approval routes, Taiwan and beyond", fits one column of the four-column
   grid on a laptop. (At .8rem it was three pixels too wide and lost its last
   word.) If a caption ever does grow past its column it is clipped rather
   than allowed to wrap: a second line would push its whole row out of step. */
.sitenav__entrycap {
  font-size: .775rem; line-height: 1.35;
  color: var(--nv-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sitenav__entry:hover .sitenav__entrytitle { color: var(--nv-900); }
.sitenav__entry.is-current { background: var(--nv-50); }
.sitenav__entry.is-current .sitenav__tile { background: var(--nv-700); color: #fff; }
.sitenav__entry.is-current .sitenav__entrytitle { color: var(--nv-900); }

/* ---- the page behind ------------------------------------------------------
   While a panel is open the page under it is blurred and dimmed a little, so
   the eye has one place to be. It is decoration: it never takes a click, and
   the click that closes the panel reaches the page underneath as before. */
.sitenav__scrim {
  position: fixed; inset: var(--nv-h) 0 0 0;
  z-index: -1;                      /* under the panel, over the page */
  background: rgb(20 30 24 / .08);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility 0s .3s;
  pointer-events: none;
}
.sitenav.has-panel .sitenav__scrim {
  opacity: 1; visibility: visible;
  transition: opacity .3s, visibility 0s;
}

/* ---- mobile -------------------------------------------------------------- */

.sitenav__burger {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  background: none; border: 0; cursor: pointer;
}
@media (min-width: 940px) { .sitenav__burger { display: none; } }
.sitenav__burger span { width: 1.45rem; height: 2px; background: var(--gray-700, #404040); transition: all .3s; }
.sitenav__burger span + span { margin-top: .34rem; }
.sitenav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(-45deg); }
.sitenav__burger[aria-expanded="true"] span:nth-child(2) { width: 0; }
.sitenav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(45deg); }

.sitenav__drawer {
  display: none;
  max-height: calc(100dvh - var(--nv-h));
  overflow-y: auto;
  background: rgb(251 252 251 / .97);
  -webkit-backdrop-filter: var(--nv-frost); backdrop-filter: var(--nv-frost);
  border-top: 1px solid var(--nv-line);
  padding: .5rem 1.5rem 2rem;
}
.sitenav.drawer-open .sitenav__drawer { display: block; }
@media (min-width: 940px) { .sitenav.drawer-open .sitenav__drawer { display: none; } }

/* the five section names are the whole of this screen, so they are set like
   headings rather than like list rows */
.sitenav__grouptop {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem .1rem;
  font: inherit;
  font-size: 1.35rem; font-weight: 650; letter-spacing: -.015em;
  color: var(--nv-900);
  background: none; border: 0; border-bottom: 1px solid var(--nv-line);
  cursor: pointer;
}
.sitenav__groupbody { display: none; padding: .5rem 0 1rem; }
.sitenav__group.is-open .sitenav__groupbody { display: grid; gap: .2rem; }

/* every page keeps its caption here too, and the entries rise as the section
   unfolds. A closed drawer never runs the animation, so they rest visible. */
.sitenav__groupbody .sitenav__entry { opacity: 1; transform: none; }
.sitenav__group.is-open .sitenav__groupbody .sitenav__entry {
  animation: nv-rise .32s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 25ms);
  opacity: 0; transform: translateY(6px);
}

/* ---- page offset --------------------------------------------------------- */

.sitenav-spacer { height: var(--nv-h); }

@media (prefers-reduced-motion: reduce) {
  .sitenav *, .sitenav *::before { transition: none !important; animation: none !important; }
  /* an entry rests invisible and is brought in by the animation above, so
     without the animation it has to be handed its finished state, or the
     panel opens empty */
  .sitenav__entry { opacity: 1 !important; transform: none !important; }
}

/* ---- skip link (added by nav.js) ----------------------------------------- */
.sitenav-skip {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  padding: .6rem 1rem; border-radius: 0 0 6px 6px;
  background: #14402b; color: #fff;
  font: 600 .875rem/1.2 var(--font-body, system-ui, sans-serif);
  text-decoration: none;
}
.sitenav-skip:focus { top: 0; outline: 2px solid #4f9c6f; outline-offset: 2px; }
main:focus { outline: none; }

/* =============================================================================
   Drafting marks
   -----------------------------------------------------------------------------
   Student writing is in the normal ink. Text an AI assistant drafted to fill a
   page, and that no student has rewritten yet, carries class="ai" (on a block,
   or a <span class="ai"> inside a student paragraph) and shows in orange, so
   the team can see at a glance what is theirs and what still needs a student.
   Lives in nav.css because every page loads it, the dark hardware pages too.
   Off switch: window.AI_MARK = false in assets/data/site-nav.js.

   Two inks, and which one is used follows the background, not the page. The
   hardware pages are dark only while the reader is on the machine: past the
   3D walkthrough, hardware/js/polish.js puts `doc-light` on <body> and the
   page turns to ink on paper, and the hub's notebook band (.nb-zone) is cream
   at every scroll position. The bright orange is 2.26:1 on those, so it is
   scoped away from them and the deep orange, 5.18:1 on white, is used instead.
   ========================================================================== */
:root { --ai-ink: #c2410c; }                       /* 5.18:1 on white */
body:has(.sitenav--dark):not(.doc-light) {
  --ai-ink: #fb923c;                               /* 8.95:1 on the #05060a field */
}
body:has(.sitenav--dark) .nb-zone { --ai-ink: #c2410c; }   /* 4.87:1 on the cream */
html:not(.ai-off) .ai,
html:not(.ai-off) .ai :is(p, li, dt, dd, td, th, h2, h3, h4, h5, strong, b, em, i, span, figcaption, small, blockquote, cite, label, summary, div) {
  color: var(--ai-ink);
}
html:not(.ai-off) .ai a { color: var(--ai-ink); text-decoration-color: currentColor; }