/* R07: self-contained educational overlay. Existing scene and layout rules are untouched. */
#incoterms-open{position:absolute;right:0;top:calc(100% + .625rem);min-height:44px;padding:.65rem 1rem;border:1px solid currentColor;border-radius:0;background:#111;color:#fff;font:600 .75rem/1.3 Arial,Helvetica,sans-serif;letter-spacing:0;white-space:nowrap;cursor:pointer;z-index:7}
#incoterms-open[aria-expanded=true]{border-color:#ff7737;color:#ffb28d}
/* R10: keep desktop actions in distinct rows at short viewport heights.
   The 44px trade trigger belongs to the header; reserve its space beside
   the preview badge instead of letting it overlap the freight Pause button. */
@media(min-width:901px){
 header #incoterms-open{top:50%;transform:translateY(-50%)}
 header .preview-tag{margin-right:10rem}
}
#incoterms-open:focus-visible,#incoterms-panel :focus-visible{outline:3px solid #ff9a68;outline-offset:3px}
#incoterms-panel{position:fixed;top:9.5rem;right:4%;bottom:max(9.5rem,env(safe-area-inset-bottom));width:min(25rem,90vw);box-sizing:border-box;z-index:20;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-padding-block:5rem 1rem;touch-action:pan-y;background:#111;color:#f7f7f7;border:1px solid #777;border-top:3px solid #ff5500;box-shadow:0 12px 36px #0005;isolation:isolate;font:400 .8125rem/1.5 Arial,Helvetica,sans-serif;text-align:left;color-scheme:dark}
#incoterms-panel[hidden]{display:none!important}
#incoterms-panel *{box-sizing:border-box}
#incoterms-panel .incoterms-heading{position:sticky;top:0;z-index:1;display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding:.625rem 1rem;background:#111;border-bottom:1px solid #ffffff35}
#incoterms-panel h2{margin:0;font:700 1.0625rem/1.25 Arial,Helvetica,sans-serif;letter-spacing:-.015em}
#incoterms-panel h3{margin:0 0 .5rem;font:700 .875rem/1.4 Arial,Helvetica,sans-serif;letter-spacing:0}
#incoterms-panel button{min-width:44px;min-height:44px;padding:.65rem .75rem;border:1px solid #ffffff80;border-radius:0;background:#111;color:#fff;font:600 .75rem/1.3 Arial,Helvetica,sans-serif;cursor:pointer}
#incoterms-panel .incoterms-content{padding:1rem}
#incoterms-panel p{margin:0 0 1rem;max-width:none;font-size:inherit;line-height:inherit;overflow-wrap:anywhere}
#incoterms-panel .incoterms-selection{display:grid;gap:1rem;margin:1.25rem 0}
#incoterms-panel .incoterms-field[hidden]{display:none!important}
#incoterms-panel label{display:block;margin:0 0 .375rem;font-weight:700;font-size:.8125rem;color:#fff}
#incoterms-panel input,#incoterms-panel select{display:block;width:100%;max-width:100%;min-width:0;min-height:44px;padding:.65rem .625rem;border:1px solid #888;border-radius:0;background:#202020;color:#fff;font:400 .875rem/1.3 Arial,Helvetica,sans-serif;letter-spacing:0}
#incoterms-panel select{padding-right:1.75rem}
#incoterms-panel input[aria-invalid=true],#incoterms-panel select[aria-invalid=true]{border:2px solid #ffb28d}
#incoterms-panel .incoterms-help{margin:.375rem 0 0;font-size:.75rem;line-height:1.5;color:#c8cbd0}
#incoterms-panel #incoterm-validation{margin:0 0 1rem;padding:.75rem;border-left:3px solid #ff9a68;background:#291d17;color:#ffd7c2;font-size:.8125rem}
#incoterms-panel #incoterm-validation[hidden]{display:none!important}
#incoterms-panel .incoterms-risk{padding:1rem 0;border-top:1px solid #ffffff35;border-bottom:1px solid #ffffff35;margin:1rem 0}
#incoterms-panel #incoterm-risk-current{font-size:1.125rem;font-weight:700;line-height:1.3;margin:0}
#incoterms-panel .incoterms-risk[data-party=seller] #incoterm-risk-current,#incoterms-panel .incoterms-risk[data-party=buyer] #incoterm-risk-current{color:#ffb28d}
#incoterms-panel .incoterms-responsibilities{display:block;margin:0 0 1.25rem}
#incoterms-panel .incoterms-responsibilities>div{display:block;padding:.75rem 0;border-bottom:1px solid #ffffff24}
#incoterms-panel dt{font:700 .75rem/1.4 Arial,Helvetica,sans-serif;color:#c8cbd0;margin:0 0 .25rem}
#incoterms-panel dd{margin:0;text-align:left;font-size:.8125rem;line-height:1.5;color:#fff;overflow-wrap:anywhere}
#incoterms-panel .incoterms-journey{margin:1.25rem 0}
#incoterms-panel #incoterm-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem;margin:0;padding:0;list-style:none;counter-reset:incoterm-stage}
#incoterms-panel #incoterm-stages li{counter-increment:incoterm-stage;display:block;border:1px solid #ffffff35;padding:.45rem .375rem;font-size:.6875rem;line-height:1.35;color:#c8cbd0;overflow-wrap:anywhere}
#incoterms-panel #incoterm-stages li:before{content:counter(incoterm-stage,decimal-leading-zero) ' ';color:inherit;font-weight:700}
#incoterms-panel #incoterm-stages li[aria-current=step]{border:2px solid #ff9a68;padding:calc(.45rem - 1px) calc(.375rem - 1px);color:#fff;font-weight:700}
#incoterms-panel .incoterms-notices{padding:0 0 0 1.125rem;margin:1rem 0;color:#c8cbd0;font-size:.75rem;line-height:1.5}
#incoterms-panel .incoterms-notices li{margin:.5rem 0}
#incoterms-panel .incoterms-summary{font-size:.75rem;color:#c8cbd0}
#incoterms-panel .incoterms-education{padding-top:1rem;border-top:1px solid #ffffff35;font-size:.75rem;color:#d1d3d7}
#incoterms-panel .incoterms-sources{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
#incoterms-panel a{display:inline-flex;align-items:center;min-height:44px;color:#ffb28d;text-decoration:underline;text-underline-offset:3px;font-size:.75rem;line-height:1.4;overflow-wrap:anywhere}
#incoterms-panel .incoterms-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){
 #incoterms-open{top:calc(100% + .5rem);padding:.6rem .75rem;font-size:.6875rem}
 /* R07A: reserve the existing right-side scene badge. The freight tone starts
    before its caption reveals during the dive, and reverses before Hero. */
 body[data-scene-tone=light] #incoterms-open,body[data-scene-tone=ocean] #incoterms-open{left:0;right:auto}
 #incoterms-panel{top:8rem;right:5%;bottom:max(9rem,env(safe-area-inset-bottom));width:90vw}
 #incoterms-panel input,#incoterms-panel select{font-size:1rem}
}
/* R11B: in short landscape, the immersive chapter now begins directly below
   the 66px header. Keep the 44px Incoterms trigger inside that header's free
   horizontal space so it cannot cover the chapter heading or its copy. */
@media(min-width:600px) and (max-width:900px) and (orientation:landscape){
 header #incoterms-open,
 body[data-scene-tone=light] header #incoterms-open,
 body[data-scene-tone=ocean] header #incoterms-open{
  position:static;flex:0 0 auto;
  inset:auto;left:auto;right:auto;top:auto;
  transform:none;margin:0;
 }
}
@media(max-width:360px){
 #incoterms-panel .incoterms-heading{padding:.5rem .75rem;gap:.5rem}
 #incoterms-panel .incoterms-content{padding:.875rem .75rem}
 #incoterms-panel h2{font-size:1rem}
}
@media(max-height:500px){
 #incoterms-panel{top:.5rem;bottom:8rem;right:2%;width:min(25rem,90vw)}
}
@media(forced-colors:active){
 #incoterms-open,#incoterms-panel,#incoterms-panel .incoterms-heading,#incoterms-panel button,#incoterms-panel input,#incoterms-panel select{background:Canvas;color:CanvasText;border-color:CanvasText}
 #incoterms-panel #incoterm-stages li[aria-current=step],#incoterms-panel input[aria-invalid=true],#incoterms-panel select[aria-invalid=true]{border-color:Highlight}
}