/* The site's top bar, drawn the way DesignShell (components/home/DesignShell.tsx)
   draws it on every other page. The quiz is static HTML outside the Next.js
   layout, so it carries its own copy. lib/student-quiz/site-bar.test.ts keeps
   its links in step with NAV_SRC in components/home/designData.ts. */

/* The bar is sticky, so in-page links must land below it. */
html{scroll-padding-top:100px}

.sp-topbar{position:sticky;top:0;z-index:60;background:rgba(250,246,238,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #e0d7c4;color:#1f1f1f;font:16px/1.5 'Instrument Sans',Instrument,system-ui,sans-serif}
.sp-topbar a{color:inherit;text-decoration:none}
.sp-topbar-row{max-width:1200px;height:68px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:24px}
.sp-topbar-brand{display:flex;align-items:center;gap:10px;flex:none}
.sp-topbar-brand img{width:auto;height:40px}
.sp-topbar-brand span{font:500 20px/1.5 Trirong,Georgia,serif;letter-spacing:-.01em}
.sp-topbar-nav{display:flex;align-items:center;gap:2px;flex:none}
.sp-topbar-nav a{padding:7px 11px;border-radius:999px;color:#3a3a3a;font-size:14.5px;white-space:nowrap}
.sp-topbar-nav a[aria-current="page"]{background:#f0ead9;color:#1f1f1f;font-weight:600}
.sp-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:16px;flex:none}
.sp-topbar-actions a{color:#3a3a3a;font-size:14.5px;white-space:nowrap}
.sp-topbar .sp-topbar-cta{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;background:#4f814f;color:#f5f5f3;font-weight:500;transition:transform .22s ease,box-shadow .22s ease}
.sp-topbar .sp-topbar-cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(79,129,79,.5)}
.sp-topbar-toggle,.sp-topbar-close{align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid #e0d7c4;border-radius:14px;background:rgba(255,253,248,.9);color:#1f1f1f}
.sp-topbar-toggle{display:none;margin-left:auto}
.sp-topbar-sheet{display:none}

/* The quiz's own strip (field guide label, animations toggle) now sits under
   the bar, so it no longer needs masthead height. */
.sp-topbar ~ .site-header{min-height:0;padding-block:10px}
.sp-topbar ~ .site-header .header-tools{margin-left:auto}

/* Same breakpoint as the site: the row needs about 1080px, so below 1200px the
   links move into a sheet behind the menu button. */
@media (max-width:1199px){
  .sp-topbar-nav,.sp-topbar-actions{display:none}
  /* site-bar.mjs builds the menu and marks the bar ready. Without it (the
     paper quiz has no scripts) the logo still leads to every page. */
  .sp-topbar[data-menu="ready"] .sp-topbar-toggle{display:inline-flex}
  .sp-topbar-sheet{display:block;position:fixed;inset:0;z-index:70;visibility:hidden;opacity:0;transition:opacity .22s ease,visibility 0s linear .22s}
  /* Visible at once on open, so the close button can take focus. */
  .sp-topbar-sheet[data-open="true"]{visibility:visible;opacity:1;transition:opacity .22s ease,visibility 0s}
  .sp-topbar-scrim{position:absolute;inset:0;background:rgba(31,31,31,.38);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .sp-topbar-panel{position:absolute;top:0;right:0;width:min(84vw,340px);height:100%;padding:calc(18px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain;background:#fbf7ef;border-left:1px solid #e0d7c4;box-shadow:-24px 0 60px -30px rgba(31,31,31,.5);transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.7,.2,1);font:16px/1.5 'Instrument Sans',Instrument,system-ui,sans-serif}
  .sp-topbar-sheet[data-open="true"] .sp-topbar-panel{transform:none}
  .sp-topbar-panel-top{display:flex;justify-content:flex-end;flex:none;margin-bottom:4px}
  .sp-topbar-close{display:inline-flex}
  .sp-topbar-link{display:flex;align-items:center;width:100%;min-height:48px;padding:0 14px;border-radius:14px;color:#3a3a3a;font-size:16px;text-decoration:none}
  .sp-topbar-link[aria-current="page"]{background:#f0ead9;color:#1f1f1f;font-weight:600}
  .sp-topbar-rule{height:1px;margin:10px 2px;flex:none;background:#e0d7c4}
  .sp-topbar-panel .sp-topbar-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin-top:6px;padding:0 18px;border-radius:999px;background:#4f814f;color:#f5f5f3;font-size:15.5px;font-weight:500;text-decoration:none}
}
@media (max-width:640px){.sp-topbar-row{padding:0 18px}}
@media (prefers-reduced-motion:reduce){.sp-topbar-sheet,.sp-topbar-panel,.sp-topbar .sp-topbar-cta{transition:none}}
@media print{.sp-topbar,.sp-topbar-sheet{display:none!important}}