.ci-scenario{width:230px;font-size:11px;color:var(--muted);gap:4px}.ci-scenario select{font-size:12px;min-height:36px;padding:6px 8px}.ci-workspace{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;min-height:0}.ci-board{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}.ci-board>header{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);font:11px ui-monospace,monospace;color:var(--muted)}.ci-flow{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;background-image:radial-gradient(var(--line) .7px,transparent .7px);background-size:20px 20px;min-height:0}.learning-workbench .ci-job{display:grid;grid-template-columns:26px 1fr auto;width:min(330px,100%);gap:3px 12px;padding:12px 18px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-height:65px}.ci-job[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}.ci-job strong{font:17px ui-monospace,monospace}.ci-job>span:nth-child(3){font-size:11px;color:var(--muted)}.ci-job small{grid-column:2/-1;font:11px ui-monospace,monospace}.ci-status{grid-row:1/3;font:20px ui-monospace,monospace;color:var(--accent)}.ci-job[data-state=passed] .ci-status{color:var(--good)}.ci-job[data-state=failed] .ci-status,.ci-job[data-state=absent] .ci-status{color:var(--coral)}.ci-job[data-state=absent]{border-style:dashed}.ci-edge{display:flex;gap:12px;align-items:center;color:var(--muted);font:11px ui-monospace,monospace;height:42px}.ci-edge b{font-size:22px;color:var(--accent)}.ci-board-note{padding:12px 18px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.ci-inspector{border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;overflow:hidden}.ci-inspector>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border-bottom:1px solid var(--line)}.ci-inspector>header strong{font:16px ui-monospace,monospace}.ci-inspector nav{display:flex;gap:6px}.ci-inspector nav button{font-size:11px;min-height:30px;padding:4px 9px}.ci-inspector nav button[aria-pressed=true]{border-color:var(--accent);background:var(--tint)}.ci-config,.ci-trace{padding:24px;display:flex;flex-direction:column;justify-content:center;gap:22px;min-height:0}.ci-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ci-fields label{font-size:11px;gap:4px}.ci-fields select{font-size:11px;padding:6px;min-height:34px;width:100%}.ci-config pre,.ci-trace pre{font-size:13px;line-height:1.7;padding:16px;background:var(--tint);border:1px solid var(--line);border-radius:8px}.ci-config>p{font-size:11px;color:var(--muted);margin:0}.ci-trace{margin:0;border:0;background:none}.ci-trace p{font-size:20px;line-height:1.6;margin:0}.ci-trace>a{font-size:11px}.ci-config pre{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:1050px){.ci-workspace{gap:16px}.ci-config,.ci-trace{padding:18px;gap:18px}.ci-config pre,.ci-trace pre{font-size:11px;padding:12px}.ci-trace p{font-size:17px}.ci-board>header{font-size:11px;padding:12px}.ci-inspector>header{padding:10px 14px}.ci-flow{padding:16px}.learning-workbench .ci-job{padding:10px 12px}.ci-job strong{font-size:15px}}
@media(max-width:700px){.ci-scenario{width:115px;flex-shrink:0}.ci-scenario>span{display:none}.ci-scenario select{font-size:11px;padding:5px;min-height:32px}.wb-pipeline .wb-heading h1{font-size:19px}.wb-pipeline .wb-heading .eyebrow{font-size:11px}.ci-workspace{grid-template-columns:1fr;grid-template-rows:130px minmax(0,1fr);gap:10px}.ci-board>header{padding:6px 9px;font-size:11px}.ci-board-note{padding:5px 9px;font-size:11px}.ci-flow{flex-direction:row;gap:8px;padding:8px;align-items:stretch}.ci-edge{display:none}.learning-workbench .ci-job{display:flex;flex-direction:column;gap:2px;align-items:start;justify-content:center;padding:6px;min-height:0;width:33.33%;position:relative}.ci-job strong{font-size:11px}.ci-job .ci-status{position:absolute;right:5px;top:5px;font-size:11px}.ci-job>span:nth-child(3),.ci-job small{font-size:11px}.ci-inspector>header{padding:7px 10px}.ci-inspector>header strong{font-size:12px}.ci-inspector nav button{font-size:11px;min-height:26px;padding:3px 6px}.ci-config,.ci-trace{padding:12px;gap:12px}.ci-fields{gap:8px}.ci-fields label{font-size:11px;gap:3px}.ci-fields select{font-size:11px;min-height:28px;padding:3px 5px}.ci-config pre,.ci-trace pre{font-size:11px;line-height:1.5;padding:10px}.ci-config>p{font-size:11px;line-height:1.4}.ci-trace p{font-size:13px;line-height:1.5}.ci-trace>a{font-size:11px}.wb-pipeline .wb-footer>button{min-height:30px;padding:4px 7px;font-size:11px}}
@media(max-height:650px) and (min-width:701px){.ci-scenario>span{display:none}.ci-scenario select{min-height:30px;font-size:11px}.ci-board>header{padding:6px 10px;font-size:11px}.ci-board-note{padding:6px 10px;font-size:11px}.ci-flow{padding:9px}.learning-workbench .ci-job{min-height:43px;padding:5px 12px;width:min(300px,100%);gap:0 10px}.ci-job strong{font-size:12px}.ci-job small,.ci-job>span:nth-child(3){font-size:11px}.ci-status{font-size:16px}.ci-edge{height:21px;font-size:11px}.ci-edge b{font-size:16px}.ci-inspector>header{padding:5px 10px}.ci-inspector nav button{font-size:11px;min-height:24px;padding:3px 7px}.ci-config,.ci-trace{padding:10px;gap:8px}.ci-fields{gap:5px 10px}.ci-fields label{font-size:11px;gap:2px}.ci-fields select{min-height:25px;font-size:11px;padding:3px 5px}.ci-config pre,.ci-trace pre{padding:7px;font-size:11px;line-height:1.4}.ci-config>p{font-size:11px}.ci-trace p{font-size:13px;line-height:1.5}.ci-trace>a{font-size:11px}.ci-inspector>header strong{font-size:12px}}
@media(max-width:700px) and (max-height:650px){.ci-workspace{grid-template-rows:110px minmax(0,1fr);gap:8px}.ci-board-note{display:none}.ci-config,.ci-trace{padding:9px;gap:8px}.ci-config pre,.ci-trace pre{font-size:11px;line-height:1.4;padding:7px}.ci-fields{gap:5px}.ci-fields select{min-height:26px;font-size:11px}.ci-config>p{font-size:11px}.ci-trace p{font-size:11px;line-height:1.45}.ci-trace>a{font-size:11px}}

