/* ==========================================================================
   YRproject — datamap.css: the map with tabs (yr/datamap.py, static/js/datamap.js), homepage and /radar.
   Greyscale page, colour only in the data: one hue per stream from the --k-* tokens. The tabs are radio
   buttons (CSS only); yr/datamap.py writes the per-tab transform and visibility rules next to the markup.
   ========================================================================== */

.dm { --dm-stops: var(--k-grid); --dm-work: var(--k-wind); --dm-vessels: var(--k-yard); --dm-heli: var(--k-lng); --dm-days: var(--ok);
  padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--line-soft); }
.dm h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; margin: 0; }
.dm-lead { color: var(--fg-muted); margin: var(--s3) 0 0; max-width: 40em; }
.dm-filter { margin: var(--s3) 0 0; padding: .55rem .9rem; border-radius: var(--r-sm); border: 1px solid rgb(56 225 214 / .35);
  background: rgb(56 225 214 / .06); color: var(--fg); font-size: .9375rem; max-width: 52rem; }
.dm-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.dm__tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: clamp(1.25rem, 2.5vw, 2rem) 0 var(--s5); }
.dm__tabs label { cursor: pointer; font-size: var(--fs-small); color: var(--fg-muted); border: 1px solid var(--line); border-radius: 99px;
  padding: .55em 1.05em; min-height: 2.75rem; display: inline-flex; align-items: center; gap: .55em; transition: color var(--t-fast), border-color var(--t-fast); user-select: none; }
.dm__tabs label::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; opacity: .9; }
.dm__tabs label[for=dm-stops]::before { background: var(--dm-stops); }
.dm__tabs label[for=dm-work]::before { background: var(--dm-work); }
.dm__tabs label[for=dm-vessels]::before { background: var(--dm-vessels); }
.dm__tabs label[for=dm-heli]::before { background: var(--dm-heli); }
.dm__tabs label[for=dm-days]::before { background: var(--dm-days); }
.dm__tabs label:hover { color: var(--fg); }

