header.top .name { font-weight: 600; text-decoration: none; }
.stage .ov-attr a::after { content: " (ODbL)"; }

.ps-ov { max-width: 1180px; }
.ps-ov .ps-run, .ps-ov .ov-eps { margin-top: 24px; }
.ps-ov .ov-intro .kv { margin-top: 10px; }
.ps-ov .ps-glossary { margin: 8px 0 0; padding-left: 18px; }
.ps-ov .ps-glossary li { margin: 2px 0; }
.ps-ov .ps-start { margin-top: 20px; padding: 10px 12px; border-left: 3px solid var(--warn); background: var(--hover); }

.ps-watch { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; background: var(--bg); }
.ps-clock { font-variant-numeric: tabular-nums; }
.ps-line, .ps-known { font-size: 12px; margin-top: 3px; }
.ps-next { color: var(--warn); font-weight: 600; }
.ps-marine { font-variant-numeric: tabular-nums; }
.ps-marine span { white-space: nowrap; }
.ps-short { color: var(--red); }
.ps-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; margin-top: 4px; }
.ps-c b { font-variant-numeric: tabular-nums; }
.ps-c.ps-departed { color: var(--muted); }
.ps-c.ps-berthed b { color: #3d6a96; }
.ps-c.ps-frozen b { color: #24496f; }
.ps-feed, .ps-msgs { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; }
.ps-feed { max-height: 9.5em; overflow: auto; }
.ps-feed li, .ps-msgs li { padding: 3px 6px; border-left: 3px solid var(--line); margin-bottom: 3px; }
.ps-feed li.new { border-left-color: var(--warn); background: #fbf1dc; }
.ps-final { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.ps-watch-h { margin: 12px 0 4px; padding: 4px 8px; border-left: 3px solid var(--warn); background: var(--hover); font-size: 12px; font-weight: 600; }
.ps-future { opacity: 0.35; }

.bchart .ship.ps-departed { opacity: 0.45; }
.bchart .ship.ps-berthed .ship-r { fill: #a9bfd6; }
.bchart .ship.ps-frozen:not(.bad) .ship-o { stroke: #24496f; stroke-width: 1.8; }
.bchart .ship.ps-draft:not(.bad) .ship-o { stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 3 2; }
.bchart .ps-frozen-zone { fill: rgba(36, 73, 111, 0.08); }
.bchart .ps-freeze { stroke: #24496f; stroke-width: 1.3; stroke-dasharray: 4 3; }
.bchart .ps-freeze-t { fill: #24496f; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }

html.recording, html.recording * { cursor: none !important; }
html.recording .ro-page { display: flex; flex-direction: column; height: 100vh; }
html.recording .ro-grid { flex: 1; min-height: 0; }
html.recording .ro-left { height: 100%; overflow: auto; padding-bottom: 10px; }
html.recording .ro-right { height: 100%; display: flex; flex-direction: column; }
html.recording .ro-right .stage { flex: 1; height: auto; min-height: 0; }
html.recording .stage .ov-tr { display: none; }
html.recording .stage .ov-tl { right: 10px; }
html.recording .scene-traffic { left: 10px; padding: 5px 9px; }
html.recording .traffic-title, html.recording .traffic-detail, html.recording .traffic-cargo { display: none; }
html.recording .traffic-counts b { font-size: 12px; }
html.recording .stage .ov-attr { font-size: 13px; color: #fff; background: rgba(13, 30, 40, 0.92); padding: 2px 8px; }
html.recording .ps-watch { position: sticky; top: 0; z-index: 3; }
html.recording .ps-future { display: none; }

html.scene .ro-page { position: relative; height: 100vh; padding: 0; max-width: none; }
html.scene .ro-grid { display: block; height: 100%; }
html.scene .ro-right { position: absolute; inset: 0; }
html.scene .ro-right .chart-sec, html.scene .ro-left > section:not(.ps-watch), html.scene .scene-traffic, html.scene .stage .stepnav { display: none; }
html.scene .stage { height: 100%; border-radius: 0; }
html.scene .page-head { position: absolute; z-index: 5; top: 16px; left: 18px; margin: 0; padding: 8px 14px; border-radius: 6px;
  background: rgba(13, 30, 40, 0.88); color: #fff; }
html.scene .page-head h1 { font-size: 22px; margin: 0; color: #fff; }
html.scene .page-head .meta, html.scene .page-head .meta a { color: #c9d6e0; }
html.scene .ro-left { position: absolute; z-index: 5; bottom: 92px; left: 18px; width: 470px; height: auto; overflow: visible;
  padding: 0; background: none; pointer-events: none; }
html.scene .ps-watch { position: static; padding: 12px 14px; border: 0; border-radius: 6px; background: rgba(13, 30, 40, 0.88); color: #fff; }
html.scene .ps-watch h2 { color: #fff; font-size: 17px; }
html.scene .ps-watch .muted, html.scene .ps-c.ps-departed { color: #b8c7d3; }
html.scene .ps-clock b { font-size: 20px; }
html.scene .ps-c.ps-berthed b, html.scene .ps-c.ps-frozen b { color: #9fc4ea; }
html.scene .ps-known { display: none; }
html.scene .ps-marine { font-size: 14px; }
html.scene .ps-short { color: #ff9a8f; }
html.scene .ps-feed { max-height: none; overflow: visible; font-size: 14px; }
html.scene .ps-feed li { border-left-color: #f0b44c; }
html.scene .ps-feed li:not(.new) { display: none; }
html.scene .ps-feed li.new { background: rgba(251, 241, 220, 0.97); color: #1c1c1c; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden; }
html.scene .ps-final dt { color: #b8c7d3; }
html.scene .stage .ov-tl { top: 16px; left: auto; right: 18px; }