@media(max-width:700px){.ci-job>span:nth-child(3),.ci-job small{font-size:11px}.ci-fields label{font-size:11px}.ci-fields select{font-size:11px}.ci-config>p{font-size:11px}.ci-config pre{font-size:11px}}
@media(max-height:650px) and (min-width:701px){.ci-config{padding:8px;gap:5px}.ci-config pre{padding:6px;font-size:11px;line-height:1.3}.ci-config>p{font-size:11px;line-height:1.2}.ci-fields label{line-height:1.3}}

.ci-scenario{min-width:0}.ci-scenario select{min-width:0;width:100%}.ci-code>a{font-size:11px}
@media(max-width:700px){.ci-fields{gap:10px}.ci-fields label{font-size:11px}.ci-fields select{font-size:11px;min-height:32px}.ci-config>p{font-size:11px;line-height:1.5}.ci-config pre{font-size:12px;line-height:1.5;padding:12px}.ci-code>a{font-size:11px}.ci-inspector>header{gap:6px}.ci-inspector nav{gap:4px}.ci-inspector nav button{font-size:11px;padding:3px 5px}}
/* On short, wide viewports the graph and inspector share the available height. */
@media(max-width:700px) and (max-height:450px){.ci-workspace{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:1fr;gap:8px}.ci-flow{flex-direction:column;gap:6px}.learning-workbench .ci-job{width:100%;padding:5px 7px;flex:1}.ci-job small{font-size:11px}.ci-board>header{padding:5px;font-size:11px;gap:4px}.ci-inspector>header{flex-wrap:wrap;gap:5px;padding:6px}.ci-inspector nav{flex:1;justify-content:end}.ci-inspector nav button{font-size:11px;padding:3px 4px;min-height:23px}.ci-config,.ci-trace{padding:8px;gap:6px}.ci-fields{gap:6px}.ci-fields label{font-size:11px;gap:2px}.ci-fields select{min-height:26px;font-size:11px;padding:3px}.ci-config>p{font-size:11px;line-height:1.35}.ci-config pre{padding:7px;font-size:11px;line-height:1.35}.ci-trace p{font-size:11px}.ci-code>a{font-size:11px}}
/* Short portrait phones: the 11 px settings and their note fit the inspector without reaching the footer. */
@media(max-width:700px) and (max-height:650px){.ci-config{padding:8px 10px;gap:6px}.ci-fields{gap:5px 10px}.ci-fields label{line-height:1.25}.ci-config>p{line-height:1.35}}
/* Landscape phones: three jobs and their two needs edges fit the board without clipping the last job. */
@media(max-height:450px) and (min-width:701px){.ci-flow{padding:4px 9px}.learning-workbench .ci-job{min-height:36px;padding:3px 12px}.ci-edge{height:15px}}