/* Final editorial polish: compact mobile navigation, quieter tools, clear notes page. */
:root{--focus:#5c8728}
html{scroll-padding-top:92px}
::selection{background:#d8f3a9;color:#1d251b}

/* The reading controls are one quiet cluster instead of two competing floating pills. */
.reading-tools .motion-toggle{position:static;left:auto;bottom:auto;z-index:auto;width:auto;min-width:52px;min-height:44px;padding:0 13px;border:0;border-radius:100px;white-space:nowrap;background:#e7eddc;color:#526442;font:600 12px/1 var(--font-reading);letter-spacing:.02em;backdrop-filter:none}
.reading-tools .motion-toggle:hover{background:var(--green)}
.reading-tools .motion-toggle[aria-pressed="true"]{background:var(--ink);color:var(--green)}
.motion-toggle::before{content:"◐";font-size:14px;margin-right:4px}
.motion-off .motion-toggle::before{content:"●"}

/* The notebook deserves the desk/writing backdrop, not the garden. */
.notebook-main .learning-heading{background-image:linear-gradient(90deg,rgba(248,246,237,.97),rgba(248,246,237,.90) 50%,rgba(248,246,237,.20)),url('images/background-writing.webp');background-position:center 60%}
.notebook-main .learning-heading h1{max-width:13em}

/* Give forms and focus a clearer, calmer edge. */
input,textarea,select{caret-color:#4e7825}
.notebook-panel input,.notebook-panel textarea,.notebook-panel select,.experiment textarea{transition:border-color .18s,box-shadow .18s}
.notebook-panel input:focus,.notebook-panel textarea:focus,.notebook-panel select:focus,.experiment textarea:focus{border-color:#668e39;box-shadow:0 0 0 3px #dcecc6}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
a,button,summary{ -webkit-tap-highlight-color: transparent; }

/* Long article links and labels breathe without breaking narrow screens. */
.source-list a,.related-grid h3,.original-card h2{overflow-wrap:anywhere}
.editorial-note,.source-line,.art-credit{text-wrap:pretty}

@media(max-width:700px){
  header{row-gap:14px}
  header nav{width:100%;flex-wrap:nowrap;gap:6px;justify-content:space-between;align-items:center;font-size:11.5px;line-height:1.4;overflow:visible}
  header nav a{white-space:nowrap;padding:8px 0}
  header nav .nav-reading{display:none}
  header nav a[data-notebook-link]{background:var(--ink);color:var(--green);padding:8px 10px;border-radius:100px;font-weight:650}
  header nav a[data-notebook-link]:after{display:none}
  .reading-tools{gap:5px;padding:6px}
  .reading-tools .motion-toggle{min-width:44px;padding:0 9px;font-size:11px}
  .reading-tools .motion-toggle::before{display:none}
  .reading-tools output{min-width:34px}
  .notebook-main .learning-heading{background-image:linear-gradient(180deg,#f8f6edf7 0%,#f8f6edf2 56%,#f8f6ed88 80%,#f8f6ed22),url('images/background-writing.webp')}
  .notebook-privacy{padding:14px 16px;background:#e9efe0;border-radius:9px}
  .note-card h3{font-size:21px}
  .article-tools .note-actions{gap:10px}
  .source-list{padding-left:20px}
  .source-list li{padding:20px 4px}
}

@media(max-width:360px){
  header nav{font-size:10.5px;gap:4px}
  header nav a[data-notebook-link]{padding:7px 8px}
  .reading-tools .motion-toggle{min-width:40px;padding:0 7px}
  .reading-tools button{width:35px;height:35px}
}

@media(prefers-reduced-motion:reduce){
  .reading-tools .motion-toggle{display:inline-flex}
  .motion-toggle::before{content:"●"}
}

/* Keep floating reading controls out of forms and notebook fields. */
.exercise-visible .reading-tools,
.notebook-main:focus-within ~ .reading-tools{visibility:hidden;pointer-events:none}
.notebook-main{padding-bottom:88px}
.case-main{padding-bottom:60px}