@import url('./theme-tokens.css');

/* Same handbook, with the full working width reserved for the model. */
:root{--accent:var(--action);--surface:var(--page);--lab-chrome:148px;background:var(--paper);font-family:'DM Sans',Arial,sans-serif}
body{background:var(--paper);color:var(--ink)}
.topbar{height:100px;position:relative;isolation:isolate;overflow:hidden;gap:30px;padding:0 30px;border:0;border-bottom:4px solid #b28d5c;background:var(--cover);color:#f7f1e2;box-shadow:0 3px 0 #e5e0d0}
.topbar:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#1b2724 8%,#1b2724ed 34%,#1b272411 100%),url('workshop-cover.jpg') right 49%/900px auto no-repeat;opacity:.85}
.topbar:after{content:'';position:absolute;inset:8px;pointer-events:none;border:1px solid #d7bc7f26;border-radius:2px}
.brand{font-size:28px;letter-spacing:-.8px;color:#fcf8eb;flex-shrink:0}
.brand b{display:grid;place-items:center;width:42px;height:44px;padding:0;color:#e1bd8e;background:transparent;border:1px solid #bfa17675;box-shadow:inset 0 0 0 4px #1c2825;border-radius:3px;font-size:20px}
.lab-label{display:block;margin-right:auto;border-left:1px solid #c9b28c48;padding-left:26px;color:#d7b686;font-size:10px;letter-spacing:2px}
.lab-label strong{display:block;margin-top:7px;color:#f0ede1;font-size:16px;letter-spacing:.3px;font-weight:400}
.lab-edition{color:#d6bc92;font-size:11px;letter-spacing:1.2px;white-space:nowrap;align-self:flex-start;margin-top:26px}
.motion-toggle{position:absolute;right:28px;bottom:12px;border:0;background:#192720bd;color:#d6cfb8;font-size:11px;padding:5px 8px;z-index:1}
.motion-toggle:hover{background:#2b3b30;color:#fff5d6}
.lab-nav{min-height:48px;display:flex;align-items:stretch;gap:6px;padding:5px 24px;background:var(--cover);border-bottom:1px solid #a9956b;box-shadow:0 3px 0 #ded8c6}
.lab-nav a{display:flex;align-items:center;gap:10px;padding:8px 14px;color:#d9ddcf;font-size:14px;line-height:1.3;text-decoration:none;border-radius:3px}
.lab-nav small{font:11px/1.3 monospace;color:#a7b398}
.lab-nav a:hover{background:#ffffff10;color:#fff7e7}
.lab-nav a[aria-current=page]{background:#eddfc3;color:#233329;box-shadow:inset 0 -2px #b58c51}
.lab-nav a[aria-current=page] small{color:#88703f}
.workbench{min-height:calc(100dvh - var(--lab-chrome));padding-top:3px}
.stage{height:calc(100dvh - var(--lab-chrome));min-height:620px;background-color:var(--paper);background-image:radial-gradient(ellipse at 50% 45%,#fffef9bb,transparent 75%),linear-gradient(#627b6510 1px,transparent 1px),linear-gradient(90deg,#627b6510 1px,transparent 1px);background-size:auto,28px 28px,28px 28px}
.heading{padding-left:49px}
.heading:before{content:'04';position:absolute;left:0;top:0;width:34px;height:48px;padding-top:4px;text-align:center;font:500 26px/1.3 'Barlow Condensed',sans-serif;color:#f8ebcd;background:#3f563d;border-top:3px solid #b18c54;clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%)}
.heading .eyebrow{color:#8b6a42;font-size:11px;letter-spacing:1.7px}
h1,.part-detail h3{color:#263b2f}
.inspector{max-height:calc(100dvh - var(--lab-chrome));min-height:620px;background:linear-gradient(90deg,#e9e4d480,transparent 18px),var(--page);border-left:3px solid #c1ac84;box-shadow:inset 4px 0 #f9f6eb,inset 6px 0 #e5dfcd;scrollbar-color:#abb197 #f3f1e9}
.section-title{border-bottom:1px solid var(--line);padding-bottom:13px}
.section-title h2{color:#354b37;font-size:15px}
.part-tag{color:#8b6a42;font-size:11px}
.part-detail p,.cycle-section p,.model-note p{color:#647057}
button,select{background:#fffdf6;color:#3a5741;border-color:#cac8b6;box-shadow:0 2px 0 #e0ddcd}
button:hover{background:#f9f2e3;border-color:#a69573}
button.primary,.view-tools button.primary{background:var(--action);border-color:var(--action);color:#fdf4de;box-shadow:0 3px 0 #1c3625}
button.primary:hover{background:#456248}
button[aria-pressed=true]:not(.primary),.cycle-track button.active,#showEngine,.study-phases button[aria-pressed=true]{background:var(--cover);color:#f8edcf;border-color:var(--cover)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,#viewport:focus-visible{outline-color:#b4884a}
.view-tools button,.camera-presets button{background:#fffdf6ec}
.engine-controls,.explosion-control,.focus-cycle{background:#fffef9f2;border:1px solid #d9d7c9;border-left:3px solid #c1ac84;border-radius:3px 8px 8px 3px;box-shadow:0 3px 0 #e5dfcd,0 7px 18px #2a332809}
.engine-controls .range-label,.angle-row,.explosion-control label{color:#42543c}
.explosion-control output{color:#80623b}
.explosion-track:after{background:#7a8c65}
#explode::-webkit-slider-runnable-track{background:linear-gradient(to right,#789168 0 .9901%,#d9dccb .9901% 100%)}
#explode::-moz-range-track{background:linear-gradient(to right,#789168 0 .9901%,#d9dccb .9901% 100%)}
.focus-switch{background:#e5e8d8}
.focus-switch button{box-shadow:none}
.focus-bar select{background:#fffdf6ed}
.cycle-track button,.firing-order button,.study-phases button{background:#e9eddd;color:#4b6144;box-shadow:none}
.firing-order button.firing{background:var(--action);color:#fff8e7}
.hover-label{background:var(--cover);color:#f8edcf}
.loading,.load-error{background:var(--page);border-color:var(--line)}
.model-note a{color:#426443;text-underline-offset:3px}
.flow-label:not(.flow-active){background:#fffdf6ed;color:#66735c;border-color:#d6d7c5}
.skip-link{position:fixed;top:8px;left:8px;z-index:20;padding:12px;background:var(--page);color:var(--ink);transform:translateY(-160%)}
.skip-link:focus{transform:none}
@media(min-width:801px) and (max-width:1100px){.topbar{gap:20px}.lab-edition{display:none}.view-tools{top:140px}.camera-presets{top:140px}}
@media(min-width:801px) and (max-width:950px){.camera-presets{top:192px}.stage,.inspector{min-height:750px}.stage-hint{left:244px;right:16px;bottom:150px;transform:none;white-space:normal;text-align:center}}
@media(max-width:800px){
 :root{--lab-chrome:158px}
 .topbar{height:76px;padding:0 18px;gap:16px;justify-content:flex-start}
 .brand{font-size:23px;gap:8px}.brand b{width:32px;height:34px;font-size:17px}
 .lab-label,.lab-edition{display:none}.motion-toggle{right:15px;bottom:10px;font-size:10px}
 .lab-nav{display:grid;grid-template-columns:1fr 1fr;padding:6px 10px;gap:4px}
 .lab-nav a{font-size:13px;min-height:34px;padding:7px 9px;gap:8px}.lab-nav small{font-size:10px}
 .stage{height:780px;min-height:680px;max-height:none}
 .inspector{min-height:0;max-height:none;border-left:0;border-top:3px solid #c1ac84;box-shadow:inset 0 4px #f9f6eb}
 .heading{padding-left:40px}.heading:before{width:28px;height:41px;font-size:22px}
 h1{font-size:2.6rem}h1 span{font-size:1.6rem}
}
@media(max-width:540px){
 .topbar{height:72px}.brand{font-size:22px}.motion-toggle{right:12px;bottom:8px;font-size:10px}
 .stage{min-height:720px}.heading{left:14px}.heading .eyebrow{font-size:10px}h1{font-size:2.3rem}h1 span{font-size:1.45rem}
 .view-tools{left:14px;top:121px}.camera-presets{top:165px;right:14px}
 .view-tools button,.camera-presets button{font-size:12px}
 .heading p{font-size:11px}.heading p span{padding:0 2px}
 body[data-study=cylinder] .heading,body[data-study=bank] .heading{padding-left:0}
 body[data-study=cylinder] .heading:before,body[data-study=bank] .heading:before{display:none}
}
@media(prefers-reduced-motion:no-preference){
 .lab-nav a,button{transition:background .18s,border-color .18s,color .18s}
}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important}

/* Motor selection belongs to the workbench chrome, outside the camera viewport. */
:root{--lab-chrome:234px}
.engine-picker{display:flex;align-items:center;gap:28px;padding:12px 30px;background:#ede8d9;border-bottom:1px solid #c1ac84;min-height:86px}
.engine-picker-label{min-width:156px}.engine-picker-label strong{display:block;font-size:14px;color:#354b37}.engine-picker-label span{display:block;margin-top:5px;font-size:11px;color:#6c715e}
.engine-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:1080px;width:100%}
.engine-options button{display:flex;align-items:center;gap:13px;min-height:58px;padding:8px 15px;text-align:left;border-radius:4px;transition:background .15s}
.engine-options button>b{font:600 27px/1 'Barlow Condensed',Arial,sans-serif;min-width:40px}
.engine-options button>span{font-size:12px;line-height:1.25}.engine-options small{display:block;margin-top:5px;font-size:10px;opacity:.76;letter-spacing:.5px}
.engine-options button[aria-pressed=true]{box-shadow:inset 0 -3px #c2a16c,0 2px #d0c6ae}
.engine-options button:disabled{cursor:wait;opacity:.6}
body[data-switching=true] .stage:after{content:'Bygger motormodellen …';position:absolute;inset:0;z-index:15;display:grid;place-items:center;background:#f3f1e9c9;color:#354b37;font-weight:600}
.heading h1 b{font-weight:inherit}
.engine-reference p{font-size:12px;line-height:1.55;color:#637058;margin:12px 0 0}.engine-reference #engineContext{color:#86663d;font-size:11px;font-weight:600}
.engine-reference small{display:block;color:#78816a;font-size:10px;line-height:1.5;margin-top:9px}
.firing-order{display:flex;flex-wrap:wrap;gap:5px}.firing-order button{flex:1 0 30px;max-width:45px}
@media(max-width:1100px){.engine-picker{padding:10px 18px;gap:16px}.engine-picker-label{min-width:125px}.engine-options button{padding:8px;gap:6px}.engine-options button>b{font-size:24px;min-width:34px}}
@media(max-width:800px){.engine-picker{display:block;padding:12px 14px}.engine-picker-label{display:flex;gap:12px;align-items:baseline;margin-bottom:10px}.engine-picker-label span{margin:0}.engine-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.engine-options button{padding:10px 13px;min-height:57px;gap:12px}.engine-options button>span{font-size:12px}}
.engine-picker{display:block;padding:10px 26px;min-height:124px}.engine-picker-top{display:flex;align-items:center;gap:20px;margin-bottom:9px}.engine-picker-label{min-width:156px}.engine-family-tabs{display:flex;gap:6px}.engine-family-tabs button{padding:8px 12px;min-height:34px;font-size:12px}.engine-picker select{margin-left:auto;max-width:370px;width:40%;padding:8px;font-size:12px;min-height:36px}.engine-options{max-width:none}.engine-options button{min-height:48px;padding:6px 13px}.engine-options button[hidden]{display:none}.engine-options.inline-options{grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}.inline-options button{display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:center;padding:5px;min-height:47px}.inline-options button>b{font-size:22px;min-width:0}.inline-options button>small{margin:0;font-size:9px;letter-spacing:.2px}
:root{--lab-chrome:272px}
@media(max-width:1100px){.engine-picker{padding:10px 18px}.engine-picker-top{gap:10px}.engine-picker-label{min-width:120px}.engine-picker-label span{font-size:10px}.engine-family-tabs button{padding:8px}.engine-picker select{width:36%}}
@media(max-width:800px){.engine-picker{padding:10px 14px}.engine-picker-top{display:grid;grid-template-columns:1fr auto;gap:8px}.engine-picker-label{display:block;margin:0}.engine-picker-label span{margin-top:3px}.engine-picker select{grid-column:1/-1;margin:0;max-width:none;width:100%}.engine-options.inline-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.engine-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.engine-options:not(.inline-options) button{flex-direction:column;text-align:center;gap:3px;padding:5px}.engine-options:not(.inline-options) button>span{font-size:9px}.engine-options:not(.inline-options) small{display:none}.heading h1{max-width:calc(100% - 16px)}h1 span{font-size:1.3rem}}
.engine-options.rotary-options{grid-template-columns:repeat(2,minmax(0,1fr));max-width:850px}.chamber-picker{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;font-size:12px}.chamber-picker select{width:auto}.chamber-picker[hidden]{display:none}body[data-layout=rotary] .heading h1 b{font-size:.75em}body[data-layout=rotary] .focus-bar{flex-wrap:wrap}body[data-layout=rotary] .focus-bar select{margin-left:0}body[data-layout=rotary] .focus-bar #exitFocus{margin-left:auto}
@media(max-width:540px){body[data-layout=rotary] .heading{right:48px}body[data-layout=rotary] .heading h1{font-size:28px;line-height:1.1;max-width:100%}body[data-layout=rotary] .heading h1 b{font-size:.9em}body[data-layout=rotary] .heading h1 span{font-size:18px}}
@media(max-width:540px){.engine-picker-top{grid-template-columns:1fr}.engine-picker-label{display:flex;justify-content:space-between}.engine-family-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.engine-options.rotary-options button{flex-direction:row;text-align:left;gap:10px;padding:8px 12px}.engine-options.rotary-options button>span{font-size:12px}.engine-options.rotary-options button small{display:block}body[data-layout=rotary] .focus-bar{column-gap:5px;row-gap:4px}body[data-layout=rotary] .focus-bar .focus-switch{width:100%}body[data-layout=rotary] .focus-bar select{font-size:11px;padding:8px 18px 8px 6px}body[data-layout=rotary] .focus-bar #exitFocus{font-size:11px;padding:5px 0}}

/* Give the engine title a stable width instead of a shrinking intrinsic box. */
.heading{right:22px;width:auto}.heading h1{max-width:none}
@media(min-width:1101px){.heading{right:340px}}
@media(max-width:800px){.heading h1{font-size:2.3rem;line-height:1.15}.heading h1 span{font-size:1.3rem}}
.engine-picker-top{flex-wrap:wrap}.engine-family-tabs{flex-wrap:wrap}.engine-picker-label{min-width:140px}.engine-options.compact-options{grid-template-columns:repeat(5,minmax(0,1fr))}.compact-options button>b{font-size:24px}.compact-options button>span{font-size:11px}
@media(max-width:1100px){.engine-picker select{width:100%;max-width:none}.engine-picker-top{column-gap:14px}}
@media(max-width:800px){.engine-picker-top{display:grid;grid-template-columns:1fr}.engine-family-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.engine-options.compact-options{grid-template-columns:repeat(2,minmax(0,1fr))}.engine-options.compact-options button{flex-direction:row;text-align:left;gap:9px;padding:9px}.engine-options.compact-options button>span{font-size:11px}.compact-options button>b{font-size:22px;min-width:38px}.engine-options.compact-options small{display:block}}
.engine-options.compact-options{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}@media(max-width:800px){.engine-options.compact-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.transmission-section[hidden]{display:none}.transmission-section>label{display:block;font-size:12px;margin:12px 0 6px}.gear-controls{display:grid;grid-template-columns:42px 1fr 42px;gap:7px}.gear-controls button{font-size:20px}.gear-controls select{min-height:40px;margin:0}.transmission-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.transmission-actions button{font-size:11px;padding:9px}.transmission-section p{font-size:12px;line-height:1.5;margin:10px 0}.transmission-section .transmission-note{font-size:10px;color:#73816b}#gearStatus{font-weight:600;color:#354b37}#gearSpeed{color:#86663d;font-variant-numeric:tabular-nums}body[data-study=gearbox] .focus-switch{display:none}body[data-study=gearbox] #focusChamberSelect{display:none}

.engine-data-link{display:block;margin:12px 0;padding:10px;border:1px solid #b5aa8b;border-radius:4px;color:#24392e;background:#f3ecd8;font-weight:700;text-decoration:none}.engine-data-link:hover{background:#e3d5b4}
@media(prefers-reduced-motion:no-preference){.workbench{animation:model-page-arrive .28s ease both}::view-transition-old(root){animation:model-page-away .18s ease both}::view-transition-new(root){animation:model-page-arrive .28s ease both}}
@keyframes model-page-away{to{opacity:0}}@keyframes model-page-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}