/* Shared interaction layer, loaded after every page-scoped stylesheet.

   The hover "glow" experiment was removed — a box-shadow glow read as an ugly
   boxed blue shadow, especially on non-card elements (rows, text links, the
   chapter navigator). Native per-component hovers are authoritative again.

   What remains here is intentionally small:
     1. Hold the browse cards at their resting neutral border on hover so they
        never gain the skin's blue box border.
     2. Keep navbar/footer links bare ink (colour brighten only, never a box).
     3. The persistent floating theme toggle, and the lane that keeps page
        content out from under it.
     4. The touch press of the browse cards and the touch chrome (no system
        tap flash), and the subject hubs' zoom band. */

@media (hover: hover) {
  /* Browse cards keep their resting neutral border on hover — no blue box. The
     skin's own background + elevation still supply the hover lift.
     :focus-visible keeps its blue ring untouched (keyboard accessibility). */
  html .pg-board-shell .pg-bcard:hover,
  html .si-page .si-card:hover,
  html .sr-page a.sr-card:hover {
    border-color: var(--nb-border);
  }
}

/* Navbar and footer links stay bare ink — only their colour brightens on hover,
   never a pill or box; the active programme keeps the one filled state. */
html .topbar .nav-link:not(.is-active):not([data-ui-current="page"]):hover,
html .site-footer .ft-link:hover,
html .site-footer .ft-legal-link:hover {
  background: transparent;
  box-shadow: none;
  color: var(--nb-blue-strong, var(--text-link-hover));
  transition: color var(--hover-dur, 0.2s) var(--ease-expo);
}

/* Persistent theme control. It sits over ordinary page content, but below the
   navbar drawers and auth overlays (their stack begins at z-index 900). */
.ft-theme-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  overflow: hidden;
  border: 1px solid;
  border-radius: 50%;
  font: inherit;
  cursor: pointer;
  box-shadow: var(--nb-shadow-2, var(--shadow-md));
  transition:
    background-color var(--hover-dur, 0.2s) var(--ease-expo),
    border-color var(--hover-dur, 0.2s) var(--ease-expo),
    box-shadow var(--hover-dur, 0.2s) var(--ease-expo),
    color var(--hover-dur, 0.2s) var(--ease-expo),
    transform var(--hover-dur, 0.2s) var(--ease-expo);
}

