/* The nav (section 17): 64 tall, solid white, no border, sticky; it leaves on the way down and returns on the way up.
   Lockup at cap 18 (26.5 px of the tight web SVG); five links Switzer 15, 32 apart; Sign in 48 after them; the primary
   button 48 after Sign in. 1024 to 1279: 24 between links, 32 between groups. Under 1024: Menu and the button.
   Under 768: the lockup at cap 16 and Menu only. */
.nav-bar { position: sticky; top: 0; z-index: 50; background: var(--page); transition: transform var(--t2) var(--ease); container: navbar / inline-size; }
.nav-bar.static { position: relative; }
.nav-bar.away { transform: translateY(-100%); }
/* --nav-offset (written by A.nav): where a sticky element under the bar sits, the bar's height while it shows and 0
   while it is away. Registered as a length, so it moves with the bar: top: var(--nav-offset, 0px) follows the bar's edge. */
@property --nav-offset { syntax: '<length>'; inherits: true; initial-value: 0px; }
:root { transition: --nav-offset var(--t2) var(--ease); }
.nav { position: relative; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.nav-home { display: block; flex: none; }
.nav-home:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.nav .lockup { height: 26.5px; width: auto; }
.nav-end { display: flex; align-items: center; gap: var(--s8); }
.nav-links { display: flex; align-items: center; gap: var(--s6); }
.nav-links > li { position: relative; }
.nav-acts { display: flex; align-items: center; gap: var(--s8); }

/* Nav links: no underline at rest, so the bar stays quiet; the underline on hover; thicker when pressed; the ring
   on focus; the page you are on keeps its underline at rest. A 44 px target the layout does not see. */
.nl { position: relative; display: inline-flex; align-items: center; height: 44px; font: 400 var(--ui)/1 var(--sans); color: var(--ink); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.nl:hover, .nl.is-hover, [data-state="hover"] .nl, .has-panel.open > .nl, .nl[aria-current="page"] { text-decoration-line: underline; }
.nl:active, .nl.is-active, [data-state="active"] .nl { text-decoration-line: underline; text-decoration-thickness: 1.5px; }
.nl:focus-visible, .nl.is-focus, [data-state="focus"] .nl { outline: 2px solid var(--ink); outline-offset: 2px; }
.nl.menu { display: none; }

/* ---------- The Use cases panel: white, a 1 px line, 0 radius, under the bar; two columns of rows 44 px tall with
   hairlines; 160 ms on the ease curve in, and out 160 ms after the pointer leaves (nav.js holds the delay). ---------- */
.uc-panel { position: absolute; top: 54px; left: 0; z-index: 2; display: grid; grid-template-columns: 296px 296px; column-gap: var(--s5);
  padding: var(--s5) var(--s3) var(--s3); background: var(--page); box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(-4px); visibility: hidden; pointer-events: none;
  transition: opacity var(--t1) var(--ease), transform var(--t1) var(--ease), visibility 0s linear var(--t1); }
.has-panel.open > .uc-panel { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity var(--t1) var(--ease), transform var(--t1) var(--ease), visibility 0s; }
/* The pointer can travel from the link to the panel without crossing a gap that closes it. */
.has-panel.open::after { content: ''; position: absolute; left: -12px; right: -12px; top: 100%; height: 12px; }
.uc-col .label { color: var(--ink-2); font-weight: 400; padding: 0 var(--s3); margin-bottom: var(--s4); }
.uc-col ul { box-shadow: inset 0 1px 0 var(--line); }

/* The bar answers to its own width (a container), so the specimen sheet can show it at any width on one page.
   1024 to 1279: the five links and both actions fit the 864 to 1000 px content at tighter gaps. */
@container navbar (min-width: 1000px) and (max-width: 1279px) { .nav-links { gap: var(--s5); } .nav-end, .nav-acts { gap: var(--s6); } }
/* Under 1024 the links fold into Menu; the button stays. */
/* The links fold under 1000 px of the bar's own width, not 1024: at a 1024 viewport a classic scrollbar leaves the bar
   1009 wide while the page's media steps still read 1024. */
@container navbar (max-width: 999px) { .nav-links, .nl.signin { display: none; } .nl.menu { display: inline-flex; } .nav-acts { gap: var(--s5); } }
/* Under 768: the lockup at cap 16 (23.5 px) and Menu only (section 16). */
@container navbar (max-width: 767px) { .nav-acts .btn { display: none; } .nav .lockup { height: 23.5px; } }

/* ---------- The phone menu: a white panel under the bar, rows 56 tall in Switzer 17 with hairlines; Use cases opens
   its rows in place; Sign in and Start a study are the last rows. It scrolls when it is taller than the screen. */
.menu-panel { background: var(--page); padding-bottom: var(--s5); max-height: calc(100svh - 64px); overflow-y: auto; }
.menu-panel > .wrap > ul { box-shadow: inset 0 1px 0 var(--line); }
.menu-panel .mrow.lg { padding: 0; width: 100%; border: 0; text-align: left; cursor: pointer; }
.menu-panel .mrow.lg:hover, .menu-panel .mrow.lg.is-hover { padding-left: var(--s3); padding-right: var(--s3); }
.menu-panel .mrow.lg { transition: background var(--t1) var(--ease), padding var(--t1) var(--ease); }
.menu-panel .mrow.strong { font-weight: 500; }
.menu-panel .pl .v { transition: transform var(--t1) var(--ease); transform-origin: 12px 12px; }
.menu-panel .uc-toggle[aria-expanded="true"] .pl .v { transform: scaleY(0); }
.m-uc-rows { display: grid; row-gap: var(--s5); padding: var(--s5) 0 var(--s5) var(--s4); box-shadow: inset 0 -1px 0 var(--line); }
.m-uc-rows .uc-col .label { padding: 0; }
.m-uc-rows .mrow { padding: 0 var(--s3) 0 0; }
.m-uc-rows .m-all { box-shadow: inset 0 -1px 0 var(--line); }   /* the index's row, before the two columns */
.nav-bar.menu-open { box-shadow: 0 1px 0 var(--line); }