/*
 * ON6UHF v4.3.272 — responsive device layer
 * Desktop is intentionally untouched. These rules only run on tablets,
 * phones, or devices that identify as touch-first.
 */

@media (max-width: 1180px), (hover: none) and (pointer: coarse) {
  :root {
    --mobile-gutter: clamp(14px, 3.2vw, 28px);
    --mobile-radius: 14px;
    --mobile-tap: 48px;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 86px;
  }

  html, body { max-width: 100%; overflow-x: clip; }
  body { min-width: 0; }
  img, svg, video, canvas { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }
  main, section, article, aside, header, footer, div { min-width: 0; }

  .shell,
  .ds-shell,
  .monitor-shell {
    width: min(100% - (2 * var(--mobile-gutter)), 100%) !important;
    max-width: none;
    margin-inline: auto;
  }

  button,
  [role="button"],
  input,
  select,
  textarea,
  summary,
  .btn,
  .primary-button,
  .secondary-button,
  .poster-button {
    min-height: var(--mobile-tap);
    touch-action: manipulation;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  input, select, textarea { font-size: 16px !important; }
  a, button { -webkit-tap-highlight-color: rgba(64, 205, 255, .18); }

  .topbar { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .topin { min-height: 78px !important; gap: 12px !important; }
  .brand { min-width: 0 !important; max-width: calc(100% - 76px); }
  .brand img { width: 52px !important; height: 52px !important; flex: 0 0 52px; }
  .brand strong { font-size: clamp(1.2rem, 3vw, 1.45rem) !important; }
  .brand small { overflow: hidden; text-overflow: ellipsis; }
  .menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 48px;
    margin-left: auto !important;
    font-weight: 850;
  }
  .nav {
    display: none !important;
    position: absolute !important;
    inset: 77px var(--mobile-gutter) auto !important;
    max-height: calc(var(--app-height, 100dvh) - 92px);
    overflow: auto;
    overscroll-behavior: contain;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 10px !important;
    border: 1px solid #275b7d !important;
    border-radius: 0 0 14px 14px !important;
    background: rgba(4, 23, 38, .985) !important;
    box-shadow: 0 22px 48px rgba(0,0,0,.45);
  }
  .nav.open { display: flex !important; }
  .nav a {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    white-space: normal !important;
    font-size: 1rem !important;
  }

  .hero,
  .site-hero { min-height: clamp(510px, 70svh, 650px); }
  .hero-copy,
  .site-hero-copy { padding-block: clamp(54px, 8vw, 86px); }
  h1,
  .page-head h1,
  .article-hero-copy h1 { overflow-wrap: anywhere; }

  .grid,
  .home-new-grid,
  .info-grid,
  .poster-grid,
  .freq-grid,
  .download-grid,
  .knowledge-grid,
  .future-grid,
  .roadmap-grid,
  .article-tech-grid,
  .article-related-grid,
  .article-link-grid { gap: 14px; }

  .table-wrap,
  .dpc-log-table,
  .dm-tg-table,
  .table,
  [class*="table-wrap"] {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  table { max-width: 100%; }
  .lightbox { height: var(--app-height, 100dvh); }
  .lb-toolbar { padding-top: max(10px, env(safe-area-inset-top)); }

  .coast-footer-grid,
  .footer-bottom { gap: 18px; }

  /* Full-screen tools keep the available screen height after Safari bars move. */
  .dpc,
  .ss-app,
  .logbook,
  .dx,
  .qo-app { min-height: var(--app-height, 100dvh); }
}

/* iPad portrait/landscape and compact desktop-width touch devices. */
@media (min-width: 768px) and (max-width: 1180px),
       (min-width: 768px) and (hover: none) and (pointer: coarse) {
  .grid,
  .home-new-grid,
  .poster-grid,
  .knowledge-grid,
  .future-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .hero-strip,
  .article-hero-grid,
  .about-story-intro,
  .about-chapter,
  .about-chapter.reverse { grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr) !important; }

  .section { padding-block: 58px; }
  .foot { grid-template-columns: 1.15fr .85fr; }

  /* Telemetry: radar first, details below without shrinking the scope. */
  .telemetry-hero-grid,
  .telemetry-hero-grid-v160 { grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr) !important; gap: 24px !important; }

  /* APRS and monitor panels retain a useful map surface. */
  .aprs-route-grid,
  .aprs-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .aprs-coverage-console { min-height: 640px; }

  /* QSO Command keeps its proven vertical workflow on tablet. */
  .logbook { overflow: auto; }

  /* Dispatch becomes a scrollable operational board. */
  .dpc { height: var(--app-height, 100dvh); overflow: auto; }
  .dpc-workspace { min-height: 680px; }

  .ss-stage { min-height: calc(var(--app-height, 100dvh) - 94px); }
}

