/* Demoted titles (one h1 per page): an h2.h1 starts from the browser h1 defaults, then takes every h1 rule below. */
:where(h2.h1){font-size:2em;margin-block:.67em}
:root{--deep:#062c36;--sea:#0a5360;--foam:#e8f4ef;--aqua:#75d5c7;--coral:#ef805f;--sand:#d8c69e;--line:rgba(232,244,239,.22);font:16px/1.45 ui-sans-serif,system-ui,sans-serif;color:var(--foam);background:var(--deep);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-width:300px;min-height:100vh;background:radial-gradient(circle at 15% 15%,rgba(117,213,199,.12),transparent 28rem),linear-gradient(180deg,#062c36,#031c24)}
button,a,input{font:inherit}
button{color:inherit;cursor:pointer}
.skip{position:fixed;top:-5rem;left:1rem;background:#fff;color:#000;padding:.7rem;z-index:30}
.skip:focus{top:1rem}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
header{height:78px;padding:10px clamp(14px,4vw,60px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(6,44,54,.9);backdrop-filter:blur(16px);z-index:10}
.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}
.brand>span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--aqua);font-weight:900}
.brand b{font-size:1.1rem}
.brand small{display:block;color:#9fbfbd;font-size:0.75rem;text-transform:uppercase;letter-spacing:.15em}
nav{display:flex;gap:8px}
nav button{width:auto;min-width:44px;height:44px;border:1px solid var(--line);border-radius:999px;background:transparent;padding:0 14px}
main{max-width:1560px;margin:auto}
.home{padding:clamp(50px,8vw,120px) clamp(18px,6vw,90px)}
.call{text-transform:uppercase;letter-spacing:.22em;color:var(--aqua);font-size:0.75rem;font-weight:800}
.home h1{font:500 clamp(3.2rem,8vw,8rem)/.88 ui-serif,Georgia,serif;letter-spacing:-.055em;margin:25px 0}
.home h1 em{font-style:italic;color:var(--coral)}
.home>p:not(.call){color:#b6d0ce;max-width:60ch;font-size:1.08rem}
.modes{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;max-width:920px;margin:42px 0 24px}
.modes button{min-height:185px;border:1px solid var(--line);border-radius:80px 8px 8px 8px;background:#0b4652;padding:24px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}
.modes button:first-child{background:var(--aqua);color:var(--deep)}
.modes span{margin-bottom:auto;font-size:0.75rem;text-transform:uppercase;letter-spacing:.14em}
.modes b{font:600 1.55rem ui-serif,Georgia}
.modes small{margin-top:6px;opacity:1}
.archive-bar{display:flex;flex-wrap:wrap;align-items:end;gap:8px;max-width:920px;margin:18px 0 0;padding:12px;border:1px solid var(--line);background:#083a45}
.archive-bar label{display:grid;gap:4px;flex:1;color:#b9d2cf;font-size:0.75rem;text-transform:uppercase;letter-spacing:.1em}
.archive-bar input{min-height:44px;border:1px solid var(--aqua);background:#041f28;color:var(--foam);padding:0 11px;color-scheme:dark}
.archive-bar button{min-height:44px;border:0;background:var(--aqua);color:var(--deep);font-weight:850;padding:0 17px}
.archive-bar small{flex-basis:auto;width:100%;min-width:0;align-self:stretch;color:#9db9b7;font-size:0.75rem;overflow-wrap:anywhere}
.career-strip{display:grid;grid-template-columns:repeat(3,1fr);max-width:920px;margin-top:16px;border:1px solid var(--line)}
.career-strip div{padding:12px;border-right:1px solid var(--line)}
.career-strip div:last-child{border:0}
.career-strip b,.career-strip span{display:block}
.career-strip b{font:600 1.45rem ui-serif,Georgia;color:var(--coral)}
.career-strip span{font-size:0.75rem;text-transform:uppercase;color:#b6cfcc}
.career-ledger,.badge-case{max-width:920px;padding:12px 0;border-bottom:1px solid var(--line)}
.career-ledger summary,.badge-case summary{cursor:pointer;color:var(--aqua);font-size:0.75rem;text-transform:uppercase;letter-spacing:.12em}
.career-ledger ol,.badge-case ul{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0;list-style:none}
.career-ledger li,.badge-case li{position:relative;border:1px solid var(--line);padding:9px;overflow:hidden}
.career-ledger li b,.career-ledger li span,.badge-case b,.badge-case span{display:block;position:relative;z-index:1}
.career-ledger li span,.badge-case span{font-size:0.75rem;color:#b4ccca}
.career-ledger li i{position:absolute;left:0;bottom:0;width:var(--done);height:3px;background:var(--coral)}
.badge-case li{opacity:.42}
.badge-case li.earned{opacity:1;border-color:var(--aqua);background:#083a45}
.local-ledger{max-width:920px;margin-top:14px;border:1px solid var(--line);background:#083a45;padding:14px}.local-ledger>div{display:grid;gap:3px}.local-ledger>div>span,.local-ledger summary{color:var(--aqua);font-size:0.75rem;text-transform:uppercase;letter-spacing:.12em}.local-ledger ul,.local-ledger ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:7px}.local-ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:9px;min-width:0}.local-ledger li b,.local-ledger li span{display:block;overflow-wrap:anywhere}.local-ledger li span{font-size:0.75rem;color:#b4ccca}.local-ledger button,.dialog-actions button,#history-play{min-height:44px;border:1px solid var(--aqua);background:transparent;color:var(--foam);padding:0 12px}.local-ledger [data-discard-draft]{border-color:var(--coral)}
.features{display:flex;gap:8px;flex-wrap:wrap}
.features span{border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:0.75rem}
.watch-head{display:grid;grid-template-columns:170px 1fr auto;gap:20px;align-items:end;padding:26px clamp(13px,3vw,46px) 18px}
.watch-head>button{border:0;background:none;text-align:left}
.watch-head>div>span{color:var(--aqua);font-size:0.75rem;text-transform:uppercase;letter-spacing:.12em}
.watch-head>div>small{display:block;color:#b4cecb;font-size:0.75rem;text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.watch-head h1,.watch-head h2.h1{font:500 clamp(2.2rem,4vw,4.3rem)/.95 ui-serif,Georgia;margin:5px 0}
.value{border-left:1px solid var(--line);padding-left:20px}
.value span,.value b{display:block}
.value b{font-size:1.8rem}
.tide{display:grid;grid-template-columns:180px 1fr;gap:15px;align-items:end;padding:13px clamp(13px,3vw,46px);background:#041f28;border-block:1px solid var(--line)}
.tide>div>span{font-size:0.75rem;text-transform:uppercase;color:#a7c4c2}
.tide>div>b{display:block;color:var(--aqua)}
.tide-chart{height:86px;display:grid;grid-template-columns:repeat(12,1fr);gap:3px;align-items:end}
.tide-chart>div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.tide-chart i{width:100%;background:linear-gradient(var(--aqua),var(--sea));border-radius:4px 4px 0 0}
.tide-chart span,.tide-chart b{font-size:0.75rem}
.notices{margin:0 clamp(13px,3vw,46px);padding:9px 12px;border-left:4px solid var(--coral);background:#083a45;color:#d9e8e4;font-size:0.75rem}
.workspace{display:grid;grid-template-columns:290px minmax(680px,1fr) 230px;gap:13px;padding:20px clamp(13px,3vw,46px) 60px}
.arrivals,.details{background:#083a45;border:1px solid var(--line);padding:15px;align-self:start}
.panel-title{display:flex;justify-content:space-between;font-size:0.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--aqua);margin-bottom:12px}
.ship{width:100%;min-height:76px;border:1px solid var(--line);background:#062c36;padding:9px;display:grid;grid-template-columns:40px 1fr;text-align:left;gap:8px;margin-bottom:7px}
.ship>span{grid-row:1/3;width:36px;height:36px;border-radius:50%;background:var(--sand);color:var(--deep);display:grid;place-items:center;font-weight:900}
.ship b,.ship small,.ship i{display:block}
.ship small{font-size:0.75rem;color:#a9c4c1}
.ship i{font-style:normal;font-size:0.75rem;color:var(--coral);grid-column:2}
.ship.selected{background:#126474}
.ship.placed{border-color:var(--aqua)}
.ship.priority{box-shadow:inset 4px 0 0 var(--coral)}
.arrivals>button{width:100%;min-height:44px;border:1px solid var(--line);background:transparent;margin-top:7px;font-size:0.75rem}
.arrivals>p{font-size:0.75rem;color:#a9c4c1;min-height:60px}
.schedule-wrap{overflow:auto;min-width:0}
.schedule{display:grid;grid-template-columns:150px repeat(12,minmax(74px,1fr));min-width:1050px;border:1px solid var(--line)}
.schedule>*{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.corner,.time{background:#041f28;min-height:42px;display:grid;place-items:center;font-size:0.75rem;text-transform:uppercase}
.corner,.berth{position:sticky;left:0;z-index:2}
.corner{z-index:3}
.berth{background:#0b4652;min-height:110px;padding:10px}
.berth b,.berth small{display:block}
.berth small{font-size:0.75rem;color:#b3cecb;margin-top:6px}
.slot{min-height:110px;border:0;background:#072f39;padding:5px}
.slot:hover{background:#0c4f5b}
.slot>span{font-size:0.75rem;color:#a7c3c0}
.slot.occupied{background:var(--aqua);color:var(--deep)}
.slot.occupied b,.slot.occupied small{display:block;font-size:0.75rem}
.slot.invalid{background:repeating-linear-gradient(45deg,#062832,#062832 5px,#0a3540 5px,#0a3540 10px);cursor:not-allowed}
.slot.closed{background:repeating-linear-gradient(135deg,#381f22,#381f22 6px,#592d2e 6px,#592d2e 12px);color:#ffd7cf}
.slot.suggested{animation:suggest 1s infinite;box-shadow:inset 0 0 0 4px var(--coral)}
.schedule-help{font-size:0.75rem;color:#9dbab8;margin-top:7px}
.details>span{color:var(--aqua);font-size:0.75rem;text-transform:uppercase}
.details h2{font:500 1.4rem ui-serif,Georgia}
.details dl div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:7px 0;font-size:0.75rem}
.details dd{margin:0;text-align:right}
.clearance{border:1px solid var(--aqua);padding:12px;margin:20px 0}
.clearance small,.clearance b{display:block}
.clearance b{font-size:1.7rem}
.details>button{width:100%;min-height:48px;border:0;background:var(--coral);color:var(--deep);font-weight:850}
.details>button:disabled{opacity:.35}
.optimal-gap{font-size:0.75rem;color:#b8cfcd;min-height:32px}
.log{margin:clamp(45px,8vw,120px) clamp(18px,8vw,120px);max-width:1050px}
.log>p{color:var(--aqua);text-transform:uppercase;letter-spacing:.16em}
.log h1,.log h2.h1{font:500 clamp(3.2rem,7vw,7rem)/.9 ui-serif,Georgia}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:30px 0}
.result-grid div{border:1px solid var(--line);padding:18px}
.result-grid b,.result-grid span{display:block}
.result-grid b{font-size:2rem;color:var(--coral)}
.result-grid span{font-size:0.75rem;text-transform:uppercase}
.result-report{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 25px}
.result-report div{border:1px solid var(--line);padding:13px}
.result-report b,.result-report span{display:block}
.result-report b{font-size:1.1rem;color:var(--aqua)}
.result-report span{font-size:0.75rem;text-transform:uppercase;color:#b8cecc}
.new-badges{color:var(--coral);font-weight:750}
.watch-playback{border:1px solid var(--line);background:#041f28;padding:12px;margin:18px 0}
.watch-playback>div{display:flex;justify-content:space-between;align-items:center}
.watch-playback button{min-height:44px;border:1px solid var(--aqua);background:transparent;color:var(--foam)}
.watch-playback ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px;padding:0;list-style:none}
.watch-playback li{display:grid;grid-template-columns:54px 1fr;padding:7px;border:1px solid var(--line);font-size:0.75rem}
.watch-playback li>span{grid-row:1/3;color:var(--aqua)}
.watch-playback li small{font-size:0.75rem;color:#b7cecb}
.watch-playback li.playing{background:var(--aqua);color:var(--deep);transform:translateY(-3px)}
.watch-playback li.playing span,.watch-playback li.playing small{color:var(--deep)}
.log>button{min-height:48px;border:1px solid var(--line);background:transparent;padding:0 18px;margin:4px}
.log>button:first-of-type{background:var(--aqua);color:var(--deep)}
footer{border-top:1px solid var(--line);padding:22px clamp(14px,4vw,60px);display:flex;justify-content:space-between;font-size:0.75rem;color:#9db9b7}
footer a{color:inherit;margin-left:14px}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,12px);background:var(--aqua);color:var(--deep);padding:10px 14px;opacity:0;transition:.2s;z-index:30}
.toast.show{opacity:1;transform:translate(-50%,0)}
dialog{width:min(590px,calc(100% - 24px));background:#083a45;color:var(--foam);border:1px solid var(--aqua);padding:28px}
dialog::backdrop{background:rgba(3,20,25,.78)}
dialog form button{float:right;width:44px;height:44px;border:1px solid var(--line);background:transparent}
dialog>p:first-of-type{color:var(--aqua);text-transform:uppercase;font-size:0.75rem}
dialog h2{font:500 2.3rem ui-serif,Georgia}
dialog>label{display:flex;align-items:center;gap:10px;min-height:46px;border-bottom:1px solid var(--line)}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dialog-actions button:first-child{background:var(--aqua);color:var(--deep)}.history-dialog ol{list-style:none;padding:0;display:grid;gap:7px}.history-dialog li{display:flex;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--line)}.history-dialog li.playing{background:var(--aqua);color:var(--deep)}.history-dialog li span{font-size:0.75rem}
.data{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:18px}
.data button,.data label{min-height:44px;border:1px solid var(--line);display:grid;place-items:center;background:transparent}
.data button:last-child{grid-column:1/-1;color:var(--coral)}
.data input{position:absolute;opacity:0}
html[data-contrast=high]{--deep:#000;--sea:#004d54;--foam:#fff;--line:#fff;--aqua:#aafff5;--coral:#ffad94}
html[data-large=yes]{font-size:19px}
html[data-motion=reduced] *{transition:none!important}
@keyframes suggest{50%{box-shadow:inset 0 0 0 4px var(--coral),0 0 15px var(--coral)}}
html[data-motion=reduced] .slot{animation:none!important}

@media(max-width:1240px){.workspace{grid-template-columns:270px 1fr}
.details{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.details>span,.details h2,.details>button{grid-column:1/-1}
}
@media(max-width:800px){.workspace{grid-template-columns:1fr}
.watch-head{grid-template-columns:1fr auto}
.watch-head>button{grid-column:1/-1}
.tide{grid-template-columns:1fr}
.tide-chart{overflow:auto}
.modes{grid-template-columns:1fr}
.career-ledger ol,.badge-case ul{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){header{height:68px}
.brand small{display:none}
nav button{padding-inline:9px}
.home{padding:40px 15px 55px}
.home h1{font-size:3.2rem}
.watch-head{padding:18px 12px}
.watch-head h1,.watch-head h2.h1{font-size:2.4rem}
.tide,.workspace{padding-inline:10px}
.tide-chart{grid-template-columns:repeat(12,44px)}
.result-grid{grid-template-columns:1fr}
.log h1,.log h2.h1{font-size:3.5rem}
.archive-bar{flex-direction:column;align-items:stretch}
.local-ledger li{grid-template-columns:1fr 1fr}.local-ledger li div{grid-column:1/-1}.dialog-actions{grid-template-columns:1fr}
.career-strip{grid-template-columns:1fr}
.career-strip div{border-right:0;border-bottom:1px solid var(--line)}
.career-ledger ol,.badge-case ul,.result-report{grid-template-columns:1fr 1fr}
footer{flex-direction:column;gap:10px}
}

@media(max-width:360px){header{padding-inline:10px}.brand b{display:none}.home{padding-inline:10px}.tide,.workspace{padding-inline:6px}.watch-head{padding-inline:8px}.log{margin-inline:8px;padding-inline:18px}.history-dialog li{flex-direction:column}}

@media(pointer:coarse){button{min-height:44px}}

/* Portfolio signature: tide curve and harbour-watch board. */
.home[hidden]{display:none!important}
.tide-ribbon{height:150px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:1fr auto;align-items:end;gap:8px;padding:16px 18px 10px;border-block:1px solid var(--line);background:linear-gradient(180deg,transparent,#083944);overflow:hidden}
.tide-ribbon span{height:var(--tide,45%);min-height:18px;border-radius:999px 999px 0 0;background:linear-gradient(180deg,var(--aqua),rgba(117,213,199,.08));box-shadow:0 -1px 0 var(--aqua)}
.tide-ribbon span:nth-child(1),.tide-ribbon span:nth-child(7){--tide:28%}.tide-ribbon span:nth-child(2),.tide-ribbon span:nth-child(6){--tide:48%}.tide-ribbon span:nth-child(3),.tide-ribbon span:nth-child(5){--tide:72%}.tide-ribbon span:nth-child(4){--tide:96%;background:linear-gradient(180deg,var(--coral),rgba(239,128,95,.08))}
.tide-ribbon b{font-size:0.75rem;color:#9ebdbb;text-align:center;font-weight:600}.watch-board{display:grid;gap:14px;margin-top:24px}.watch-board>.archive-bar,.watch-board>.career-strip,.watch-board>.career-ledger,.watch-board>.badge-case,.watch-board>.local-ledger{max-width:none;margin-top:0}
@media(min-width:900px){
  .home{max-width:1560px}.home>.call,.home>h1,.home>p:not(.call){margin-inline:auto;text-align:center}.home>h1{max-width:13ch}.home>p:not(.call){max-width:67ch}.home>.tide-ribbon{max-width:1120px;margin:32px auto -18px;border-radius:50% 50% 8px 8px/32px 32px 8px 8px}
  .home>.modes{grid-template-columns:repeat(3,1fr);max-width:1120px;margin:42px auto 0}.home>.modes button{min-height:155px;border-radius:56px 56px 8px 8px;align-items:center;text-align:center}.home>.modes button span{margin-bottom:18px}.home>.modes button:first-child{transform:translateY(-12px)}
  .home>.watch-board{max-width:1120px;margin-inline:auto;grid-template-columns:1.15fr .85fr}.watch-board>.archive-bar{grid-column:1}.watch-board>.career-strip{grid-column:2;grid-row:1}.watch-board>.career-ledger{grid-column:1}.watch-board>.badge-case{grid-column:2}.watch-board>.draft-ledger,.watch-board>.history-ledger,.watch-board>.features{grid-column:1/-1}.watch-board>.features{justify-content:center;padding-top:4px}
  .log{max-width:1220px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:12px 28px;padding:32px;border:1px solid var(--line);border-radius:90px 12px 12px 12px;background:linear-gradient(135deg,#083e49,#04252e);position:relative}.log::before{content:"HARBOUR WATCH";position:absolute;right:28px;top:18px;color:rgba(117,213,199,.18);font-weight:900;letter-spacing:.22em}
  .log>p:first-child,.log>h1,.log>h2.h1,.log>#result-copy{grid-column:1}.log>p:first-child{margin-bottom:0}.log>h1,.log>h2.h1{margin-block:4px}.log>.result-grid{grid-column:2;grid-row:1/span 3;grid-template-columns:1fr;margin:0}.log>.result-grid div{border-left:4px solid var(--coral)}
  .log>.result-report,.log>.new-badges,.log>.watch-playback{grid-column:1/-1}.log>.watch-playback ol{grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);grid-template-columns:none;overflow-x:auto}.log>button{justify-self:start;margin-left:0}
}
@media(max-width:899px){.tide-ribbon{margin:26px 0}.watch-board{grid-template-columns:1fr}.home>.modes{max-width:none}.log{padding:20px}}
@media(max-width:420px){.tide-ribbon{height:115px;padding-inline:8px;gap:4px}.tide-ribbon b{font-size:0.75rem}}

.career-ledger summary,.badge-case summary,.local-ledger summary{min-height:44px;display:flex;align-items:center}

button{min-width:44px;min-height:44px}
header a,footer a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
dialog label,details>summary,.file-button{min-height:44px}

#archive-status{display:block;flex-basis:auto;align-self:stretch;width:100%;min-width:0;padding:8px 10px;border-left:4px solid var(--coral);background:#04242c;color:#c9e1de;font-size:0.75rem;overflow-wrap:anywhere}
.campaign-picker{max-width:920px;border:1px solid var(--line);padding:12px;background:#073640}.campaign-picker summary{color:var(--aqua);font-size:0.75rem;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}.campaign-picker ol{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.campaign-picker li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:8px;min-width:0}.campaign-picker li>span{font:600 1rem ui-serif,Georgia;color:var(--coral)}.campaign-picker b,.campaign-picker small{display:block;overflow-wrap:anywhere}.campaign-picker small{font-size:0.75rem;color:#b4ccca}.campaign-picker button{border:1px solid var(--aqua);background:transparent;padding-inline:10px}.campaign-picker button:disabled{opacity:.35}.campaign-picker li.complete{background:#0a4852}.watch-board>.campaign-picker{max-width:none;margin:0}.shortcut-help{font-size:0.75rem;color:#a9c4c1;border-top:1px dashed var(--line);padding-top:8px}
@media(min-width:900px){.watch-board>.campaign-picker{grid-column:1/-1}}
@media(max-width:650px){.campaign-picker ol{grid-template-columns:1fr}.campaign-picker li{grid-template-columns:32px minmax(0,1fr)}.campaign-picker button{grid-column:2;justify-self:start}}
.guide-page{width:min(1120px,100%);padding:clamp(40px,7vw,90px) clamp(16px,5vw,60px)}.guide-page article{border:1px solid var(--line);border-radius:80px 12px 12px 12px;background:linear-gradient(145deg,#083f49,#04252e);padding:clamp(26px,5vw,58px)}.guide-kicker{color:var(--aqua);font-size:0.75rem;text-transform:uppercase;letter-spacing:.18em}.guide-page h1{font:500 clamp(2.8rem,7vw,6rem)/.92 ui-serif,Georgia;margin:18px 0}.guide-page h1 em{font-style:normal;color:var(--coral)}.guide-lead{max-width:68ch;color:#c7dfdc;font-size:1.08rem}.guide-page section{margin-top:38px;padding-top:18px;border-top:1px solid var(--line)}.guide-page h2{font:500 clamp(1.6rem,3vw,2.4rem) ui-serif,Georgia}.guide-page li{margin-block:.7rem}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.guide-grid p,.guide-page details{border:1px solid var(--line);background:#052d35;padding:14px;margin:8px 0}.guide-page details summary{cursor:pointer;color:var(--aqua);font-weight:750}.guide-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px}.guide-actions a{min-height:48px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--aqua);color:var(--foam);text-decoration:none}.guide-actions a:first-child{background:var(--coral);border-color:var(--coral);color:#132b2c;font-weight:850}@media(max-width:600px){.guide-grid{grid-template-columns:1fr}.guide-page article{border-radius:42px 8px 8px 8px;padding-inline:18px}}
.more-games{max-width:920px;margin:34px auto 0;padding:20px;border:1px solid var(--line);border-radius:0}
.more-games h2{font-size:1rem;margin:0 0 6px}
.more-games p{margin:0 0 14px;font-size:0.82rem;opacity:.85}
.more-games ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.more-games li{display:grid;gap:2px;min-width:0}
.more-games li a{display:flex;align-items:center;min-height:44px;font-size:0.88rem;overflow-wrap:anywhere}
.more-games li span{font-size:0.75rem;opacity:.8}

/* Refusal marks: every blocked cell carries a glyph and its own hatch angle, so
   no rule is signalled by colour alone. */
.slot>u{display:block;font-style:normal;font-size:0.95rem;line-height:1;margin-top:4px;color:#cfe6e2;text-decoration:none}
.slot[data-refusal=early]{background:repeating-linear-gradient(90deg,#062832,#062832 5px,#0a3540 5px,#0a3540 10px)}
.slot[data-refusal=late]{background:repeating-linear-gradient(0deg,#062832,#062832 5px,#0a3540 5px,#0a3540 10px)}
.slot[data-refusal=length]{background:repeating-linear-gradient(45deg,#062832,#062832 4px,#123f4a 4px,#123f4a 8px)}
.slot[data-refusal=gear]{background:repeating-linear-gradient(135deg,#062832,#062832 4px,#123f4a 4px,#123f4a 8px)}
.slot[data-refusal=depth]{background:repeating-linear-gradient(45deg,#052733,#052733 3px,#0b4152 3px,#0b4152 9px)}
.slot[data-refusal=occupied]{background:repeating-linear-gradient(135deg,#0a3b45,#0a3b45 6px,#0f4d59 6px,#0f4d59 12px)}
.slot.refused{animation:refuse .55s ease}
@keyframes refuse{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
html[data-motion=reduced] .slot.refused{animation:none;box-shadow:inset 0 0 0 3px var(--coral)}

.slot-legend{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;margin:.6rem 0 0;padding:.6rem .75rem;border:1px solid var(--line);border-radius:10px;font-size:0.8125rem;background:rgba(6,40,50,.6)}
.slot-legend b{width:100%;font-size:0.8125rem;color:var(--sand)}
.slot-legend span{display:inline-flex;align-items:center;gap:.35rem;color:#bdd6d2}
.slot-legend u{font-style:normal;text-decoration:none;display:inline-grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:5px;background:#0d4351;color:var(--foam)}

.finish-help{margin:.5rem 0 0;font-size:0.8125rem;color:#a7c3c0}
.finish-help.warning{color:var(--sand)}

.difficulty{display:block;max-width:44rem;margin:1rem auto 0;padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;text-align:left;font-size:0.9375rem;background:rgba(10,83,96,.28)}
.difficulty input{width:20px;height:20px;margin-right:.5rem;vertical-align:-4px}
.difficulty small{display:block;margin-top:.25rem;font-size:0.8125rem;color:#a7c3c0}

.stats-board .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin:.75rem 0}
.stats-board .stat-grid div{padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px}
.stats-board .stat-grid b{display:block;font-size:1.35rem}
.stats-board .stat-grid span{font-size:0.8125rem;color:#a7c3c0}
.stat-grades{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.stat-grades li{display:grid;grid-template-columns:1fr auto;gap:.25rem .75rem;font-size:0.875rem;padding:.4rem .1rem;border-bottom:1px solid var(--line)}
.stat-grades li i{grid-column:1/-1;display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--aqua) var(--share,0%),rgba(255,255,255,.1) var(--share,0%))}
.stat-grades li.empty{grid-template-columns:1fr;color:#a7c3c0}

.coach{position:sticky;bottom:1rem;z-index:5;margin:1rem auto 0;max-width:44rem;padding:1rem 1.1rem;border:2px solid var(--coral);border-radius:14px;background:#08323d;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.coach b{display:block;font-size:0.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sand)}
.coach p{margin:.4rem 0 .8rem;font-size:0.9375rem}
.coach div{display:flex;flex-wrap:wrap;gap:.6rem}
.coach button{min-height:44px;padding:0 1.1rem;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--foam);font:inherit;cursor:pointer}
.coach button#coach-next{background:var(--coral);border-color:var(--coral);color:#26100a;font-weight:600}
.coach-target{outline:3px dashed var(--coral);outline-offset:3px}

.keys{display:grid;gap:.45rem;margin:.75rem 0}
.keys div{display:grid;grid-template-columns:minmax(8rem,auto) 1fr;gap:.75rem;font-size:0.875rem;align-items:baseline}
.keys dt{font-weight:600;color:var(--sand)}
.keys dd{margin:0;color:#c5dbd7}
@media (max-width:520px){.keys div{grid-template-columns:1fr}}

.update-prompt{position:fixed;z-index:40;right:16px;bottom:16px;max-width:min(340px,calc(100vw - 32px));display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--sea);color:var(--foam);box-shadow:0 14px 40px rgba(0,0,0,.3)}
.update-prompt-text{margin:0;font-size:.875rem;line-height:1.45}
.update-prompt-actions{display:flex;flex-wrap:wrap;gap:8px}
.update-prompt button{min-width:44px;min-height:44px;padding:0 16px;border-radius:12px;font:inherit;font-size:.875rem;cursor:pointer}
.update-prompt-reload{border:1px solid transparent;background:var(--aqua);color:#062c36;font-weight:700}
.update-prompt-dismiss{border:1px solid var(--line);background:transparent;color:inherit}
@media(prefers-reduced-motion:no-preference){.update-prompt{animation:update-prompt-in .18s ease-out}
@keyframes update-prompt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media(max-width:560px){.update-prompt{left:12px;right:12px;bottom:84px;max-width:none}}

/* Wave 3 polish: multi-rule refusals, occupied windows, value breakdown, share, archive strip. */
.slot.occupied{background:var(--aqua);background-image:repeating-linear-gradient(135deg,rgba(6,44,54,.28) 0 5px,transparent 5px 11px);color:var(--deep)}
.slot[data-refusal-count]:not([data-refusal-count="1"]){box-shadow:inset 0 0 0 2px var(--coral)}
.depth-sum{display:grid;gap:.3rem;margin:.6rem 0 0;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;background:rgba(6,40,50,.6);font-size:0.8125rem;line-height:1.5}
.depth-sum b{color:var(--aqua)}
.next-try{margin:.6rem 0 0;padding:.7rem .85rem;border-left:4px solid var(--coral);background:rgba(239,128,95,.12);font-size:0.875rem;line-height:1.5}
.value-breakdown,.plan-gap{margin:1rem 0 0;padding:.85rem;border:1px solid var(--line);border-radius:12px;background:rgba(6,40,50,.55)}
.value-breakdown>b,.plan-gap>b{display:block;margin-bottom:.5rem;font-size:0.875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sand)}
.plan-gap p{margin:0 0 .5rem;font-size:0.8125rem;line-height:1.55;color:#cfe3df}
.value-breakdown ol,.plan-gap ol{margin:0;padding:0;list-style:none;display:grid;gap:.45rem}
.value-breakdown li,.plan-gap li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .6rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:9px;background:rgba(4,31,40,.6);font-size:0.8125rem}
.value-breakdown li b,.plan-gap li b{font-size:0.875rem}
.value-breakdown li span,.plan-gap li span{grid-column:1;color:var(--aqua)}
.value-breakdown li small,.plan-gap li small{grid-column:1/-1;font-size:0.75rem;line-height:1.5;color:#c3d9d5}
.value-breakdown li i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-weight:850;color:var(--sand)}
.plan-gap li.empty{grid-template-columns:1fr;color:#c3d9d5}
.share-panel{margin:1rem 0 0;padding:.85rem;border:1px solid var(--line);border-radius:12px;background:rgba(4,31,40,.72);display:grid;gap:.55rem;justify-items:start}
.share-panel>b{font-size:0.875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sand)}
.share-panel pre{margin:0;width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word;font:0.8125rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--foam)}
.share-panel button{min-height:44px;border:0;border-radius:8px;background:var(--aqua);color:var(--deep);font-weight:850;padding:0 18px}
.share-panel span{font-size:0.8125rem;color:var(--aqua);min-height:1.2em}
.archive-strip{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0;padding:0;width:100%}
.archive-strip button{min-height:44px;min-width:44px;display:grid;gap:.1rem;justify-items:center;align-content:center;padding:.35rem .5rem;border:1px solid var(--line);border-radius:9px;background:#041f28;color:var(--foam)}
.archive-strip li[data-played=yes] button{border-color:var(--aqua);background:#083a45}
.archive-strip u{font-style:normal;text-decoration:none;font-size:0.75rem;line-height:1;color:var(--aqua)}
.archive-strip span{font-size:0.75rem;color:#bdd6d2}
.archive-strip b{font-size:0.75rem;font-weight:850;color:var(--sand)}

.share-panel[hidden],.depth-sum[hidden],.sealed-views[hidden]{display:none}
.slot-legend[hidden]{display:none}
@media(min-width:900px){.log>.next-try,.log>.value-breakdown,.log>.plan-gap,.log>.share-panel{grid-column:1/-1}.log>button{align-self:start}}
@media(min-width:900px){.value-breakdown ol,.plan-gap ol{grid-template-columns:1fr 1fr}}

/* Play screen in one view: a compact watch line, a one-line tide strip, the berth schedule with rows sized to the
   space under the header, the arrivals and their actions beside it (desktop) or above it (phone), and Close the
   watch in reach. The schedule still scrolls sideways on a phone, with the berth names pinned. */
.watch-head{padding:8px clamp(13px,3vw,46px) 6px;align-items:center}
.watch-head h1,.watch-head h2.h1{font-size:clamp(1.6rem,2.8vw,2.4rem);margin:2px 0 0}
.watch-head>div>small{display:inline;margin:0 0 0 10px}
.watch-head .value b{font-size:1.5rem}
.tide{padding-block:2px;gap:10px;align-items:center}
.tide>div>span{font-size:.6875rem}
.tide-chart{height:36px}
.tide-chart span{display:none}
.notices{margin-block:6px!important;padding-block:6px!important}
.workspace{padding-top:8px;padding-bottom:20px}
.arrivals,.details{padding:10px 12px}
.ship{min-height:50px;padding:4px 8px;margin-bottom:4px;line-height:1.3;grid-template-columns:34px 1fr;align-items:center;position:relative}
.ship>i{position:absolute;right:8px;top:6px;font-size:.6875rem}
.ship>div>b{padding-right:64px}
.arrivals>.shortcut-help{display:none}
.slot.occupied small{display:none}
.ship>span{width:32px;height:32px}
.arrivals>button{margin-top:0;min-height:44px}
.arrivals{display:grid;grid-template-columns:1fr 1fr;gap:5px;align-content:start}
.arrivals>.panel-title,.arrivals>#ships,.arrivals>p{grid-column:1/-1}
.arrivals>#hint{grid-column:1/-1}
.arrivals>p{min-height:0;margin:4px 0}
.berth{min-height:0;padding:6px 8px}
.slot{min-height:0}
.schedule{grid-template-rows:38px;grid-auto-rows:calc((var(--ux-fit-h,440px) - 46px) / var(--berths,4))}
.corner,.time{min-height:38px}
.details h2{margin:6px 0}
.details .clearance{padding-block:8px}
@media(min-width:1241px){.details{grid-column:auto}}
@media(min-width:801px){
.schedule-wrap{max-height:var(--ux-fit-h,440px)}
.schedule{grid-template-columns:130px repeat(12,minmax(42px,1fr));min-width:0}
.time,.slot>span{font-size:.6875rem}
}
@media(max-width:1240px) and (min-width:801px){.details{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:800px){
.watch-head{grid-template-columns:auto 1fr!important;gap:2px 10px}
.watch-head>button{grid-column:1!important;grid-row:1}
.watch-head>.value{grid-column:2;grid-row:1;justify-self:end;text-align:right}
.watch-head>div:not(.value){grid-column:1/-1;grid-row:2}
.watch-head h1,.watch-head h2.h1{font-size:1.35rem}
.tide{grid-template-columns:1fr;padding-block:4px}
.tide-chart{display:none}
.tide>div:not(.tide-chart){display:flex;gap:8px;align-items:baseline}
.notices{font-size:.75rem;line-height:1.35}
.workspace{gap:8px}
.arrivals>.shortcut-help{display:none}
#ships{display:grid;grid-template-columns:1fr 1fr;gap:5px}
#ships .ship{margin:0;grid-template-columns:28px 1fr;gap:6px;min-height:48px}
#ships .ship>span{width:26px;height:26px;font-size:.6875rem}
#ships .ship small{font-size:.625rem}
#ships .ship i{display:none}
.arrivals>button{font-size:.6875rem}
.schedule{grid-auto-rows:calc((var(--ux-fit-h,300px) - 42px) / var(--berths,4));grid-template-columns:110px repeat(12,64px);min-width:0}
.details{order:1}
.schedule-wrap{order:2}
.arrivals>p#message{font-size:.6875rem;margin:2px 0}
.berth small{display:none}
.schedule-help{display:none}
.details{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.details>span,.details>h2,.details>dl,.details>.clearance,.details>.depth-sum,.details>.optimal-gap,.details>.finish-help{display:none}
.details>#finish{grid-column:1/-1}
.watch-head>div>span,.watch-head>div>small{display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.625rem}
.notices{font-size:.6875rem}
#ships .ship b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0;font-size:.875rem}
#ships .ship>div{min-width:0}
#ships .ship small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrivals{grid-template-columns:repeat(4,1fr)}
.arrivals>#undo,.arrivals>#redo,.arrivals>#unassign,.arrivals>#restart{font-size:0;padding:0 2px}
.arrivals>#undo::before{content:'Undo';font-size:.75rem}
.arrivals>#redo::before{content:'Redo';font-size:.75rem}
.arrivals>#unassign::before{content:'Return';font-size:.75rem}
.arrivals>#restart::before{content:'Clear';font-size:.75rem}
#ships{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
#ships .ship{grid-template-columns:1fr;padding:3px 5px;min-height:48px;gap:0}
#ships .ship>span{display:none}
#ships .ship b{font-size:.75rem}
#ships .ship small{font-size:.5625rem;white-space:normal;line-height:1.25}
.arrivals>.panel-title{display:none}
.watch-head>div>small{display:none}
.details{padding:4px 6px;grid-template-columns:auto 1fr}
.details>.clearance{display:flex!important;flex-direction:column;border:0;padding:0!important;margin:0;min-width:0}
.details>.clearance small{font-size:.625rem}
.details>.clearance b{font-size:.875rem}
.details>#finish{grid-column:2;min-height:44px}
}