/* Shared site navigation (rendered by assets/nav.js).
   Desktop: fixed left sidebar + sticky breadcrumb bar. ≤900px: menu panel, section tabs, bottom tab bar. */
:root { --sn-sidebar-width: 248px; --sn-bottom-bar: 66px; }

/* No transform/backdrop-filter on the header: the sidebar and bottom bar inside it are position:fixed. */
.site-nav { position:sticky; top:0; z-index:var(--z-nav, 100); margin:0; padding:0; text-align:left; font-family:inherit; }
/* Some pages still carry legacy `header { … }` / `header::after` styles */
.site-nav::before, .site-nav::after { content:none !important; display:none !important; }
.site-nav *, .site-nav *::before, .site-nav *::after { box-sizing:border-box; }
body.has-app-nav { padding-left:var(--sn-sidebar-width); }

.sn-skip { position:fixed; top:8px; left:12px; z-index:var(--z-skip, 150); padding:12px 18px; border-radius: 10px; background: var(--surface); color: var(--ink); transform:translateY(-150%); }
.sn-skip:focus { transform:none; }
.sn-icon { display:inline-block; flex-shrink:0; width:20px; height:20px; vertical-align:middle; }

/* Sidebar */
.sn-sidebar { position:fixed; inset:0 auto 0 0; z-index:26; display:flex; flex-direction:column; width:var(--sn-sidebar-width); padding:26px 18px 20px; overflow-y:auto; overscroll-behavior:contain; border-right: 1px solid var(--line); background: rgb(var(--surface-rgb) / .97); }
.sn-brand { display:flex; align-items:center; gap:10px; padding:0 8px 14px; color: var(--ink); text-decoration:none; }
.sn-overview { padding-bottom:10px; border-bottom: 1px solid var(--tint-3); }
.sn-brand-cat { display:block; flex:0 0 44px; width:44px; height:44px; overflow:hidden; background:url("cats/sandy-v2/idle.png") 0 0 / 300% 200% no-repeat; }
.sn-brand-copy { min-width:0; }
.sn-brand strong { display:block; font-size:.9rem; font-weight:700; letter-spacing:-.01em; line-height:1.5; }
.sn-brand small { display:block; margin-top:1px; color: var(--muted); font-size:.75rem; }
.sn-resume { display:flex; flex-direction:column; gap:2px; margin:14px 0 0; padding:10px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint-1); color: var(--blue-600); font-size:.82rem; text-decoration:none; }
.sn-resume:hover { background: var(--tint-2); }
.sn-resume small { color: var(--muted); font-size:.7rem; }
.sn-resume strong { overflow:hidden; font-weight:500; white-space:nowrap; text-overflow:ellipsis; }
.sn-section { margin:18px 0 0; }
.sn-section h2 { display:flex; align-items:center; gap:8px; margin:0 12px 8px; color: var(--muted); font-size: .75rem; font-weight:500; letter-spacing:.05em; }
.sn-step { color: var(--muted); font-size: .75rem; font-variant-numeric:tabular-nums; }
.sn-side-link { display:flex; align-items:center; gap:12px; min-height:44px; margin:3px 0; padding:10px 13px; border: 1px solid transparent; border-radius: 11px; color: var(--muted); font-size:.86rem; text-decoration:none; }
.sn-side-link:hover { background: var(--tint-1); color: var(--ink); }
.sn-side-link[aria-current="page"] { background: var(--tint-2); color: var(--ink); font-weight:600; }
.sn-side-link:focus-visible, .sn-menu-toggle:focus-visible, .sn-mobile a:focus-visible, .sn-local a:focus-visible { outline: 2px solid var(--accent-focus); outline-offset:2px; }
.sn-count { min-width:23px; margin-left:auto; padding:2px 7px; border-radius: 7px; background: var(--line); color: var(--blue-600); font-size:.7rem; text-align:center; font-variant-numeric:tabular-nums; }
.sn-support { margin-top:auto; padding-top:18px; border-top: 1px solid var(--tint-3); }
.sn-support > p { margin:0 12px 7px; color: var(--muted); font-size: .75rem; }
.sn-support .sn-side-link { padding:9px 13px; font-size:.8rem; }
.sn-note { margin:18px 13px 0; color: var(--muted); font-size:.7rem; line-height:1.7; }
.sn-note span { display:block; margin-top:3px; color: var(--muted); font-size: .75rem; }

