/* Web Authoring Studio (information-technology/web-authoring.php). The shared parts are in studio.css. On a laptop
   or desktop: Tasks has the task on the left, and on the right index.html and styles.css side by side above the
   preview; the other views have three panels. On smaller screens everything stacks and the page scrolls. Theme
   tokens only; the preview is a web page, white like a browser's, in both themes. */

.wa-view{flex:1;min-height:0}
.wa-tasks{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:10px}
.wa-task{gap:8px}
.wa-task-body{padding-right:2px}
.wa-task-btns{flex:none;border-top:1px solid var(--line);padding-top:8px}
.wa-count{font:600 12px/1 var(--font-mono);color:var(--muted)}
.wa-code{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1.15fr);gap:10px}
.wa-ed{padding:8px 10px 10px}
.wa-preview{grid-column:1 / -1;padding:8px 10px 10px}

/* a browser window round the preview */
.wa-browser{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;background:#fff}
.wa-bar{flex:none;display:flex;align-items:center;gap:10px;padding:5px 10px;background:var(--panel-2);border-bottom:1px solid var(--line-strong);font:12px/1.2 var(--font-mono);color:var(--ink-soft);min-width:0}
.wa-dots{display:inline-flex;gap:4px}
.wa-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.wa-tab{font-weight:600;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:5px 5px 0 0;padding:3px 10px;margin-bottom:-6px;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.wa-frame{flex:1;min-height:0;width:100%;border:0;background:#fff;display:block}
.wa-gap{margin-top:8px}

/* the explanation views: three panels */
.wa-explain{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr) minmax(0,1fr);gap:10px}
.wa-explain > .panel{gap:6px}
.wa-layer{padding:8px 10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);margin:8px 0}
.wa-switch{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer;min-height:32px}
.wa-switch input{width:18px;height:18px;accent-color:var(--accent)}
.wa-lycode{margin-bottom:8px}
.wa-lycode.off{opacity:.45}
.wa-lycode .st-file{margin:0 0 4px}
.wa-lycode .st-model{max-height:none}

.wa-root{margin:6px 0 4px;font:600 12.5px/1.35 var(--font-mono);color:var(--ink);overflow-wrap:anywhere}
.wa-tree ul{list-style:none;margin:0;padding:0;font:13px/1.3 var(--font-mono)}
.wa-tree li{display:flex;align-items:center;gap:6px;padding-left:calc(var(--d) * 18px + 6px);min-height:30px}
.wa-dir{color:var(--ink-soft)}
.wa-file{font:13px/1.2 var(--font-mono);background:transparent;border:1px solid transparent;border-radius:5px;padding:4px 7px;color:var(--ink);cursor:pointer;text-align:left}
.wa-file:hover{border-color:var(--accent)}
.wa-file.to{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-deep);font-weight:700}
.wa-file.from{text-decoration:underline;text-decoration-color:var(--accent-b);text-decoration-thickness:2px}
.wa-from{font:600 10.5px/1 var(--font-display);text-transform:uppercase;letter-spacing:.05em;padding:4px 7px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);cursor:pointer}
.wa-from.on{background:var(--accent-b);border-color:var(--accent-b);color:#fff}
.wa-file:focus-visible,.wa-from:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
table.wa-paths td{vertical-align:top}
.wa-p code{display:block;font:13px/1.4 var(--font-mono);color:var(--ink);overflow-wrap:anywhere;margin-bottom:2px}
.wa-p .st-muted{font-size:12px;line-height:1.35}
.wa-yes{color:var(--ok);font-weight:700;white-space:nowrap}
.wa-no{color:var(--bad);font-weight:700;white-space:nowrap}
.wa-h3,.wa-practice h3{margin:12px 0 4px;font:700 14px/1.3 var(--font-display);color:var(--ink)}
.wa-steps{margin:0 0 6px;padding-left:20px;font-size:13.5px;color:var(--ink-soft)}
.wa-steps li{margin:3px 0}
.wa-practice{margin-top:10px;padding-top:6px;border-top:1px solid var(--line)}
.wa-practice .st-note{margin-bottom:6px}
.wa-input{flex:1 1 180px;font:14px/1.3 var(--font-mono);color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:6px;padding:7px 9px;min-width:0}
.wa-input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.wa-kind{margin-bottom:8px}
.wa-kind b{font-size:13.5px;color:var(--ink)}
.wa-kind .st-model{margin:3px 0}

.wa-rule{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:4px 8px;padding:6px 10px;margin:5px 0;line-height:1.35;border-radius:6px;border:1px solid var(--line);background:var(--panel-2);font-size:13px;color:var(--ink-soft);cursor:pointer}
.wa-rule input{width:18px;height:18px;accent-color:var(--accent)}
.wa-rule i{width:16px;height:16px;border-radius:4px}
.wa-rule b{color:var(--ink)}
.wa-rule em{font:700 10.5px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.05em;font-style:normal;padding:3px 6px;border-radius:3px}
.wa-rule.wins{border-color:var(--ok);background:var(--ok-tint)}
.wa-rule.wins em{background:var(--ok);color:#fff}
.wa-src{color:var(--muted)}
.wa-rule.over .wa-src{text-decoration:line-through}
.wa-rule.over em{background:var(--panel);color:var(--muted)}
.wa-rule.off{opacity:.55}
.wa-rule.off em{color:var(--muted)}
.wa-cascade-pre{max-height:none}
.wa-cascade-prev{overflow:auto}
.wa-cascade-prev .wa-browser{flex:1 1 150px;min-height:110px;max-height:190px}
.wa-verdict{flex:none}
.wa-verdict{margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);font-size:14px;line-height:1.5;color:var(--ink-soft)}
.wa-verdict b{color:var(--ink)}

/* laptops: the explanation views use two columns, the third panel under the second */
@media (min-width:901px) and (max-width:1250px){
  .wa-explain{grid-template-columns:minmax(250px,300px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  .wa-explain > .wa-side{grid-row:1 / span 2}
  .wa-tasks{grid-template-columns:minmax(230px,270px) minmax(0,1fr)}
}
/* tablets and phones: everything stacks, the page scrolls */
@media (max-width:900px){
  .wa-tasks,.wa-explain{display:flex;flex-direction:column}
  .wa-code{display:flex;flex-direction:column}
  .wa-task .st-scroll,.wa-explain .st-scroll{overflow:visible;flex:none}
  .wa-ed{height:300px}
  .wa-preview{height:440px}
  .wa-layer-prev,.wa-cascade-prev{min-height:0}
  .wa-layer-prev .wa-browser{height:300px;flex:none}
  .wa-file{min-height:40px}
  .wa-from{min-height:36px;min-width:52px}
  .wa-tree li{min-height:42px}
  .wa-tab{max-width:55%}
}
@media (max-width:640px){
  .wa-url{display:none}
  .wa-ed{height:260px}
  .wa-rule{grid-template-columns:auto auto 1fr}
  .wa-rule em{grid-column:3}
  table.wa-paths th:nth-child(3),table.wa-paths td:nth-child(3){width:5.5em}
}