/* ── Responsive layout (tablet + phone) ── */

/* Tablet landscape / small laptop */
@media (max-width: 992px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    padding: 1rem;
    gap: 1rem;
    overflow-x: clip;
  }

  .aside {
    position: static;
    order: -1;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .panel,
  .panel--calc-preview {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .header__modules-ticker {
    width: 100%;
    max-width: 100%;
    left: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .form-metrics-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lab-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-row__control {
    min-width: 0;
    max-width: 100%;
  }

  .panel--calc-preview {
    border-left-color: var(--accent);
  }

  .view {
    padding: 1.15rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .form-grid--anthropometry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--anthropometry .form-field--sex {
    grid-column: auto;
  }

  .lab-unit-system {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
  }

  .lab-unit-system__copy {
    flex: 0 0 auto;
    width: 100%;
  }

  .lab-unit-system .unit-system-toggle.liquid-segment {
    width: 100%;
    max-width: 18rem;
    margin-inline: auto;
  }

  .view__head--results {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Tablet portrait / large phone */
@media (max-width: 768px) {
  .page {
    min-width: 0;
    overflow-x: clip;
  }

  .view,
  .clinical-form,
  .form-block {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .view.is-active {
    overflow-x: clip;
  }

  .form-field,
  .lab-row__control,
  .input-group {
    min-width: 0;
    max-width: 100%;
  }

  .header__workflow {
    overflow-x: clip;
  }

  .workflow-rail,
  .workflow-rail__track {
    overflow-x: clip;
    max-width: 100%;
  }

  .header__modules-ticker {
    width: 100%;
    max-width: 100%;
    left: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .header__shell {
    padding: calc(0.65rem + env(safe-area-inset-top, 0px)) 0.75rem 0;
  }

  .header__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem 0.6rem;
    padding-bottom: 0.5rem;
  }

  .header__brand {
    grid-column: 1;
    grid-row: 1;
    gap: 0.65rem;
    min-width: 0;
  }

  .header__identity {
    min-width: 0;
  }

  .header__aside {
    display: contents;
  }

  .header__badge:not(.header__badge--draft) {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    max-width: min(10.5rem, 44vw);
    font-size: 0.62rem;
    padding: 0.28rem 0.55rem;
  }

  .header__top:has(.header__badge--draft) .header__brand {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .header__badge--draft {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: stretch;
    justify-content: center;
    max-width: none;
    width: 100%;
    font-size: 0.62rem;
    padding: 0.32rem 0.65rem;
    border-radius: var(--radius);
  }

  .header__badge--draft .header__badge-label {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .header__tagline {
    display: none;
  }

  .header__title {
    font-size: 1.15rem;
  }

  .header__title-panel {
    display: inline;
    margin-left: 0.2em;
  }

  .header__logo svg {
    width: 40px;
    height: 40px;
  }

  .header__eyebrow {
    margin-bottom: 0.15rem;
    font-size: 0.6rem;
  }

  /* Workflow: compact grid — all steps visible, no horizontal overflow */
  .header__workflow {
    margin-inline: 0;
    padding: 0.15rem 0 0.75rem;
    overflow: visible;
  }

  .workflow-rail,
  .workflow-rail__track {
    width: 100%;
    min-width: 0;
  }

  .workflow-rail__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
  }

  .workflow-rail__steps--no-insulin {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workflow__step {
    flex: unset;
    width: auto;
    min-width: 0;
    min-height: 0;
  }

  .workflow__step::after {
    display: none;
  }

  .workflow__step-btn {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.28rem;
    padding: 0.38rem 0.2rem;
    min-height: 3.35rem;
    width: 100%;
  }

  .workflow__icon {
    width: 1.65rem;
    height: 1.65rem;
  }

  .workflow__icon svg {
    width: 0.85rem;
    height: 0.85rem;
  }

  .workflow__label {
    font-size: 0.56rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
  }

  .workflow__num {
    display: none;
  }

  .form-grid--anthropometry,
  .form-grid--2,
  .form-metrics-row,
  .dose-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-block--anthropometry {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .form-grid {
    min-width: 0;
    max-width: 100%;
  }

  .form-grid--anthropometry {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .form-grid--anthropometry > .form-field,
  .form-grid--anthropometry > .form-metrics-row,
  .form-grid--anthropometry > .form-field--computed {
    grid-column: 1;
    min-width: 0;
    max-width: 100%;
  }

  .form-grid--anthropometry .form-field--age .input-group,
  .form-field--sex .choice-row.liquid-segment {
    width: 100%;
    max-width: 100%;
  }

  /* Sex toggle stays horizontal — easier to tap */
  .form-field--sex .choice-row.liquid-segment {
    flex-direction: row;
    min-width: 0;
    min-height: var(--input-h);
    overflow: hidden;
    contain: layout;
  }

  .form-field--sex .choice {
    min-width: 0;
    flex: 1 1 0;
    max-width: 50%;
  }

  .input-group:focus-within {
    box-shadow: inset 0 0 0 2px rgba(26, 95, 122, 0.24);
    transform: none;
  }

  .input-group:focus-within .input-group__suffix::before {
    box-shadow: inset 0 0 0 1px rgba(13, 122, 107, 0.35);
  }

  .form-field.is-invalid .input-group,
  .form-field.is-invalid .choice-row {
    box-shadow: inset 0 0 0 2px rgba(190, 24, 93, 0.18);
  }

  .lab-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .lab-row__label {
    padding-top: 0;
  }

  .input-group--wide {
    max-width: none;
  }

  .toggle-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .toggle-line .toggle {
    align-self: flex-end;
  }

  .lab-unit-system {
    text-align: left;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 1rem;
  }

  .lab-unit-system__hint {
    margin-top: 0.12rem;
    line-height: 1.3;
  }

  .lab-unit-system .unit-system-toggle.liquid-segment {
    max-width: none;
    margin-inline: 0;
  }

  /* Calc preview: horizontal chips on mobile — scroll contained inside panel */
  .panel--calc-preview {
    overflow: hidden;
  }

  .panel--calc-preview .calc-preview {
    display: flex;
    gap: 0.55rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .panel--calc-preview .calc-preview::-webkit-scrollbar {
    display: none;
  }

  .panel--calc-preview .calc-preview__item {
    flex: 0 0 auto;
    width: min(13.5rem, calc(100vw - 3.5rem));
    max-width: calc(100vw - 3.5rem);
    scroll-snap-align: start;
    border-bottom: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.65rem;
    background: var(--surface-raised);
  }

  .view {
    padding: 0.85rem;
  }

  .view__title {
    font-size: 1.15rem;
  }

  .view__head {
    padding: 0.85rem;
    margin-bottom: 1rem;
  }

  .form-footer {
    gap: 0.55rem;
  }

  .form-footer--split {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .form-footer--split .btn {
    width: 100%;
  }

  /* Footer scrolls with content — not fixed over inputs on mobile */
  .view.is-active .clinical-form > .form-footer:not(.form-footer--results),
  .form-footer--results {
    position: static;
    z-index: auto;
    margin: 0.75rem 0 0;
    padding: 0.85rem 0 calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: transparent;
    box-shadow: none;
    border-top: 2px solid var(--border);
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.5rem;
  }

  .form-footer--results > .btn--secondary,
  .form-footer--results > .btn--liquid {
    flex: 1 1 calc(50% - 0.35rem);
    max-width: calc(50% - 0.35rem);
    justify-content: center;
  }

  .form-footer--results .form-footer__export {
    flex: 1 1 100%;
    order: 3;
    justify-content: center;
  }

  .result-metric {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .result-metric__value {
    text-align: left;
  }

  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal__panel {
    width: 100%;
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 1.15rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .modal__actions {
    flex-direction: column;
  }

  .modal__actions .btn {
    flex: 1 1 auto;
    width: 100%;
  }

  .toast {
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: auto;
    max-width: none;
    text-align: center;
  }
}

/* Phone */
@media (max-width: 480px) {
  .page {
    padding: 0.65rem;
  }

  .header__shell {
    padding-inline: 0.75rem;
  }

  /* 2×2 grid on narrow phones — larger tap targets */
  .workflow-rail__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .workflow-rail__steps--no-insulin {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workflow__step-btn {
    min-height: 3.5rem;
    padding: 0.42rem 0.35rem;
  }

  .workflow__label {
    font-size: 0.62rem;
  }

  .header__title {
    font-size: 1.05rem;
  }

  .header__title-panel {
    display: inline;
    margin: 0 0 0 0.2em;
    width: auto;
  }

  .header__modules-ticker {
    padding: 0.3rem 0;
  }

  .view {
    padding: 0.75rem;
  }

  .view.is-active .clinical-form > .form-footer:not(.form-footer--results),
  .form-footer--results {
    margin-inline: 0;
    padding-inline: 0;
  }

  .form-footer--results {
    flex-direction: column;
    align-items: stretch;
  }

  .form-footer--results > .btn--secondary,
  .form-footer--results > .btn--liquid {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
    order: unset;
  }

  .form-footer--results .form-footer__export {
    order: -1;
    width: 100%;
  }

  .form-footer--results .form-footer__export .btn--export {
    flex: 1 1 0;
    max-width: none;
  }

  .btn--label-swap {
    min-width: 0;
    width: 100%;
  }

  .site-footer {
    padding: 0.85rem 0.75rem calc(1rem + env(safe-area-inset-bottom, 0px));
    font-size: 0.68rem;
    line-height: 1.45;
  }
}

/* Touch devices: prevent iOS zoom + comfortable tap targets */
@media (hover: none) and (pointer: coarse) {
  .input-group input,
  .field-input,
  .input-group__select {
    font-size: 16px;
  }

  .btn,
  .workflow__step-btn:not(:disabled),
  .checklist__item,
  .toggle-line {
    min-height: 44px;
  }

  .btn--export {
    min-height: 44px;
  }
}