/* Student tools share the existing blue shell and paper workspace. */
.page-outline { margin:0 0 18px; border:1px solid #cce0ed; border-radius:5px; background:#f7fbff; }
.page-outline>summary { font-weight:700; min-height:44px; padding:11px 12px; }
.page-outline>p { color:#617b91; font-size:14px; margin:0 12px 10px; }
.outline-sections { padding:0 6px 8px; }
.outline-sections details { border:0; border-top:1px solid #dbe8f1; border-radius:0; margin:0; background:transparent; }
.outline-sections summary { font-size:14px; min-height:44px; padding:10px 8px; gap:6px; }
.outline-sections summary small { margin-left:auto; font-weight:500; color:#617b91; }
html:root .builder-workspace .page-outline button { width:100%; min-height:44px; display:flex; align-items:center; gap:8px; padding:8px; text-align:left; border:1px solid transparent; border-radius:4px; background:transparent; color:#32556f; font-size:14px; line-height:1.35; box-shadow:none; transform:none; }
html:root .builder-workspace .page-outline button:hover { background:#e3f0fc; }
html:root .builder-workspace .page-outline button[aria-current=location] { background:#e4eeff; border-color:#8fb0f6; color:#175bbf; }
.outline-icon { width:18px; height:20px; display:grid; place-items:center; flex-shrink:0; }
.outline-icon svg { width:18px; height:18px; }
.outline-column>span { display:block; font-size:12px; font-weight:650; color:#617b91; padding:5px 8px 0; }
.outline-column button>span:nth-child(2) { overflow-wrap:anywhere; min-width:0; }
.outline-hidden { margin-left:auto; opacity:.65; }
.outline-hidden svg { width:16px; height:16px; }
.outline-empty { display:block; padding:8px; color:#617b91; }
.builder-workspace .canvas-document .canvas-block-toolbar>.canvas-block-label { max-width:180px; }
.canvas-block-label :is(.canvas-block-name,.rocode-brand-label>span) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-outline summary { display:flex; align-items:center; gap:6px; cursor:pointer; }
.page-outline summary::marker { content:""; }
.page-outline summary::-webkit-details-marker { display:none; }
.page-outline summary::before { content:""; flex-shrink:0; width:16px; height:16px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition:transform .16s ease; }
.page-outline details[open]>summary::before,.page-outline[open]>summary::before { transform:rotate(90deg); }
html:root .builder-workspace .editor-name-field { margin:0 0 18px; font-size:14px; color:#466178; }
.editor-name-field input { display:block; width:100%; min-height:40px; border:1px solid #b8cce0; border-radius:4px; padding:8px 10px; color:#183d61; background:#fff; margin:6px 0 3px; }
.editor-name-field small { display:block; color:#647c90; line-height:1.4; font-weight:400; }
.context-help-row { display:flex; justify-content:flex-end; margin:-3px 0 8px; }
html:root .builder-workspace .context-help-row button { display:inline-flex; align-items:center; gap:6px; min-height:36px; border:0; padding:4px 0; background:transparent; color:#265cbd; font-size:14px; box-shadow:none; transform:none; }
html:root .builder-workspace .context-help-row button:hover { text-decoration:underline; }
.builder-preview-tools { flex-wrap:wrap; }
.preview-device-group { display:flex; gap:6px; }
html:root .builder-workspace .builder-preview-tools .check-site-button { margin-left:12px; }
.builder-preview.has-site-check { display:grid; grid-template-columns:minmax(0,1fr) 310px; grid-template-rows:auto minmax(0,1fr); align-items:stretch; column-gap:20px; width:100%; }
.has-site-check>.builder-preview-tools { grid-column:1; }
.has-site-check>.builder-preview-paper { grid-column:1; grid-row:2; justify-self:center; }
.site-check-panel { grid-column:2; grid-row:1 / 3; overflow:auto; min-height:0; border:1px solid #c9dcec; background:white; padding:18px; border-radius:6px; text-align:left; color:#284962; }
.site-check-heading { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.site-check-heading>div>span { font-size:11px; font-weight:750; letter-spacing:.07em; color:#6a8295; }
.site-check-heading h2 { margin:4px 0 0; font-size:22px; }
html:root .builder-workspace .site-check-heading button { padding:6px; min-width:36px; min-height:36px; border:0; background:transparent; color:#55718a; }
.site-check-summary { font-size:15px; line-height:1.5; margin:14px 0; }
.site-check-issues { display:grid; gap:8px; }
html:root .builder-workspace .site-check-issues>button { display:flex; align-items:flex-start; gap:10px; width:100%; padding:12px 10px; text-align:left; background:#f6faff; border:1px solid #dae7f3; border-radius:5px; color:#294b67; box-shadow:none; transform:none; }
.site-check-issues button>span:first-child { color:#2d66ce; padding-top:3px; }
.site-check-issues button>span:nth-child(2) { flex:1; min-width:0; display:grid; gap:4px; }
.site-check-issues small { color:#687f92; font-size:12px; }
.site-check-issues strong { font-size:15px; }
.site-check-issues button>span>span { font-size:14px; font-weight:400; line-height:1.45; }
.site-check-issues button>svg { width:15px; padding-top:3px; }
.site-check-ready { display:flex; align-items:center; gap:8px; color:#28734d; padding:12px 0; }
.site-check-try { border-top:1px solid #dce6ef; margin-top:20px; padding-top:16px; }
.site-check-try h3 { margin:0 0 6px; font-size:18px; }
.site-check-try p { font-size:14px; line-height:1.5; color:#61778a; margin:0 0 12px; }
html:root .builder-workspace .site-check-try button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:40px; margin:12px 0 6px; border:1px solid #b5c9e4; border-radius:4px; background:#fff; color:#265fbe; box-shadow:none; }
.site-check-try label { display:flex; align-items:flex-start; gap:8px; line-height:1.45; font-size:14px; padding:6px 0; cursor:pointer; }
.site-check-try input { margin:3px 0 0; width:18px; height:18px; accent-color:#3568e6; flex-shrink:0; }
dialog.task-help { width:min(660px,calc(100vw - 24px)); }
.task-help .creative-body { padding:20px 24px; }
.help-practice { padding:16px; border:1px solid #cce0ed; border-radius:8px; background:#f5faff; }
.help-step { display:block; font-size:13px; font-weight:700; color:#476c8d; margin-bottom:16px; }
.help-practice p { font-size:14px; color:#617b91; text-align:center; line-height:1.5; }
.help-practice>button { display:flex; align-items:center; gap:6px; min-height:40px; margin:12px auto 0; }
.help-move-scene { display:grid; grid-template-columns:1fr 1fr; gap:24px; min-height:144px; }
.help-move-home,.help-move-slot { display:grid; place-items:center; height:144px; min-width:0; border:1px solid #d5e5f1; background:#fff; border-radius:6px; }
.help-move-slot { border:2px dashed #8aaff1; background:#ebf3ff; }
.help-move-slot>span { display:flex; align-items:center; gap:5px; color:#587ec2; font-size:14px; }
.help-move-slot.is-filled>span { display:none; }
.help-move-scene [data-help-move] { background:transparent; border:0; padding:10px; width:112px; height:132px; min-width:0; touch-action:none; position:relative; z-index:1; cursor:grab; box-shadow:none; }
.help-move-scene img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.help-reaction { display:flex; align-items:center; justify-content:center; gap:20px; min-height:140px; }
.help-reaction img { width:100px; height:130px; object-fit:contain; animation:help-reveal .22s ease-out; }
.help-background-scene { text-align:center; padding:20px; background:white; border:1px solid #d5e5f1; border-radius:5px; transition:background-color .2s,color .2s; }
.help-background-scene strong { display:block; font-size:22px; }
.help-background-scene img { display:block; height:100px; margin:16px auto 0; }
.help-background-scene[data-background=tint] { background:#e8f2ff; }
.help-background-scene[data-background=accent] { background:#3568e6; color:white; }
.help-background-choices { display:flex; justify-content:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.help-background-choices button { min-height:44px; }
.help-background-choices button[aria-pressed=true] { color:white; background:#3568e6; border-color:#3568e6; }
.help-steps { padding-left:24px; line-height:1.65; font-size:16px; margin:20px 0 0; }
.help-steps li { padding-left:4px; margin:8px 0; }
.help-device-scene { width:100%; margin:auto; background:#fff; border:3px solid #c0d4eb; border-radius:8px; transition:width .25s ease; }
.help-device-scene.phone { width:min(190px,100%); border-color:#3e5571; }
.help-device-scene>div { padding:20px; text-align:center; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; }
.help-device-scene strong { flex-basis:100%; }
.help-device-scene img { width:80px; height:100px; object-fit:contain; }
.help-device-scene [data-help-surprise] { font-size:14px; color:#315fba; }
.help-task-grid { display:grid; gap:10px; }
.help-task-grid>button { display:flex; align-items:center; gap:14px; padding:16px; text-align:left; width:100%; border:1px solid #d1e1ef; background:#f8fbff; border-radius:6px; }
.help-task-grid>button>svg:first-child { color:#3568e6; width:24px; height:24px; }
.help-task-grid>button>span { flex:1; display:grid; gap:4px; min-width:0; }
.help-task-grid strong { font-size:17px; }
.help-task-grid small { font-size:14px; font-weight:400; line-height:1.5; color:#607d93; }
.help-save-note { margin-top:20px; font-size:15px; line-height:1.6; }
dialog.canvas-target-picker { width:min(980px,calc(100vw - 24px)); max-width:none; }
.target-pick-canvas { padding:18px; min-height:220px; }
.target-pick-canvas .canvas-document { width:100%; transform:none!important; }
.target-pick-canvas .jr-block { pointer-events:none; }
.target-pick-canvas .builder-block { opacity:.4; }
.target-pick-canvas .target-eligible { opacity:1; cursor:pointer; border-radius:3px; }
.target-pick-canvas .target-eligible:is(:hover,:focus-visible,.selected-block) { outline:2px solid #4f80ff; outline-offset:3px; }
.target-pick-canvas .canvas-effect-hint { display:none; }
@keyframes help-reveal { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@media(max-width:900px) { .builder-preview.has-site-check { grid-template-columns:minmax(0,1fr) 270px; gap:12px; }.site-check-panel{padding:12px;} }
@media(max-width:650px) { .builder-preview.has-site-check { display:flex; overflow:auto; }.has-site-check>.builder-preview-paper{flex:none;height:55dvh;}.site-check-panel{flex-shrink:0;overflow:visible;width:100%;}.task-help .creative-body{padding:16px;}.help-move-scene{gap:12px;}.help-move-scene [data-help-move]{width:90px;}.help-reaction{gap:10px;flex-wrap:wrap;} }
@media(prefers-reduced-motion:reduce) { .help-background-scene,.help-device-scene,.page-outline summary::before { transition:none; }.help-reaction img { animation:none; } }
@media(any-pointer:coarse) {
  html:root .builder-workspace .context-help-row button,
  html:root .builder-workspace .site-check-heading button { min-width:44px; min-height:44px; }
}