/* Phones (360–430px) and tablets (up to 900px), on top of the desktop rules and kid_phone.css.
   Desktop (wider than 900px, mouse) is unchanged. Selectors start with the screen's class
   (.kid, .parent…) so they win whatever the file order. */

/* Tap targets: 48px on a touch screen or a phone (56px on the child screens). */
@media (max-width: 640px), (pointer: coarse) {
  .field__input { height: 48px; }
  .checkbox { min-height: 48px; }
  .form__links a { display: inline-flex; align-items: center; min-height: 48px; }
  .btn--parent { height: 48px; }

  .parent .brand, .parent .parent__back, .parent .back-link { display: inline-flex; align-items: center; min-height: 48px; }
  .parent .parent__nav-link { height: 48px; }
  .parent .segments__option { min-height: 48px; }
  .parent .day-picker__day span { height: 48px; }
  .parent .settings-line { min-height: 48px; }
  .parent .settings-line__value { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 48px; }
  .parent .chart-filter__select { min-height: 48px; }
  .parent .profile-header__meta a, .parent .history-table__link { display: inline-block; padding: 14px 0; margin: -14px 0; }

  .brand { display: inline-flex; align-items: center; min-height: 48px; }
  .parent .settings-line__value { min-width: 48px; }
  /* Links inside a line of text: a 48px target without moving the line. */
  .parent a:not([class]), .prose a, .parent .profile-list__name a { display: inline-block; padding: 13px 0; margin: -13px 0; }

  .kid .kid__link { min-height: 56px; }
  .kid .btn--diagram.btn--ghost { height: 56px; }
}

/* Launch screens up to a tablet: « C'est parti » in a bar stuck to the bottom of the screen,
   whatever the length of the list; a focused choice scrolls above it. */
@media (max-width: 900px) {
  html:has(.launch__actions) { scroll-padding-bottom: 112px; }
  .kid .launch__actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: calc(-1 * var(--space-6));
    padding: var(--space-6) 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom, transparent, var(--surface) var(--space-6));
  }
}

@media (max-width: 640px) {
  /* Launch: the count or duration in a 3-column segment, the number over its unit */
  .kid .launch .title { font-size: 28px; line-height: 34px; }
  .kid .launch__durations { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: var(--space-3); }
  .kid .launch-choice--duration { flex-direction: column; height: auto; min-height: 72px; padding: var(--space-2); line-height: 1.1; }
  .kid .launch-choice--duration .num { font-size: 28px; }
  .kid .launch-choice__unit { margin-left: 0; font-size: 15px; font-weight: 700; color: var(--ink-muted); }
  .kid .launch__themes { gap: var(--space-2); }
  .kid .launch-choice--theme { min-height: 56px; padding: var(--space-2) var(--space-4); font-size: 18px; line-height: 22px; }

  /* An answer field in a line of words stays a 56px target */
  .kid .answer-field:not(.fraction *) { min-height: 56px; font-size: max(32px, calc(var(--size, 112px) * 0.86)); }

  /* Parent: the theme count under its name, the chevron on the right */
  .parent .competence-theme__toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-2); }
  .parent .competence-theme__name, .parent .competence-theme__count { grid-column: 1; }
  .parent .competence-theme__chevron { grid-column: 2; grid-row: 1 / span 2; }
}

/* Tablet: the exercise numbers a step smaller so a measure (« 5 cm + 7 mm = … mm ») fits. */
@media (min-width: 641px) and (max-width: 900px) {
  .kid .exercise__line--xl .exercise__expression { --size: 80px; }
  .kid .exercise__line--lg .exercise__expression { --size: 60px; }
  .kid .exercise__line--md .exercise__expression { --size: 36px; }
  .kid .exercise__line--xl .exercise__text--words { font-size: 56px; }
  .kid .problem__calc .exercise__expression { --size: 56px; flex-wrap: wrap; }
  .kid .problem__calc .exercise__line--md .exercise__expression { --size: 40px; }
  .kid .posed-card { padding: var(--space-6); }
  .parent .history-table th, .parent .history-table td { padding: var(--space-2); font-size: 14px; }
  .parent .history-table thead th { font-size: 11px; letter-spacing: 0.02em; }
}

/* Posed grid on a phone or a tablet: the columns share the width of the screen
   (--posed-cols digit columns, --posed-commas set by the grid), up to the drawn size. */
@media (max-width: 900px) {
  .kid .posed-grid {
    --posed-chrome: 150px;
    --posed-gap: var(--space-3);
    --posed-col-max: 88px;
    --posed-col: clamp(30px, calc((100vw - var(--posed-chrome) - var(--posed-operator) - var(--posed-commas, 0) * (var(--posed-comma) + var(--posed-gap)) - var(--posed-cols, 4) * var(--posed-gap)) / var(--posed-cols, 4)), var(--posed-col-max));
    --posed-cell-height: calc(var(--posed-col) * 1.15);
    --posed-size: calc(var(--posed-col) * 0.75);
    gap: var(--posed-gap);
  }
  .kid .posed-grid--compact { --posed-col-max: 56px; --posed-cell-height: calc(var(--posed-col) * 1.1); }
}
@media (max-width: 640px) {
  .kid .posed-grid { --posed-chrome: 70px; --posed-gap: var(--space-2); --posed-col-max: 56px; }
  .kid .posed-grid--compact { --posed-col-max: 48px; --posed-gap: 6px; }
  .kid .posed-grid__slot--help { height: 44px; }
  .kid .posed-help { width: min(44px, var(--posed-col)); height: 44px; font-size: 22px; }
  .kid .posed-help--cassage { width: min(44px, var(--posed-col)); }
  /* The sticky « Valider » of a tall grid never hides the focused cell; the grid of
     « Poser » (Problèmes) is short and keeps its button in place. */
  html:has(.exercise .posed-grid__actions) { scroll-padding-bottom: 104px; }
  .kid .poser .posed-grid__actions { position: static; }
}