/* Phone layout fixes (screens up to 780px, the app's own phone breakpoint). Desktop is untouched. Loaded last. */
@media (width<=780px) {
  /* menu: one compact row you swipe, instead of six wrapped rows above every page */
  .shell{grid-template-columns:minmax(0,1fr)}                 /* the one-row menu must not widen the page: let the column shrink */
  .rail{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;padding:10px 0 4px;min-width:0;max-width:100vw}
  .main{min-width:0}
  .rail .wordmark{padding:0 16px}
  .nav{flex-wrap:nowrap;overflow-x:auto;min-width:0;max-width:100%;gap:2px;padding:0 10px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;padding:6px 10px;font-size:13.5px;white-space:nowrap;scroll-snap-align:center}
  .nav a svg{width:15px;height:15px}

  /* top bar: bell, theme and HDFC chip first, so they show without swiping; the ticker still scrolls sideways after them */
  .tape .right{order:-1;flex:none;margin-left:0;margin-right:6px;gap:8px}
  .tape .right > .muted.small{display:none}

  /* Claude buttons: small pills in the bottom corners instead of tall tabs over the text */
  .dtc-tab,.cvr-tab{writing-mode:horizontal-tb;transform:none;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    border:1px solid var(--line-2);border-radius:99px;padding:8px 13px;font-size:12.5px;background:var(--surface-2);box-shadow:0 8px 22px -10px #000c}
  .dtc-tab{right:12px}
  .cvr-tab{right:auto;left:12px}
  .dtc-tab .dot{margin:0 6px 1px 0;vertical-align:middle}
  .main{padding-bottom:60px}
  .toasts{width:auto;left:12px;right:12px;bottom:calc(64px + env(safe-area-inset-bottom,0px))}

  /* Paper book: Claude's badge under the stock name, so more columns fit */
  .cvr-badge{display:block;margin:3px 0 0;width:max-content}

  /* Help: a short scrollable contents box; wide tables scroll inside themselves */
  .help-toc{max-height:240px;overflow:auto;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:6px}
  .help-section table.help-table{display:block;overflow-x:auto;max-width:100%}
  .help-section .mono{white-space:normal;overflow-wrap:anywhere}
  .help-section h2.display{font-size:22px!important}

  /* Claude vs Rules */
  .cvr-head h2{min-width:0;flex-basis:100%;font-size:21px}
  .cvr-head{gap:8px}
  .cvr-card b{font-size:18px}

  /* iPhone zooms into any field with text under 16px */
  input,textarea,select,.dtc-foot textarea{font-size:16px!important}
}
/* Claude vs Rules totals as cards on phones (ai-review.js) */
.cvr-pcards{display:none}
@media (width<=780px) {
  .cvr-periods-wrap{display:none}
  .cvr-pcards{display:flex;flex-direction:column;gap:8px}
  .cvr-pcard{border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:8px 10px;display:flex;flex-direction:column;gap:4px}
  .cvr-pcard > b{font-size:13px}
  .cvr-pcard .row{display:grid;grid-template-columns:92px 1fr;gap:6px;font-size:12.5px;font-variant-numeric:tabular-nums}
  .cvr-pcard .row span:first-child{color:var(--muted)}
  .cvr-pcard .row.sel span:first-child{color:var(--accent)}
}