/* Use the desktop viewport for both scopes and all thirteen intervals. */
:root{--osc-title:#b99aff}
:root[data-theme="light"]{--osc-title:#8155d9}
.osc-workspace>header h1{color:var(--osc-title);font-size:24px;line-height:1.25}
.osc-header-actions{display:flex;align-items:center;gap:8px;flex:none}
.osc-workspace #master-toggle[aria-pressed="true"]{background:#dc2626!important;color:#fff!important;border-color:#f87171!important;box-shadow:0 3px 10px #dc262630!important}
.osc-workspace #master-toggle[aria-pressed="true"]:hover{background:#b91c1c!important}
.osc-width-toggle{display:none;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 10px;border:1px solid var(--border-hover);border-radius:10px;background:var(--panel-alt);color:var(--text);font:600 12px/1.3 system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.osc-width-toggle svg{width:18px;height:18px;flex:none}
.osc-width-toggle:hover{border-color:var(--osc-title);color:var(--osc-title)}
.osc-width-toggle:focus-visible{outline:2px solid var(--osc-title);outline-offset:2px}
.osc-width-control{display:none}
@media(min-width:1200px) and (min-height:600px){
  .osc-width-control{display:block}
  .osc-width-toggle{display:inline-flex}
  body.osc-page>.osc-workspace{width:min(100%,var(--osc-workspace-width,820px));min-width:min(100%,820px);margin-inline:auto;transition:width var(--osc-width-duration,2.5s) linear}
}
.osc-zoom{direction:ltr}
.osc-zoom label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.osc-zoom label svg{width:15px;height:15px;flex:none;color:var(--accent)}
.osc-zoom #zoom-slider,.osc-zoom #zoom-val{direction:ltr}
.osc-workspace .osc-string-panel{max-height:none;overflow:visible}
.osc-workspace #intervals-grid>button{min-height:58px}
.osc-workspace #intervals-grid>button>span{font-size:13px}
.osc-workspace #intervals-grid>button>div>span:first-child{font-size:12px}
.osc-workspace #intervals-grid>button>div>span:last-child{font-size:10px}
@media(min-width:900px) and (min-height:600px){
  html body.osc-page{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:5px;height:100dvh;min-height:0;padding:12px 60px 8px!important;align-items:stretch;justify-content:stretch;overflow:hidden}
  body>.osc-workspace{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;width:100%;max-width:none;min-height:0;margin:0;padding:14px}
  .osc-workspace>header{margin:0;padding-bottom:8px;min-height:38px}
  .osc-workspace>header h1{font-size:26px}
  .osc-workspace #master-toggle{font-size:14px;min-height:36px;flex:none}
  .osc-workspace .osc-frequency{margin:0;padding:8px 12px;gap:6px}
  .osc-workspace .frequency-row{gap:12px}
  .osc-workspace .frequency-row label{font-size:13px;white-space:nowrap}
  .osc-workspace #base-freq{flex:1;min-width:0}
  .osc-workspace #freq-val{width:65px;font-size:13px;flex:none;direction:ltr}
  .osc-workspace .frequency-meta{padding-top:4px}
  .osc-workspace .osc-visuals{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:12px;min-height:0}
  .osc-workspace .osc-scopes{grid-column:auto;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;min-height:0;min-width:0}
  .osc-workspace .osc-scope{display:grid;grid-template-rows:auto minmax(0,1fr);gap:7px;padding:10px;min-height:0;min-width:0}
  .osc-workspace .osc-scope h2{font-size:13px;margin:0;min-width:0}
  .osc-workspace .composite-header{gap:10px;margin:0;flex-wrap:wrap}
  .osc-workspace .composite-header>div{flex:none}
  .osc-workspace .osc-screen{height:100%;min-height:0}
  .osc-workspace .osc-screen canvas{display:block;width:100%;height:100%}
  .osc-workspace #legend{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:0;max-height:none;overflow:visible;gap:4px}
  .osc-workspace #legend>div{min-width:0;padding:2px 4px;gap:3px}
  .osc-workspace #legend>div>span:first-child{flex:none}
  .osc-workspace #legend>div>span:last-child{font-size:9px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .osc-workspace .osc-string-panel{grid-column:auto;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0;padding:10px}
  .osc-workspace .osc-string-panel h2{position:static;margin:0;padding:0;font-size:13px}
  .osc-workspace #string-container{display:grid;grid-template-rows:repeat(13,minmax(0,1fr));gap:4px;min-height:0}
  .osc-workspace #string-container>div{display:grid;grid-template-rows:auto 7px;gap:2px;align-content:center;margin:0}
  .osc-workspace #string-container>div>div{margin:0}
  .osc-workspace #string-container>div>div:first-child{font-size:12px;gap:6px;line-height:1.25}
  .osc-workspace #string-container>div>div:last-child{height:7px;padding:1px}
  .osc-workspace .osc-intervals{margin:0;display:grid;grid-template-rows:auto auto;gap:6px}
  .osc-workspace .osc-intervals h2{margin:0;font-size:13px}
  .osc-workspace #intervals-grid{grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:clamp(58px,7vh,78px);gap:7px}
  .osc-workspace #intervals-grid>button{padding:4px;min-width:0;gap:1px}
  .osc-workspace #intervals-grid>button>span{flex:none;line-height:15px}
  .osc-workspace #intervals-grid>button>div{flex:none;margin:0;gap:0;line-height:1.15}
  body>footer[data-cr-footer]{margin:0!important;padding:2px 8px!important;font-size:10px!important;line-height:1.3!important}
}
@media(min-width:900px) and (min-height:600px) and (max-height:700px){
  body>.osc-workspace{padding:10px;gap:8px}
  .osc-workspace .osc-visuals,.osc-workspace .osc-scopes{gap:8px}
  .osc-workspace .osc-scope,.osc-workspace .osc-string-panel{padding:8px;gap:5px}
  .osc-workspace #string-container{gap:1px}
  .osc-workspace #string-container>div{grid-template-rows:auto 3px;gap:1px}
  .osc-workspace #string-container>div>div:last-child{height:3px;padding:0;border:0}
  .osc-workspace #string-container>div>div:first-child{font-size:11px;line-height:1.1}
  .osc-workspace #intervals-grid{grid-auto-rows:54px;gap:5px}
  .osc-workspace #intervals-grid>button{min-height:54px}
  .osc-workspace .osc-frequency{padding:4px 10px;gap:4px}
}
/* Phones keep the full page width in both orientations. Put the interval
   choices before the longer reference list, and leave room for floating tools. */
@media(max-width:899px),(max-height:599px){
  html body.osc-page{display:block!important;height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto;padding:8px!important}
  body>.osc-workspace{display:flex;flex-direction:column;gap:12px;width:100%!important;max-width:none;margin:0;padding:12px!important}
  .osc-workspace>header{flex-direction:column;align-items:stretch;gap:8px;margin:0;padding-top:42px}
  .osc-workspace>header h1{font-size:22px;text-align:center}
  .osc-workspace .osc-header-actions{width:100%}
  .osc-workspace .osc-header-actions #master-toggle{width:100%}
  .osc-workspace #master-toggle{justify-content:center;min-height:44px;font-size:14px}
  .osc-workspace .osc-frequency{margin:0}
  .osc-workspace>.osc-visuals{display:contents}
  .osc-workspace .osc-scopes{order:1;grid-column:auto;min-width:0}
  .osc-workspace .osc-intervals{order:2;margin:0}
  .osc-workspace .osc-string-panel{order:3;grid-column:auto}
  .osc-workspace .osc-string-panel h2{position:static}
  .osc-workspace .composite-header{flex-wrap:wrap;gap:8px}
  .osc-workspace .osc-zoom{flex-wrap:nowrap}
  .osc-workspace #intervals-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .osc-workspace #intervals-grid>button>span{white-space:normal;overflow:visible;line-height:1.25}
  .osc-workspace .frequency-row{flex-wrap:wrap}
  .osc-workspace .osc-frequency-control{flex-basis:100%;order:3}
  body>footer[data-cr-footer]{margin-top:12px!important;padding:10px!important}
}
@media(max-width:599px){.osc-workspace #intervals-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(pointer:coarse){
  .osc-workspace #master-toggle{min-height:44px}
  .osc-workspace #base-freq,.osc-workspace #zoom-slider{min-height:44px;touch-action:pan-y}
  .osc-workspace #zoom-slider{min-width:100px}
}