/* Semantic roles shared by every route, dialog and native form control. */
:root,[data-theme=light]{color-scheme:light;--paper:#ffffff;--surface:#ffffff;--surface-alt:#f3f6f3;--hover:#edf3ee;--ink:#25362c;--muted:#59645d;--green:#29694d;--bright:#2e7841;--wash:#eaf2eb;--line:#d3ddd5;--control-line:#7b8e80;--on-primary:#ffffff;--primary-hover:#204f3a;--focus:#006cae;--danger:#a52c26;--warning-bg:#fff4de;--warning-ink:#78480f;--warning-line:#a67532;--error-bg:#fff0ed;--result-bg:#ffffff;--result-ink:#25362c;--result-muted:#59645d;--result-accent:#29694d;--result-line:#cbd5cd;--bar-before:#85898b;--result-danger:#a52c26;--brand-solid:#29694d;--on-brand:#ffffff;--notice-bg:#25362c;--notice-ink:#ffffff;--shadow:#14291c26}
[data-theme=dark]{color-scheme:dark;--paper:#141d19;--surface:#1d2923;--surface-alt:#26382e;--hover:#304438;--ink:#edf3ee;--muted:#b8c7bd;--green:#9fd6b2;--bright:#9fd6b2;--wash:#304737;--line:#43594b;--control-line:#849e8c;--on-primary:#13291b;--primary-hover:#bae5c8;--focus:#8bd0ff;--danger:#ffb7a9;--warning-bg:#3d301c;--warning-ink:#ffda9d;--warning-line:#aa8645;--error-bg:#402923;--result-bg:#22352a;--result-ink:#edf3ee;--result-muted:#bdd0c1;--result-accent:#a6ddb6;--result-line:#536e5a;--bar-before:#9ba7a0;--result-danger:#ffb7a9;--brand-solid:#245b42;--on-brand:#ffffff;--notice-bg:#e1eee4;--notice-ink:#14291c;--shadow:#00000055}
[data-theme=ci]{color-scheme:light;--paper:#edf5e9;--surface:#ffffff;--surface-alt:#e4efdf;--hover:#e4eee1;--ink:#243b2a;--muted:#516759;--green:#29694d;--bright:#2e7841;--wash:#d4e8c9;--line:#c7d6c5;--control-line:#74896f;--on-primary:#ffffff;--primary-hover:#204f3a;--focus:#00659f;--danger:#a02a23;--warning-bg:#fff4de;--warning-ink:#78480f;--warning-line:#a67532;--error-bg:#fff0ed;--result-bg:#29694d;--result-ink:#ffffff;--result-muted:#e0eee3;--result-accent:#e3f5cf;--result-line:#81a58a;--bar-before:#b5cdbb;--result-danger:#ffe2c9;--brand-solid:#29694d;--on-brand:#ffffff;--notice-bg:#253e2d;--notice-ink:#ffffff;--shadow:#1b3d2426}
html{background:var(--paper);color:var(--ink)}body{background:var(--paper)}[hidden]{display:none!important}::selection{background:var(--green);color:var(--on-primary)}*{scrollbar-width:thin;scrollbar-color:var(--control-line) var(--surface-alt)}input,textarea{caret-color:var(--green)}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}a{text-underline-offset:3px}button,input,select,.button{min-height:44px}button{color:var(--ink);background:var(--surface);border-color:var(--control-line)}button:hover,.button:hover{background:var(--hover)}button.primary,.button.primary{color:var(--on-primary);background:var(--green);border-color:var(--green)}button.primary:hover,.button.primary:hover{background:var(--primary-hover)}button.text{background:transparent;color:var(--green)}button.danger{color:var(--danger)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:var(--focus)}input,select,textarea{background:var(--surface);color:var(--ink);border-color:var(--control-line)}.panel,.table-wrap,.list-item,dialog,.sidebar,.topbar{background:var(--surface);color:var(--ink)}th,.wizard-step:disabled{background:var(--surface-alt);color:var(--muted)}tbody tr:hover{background:var(--hover)}.warning{background:var(--warning-bg);color:var(--warning-ink);border-color:var(--warning-line)}.error{background:var(--error-bg);color:var(--danger);border-color:var(--danger)}.wizard-steps{background:var(--surface)}.wizard-step.active{background:var(--surface);color:var(--green)}.active .step-number{background:var(--green);color:var(--on-primary)}.packaging-option[aria-pressed=true]{background:var(--wash);color:var(--green)}.choice-dot,.step-number{border-color:var(--control-line)}.login-story{background:var(--brand-solid);color:var(--on-brand)}.login-story p,.login-story small,.login-story .eyebrow{color:#e0eee3}.login-language{display:flex;align-items:center;justify-content:space-between;gap:20px}.login-language .language button{min-height:44px}.login-box .eyebrow{display:none}dialog{box-shadow:0 16px 60px var(--shadow)}#notice{background:var(--notice-bg);color:var(--notice-ink);box-shadow:0 6px 20px var(--shadow)}.skip{background:var(--surface)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.icon{stroke-width:1.7}.theme-control{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;color:var(--green)}.theme-control>.icon{width:20px;height:20px}.theme-control select{width:118px;min-height:44px;padding:8px 10px;font-size:15px}.topbar .theme-control select{width:112px}.account-control{display:inline-flex;align-items:center;gap:8px;font-size:14px;border-color:var(--line)}.topbar .actions{gap:12px}.topbar .actions .btn-icon{min-width:44px;min-height:44px;font-size:14px}.sidebar-bottom .language button{min-height:44px}.language button[aria-pressed=true]{background:var(--wash)}.nav a[aria-current=page]{background:var(--wash)}
/* Explicit height and appearance keep native WebKit selects touch-sized. */
select{appearance:none;-webkit-appearance:none;height:48px;line-height:1.3;padding-right:34px}.select-wrap{display:block;position:relative;min-width:0}.select-wrap>select{display:block;width:100%}.select-wrap>.icon{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none;color:var(--green)}.theme-control .select-wrap>select{height:44px;min-height:44px;padding-right:30px}.r-part-choice .select-wrap>select{height:44px;min-height:44px}
/* The chosen horizontal workspace leaves the comparison its full width. */
.shell{display:block;min-height:100dvh}.sidebar{position:relative;height:auto;display:flex;flex-direction:row;align-items:center;gap:24px;padding:8px 32px;border:0;border-bottom:1px solid var(--line)}.brand{flex-shrink:0;display:block}.brand img{display:block;width:164px;height:32px;max-height:none;object-fit:cover}.brand p,.sidebar-bottom,.nav-label{display:none}.nav{display:flex;flex-direction:row;min-width:0;flex:1;overflow-x:auto;gap:8px;margin:0;padding:0}.nav a{min-height:44px;font-size:15px;white-space:nowrap;padding:10px 13px}.nav .icon{width:18px;height:18px}.topbar{height:auto;min-height:54px;padding:5px 32px;background:var(--surface);font-size:13px}.topbar .actions{flex-wrap:nowrap}.content{padding:20px 32px;max-width:1320px}.footer-note{margin-top:16px}.wizard-steps{border:0;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:20px}.wizard-step{font-size:16px;min-height:54px}.wizard-step+.wizard-step{border-left:0}.wizard-heading{margin-bottom:16px}.wizard-heading h1{font-size:32px;font-weight:400;letter-spacing:-.6px}.wizard-heading .eyebrow{display:none}.step-3 .wizard-heading{margin-bottom:0;align-items:center}.step-3 .wizard-heading>.actions{flex-shrink:0}.step-3 .wizard-heading .text{display:inline-flex;align-items:center;gap:7px}.step-3 .wizard-heading h1{font-size:31px}.step-3 .wizard-footer{border-top:0;min-height:76px;padding:12px 0;margin:0}.step-3 .wizard-footer .primary{font-size:17px;min-width:170px;justify-content:center;padding:10px 18px;min-height:48px}.step-3 .wizard-footer .actions>button:not(.primary){font-size:16px}.step-3 .result-secondary{border-top:1px solid var(--line);padding-top:6px}.step-3 .disclaimer{padding-top:8px;margin-top:6px}.concept{border-top:1px solid var(--line)}.concept.new{border-top-color:var(--green)}
[data-theme=dark] .brand{background:#fff;padding:4px 8px;border-radius:3px}[data-theme=dark] .brand img{width:148px;height:28px}
@media(max-width:650px){[data-theme=dark] .brand img{width:124px;height:19px}}
@media(max-width:1050px){.sidebar{padding-inline:24px}.topbar{padding-inline:24px}.topbar>span{display:none}.topbar>.actions{width:100%;justify-content:flex-end}.content{padding:16px 24px}.wizard-heading h1{font-size:30px}.step-3 .wizard-heading h1{font-size:29px}.step-3 .wizard-heading>.actions{gap:4px}.step-3 .wizard-heading>.actions button{font-size:14px;padding-inline:10px}.step-3 .wizard-heading>.actions .text span{display:none}.packaging-setup{background:var(--surface)}}
@media(max-width:850px){.sidebar{padding-inline:24px;gap:18px}.brand img{width:144px;height:28px}.nav a{padding-inline:10px;font-size:14px}.topbar{padding-inline:24px}.topbar>.actions{justify-content:space-between}.wizard-step{font-size:14px;min-height:58px;padding-inline:8px;gap:7px}.content{padding-inline:24px}.step-3 .wizard-heading{align-items:flex-start}.step-3 .wizard-heading h1{font-size:29px;max-width:18ch}.step-3 .wizard-heading>.actions{flex-direction:column;align-items:flex-end;gap:2px}.step-3 .wizard-heading>.actions button{min-height:44px}.step-3 .wizard-heading>.actions .text{display:none}}
@media(max-width:650px){.sidebar{padding:10px 16px 6px;display:flex;flex-direction:column;align-items:stretch;gap:8px}.brand img{width:140px;height:27px}.brand{align-self:flex-start}.nav{flex:1}.nav a{font-size:14px;padding:9px 10px}.topbar{padding:5px 16px;min-height:54px}.topbar .actions{gap:8px;justify-content:space-between;flex-wrap:nowrap}.topbar .theme-control{gap:5px}.topbar .theme-control>.icon{display:none}.topbar .theme-control select{width:112px;font-size:14px}.topbar .account-label{display:none}.topbar .account-control{width:44px;padding:10px;justify-content:center}.topbar .btn-icon{gap:5px;padding:8px}.topbar .mode{max-width:100px;font-size:12px}.content{padding:16px}.wizard-step{font-size:11px;min-height:70px;padding:8px 3px;flex-direction:column;justify-content:center;gap:5px}.wizard-heading h1{font-size:28px}.step-3 .wizard-heading{display:block}.step-3 .wizard-heading h1{font-size:28px;max-width:20ch}.step-3 .wizard-heading>.actions{margin-top:8px;align-items:flex-start}.step-3 .wizard-heading>.actions button{font-size:14px}.step-3 .wizard-footer{align-items:stretch;flex-direction:column;gap:10px;padding:20px 0 12px}.step-3 .wizard-footer>div:first-child{align-self:flex-start}.step-3 .wizard-footer .actions{width:100%;justify-content:flex-start}.step-3 .wizard-footer .primary{flex:1;font-size:16px;min-width:0}.result-secondary{gap:4px}.result-secondary>span{margin-left:8px}.result-secondary button{font-size:14px}.login-language{gap:12px}.login-language .theme-control select{width:118px}}

/* Wipak CI uses a clear green result field, framed by lighter brand surfaces. */
[data-theme=ci] .sidebar{background:var(--wash)}
[data-theme=ci] .r-material-pair,[data-theme=ci] .r-equivalents{background:var(--surface-alt)}