:root{
  --paper:#eef0ee; --panel:#fbfcfb; --ink:#1b2226; --ink2:#55626a; --line:#cfd5d4; --acc:#2a4e66; --warn:#8a3b1c; --ok:#3d6b4a;
  --sea:#d9e3e8; --land:#e8e4d8; --coast:#a9a491; --coal:#5b5d63; --oil:#2a6f8f; --hos:#a33c3c; --fixed:#7a2e3b;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--paper:#14191c; --panel:#1d2427; --ink:#e4eaec; --ink2:#a5b2b8; --line:#344047; --acc:#8fbfd6; --warn:#e0a07f; --ok:#8fc49c;
    --sea:#1b2a33; --land:#2b2c27; --coast:#5c5a4f; --coal:#b4b6bc; --oil:#7ec3e0; --hos:#e08a8a; --fixed:#e09aa8}
}
:root[data-theme="dark"]{--paper:#14191c; --panel:#1d2427; --ink:#e4eaec; --ink2:#a5b2b8; --line:#344047; --acc:#8fbfd6; --warn:#e0a07f; --ok:#8fc49c;
  --sea:#1b2a33; --land:#2b2c27; --coast:#5c5a4f; --coal:#b4b6bc; --oil:#7ec3e0; --hos:#e08a8a; --fixed:#e09aa8}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); line-height:1.45}
main{max-width:1320px; margin:0 auto; padding:1rem 16px 2rem}
footer{max-width:1320px; margin:0 auto; padding:0 16px 2rem; font-size:.82rem; color:var(--ink2); border-top:1px solid var(--line)}
a{color:var(--acc)}
h1{font-size:2rem; margin:.3rem 0 .4rem} h2{margin:.3rem 0 .4rem; font-size:1.3rem} h3{margin:.2rem 0 .4rem; font-size:1.05rem}
.fine{font-size:.85rem; color:var(--ink2)}
.tag{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.sub{font-size:1.15rem; color:var(--ink2); margin-top:0}
.title{max-width:46rem; margin:2rem auto}
.row{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:.8rem 0}
button,select{font:inherit; padding:.35rem .8rem; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); cursor:pointer}
select{padding:.2rem .3rem; font-size:.85rem; max-width:9.5rem}
button:hover:not(:disabled){border-color:var(--acc)}
button:disabled{opacity:.45; cursor:default}
button.big{background:var(--acc); color:var(--panel); border-color:var(--acc)}
button.small{padding:.15rem .55rem; font-size:.82rem}
button.sel{border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc)}
.top{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:.6rem; border-bottom:2px solid var(--acc); padding-bottom:.5rem}
.stats{display:flex; gap:1rem; flex-wrap:wrap; font-size:.92rem}
.stats b{font-variant-numeric:tabular-nums}
.main{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1rem; margin-top:1rem}
@media (max-width:980px){.main{grid-template-columns:1fr}}
.card,.panel{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:.9rem 1.1rem}
.panel+.panel{margin-top:.7rem}
.tabs{display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:.6rem}
.tabs button{border-radius:7px 7px 0 0; font-size:.9rem}
.tabs button.on{background:var(--acc); color:var(--panel); border-color:var(--acc)}
svg.map{width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:10px; background:var(--sea)}
svg.map .land{fill:var(--land); stroke:var(--coast); stroke-width:.6}
svg.map .port circle{fill:var(--panel); stroke:var(--ink); stroke-width:1.2}
svg.map .port.west circle{fill:var(--acc)}
svg.map .port.fallen circle{fill:var(--line); stroke:var(--ink2)}
svg.map text{font-family:var(--serif); font-size:9px; fill:var(--ink); paint-order:stroke; stroke:var(--sea); stroke-width:2.5px}
svg.map .route{stroke:var(--ink2); stroke-width:.8; fill:none; opacity:.45}
svg.map .zone{opacity:.16}
svg.map .zone.sub{fill:#4a6fa5} svg.map .zone.air{fill:#b5562a} svg.map .zone.mine{fill:#6e5a8a}
svg.map .ship.coal{fill:var(--coal)} svg.map .ship.oil{fill:var(--oil)} svg.map .ship.hos{fill:var(--hos)}
svg.map .ship.escort{stroke:var(--ok); stroke-width:1.4}
svg.map .track{stroke:var(--fixed); stroke-width:1.4; stroke-dasharray:4 3; fill:none}
svg.map .mark circle{fill:var(--fixed)}
svg.map .mark text{fill:var(--fixed)}
.legend{display:flex; gap:.8rem; flex-wrap:wrap; font-size:.8rem; color:var(--ink2); margin:.4rem 0}
.legend i{display:inline-block; width:.8rem; height:.8rem; border-radius:50%; vertical-align:-.1rem; margin-right:.25rem}
table{border-collapse:collapse; width:100%; font-size:.86rem}
th,td{text-align:left; padding:.28rem .35rem; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:normal; color:var(--ink2); font-size:.78rem}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr.locked td{color:var(--ink2)}
tr.fixed td{color:var(--fixed)}
.scroll{max-height:62vh; overflow:auto}
.order{border-left:3px solid var(--acc); padding:.2rem 0 .2rem .7rem; margin:.5rem 0}
.order .rule{font-size:.85rem; color:var(--ink2)}
.order.new{border-left-color:var(--warn)}
.bar{height:7px; background:var(--line); border-radius:3px; overflow:hidden; margin:.15rem 0 .4rem}
.bar i{display:block; height:100%; background:var(--acc)}
.bar.late i{background:var(--warn)}
.log p{margin:.25rem 0; font-size:.86rem; border-bottom:1px dotted var(--line); padding-bottom:.25rem}
.log .record{color:var(--fixed)} .log .breach{color:var(--warn)} .log .fixed{color:var(--fixed)}
.cite{font-size:.78rem; color:var(--ink2)}
.warn{color:var(--warn)}
#modal{position:fixed; inset:0; background:rgba(10,14,16,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10}
#modal[hidden]{display:none}
.sheet{background:var(--panel); color:var(--ink); max-width:42rem; width:100%; max-height:88vh; overflow:auto; border-radius:12px; padding:1.2rem 1.4rem; position:relative}
.sheet .close{position:absolute; top:.6rem; right:.7rem}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
@media (max-width:700px){.grid2{grid-template-columns:1fr}}
.reading{border:1px solid var(--line); border-radius:8px; padding:.6rem .8rem; margin:.5rem 0}
.reading .counts{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2)}
.score{font-size:2.4rem; font-variant-numeric:tabular-nums}
.slots button{min-width:12rem; text-align:left}
.bulk{display:flex; gap:.3rem; flex-wrap:wrap; align-items:center; font-size:.85rem; margin:.3rem 0 .6rem}
.study{display:grid; grid-template-columns:14rem minmax(0,1fr); gap:1.5rem; margin-top:1rem}
@media (max-width:820px){.study{grid-template-columns:1fr}}
.toc ol{padding-left:1.2rem; margin:.4rem 0} .toc li{margin:.2rem 0} .toc a.on{font-weight:bold; text-decoration:none}
.readable{max-width:44rem}
.readable p{margin:.6rem 0}
blockquote{margin:1rem 0; padding:.6rem 1rem; border-left:3px solid var(--acc); background:var(--panel)}
blockquote .tr{display:block; margin-top:.4rem; color:var(--ink2); font-style:italic}
blockquote .cite{display:block; margin-top:.4rem}
figure.plate{margin:1rem 0} figure.plate img{max-width:100%; max-height:70vh; width:auto; height:auto; display:block; border:1px solid var(--line); border-radius:6px}
figure.plate figcaption{font-size:.86rem; color:var(--ink2); margin-top:.3rem}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:.6rem; margin:.8rem 0}
.ocard{border:1px solid var(--line); border-left:3px solid var(--warn); border-radius:8px; padding:.5rem .7rem; background:var(--panel)}
.ocard b{display:block}
a.buy{display:inline-block; padding:.4rem .9rem; border-radius:8px; background:var(--acc); color:var(--panel); text-decoration:none}