/* Top bar */
/* position + z-index: the account menu opens over the page tabs row below (its mask creates a layer that drew on top) */
.sn-topbar { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:12px 28px; border-bottom: 1px solid var(--line); background: rgb(var(--surface-rgb) / .97); }
.sn-crumbs { display:flex; align-items:center; gap:11px; min-width:0; font-size:.78rem; }
.sn-crumb-root, .sn-crumb-group { color: var(--muted); white-space:nowrap; }
.sn-crumb-divider { color: var(--muted); }
.sn-crumb-current { overflow:hidden; color: var(--ink); font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
.sn-menu-toggle { display:none; }
.sn-account { position:relative; flex-shrink:0; color:var(--ink); font-size:.8rem; }
.sn-account-toggle { display:flex; align-items:center; gap:8px; min-height:44px; min-width:44px; padding:6px 10px 6px 6px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; }
.sn-account-toggle:hover, .sn-account-toggle[aria-expanded="true"] { background:var(--tint-1); border-color:var(--blue-600); }
.sn-avatar { display:grid; flex-shrink:0; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--tint-3); color:var(--blue-600); font-size:.8rem; font-weight:500; }
.sn-avatar .sn-icon { display:block; width:17px; height:17px; }
.sn-name { max-width:120px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sn-account-description { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.sn-account-chevron { flex-shrink:0; width:14px; height:14px; }
.sn-account-panel { position:absolute; top:calc(100% + 8px); right:0; width:min(288px, calc(100vw - 32px)); max-height:calc(100dvh - 160px); overflow-y:auto; padding:8px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); box-shadow:0 12px 32px rgb(var(--shadow-rgb) / .15); }
.sn-account [hidden] { display:none !important; }
.sn-account-intro { padding:8px 10px; overflow-wrap:anywhere; }
.sn-account-intro strong { font-size:.9rem; font-weight:500; }
.sn-account-intro p { margin:4px 0 0; color:var(--muted); font-size:.75rem; line-height:1.6; }
.sn-account-item { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:10px; border:0; border-radius:8px; background:transparent; color:var(--ink) !important; font:inherit; line-height:1.5; text-align:left; text-decoration:none; overflow-wrap:anywhere; cursor:pointer; }
.sn-account-item:hover { background:var(--tint-1); }
.sn-account-item:disabled { opacity:.65; cursor:wait; }
.sn-account-email { margin:8px 10px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; line-height:1.6; overflow-wrap:anywhere; }
.sn-account-message { margin:6px 10px; color:var(--bad); font-size:.75rem; line-height:1.6; }
.sn-account-toggle:focus-visible, .sn-account-item:focus-visible { outline:2px solid var(--accent-focus); outline-offset:2px; }

.sn-local, .sn-mobile { display:none; }

/* "Continue where you left off" chip under the page heading, and the highlight on the restored card */
.sn-resume-chip { display:inline-flex; align-items:center; min-height:44px; margin:0 0 14px; padding:8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--blue-600); font:inherit; font-size:.88rem; cursor:pointer; box-shadow: 0 6px 16px rgb(var(--shadow-rgb) / .08); }
.sn-resume-chip:hover { background: var(--tint-1); }
.sn-resume-flash { outline: 3px solid var(--blue-400); outline-offset:4px; }

/* Keep floating widgets clear of the sidebar (drag positions set inline still win) */
body.has-app-nav .writing-board, body.has-app-nav .writing-launcher { left:calc(var(--sn-sidebar-width) + 16px); }

/* One page frame across Learn, Practice, Review, Today and Settings.
   A companion rail is internal padding, never a different page width/left edge. */
body.has-app-nav :is(.app, .settings-app, .app-layout) {
  width: min(var(--layout-content-max), calc(100% - 2 * var(--layout-gutter)));
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--space-5);
}
body.has-app-nav .app-layout { margin-top: 0; gap: var(--space-5); grid-template-columns: 240px minmax(0, 1fr); }
body.has-app-nav .app-layout > * { min-width: 0; }
body.has-app-nav :is(.app, .settings-app, .app-layout) .page-header { margin: 4px 0 var(--space-5); }

/* Desktop: Sandy's dock (assets/sandy.css) lives in a companion rail on the right. The rail is internal padding,
   so the content's left edge never moves and nothing in the dock can sit on text or answers.
   has-sandy-dock is set by assets/sandy.js; :has() covers the first paint on pages with their own Sandy. */
