/* QUBRO v1.22.3: one-row masthead on phones. The approved logo SVG is unchanged.
   Override old large two-row rules without affecting desktop or immersive mode. */
@media (max-width:700px) {
  body:not(.viewer-immersive) .topbar {
    width:100%;height:auto;min-height:72px;
    padding:7px 12px;gap:8px;
    display:flex;flex-wrap:nowrap;align-items:center;
  }
  body:not(.viewer-immersive) .topbar .brand {
    flex:1 1 0%;width:auto;min-width:0;gap:8px;
  }
  body:not(.viewer-immersive) .topbar .brand-icon {
    display:flex!important;align-items:center;justify-content:center;
    width:58px;height:62px;min-width:58px;flex:0 0 58px;
  }
  body:not(.viewer-immersive) .topbar .brand-icon img {
    width:58px;height:62px;max-width:100%;object-fit:contain;
  }
  body:not(.viewer-immersive) .topbar .brand-text {
    flex:1 1 auto;min-width:0;max-width:100%;
  }
  body:not(.viewer-immersive) .topbar .brand-text strong {
    font-size:clamp(20px,5.6vw,27px);letter-spacing:.025em;
    line-height:1.1;white-space:nowrap;
  }
  body:not(.viewer-immersive) .topbar .brand-text small {
    font-size:clamp(7px,1.9vw,9px);line-height:1.25;
    letter-spacing:.015em;overflow-wrap:normal;
  }
  body:not(.viewer-immersive) .topbar .topbar-actions {
    flex:0 0 auto;width:auto;min-width:0;gap:0;justify-content:flex-end;
  }
  body:not(.viewer-immersive) .topbar .topbar-actions .local-badge {display:none}
  body:not(.viewer-immersive) .topbar .pc-version-button {
    min-height:44px;min-width:0;width:102px;max-width:102px;
    padding:7px 5px;font-size:10px;line-height:1.25;white-space:normal;
  }
  body:not(.viewer-immersive) .shell {padding-top:12px}
  body:not(.viewer-immersive) .intro {margin-top:0;margin-bottom:10px}
  body:not(.viewer-immersive) .intro .eyebrow {font-size:9px}
  body:not(.viewer-immersive) .intro h1 {
    font-size:clamp(22px,6vw,27px);line-height:1.17;
    margin:6px 0 4px;
  }
  body:not(.viewer-immersive) .intro p {font-size:11px;line-height:1.4}
}
@media (max-width:370px) {
  body:not(.viewer-immersive) .topbar .brand-icon {
    display:flex!important;width:48px;height:52px;min-width:48px;flex-basis:48px;
  }
  body:not(.viewer-immersive) .topbar .brand-icon img {width:48px;height:52px}
  body:not(.viewer-immersive) .topbar .brand-text strong {font-size:20px}
  body:not(.viewer-immersive) .topbar .pc-version-button {width:95px;max-width:95px}
}