/* Workshop components only. Page typography, hero, headings, TOC, tables,
 * footnotes and scrolling come from the shared include/ stylesheets. */
.workshop-links { display:flex; flex-wrap:wrap; gap:12px 28px; margin:0 0 36px; color:var(--mech-link); font-size:14px; }
/* A photographic crop and warm color treatment, with no generated scenery. */
.hero-visual .mech-image[src="assets/pittsburgh-hero.jpg"] {
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:50% 50%;
  filter:saturate(1.22) contrast(1.07) brightness(1.04) sepia(.06);
}
.hero-visual .mech-hero-img:has(img[src="assets/pittsburgh-hero.jpg"]) { min-height:0; }
/* Keep the article's shared gutters while the black footer spans its pane. */
.workshop-footer-shell { --workshop-page-gutter:32px; flex-direction:column; align-items:center; justify-content:flex-start; padding-inline:0; }
.workshop-footer-shell > .content-column { flex:0 0 auto; }
.workshop-footer-shell > .content-column,
.workshop-footer-shell > .footer > .footer-inner { width:min(calc(100% - 2 * var(--workshop-page-gutter)), var(--content-max-width)); }
.workshop-footer-shell > .footer { flex:0 0 auto; width:100%; background:var(--mech-output-bg); }
.workshop-footer-shell > .footer > .footer-inner { padding-inline:0; }
.footer-photo-credit { color:var(--mech-text-muted); font-size:12px; }
.footer-photo-credit:hover { color:var(--mech-link); }
.footer-photo-credit:focus-visible { outline:2px solid var(--mech-focus); outline-offset:4px; }
/* The REPL can narrow the article independently of the browser viewport. */
@container (max-width:900px) {
  .workshop-footer-shell .footer-main { grid-template-columns:140px minmax(0,1fr); gap:24px; }
  .workshop-footer-shell .footer-robot { grid-column:1; grid-row:1; width:140px; }
  .workshop-footer-shell .footer-robot img { margin:0; max-width:140px; }
  .workshop-footer-shell .footer-release { grid-column:2; grid-row:1; margin:0; min-width:0; }
  .workshop-footer-shell .footer-links { grid-column:1/-1; grid-row:2; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
}
@container (max-width:420px) {
  .workshop-footer-shell .footer-main { grid-template-columns:minmax(0,1fr); }
  .workshop-footer-shell .footer-robot { display:none; }
  .workshop-footer-shell .footer-release { grid-column:1; }
  .workshop-footer-shell .footer-links { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:900px) {
  .workshop-footer-shell { --workshop-page-gutter:18px; }
}
.demo-launcher { margin:24px 0; padding:18px 22px; border-left:3px solid var(--accent-secondary-teal); background:var(--mech-panel); }
.demo-launcher-actions { display:flex; flex-wrap:wrap; gap:12px; }
.demo-launcher button { font:inherit; color:var(--mech-brand); background:var(--mech-panel-raised); border:1px solid var(--mech-border); border-radius:5px; padding:9px 15px; cursor:pointer; }
.demo-launcher button:focus-visible { outline:2px solid var(--mech-brand); outline-offset:3px; }
.mech-output-region-application { container-type:inline-size; border:1px solid var(--mech-border); border-radius:10px; outline:0; box-shadow:none; }
/* Match the blog's neutral output frame, not the pink namespace pill. */
.workshop-footer-shell .mech-block-output { border:1px solid var(--mech-border); }
.mech-output-region-application .live-demo { margin:0; padding:20px; border:0; border-radius:inherit; font-family:var(--font-family, sans-serif); }
.mech-output-region-application .demo-heading .kicker { margin:0 0 8px; font-size:12px; }
.mech-output-region-application .demo-heading h3 { margin:0 0 12px; }
.mech-output-region-application .telemetry pre { font-size:10px; line-height:1.6; }
[data-mech-output-fullscreen-active="true"] .mech-output-region-application .live-demo { padding-top:44px; }
.source-card { background:var(--mech-code-bg); border:1px solid var(--mech-border); border-radius:3px; margin:24px 0; padding:20px; overflow:auto; font:14px/1.65 'Fira Code',monospace; box-shadow:var(--mech-shadow-content-block); }
.source-card pre { margin:0; font:inherit; white-space:pre; }
.source-card .mech-code-block { padding:0; border:0; margin:0; box-shadow:none; }
.source-card .mech-paragraph,.source-card .mech-intro { margin:0; }
.source-card .mechdown-section { padding:0; }
.source-card .source-document-title { margin:4px 0 20px; font-size:18px; }
.source-card .mechdown-section > :is(h2,h3) { margin:18px 0 8px; padding:0; font-size:16px; }
.source-card .mechdown-section > :is(h2,h3)::before { content:none; }
.source-card .mech-clickable { cursor:text; }
.source-label { font:12px/1.5 'Fira Code',monospace; color:var(--mech-text-secondary); margin-bottom:15px; }
.source-label a { color:var(--mech-link); }
.code-comment { color:var(--mech-syntax-comment); }
.code-keyword { color:var(--mech-syntax-operator); }
.code-string { color:var(--mech-syntax-function); }
.code-number { color:var(--mech-syntax-literal); }
.workshop-figure { margin:32px 0; }
.workshop-figure svg { width:100%; height:auto; display:block; }
.workshop-figure .figure-frame { width:100%; min-width:0; max-width:100%; border:1px solid var(--mech-border); padding:14px; background:var(--mech-canvas); }
.workshop-figure .chart-mobile { display:none; }
[data-workshop-kernel-output] > a { font-size:12px; color:var(--mech-link); }
[data-workshop-kernel-output] > pre { margin:12px 0 0; font:inherit; }
.workshop-figure figcaption { margin-top:12px; }
html[data-mech-shim="blog"] [data-mechdown] .workshop-figure .mech-figure-caption { width:100%; max-width:100%; }
.live-demo { margin:32px 0; padding:22px; border:1px solid var(--mech-border); border-top:3px solid var(--accent-secondary-teal); background:var(--mech-panel); border-radius:4px; }
.live-demo button,.live-demo select { background:var(--mech-panel-raised); color:var(--mech-text-body); border:1px solid var(--mech-border); border-radius:4px; padding:8px 13px; font:inherit; font-size:13px; cursor:pointer; }
.live-demo :is(button,select):enabled:hover { border-color:var(--mech-brand); }
.live-demo :is(button,select,input,summary):focus-visible { outline:2px solid var(--mech-brand); outline-offset:4px; }
.live-demo #run { color:var(--mech-canvas); background:var(--mech-brand); border-color:var(--mech-brand); }
.live-demo #inject { color:var(--mech-warning); }
.live-demo :is(button,select):disabled,
.live-demo :is(#run,#inject):disabled { color:var(--mech-text-muted); background:var(--mech-panel); border-color:var(--mech-border); opacity:.45; cursor:not-allowed; box-shadow:none; }
.live-demo input:disabled { opacity:.4; cursor:not-allowed; }
.demo-heading { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.demo-heading h3 { margin:0 0 15px; font-size:20px; }
.demo-heading [role=status] { font-size:12px; max-width:260px; color:var(--accent-secondary-teal-soft); }
.demo-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:end; padding-bottom:20px; border-bottom:1px solid var(--mech-border); }
.live-demo label { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--mech-text-secondary); }
.demo-body { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:20px; padding:22px 0; }
.scene-wrap { align-self:start; background:var(--mech-code-bg); border:1px solid var(--mech-border); }
/* The snapshot's width/height attributes describe its coordinate system.
 * Scale both dimensions together to fill the available scene column. */
.live-demo .scene-wrap svg { display:block; width:100%; height:auto; max-height:none; min-height:0; }
.live-demo #robot-scene [data-camera-index] { cursor:pointer; }
.live-demo #robot-scene [data-mech-scene-id^="camera-hit-"] { pointer-events:all; stroke:transparent; stroke-width:24px; vector-effect:non-scaling-stroke; }
.live-demo #robot-scene [data-camera-index]:focus-visible { outline:2px solid var(--mech-brand); outline-offset:3px; }
.scene-key { display:flex; flex-wrap:wrap; gap:9px; font-size:10px; line-height:1.6; padding:9px 12px; }
.truth-key { color:#63d6c5; }
.estimate-key { color:var(--mech-logo); }
.scene-key :is(.truth-key,.estimate-key) { position:relative; padding-left:30px; }
.scene-key :is(.truth-key,.estimate-key)::before { content:""; position:absolute; left:0; top:50%; width:24px; border-top:2px solid currentColor; }
.scene-key :is(.truth-key,.estimate-key)::after { content:""; position:absolute; left:8px; top:50%; width:8px; height:8px; border:2px solid currentColor; border-radius:50%; background:var(--mech-code-bg); transform:translateY(-50%); }
.scene-key .estimate-key::before { border-top-style:dotted; border-color:#ad9159; }
.scene-key .estimate-key::after { background:currentColor; }
.ellipse-key { color:var(--mech-syntax-operator); }
.landmark-key { color:var(--accent-secondary-teal-soft); }
.metric { display:flex; justify-content:space-between; gap:10px; flex-direction:column; border-bottom:1px solid var(--mech-border); padding:0 0 8px; margin-bottom:10px; font-size:11px; line-height:1.5; }
.metric output { color:var(--mech-logo); font:18px 'Fira Code',monospace; font-variant-numeric:tabular-nums; }
.telemetry pre { font:11px/1.7 'Fira Code',monospace; color:var(--mech-syntax-context); white-space:pre-wrap; }
.telemetry h4 { font-size:14px; margin:20px 0 9px; }
.live-demo .small { font-size:12px; color:var(--mech-text-secondary); line-height:1.6; }
.sensor-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:end; }
.sensor-controls output { color:var(--mech-logo); float:right; }
.sensor-controls button { grid-column:1/-1; justify-self:start; }
.sensor-controls input { width:100%; accent-color:var(--accent-secondary-teal); }
.behavior-status { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:24px 0; }
.behavior-status [data-state] { padding:6px 16px; border:1px solid var(--mech-border); border-radius:3px; color:var(--mech-text-secondary); font:13px 'Fira Code',monospace; }
.behavior-status [data-state].active { border-color:var(--mech-syntax-operator); color:var(--mech-syntax-variable); background:var(--mech-panel-raised); }
.behavior-status [data-state="fault"].active { border-color:var(--mech-error); color:var(--mech-error); }
.behavior-status p { flex-basis:100%; font-size:12px; margin:0; color:var(--mech-text-secondary); }
.live-demo details { border-top:1px solid var(--mech-border); padding-top:12px; margin-top:20px; font-size:14px; }
.live-demo summary { cursor:pointer; color:var(--mech-link); font-weight:600; margin-bottom:15px; }
.live-demo .error { color:var(--mech-error); border-left:3px solid var(--mech-error); padding:12px; white-space:pre-wrap; font:12px/1.6 'Fira Code',monospace; max-height:250px; overflow:auto; }
.verification { font:12px/1.65 'Fira Code',monospace; white-space:pre-wrap; color:var(--mech-text-secondary); max-height:360px; overflow:auto; }
.verification:empty,[hidden] { display:none!important; }
@container (max-width:720px) {
  .workshop-figure .chart-desktop { display:none; }
  .workshop-figure .chart-mobile { display:block; }
}
@container (max-width:850px) {
  .demo-body { grid-template-columns:1fr; }
  .telemetry { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .telemetry h4,.telemetry pre,.telemetry p { grid-column:1/-1; }
  .telemetry h4,.metric { margin:0; }
  .demo-heading { flex-direction:column; gap:0; }
  .demo-heading [role=status] { margin-bottom:16px; max-width:none; }
}
@container (max-width:520px) {
  .sensor-controls { grid-template-columns:1fr; }
  .demo-controls label { flex:1; min-width:160px; }
  .demo-controls select { width:100%; }
}
@media(max-width:720px) {
  .live-demo { padding:14px; }
  .sensor-controls { grid-template-columns:1fr; }
  .demo-controls label { flex:1; min-width:160px; }
  .demo-controls select { width:100%; }
  .source-card { padding:14px; font-size:12px; }
  .workshop-figure .figure-frame { padding:7px; }
  .workshop-figure .chart-desktop { display:none; }
  .workshop-figure .chart-mobile { display:block; }
  .telemetry .metric output { font-size:16px; }
}