/*
 * Digital MechBook - Record Browser phone presentation
 * 2026-08-18 v1
 * Loaded only by recordview.php. Desktop/tablet behavior is unchanged.
 */

.record-mobile-controls,
.record-mobile-name,
.record-mobile-id-image-row,
.record-mobile-weapons,
.record-image-overlay {
  display: none;
}

@media (max-width: 767px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding: 0 10px 18px;
  }

  /* Rookie-style phone presentation: the page title is redundant on phone. */
  body > h1 {
    display: none !important;
  }

  /* The real controls are moved into this two-row sticky mobile strip. */
  .record-mobile-controls {
    position: sticky;
    top: 0;
    z-index: 920;
    display: block;
    width: calc(100% + 20px);
    margin: 0 -10px 10px;
    padding: 6px 10px 8px;
    box-sizing: border-box;
    background: #111;
    border-bottom: 1px solid #666;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  }

  .record-mobile-filter-row,
  .record-mobile-nav-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
  }

  .record-mobile-filter-row {
    margin-bottom: 4px;
  }

  .record-mobile-controls select,
  .record-mobile-controls button,
  .record-mobile-controls input[type="button"],
  .record-mobile-controls input[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 38px;
    margin: 0 !important;
    padding: 4px 3px;
    box-sizing: border-box;
    font-size: clamp(0.66rem, 2.9vw, 0.82rem);
    line-height: 1.05;
    white-space: nowrap;
  }

  .record-mobile-controls select {
    text-overflow: ellipsis;
  }

  /* Original table is a desktop-only shell once the live controls are moved. */
  .record-control-table {
    display: none !important;
  }

  /* Large, readable loaded Mech name. */
  .record-mobile-name {
    display: block;
    margin: 8px 0 10px;
    font-size: clamp(1.8rem, 9vw, 3rem);
    line-height: 1;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  /* Mech ID and thumbnail share one row, matching Rookie Set behavior. */
  .record-mobile-id-image-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 10px;
    align-items: stretch;
    margin: 0 0 10px;
  }

  .record-mobile-id-image-row .mech-id-card {
    width: 100%;
    max-width: none;
    min-height: 112px;
    aspect-ratio: auto;
  }

  .record-mobile-id-image-row .mech-id-card .mech-id-number {
    font-size: clamp(2.5rem, 15vw, 5.5rem) !important;
  }

  .record-mobile-image-button {
    display: block;
    width: 112px;
    min-height: 112px;
    padding: 0;
    border: 1px solid #666;
    background: #181818;
    cursor: zoom-in;
  }

  .record-mobile-image-button img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: contain;
  }

  .mech-meta .mech-image.record-mobile-source-empty {
    display: none;
  }

  /* Phone content becomes stacked instead of compressed desktop tables. */
  .mech-meta,
  .mech-meta > tbody,
  .mech-meta > tbody > tr,
  .mech-meta > tbody > tr > td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .mech-meta > tbody > tr > td {
    padding: 0;
    border: 0;
  }

  .mech-stats-container-cell {
    background: transparent !important;
  }

  .meta-row {
    display: block !important;
    width: 100%;
  }

  /* MechData, Mobility, Subsystems stack and default collapsed. */
  .mechdata,
  .mobility,
  .subsystems {
    display: table;
    width: 100%;
    margin: 0 0 7px;
  }

  .record-mobile-info-table > tbody > tr:first-child > th {
    padding: 0 !important;
  }

  .record-mobile-collapse-toggle {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 7px 9px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .record-mobile-info-table.record-mobile-collapsed > tbody > tr:not(:first-child) {
    display: none !important;
  }

  .record-mobile-info-table td {
    padding: 8px 7px;
  }

  /* The large phone title already carries Chassis + Variant identity. */
  .mechdata tr:has(#mech-chassis) {
    display: none;
  }

  /* Armor remains one horizontal three-field row beneath the info cluster. */
  .armordata {
    display: table;
    width: 100%;
    margin: 2px 0 10px;
    table-layout: fixed;
  }

  .armordata tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    width: 100%;
  }

  .armordata td {
    display: block;
    min-width: 0;
    padding: 5px 3px;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .armordata td.label {
    font-size: clamp(0.58rem, 2.5vw, 0.72rem);
    line-height: 1.05;
  }

  .armordata td:not(.label) {
    font-size: clamp(0.68rem, 2.9vw, 0.82rem);
  }

  .armordata td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .armordata td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .armordata td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .armordata td:nth-child(4) { grid-column: 2; grid-row: 2; }
  .armordata td:nth-child(5) { grid-column: 3; grid-row: 1; }
  .armordata td:nth-child(6) { grid-column: 3; grid-row: 2; }

  /* Replace the three-column desktop weapon table with the agreed single list. */
  .mech-loadout {
    display: none !important;
  }

  .record-mobile-weapons {
    display: block;
    margin-top: 14px;
  }

  .record-mobile-weapons > h2 {
    margin: 0 0 8px;
    font-size: 1.35rem;
  }

  .record-mobile-weapon-group {
    margin: 0 0 10px;
    border: 1px solid #555;
    background: #181818;
  }

  .record-mobile-weapon-group[hidden] {
    display: none !important;
  }

  .record-mobile-weapon-group > h3 {
    margin: 0;
    padding: 6px 8px;
    border-bottom: 1px solid #555;
    font-size: 1rem;
  }

  .record-mobile-weapon-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .record-mobile-weapon-group .slot {
    display: block !important;
    margin: 0;
    padding: 7px 8px;
    border-bottom: 1px solid #333;
  }

  .record-mobile-weapon-group .slot:last-child {
    border-bottom: 0;
  }

  .record-mobile-weapon-group .slot-label {
    font-weight: 700;
  }

  .chassis-notes {
    width: 100%;
  }

  /* Full-screen Mech image. Tap/click again to return to thumbnail view. */
  .record-image-overlay.is-open {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.96);
    cursor: zoom-out;
  }

  .record-image-overlay img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  body.record-image-open {
    overflow: hidden;
  }
}