/* Mobile and small-screen hardening for the app shell, course notes and
 * syllabus pages.
 *
 * NOT loaded on the 84 GATE week pages — those were built fluid from the
 * start (verified 0 elements wider than the viewport at 320, 375, 768, 1440)
 * and are deliberately left untouched.
 *
 * Loads after each page's inline <style>, so equal-specificity rules win.
 * Nothing here changes a layout that already fits; it only stops content
 * escaping the viewport and lets fixed column counts collapse when there is
 * no room for them.
 */

/* ── 1. Stop content escaping the viewport ─────────────────────────────
   The measured failure: a <p> inside a pinned announcement had a 430px
   unbreakable string in a 262px box, pushing the whole document to 478px
   at a 375px viewport. Long URLs and identifiers do this constantly. */
/* `clip` rather than `hidden`: overflow-x:hidden on the root establishes a
   scroll container, which silently breaks position:sticky on descendants —
   and these pages have sticky topbars. `clip` contains the overflow without
   creating that container, so sticky survives. */
html { overflow-x: clip; }
body { overflow-x: clip; }
p, li, td, th, dd, dt, blockquote, figcaption, .announcement, .note-row {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* A long token inside prose should break rather than widen the page, but
   code keeps its own scroll so it stays readable and selectable. */
:not(pre) > code { overflow-wrap: anywhere; }
pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre code { overflow-wrap: normal; word-break: normal; white-space: pre; }

/* Wide tables scroll in their own box instead of stretching the page. */
table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* Flex and grid children default to min-width:auto, which refuses to shrink
   below their content. This is the single most common cause of a stubborn
   horizontal scrollbar. */
.header-inner > *, .nav > *, .filter-bar > *, .ann-meta > *,
.schedule-item > *, .note-row > *, .note-row-head > *,
.about-hero > *, .attend-col > * { min-width: 0; }

/* ── 2. Let fixed column counts collapse ───────────────────────────────
   These were `1fr 1fr` down to a 640px breakpoint, so between roughly 380px
   and 640px each column was too narrow to read. auto-fit lets them reflow at
   whatever width actually runs out, with no breakpoint to maintain. */
.resource-grid,
.about-projects {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

/* ── 3. Wrap the bars that run out of room ─────────────────────────────── */
.nav, .filter-bar, .ann-meta, .about-hobbies, .topbar {
  flex-wrap: wrap;
}
.header-inner {
  flex-wrap: nowrap !important;
}
/* A horizontal nav that would wrap into three ragged lines reads better as
   one scrolling strip on a phone. */
@media (max-width: 560px) {
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav > * { flex: 0 0 auto; }
}

/* ── Mobile Header & Controls (<=640px) ───────────────────────────────── */
@media (max-width: 640px) {
  .header {
    padding: 0 12px;
  }
  .header-inner {
    height: 54px;
    gap: 6px;
    flex-wrap: nowrap !important;
  }
  .logo {
    font-size: 15px;
    gap: 6px;
  }
  .logo-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .header-right {
    gap: 5px;
    flex-shrink: 0;
  }
  .study-timer-widget {
    padding: 3px 6px;
    font-size: 11px;
    gap: 2px;
    border-radius: 8px;
  }
  .timer-display {
    min-width: 34px;
    font-size: 11px;
  }
  .timer-btn {
    padding: 1px 4px;
    font-size: 10px;
  }
  .timer-reset {
    display: none !important;
  }
  .cmd-k-trigger {
    padding: 4px 7px;
    border-radius: 8px;
    gap: 0;
  }
  .cmd-k-label {
    display: none !important;
  }
  .theme-toggle-btn {
    padding: 4px 7px;
    border-radius: 8px;
    gap: 0;
  }
  .theme-toggle-btn .theme-label {
    display: none !important;
  }
  .header-profile {
    padding: 2px;
    border-radius: 50%;
    border-color: transparent;
    background: transparent;
  }
  .header-profile-name, .header-profile-tag {
    display: none !important;
  }
  .header-avatar {
    width: 26px;
    height: 26px;
  }
  .playground-actions {
    gap: 8px;
  }
  .run-btn, .pg-clear-btn, .colab-link {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 13px;
    justify-content: center;
  }
}

/* ── Theme Button Base Style ─────────────────────────────────────────── */
.theme-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 5px 10px; border-radius: 10px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .18s ease; user-select: none;
}
.theme-toggle-btn:hover {
  background: var(--surface-2); border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 10px rgba(138,95,26,.15);
}

/* ── Mobile Menubar & Topbar Polish ─────────────────────────────────── */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .topbar {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    height: auto !important;
    min-height: 48px !important;
    flex-wrap: nowrap !important;
  }
  .topbar > *:not(.theme-switch) {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: 65%;
  }
  .theme-switch {
    flex-shrink: 0;
    margin-inline-start: auto !important;
  }
  .theme-switch .theme-btn {
    padding: 3px 7px;
    font-size: 10.5px;
  }
}