.dm__grid { display: grid; gap: var(--s5) clamp(1.5rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .dm__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }

.dm__stage { position: relative; min-width: 0; }
.dm-map { width: 100%; height: auto; display: block; background: #060c19; border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.dm-world { transform-box: view-box; transform-origin: 0 0; transition: transform .95s var(--ease-out); }
.dm-l { display: none; }
.dm-map circle { stroke: rgb(6 11 24 / .7); stroke-width: .6px; vector-effect: non-scaling-stroke; transition: opacity .35s ease; }
.dm-l--stops circle { fill: var(--dm-stops); fill-opacity: .72; }
.dm-l--work circle { fill: var(--dm-work); fill-opacity: .6; }
.dm-l--vessels circle { fill: var(--dm-vessels); }
.dm-l--vessels circle.is-way { fill: none; stroke: var(--dm-vessels); stroke-width: 1.3px; }
.dm-track { fill: none; stroke: var(--dm-vessels); stroke-opacity: .35; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.dm-l--heli circle { fill: var(--dm-heli); fill-opacity: .7; }
.dm-l--days circle { fill: var(--dm-days); }
.dm-l--days circle.dm-halo { fill: none; stroke: var(--dm-days); stroke-opacity: .5; stroke-width: 1px; animation: dm-pulse 3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dm-pulse { from { transform: scale(.35); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.dm-map circle.is-off { opacity: .08; }
.dm-map circle.is-past { opacity: .35; }
.dm-map circle[data-t] { cursor: default; }

.dm-tip { position: absolute; z-index: 3; pointer-events: none; max-width: 18rem; padding: .45rem .65rem; border-radius: var(--r-sm);
  background: var(--sea-3); border: 1px solid var(--line); font-size: var(--fs-micro); line-height: 1.35; color: var(--fg); box-shadow: var(--lift); }

.dm-slide { display: grid; grid-template-columns: auto; gap: var(--s2); margin-top: var(--s4); font-size: var(--fs-small); color: var(--fg-muted); }
.dm-slide[hidden] { display: none; }
.dm-slide span { font-variant-numeric: tabular-nums; color: var(--fg); }
.dm-slide input[type=range] { width: 100%; }

.dm__panels { min-width: 0; }
.dm-p { display: none; }
.dm-p h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 var(--s3); }
.dm-p > p { color: var(--fg-muted); margin: 0 0 var(--s4); max-width: 34em; }
.dm-src { font-size: var(--fs-micro); color: var(--fg-dim); line-height: 1.45; margin: var(--s4) 0 0 !important; }
.dm-src a { color: var(--fg-muted); }
.dm-more { margin: var(--s4) 0 0 !important; }

/* charts */
.dm-chart { width: 100%; height: auto; overflow: visible; margin-top: var(--s3); }
.dm-chart text { fill: var(--fg-dim); font-size: 11px; font-family: var(--font-mono); }
.dm-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: dm-grow .9s var(--ease-out) both; }
.dm-p--stops .dm-bar { fill: var(--dm-stops); fill-opacity: .55; }
.dm-p--stops .dm-bar.is-peak { fill-opacity: 1; }
.dm-p--work .dm-bar { fill: var(--dm-work); fill-opacity: .7; }
.dm-p--work .dm-bar.is-on { fill-opacity: 1; }
.dm-chart .dm-peak { fill: var(--fg); font-size: 12px; }
.dm-chart .dm-val { fill: var(--fg-muted); }
.dm-cursor { stroke: var(--fg); stroke-width: 1px; }
@keyframes dm-grow { from { transform: scaleY(0); } }

.dm-heli { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: .35rem; }
.dm-heli li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; align-items: end; gap: var(--s3); font-size: var(--fs-small); }
.dm-heli svg { width: 100%; height: 1.6rem; display: block; }
.dm-heli rect { fill: var(--dm-heli); fill-opacity: .75; transform-box: fill-box; transform-origin: 50% 100%; animation: dm-grow .9s var(--ease-out) both; }
.dm-h__n { color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-h__v { text-align: right; font-variant-numeric: tabular-nums; }
.dm-axisline { display: flex; justify-content: space-between; margin: var(--s2) 0 0 !important; padding: 0 4.5rem 0 8.25rem; font-size: var(--fs-micro); color: var(--fg-dim); font-family: var(--font-mono); }

.dm-cal { margin-top: var(--s3); max-width: 22rem; }
.dm-cal ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.dm-cal__head li { text-align: center; font-size: var(--fs-micro); color: var(--fg-dim); font-family: var(--font-mono); }
.dm-cal__days { margin-top: .3rem !important; }
.dm-cal__days li { aspect-ratio: 1; border-radius: .3rem; border: 1px solid var(--line); animation: dm-pop .5s var(--ease-out) both; }
.dm-cal__days li.is-ok { background: var(--dm-days); border-color: transparent; }
.dm-cal__days li.is-no { background: var(--sea-3); border-color: transparent; }
.dm-cal__days li.is-open { border-style: dashed; }
.dm-cal__days li.is-pad { border: 0; animation: none; }
@keyframes dm-pop { from { opacity: 0; transform: scale(.6); } }
.dm-key { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-micro); color: var(--fg-muted); margin: var(--s3) 0 0 !important; }
.dm-key span::before { content: ""; display: inline-block; width: .8em; height: .8em; border-radius: .2em; margin-right: .4em; vertical-align: -.05em; }
.k-ok::before { background: var(--dm-days); }
.k-no::before { background: var(--sea-3); }
.k-open::before { border: 1px dashed var(--line); }
.k-still::before { background: var(--dm-vessels); border-radius: 50% !important; }
.k-way::before { border: 1.5px solid var(--dm-vessels); border-radius: 50% !important; }

@media (max-width: 40rem) {
  .dm__tabs label { font-size: var(--fs-micro); padding: .45em .85em; }
  .dm-heli li { grid-template-columns: 6rem minmax(0, 1fr) 3.75rem; }
  .dm-axisline { padding: 0 3.75rem 0 6.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-world { transition: none; }
  .dm-bar, .dm-heli rect, .dm-cal__days li { animation: none; }
  .dm-l--days circle.dm-halo { animation: none; opacity: .5; transform: none; }
  .dm-map circle { transition: none; }
}
@media print { .dm__tabs, .dm-slide { display: none; } .dm-p, .dm-l { display: block; } }
/* the time sliders are not the fee scale: a plain track */
.dm-slide input[type=range]::-webkit-slider-runnable-track { background: var(--line); }
.dm-slide input[type=range]::-moz-range-track { background: var(--line); }
.dm-cap { font-size: var(--fs-micro); color: var(--fg-dim); margin: var(--s2) 0 0 !important; font-family: var(--font-mono); letter-spacing: .02em; }

/* the bridge (v0.29): a dot opens a small panel; one line and "Follow this area" under Planned stops and Work at sea */
.dm-hit { cursor: pointer; }
.dm-map .dm-hit circle { cursor: pointer; }
.dm-hit:focus { outline: none; }
.dm-hit:focus-visible circle, .dm-hit.is-picked circle { stroke: var(--fg); stroke-width: 2.5px; fill-opacity: 1; opacity: 1; }
.dm-dot { position: relative; margin-top: var(--s4); padding: var(--s4) var(--s5) var(--s4) var(--s4); border: 1px solid var(--line);
  border-radius: var(--r); background: var(--sea-2, var(--bg)); box-shadow: var(--lift); font-size: var(--fs-small); overflow-wrap: anywhere; }
.dm-dot[hidden] { display: none; }
@media (min-width: 48rem) {
  .dm-dot { position: absolute; z-index: 4; top: var(--s3); right: var(--s3); width: min(21rem, calc(100% - 2 * var(--s3))); margin: 0;
    max-height: calc(100% - 2 * var(--s3)); overflow: auto; }
  .dm-dot.is-left { right: auto; left: var(--s3); }
}
.dm-dot__k { margin: 0 2rem var(--s1) 0; font-size: var(--fs-micro); color: var(--fg-dim); font-family: var(--font-mono); letter-spacing: .02em; }
.dm-dot__h { margin: 0 2rem var(--s3) 0; font-size: 1.125rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.dm-dot__h:focus { outline: none; }
.dm-dot__h:focus-visible { outline: 2px solid var(--pro); outline-offset: 2px; }
.dm-dot__dl { margin: 0; display: grid; gap: .35rem; }
.dm-dot__dl div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: var(--s2); }
.dm-dot__dl dt { color: var(--fg-dim); }
.dm-dot__dl dd { margin: 0; color: var(--fg); }
.dm-dot__dl a { color: var(--fg-muted); }
.dm-dot__go { margin: var(--s4) 0 0; }
.dm-dot__x { position: absolute; top: .35rem; right: .35rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  font-size: 1.4rem; line-height: 1; color: var(--fg-muted); text-decoration: none; border-radius: 50%; }
.dm-dot__x:hover { color: var(--fg); background: var(--sea-3); }
.dm-bridge { color: var(--fg) !important; margin: var(--s4) 0 0 !important; }
.dm-more { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 22rem) { .dm-dot__dl div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media print { .dm-dot__x { display: none; } }