/* Phones: one clear information stream and controls sized for thumbs. */
@media (max-width: 767px) {
  :root { --mobile-gutter: 14px; }

  .topin { min-height: 70px !important; }
  .brand { max-width: calc(100% - 68px); gap: 9px; }
  .brand img { width: 46px !important; height: 46px !important; flex-basis: 46px; }
  .brand strong { font-size: 1.18rem !important; }
  .brand small { display: none !important; }
  .nav { inset-block-start: 69px !important; }

  .section { padding-block: 42px; }
  .page-head { padding-block: 48px 36px; }
  .hero,
  .site-hero { min-height: 540px; align-items: end; }
  .hero img { object-position: 58% center; }
  .hero-copy,
  .site-hero-copy { padding-block: 54px 42px; }
  h1 { font-size: clamp(2.35rem, 13vw, 3.7rem) !important; line-height: .98 !important; }
  h2 { font-size: clamp(1.75rem, 8vw, 2.55rem); }
  .lead,
  .hero-copy p,
  .site-hero p { font-size: 1.02rem; line-height: 1.6; }

  .actions,
  .article-actions,
  .poster-actions,
  .home-energy72-actions,
  .tips-feature-actions { display: grid !important; grid-template-columns: 1fr !important; width: 100%; }
  .actions > *,
  .article-actions > *,
  .poster-actions > *,
  .home-energy72-actions > *,
  .tips-feature-actions > * { width: 100%; }

  .grid,
  .home-new-grid,
  .info-grid,
  .poster-grid,
  .freq-grid,
  .download-grid,
  .knowledge-grid,
  .future-grid,
  .roadmap-grid,
  .article-tech-grid,
  .article-related-grid,
  .article-link-grid,
  .article-pair,
  .contact-clean-grid,
  .about-story-intro,
  .about-chapter,
  .about-chapter.reverse,
  .aprs-route-grid,
  .aprs-config-grid { grid-template-columns: 1fr !important; }

  .home-new-card,
  .topic-card,
  .poster-feature,
  .about-story-card,
  .profile-article { border-radius: var(--mobile-radius); }
  .home-new-card { min-height: 0; padding: 18px; }

  .repeater-status-inner,
  .network-status-inner { display: flex; }
  .repeater-status-label,
  .network-status-label { display: none; }
  .repeater-status-item,
  .network-status-item { min-height: 46px; padding-inline: 14px; }

  .foot,
  .coast-footer-grid,
  .footer-bottom { grid-template-columns: 1fr !important; text-align: left !important; }
  .footer-person { justify-self: stretch !important; }
  .footer-bottom { display: flex; flex-direction: column; align-items: flex-start; }

  .lb-toolbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .lb-toolbar strong,
  .lb-toolbar .viewer-hint { grid-column: 1 / -1; }
  .lb-toolbar button,
  .lb-toolbar a { min-width: 0; padding-inline: 7px; font-size: .82rem; text-align: center; }

  /* Home modules */
  .home-network-head { align-items: flex-start; }
  .home-energy72-card { grid-template-columns: 1fr !important; }
  .home-energy72-visual { min-height: 260px; }

  /* Telemetry */
  .telemetry-hero { padding-block: 28px !important; }
  .telemetry-hero-grid,
  .telemetry-hero-grid-v160 { display: flex !important; flex-direction: column !important; gap: 22px !important; }
  .telemetry-hero-copy { order: 1; }
  .telemetry-radar-console { order: 2; width: 100%; min-height: 430px; }
  .radar160-frame { width: min(100%, 430px) !important; margin-inline: auto; }
  .telemetry-ticker-line { min-height: 50px; }

  /* SVX Live */
  .svxl-hero { min-height: auto !important; padding-block: 34px !important; }
  .svxl-hero-grid { grid-template-columns: 1fr !important; }
  .svxl-orbit { width: min(82vw, 340px) !important; height: min(82vw, 340px) !important; margin-inline: auto; }
  .svxl-command-head,
  .svxl-tools,
  .svxl-live-grid,
  .svxl-rx,
  .svxl-tg-monitor { grid-template-columns: 1fr !important; }
  .svxl-tg-buttons { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* APRS: controls above a tall, usable map. */
  .aprs-page-hero { min-height: 340px !important; }
  .aprs-control-room,
  .aprs-data-console,
  .aprs-coverage-console { border-radius: 12px !important; }
  .aprs-coverage-console { min-height: 72svh; }
  .apc-toolbar,
  .acr-toolbar,
  .adc-toolbar { flex-wrap: wrap !important; }
  .apc-toolbar > *,
  .acr-toolbar > * { flex: 1 1 145px; }
  .leaflet-control-container .leaflet-top.leaflet-left { top: 6px; left: 6px; }
  .leaflet-popup-content { max-width: min(72vw, 280px); }

  /* DMR and D-STAR */
  .dm-hero-grid,
  .dm-site-grid,
  .dm-control-grid,
  .dm-live-grid,
  .dm-stat-grid,
  .ds-status-grid,
  .ds-dual,
  .ds-photo-grid { grid-template-columns: 1fr !important; }
  .dm-hero-radar { max-width: 360px; margin-inline: auto; }
  .dm-map-toolbar,
  .ds-search-row { display: grid !important; grid-template-columns: 1fr !important; }
  .dm-osm-map { min-height: 62svh; }

  /* Network command map */
  .command-intro { padding-block: 34px !important; }
  .command-stage .shell { width: 100% !important; }
  [data-network-command-map],
  .ncm-map { min-height: 72svh !important; border-radius: 0 !important; }

  /* QSO Command */
  .logbook {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: var(--app-height, 100dvh);
    overflow: visible !important;
  }
  .logbook > section { width: 100%; min-height: auto; }
  .logbook .row { min-width: 0; }
  .logbook input,
  .logbook select,
  .logbook button { min-height: 48px; }

  /* Dispatch: operational zones become vertical panels. */
  .dpc {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: var(--app-height, 100dvh);
    overflow: visible !important;
  }
  .dpc > *,
  .dpc-workspace,
  .dpc-map-zone,
  .dpc-radar,
  .dpc-command-view,
  .dpc-logging { width: 100% !important; grid-column: auto !important; grid-row: auto !important; }
  .dpc-map-zone { min-height: 68svh; }
  .dpc-map { min-height: 62svh; }
  .dpc-log-table .dpc-log-row { min-width: 760px; }
  .dpc-preference-zone,
  .dpc-command-actions,
  .dpc-log-tools { flex-wrap: wrap !important; }

  /* Second screen: horizontal app tabs remain reachable by swiping. */
  .ss-app { height: var(--app-height, 100dvh) !important; }
  .ss-topbar,
  .ss-tabs { overflow-x: auto !important; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .ss-stage { min-height: 0; }

  /* DX cluster */
  .dx { height: auto !important; min-height: var(--app-height, 100dvh); overflow: visible !important; }
  .dx .row.head { display: none; }
  .dx .row:not(.head) {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 9px;
    padding: 13px;
    border: 1px solid #245b72;
    border-left: 4px solid var(--band);
    border-radius: 12px;
  }
  .dx .row:not(.head) > span { display: grid; min-width: 0; overflow-wrap: anywhere; }
  .dx .row:not(.head) > span::before { color: #7195a5; font-size: .58rem; font-weight: 950; letter-spacing: .05em; }
  .dx .row:not(.head) > span:nth-child(1)::before { content: 'LEEFTIJD'; }
  .dx .row:not(.head) > span:nth-child(2)::before { content: 'BAND'; }
  .dx .row:not(.head) > span:nth-child(3)::before { content: 'FREQUENTIE'; }
  .dx .row:not(.head) > span:nth-child(4)::before { content: 'DX CALL'; }
  .dx .row:not(.head) > span:nth-child(5)::before { content: 'PREFIX'; }
  .dx .row:not(.head) > span:nth-child(6)::before { content: 'SPOTTER'; }
  .dx .row:not(.head) > span:nth-child(7)::before { content: 'MODE'; }
  .dx .row:not(.head) > span:nth-child(8)::before { content: 'SNR'; }
  .dx .row:not(.head) > span:nth-child(9)::before { content: 'RICHTING'; }
  .dx .row:not(.head) > span:nth-child(10)::before { content: 'UTC'; }
  .dx .row:not(.head) > span:nth-child(11)::before { content: 'DATUM'; }
  .dx .row:not(.head) > span:nth-child(12)::before { content: 'OPMERKING'; }
  .dx .row:not(.head) > span:nth-child(13)::before { content: 'BRON'; }
  .dx .row:not(.head) > span:nth-child(12) { grid-column: 1 / -1; }
  .dx .row:not(.head) > :last-child { justify-self: end; align-self: end; }

  /* QO-100 */
  .qo-app { height: var(--app-height, 100dvh) !important; }
  .qo-header { flex-wrap: wrap; }
  .qo-actions { width: 100%; overflow-x: auto; }
  .qo-stage iframe { min-height: calc(var(--app-height, 100dvh) - 150px); }
}

/* Small iPads: activity beside the map, settings underneath. */
@media (min-width: 768px) and (max-width: 900px) {
  .dpc-workspace,
  .dpc.hide-activity .dpc-workspace {
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }
  .dpc-control {
    grid-column: 1 / -1;
    max-height: 420px;
    border-top: 1px solid var(--line, #17516f);
  }
  .dpc.hide-activity .dpc-map-zone { grid-column: 1 / -1; }
}

/* Small phones and split-screen windows. */
@media (max-width: 390px) {
  .shell, .ds-shell, .monitor-shell { width: calc(100% - 22px) !important; }
  .brand strong { font-size: 1.08rem !important; }
  .menu { min-width: 54px; padding-inline: 9px; }
  h1 { font-size: clamp(2.15rem, 12.5vw, 3rem) !important; }
  .svxl-tg-buttons { grid-template-columns: 1fr !important; }
}

/* Notched iPhones and gesture-navigation Android devices. */
@supports (padding: max(0px)) {
  @media (max-width: 1180px), (hover: none) and (pointer: coarse) {
    .topin { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .nav { padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }
    footer, .coast-footer { padding-bottom: env(safe-area-inset-bottom); }
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1180px),
       (prefers-reduced-motion: reduce) and (hover: none) and (pointer: coarse) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}