/* Mobile surface follows Herald's open-source iOS Bonjour browser: system type,
   grouped lists, a search field, compact counts and a labelled detail record.
   Source and licence: design-source/README.md. No rendered radar imagery. */
@media (max-width: 900px) {
  .mobile-app-shell {
    color-scheme: light;
    color: #1c1c1e;
    background: #f2f2f7;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --mobile-rule: #e5e5ea;
    --mobile-secondary: #8e8e93;
    --mobile-blue: #007aff;
  }
  .mobile-app-topbar {
    min-height: 48px;
    padding: 9px 20px;
    border: 0;
    background: #f2f2f7;
  }
  .mobile-app-brand span { font-size: 17px; font-weight: 650; letter-spacing: -.3px; }
  .mobile-app-live { color: var(--mobile-secondary); font: 11px -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-app-live small { font: 10px -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-app-main { padding: 20px 20px 28px; background: #f2f2f7; }
  .mobile-app-dock {
    border-top: 1px solid #d7d7dc;
    background: rgba(250,250,252,.98);
    padding: 0 5px env(safe-area-inset-bottom, 8px);
  }
  .mobile-app-dock button {
    color: #66666b;
    border: 0;
    min-height: 55px;
    font: 12px -apple-system, BlinkMacSystemFont, sans-serif;
  }
  .mobile-app-dock button.is-active {
    color: var(--mobile-blue);
    background: transparent;
    border-top: 0;
    font-weight: 600;
  }
  .mobile-app-shell button:focus-visible,
  .mobile-app-shell input:focus-visible,
  .mobile-app-shell a:focus-visible { outline-color: var(--mobile-blue); }
  .mobile-app-shell button { color: #1c1c1e; }
  .page-heading h1,.mobile-cli-intro h2,.mobile-radar-intro h1 {
    color: #000;
    font: 700 34px/1.16 -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -.8px;
    margin-bottom: 7px;
  }
  .page-heading p,.mobile-cli-intro p,.mobile-radar-intro p { color: #6e6e73; font-size: 14px; }
  .mobile-cli-intro>div { color: var(--mobile-secondary); }
  .mobile-connection,
  .tool-list,
  .mobile-network-stats,
  .mobile-attention-panel,
  .settings-rows,
  .about-list {
    background: #fff;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
  }
  .mobile-connection { padding: 16px; margin-bottom: 20px; }
  .mobile-connection dt,.mobile-network-stats span,.about-list dt { color: var(--mobile-secondary); }
  .mobile-connection dd,.mobile-network-stats strong,.about-list dd { color: #1c1c1e; }
  .tool-list { padding: 0 16px; }
  .tool-list button { min-height: 70px; border-bottom-color: var(--mobile-rule); }
  .tool-list button:last-child { border-bottom: 0; }
  .tool-list button:hover:not(:disabled) { background: #f8f8fa; }
  .tool-list strong { color: #1c1c1e; font-size: 16px; }
  .tool-list small { color: var(--mobile-secondary); }
  .tool-list span { color: #c7c7cc; }
  .footnote { color: #74747a; }
  .mobile-network-stats { padding: 0 16px; }
  .mobile-network-stats article,.about-list>div,.settings-rows label { border-bottom-color: var(--mobile-rule); }
  .mobile-network-stats article:last-child,.about-list>div:last-child,.settings-rows label:last-child { border-bottom: 0; }
  .mobile-attention-panel { padding: 18px; }
  .mobile-module-head { color: var(--mobile-secondary); }
  .mobile-command-row { border: 0; border-top: 1px solid var(--mobile-rule); border-radius: 0; padding: 14px 0 0; }
  .mobile-command-row b,.settings-links a { color: var(--mobile-blue); }
  .settings-rows,.about-list { padding: 0 16px; }
  .settings-links { padding: 0 4px; }
  .mobile-console-frame { border: 0; border-radius: 18px; overflow: hidden; }
  .mobile-console-head { background: #161b22; color: #aeb6c1; border-color: #313b47; }
  .mobile-cli-feed,.mobile-command-form,.mobile-command-form input { background: #0e1217; color: #e5edf3; }
  .mobile-command-form { border-color: #313b47; }
  .mobile-command-form label,.mobile-command-form button { color: #88c0f4; }
  .mobile-cli-entry.is-command { color: #88c0f4; }
  .mobile-cli-shortcuts button { background: #fff; border: 0; border-radius: 10px; }
  .mobile-cli-reference { color: #77777d; }

  /* Herald's All Services list translated to the existing Bonjour data source. */
  .mobile-radar-page { margin: 0; padding: 0 0 18px; background: transparent; }
  .mobile-radar-intro { padding: 0; margin: 0 0 16px; border: 0; }
  .mobile-radar-intro h1 { margin: 0 0 5px; }
  .mobile-radar-intro p { max-width: none; color: #6e6e73; }
  .mobile-radar-search {
    height: 43px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    margin: 0 0 18px;
    border: 0;
    border-radius: 12px;
    background: #e3e3e9;
    color: #64646a;
  }
  .mobile-radar-search .radar-icon { width: 18px; height: 18px; }
  .radar-icon { display: inline-block; flex: none; background: currentColor; -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
  .radar-icon--search { -webkit-mask-image: url('/vendor/tabler/search.svg'); mask-image: url('/vendor/tabler/search.svg'); }
  .mobile-radar-search input {
    width: 100%;
    padding: 0;
    color: #1c1c1e;
    font: 16px -apple-system, BlinkMacSystemFont, sans-serif;
    border: 0;
    background: transparent;
    outline: 0;
  }
  .mobile-radar-search input::placeholder { color: #8e8e93; }
  .mobile-radar-search:focus-within { outline: 2px solid var(--mobile-blue); outline-offset: 1px; }
  .mobile-radar-stats {
    display: flex;
    align-items: center;
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 0;
    border-radius: 18px;
    background: #fff;
  }
  .mobile-radar-stats>div { display: flex; flex-direction: column; gap: 2px; padding: 0 15px; min-width: 0; }
  .mobile-radar-stats>div:first-child { padding-left: 0; }
  .mobile-radar-stats>div+div { border-left: 1px solid var(--mobile-rule); }
  .mobile-radar-stats strong { color: #111; font: 650 21px/1.1 -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-radar-stats small { color: var(--mobile-secondary); font: 11px -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-radar-control { margin: 0 0 20px; padding: 16px; border-radius: 18px; background: #fff; }
  .mobile-radar-status { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .mobile-radar-status span { font-size: 15px; font-weight: 600; }
  .mobile-radar-status small { color: var(--mobile-secondary); font-size: 12px; }
  .mobile-radar-control p { min-height: 0; margin: 0 0 14px; color: #6e6e73; font: 13px/1.45 -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-radar-actions { display: flex; gap: 9px; }
  .mobile-radar-actions button {
    min-height: 39px;
    padding: 7px 15px;
    border-radius: 10px;
    font: 600 14px -apple-system, BlinkMacSystemFont, sans-serif;
  }
  .mobile-radar-actions #nearbyRadarStart { background: var(--mobile-blue); border-color: var(--mobile-blue); color: #fff; }
  .mobile-radar-actions #nearbyRadarStop { background: #e9e9ed; border: 0; color: #1c1c1e; }
  .mobile-radar-actions button:disabled { opacity: .45; }
  .mobile-radar-web-alternative { display: none; }
  .mobile-radar-page.is-unsupported .mobile-radar-search,
  .mobile-radar-page.is-unsupported .mobile-radar-stats,
  .mobile-radar-page.is-unsupported .mobile-radar-actions,
  .mobile-radar-page.is-unsupported .mobile-radar-results,
  .mobile-radar-page.is-unsupported .mobile-radar-footer { display: none; }
  .mobile-radar-page.is-unsupported .mobile-radar-control { margin-top: 28px; }
  .mobile-radar-page.is-unsupported .mobile-radar-control p { margin: 0 0 18px; }
  .mobile-radar-page.is-unsupported .mobile-radar-web-alternative {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 47px;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--mobile-rule);
    background: #fff;
    color: var(--mobile-blue);
    font: 600 15px -apple-system, BlinkMacSystemFont, sans-serif;
  }
  .mobile-radar-results-head { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 9px; color: #8e8e93; font: 600 13px -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-radar-results-head b { font-weight: 500; }
  .mobile-radar-list { overflow: hidden; border-radius: 18px; background: #fff; }
  .mobile-radar-empty { margin: 0; padding: 28px 17px; border: 0; color: #8e8e93; font: 14px/1.5 -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-radar-entry { padding: 0 16px; }
  .mobile-radar-entry+.mobile-radar-entry .mobile-radar-service { border-top: 1px solid var(--mobile-rule); }
  .mobile-radar-service {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 68px;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    text-align: left;
    background: #fff;
  }
  .mobile-radar-service:hover:not(:disabled),.mobile-radar-service.is-selected { background: #fff; }
  .mobile-radar-service-main { display: grid; gap: 3px; min-width: 0; }
  .mobile-radar-service-main strong { color: #1c1c1e; font: 16px/1.3 -apple-system, BlinkMacSystemFont, sans-serif; overflow-wrap: anywhere; }
  .mobile-radar-service-main small { color: #8e8e93; font: 12px/1.3 -apple-system, BlinkMacSystemFont, sans-serif; overflow-wrap: anywhere; }
  .mobile-radar-service-arrow { color: #c7c7cc; font: 28px/1 -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-radar-service-details { padding: 8px 0 18px; }
  .mobile-radar-service-details h3 { margin: 12px 0 8px; color: #8e8e93; font: 600 13px -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-radar-detail-row,.mobile-radar-service-detail>div { display: grid; gap: 3px; padding: 9px 0; border-top: 1px solid var(--mobile-rule); overflow-wrap: anywhere; }
  .mobile-radar-detail-row small,.mobile-radar-service-detail small { color: #8e8e93; font: 12px -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-radar-detail-row strong,.mobile-radar-service-detail strong { color: #1c1c1e; font: 15px/1.3 -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-radar-service-detail { display: block; margin-bottom: 9px; }
  .mobile-radar-service-details p { margin-top: 8px; color: #8e8e93; font-size: 12px; }
  .mobile-radar-footer { display: block; margin-top: 18px; padding: 0 3px; border: 0; color: #8e8e93; font: 12px/1.5 -apple-system, BlinkMacSystemFont, sans-serif; }
  .mobile-radar-footer p { margin-top: 5px; color: #8e8e93; }
}