/* Phone and small-tablet layout. Loaded last on every page.
   `html:root` lifts specificity to tie with the html.ss-light theme rules,
   and loading last breaks the tie in our favour. */

/* ---------- menu (built by auth.js) ---------- */
.vxs .nav .menu-btn { display: none; }
.vxs .menu-sheet { display: none; }

@media (max-width: 860px) {
  html:root .vxs .nav .wrap { height: 56px; gap: 12px; }
  html:root .vxs .nav .logo .wm { font-size: 18px; }
  html:root .vxs .nav .links, html:root .vxs .nav .right { display: none; }
  html:root .vxs .nav .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 40px; padding: 0 2px 0 12px;
    background: none; border: 0; color: #f2efe6; cursor: pointer;
    font-family: var(--sans); font-size: 12.5px; font-weight: 700; font-stretch: 108%; letter-spacing: 0.08em; text-transform: uppercase;
  }
  html:root .vxs .nav .menu-btn i { position: relative; width: 18px; height: 12px; display: inline-block; }
  html:root .vxs .nav .menu-btn i::before, html:root .vxs .nav .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 0.2s var(--ease), top 0.2s var(--ease); }
  html:root .vxs .nav .menu-btn i::before { top: 1px; } html:root .vxs .nav .menu-btn i::after { top: 9px; }
  html:root .vxs .nav .menu-btn[aria-expanded="true"] i::before { top: 5px; transform: rotate(45deg); }
  html:root .vxs .nav .menu-btn[aria-expanded="true"] i::after { top: 5px; transform: rotate(-45deg); }

  html:root .vxs .menu-sheet { position: fixed; inset: 56px 0 0; z-index: 59; background: var(--ink); color: #f2efe6; overflow-y: auto; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); flex-direction: column; }
  html:root .vxs .menu-sheet.open { display: flex; }
  html:root .vxs .menu-sheet .ml a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid rgba(255,255,255,0.12); color: #f2efe6; text-decoration: none; font-family: var(--sans); font-weight: 800; font-stretch: 112%; font-size: 22px; text-transform: uppercase; letter-spacing: 0.01em; }
  html:root .vxs .menu-sheet .ml a::after { content: "→"; font-family: var(--mono); font-weight: 400; font-size: 16px; color: #8d8e84; }
  html:root .vxs .menu-sheet .row { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid rgba(255,255,255,0.12); font-family: var(--mono); font-size: 13px; color: #a3a397; }
  html:root .vxs .menu-sheet .seg { display: inline-flex; border: 1px solid rgba(255,255,255,0.3); }
  html:root .vxs .menu-sheet .seg button { background: none; border: 0; color: #a3a397; min-height: 38px; padding: 0 16px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
  html:root .vxs .menu-sheet .seg button[aria-pressed="true"] { background: #f2efe6; color: #20221d; }
  html:root .vxs .menu-sheet .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
  html:root .vxs .menu-sheet .acts a, html:root .vxs .menu-sheet .acts button { display: flex; align-items: center; justify-content: center; min-height: 52px; font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid rgba(255,255,255,0.35); background: none; color: #f2efe6; }
  html:root .vxs .menu-sheet .acts .solid { background: #f2efe6; color: #20221d; border-color: #f2efe6; }
  html:root .vxs .menu-sheet .acts .wide { grid-column: 1 / -1; }
  html:root .vxs .menu-sheet .who { font-family: var(--mono); font-size: 13px; color: #a3a397; margin-top: 24px; overflow-wrap: anywhere; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}

/* ---------- home ---------- */
@media (max-width: 860px) {
  /* status: one scrollable line instead of a broken grid */
  html:root .vxs .status { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
  html:root .vxs .status::-webkit-scrollbar { display: none; }
  html:root .vxs .status > div { flex: none; padding: 11px 14px 11px 0; margin-right: 14px; }
  html:root .vxs .status > div:last-child { margin-left: 0; border-right: 0; }
  html:root .vxs .status .title { font-size: 13px; }

  html:root .vxs .term .sec-head { padding-top: 22px; }
  html:root .vxs .sec-head { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  html:root .vxs .sec-head .aside { text-align: left; }
  html:root .vxs .sec-head h2, html:root .vxs .term .sec-head h2 { font-size: 30px; }

  /* filters + sort */
  html:root .vxs .term .bar-tools { position: static; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  html:root .vxs .term .sorter { display: flex; align-items: center; gap: 8px; width: 100%; }
  html:root .vxs .term .sorter select { flex: 1; min-height: 40px; }

  /* board: one market per row, card thumbnail on the left */
  html:root .vxs .term .board { grid-template-columns: minmax(0, 1fr); border-left: 0; border-top: 1px solid rgba(32,34,29,0.14); margin: 0 calc(var(--gut) * -1); }
  html:root:not(.ss-light) .vxs .term .board { border-top-color: rgba(255,255,255,0.14); }
  html:root .vxs .term .mk { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto; border-right: 0; padding: 0 var(--gut); }
  html:root .vxs .term .mk .plate { grid-row: 1 / 3; grid-column: 1; aspect-ratio: auto; padding: 16px 0 0; background: none !important; align-items: start; overflow: visible; }
  html:root .vxs .term .mk .plate img { border-radius: 4px; }
  html:root .vxs .term .mk .body { grid-column: 2; padding: 14px 0 0 14px; }
  html:root .vxs .term .mk .body .set { font-size: 11.5px; }
  html:root .vxs .term .mk .body .nm { font-size: 16px; white-space: normal; }
  html:root .vxs .term .mk .odd { margin-top: 6px; grid-template-columns: auto minmax(0, 1fr); }
  html:root .vxs .term .mk .odd svg { max-width: 120px; justify-self: end; }
  html:root .vxs .term .mk .yn { grid-column: 2; grid-template-columns: 1fr 1fr; padding: 10px 0 14px 14px; }
  html:root .vxs .term .mk .yn a { min-height: 42px; }
  html:root .vxs .term .mk .ft { grid-column: 1 / -1; padding: 10px 0; }

  /* fair value: keep the columns that matter on a phone */
  html:root .vxs .tblwrap { overflow-x: visible; margin: 0; padding: 0; }
  html:root .vxs .term .tbl { width: 100%; table-layout: auto; }
  html:root .vxs .term .tbl :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(10)) { display: none; }
  html:root .vxs .term .tbl th, html:root .vxs .term .tbl td { padding: 12px 10px 12px 0; white-space: normal; }
  html:root .vxs .term .tbl :is(th, td):last-child { padding-right: 0; }
  html:root .vxs .term .tbl td svg { display: none; }

  /* feed */
  html:root .vxs .stream li { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; }
  html:root .vxs .stream li > :nth-child(2) { display: none; }
  html:root .vxs .stream li > :nth-child(5) { grid-column: 3; font-size: 11.5px; }

  /* Charizard + Kalshi bands */
  html:root .vxs .pm .q { font-size: 30px; max-width: none; }
  html:root .vxs .pm .pct { font-size: 84px; }
  html:root .vxs .desk .fmv .big, html:root .vxs .fmv .big { font-size: 64px; }
  html:root .vxs .btn { width: 100%; }
  html:root .vxs .desk .fmv, html:root .vxs .term .desk > div, html:root .vxs .term .desk > div:first-child, html:root .vxs .term .desk .feed { padding-left: 0; padding-right: 0; }
  html:root .vxs .desk .feeds, html:root .vxs .desk .feeds > * { padding-left: 0; padding-right: 0; border-left: 0; }
  html:root .vxs footer nav { gap: 16px 20px; }
}

/* ---------- card page ---------- */
@media (max-width: 900px) {
  html:root .vxs .card .plate { padding: 24px 16px 20px; }
  html:root .vxs .card .plate .frame { position: static; width: min(58vw, 240px); margin: 0 auto; }
  html:root .vxs .card .info { padding: 20px var(--gut) 56px; }
  html:root .vxs .card .info h1 { font-size: 40px; line-height: 0.95; }
  html:root .vxs .card .info .ask { font-size: 56px; }
  html:root .vxs .card .info h2 { display: grid; gap: 4px; font-size: 26px; }
  html:root .vxs .card .info h2 span { justify-self: start; text-align: left; margin: 0; }
  html:root .vxs .crumbs { gap: 12px; }
  html:root .vxs .ladr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:root .vxs .ladr div:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--rule-light); }
  html:root .vxs .ladr div:nth-child(even) { padding-left: 12px; border-right: 0; }
  html:root .vxs .ladr div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  html:root .vxs .pager a { min-height: 40px; min-width: 44px; justify-content: center; }
}

/* ---------- account pages ---------- */
@media (max-width: 860px) {
  html:root .vxs .authpage { padding: 36px 16px 64px; min-height: calc(100vh - 56px); }
  html:root .vxs .authbox h1 { font-size: 32px; }
  html:root .vxs .authbox label { grid-template-columns: auto 1fr; align-items: baseline; }
  html:root .vxs .authbox label input { grid-column: 1 / -1; }
  html:root .vxs .authbox label small { justify-self: start; }
}