/* Harbor lessons: shared pieces for the redesigned games. Layout, boards and footers come from stowage.css;
 * this file adds the step buttons, demo frames, decision controls, ships, goal checklist and YAML previews. */
.hb-lesson { --hb-ink:#244958; --hb-soft:#516875; --hb-paper:#fff8e5; --hb-wood:#bd9f6d; --hb-ok:#2d694b; --hb-bad:#9c3d2d; --hb-cpu:#3e99be; --hb-mem:#9170bd; }
.hb-lesson button { font:inherit; }
.hb-lesson button:focus-visible,.hb-lesson input:focus-visible+.hb-switch { outline:3px solid #235f99; outline-offset:4px; }

/* Stage path: Stowage circles, but each one is a button. */
.hb-steps li>button { all:unset; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; border-radius:12px; }
.hb-steps li>button:disabled { cursor:default; opacity:.55; }
.hb-steps li>button:focus-visible { outline:3px solid #235f99; outline-offset:4px; }
.hb-steps li>button>span { width:46px; height:46px; border-radius:50%; background:#ecf5e9; border:3px solid #8baeb0; box-shadow:inset 0 3px 0 #fff,0 4px 0 #7a9fa6; display:grid; place-items:center; font:800 19px var(--mono); color:#2f5560; transition:transform .2s; }
.hb-steps li>button:hover:not(:disabled)>span { transform:translateY(-2px); }
.hb-steps .current>button>span { background:#ffe4a0; border-color:#a98048; box-shadow:inset 0 3px 0 #fff5cf,0 4px 0 #9a7848,0 0 0 6px #fff6; color:#644822; transform:rotate(-7deg); }
.hb-steps .complete>button>span { background:#c5e9b4; border-color:#699763; color:#315d3d; box-shadow:inset 0 3px 0 #eaffdd,0 4px 0 #699763; }
.hb-steps li>button>b { font-size:12px; font-weight:600; color:#446470; max-width:96px; text-align:center; line-height:1.35; }

/* Demo board. */
.hb-demo h2 { margin:10px 0 18px; }
.hb-demo-stage { min-height:250px; display:flex; flex-direction:column; justify-content:center; gap:10px; overflow:hidden; }
.hb-frame { animation:hb-frame-in .45s ease-out both; }
.hb-demo-caption { min-height:66px; margin:14px 2px 6px; text-align:center; font-size:13px; font-weight:700; line-height:1.65; color:#3d5c55; text-wrap:balance; }
.hb-demo-dots { display:flex; justify-content:center; gap:6px; margin-bottom:4px; }
.hb-demo-dots i { width:7px; height:7px; border-radius:50%; background:#cdbf98; }
.hb-demo-dots i.on { background:#8c6c3d; transform:scale(1.25); }
.hb-demo-controls { justify-content:space-between!important; }
.hb-demo .st-demo-note p { white-space:pre-line; }

/* Mini scenes inside the demo porthole. */
.hb-mini-scene { display:flex; flex-direction:column; gap:10px; }
.hb-mini-fleet { display:grid; grid-template-columns:repeat(auto-fit,minmax(52px,1fr)); gap:6px; align-items:end; }
.hb-mini-node { position:relative; padding:7px 5px 6px; background:#fff9e5; border:2px solid #68928c; border-radius:9px 9px 13px 13px; box-shadow:0 4px 0 #668b82; text-align:center; transition:transform .3s,opacity .3s; }
.hb-mini-node>b { display:block; font:800 10px var(--mono); color:#2e5359; }
.hb-mini-flags { display:flex; flex-wrap:wrap; justify-content:center; gap:2px; margin:4px 0; }
.hb-mini-flags .hb-chip { font-size:8.5px; padding:1px 4px; white-space:normal; overflow-wrap:break-word; justify-content:center; max-width:100%; }
.hb-mini-hold { display:flex; justify-content:center; gap:3px; margin-top:5px; }
.hb-mini-slot { width:16px; height:17px; border:1.5px dashed #9cb1a0; border-radius:4px; display:grid; place-items:center; }
.hb-mini-slot svg { width:15px; height:16px; }
.hb-mini-node.yes { border-color:#5c9a68; box-shadow:0 4px 0 #5c9a68,0 0 0 4px #c5e9b488; }
.hb-mini-node.yes .hb-mini-slot svg:last-child { animation:hb-drop .7s cubic-bezier(.2,.8,.3,1) both; }
.hb-mini-node.no { border-color:#b76a55; animation:st-shake .5s .25s; }
.hb-mini-node.no::after { content:'✗'; position:absolute; top:-9px; right:-6px; width:18px; height:18px; border-radius:50%; background:#c76750; color:#fff; font:800 11px/18px var(--sans); }
.hb-mini-node.down { opacity:.45; transform:translateY(8px) rotate(3deg); filter:grayscale(1); }
.hb-mini-node.down::after { content:'⚠'; position:absolute; top:-9px; right:-6px; font-size:15px; }
.hb-mini-pod { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 auto; padding:5px 10px 5px 5px; background:#fff7d8; border:2px solid #b59c61; border-radius:11px; box-shadow:0 3px 0 #ab905b; max-width:100%; }
.hb-mini-pod>svg { width:30px; height:34px; flex-shrink:0; }
.hb-mini-pod>div { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:2px; }
.hb-mini-pod b { display:block; flex-basis:100%; font:800 11px var(--mono); color:#4b553d; }
.hb-mini-pod .hb-chip { margin:2px 2px 0 0; font-size:9px; }
.hb-mini-arrow { text-align:center; color:#537e76; font:800 18px var(--mono); line-height:1; }
.hb-mini-note { text-align:center; font:700 10px var(--mono); color:#3f6660; }
.hb-mini-note.bad { color:#9c3d2d; }.hb-mini-note.ok { color:#2d694b; }

/* Chips: labels are tags, taints are hazard signs, zones are sea marks. */
.hb-chip { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:6px; font:700 11px var(--mono); line-height:1.5; white-space:nowrap; border:1.5px solid #9fb4a6; background:#eef6ea; color:#33584f; }
.hb-chip.label::before { content:''; width:5px; height:5px; border-radius:50%; background:#6d9d8c; }
.hb-chip.taint { border-color:#8a6d2f; background:repeating-linear-gradient(135deg,#ffe7a3 0 6px,#f6d27a 6px 12px); color:#5a4419; }
.hb-chip.zone { border-color:#5a8fae; background:#d9eef8; color:#245470; }
.hb-chip.code { border-color:#c8bd99; background:#fff9e8; color:#5b5236; }
.hb-chip.ok { border-color:#6aa274; background:#dff2d6; color:#2d694b; }
.hb-chip.bad { border-color:#c38a7c; background:#f8e1da; color:#9c3d2d; }
.hb-chip.muted { border-color:#c4cbc0; background:#eef0ea; color:#6a7a74; }
.hb-chip.gold { border-color:#b8964f; background:#ffe9b0; color:#5d4720; }

/* Decision controls. */
.hb-choice { display:grid; gap:7px; min-width:0; }
.hb-choice-label { font-size:12px; font-weight:800; color:#355e65; }
.hb-options { display:flex; flex-wrap:wrap; gap:6px; }
.hb-option { min-height:40px; padding:6px 12px; border:2px solid #8aa9a2; border-radius:11px; background:#f3f7ec; color:#33585c; box-shadow:0 3px 0 #8aa9a2,inset 0 2px 0 #fff9; cursor:pointer; font-weight:700; font-size:13px; transition:transform .15s; text-align:left; }
.hb-option.code { font-family:var(--mono); font-size:12px; }
.hb-option:hover:not(:disabled) { transform:translateY(-2px); }
.hb-option.on { background:#ffe4a0; border-color:#a98048; color:#5c4420; box-shadow:0 3px 0 #9a7848,inset 0 2px 0 #fff5cf; }
.hb-option:disabled { cursor:default; opacity:.6; transform:none; }
.hb-toggle { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.hb-toggle input { position:absolute; opacity:0; width:1px; height:1px; }
.hb-switch { position:relative; flex-shrink:0; width:46px; height:26px; border-radius:15px; background:#d4dccf; border:2px solid #8aa9a2; box-shadow:inset 0 2px 3px #4a6a6230; transition:background .2s; }
.hb-switch::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fffbea; border:1.5px solid #7b958d; transition:transform .2s; }
.hb-toggle.on .hb-switch { background:#f3c965; border-color:#a78646; }
.hb-toggle.on .hb-switch::after { transform:translateX(20px); }
.hb-toggle b { display:block; font-size:13px; }
.hb-toggle small { display:block; font-size:11px; color:#5a6f6c; }
.hb-stepper { display:grid; gap:7px; }
.hb-stepper-body { display:flex; align-items:center; gap:6px; }
.hb-stepper-body button { width:40px; height:40px; border:2px solid #8aa9a2; border-radius:11px; background:#f3f7ec; box-shadow:0 3px 0 #8aa9a2; cursor:pointer; font:800 18px var(--mono); color:#33585c; }
.hb-stepper-body button:disabled { opacity:.45; cursor:default; }
.hb-stepper-body output { min-width:64px; text-align:center; padding:7px 8px; border-radius:9px; background:#fffbea; border:2px solid #d7c9a0; font:800 15px var(--mono); color:#3b4f4c; }

/* Paper panels (manifests) and section labels on the sea. */
.hb-panel { position:relative; min-width:0; padding:13px 14px; border:2px solid #748f83; border-top:6px solid var(--accent-color,#d8b168); border-radius:14px; background:#fff6db; box-shadow:0 4px 0 #98a589; color:var(--hb-ink); }
.hb-panel-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; font-size:12px; color:#526859; }
.hb-panel-head>b { font:800 14px var(--mono); color:#2f4f4c; display:flex; align-items:center; gap:7px; }
.hb-panel-head>b svg { width:28px; height:32px; }
.hb-panels { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; margin:16px 0 8px; }
.hb-label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:18px 4px 10px; color:#355e65; font-size:12px; font-weight:800; }
.hb-label span { font-size:11px; font-weight:500; }
.hb-controls { display:grid; gap:12px; }

/* Ships (nodes). Same toy hull as Stowage's .st-node, without the click lift. */
.hb-fleet { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; padding:4px 0 22px; }
.hb-ship { position:relative; min-width:0; padding:12px 12px 10px; background:linear-gradient(110deg,#fffbe9,#ebe6cf); border:3px solid #5c7e7d; border-radius:17px 17px 24px 24px; color:var(--hb-ink); box-shadow:inset 0 3px 0 #fff,0 8px 0 #c5b98d,0 12px 0 #567979; transition:transform .35s,opacity .35s,filter .35s; }
.hb-ship::before { content:''; position:absolute; left:22%; right:22%; height:8px; top:-10px; border:3px solid #5c7e7d; border-bottom:0; border-radius:8px 8px 0 0; background:#c7d8c2; }
.hb-ship-top { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:14px; }
.hb-ship-top b { flex:1; }
.hb-ship-flags { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.hb-ship.reject { animation:st-shake .4s; border-color:#bd604c; }
.hb-ship.picked { border-color:#4f8a5b; box-shadow:inset 0 3px 0 #fff,0 8px 0 #c5b98d,0 12px 0 #4f8a5b,0 0 0 5px #c5e9b499; }
.hb-ship.down { opacity:.5; filter:grayscale(.9); transform:translateY(10px) rotate(2deg); }
.hb-ship.down .hb-ship-top::after { content:'⚠'; color:#9c3d2d; }
.hb-ship.dim { opacity:.55; }
.hb-ship-note { margin-top:8px; font:600 11px var(--mono); line-height:1.5; color:#9c3d2d; min-height:0; }
.hb-ship-note.ok { color:#2d694b; }
.hb-hold { display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:6px; margin-top:12px; padding-top:10px; border-top:2px dashed #b9c1ab; }
.hb-slot { min-height:50px; border:2px dashed #b4c2b0; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; background:#fffdf4; }
.hb-slot.full { border-style:solid; border-color:#a9b8a4; background:#eef3e2; }
.hb-slot svg { width:26px; height:29px; }
.hb-slot small { font:700 9px var(--mono); color:#43625a; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px; }
.hb-slot.fresh { border-color:#a98048; background:#fff1c9; }
.hb-slot.fresh svg { animation:hb-drop .65s cubic-bezier(.2,.8,.3,1) both; }
.hb-slot.gone { opacity:.4; }
.hb-slot.gone small { text-decoration:line-through; }

/* Availability zones: one dashed harbour per zone. */
.hb-zones { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; padding:0 0 18px; }
.hb-zone { min-width:0; border:2px dashed #6f9ea0; border-radius:20px; padding:10px 10px 0; background:#e4f6f02e; }
.hb-zone>header { display:flex; justify-content:space-between; margin:0 4px 14px; font:800 12px var(--mono); color:#2b5a66; letter-spacing:.5px; }
.hb-zone>header span { color:#9c3d2d; }
.hb-zone .hb-fleet { grid-template-columns:1fr; gap:24px; padding-bottom:22px; }
.hb-zone.down { border-color:#c76750; background:#c7675014; }

/* Queue of cargo tickets waiting to be scheduled. */
.hb-queue { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:6px 0 4px; }
.hb-ticket { display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border:2px solid #b59c61; border-radius:13px; background:linear-gradient(#fff7d8,#f5e5b6); box-shadow:0 4px 0 #ab905b; font:700 12px var(--mono); color:#4b553d; transition:opacity .3s,transform .3s; }
.hb-ticket svg { width:34px; height:38px; }
.hb-ticket small { display:block; font:600 10px var(--sans); color:#6b7159; }
.hb-ticket.sent { opacity:.35; transform:translateY(-4px) scale(.95); }
.hb-ticket.pending { border-color:#b76a55; box-shadow:0 4px 0 #b76a55; background:#fbe6dc; }

/* YAML preview, logs and meters. */
.hb-yaml { margin:8px 0 0; padding:9px 11px; border:1.5px dashed #c8bd99; border-radius:9px; background:#fffcf0; font:600 11.5px/1.6 var(--mono); color:#4b5338; white-space:pre; overflow-x:auto; overflow-wrap:normal; max-width:100%; }
.hb-log { list-style:none; margin:12px 0 4px; padding:10px 12px; border:2px solid #7ea3a1; border-radius:12px; background:#eef6eccc; font:600 12px/1.65 var(--mono); color:#33555a; max-height:220px; overflow:auto; }
.hb-log:empty { display:none; }
.hb-log li { padding:2px 0; animation:hb-frame-in .3s ease-out both; }
.hb-log li.bad { color:#9c3d2d; }.hb-log li.ok { color:#2d694b; }.hb-log li.event { color:#7a5a20; }
.hb-meter { margin:8px 0; }
.hb-meter .st-track { overflow:visible; }
.hb-meter-fill { left:0; background:var(--hb-cpu); box-shadow:inset 0 3px 0 #84cfde; transition:width .3s; }
.hb-meter.mem .hb-meter-fill { background:var(--hb-mem); box-shadow:inset 0 3px 0 #c4a4de; }
.hb-meter.bad .hb-meter-fill { background:#c76750; box-shadow:none; }
.hb-meter-mark { width:3px!important; top:-4px!important; height:calc(100% + 8px)!important; background:#7a5a20; border-radius:2px; }

/* Reorderable lists and number tiles. */
.hb-order { display:grid; gap:7px; }
.hb-order ol { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.hb-order li { display:flex; align-items:center; gap:9px; padding:7px 8px; border:2px solid #b8a576; border-radius:12px; background:linear-gradient(#fffbea,#f6ebc8); box-shadow:0 3px 0 #b39a62; }
.hb-order-n { flex-shrink:0; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#e6efe0; border:2px solid #8baeb0; font:800 11px var(--mono); color:#2f5560; }
.hb-order-body { flex:1; min-width:0; font:700 12px var(--mono); color:#3f4a38; overflow-wrap:anywhere; }
.hb-order-tools { display:flex; gap:4px; flex-shrink:0; }
.hb-order-tools button { width:36px; height:36px; border:2px solid #8aa9a2; border-radius:9px; background:#f3f7ec; box-shadow:0 2px 0 #8aa9a2; cursor:pointer; font:800 15px var(--mono); color:#33585c; }
.hb-order-tools button:disabled { opacity:.35; cursor:default; }
.hb-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:12px 0; }
.hb-stat { min-width:110px; padding:8px 14px; text-align:center; border:2px solid #8cad9b; border-radius:12px; background:#e9f1df; box-shadow:inset 0 2px 0 #fff9,0 3px 0 #82a696; }
.hb-stat small { display:block; font-size:11px; color:#4a675e; margin-bottom:2px; }
.hb-stat b { font:800 17px var(--mono); color:#2b4d4f; }
.hb-stat.bad { border-color:#c38a7c; background:#f8e1da; box-shadow:inset 0 2px 0 #fff9,0 3px 0 #b76a55; }
.hb-stat.bad b { color:#9c3d2d; }
.hb-stat.ok { border-color:#6aa274; background:#dff2d6; }
.hb-stat.ok b { color:#2d694b; }

/* Goal checklist after a run. */
.hb-report { margin:16px 0 14px; }
.hb-goals { list-style:none; margin:0; padding:12px 14px; display:grid; gap:9px; border:2px solid #75a4a4; border-radius:15px; background:#fffbeacc; box-shadow:inset 0 2px 0 #fff8; }
.hb-goals li { display:flex; align-items:flex-start; gap:10px; animation:hb-frame-in .35s ease-out both; }
.hb-goals li:nth-child(2) { animation-delay:.08s; }.hb-goals li:nth-child(3) { animation-delay:.16s; }.hb-goals li:nth-child(4) { animation-delay:.24s; }
.hb-goal-mark { flex-shrink:0; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:800 13px var(--sans); color:#fff; background:#5c9a68; box-shadow:0 2px 0 #3f7656; }
.hb-goals li.bad .hb-goal-mark { background:#c76750; box-shadow:0 2px 0 #8f4f36; }
.hb-goals b { display:block; font-size:13px; color:#2f4f4c; }
.hb-goals small { display:block; margin-top:2px; font-size:12px; line-height:1.6; color:#5d6a64; }
.hb-goals li.bad small { color:#8b3f30; }

/* Footer: feedback, run buttons and the next button. */
.hb-footer { flex-wrap:wrap; }
.hb-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.hb-actions:empty { display:none; }
.hb-footer .hb-next[hidden] { display:none; }
.hb-board.hb-busy .hb-play { cursor:progress; }
.hb-play { margin-top:8px; }
.hb-intro { text-align:center; font-size:12px; color:#3f646a; margin:4px 0 0; }

@keyframes hb-frame-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes hb-drop { 0% { opacity:0; transform:translateY(-34px) rotate(-12deg) scale(1.3); } 70% { opacity:1; transform:translateY(3px) rotate(4deg); } 100% { transform:none; } }
@keyframes hb-pulse { 50% { transform:scale(1.06); } }

@media(max-width:800px) {
  .hb-demo-stage { min-height:200px; }
  .hb-steps li>button>b { display:none; }
}
@media(max-width:440px) {
  .hb-mini-pod>svg { width:24px; height:27px; }
  .hb-mini-pod .hb-chip { font-size:8px; }
  .hb-steps li>button>span { width:32px; height:32px; font-size:15px; }
  .hb-fleet { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
  .hb-option { padding:6px 9px; font-size:12px; }
  .hb-panel { padding:11px; }
}
@media(prefers-reduced-motion:reduce) { .hb-lesson *,.hb-lesson *::before,.hb-lesson *::after { animation:none!important; transition:none!important; } }