@media (min-width:901px) {
  body.has-app-nav:is(.has-sandy-dock, :has(.floating-sandy-toggle, #sandy)) :is(.app, .settings-app, .app-layout, .support-app, .contact-app) { padding-right: var(--layout-companion-rail); }
}
@media (min-width:901px) and (max-width:1170px) {
  :root { --sn-sidebar-width: 220px; }
  .sn-sidebar { padding-left:12px; padding-right:12px; }
  .sn-name { max-width:96px; }
}
@media (max-height:750px) and (min-width:901px) {
  .sn-sidebar { padding-top:18px; padding-bottom:14px; }
  .sn-brand { padding-bottom:16px; }
  .sn-section { margin-top:12px; }
  .sn-side-link { min-height:40px; padding-top:8px; padding-bottom:8px; }
  .sn-note { display:none; }
}

@media (max-width:900px) {
  body.has-app-nav { padding-left:0; padding-bottom:calc(var(--sn-bottom-bar) + env(safe-area-inset-bottom, 0px)); }
  body.has-app-nav .app-layout { grid-template-columns: minmax(0, 1fr); }
  html { scroll-padding-top:120px; }
  .sn-topbar { min-height:60px; padding:10px 16px; gap:10px; background: var(--tint-1); }
  .sn-crumbs { flex:1; gap:8px; font-size: .75rem; }
  .sn-crumb-group { display:none; }
  .sn-name { display:none; }
  .sn-menu-toggle { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:44px; height:44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--blue-600); cursor:pointer; }

  .sn-sidebar { display:none; inset:68px 12px auto; width:auto; max-height:calc(100dvh - 160px); padding:18px; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgb(var(--shadow-rgb) / .16); z-index:28; }
  .sn-open .sn-sidebar { display:flex; }
  .sn-brand { padding-bottom:14px; }
  .sn-side-nav { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
  .sn-section { margin:12px 0 0; }
  .sn-section h2 { margin-left:8px; }
  .sn-side-link { gap:8px; padding:10px 8px; font-size:.8rem; }
  .sn-support { display:flex; flex-direction:column; align-items:stretch; gap:3px; margin-top:14px; padding-top:10px; }
  .sn-support > p { margin:0 8px; }
  .sn-note { display:none; }
  .sn-open :is(.sandy, .floating-controls, .sandy-float, .sandy-sleep, .sandy-snack-toggle, .sandy-pack.is-popover, .writing-board, .writing-launcher) { visibility:hidden; }

  .sn-local { display:flex; gap:8px; padding:10px 16px; overflow-x:auto; border-bottom: 1px solid var(--line); background: var(--tint-1); scrollbar-width:none; }
  .sn-local::-webkit-scrollbar { display:none; }
  .sn-local:not(.is-end) { -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .sn-local a { display:inline-flex; align-items:center; min-height:44px; padding:7px 12px; border-radius: 8px; color: var(--muted); font-size:.8rem; text-decoration:none; white-space:nowrap; }
  .sn-local a[aria-current="page"] { background: var(--tint-3); color: var(--blue-600); font-weight:500; }

  .sn-mobile { position:fixed; inset:auto 0 0; z-index:35; display:grid; grid-template-columns:repeat(4, 1fr); padding:7px 12px calc(7px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--tint-1); }
  .sn-mobile a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:47px; padding:5px; border-radius: 10px; color: var(--muted); font-size:.7rem; text-decoration:none; }
  .sn-mobile a[aria-current] { background: var(--tint-2); color: var(--blue-600); font-weight:500; }
  .sn-mobile .sn-icon { width:21px; height:21px; }

  /* Sandy's dock on phones: the right end of the tab bar (positions in assets/sandy.css). The tabs keep that space free,
     so Sandy and her 💤 button never sit on a card, a choice or a line of text, at any scroll position. */
  body.has-app-nav:is(.has-sandy-dock, :has(.floating-sandy-toggle, #sandy)) .sn-mobile { padding-right:calc(var(--dock-bar-reserve) + env(safe-area-inset-right, 0px)); }
  /* No permanent bubbles or progress pill on phones: the dock only holds Sandy and 💤 */
  .floating-progress, .floating-sandy-bubble, .floating-sandy-status { display:none !important; }

  /* Lift the writing board above the bottom tab bar */
  body.has-app-nav .writing-board, body.has-app-nav .writing-launcher { left:12px; bottom:calc(var(--sn-bottom-bar) + 16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:700px) {
  /* The write board is for iPad / pen use; on phones it only covers the word list */
  .writing-board, .writing-launcher { display:none !important; }
}
@media (max-width:600px) {
  .sn-side-nav { grid-template-columns:1fr; gap:4px; }
  .sn-side-link { padding:10px 12px; }
  .sn-section h2 { margin-left:12px; }
  .sn-sidebar { max-height:calc(100dvh - 150px); }
}

/* Settings is available in the account disclosure and the main navigation. */
.sn-crumbs { flex: 1; }
.sn-icon-btn { display: inline-grid; flex-shrink: 0; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--blue-600); cursor: pointer; }
.sn-icon-btn:hover { background: var(--tint-2); }
.sn-settings { text-decoration:none; }
.sn-icon-btn:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
@media (max-width:600px) {
  .sn-crumb-root, .sn-crumb-divider { display:none; }
}