/* The homepage on a phone (after style.css): the header as two rows of the wall's chips and a strip of links to swipe;
   the machines held as cards, each with its relist key (the table hid it); the contracts one link a line. The wall,
   the terminal and the desk keep style.css's own phone layout; the frens' dock is mintbox.css's. */
@media (max-width: 640px) {
  /* ── the header: brand · bridge · buy / CA · rebrand / the links ── */
  .bar {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: stretch; gap: 8px;
    padding: 10px 14px 0; border-bottom: 1px solid #1a1a1a;
  }
  .bar > * { margin: 0 !important; min-width: 0; }
  .brand { grid-area: 1 / 1; height: 38px; }
  .brand-mark { width: 34px; }
  .brand-word { padding: 0 11px; letter-spacing: 0.2em; }
  .bridge-btn { grid-area: 1 / 3; }
  #buy { grid-area: 1 / 4; }
  .buy { height: 38px; padding: 0 11px; font-size: 10.5px; letter-spacing: 0.06em; white-space: nowrap; }
  .ca { grid-area: 2 / 1 / 3 / 3; height: 36px; font-size: 10.5px; }
  .ca-tag { padding: 0 9px; }
  #ca-addr { flex: 1; min-width: 0; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rebrand { grid-area: 2 / 3 / 3 / 5; height: 36px; font-size: 10.5px; }
  .rebrand-t { flex: 1; min-width: 0; padding: 0 8px; }
  .rebrand[hidden] + .ca { grid-column: 1 / -1; }
  .nav {
    grid-area: 3 / 1 / 4 / -1; order: 0; width: auto; display: flex; gap: 0; margin: 2px -14px 0 !important; padding: 0 14px;
    overflow-x: auto; scrollbar-width: none; font-size: 10.5px; letter-spacing: 0.1em;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; padding: 11px 14px 12px 0; white-space: nowrap; opacity: 0.72; }
  .nav a + a { padding-left: 14px; border-left: 1px solid #222; }
  .nav a:last-child { padding-right: 34px; }

  /* ── the terminal: the status line wraps instead of running off the glass ── */
  .term-status { white-space: normal; }
  .term-status #status { white-space: normal; }
  .term-prompt input { font-size: 16px; } /* iOS doesn't zoom the page on focus */

  /* ── machines held: a card each ── */
  .ledger { padding: 34px 14px 60px; }
  .ledger h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
  .ledger h2 .machines-buy { margin-left: auto; }
  .ledger table, .ledger tbody { display: block; }
  .ledger thead { display: none; }
  .ledger tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "m m r" "b j l" "s s s"; gap: 10px 8px;
    margin-bottom: 10px; padding: 12px; border-radius: 6px; background: #0b0d0b;
    box-shadow: inset 0 0 0 1px #1f2a21, 0 2px 0 #050605;
  }
  .ledger td, .ledger td:nth-child(n) { display: block; padding: 0; border: 0; white-space: normal; }
  .ledger td:nth-child(1) { grid-area: m; display: flex; align-items: center; font: 400 14px var(--pixel); letter-spacing: 0.08em; color: #e4f5e7; }
  .ledger td:nth-child(1) img { width: 34px; height: 34px; margin-right: 10px; border-radius: 3px; box-shadow: 0 0 0 1px #2c3a2f; }
  .ledger td:nth-child(3) { grid-area: r; justify-self: end; align-self: center; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #e4f5e7; text-align: right; white-space: nowrap; }
  .ledger td:nth-child(2) { grid-area: b; }
  .ledger td:nth-child(5) { grid-area: j; }
  .ledger td:nth-child(6) { grid-area: l; }
  .ledger td:nth-child(2), .ledger td:nth-child(5), .ledger td:nth-child(6) { font-size: 13px; color: #c9d3cb; }
  .ledger td:nth-child(2)::before, .ledger td:nth-child(5)::before, .ledger td:nth-child(6)::before {
    display: block; margin-bottom: 3px; font: 400 8px var(--pixel); letter-spacing: 0.14em; color: #4f6355;
  }
  .ledger td:nth-child(2)::before { content: "BOUGHT"; }
  .ledger td:nth-child(5)::before { content: "JOBS OK"; }
  .ledger td:nth-child(6)::before { content: "LAST SEEN"; }
  .ledger td:nth-child(4) { grid-area: s; padding-top: 9px; border-top: 1px dashed #1f2a21; font-size: 12px; color: #8fa293; }
  .ledger td[colspan] { grid-column: 1 / -1; }
  .ledger tbody tr:has(td[colspan]) { display: block; }
  .ledger td .floor-btn, .ledger td button { padding: 7px 11px; font-size: 9px; }

  /* ── how it works, and the contracts: one link a line, the address cut to the line ── */
  .ledger .how { font-size: 13px; line-height: 1.7; }
  .ledger .contracts { font-size: 11px; line-height: 2.1; word-break: normal; }
  .ledger .contracts b { font: 400 9px var(--pixel); letter-spacing: 0.16em; color: #7dffa6; }
  .ledger .contracts a {
    display: inline-block; max-width: calc(100% - 15ch); vertical-align: bottom; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
}