html:not(.theme-light) .ft-theme-toggle {
  background: var(--nb-paper-raised, var(--surface-elevated, #171c2a));
  border-color: var(--nb-border-strong, var(--border-2));
  color: var(--nb-blue-strong, var(--accent));
}

html.theme-light .ft-theme-toggle {
  background: var(--nb-paper-raised, var(--surface-elevated, #ffffff));
  border-color: var(--nb-border-strong, var(--border-2));
  color: var(--nb-blue-strong, var(--accent));
}

.ft-theme-toggle .ft-theme-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}

html:not(.theme-light) .ft-theme-icon--sun,
html.theme-light .ft-theme-icon--moon {
  display: none;
}

.ft-theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.ft-theme-toggle:active {
  transform: translateY(0) scale(var(--press-scale, 0.98));
}

@media (hover: hover) {
  html:not(.theme-light) .ft-theme-toggle:hover,
  html.theme-light .ft-theme-toggle:hover {
    border-color: var(--nb-blue, var(--accent));
    box-shadow: var(--nb-shadow-2, var(--shadow-md));
    transform: translateY(var(--lift-sm, -1px));
  }
}

html.note-focus-mode .ft-theme-toggle {
  display: none !important;
}

@media (max-width: 1023px) {
  .ft-theme-toggle {
    display: none !important;
  }
}

/* ONE PLACE ON EVERY PAGE (owner 2026-10-01: "it changes place all the
   time?"; the audit found one page that moved it, Topic Questions, lifted to
   152px over its question bar). Where the question bar is up, the toggle keeps
   the right 24px every page uses and sits IN the bar, centred on the bar's
   measured height (--qg-pager-h, 69px), a few pixels lower than the 24px
   corner and nowhere else. The bar leaves it the toggle's lane
   (notebook-grader.css: Next ends --ft-theme-lane from the edge). */
body:has(.qg-pager) .ft-theme-toggle {
  bottom: calc((var(--qg-pager-h, 69px) - 46px) / 2);
}

/* THE TOGGLE'S LANE (mobile audit 2026-09-25). The toggle shows from 1024px,
   fixed 24px in from the right edge and 46px wide, and between 1024 and about
   1260px columns still ran under it: the footer's Terms of Service link (a tap
   on its end flipped the theme instead), the hub cards and the hub's tutor
   link, and the study column (MCQ options, the flashcard, note text). It is
   the only theme control at those widths (the drawer's row exists only below
   1024), so it stays, and each column keeps its content out of one lane:
   24 + 46 + a 10px gap = 80px from the window's right edge, the lane Topic
   Questions already reserves (notebook-grader.css). Only in the bands where a
   column reaches the lane; above them every gutter clears it by itself, so
   1440 and 1920 are untouched. The pickers, pricing and the profile reserve
   their own lanes in their own sheets. Each band runs about 20px past the
   last width that needs it: a desktop scrollbar narrows the window the toggle
   is placed in, but not the width a media query reads. */
:root {
  --ft-theme-lane: calc(24px + 46px + 10px);
}

/* The footer's legal row ends at the footer's 60px padding up to 1100px and
   at the centred 1100px measure above it, so it reaches the lane until
   1140px. Both footer copies (site-footer.css and styles.css) share it. */
@media (min-width: 1024px) and (max-width: 1159px) {
  html .site-footer .ft-legal {
    padding-inline-end: calc(var(--ft-theme-lane) - 60px);
  }
}

/* Subject hubs: the card column is centred at 1080px inside a 48px gutter.
   The gutter becomes the lane on both sides, so the column stays centred;
   from 1240px the 1080px column fits inside it and nothing moves. The html
   prefix outranks noteviewer.css's .sr-page. */
@media (min-width: 1024px) and (max-width: 1259px) {
  html .sr-page {
    padding-inline: var(--ft-theme-lane);
  }
}

/* Study pages: the reading column (notes 800px, MCQ 760, flashcards 720)
   centres in the track right of the rail and reaches the lane up to about
   1260px. The layout gives up the lane on its right, less the page gutter
   already there, the same padding and band as Topic Questions, so the column
   of every mode sits in the same place. Not in focus mode (the toggle is
   hidden there), not on Topic Questions (its own rule), and from 1081px not
   beside the docked tutor, whose track already keeps the note clear. */
@media (min-width: 1024px) and (max-width: 1080px) {
  html:not(.note-focus-mode) .nb-page-layout:not(:has(.nb-qg-body)) {
    padding-right: calc(var(--ft-theme-lane) - clamp(20px, 2.5vw, 48px));
  }
}
@media (min-width: 1081px) and (max-width: 1279px) {
  html:not(.note-focus-mode) .nb-page-layout:not(:has(.nb-qg-body, .nb-tutor-margin)) {
    padding-right: calc(var(--ft-theme-lane) - clamp(20px, 2.5vw, 48px));
  }
}

/* Touch press on the browse cards (mobile audit 2026-09-25). No sheet on
   these surfaces set a tap highlight, so Android flashed its own cyan square
   over the rounded cards (iOS its grey one). The flash is off, and while a
   finger is down a card shows its press: back to its resting elevation, no
   lift, and the blue edge of the one you are choosing. Only where nothing
   hovers, so a mouse press on the desktop is as it was. The skins' touch
   resets (notebook-pickers-skin.css, notebook-hub-skin.css) skip :active, so
   while the finger is down this press wins over the plain :hover rules (same
   weight or more, and this sheet loads last); when it lifts, those resets
   restore the resting look. The pricing plans keep their own checked ring as
   their press.
   The same flash was left on the rounded touch chrome (mobile audit K-R1-1,
   2026-09-26): the menu button and the drawer's rows on every page (the
   dashboard too, its navbar sits outside .nb-min), the hub's tutor link,
   the pricing Continue button and the gateway's See pricing. While the
   finger is down each shows its own hover look, which a touch screen shows
   late or never (a drawer row takes it only as the finger lifts; the skins'
   touch resets and .nb-btn's hover: hover gate keep it off the others): a
   row or an outlined control takes the blue wash, a filled button the
   stronger blue. The current programme row keeps its solid fill and Sign out
   its red (their own rules, which the :not()s leave alone). */
html .pg-board-shell .pg-bcard,
html .si-page .si-card,
html .sr-page a.sr-card,
html .nb-pricing-plan,
html .nb-pricing-faq-q,
html .mobile-nav-row,
html .mobile-drawer-toggle,
html .sr-page .sr-tutor-link,
html .nb-pricing-cta,
html .pg-cta-section .lp-cta-primary {
  -webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
  html .pg-board-shell .pg-bcard:active,
  html .si-page a.si-card:active,
  html .sr-page a.sr-card:active {
    border-color: var(--nb-blue);
    box-shadow: var(--nb-shadow-1);
    transform: none;
  }
  html .nb-pricing-faq-q:active {
    color: var(--nb-blue);
  }
  html body .mobile-nav-row:not(.is-active):not(.mobile-nav-row--premium):not(.mobile-nav-row--signout):active {
    background: var(--nb-blue-wash, var(--accent-soft));
    color: var(--nb-blue, var(--accent));
  }
  html .mobile-drawer-toggle:active,
  html .sr-page .sr-tutor-link:active {
    background: var(--nb-blue-wash, var(--accent-soft));
    border-color: var(--nb-blue, var(--accent));
  }
  html body .mobile-nav-row--premium:active,
  html .nb-pricing-cta:active:not(:disabled),
  html .pg-cta-section .lp-cta-primary:active {
    background: var(--nb-blue-strong, var(--accent-hover));
    border-color: var(--nb-blue-strong, var(--accent-hover));
  }
}

/* THE SUBJECT HUBS AT 150 TO 200% ZOOM (mobile audit K-R1-3b, 2026-09-26),
   the hub twin of the pickers' band (notebook-pickers.css, K-R1-3a): a
   zoomed page is 160px (320 at 200%) to 259px wide in CSS pixels, a width no
   device has, so no phone, tablet or desktop ever matches it. Measured
   before it, in Chromium and WebKit: each card kept its plate (44px, 56px
   on the featured card) and arrow beside the text, so the text column fell
   to 12px at 160 and the card cut its title ("Notes", "Summaries",
   "Flashcards", 40px at 160, 8px at 250); the tutor link, a 162px pill that
   cannot shrink, and the featured card's "Open notes" ran off the page
   (182px of page in 160); the tip cut "understanding" and the AP title ran
   "Electricity" past the edge. Now a card puts its plate and arrow on the
   first line and the whole text below, the tutor link its icon and arrow
   above its words (a rounded box here, not a pill), and a word longer than
   its column breaks inside it, never past its edge. No hyphens: auto, which
   also splits words that fit (the pickers measured "revi-sion re-sources").
   The tip's text is a flex item sized to its longest word, so it is held to
   the strip's width for that break to happen. Geometry only: the hub skin
   is colours only, the type stays the typography sheets' own, and every
   card and the tutor link open what they opened. */
@media (max-width: 259px) {
  html .sr-page .sr-card-row {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  html .sr-page .sr-card-body {
    flex-basis: 100%;
    order: 1;
  }
  html .sr-page .sr-card-arrow {
    margin-left: auto;
  }
  html .sr-page .sr-title,
  html .sr-page .sr-card-title,
  html .sr-page .sr-card-desc {
    overflow-wrap: break-word;
  }
  html .sr-page .sr-tutor-link {
    flex-wrap: wrap;
    row-gap: var(--nb-s2, 8px);
    padding: var(--nb-s2, 8px) var(--nb-s3, 12px) var(--nb-s3, 12px) var(--nb-s2, 8px);
    border-radius: var(--nb-r-lg, 12px);
  }
  html .sr-page .sr-tutor-ic,
  html .sr-page .sr-tutor-arrow {
    order: -1;
  }
  html .sr-page .sr-tutor-text {
    border-radius: var(--nb-r-lg, 12px);
  }
  html .sr-page .sr-tips {
    padding-inline: 16px;
  }
  html .sr-page .sr-tips p {
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

/* The notes tutor sheet and the toggle (2026-09-23). The toggle no longer
   steps aside for an open sheet: it stays at right 24 / bottom 24 like every
   other page, and the DOCKED SHEET stops short of that corner instead
   (notebook-tutor.css §15, a max-height that leaves the toggle's 46px, its
   24px and a 24px gap). Stepping the toggle left put it on the note itself,
   measured at x=934 at 1440, 778 at 1280 and about 625 at 1100. */