/* Phone-specific guided respiratory walkthrough refinements.
   Keep side-by-side comparison visual-first in landscape. */
@media (max-width:900px) and (orientation:portrait){
  .respiratory-walkthrough-compare-grid::before{
    content:"↻ Rotate your phone sideways to compare both tracings side by side.";
    display:block;
    grid-column:1 / -1;
    padding:10px 12px;
    border:1px solid #9ccbd0;
    border-radius:12px;
    background:#e8f7f6;
    color:#123b55;
    font-weight:850;
    line-height:1.35;
    text-align:center;
  }
}

@media (max-width:900px) and (orientation:landscape){
  /* In comparison mode, the tracings own most of the short landscape viewport. */
  .respiratory-walkthrough-compare-grid{
    height:100%;
    min-height:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
  }
  .respiratory-walkthrough-compare-grid .respiratory-walkthrough-pane{
    min-height:0;
    height:100%;
    grid-template-rows:minmax(0,1fr) minmax(58px,0.30fr) !important;
    gap:3px;
  }
  .respiratory-walkthrough-compare-grid .respiratory-walkthrough-visual{
    grid-row:1;
    min-height:0;
    padding:2px;
    overflow:hidden;
  }
  .respiratory-walkthrough-compare-grid .respiratory-walkthrough-visual>.spg-trace-fullscreen-frame{
    width:100%;
    height:100%;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .respiratory-walkthrough-compare-grid .respiratory-walkthrough-visual .respiratory-timeline-trace,
  .respiratory-walkthrough-compare-grid .respiratory-walkthrough-visual .respiratory-trace{
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    max-height:100%;
  }
  .respiratory-walkthrough-compare-grid .respiratory-walkthrough-definition{
    grid-row:2;
    min-height:0;
    padding:4px 5px;
    overflow:auto;
    border-top:1px solid var(--line);
    border-bottom:0;
  }
  .respiratory-walkthrough-compare-grid .respiratory-walkthrough-definition h3{
    margin:0 0 2px;
    font-size:.72rem;
    line-height:1.1;
  }
  .respiratory-walkthrough-compare-grid .respiratory-walkthrough-definition-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:3px;
  }
  .respiratory-walkthrough-compare-grid .respiratory-walkthrough-definition-row>div{
    padding:2px 3px;
    border-radius:5px;
  }
  .respiratory-walkthrough-compare-grid .respiratory-walkthrough-definition-row strong{
    font-size:.53rem;
    line-height:1.05;
  }
  .respiratory-walkthrough-compare-grid .respiratory-walkthrough-definition-row p{
    margin-top:1px;
    font-size:.53rem;
    line-height:1.08;
  }
  /* Comparison already has the two visuals visible; reduce chrome around them. */
  .respiratory-walkthrough-modal:has(.respiratory-walkthrough-compare-grid) .respiratory-walkthrough-head{
    padding-top:3px;
    padding-bottom:3px;
  }
  .respiratory-walkthrough-modal:has(.respiratory-walkthrough-compare-grid) .respiratory-walkthrough-tools{
    padding-top:2px;
    padding-bottom:2px;
  }
  .respiratory-walkthrough-modal:has(.respiratory-walkthrough-compare-grid) .respiratory-walkthrough-main{
    padding:3px;
  }
  .respiratory-walkthrough-modal:has(.respiratory-walkthrough-compare-grid) .respiratory-walkthrough-footer{
    padding-top:3px;
    padding-bottom:3px;
  }
}