:root[data-theme="light"] .topbar {
  background: rgba(247,245,241,0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #e0d9cd !important;
  color: #3d3831 !important;
}

:root[data-theme="light"] .topbar a {
  color: #5c5449 !important;
}

:root[data-theme="light"] .topbar a:hover {
  color: #8a5f1a !important;
}

:root[data-theme="light"] .topbar .sep {
  color: #c5beae !important;
}

:root[data-theme="light"] .topbar .current {
  color: #8a5f1a !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .bottom-nav {
  background: rgba(247,245,241,0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid #e0d9cd !important;
  box-shadow: 0 -4px 16px rgba(31,27,22,0.06) !important;
}

:root[data-theme="light"] .bottom-nav-item {
  color: #6f6659 !important;
}

:root[data-theme="light"] .bottom-nav-item.active {
  color: #8a5f1a !important;
}

:root[data-theme="light"] .bottom-nav-item.active .bn-icon-wrap {
  background: rgba(138,95,26,0.12) !important;
}

:root[data-theme="light"] .bn-label {
  color: inherit !important;
}

:root[data-theme="light"] .nav {
  background: #ffffff !important;
  border-bottom-color: #e0d9cd !important;
}

:root[data-theme="light"] .nav-tab {
  color: #5c5449 !important;
}

:root[data-theme="light"] .nav-tab.active {
  color: #8a5f1a !important;
  background: rgba(138,95,26,0.1) !important;
  border-bottom-color: #8a5f1a !important;
}

@media (max-width: 400px) {
  .logo-text {
    display: none;
  }
}

/* ── 4. Fluid rather than stepped ──────────────────────────────────────
   Gutters and headings scale continuously with the viewport, so the layout
   is right between breakpoints as well as at them. */
@media (max-width: 900px) {
  .hero { padding-inline: clamp(1rem, 4vw, 2rem); }
  .content, .wrap, .main { padding-inline: clamp(1rem, 4vw, 2rem); }
  .hero h1 { font-size: clamp(1.75rem, 6.5vw, 3rem); }
  .hero p.desc { font-size: clamp(0.9375rem, 2.6vw, 1rem); }
}

/* ── 5. Touch targets ──────────────────────────────────────────────────
   Only under a coarse pointer, so a mouse-driven desktop keeps its compact
   controls. 44px is the smallest reliably tappable target. */
@media (pointer: coarse) {
  a.btn, button, .tab, .nav a, .filter-chip, .theme-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .theme-btn { min-height: 38px; }   /* inside a pill group, not standalone */
}

/* ── 6. Notched phones ─────────────────────────────────────────────────
   Landscape on a notched device otherwise tucks content under the cutout. */
@supports (padding: max(0px)) {
  .topbar, .header-inner, .hero, .content, .wrap, .main {
    padding-left: max(var(--gutter, 1rem), env(safe-area-inset-left));
    padding-right: max(var(--gutter, 1rem), env(safe-area-inset-right));
  }
  .theme-dock { bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* ── 7. Short landscape viewports ──────────────────────────────────────
   A phone held sideways has ~350px of height; the usual hero padding eats
   most of it before any content appears. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-block: 1.5rem 1rem; }
  .topbar { position: static; }
}

/* ── 8. Visible focus ──────────────────────────────────────────────────
   Only the GATE pages carried focus styles; the app shell and the 361 note
   and syllabus pages had none, so a keyboard user could not see where they
   were. :focus-visible shows the ring for keyboard and assistive navigation
   without putting one around every mouse click. */
:where(a, button, summary, [role="button"], [tabindex]):focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent, #c9974a);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Anything the page scrolls to should not hide under the sticky bar. */
:target { scroll-margin-top: 5.5rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* .skip-link lives in theme.css: theme-switch.js injects it on every page,
   including the GATE ones, which do not load this file. */

/* ── 9. Interaction feel ───────────────────────────────────────────────
   Consistent, restrained transitions so controls acknowledge the pointer
   the same way everywhere rather than each page inventing its own. */
@media (prefers-reduced-motion: no-preference) {
  a, button, .card, .note-row, .resource-card, .tab, .filter-chip {
    transition: color .18s ease, background-color .18s ease,
                border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  button:active, [role="button"]:active, .tab:active { transform: translateY(1px); }
}
/* A disabled control should look disabled and refuse the pointer. */
[disabled], [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* A week that has not been published yet — see maths1-week12. */
.wk-missing { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* ── 10. Dark-theme muted text ─────────────────────────────────────────
   The original dark palette's --text-dim measured 3.82:1 on the card surface
   and 4.09:1 on the page — under the 4.5:1 AA needs, and the single largest
   source of low-contrast text on the site. These values keep the muted look
   while clearing the threshold (4.78:1 and 5.13:1).

   This lives here, not in theme.css, because responsive.css is loaded only on
   the non-GATE pages — the GATE week pages are deliberately left alone. */
:root:not([data-theme]) { --text-dim: #7c8194; }
:root[data-app]:not([data-theme]) { --text-dim: #7d8296; }

/* ── 11. Unstyled links ────────────────────────────────────────────────
   Some pages carry anchors with no class and no rule of their own, so they
   fell back to the browser default #0000EE — 2.12:1 on the dark ground.
   Wrapped in :where() so it carries zero specificity and any real rule on the
   page still wins. */
:where(a[href]:not([class])) {
  color: var(--accent, #c9974a);
  text-underline-offset: 2px;
}
:where(a[href]:not([class])):hover { color: var(--accent-hi, var(--accent, #c9974a)); }

/* ── 12. Clean Print / PDF Handout Stylesheet ───────────────────────── */
@media print {
  .topbar, .nav, .header, .search-bar-wrap, .pg-try-btn, .pg-panel,
  .theme-switch, .theme-dock, .skip-link, .nav-cta, button, .cmd-k-trigger,
  .cmd-k-backdrop, .study-timer-widget, .gate-banner {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #111111 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }
  .hero, .content, .section, main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
  h1, h2, h3, h4 {
    color: #000000 !important;
    page-break-after: avoid;
  }
  pre, code {
    background: #f4f4f5 !important;
    color: #111111 !important;
    border: 1px solid #d4d4d8 !important;
    page-break-inside: avoid;
    font-family: 'Fira Code', monospace !important;
  }
  .formula, .note {
    background: #f9f9fb !important;
    border: 1px solid #e4e4e7 !important;
    color: #111111 !important;
    page-break-inside: avoid;
  }
  a {
    color: #000000 !important;
    text-decoration: underline !important;
  }
}