/* A companion zone, not another miniature drawing column. */
.studio-companion { margin-block: .7rem; }
.studio-companion-tools, .studio-companion-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.studio-companion-tools a,.studio-companion-actions a { text-decoration:underline; text-underline-offset:.18em; }
.notebook-with-studio { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; align-items:start; }
.notebook-with-studio > * { min-width:0; }
#studio-companion-panel { border:1px solid var(--tfa-line); border-radius:1rem; padding:1rem; background:var(--tfa-white); color:var(--tfa-ink); }
#studio-companion-panel[hidden] { display:none; }
#studio-companion-panel h3 { margin:0 0 .6rem; font-size:1.15rem; }
.studio-companion-task { font:inherit; font-size:.95rem; line-height:1.55; margin:0 0 .75rem; }
.studio-companion-frame { display:block; width:100%; height:39rem; border:0; margin-block:1rem; background:var(--tfa-white); border-radius:.5rem; }
@media(min-width:90rem){
 .notebook-with-studio.studio-open { grid-template-columns:minmax(0,1fr) minmax(22rem,.6fr); }
 .studio-open #studio-companion-panel { position:sticky; top:1rem; max-height:calc(100vh - var(--lesson-flow-height,6rem) - 3rem); overflow:auto; }
 /* Preserve legible working and method widths when the companion is open. */
 .board-app .studio-open .board-workspace { grid-template-columns:minmax(0,1fr); }
 .board-app .studio-open .diagram-dock { position:static; max-width:36rem; width:100%; margin-inline:auto; }
}
@media(max-width:89.999rem){
 .studio-open #studio-companion-panel { grid-row:1; }
 .studio-companion-frame { height:32rem; }
}
@media print { .studio-companion,#studio-companion-panel { display:none!important; } .notebook-with-studio { display:block; } }