/* Canonical step-description surface; each standalone visualization opts in once. */
[data-techviz-teaching-panel] { --teaching-bg:#1a1a2e; --teaching-border:#38385e; --teaching-text:#e8e8f5; --teaching-muted:#9a9ac0; color:var(--teaching-text); background:var(--teaching-bg); border-color:var(--teaching-border); }
[data-techviz-teaching-panel] :is(h1,h2,h3,h4) { color:var(--teaching-text); }
[data-techviz-teaching-panel] :is(p,li) { color:var(--teaching-muted); line-height:1.55; }

@media (min-width:681px) {
  *:has(> :is(footer,.footer,.teaching-footer)[data-techviz-teaching-panel]:not(#grpc-detail-footer)):not(:has(#insight-cards-container)) { display:grid !important; grid-template-columns:minmax(0,1fr) 340px; grid-template-rows:auto minmax(0,1fr); }
  *:has(> :is(footer,.footer,.teaching-footer)[data-techviz-teaching-panel]:not(#grpc-detail-footer)):not(:has(#insight-cards-container)) > :first-child:not(footer,.footer,.teaching-footer) { grid-column:1 / -1; }
  *:has(> :is(footer,.footer,.teaching-footer)[data-techviz-teaching-panel]:not(#grpc-detail-footer)):not(:has(#insight-cards-container)) > :is(footer,.footer,.teaching-footer)[data-techviz-teaching-panel] { grid-column:2; grid-row:2; width:340px !important; min-width:0; min-height:0; max-height:none !important; height:auto !important; overflow:auto; border-top:0; border-left:1px solid var(--teaching-border); padding:16px; }
  body:has(.header-title-container[data-techviz-teaching-panel]) #canvas-container, body:has(.teaching-inline[data-techviz-teaching-panel]) #canvas-container { margin-right:340px; }
  /* Redis Architecture needs the stage to explicitly occupy the grid's first column. */
  body:has(#wrapper) #wrapper { grid-column:1; grid-row:2; min-height:600px; }
  :is(.header-title-container,.teaching-inline)[data-techviz-teaching-panel] { position:fixed !important; top:84px; right:0; bottom:0; z-index:20; width:340px !important; min-width:0; padding:16px; overflow:auto; border-left:1px solid var(--teaching-border); }
}

@media (max-width:680px) {
  [data-techviz-teaching-panel] { min-width:0; width:100%; }
  /* Eligible shared mobile teaching shell (.main > .side > [data-techviz-teaching-panel]) */
  html:has(.main > .side > [data-techviz-teaching-panel]),
  body:has(.main > .side > [data-techviz-teaching-panel]) {
    height: auto !important;
    min-height: 100vh;
    overflow: auto !important;
  }
  .app:has(.main > .side > [data-techviz-teaching-panel]),
  body:has(.main > .side > [data-techviz-teaching-panel]) .app {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }
  .main:has(.side > [data-techviz-teaching-panel]) { grid-template-rows:minmax(480px,1fr) auto !important; overflow:visible !important; }
  .side:has(> [data-techviz-teaching-panel]) { display:grid !important; grid-template-columns:1fr !important; grid-template-rows:auto !important; width:100% !important; max-height:none !important; overflow:visible !important; }
  body:has(.header-title-container[data-techviz-teaching-panel]) #canvas-container, body:has(.teaching-inline[data-techviz-teaching-panel]) #canvas-container { margin-right:0; }
  :is(.header-title-container,.teaching-inline)[data-techviz-teaching-panel] { position:static !important; width:auto !important; padding:0; border-left:0; }
  body:has(#sidebar[data-techviz-teaching-panel]) #app { height:auto; min-height:100vh; overflow:auto; }
  body:has(#sidebar[data-techviz-teaching-panel]) #main-area { flex:none; flex-direction:column; overflow:visible; }
  body:has(#sidebar[data-techviz-teaching-panel]) #canvas-viewport { flex:none; min-height:480px; }
  body:has(#sidebar[data-techviz-teaching-panel]) #sidebar { display:block !important; width:100% !important; max-height:none; }
  body:has(#sidebar[data-techviz-teaching-panel]) #footer { display:none !important; }
  body:has(#inspector-panel:is([data-techviz-teaching-panel],:has([data-techviz-teaching-panel]))) { height:auto !important; min-height:100vh; overflow:auto !important; }
  div:has(> #canvas-container):has(> #inspector-panel:is([data-techviz-teaching-panel],:has([data-techviz-teaching-panel]))) { flex:none !important; flex-direction:column !important; overflow:visible !important; }
  body:has(#inspector-panel:is([data-techviz-teaching-panel],:has([data-techviz-teaching-panel]))) #canvas-container { flex:none; width:100%; min-height:420px; }
  #inspector-panel[data-techviz-teaching-panel], #inspector-panel:has([data-techviz-teaching-panel]) { display:flex !important; width:100% !important; max-height:none; }
  .page-container:has(> .main-workspace > .sidebar > .step-info-main > #step-desc[data-techviz-teaching-panel]) { height:auto !important; min-height:100vh; overflow:auto !important; }
  .main-workspace:has(> .sidebar > .step-info-main > #step-desc[data-techviz-teaching-panel]) { flex:none; flex-direction:column; overflow:visible; }
  .main-workspace:has(> .sidebar > .step-info-main > #step-desc[data-techviz-teaching-panel]) > .canvas-container { flex:none; width:100%; min-height:480px; }
  .main-workspace:has(> .sidebar > .step-info-main > #step-desc[data-techviz-teaching-panel]) > .sidebar { width:100%; padding:14px; }
  .sidebar-right:has(> .inspector-section > #step-desc-panel[data-techviz-teaching-panel]) { padding-inline:0; }
  .sidebar-right > .inspector-section:has(> #step-desc-panel[data-techviz-teaching-panel]) { padding-inline:14px; }
  /* Cloud Storage keeps control groups inside the narrow header rather than clipping them. */
  body:has(#inspector-panel[data-techviz-teaching-panel]) .page-header {
    align-items: flex-start !important;
    flex-direction: column;
    padding: 10px 12px;
  }
  body:has(#inspector-panel[data-techviz-teaching-panel]) .header-controls-area {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* Tailwind rail demos with a top-level canvas/main sibling. */
  body:has(aside[data-techviz-teaching-panel]) { height:auto !important; min-height:100vh; overflow:auto !important; }
  div:has(> main):has(> aside[data-techviz-teaching-panel]) { flex:none !important; flex-direction:column !important; overflow:visible !important; }
  div:has(> main):has(> aside[data-techviz-teaching-panel]) > main { flex:none; width:100%; min-height:480px; }
  aside[data-techviz-teaching-panel] { width:100% !important; }
}