/* Keep the existing studio theme; this layer only adapts its layout and controls. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

#notice {
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .shell, .auth, .admin-login {
    min-height: 100dvh;
  }

  /* Let intrinsic text and form widths shrink inside existing grid/flex tracks. */
  form, fieldset, label, .topbar-tools, .filters label,
  .card-toolbar .filters label, .page-location, .hero-copy {
    min-width: 0;
    max-width: 100%;
  }
  :where(.grid, .row, .columns, .stack, .card, .topbar, .topbar-tools,
    .dashboard-top, .dashboard-bottom, .dashboard-rail, .auth, .tabs) > * {
    min-width: 0;
  }
  :where(h1, h2, h3, p, a, button, label, small, strong, dd,
    .question, .lesson-body, .flashcard-content, .option, #notice) {
    overflow-wrap: anywhere;
  }

  .topbar, .topbar-tools, .section-heading, .welcome-row,
  .launch-heading, .tabs, .daily-card > .row {
    flex-wrap: wrap;
  }
  .topbar {
    padding-block: 12px;
  }
  .topbar-tools {
    flex: 1 1 220px;
    justify-content: flex-end;
  }
  .page-location {
    flex-shrink: 1;
  }
  .bank-picker {
    flex: 1 1 120px;
    min-width: 0;
    max-width: 190px;
  }
  .bank-picker select {
    width: 100%;
    max-width: 100%;
  }
  .filters label, .card-toolbar .filters label {
    flex: 1 1 140px;
  }
  input, select, textarea {
    min-width: 0;
    max-width: 100%;
  }
  textarea {
    width: 100%;
    resize: vertical;
    font: inherit;
  }
  button, .navigator button, .icon-button, .identity .icon-button {
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
  }
  .navigator button, .icon-button {
    width: 44px;
  }
  a[href], summary, .sidebar nav a, .member-band > a,
  .admin-root summary, .admin-root .admin-nav a {
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
  }
  /* Low specificity preserves cards, navigation and other existing link layouts. */
  :where(a[href]) {
    display: inline-flex;
    align-items: center;
  }
  label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
    min-height: 44px;
  }
  .tabs button {
    flex: 1 1 100px;
  }
  .result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sidebar nav.open {
    max-height: 65dvh;
  }
  .auth-panel {
    justify-content: flex-start;
  }
  /* A keyboard can reduce height drastically: keep forms in normal page flow. */
  input, select, textarea, button {
    scroll-margin-block: 24px;
  }
}

@media (max-width: 360px) {
  .stats, .result-grid, .feature-links, .studio-subjects {
    grid-template-columns: minmax(0, 1fr);
  }
  .daily-card, .mini-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .goal-ring, .mini-card-art {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Leave room for the focus outline and the native top inset at result entry. */
#result-summary-title {
  scroll-margin-block-start: calc(24px + env(safe-area-inset-top, 0px));
}

/* Refresh layout guards: wrap intrinsic content instead of hiding page overflow. */
@media (max-width: 1023px) {
  .topbar { flex-wrap: wrap; gap: 12px; }
  .topbar-tools { max-width: 100%; }
}
@media (max-width: 768px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .card-toolbar .filters { width: 100%; }
  .card-toolbar .filters label { flex: 1 1 180px; min-width: 0; }
}
@media (max-width: 700px) {
  .page-heading { gap: 8px 12px; margin-bottom: 20px; }
  .page-heading h1 { font-size: 24px; }
  .empty-state { padding: 20px; }
  .form-actions > .action, .form-actions > button { flex: 1 1 160px; }
  .option-card { gap: 10px; padding: 12px; }
  .sidebar .brand { min-width: 0; flex-wrap: wrap; }
  .sidebar nav a > :not(.ui-icon):not(.nav-dot) { min-width: 0; }
  .page-location > strong { max-width: none; white-space: normal; }
  .auth-panel { padding-inline: 20px; }
  .auth-story h1 { font-size: 28px; }
  .card-toolbar .filters, .deck-controls { min-width: 0; }
  .hero-copy { min-width: 0; width: 100%; }
}
@media (max-width: 390px) {
  .hero-art { position: relative; top: auto; right: auto; width: 55%; margin: 0 auto 16px; }
  .studio-hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { padding: 20px; }
  .hero-copy h2 { font-size: 32px; }
  .hero-actions { align-items: stretch; }
  .hero-actions > button { width: 100%; }
  .hero-tag { max-width: 100%; white-space: normal; }
  .deck-controls > .row { flex-wrap: wrap; width: 100%; }
  .topbar-tools { flex-basis: 100%; justify-content: space-between; }
}

/* Keep iOS focus text at 16px on wide touch screens too; preserve user zoom.
   After textarea's font shorthand, with specificity matching studio selects. */
@media (max-width: 700px), (any-pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .bank-picker select, .card-toolbar select {
    font-size: 16px;
  }
}

/* Compact rhythm for narrow phones; retain OS font scale and user zoom. */
@media (max-width: 390px) {
  .auth-story { padding: 24px 20px; }
  .auth-story h1 { font-size: 26px; line-height: 1.2; margin: 20px 0 12px; }
  .auth-story p { line-height: 1.55; }
  .auth-panel { padding: 24px 16px; }
  .auth-panel > .eyebrow { margin-bottom: 6px; }
  .auth-panel h2 { font-size: 24px; line-height: 1.25; margin-bottom: 16px; }
  .auth-panel > .muted { margin-bottom: 16px; line-height: 1.55; }
  .auth-panel .tabs { margin: 16px 0; padding: 4px; }
  .auth-panel .tabs button { padding: 8px 12px; }
  .auth-panel form { gap: 10px; }
  .auth-panel form label { gap: 6px; }
  .auth-panel input { min-height: 46px; padding: 10px 12px; line-height: 1.4; }
  .auth-panel form > .primary { padding: 10px 14px; }

  .sidebar { padding: 12px 14px; gap: 12px; }
  .sidebar .brand { font-size: 22px; }
  .sidebar .brand > :is(svg, img) { width: 32px; height: 32px; }
  .workspace { padding-inline: 14px; }
  .topbar { min-height: 68px; padding-block: 8px; margin-bottom: 16px; gap: 8px; }
  .welcome-row { margin-bottom: 16px; }
  .welcome-row h1, .page-heading h1 { font-size: 22px; line-height: 1.3; }
  .hero-copy { padding: 16px; }
  .hero-copy h2 { font-size: 28px; line-height: 1.12; margin-bottom: 12px; }
  .hero-copy p { margin-bottom: 16px; }
  .hero-tag { margin-bottom: 12px; }
  .studio-hero .hero-art { width: min(60%, 180px); margin: 0 auto 16px; }
  .dashboard-top, .dashboard-bottom, .dashboard-rail, .card-studio { gap: 16px; }
  .studio-metrics { margin: 16px 0 20px; padding-block: 14px; row-gap: 14px; }
  .section-heading { margin-bottom: 12px; }
  .daily-card { padding: 16px; gap: 10px; }
  .recent-card, .card-toolbar, .deck-guide, .mini-cards, .play-tile { padding: 16px; }
  .subject-tile { padding: 12px; }
  .subject-tile h3 { margin-top: 12px; }
  .subject-tile p { margin-bottom: 12px; }
  .option, .option.selected { padding: 12px; }
  .flashcard { min-height: 300px; padding: 20px 16px; }
  .flashcard-content { padding-block: 12px; }
  .deck-controls { margin-top: 20px; }
}