/* Shared phone/tablet layer. Linked after each page's inline <style>, so these rules win on small screens.
   mobile.js adds the Contents toggle, the floating Contents button and stacked-table labels. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:break-word}
code{word-break:break-word}
.cards{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.toc-toggle,.toc-fab,.swipe-hint{display:none}

@media (max-width:820px){
  /* Top bar: brand plus a single row of links that scrolls sideways */
  .topbar{position:relative}
  .topbar .wrap{position:relative;flex-wrap:nowrap;overflow-x:auto;gap:18px;padding-top:0;padding-bottom:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .topbar .wrap::-webkit-scrollbar{display:none}
  .topbar a{white-space:nowrap;padding:12px 0;flex:none}
  .topbar .brand{margin-right:6px}
  .topbar::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;background:linear-gradient(to right,transparent,var(--surface))}

  /* Contents: collapsed behind a toggle instead of a long list above the content */
  nav.side{position:static!important;max-height:none!important;border:1px solid var(--border)!important;border-radius:10px;background:var(--surface);padding:0!important;margin:0 0 12px}
  nav.side > ol{padding:2px 14px 12px;max-height:60vh;overflow:auto}
  nav.side.collapsed > ol{display:none}
  nav.side li{margin:0}
  nav.side li a{display:block;padding:5px 0}
  .toc-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;border:0;background:none;color:var(--text);font:inherit;font-weight:600;padding:11px 14px;cursor:pointer}
  .toc-toggle .chev{transition:transform .15s;color:var(--muted)}
  nav.side:not(.collapsed) .toc-toggle .chev{transform:rotate(180deg)}
  .layout{gap:0!important;grid-template-columns:minmax(0,1fr)!important}
  .layout > *{min-width:0}

  .toc-fab{position:fixed;left:16px;bottom:16px;z-index:10;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:8px 14px;font:inherit;font-size:.85rem;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
  .toc-fab.show{display:block}
}

@media (max-width:640px){
  body{font-size:15.5px}
  header{padding:26px 0 14px!important}
  header p{font-size:1rem!important}
  h2{overflow-wrap:anywhere}

  /* Search/filter bars stop being sticky so they don't eat half the screen */
  .toolbar{position:static}
  .toolbar .wrap{gap:8px}
  .toolbar input[type=search]{flex:1 1 100%}
  .btn{padding:7px 10px;font-size:.84rem}

  /* Tighter cards */
  a.card{padding:18px 16px 16px}
  .chap,.card,.idea,.irr,.eli5{padding-left:14px!important;padding-right:14px!important}
  .how{padding:14px 16px}
  details.qa summary{padding:12px 12px 12px 40px}
  .ans{padding:12px 12px 14px 40px}
  details.qa summary::before,.ans::before{left:10px}
  .analogy{grid-template-columns:1fr!important}
  .analogy dd{margin-bottom:6px}
  ol.flow li{padding-left:36px}
  ol.flow li::before{left:8px}
  .steps li{padding-left:48px}
  .steps li::before{left:12px}

  /* Tables become stacked cards: one block per row, cells labelled from the header */
  .table-wrap,.tw{overflow:visible!important;background:var(--surface)}
  table.stack{min-width:0!important;display:block}
  table.stack thead{display:none}
  table.stack tbody,table.stack tr{display:block}
  table.stack tr{padding:10px 12px;border-bottom:1px solid var(--border)}
  table.stack tr:last-child{border-bottom:none}
  table.stack td,table.stack tbody th{display:block;width:auto!important;border:none!important;padding:2px 0!important;background:none!important;white-space:normal!important}
  table.stack tr > :first-child{font-weight:600;font-size:1rem}
  table.stack td[data-label]::before{content:attr(data-label);display:block;font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:6px}
  table.stack tr > td:first-child[data-label]::before{display:none}

  /* Wide diagrams keep their size and scroll sideways; a hint says so */
  .swipe-hint{display:block;font-size:.8rem;color:var(--muted);margin:10px 0 -4px}

  .theme-btn{width:38px;height:38px;padding:0;font-size:0;right:12px;bottom:12px;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.12)}
  .theme-btn::before{content:"◐";font-size:18px;line-height:1}
  .toc-fab{padding:6px 11px;font-size:.78rem;left:12px;bottom:12px}
  footer{padding-bottom:72px!important}
}