/* Alleen mobiele portretstand: benut de volledige beschikbare hoogte zonder scrollen. */
@media (max-width: 760px) and (orientation: portrait) {
  html,
  body {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: calc(100dvh - 52px);
    min-height: 0;
    overflow: hidden;
  }

  .tool-card {
    position: relative;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
  }

  /* Geen geluidsbalk: alleen een compact speakericoon rechtsboven. */
  .tool-header {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .sound-toggle {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  }

  .sound-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .sound-toggle span {
    width: 20px;
    height: 20px;
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }

  .sound-toggle span::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .sound-toggle input:checked + span::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm12.5 3a3.5 3.5 0 0 0-2-3.16v6.32a3.5 3.5 0 0 0 2-3.16Zm-2-8.23v2.06A7 7 0 0 1 17 12a7 7 0 0 1-3.5 6.17v2.06A9 9 0 0 0 19 12a9 9 0 0 0-5.5-8.23Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm12.5 3a3.5 3.5 0 0 0-2-3.16v6.32a3.5 3.5 0 0 0 2-3.16Zm-2-8.23v2.06A7 7 0 0 1 17 12a7 7 0 0 1-3.5 6.17v2.06A9 9 0 0 0 19 12a9 9 0 0 0-5.5-8.23Z'/%3E%3C/svg%3E");
  }

  .sound-toggle input:not(:checked) + span::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm11.7.3 1.4-1.4 2.1 2.1 2.1-2.1 1.4 1.4-2.1 2.1 2.1 2.1-1.4 1.4-2.1-2.1-2.1 2.1-1.4-1.4 2.1-2.1-2.1-2.1Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm11.7.3 1.4-1.4 2.1 2.1 2.1-2.1 1.4 1.4-2.1 2.1 2.1 2.1-1.4 1.4-2.1-2.1-2.1 2.1-1.4-1.4 2.1-2.1-2.1-2.1Z'/%3E%3C/svg%3E");
  }

  .breathing-stage {
    grid-row: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 6px 0 10px;
    align-self: stretch;
  }

  .breathing-ball {
    width: clamp(96px, 14dvh, 122px);
  }

  /* Fase wordt visueel alleen door de bal en timer weergegeven. */
  .phase-label {
    display: none;
  }

  .settings {
    grid-row: 2;
    align-self: end;
    width: 100%;
    gap: 8px;
    padding: 0 1px 4px;
  }

  .preset-field {
    gap: 4px;
  }

  .preset-field > span,
  legend,
  .repetitions-field > span {
    margin-bottom: 3px;
    line-height: 1.35;
  }

  .settings-row {
    gap: 8px;
  }

  .phase-inputs {
    gap: 6px;
  }

  .phase-inputs label,
  .repetitions-field {
    gap: 4px;
  }

  select,
  input[type="number"] {
    height: 34px;
  }

  .validation {
    min-height: 12px;
    height: 12px;
  }

  .summary-grid > div {
    padding: 7px 3px;
    text-align: center;
  }

  .summary-grid span,
  .summary-grid strong {
    text-align: center;
  }

  .summary-grid strong {
    margin-top: 3px;
  }

  .actions {
    gap: 6px;
  }

  .actions button {
    height: 34px;
  }
}

/* Op erg korte telefoons blijft alles zonder scrollen passen. */
@media (max-width: 760px) and (orientation: portrait) and (max-height: 700px) {
  .sound-toggle {
    width: 32px;
    height: 32px;
  }

  .sound-toggle span,
  .sound-toggle span::before {
    width: 18px;
    height: 18px;
  }

  .breathing-ball {
    width: clamp(82px, 13dvh, 96px);
  }

  .breathing-stage {
    margin: 3px 0 5px;
  }

  .settings {
    gap: 5px;
    padding-bottom: 1px;
  }

  .preset-field > span,
  legend,
  .repetitions-field > span {
    margin-bottom: 1px;
  }

  select,
  input[type="number"],
  .actions button {
    height: 30px;
  }

  .summary-grid > div {
    padding: 4px 2px;
  }
}