/* A stable teaching desk. Yellow always means the next useful interaction. */
body.tutorial-active #first-mate.teaching{position:fixed;z-index:115;left:22px;right:auto;top:108px;bottom:240px;width:350px;max-width:calc(100vw - 44px);max-height:none;min-height:200px;padding:16px;overflow:auto;background:linear-gradient(135deg,#273329fa,#111d17fc);border:1px solid #b39450;box-shadow:0 10px 45px #000b,inset 0 0 0 4px #111b1680;font-size:13px}
body.tutorial-active #first-mate header{top:-16px;padding:5px 0 12px;background:#203025;z-index:6}
body.tutorial-active #first-mate header strong{font-size:17px}
body.tutorial-active #first-mate [data-guidance="collapse"]{display:none}
.tutorial-hold{display:flex;gap:10px;align-items:center;margin-top:13px;padding:10px 12px;border:1px solid #847345;background:#8b733218;color:#f0d28a}
.tutorial-hold>span{font-size:24px;line-height:1}.tutorial-hold strong{font:12px system-ui;display:block}.tutorial-hold small{display:block;color:#c5c7ae;font-size:11px;line-height:1.5;margin-top:3px}
#first-mate.teaching .guidance-tutorial{border:0;padding:0;margin:16px 0 0}
.tutorial-chapter{display:flex;justify-content:space-between;gap:10px;font:11px system-ui;color:#c6b98c}
.tutorial-chapter>span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.tutorial-steps{display:flex;gap:4px;margin-top:9px}.tutorial-steps i{flex:1;height:3px;background:#4e5743}.tutorial-steps i.past{background:#a4ae77}.tutorial-steps i.current{background:#ffe088;box-shadow:0 0 9px #e6c06a70}
#first-mate.teaching .guidance-tutorial h3{font:23px/1.16 Georgia;color:#f0dfb0;margin:16px 0 10px}
#first-mate.teaching .tutorial-instruction{font:13px/1.65 system-ui;margin:0 0 15px;color:#c4cbb4}
.tutorial-state{border-left:3px solid #e5c66c;padding:9px 11px;background:#c5ab4c0e}
.tutorial-state strong{font:600 13px/1.45 system-ui;color:#f4d986;display:block}
#first-mate .tutorial-state p{font:12px/1.55 system-ui;margin:6px 0 0;color:#d0d2bb}
.tutorial-state.answered{border-color:#a4c183;background:#8eaf7220}.tutorial-state.answered strong{color:#d2e2ad}
.tutorial-work{margin:13px 0}.tutorial-work-label{display:flex;justify-content:space-between;gap:8px;color:#e7cf83;font:10px/1.5 system-ui;margin-bottom:7px;font-variant-numeric:tabular-nums}.tutorial-work-label>span:last-child{white-space:nowrap}
.tutorial-progress{height:12px;border:1px solid #a38b47;background:#101710;box-shadow:inset 0 1px 4px #0009;padding:2px;overflow:hidden}
.tutorial-progress>i{display:block;height:100%;background:linear-gradient(90deg,#b58a2b,#ffe396);box-shadow:0 0 12px #ffdb7280;transition:width .18s linear}
.tutorial-next{position:sticky;bottom:-16px;background:linear-gradient(#17251bea,#17251b);padding:14px 0 10px;z-index:5;margin-top:6px}
/* An opaque fill also prevents the global background transition from briefly
   exposing the dark panel when hover replaces a gradient after a lesson update. */
#first-mate button.tutorial-primary,.guidance-panel-instruction button.tutorial-primary{width:100%;min-height:43px;padding:11px 14px;text-align:center;font:600 13px/1.4 system-ui;color:#201b0e;background:#f5d783;border:1px solid #fff0ae;box-shadow:0 2px 9px #0007,0 0 16px #d8b45b28;white-space:normal;cursor:pointer;transition:box-shadow .15s}
#first-mate button.tutorial-primary:is(:hover,:focus-visible,:active,.guidance-target),.guidance-panel-instruction button.tutorial-primary:is(:hover,:focus-visible,:active,.guidance-target){color:#201b0e;background:#ffecaf;box-shadow:0 0 18px #eac87850}
#first-mate button.tutorial-primary:focus-visible,.guidance-panel-instruction button.tutorial-primary:focus-visible{outline:3px solid #fff0af;outline-offset:3px}
.tutorial-secondary{display:flex;gap:8px;justify-content:space-between;margin-top:6px}
#first-mate .tutorial-secondary button{font-size:11px;padding:6px 9px;background:#1b281d;border-color:#626547;color:#c5c7ab}
.tutorial-help{font:11px/1.5 system-ui;margin:14px 0 1px;color:#aab79a}.tutorial-help summary{cursor:pointer;padding:6px 0}.tutorial-help p{font-size:11px!important}.tutorial-help button{display:block;width:100%;margin:5px 0}
#first-mate .tutorial-error{color:#edb096;font-size:12px;border-left:2px solid #bc7a54;padding-left:10px}
.tutorial-finished .guidance-quiet{margin-top:13px;display:block}
body.tutorial-active #objective,body.tutorial-active #watch-report,body.tutorial-active #order-message,body.tutorial-active #clock-button,body.tutorial-active #bridge-weather,body.tutorial-active #petition-button,body.tutorial-active #dialogue-caption{visibility:hidden}
body.tutorial-active #mini-chart{opacity:.25;pointer-events:none}
body.tutorial-active #interaction:not(.tutorial-context),body.tutorial-active #response-strip:not(.tutorial-context){opacity:.25}
.hidden-ui #first-mate.teaching{opacity:1!important;pointer-events:auto!important}
body.tutorial-active #topbar{opacity:.45}
body.tutorial-active #command-deck>section:not(.tutorial-context){opacity:.38}
body.tutorial-active #topbar.tutorial-context,body.tutorial-active #mini-chart.tutorial-context,body.tutorial-active #clock-button.tutorial-context,body.tutorial-active #bridge-weather.tutorial-context{visibility:visible;opacity:1;pointer-events:auto}
body.tutorial-active #modal{padding-left:410px;background:#070d0ba6}
body.tutorial-active #modal-card{width:min(900px,100%);max-width:100%;max-height:calc(100dvh - 90px)}
body.tutorial-active #practice-banner{top:84px;left:22px;transform:none;font-size:10px;padding:4px 9px;z-index:114}
body.tutorial-active #toast{z-index:125;left:50%;max-width:min(480px,40vw)}
body.tutorial-active .guidance-target{outline:3px solid #ffe088!important;outline-offset:3px!important;box-shadow:0 0 16px #ffd97899,inset 0 0 16px #f6d77b20!important;scroll-margin:18px}
@media(max-height:850px) and (min-width:901px){body.tutorial-active #first-mate.teaching{top:93px;bottom:218px;padding:12px;width:330px}body.tutorial-active #first-mate header{top:-12px;padding-bottom:7px}.tutorial-hold{margin-top:8px;padding:7px 9px}.tutorial-hold small{font-size:10px}#first-mate.teaching .guidance-tutorial{margin-top:11px}#first-mate.teaching .guidance-tutorial h3{font-size:20px;margin:10px 0 8px}#first-mate.teaching .tutorial-instruction{font-size:12px;line-height:1.5;margin-bottom:10px}.tutorial-next{bottom:-12px;padding:9px 0}.tutorial-help{margin-top:5px}}
@media(max-width:700px){body.tutorial-active #first-mate.teaching{left:10px;top:85px;bottom:auto;width:calc(100vw - 20px);max-width:none;max-height:270px;min-height:0;padding:10px 13px}body.tutorial-active #first-mate header{top:-10px;padding:2px 0 6px}.tutorial-hold{margin-top:7px;padding:5px 9px}.tutorial-hold small{font-size:10px}.tutorial-hold>span{font-size:18px}#first-mate.teaching .guidance-tutorial{margin-top:10px}#first-mate.teaching .guidance-tutorial h3{font-size:20px;margin:9px 0}#first-mate.teaching .tutorial-instruction{font-size:12px;line-height:1.5;margin-bottom:8px}.tutorial-next{bottom:-10px;padding:8px 0}.tutorial-secondary{margin-top:3px}body.tutorial-active #modal{padding:365px 8px 12px}body.tutorial-active #modal-card{max-height:calc(100dvh - 380px);min-height:180px;padding:18px}body.tutorial-active #machinery-panel{top:365px;left:10px;right:10px;width:auto;bottom:230px}body.tutorial-active #practice-banner{top:64px;left:10px}body.tutorial-active #mini-chart{visibility:hidden}body.tutorial-active #toast{max-width:90vw;top:auto;bottom:215px}.tutorial-work{margin:9px 0}}
@media(prefers-reduced-motion:reduce){.tutorial-progress>i{transition:none}}

@media(min-width:701px) and (max-width:1100px){body.tutorial-active #first-mate.teaching{left:10px;width:320px;top:92px;bottom:230px;padding:12px}body.tutorial-active #modal{padding-left:350px}body.tutorial-active #first-mate header{top:-12px}body.tutorial-active #mini-chart{visibility:hidden}}

/* Keep one lesson above the permanent command dock. Controls retain their
   normal positions, so learning transfers directly to an unassisted watch. */
body.tutorial-active #first-mate.teaching{top:82px;bottom:calc(var(--command-workspace-height,220px) + 12px);width:390px;max-width:calc(100vw - 44px);min-height:0}
body.tutorial-active #first-mate [data-guidance="collapse"]{display:none}
body.tutorial-active [data-lesson-locked]{opacity:.3!important;filter:saturate(.35);cursor:default}
body.tutorial-active [data-lesson-locked].guidance-target{opacity:1!important;filter:none}
body.tutorial-active #bridge-console{opacity:1;filter:none}
body.tutorial-active #bridge-console:not(.tutorial-context){pointer-events:auto}
body.tutorial-active .console-group:not(.tutorial-context){opacity:.35}
body.tutorial-active .console-group.tutorial-context{opacity:1}
body.tutorial-active #command-deck>section{opacity:1}
.tutorial-guard-note{padding:7px 10px!important;border:1px solid #aa914d;background:#322a17;font:11px/1.4 system-ui!important;color:#edd793!important;margin:8px 0!important}
body.tutorial-active .tutorial-next{margin-top:3px}
body.tutorial-active #first-mate.teaching .guidance-tutorial{margin-top:10px}
@media(min-width:701px) and (max-height:850px){
  body.tutorial-active #first-mate.teaching{left:14px;top:76px;bottom:calc(var(--command-workspace-height,220px) + 10px);width:445px;padding:10px 13px}
  body.tutorial-active #first-mate header{top:-10px;padding:2px 0 6px}
  body.tutorial-active #first-mate header .smallcaps{display:none}
  body.tutorial-active #first-mate header strong{font-size:15px}
  body.tutorial-active .tutorial-hold{margin-top:6px;padding:5px 8px}
  body.tutorial-active .tutorial-hold>span{font-size:17px}
  body.tutorial-active .tutorial-hold strong{font-size:11px}
  body.tutorial-active .tutorial-hold small{display:none}
  body.tutorial-active #first-mate.teaching .guidance-tutorial{margin-top:8px}
  body.tutorial-active #first-mate.teaching .guidance-tutorial h3{font-size:19px;margin:8px 0 6px}
  body.tutorial-active #first-mate.teaching .tutorial-instruction{font-size:11px;line-height:1.4;margin-bottom:7px}
  body.tutorial-active .tutorial-state{padding:6px 9px}
  body.tutorial-active .tutorial-state strong{font-size:12px}
  body.tutorial-active #first-mate .tutorial-state p{font-size:11px;line-height:1.4;margin:4px 0 0}
  body.tutorial-active .tutorial-work{margin:7px 0}
  body.tutorial-active .tutorial-next{bottom:-10px;padding:7px 0}
  body.tutorial-active #first-mate button.tutorial-primary{min-height:37px;padding:8px 10px;font-size:12px}
  body.tutorial-active .tutorial-secondary{margin-top:0}
}
/* The gold action and live work bar occupy their own fixed row. Long guidance
   scrolls above them; a changing ETA can never push the next step out of reach. */
body.tutorial-active #first-mate.teaching{display:flex;flex-direction:column;overflow:hidden}
body.tutorial-active #first-mate.teaching>header{position:static;flex:none}
body.tutorial-active #first-mate.teaching>.tutorial-hold{flex:none}
body.tutorial-active #first-mate.teaching>.guidance-tutorial{flex:1;min-height:0;overflow:auto;padding-right:4px;margin-bottom:0;scrollbar-width:thin}
body.tutorial-active #first-mate.teaching>.tutorial-next{position:static;flex:none;padding:9px 0 0;margin-top:0;background:none}
body.tutorial-active #first-mate.teaching>.tutorial-next .tutorial-work{margin:4px 0 8px}
@media(max-width:700px){body.tutorial-active #first-mate.teaching{top:76px;bottom:calc(var(--command-workspace-height,346px) + 8px);max-height:none;width:calc(100vw - 20px);padding:8px 10px}body.tutorial-active #first-mate.teaching>header .smallcaps,body.tutorial-active .tutorial-hold small{display:none}body.tutorial-active #first-mate.teaching>header{padding:0 0 5px}body.tutorial-active .tutorial-hold{margin-top:2px}body.tutorial-active #first-mate.teaching>.tutorial-next{padding-top:6px}body.tutorial-active #first-mate button.tutorial-primary{min-height:35px;padding:7px 10px}}
body.tutorial-active{--lesson-sidebar:434px}
body.tutorial-active #modal{padding-left:var(--lesson-sidebar)}
@media(min-width:701px) and (max-height:850px){body.tutorial-active{--lesson-sidebar:480px}}
@media(max-width:700px){body.tutorial-active #modal{padding:310px 8px 12px}}
#first-mate .tutorial-live-detail{font:11px/1.35 system-ui;margin:6px 0 0;color:#ead796}
@media(max-width:900px){
  body.tutorial-active #mini-chart.tutorial-context{display:block!important;position:fixed;top:42px;right:10px;width:150px;padding:0;z-index:117;background:#14231df5;border:1px solid #b39450}
  body.tutorial-active #mini-chart.tutorial-context>*:not(#view-toggle){display:none}
  body.tutorial-active #mini-chart.tutorial-context #view-toggle{display:block;min-height:30px;font-size:11px}
}