/* Mobile layer — account. Loaded AFTER site.css so these rules override the desktop
   design. Everything here lives behind a mobile media query; desktop is never
   affected. Use design tokens only (no hardcoded values). Owned by one zone so
   parallel work never collides: do not put account rules in any other mobile file. */

@media (max-width: 768px) {
  /* ----- Page rhythm ----------------------------------------------------
     The shared .section pads 96px top and bottom, which eats most of a phone
     screen before the first panel. Tighten it for the signed-in + auth views
     only, matched by their content, so no other page is touched. */
  .section:has(.dash),
  .section:has(.dash__gate) {
    padding-block: var(--space-8);
  }

  /* The auth routes (reset password, verify) render .section.auth: .auth owns
     the padding, and the 70vh centering is pointless on a phone. */
  .auth {
    min-height: 0;
    place-items: start center;
    padding-block: var(--space-10);
  }

  /* ----- Dashboard + billing shell -------------------------------------- */
  .dash {
    gap: var(--space-5);
    padding-block: var(--space-2);
  }

  .dash__title {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
  }

  /* Panels stack full width with comfortable, not cavernous, padding. */
  .dash__panel {
    padding: var(--space-5);
    gap: var(--space-4);
    border-radius: var(--radius-md);
  }

  /* Plan + usage block: the tier reads as the headline, the meter gets some
     height so it is legible (and tappable-adjacent) on a phone. */
  .dash__tier {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
  }

  .dash__usage {
    font-size: var(--text-base);
  }

  .dash__bar {
    height: var(--space-3);
  }

  /* ----- Action rows ----------------------------------------------------
     Enter studio / Manage billing / Change password / Sign out all become
     full-width stacked controls with a real 44px tap target. */
  .dash__actions,
  .dash__settings-actions {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--space-3);
    margin-top: var(--space-1);
  }

  .dash .btn,
  .dash__gate .btn,
  .dash__actions .btn,
  .dash__settings-actions .btn,
  .dash__danger > .btn-danger {
    width: 100%;
    min-height: var(--space-12);
    box-sizing: border-box;
    /* Codex rule 1: an action is never selectable text. */
    -webkit-user-select: none;
    user-select: none;
  }

  /* ----- Account settings ------------------------------------------------ */
  .dash__field {
    gap: var(--space-1);
  }

  /* Long addresses must never push the panel past the container. */
  .dash__field-value {
    overflow-wrap: anywhere;
  }

  .dash__hint {
    margin-top: 0;
  }

  /* ----- Danger zone + delete confirm ------------------------------------ */
  .dash__confirm {
    gap: var(--space-4);
    margin-top: 0;
  }

  .dash__confirm-title {
    font-size: var(--text-base);
  }

  /* ----- Billing history: table becomes stacked cards --------------------
     Three columns squeezed into 390px is unreadable, so each invoice becomes
     its own card: date above plan on the left, amount held on the right. The
     header row is visually hidden (still read in DOM order) because each value
     is self-describing once it is laid out this way. */
  .dash__history {
    display: block;
    width: 100%;
    border-collapse: separate;
    font-size: var(--text-base);
  }

  .dash__history thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .dash__history tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .dash__history tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
  }

  .dash__history td {
    padding: 0;
    border-bottom: 0;
  }

  /* Date. */
  .dash__history td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* Plan. */
  .dash__history td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
  }

  /* Amount, held to the right across both rows. */
  .dash__history td:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    text-align: right;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
  }

  /* ----- Signed-out gate -------------------------------------------------- */
  .dash__gate {
    padding-block: var(--space-10);
    gap: var(--space-5);
  }

  .dash__gate .auth__actions {
    width: 100%;
    justify-content: center;
  }

  /* ----- Auth forms ------------------------------------------------------ */
  .auth__card {
    max-width: none;
    gap: var(--space-5);
  }

  .auth__title {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
  }

  /* Inputs run the full width of the card, and every one of them resolves to
     at least 16px — below that iOS Safari zooms the page on focus. The token is
     already 1rem; max() keeps it at 16px even if the root ever scales down. */
  .auth__card .field input,
  .auth__card .field select,
  .auth__card .field textarea,
  .dash .field input,
  .dash .field select,
  .dash .field textarea,
  .auth-modal .field input,
  .auth-modal .field select,
  .auth-modal .field textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: max(16px, var(--text-base));
    min-height: var(--space-12);
  }

  /* A checkbox is not a text field: it keeps its own size, just bigger to hit. */
  .auth__remember input {
    width: var(--space-5);
    height: var(--space-5);
    min-height: 0;
    flex: none;
  }

  /* Remember-me and forgot-password share one row height, so the two controls
     line up and both clear 44px (Codex rule 7). */
  .auth__helper-row {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }

  .auth__remember,
  .auth__helper-row a,
  .auth__helper-row .auth__link-btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--space-12);
    box-sizing: border-box;
  }

  /* Submit is a full-width primary control. */
  .auth__submit,
  .auth__actions .btn,
  .auth__card .btn {
    width: 100%;
    min-height: var(--space-12);
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
  }

  .auth__actions {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--space-3);
    width: 100%;
  }

  /* The ghost "back to sign in" variant centers like the rest once it is wide. */
  .auth__actions .btn-learn-more {
    justify-content: center;
    padding-inline: var(--space-6);
  }

  .auth__note {
    font-size: var(--text-base);
    overflow-wrap: anywhere;
  }

  /* Footer cross-links get a bigger hit area without breaking the sentence. */
  .auth__links {
    gap: var(--space-1);
    text-align: center;
  }

  .auth__links a,
  .auth__links .auth__link-btn {
    padding-block: var(--space-2);
  }

  /* ----- Auth modal ------------------------------------------------------
     Fits the phone: never wider than the screen, never taller than the visible
     viewport (100dvh accounts for the browser chrome), scrolls inside itself
     when the content is tall, and clears the notch / home indicator. */
  .auth-modal {
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + env(safe-area-inset-top));
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  }

  .auth-modal__panel {
    max-width: none;
    max-height: calc(100dvh - var(--space-8) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: var(--space-6);
    padding-top: var(--space-10);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Codex rule 3: the panel stays scrollable, the scrollbar just never shows. */
  .auth-modal__panel {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .auth-modal__panel::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* Close button is a real tap target (pill, per the radius scale). */
  .auth-modal__close {
    top: var(--space-2);
    right: var(--space-2);
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-pill);
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ----- Small phones (<= 480px) ------------------------------------------
   The auth modal becomes a bottom sheet: full-bleed, anchored to the bottom
   edge where the thumb is, rounded only at the top. Everything else keeps the
   768px treatment, just a touch tighter. */
@media (max-width: 480px) {
  .auth-modal {
    place-items: end stretch;
    padding: 0;
  }

  .auth-modal__panel {
    width: 100%;
    max-height: calc(100dvh - var(--space-10));
    border-inline: 0;
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-10) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  }

  .dash__panel {
    padding: var(--space-4);
  }

  .dash__title {
    font-size: var(--text-2xl);
  }

  /* Keep the amount from ever colliding with a long plan name. */
  .dash__history tr {
    padding: var(--space-3) var(--space-4);
    column-gap: var(--space-3);
  }
}