/* ─────────────────────────────────────────────────────────
   Verba shared mobile primitives
   Loaded by every HTML page; runs AFTER each page's inline
   <style> block so it can safely override where needed.
   ───────────────────────────────────────────────────────── */

/* Safe-area env vars default to 0 on desktop browsers */
:root{
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

/* Prevent iOS Safari rescaling text on landscape rotation */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Never allow sideways scroll from a stray wide element */
html,body{max-width:100vw;overflow-x:hidden}

/* Prevent iOS Safari auto-zoom: any focusable input must be ≥16px */
@media (max-width:768px){
  input,select,textarea,button{font-size:16px !important}
}

/* 44x44 minimum tap target for interactive pills, icons, CTAs */
@media (max-width:768px){
  .icon-btn,.nav-item,.soc-btn,.submit,.mode-tab,.back,.brand,
  button[type="submit"],.btn,.btn-lg,.hero-ctas > *{
    min-height:44px;
  }
  .icon-btn{min-width:44px}
  .hero-ctas > *{display:inline-flex;align-items:center;justify-content:center}
  .checkrow{font-size:15px;min-height:44px;padding:6px 0}
}

/* Disable :hover on touch devices to avoid sticky-hover state on iOS */
@media (hover:none){
  .lib-chip:hover,.btn:hover,.btn-primary:hover,.cut-tool:hover{
    background:inherit;transform:none;
  }
}

/* Respect notch / home indicator */
@media (max-width:768px){
  body{
    padding-left:var(--safe-l);
    padding-right:var(--safe-r);
  }
}

/* Images never overflow their container */
img,svg,video,canvas{max-width:100%;height:auto}

/* Long unbroken strings (URLs, tokens) wrap instead of overflowing */
.cut-body,.card,.modal,.pay-shell,.form-wrap{overflow-wrap:anywhere}

/* Card cutter toolbar — shrink icon buttons on phones.
   Base desktop sizes are 32x28 with 14px svg; mobile.css's universal
   `button{font-size:16px}` + `svg{max-width:100%}` can blow these up.
   Pin them tight so the toolbar doesn't dominate the viewport. */
@media (max-width:768px){
  .pane-foot-tools{gap:4px;padding:4px 8px}
  .pane-foot-tools .tool-btn.icon-only{
    width:28px !important;height:28px !important;
    min-width:28px !important;min-height:28px !important;
    padding:0 !important;font-size:0 !important;
  }
  .pane-foot-tools .tool-btn.icon-only svg{
    width:12px !important;height:12px !important;
    max-width:12px !important;
  }
}

/* My Cards: no hover on mobile — always show copy btn, hide date */
.mycard .mc-copy-btn{opacity:1}
.mycard .date{opacity:0}

/* ─────────────────────────────────────────────────────────
   App shell (app.html) — mobile layout
   Convert side rail to bottom tab bar; collapse desktop-only
   topbar widgets; tighten page paddings.
   ───────────────────────────────────────────────────────── */
@media (max-width:767px){
  /* Shell becomes single column with bottom rail */
  .shell{
    grid-template-columns:1fr !important;
    grid-template-rows:1fr auto !important;
    height:100vh;
    height:100dvh;
  }

  /* Rail: side → bottom horizontal bar (slightly lifted from the edge) */
  .rail{
    grid-row:2;grid-column:1;
    flex-direction:row !important;
    align-items:center;justify-content:space-around;
    padding:8px 14px calc(14px + var(--safe-b)) !important;
    border-right:none !important;border-top:1px solid var(--line);
    height:auto;width:100%;gap:0 !important;
    background:#fff;
    z-index:30;
  }
  .rail-brand,.rail-spacer,.rail-avatar{display:none !important}
  .rail-section{
    flex-direction:row !important;
    flex:1;justify-content:space-around;
    gap:0 !important;width:100%;
  }
  .rail-btn{
    width:48px !important;height:44px !important;
    border-radius:var(--r,8px) !important;
  }
  .rail-btn .tip{display:none !important}
  .rail-btn.on::before{
    left:50% !important;top:-7px !important;bottom:auto !important;
    width:18px !important;height:2px !important;
    transform:translateX(-50%);
  }

  /* Main column gets row 1, fills remaining height */
  .main{grid-row:1;grid-column:1}

  /* Topbar: hidden entirely on mobile (rail at the bottom is enough nav) */
  .topbar{display:none !important}

  /* Today page: stack hero, shrink kicker spacing */
  .today-hero{padding-left:14px !important;padding-right:14px !important}
  .today-grid{grid-template-columns:1fr !important;gap:18px !important;padding:18px 14px 40px !important}
  .today-hero .h1,.today-hero h1{font-size:28px !important;line-height:1.15 !important}
  /* Quick actions: 2 cards per row on mobile, hide the 3rd entirely so the row stays balanced */
  .qa-row{grid-template-columns:1fr 1fr !important;gap:10px !important;padding:18px 14px 0 !important;margin-top:-14px !important}
  .qa-row > :nth-child(n+3){display:none !important}
  .qa{padding:14px !important}
  .qa-head h3{font-size:13.5px !important}
  .qa p{font-size:12px !important}
  /* Suggestion / topic / library tags: ellipsis instead of overflow */
  .topic-list .topic-pill,.topic-list .topic-tag,.lib-chip,.suggestion-pill,.sug-pill,.lib-tag{
    max-width:160px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    padding:6px 10px !important;font-size:12px !important;
  }
  .topic-list{gap:6px !important}
  /* Declutter Today on mobile — keep only what's actionable */
  .aside-card:has(.pulse-grid){display:none !important}      /* "This week" pulse */
  /* Hide the "Topics in your library" section entirely — chips are still
     accessible via the Library tab, and on mobile this section just adds noise */
  .today-grid > div > .section:nth-child(2){display:none !important}
  .today-h1{font-size:24px !important;line-height:1.18 !important;padding-top:6px}
  .today-sub{font-size:13px !important;margin-top:6px !important}
  .today-hero{padding-top:14px !important;padding-bottom:10px !important}
  /* Compact countdown timer */
  .tourn-counter{gap:6px !important}
  .tourn-counter .tc{padding:6px 4px !important}
  .tourn-counter .tc b{font-size:18px !important}
  .tourn-counter .tc span{font-size:9.5px !important}
  /* Tourn-card on mobile: less padding, smaller name */
  .tourn-card{padding:14px !important}
  .tourn-card h3{font-size:11px !important}
  .tourn-name{font-size:16px !important}

  /* Cutter page — clean two-row input: text on top, controls below */
  .cutter-page{padding:14px !important}
  .cut-input{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    gap:8px 10px !important;
    padding:10px 10px 10px 14px !important;
    border-radius:14px !important;
  }
  .cut-input .lead{grid-column:1;grid-row:1;color:var(--muted-2)}
  .cut-input .lead svg{width:14px;height:14px}
  .cut-input input{
    grid-column:2;grid-row:1;
    flex:none;width:100%;min-width:0;padding:6px 0 !important;
    font-size:16px !important;
  }
  .cut-input .send{
    grid-column:3;grid-row:1;
    width:34px !important;height:34px !important;
    border-radius:50% !important;
    background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important;
  }
  .cut-input .send svg{width:14px !important;height:14px !important}
  /* URL/PDF segmented control — full width row 2, balanced 50/50 */
  .cut-input .modes{
    grid-column:1/3;grid-row:2;
    margin:0 !important;padding:2px !important;border:1px solid var(--line) !important;
    background:var(--panel) !important;border-radius:9px !important;
    height:34px !important;gap:0 !important;
    display:grid !important;grid-template-columns:1fr 1fr !important;
  }
  .cut-mode{
    padding:0 !important;height:28px !important;
    display:inline-flex !important;align-items:center;justify-content:center;
    border-radius:7px !important;
    font:600 12px/1 var(--font-display) !important;
    color:var(--muted) !important;
  }
  .cut-mode.on{background:#fff !important;color:var(--ink) !important;box-shadow:0 1px 2px rgba(0,0,0,.06) !important}
  .cut-input .upload-btn{
    grid-column:3;grid-row:2;
    width:34px !important;height:34px !important;
    border:1px solid var(--line) !important;border-radius:9px !important;
    background:#fff !important;color:var(--muted) !important;
  }
  .cut-input .upload-btn:hover,.cut-input .upload-btn:focus{
    color:var(--ink) !important;background:var(--panel) !important;border-color:var(--line-2) !important;
  }
  .recent-row{grid-template-columns:1fr !important}

  /* Library page: list takes the full viewport; preview becomes a fullscreen
     overlay that slides up when a card is tapped (driven by .is-active) */
  .lib-shell{display:block !important;grid-template-columns:1fr !important;height:auto !important}
  .lib-list-pane{max-height:none !important;border-right:none !important;border-bottom:none !important}
  .lib-list-head{padding:14px 14px 10px !important;position:static !important}
  .lib-detail-pane{padding:14px !important}
  /* Bottom-sheet: full-viewport tall, drag-positioned with snap points
     (closed = translateY 100%, half = 50%, full = 0%). */
  .lib-preview{
    position:fixed !important;left:0;right:0;top:0 !important;bottom:0 !important;z-index:60;
    height:100vh !important;max-height:none !important;
    background:#fff !important;
    border-top:1px solid var(--line) !important;
    border-top-left-radius:18px !important;border-top-right-radius:18px !important;
    box-shadow:0 -10px 32px -8px rgba(0,0,0,0.18) !important;
    transform:translateY(100%);
    transition:transform 280ms cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
    padding:0 !important;
    display:flex !important;flex-direction:column;gap:0 !important;
    overflow:hidden;
    will-change:transform;
    touch-action:none;
  }
  /* Default open = half */
  .lib-preview.is-active{transform:translateY(50%);pointer-events:auto}
  /* Dragged-up = fullscreen */
  .lib-preview.is-active.snap-full{transform:translateY(0)}
  .lib-preview.dragging{transition:none !important}
  /* Real handle element (not pseudo, so we can attach pointer events) */
  .lib-pv-handle{
    display:flex !important;align-items:center;justify-content:center;
    flex:0 0 auto;height:24px;cursor:grab;
    touch-action:none;-webkit-tap-highlight-color:transparent;
  }
  .lib-pv-handle:active{cursor:grabbing}
  .lib-pv-handle > span{
    display:block;width:44px;height:5px;border-radius:5px;
    background:var(--muted-3);transition:background .14s;
  }
  .lib-pv-handle:hover > span{background:var(--muted)}
  /* Header: meta + Copy/Source + Close, all in one row */
  .lib-pv-head{
    display:flex !important;align-items:center;gap:10px;
    padding:6px 14px 12px !important;border-bottom:1px solid var(--line-soft) !important;
    flex:0 0 auto;
  }
  .lib-pv-head .meta{flex:1;min-width:0;font-size:12.5px !important;overflow-wrap:anywhere}
  .lib-pv-head .actions{display:flex;gap:6px;flex:0 0 auto}
  .lib-pv-head .btn,.lib-pv-head .btn-sm{padding:7px 12px !important;min-height:36px}
  .lib-pv-close{
    display:grid !important;
    width:36px;height:36px;border-radius:50%;place-items:center;
    background:var(--panel);border:1px solid var(--line);color:var(--ink);
    cursor:pointer;flex:0 0 auto;
    position:static !important;
  }
  .lib-pv-close:hover{background:var(--panel-2)}
  .lib-pv-body{flex:1;min-height:0;overflow-y:auto;padding:14px !important}
  /* When overlay is active, lock background scroll to the body row */
  .lib-preview.is-active ~ .lib-list-pane{filter:brightness(.6);transition:filter .24s}

  .lib-search{padding:8px 12px !important;margin-top:10px !important}
  .lib-search input{font-size:16px !important;min-width:0}
  .lib-chips,.lib-toolbar{flex-wrap:wrap !important;gap:6px !important;padding:10px 14px 0 !important}
  .lib-chip{padding:6px 10px !important;font-size:12px !important;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lib-list .lib-card,.lib-list > div{min-width:0}
  .lib-list .lib-card *{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .lib-pv-head{flex-wrap:wrap !important;gap:8px !important}

  /* Tournaments — fit in viewport without horizontal scroll */
  .t-shell,.tourn-shell{grid-template-columns:1fr !important}
  .t-aside,.tourn-aside{border-right:none !important;border-bottom:1px solid var(--line)}
  .tourn-filters{flex-wrap:wrap;gap:6px}
  .shellpad{padding:14px 14px 80px !important}
  .tourn-grid{grid-template-columns:1fr !important;gap:10px !important}
  .tourn-grid .tourn-card,.tourn-grid > *{min-width:0}
  .tourn-grid > * *{min-width:0}
  /* Collapse the 4-column tt-table into 2 columns: tournament + status; hide date/location */
  .tt-table{overflow:hidden}
  .tt-head,.tt-row{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;padding:11px 14px !important;
    min-width:0 !important;
  }
  .tt-head > :nth-child(2),.tt-head > :nth-child(3),
  .tt-row > :nth-child(2),.tt-row > :nth-child(3){display:none !important}
  .tt-row > :nth-child(1),.tt-head > :nth-child(1){min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tt-row > :nth-child(4),.tt-head > :nth-child(4){font-size:11px !important;white-space:nowrap}
  .t-toolbar{flex-direction:column !important;align-items:stretch !important;gap:8px !important;margin-bottom:10px !important}
  .t-search{width:100%}
  .t-search input{font-size:16px !important;min-width:0}
  .rank-tabs{flex-wrap:wrap;gap:4px}
  .rank-tab{font-size:12.5px !important;padding:6px 10px !important;min-height:36px}
  .section-band{padding:10px 0 6px !important;font-size:11.5px !important}
  .section-band .lbl{font-size:11px !important;letter-spacing:.08em !important}
  /* Tournament detail */
  .pp-head{flex-direction:column;gap:8px}
  .pp-head h1{font-size:22px !important;line-height:1.15 !important;word-break:break-word}
  .pp-head .sub{font-size:12.5px !important}
  .pp-stats{grid-template-columns:repeat(2, 1fr) !important;gap:8px !important}
  .pp-block{margin-top:18px !important}
  .pp-block h3{font-size:14px !important}

  /* Rankings (leaderboard `.lb`) — collapse from 5 cols to 3: rank + team + elo.
     Hide Δ30d and Record on mobile. Team name + school stack with ellipsis. */
  .lb{margin:0 -2px !important}
  .lb-head, .lb-row{
    grid-template-columns:34px minmax(0,1fr) 70px !important;
    padding:11px 14px !important;
    gap:10px !important;
  }
  .lb-head > :nth-child(4), .lb-head > :nth-child(5),
  .lb-row > :nth-child(4), .lb-row > :nth-child(5){display:none !important}
  .lb-head > :nth-child(1){padding-left:0 !important}
  .lb-rank{font-size:14px !important}
  .lb-team{min-width:0;flex-direction:column !important;align-items:flex-start !important;gap:2px !important}
  .lb-team .name{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:-0.01em}
  .lb-team .school{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .lb-elo{font-size:14px !important;text-align:right;white-space:nowrap}
  /* Hide ranking eyebrow (it duplicates the page title) and tighten the format tabs */
  #rank-eyebrow{display:none !important}
  /* Bottom padding so the last row isn't hidden behind the bottom rail */
  #page-rankings .shellpad{padding-bottom:80px !important}

  /* Settings — single column, horizontal-scroll nav (NOT sticky, doesn't overlap body) */
  .set-shell{
    display:flex !important;flex-direction:column !important;
    grid-template-columns:1fr !important;height:auto !important;
    gap:0 !important;padding:0 !important;max-width:none !important;
  }
  .set-nav{
    position:static !important;
    display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    overflow-x:auto;overflow-y:hidden;
    padding:10px 14px !important;
    border-right:none !important;border-bottom:1px solid var(--line);
    gap:4px;background:#fff;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .set-nav::-webkit-scrollbar{display:none}
  .set-nav button{
    flex:0 0 auto;white-space:nowrap;
    font-size:13px !important;padding:8px 12px !important;
    min-height:40px;
  }
  .set-body{padding:18px 14px 40px !important;width:100%;min-width:0}
  /* Settings rows: stack label over value so action buttons aren't squeezed off-screen */
  .set-row{
    display:flex !important;flex-direction:column !important;
    align-items:stretch !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:14px 16px !important;
  }
  .set-row .lab{font-size:14px !important}
  .set-row .lab span{font-size:12.5px !important;margin-top:4px !important;line-height:1.4 !important;display:block}
  .set-row .val{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%}
  .set-row .val .btn,.set-row .val .btn-sm{min-height:40px;padding:0 14px;width:auto}
  .set-row .swatch-row,.set-row .rank-tabs{flex-wrap:wrap;gap:8px}
  .set-card{box-shadow:none !important;overflow:visible !important}
  .set-section{margin-bottom:24px !important}
  .set-section h2{font-size:18px !important;margin-bottom:6px !important}
  .set-section .desc{margin-bottom:14px !important;font-size:13px !important}
  /* Profile picture row: stack on narrow viewports so the name/email aren't pushed off */
  .profile-head{
    flex-direction:column !important;align-items:flex-start !important;
    gap:10px !important;padding:14px 16px !important;
  }
  .profile-head .pic{width:48px !important;height:48px !important;font-size:16px !important}
  .profile-head .who{width:100%;min-width:0}
  .profile-head .who b,.profile-head .who span{
    overflow-wrap:anywhere;white-space:normal !important;
  }
  .profile-head .who b{font-size:15px !important}
  .profile-head .who span{font-size:12.5px !important;margin-top:4px !important}

  /* Cmd palette becomes full-width sheet */
  .cmd-bg .cmd{width:96vw !important;max-width:none !important}

  /* Modals */
  .lnk,.cmd,.modal{width:96vw !important;max-width:none !important}

  /* Usage pill: shrink + drop the "Upgrade" link on phones (still tappable
     via the Settings tab). */
  .usage-pill{padding:4px 9px !important;font-size:11px !important}
  .usage-pill .num{font-size:11px !important}
  .usage-pill .upg{display:none !important}
  /* In the chat topbar specifically, drop the "messages" word — pill becomes "X / Y" only */
  #usage-chat span:not(.dot):not(.num){display:none}

  /* General overflow guard — long unbreakable strings (URLs, citations,
     tournament names) must not blow out the layout. */
  .lib-list-pane h2, .lib-list-pane h3, .lib-list-pane .meta,
  .pp-head h1, .pp-head .sub,
  .tourn-name, .tourn-where,
  .cont-item, .cont-item *,
  .topic-pill, .topic-chip,
  #profile-name, #profile-meta{
    overflow-wrap:anywhere;
    min-width:0;
  }
  /* Page-level safety: nothing below the rail should be touchable through it */
  .page{padding-bottom:8px}
}