/* ─── Phones & small tablets ────────────────────────────────────────────────
   Follows the mobile artboard of the design: compact disks two per row, the
   main action docked under the thumb, one column everywhere else. Nothing may
   scroll sideways and every target stays ≥ 44px.
──────────────────────────────────────────────────────────────────────────── */

@layer components {

html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; }
/* Grid/flex children may shrink below their content (long names, no-wrap strips) */
.page .grid > *, .page .grid > turbo-frame > *, .admin-content > *, .floppy-wrap, .floppy__label, .floppy__body { min-width: 0; }

/* Only shown on phones */
.mobile-dock, .topbar__balance { display: none; }
/* Stream subscriptions are empty elements; keep them out of flex/grid gaps */
turbo-cable-stream-source { display: none; }

}

/* Breakpoint rules are unlayered on purpose: they must beat the Tailwind utilities
   (flex, px-*, gap-*…) written on the same elements in the views. */

/* Data tables collapse into cards (responsive-table controller adds data-label) */
@media (max-width: 720px) {
  /* File rows: name with its size underneath, actions on the right; the date drops out */
  .file-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name actions" "size actions"; row-gap: 0; padding: 6px 4px 6px 10px; }
  .file-row__name { grid-area: name; min-height: 36px; }
  /* Names wrap to two lines instead of losing their end (extensions, versions) */
  .file-row__name > span { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .file-row__meta { grid-area: size; text-align: left; padding-left: 28px; font-size: 12px; }
  .file-row__meta--date { display: none; }
  .file-row__meta:empty { display: none; }
  .file-row__actions { grid-area: actions; gap: 0; }
  /* Binary names already download and text files have Download in the editor: room for the name */
  .file-row__download { display: none; }
  /* Saved toast: the question on top, Restart takes the width beside the dismiss button */
  .flash--saved { padding-left: 18px; }
  .flash--saved > .flex { flex: 1 1 100%; }
  .flash--saved .btn--lg { flex: 1 1 auto; }
  table.is-responsive, table.is-responsive tbody, table.is-responsive tr, table.is-responsive td { display: block; width: 100%; box-sizing: border-box; }
  table.is-responsive thead { display: none; }
  table.is-responsive { padding: 6px; }
  table.is-responsive tr { padding: 12px 14px; border-radius: 20px; border-top: 1px solid var(--line); }
  table.is-responsive tr:first-child { border-top: none; }
  table.is-responsive td { border-top: none !important; padding: 4px 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right; overflow-wrap: anywhere; background: transparent !important; }
  table.is-responsive td[data-label]::before { content: attr(data-label); flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--muted); text-align: left; }
  table.is-responsive td:first-child { font-weight: 800; }
  table.is-responsive td:not([data-label]), table.is-responsive .actions { justify-content: flex-start; flex-wrap: wrap; }
  table.is-responsive td > div[style*="display: flex"] { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 900px) {
  /* Admin: the section nav becomes a swipeable row of pills above the content */
  .admin-shell { flex-direction: column; gap: 14px; }
  .side-nav { width: 100%; position: static; flex-direction: row; overflow-x: auto; padding: 6px; border-radius: 999px; gap: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav__group { display: none; }
  .side-nav__item { flex-shrink: 0; min-height: 44px; padding: 4px 14px 4px 4px; border-radius: 999px; }
  .side-nav__item .list-row__icon { width: 36px; height: 36px; border-radius: 50%; }
  .side-nav__item .list-row__desc { display: none; }
  .side-nav__item .list-row__title { font-size: 14px; white-space: nowrap; }
  .side-nav__item.mt-3 { margin-top: 0; }

  /* Catalog flow reads top to bottom */
  .flow { flex-direction: column; align-items: stretch; }
  .flow > svg { display: none; }

  .balance-pill__label small { display: none; }
}

@media (max-width: 640px) {
  /* Phones get no live blur or morphing blobs: they make scrolling stutter,
     and a blurred ancestor would also trap the fixed docks below. */
  .panel, .topbar, .btn--glass, .neu-flat, .neu-offset { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .panel, .neu-flat, .neu-offset { background: var(--glass-strong); }
  .topbar { background: var(--glass-strong); }
  .blob { animation: none; filter: blur(50px); opacity: .55; }

  .page { padding: 12px 12px 112px; gap: 16px; }
  .panel { padding: 18px; border-radius: 28px; }
  .panel--lg { padding: 20px; border-radius: 30px; }
  .panel--tight { padding: 10px; }
  .h1 { font-size: 2.25rem; }

  /* Top bar: logo + name, balance, account. The balance replaces the pill and the theme switch. */
  .topbar { height: 60px; padding: 0 8px 0 12px; gap: 6px; border-radius: 30px; }
  .topbar .brand { min-width: 0; gap: 6px; }
  .topbar .brand svg { flex-shrink: 0; width: 26px; height: 26px; }
  .topbar .brand__name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .balance-pill, .topbar .theme-switch { display: none; }
  .theme-switch { width: 72px; height: 44px; }
  .theme-switch__knob { width: 36px; height: 36px; }
  [data-theme="dark"] .theme-switch__knob { transform: translateX(28px); }
  .topbar__balance { display: flex; flex-shrink: 0; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--chip); }
  .topbar__balance small { font-size: 10px; font-weight: 800; color: var(--muted); }
  .topbar__balance strong { font-size: 13px; white-space: nowrap; }
  .topbar__add { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; }
  .avatar { width: 44px; height: 44px; font-size: 15px; }
  .menu { position: fixed; top: 80px; left: 12px; right: 12px; width: auto; }

  /* File manager: path above an even row of buttons; SFTP access becomes a full row
     under them (its dialog opens as the bottom sheet) instead of a centered button */
  .file-header { display: flex; flex-direction: column; align-items: stretch; }
  .sftp-trigger { display: none; }
  .sftp-row { display: flex; background: var(--chip); }
  .sftp-row .list-row__icon { background: var(--tile); }
  .file-toolbar { width: 100%; gap: 6px; }
  .file-toolbar > *, .file-toolbar > form > .btn { flex: 1 1 0; }
  .file-toolbar > form { display: flex; }
  .file-toolbar .btn { padding: 0 10px; justify-content: center; }
  .file-toolbar .btn > svg { display: none; }
  /* 16px stops iOS from zooming into the editor on focus */
  .file-editor { min-height: 55vh; padding: 14px; border-radius: 20px; font-size: 16px; line-height: 1.5; }

  /* Servers: one header (the top bar carries the balance), disks two per row, actions docked at the bottom */
  .index-hero { display: none; }
  .index-hero ~ section { margin-top: 0; }
  .mobile-dock {
    display: flex; gap: 10px; position: fixed; z-index: 40; left: 12px; right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .mobile-dock .btn { box-shadow: 0 14px 30px var(--shadow); }
  .mobile-dock .btn--icon { width: 58px; height: 58px; }
  .mobile-dock .btn--glass { background: var(--tile); }

  .disk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 12px 2px 0; }
  .disk-grid .floppy { --cut: 26px; min-height: 0; border-radius: 20px; padding: 0 10px 12px; gap: 10px; }
  .disk-grid .floppy__media { height: 58px; margin: 0 34px 0 22px; border-radius: 0 0 14px 14px; }
  .disk-grid .floppy__disc { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .disk-grid .floppy__code { font-size: 10px; }
  .disk-grid .floppy__label { border-radius: 14px; }
  .disk-grid .floppy__strip { height: 22px; padding: 0 10px; font-size: 9px; }
  .disk-grid .floppy__body { padding: 10px; gap: 6px; }
  .disk-grid .floppy__name { font-size: 15px; line-height: 1.2; }
  .disk-grid .floppy__lines { display: none; }          /* IP & spend: on the server page */
  .disk-grid .floppy__foot { min-height: 0; padding-top: 4px; }
  .disk-grid .floppy__foot .btn { display: none; }       /* the whole disk is the button */
  .disk-grid .floppy__foot .status { font-size: 12px; }
  .disk-grid .progress { height: 8px; }
  .disk-grid .lift:hover { transform: none; }            /* no sticky hover on touch */
  .floppy-slot--borrowed:hover > .sticker { transform: rotate(-6deg); }
  .tray { padding: 16px 10px 14px; border-radius: 30px; gap: 14px; }
  .tray .muted.text-sm { display: none; }
  .sticker { top: 14px; left: -6px; gap: 5px; font-size: 10px; padding: 3px 10px 3px 3px; }
  .sticker__avatar { width: 20px; height: 20px; font-size: 9px; }
  .sticker--payments { padding: 4px 8px; }
  .sticker svg { width: 12px; height: 12px; }

  /* Server page: compact disk; Start/Stop + Restart docked at the bottom */
  .floppy--hero { min-height: 0; --cut: 40px; padding: 0 14px 14px; gap: 12px; }
  .floppy--hero .floppy__media { height: 72px; margin: 0 58px 0 40px; }
  .floppy--hero .floppy__disc { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .floppy--hero .floppy__name { font-size: 24px; }
  .power-bar {
    position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom));
    min-height: 0; padding: 8px; gap: 8px; flex-wrap: nowrap; border-radius: 999px;
    background: var(--tile); box-shadow: 0 14px 30px var(--shadow);
  }
  .power-bar .btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0 14px; font-size: 15px; }
  .power-bar .hint { display: none; }
  .power-bar:not(:has(.btn)) { display: none; }          /* nothing to do yet (setup, guest while on) */
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .stats-grid > .cost-tile { grid-column: 1 / -1; }
  .stats-grid .panel { padding: 16px; }
  .stats-grid .stat-tile { padding: 14px 8px; }
  .stats-grid .orb { width: 64px; height: 64px; }
  .stats-grid .stat-tile .display { font-size: 1.25rem; }
  #game_server_console_placeholder, [id^="game_server_console_"] .min-h-96 { min-height: 300px; }
  /* The console stays dark in both themes, as on desktop: the phone .panel background above would repaint it */
  .panel--dark { background: var(--console); }

  /* Forms: 16px text so iOS doesn't zoom into the field on focus */
  .input, .select, .textarea, .neu-input, input[type="search"] { font-size: 16px; }
  .pills button { flex: 1 1 auto; padding: 0 12px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 292px; }
  .segmented span { padding: 0 8px; }
  .submit-dock {
    position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom));
    padding: 8px; border-radius: 999px; background: var(--tile); box-shadow: 0 14px 30px var(--shadow);
  }
  .preview-disk { width: 180px; }
  .preview-disk .floppy { min-height: 190px; }
  .preview-disk .floppy__media { height: 60px; margin: 0 38px 0 24px; }

  /* Header rows: title first, actions fill the width below it */
  .page-actions { width: 100%; }
  .page-actions > .btn, .page-actions > .relative { flex: 1 1 0; }

  /* Modals open as bottom sheets */
  dialog.modal { padding: 0; align-items: flex-end; }
  .modal__dialog { max-width: none; border-radius: 32px 32px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); max-height: 88vh; }
  .modal__actions .btn, .modal__actions form, .modal__actions > * { flex: 1 1 0; }
  .modal__actions form .btn { width: 100%; }
  /* Players modal: stacked invite field, thumb-wide payment and leave actions */
  .invite-form__row { flex-direction: column; }
  .invite-form__row .btn { width: 100%; }
  .share-payments form, .leave-server > .btn { flex: 1 1 0; width: 100%; }
  .share-payments form .btn { width: 100%; }

  /* Lists: long values wrap instead of pushing the row wide */
  .list-row { padding: 8px 10px; }
  .line-row { flex-wrap: wrap; }
  .line-row__key { width: auto; min-width: 96px; }

  .balance-amount { font-size: 3rem; }
  .breadcrumbs { padding-left: 6px; }
  .breadcrumbs__list { font-size: 13px; }
}